From 3ffebdd4e91296bc6468ef3998acf426a32851ad Mon Sep 17 00:00:00 2001 From: Ed Chao Date: Fri, 22 May 2026 18:06:16 +0900 Subject: [PATCH 01/12] refactor: migrate sass to vanilla css --- .stylelintrc | 13 +- Gemfile | 3 - Gemfile.lock | 11 - Procfile.dev | 3 +- app/assets/stylesheets/application.css | 52 + app/assets/stylesheets/application.scss | 48 - .../stylesheets/components/_action_bar.scss | 7 - .../stylesheets/components/_avatar.scss | 5 - app/assets/stylesheets/components/_badge.scss | 11 - .../stylesheets/components/_button.scss | 81 - app/assets/stylesheets/components/_card.scss | 72 - .../stylesheets/components/_dialog.scss | 31 - .../stylesheets/components/_dropdown.scss | 96 - app/assets/stylesheets/components/_flash.scss | 32 - app/assets/stylesheets/components/_form.scss | 47 - app/assets/stylesheets/components/_icon.scss | 28 - app/assets/stylesheets/components/_input.scss | 38 - app/assets/stylesheets/components/_list.scss | 63 - .../stylesheets/components/_loader.scss | 19 - app/assets/stylesheets/components/_logo.scss | 7 - app/assets/stylesheets/components/_nav.scss | 22 - .../stylesheets/components/_overlay.scss | 19 - .../stylesheets/components/_player.scss | 106 -- .../stylesheets/components/_search.scss | 15 - app/assets/stylesheets/components/_tab.scss | 29 - app/assets/stylesheets/components/_table.scss | 58 - .../stylesheets/components/action_bar.css | 7 + app/assets/stylesheets/components/avatar.css | 7 + app/assets/stylesheets/components/badge.css | 11 + app/assets/stylesheets/components/button.css | 81 + app/assets/stylesheets/components/card.css | 69 + app/assets/stylesheets/components/dialog.css | 31 + .../stylesheets/components/dropdown.css | 95 + app/assets/stylesheets/components/flash.css | 31 + app/assets/stylesheets/components/form.css | 47 + app/assets/stylesheets/components/icon.css | 29 + app/assets/stylesheets/components/input.css | 38 + app/assets/stylesheets/components/list.css | 63 + app/assets/stylesheets/components/loader.css | 21 + app/assets/stylesheets/components/logo.css | 9 + app/assets/stylesheets/components/nav.css | 21 + app/assets/stylesheets/components/overlay.css | 19 + app/assets/stylesheets/components/player.css | 106 ++ app/assets/stylesheets/components/search.css | 15 + .../components/{_sidebar.scss => sidebar.css} | 31 +- app/assets/stylesheets/components/tab.css | 29 + app/assets/stylesheets/components/table.css | 55 + app/assets/stylesheets/elements/_content.scss | 51 - app/assets/stylesheets/elements/_page.scss | 9 - app/assets/stylesheets/elements/content.css | 51 + app/assets/stylesheets/elements/page.css | 8 + .../stylesheets/generic/_box_sizing.scss | 9 - .../stylesheets/generic/_normalize.scss | 349 ---- app/assets/stylesheets/generic/_reset.scss | 52 - app/assets/stylesheets/generic/box_sizing.css | 11 + app/assets/stylesheets/generic/normalize.css | 351 ++++ app/assets/stylesheets/generic/reset.css | 54 + .../stylesheets/objects/_animations.scss | 41 - .../stylesheets/objects/_container.scss | 36 - app/assets/stylesheets/objects/_flex.scss | 107 -- app/assets/stylesheets/objects/_grid.scss | 43 - app/assets/stylesheets/objects/animations.css | 43 + app/assets/stylesheets/objects/container.css | 38 + app/assets/stylesheets/objects/flex.css | 109 ++ app/assets/stylesheets/objects/grid.css | 39 + app/assets/stylesheets/settings/_bridge.scss | 4 - app/assets/stylesheets/settings/_colors.scss | 18 - .../stylesheets/settings/_dark_theme.scss | 127 -- .../stylesheets/settings/_light_theme.scss | 127 -- app/assets/stylesheets/settings/_theme.scss | 22 - .../stylesheets/settings/_variables.scss | 45 - app/assets/stylesheets/settings/colors.css | 27 + app/assets/stylesheets/settings/theme.css | 148 ++ app/assets/stylesheets/settings/variables.css | 36 + app/assets/stylesheets/tools/_functions.scss | 23 - app/assets/stylesheets/tools/_responsive.scss | 16 - .../stylesheets/utilities/_background.scss | 7 - app/assets/stylesheets/utilities/_border.scss | 15 - app/assets/stylesheets/utilities/_cursor.scss | 3 - .../stylesheets/utilities/_display.scss | 20 - app/assets/stylesheets/utilities/_image.scss | 19 - .../stylesheets/utilities/_overflow.scss | 7 - .../stylesheets/utilities/_position.scss | 15 - app/assets/stylesheets/utilities/_sizing.scss | 25 - .../stylesheets/utilities/_spacing.scss | 90 - app/assets/stylesheets/utilities/_text.scss | 52 - .../stylesheets/utilities/_visibility.scss | 3 - .../stylesheets/utilities/background.css | 9 + app/assets/stylesheets/utilities/border.css | 21 + app/assets/stylesheets/utilities/bridge.css | 6 + app/assets/stylesheets/utilities/cursor.css | 5 + app/assets/stylesheets/utilities/display.css | 58 + app/assets/stylesheets/utilities/image.css | 21 + app/assets/stylesheets/utilities/overflow.css | 9 + app/assets/stylesheets/utilities/position.css | 17 + app/assets/stylesheets/utilities/sizing.css | 25 + app/assets/stylesheets/utilities/spacing.css | 149 ++ app/assets/stylesheets/utilities/text.css | 62 + .../stylesheets/utilities/visibility.css | 5 + esbuild.config.mjs | 38 + lib/tasks/lint.rake | 2 +- package-lock.json | 1605 ++++++++--------- package.json | 13 +- 103 files changed, 2957 insertions(+), 3069 deletions(-) create mode 100644 app/assets/stylesheets/application.css delete mode 100644 app/assets/stylesheets/application.scss delete mode 100644 app/assets/stylesheets/components/_action_bar.scss delete mode 100644 app/assets/stylesheets/components/_avatar.scss delete mode 100644 app/assets/stylesheets/components/_badge.scss delete mode 100644 app/assets/stylesheets/components/_button.scss delete mode 100644 app/assets/stylesheets/components/_card.scss delete mode 100644 app/assets/stylesheets/components/_dialog.scss delete mode 100644 app/assets/stylesheets/components/_dropdown.scss delete mode 100644 app/assets/stylesheets/components/_flash.scss delete mode 100644 app/assets/stylesheets/components/_form.scss delete mode 100644 app/assets/stylesheets/components/_icon.scss delete mode 100644 app/assets/stylesheets/components/_input.scss delete mode 100644 app/assets/stylesheets/components/_list.scss delete mode 100644 app/assets/stylesheets/components/_loader.scss delete mode 100644 app/assets/stylesheets/components/_logo.scss delete mode 100644 app/assets/stylesheets/components/_nav.scss delete mode 100644 app/assets/stylesheets/components/_overlay.scss delete mode 100644 app/assets/stylesheets/components/_player.scss delete mode 100644 app/assets/stylesheets/components/_search.scss delete mode 100644 app/assets/stylesheets/components/_tab.scss delete mode 100644 app/assets/stylesheets/components/_table.scss create mode 100644 app/assets/stylesheets/components/action_bar.css create mode 100644 app/assets/stylesheets/components/avatar.css create mode 100644 app/assets/stylesheets/components/badge.css create mode 100644 app/assets/stylesheets/components/button.css create mode 100644 app/assets/stylesheets/components/card.css create mode 100644 app/assets/stylesheets/components/dialog.css create mode 100644 app/assets/stylesheets/components/dropdown.css create mode 100644 app/assets/stylesheets/components/flash.css create mode 100644 app/assets/stylesheets/components/form.css create mode 100644 app/assets/stylesheets/components/icon.css create mode 100644 app/assets/stylesheets/components/input.css create mode 100644 app/assets/stylesheets/components/list.css create mode 100644 app/assets/stylesheets/components/loader.css create mode 100644 app/assets/stylesheets/components/logo.css create mode 100644 app/assets/stylesheets/components/nav.css create mode 100644 app/assets/stylesheets/components/overlay.css create mode 100644 app/assets/stylesheets/components/player.css create mode 100644 app/assets/stylesheets/components/search.css rename app/assets/stylesheets/components/{_sidebar.scss => sidebar.css} (50%) create mode 100644 app/assets/stylesheets/components/tab.css create mode 100644 app/assets/stylesheets/components/table.css delete mode 100644 app/assets/stylesheets/elements/_content.scss delete mode 100644 app/assets/stylesheets/elements/_page.scss create mode 100644 app/assets/stylesheets/elements/content.css create mode 100644 app/assets/stylesheets/elements/page.css delete mode 100644 app/assets/stylesheets/generic/_box_sizing.scss delete mode 100644 app/assets/stylesheets/generic/_normalize.scss delete mode 100644 app/assets/stylesheets/generic/_reset.scss create mode 100644 app/assets/stylesheets/generic/box_sizing.css create mode 100644 app/assets/stylesheets/generic/normalize.css create mode 100644 app/assets/stylesheets/generic/reset.css delete mode 100644 app/assets/stylesheets/objects/_animations.scss delete mode 100644 app/assets/stylesheets/objects/_container.scss delete mode 100644 app/assets/stylesheets/objects/_flex.scss delete mode 100644 app/assets/stylesheets/objects/_grid.scss create mode 100644 app/assets/stylesheets/objects/animations.css create mode 100644 app/assets/stylesheets/objects/container.css create mode 100644 app/assets/stylesheets/objects/flex.css create mode 100644 app/assets/stylesheets/objects/grid.css delete mode 100644 app/assets/stylesheets/settings/_bridge.scss delete mode 100644 app/assets/stylesheets/settings/_colors.scss delete mode 100644 app/assets/stylesheets/settings/_dark_theme.scss delete mode 100644 app/assets/stylesheets/settings/_light_theme.scss delete mode 100644 app/assets/stylesheets/settings/_theme.scss delete mode 100644 app/assets/stylesheets/settings/_variables.scss create mode 100644 app/assets/stylesheets/settings/colors.css create mode 100644 app/assets/stylesheets/settings/theme.css create mode 100644 app/assets/stylesheets/settings/variables.css delete mode 100644 app/assets/stylesheets/tools/_functions.scss delete mode 100644 app/assets/stylesheets/tools/_responsive.scss delete mode 100644 app/assets/stylesheets/utilities/_background.scss delete mode 100644 app/assets/stylesheets/utilities/_border.scss delete mode 100644 app/assets/stylesheets/utilities/_cursor.scss delete mode 100644 app/assets/stylesheets/utilities/_display.scss delete mode 100644 app/assets/stylesheets/utilities/_image.scss delete mode 100644 app/assets/stylesheets/utilities/_overflow.scss delete mode 100644 app/assets/stylesheets/utilities/_position.scss delete mode 100644 app/assets/stylesheets/utilities/_sizing.scss delete mode 100644 app/assets/stylesheets/utilities/_spacing.scss delete mode 100644 app/assets/stylesheets/utilities/_text.scss delete mode 100644 app/assets/stylesheets/utilities/_visibility.scss create mode 100644 app/assets/stylesheets/utilities/background.css create mode 100644 app/assets/stylesheets/utilities/border.css create mode 100644 app/assets/stylesheets/utilities/bridge.css create mode 100644 app/assets/stylesheets/utilities/cursor.css create mode 100644 app/assets/stylesheets/utilities/display.css create mode 100644 app/assets/stylesheets/utilities/image.css create mode 100644 app/assets/stylesheets/utilities/overflow.css create mode 100644 app/assets/stylesheets/utilities/position.css create mode 100644 app/assets/stylesheets/utilities/sizing.css create mode 100644 app/assets/stylesheets/utilities/spacing.css create mode 100644 app/assets/stylesheets/utilities/text.css create mode 100644 app/assets/stylesheets/utilities/visibility.css create mode 100644 esbuild.config.mjs diff --git a/.stylelintrc b/.stylelintrc index 5b7353c6..10ed2465 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,5 +1,6 @@ { - "extends": "stylelint-config-standard-scss", + "extends": "stylelint-config-standard", + "plugins": ["@stylistic/stylelint-plugin"], "rules": { "selector-class-pattern": null, "custom-property-empty-line-before": null, @@ -7,10 +8,14 @@ "value-keyword-case": ["lower", { "ignoreKeywords": ["BlinkMacSystemFont"] }], "keyframes-name-pattern": null, "property-no-vendor-prefix": null, - "color-function-notation": "legacy", + "color-function-notation": "modern", "alpha-value-notation": "number", - "max-line-length": null, "value-no-vendor-prefix": null, - "scss/dollar-variable-empty-line-before": null + "declaration-block-single-line-max-declarations": null, + "media-feature-range-notation": null, + "selector-not-notation": null, + "no-descending-specificity": null, + "import-notation": null, + "@stylistic/indentation": 2 } } diff --git a/Gemfile b/Gemfile index 158da152..1b079fba 100644 --- a/Gemfile +++ b/Gemfile @@ -13,9 +13,6 @@ gem "turbo-rails", "~> 2.0.0" # Install Stimulus on Rails gem "stimulus-rails", "~> 1.3.4" -# Bundle and process CSS in Rails -gem "cssbundling-rails", "~> 1.4.0" - # Bundle and transpile JavaScript in Rails gem "jsbundling-rails", "~> 1.3.0" diff --git a/Gemfile.lock b/Gemfile.lock index 6dd0c9a0..9b787d3b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -117,8 +117,6 @@ GEM bigdecimal rexml crass (1.0.6) - cssbundling-rails (1.4.3) - railties (>= 6.0.0) csv (3.3.5) cuprite (0.14.3) capybara (~> 3.0) @@ -149,7 +147,6 @@ GEM webrick (~> 1.7) websocket-driver (>= 0.6, < 0.8) ffi (1.17.4) - ffi (1.17.4-arm64-darwin) fugit (1.11.2) et-orbi (~> 1, >= 1.2.11) raabro (~> 1.4) @@ -235,8 +232,6 @@ GEM nokogiri (1.19.2) mini_portile2 (~> 2.8.2) racc (~> 1.4) - nokogiri (1.19.2-arm64-darwin) - racc (~> 1.4) ostruct (0.6.3) pagy (9.3.5) parallel (1.25.1) @@ -387,7 +382,6 @@ GEM stringio (3.2.0) thor (1.3.2) thruster (0.1.20) - thruster (0.1.20-arm64-darwin) timeout (0.6.1) tsort (0.2.0) turbo-rails (2.0.23) @@ -430,7 +424,6 @@ DEPENDENCIES browser (~> 6.2.0) bullet (~> 8.1.0) capybara (~> 3.40.0) - cssbundling-rails (~> 1.4.0) cuprite (~> 0.14.3) daemons (~> 1.4.0) debug @@ -497,7 +490,6 @@ CHECKSUMS connection_pool (3.0.2) sha256=33fff5ba71a12d2aa26cb72b1db8bba2a1a01823559fb01d29eb74c286e62e0a crack (1.0.1) sha256=ff4a10390cd31d66440b7524eb1841874db86201d5b70032028553130b6d4c7e crass (1.0.6) sha256=dc516022a56e7b3b156099abc81b6d2b08ea1ed12676ac7a5657617f012bd45d - cssbundling-rails (1.4.3) sha256=53aecd5a7d24ac9c8fcd92975acd0e830fead4ee4583d3d3d49bb64651946e41 csv (3.3.5) sha256=6e5134ac3383ef728b7f02725d9872934f523cb40b961479f69cf3afa6c8e73f cuprite (0.14.3) sha256=5d3b8f85f680f0979bc122bcae69e1f13499956eacdf6307a80498ce9131afbd daemons (1.4.1) sha256=8fc76d76faec669feb5e455d72f35bd4c46dc6735e28c420afb822fac1fa9a1d @@ -513,7 +505,6 @@ CHECKSUMS et-orbi (1.4.0) sha256=6c7e3c90779821f9e3b324c5e96fda9767f72995d6ae435b96678a4f3e2de8bc ferrum (0.13) sha256=3823a74a5cd772204d46ea67f0c5703cabe00e7716fcb18ec8955099944c1fd2 ffi (1.17.4) sha256=bcd1642e06f0d16fc9e09ac6d49c3a7298b9789bcb58127302f934e437d60acf - ffi (1.17.4-arm64-darwin) sha256=19071aaf1419251b0a46852abf960e77330a3b334d13a4ab51d58b31a937001b fugit (1.11.2) sha256=4c2e234f750c78d4514d0ca343a0b923847eac3846976fdb23ed4245d8fde6fe globalid (1.3.0) sha256=05c639ad6eb4594522a0b07983022f04aa7254626ab69445a0e493aa3786ff11 hashdiff (1.2.1) sha256=9c079dbc513dfc8833ab59c0c2d8f230fa28499cc5efb4b8dd276cf931457cd1 @@ -551,7 +542,6 @@ CHECKSUMS net-ssh (7.3.2) sha256=65029e213c380e20e5fd92ece663934ab0a0fe888e0cd7cc6a5b664074362dd4 nio4r (2.7.5) sha256=6c90168e48fb5f8e768419c93abb94ba2b892a1d0602cb06eef16d8b7df1dca1 nokogiri (1.19.2) sha256=38fdd8b59db3d5ea9e7dfb14702e882b9bf819198d5bf976f17ebce12c481756 - nokogiri (1.19.2-arm64-darwin) sha256=58d8ea2e31a967b843b70487a44c14c8ba1866daa1b9da9be9dbdf1b43dee205 ostruct (0.6.3) sha256=95a2ed4a4bd1d190784e666b47b2d3f078e4a9efda2fccf18f84ddc6538ed912 pagy (9.3.5) sha256=78a9513150b96f872c092ab1cd95bb818ea29b2c417a4302290bc9293f8f0fd7 parallel (1.25.1) sha256=12e089b9aa36ea2343f6e93f18cfcebd031798253db8260590d26a7f70b1ab90 @@ -605,7 +595,6 @@ CHECKSUMS stringio (3.2.0) sha256=c37cb2e58b4ffbd33fe5cd948c05934af997b36e0b6ca6fdf43afa234cf222e1 thor (1.3.2) sha256=eef0293b9e24158ccad7ab383ae83534b7ad4ed99c09f96f1a6b036550abbeda thruster (0.1.20) sha256=c05f2fbcae527bbe093a6e6d84fb12d9d680617e7c162325d9b97e8e9d4b5201 - thruster (0.1.20-arm64-darwin) sha256=630cf8c273f562063b92ea5ccd7a721d7ba6130cc422c823727f4744f6d0770e timeout (0.6.1) sha256=78f57368a7e7bbadec56971f78a3f5ecbcfb59b7fcbb0a3ed6ddc08a5094accb tsort (0.2.0) sha256=9650a793f6859a43b6641671278f79cfead60ac714148aabe4e3f0060480089f turbo-rails (2.0.23) sha256=ee0d90733aafff056cf51ff11e803d65e43cae258cc55f6492020ec1f9f9315f diff --git a/Procfile.dev b/Procfile.dev index 68dce660..75025794 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,2 @@ web: bin/rails server -js: npm run build-dev -- --watch -css: npm run build-dev:css -- --watch \ No newline at end of file +assets: node esbuild.config.mjs --dev --watch \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css new file mode 100644 index 00000000..58bab3d8 --- /dev/null +++ b/app/assets/stylesheets/application.css @@ -0,0 +1,52 @@ +@layer settings, generic, elements, objects, components, utilities; + +@import "./settings/colors.css"; +@import "./settings/variables.css"; +@import "./settings/theme.css"; + +@import "./generic/normalize.css"; +@import "./generic/reset.css"; +@import "./generic/box_sizing.css"; + +@import "./elements/page.css"; +@import "./elements/content.css"; + +@import "./objects/animations.css"; +@import "./objects/grid.css"; +@import "./objects/flex.css"; +@import "./objects/container.css"; + +@import "./components/form.css"; +@import "./components/logo.css"; +@import "./components/button.css"; +@import "./components/icon.css"; +@import "./components/tab.css"; +@import "./components/card.css"; +@import "./components/loader.css"; +@import "./components/input.css"; +@import "./components/dropdown.css"; +@import "./components/dialog.css"; +@import "./components/overlay.css"; +@import "./components/list.css"; +@import "./components/avatar.css"; +@import "./components/flash.css"; +@import "./components/player.css"; +@import "./components/sidebar.css"; +@import "./components/nav.css"; +@import "./components/action_bar.css"; +@import "./components/table.css"; +@import "./components/search.css"; +@import "./components/badge.css"; + +@import "./utilities/display.css"; +@import "./utilities/spacing.css"; +@import "./utilities/sizing.css"; +@import "./utilities/overflow.css"; +@import "./utilities/position.css"; +@import "./utilities/text.css"; +@import "./utilities/border.css"; +@import "./utilities/background.css"; +@import "./utilities/image.css"; +@import "./utilities/cursor.css"; +@import "./utilities/visibility.css"; +@import "./utilities/bridge.css"; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss deleted file mode 100644 index f71b9b8b..00000000 --- a/app/assets/stylesheets/application.scss +++ /dev/null @@ -1,48 +0,0 @@ -@use "settings/theme"; -@use "settings/bridge"; - -@use "generic/normalize"; -@use "generic/reset"; -@use "generic/box_sizing"; - -@use "elements/page"; -@use "elements/content"; - -@use "objects/animations"; -@use "objects/grid"; -@use "objects/flex"; -@use "objects/container"; - -@use "components/form"; -@use "components/logo"; -@use "components/button"; -@use "components/icon"; -@use "components/tab"; -@use "components/card"; -@use "components/loader"; -@use "components/input"; -@use "components/dropdown"; -@use "components/dialog"; -@use "components/overlay"; -@use "components/list"; -@use "components/avatar"; -@use "components/flash"; -@use "components/player"; -@use "components/sidebar"; -@use "components/nav"; -@use "components/action_bar"; -@use "components/table"; -@use "components/search"; -@use "components/badge"; - -@use "utilities/display"; -@use "utilities/spacing"; -@use "utilities/sizing"; -@use "utilities/overflow"; -@use "utilities/position"; -@use "utilities/text"; -@use "utilities/border"; -@use "utilities/background"; -@use "utilities/image"; -@use "utilities/cursor"; -@use "utilities/visibility"; diff --git a/app/assets/stylesheets/components/_action_bar.scss b/app/assets/stylesheets/components/_action_bar.scss deleted file mode 100644 index bb2950c5..00000000 --- a/app/assets/stylesheets/components/_action_bar.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use "../tools/functions" as *; - -.c-action-bar { - padding: spacing("tiny") spacing("narrow"); - border-radius: border-radius("medium"); - background: var(--action-bar-bg-color); -} diff --git a/app/assets/stylesheets/components/_avatar.scss b/app/assets/stylesheets/components/_avatar.scss deleted file mode 100644 index ebc56832..00000000 --- a/app/assets/stylesheets/components/_avatar.scss +++ /dev/null @@ -1,5 +0,0 @@ -.c-avatar { - width: 25px; - height: 25px; - border-radius: 50%; -} diff --git a/app/assets/stylesheets/components/_badge.scss b/app/assets/stylesheets/components/_badge.scss deleted file mode 100644 index 9761762a..00000000 --- a/app/assets/stylesheets/components/_badge.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use "../tools/functions" as *; - -.c-badge { - display: inline-block; - border-radius: border-radius("large"); - background-color: var(--badge-bg-color); - color: var(--badge-color); - font-size: font-size("small"); - padding: 2px 13px; - font-weight: 500; -} diff --git a/app/assets/stylesheets/components/_button.scss b/app/assets/stylesheets/components/_button.scss deleted file mode 100644 index 01a441a4..00000000 --- a/app/assets/stylesheets/components/_button.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use "../tools/functions" as *; - -.c-button { - text-align: center; - display: inline-block; - border-radius: border-radius("medium"); - border: none; - padding: spacing("tiny") spacing("narrow"); - cursor: pointer; - font-size: font-size("medium"); - - &:hover { - text-decoration: none; - } -} - -.c-button--primary { - color: var(--btn-color); - background: var(--btn-primary-bg-color); - - &:hover { - background: var(--btn-primary-hover-bg-color); - color: var(--btn-color); - } -} - -.c-button--secondary { - background: var(--btn-secondary-bg-color); - color: var(--btn-secondary-color); - - &:hover { - background: var(--btn-secondary-hover-bg-color); - color: var(--btn-secondary-color); - } -} - -.c-button--link { - text-align: left; - background: none; - color: var(--text-primary-color); - padding: 0; - - &:hover { - color: var(--link-active-color) !important; - } -} - -.c-button--small { - padding: 2px spacing("tiny"); - font-size: font-size("small"); -} - -.c-button--outline { - border-radius: border-radius("large"); - color: var(--btn-outline-color); - border: 1px solid var(--btn-outline-border-color); - background: var(--btn-outline-bg-color); - - &:hover { - background: var(--btn-outline-hover-bg-color); - } -} - -.c-button--icon { - display: inline-flex; - padding: spacing("tiny"); - border-radius: border-radius("medium"); - color: currentcolor; - - &:hover { - background: var(--btn-icon-hover-bg-color); - } -} - -.c-button--full-width { - width: 100%; -} - -.c-button[disabled] { - opacity: 0.6; -} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss deleted file mode 100644 index ce3aec2f..00000000 --- a/app/assets/stylesheets/components/_card.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use "../tools/functions" as *; -@use "../tools/responsive"; - -.c-card { - width: 100%; -} - -.c-card--border { - border: 1px solid var(--card-border-color); - border-radius: border-radius("medium"); - background-color: var(--card-bg-color); -} - -.c-card--border .c-card__body { - padding: spacing("narrow"); -} - -.c-card__image { - display: block; - margin-bottom: spacing("narrow"); -} - -.c-card__image, -.c-card__image img { - border-radius: border-radius("medium"); -} - -.c-card__body__title { - margin-bottom: spacing("narrow"); - font-size: font-size("large"); -} - -.c-card__body__text { - display: block; - margin-bottom: spacing("tiny"); -} - -.c-card__body__text:last-child { - margin-bottom: 0; -} - -.c-card--horizontal { - display: flex; - - .c-card__image { - margin-right: spacing("medium"); - } - - .c-card__body { - flex-grow: 1; - width: 0; - } -} - -@include responsive.media-query using ($breakpoint) { - @if $breakpoint == "narrow" { - .c-card--center\@narrow { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - - .c-card__image { - margin: 0 0 spacing("small"); - } - - .c-card__body { - width: auto; - } - } - } -} diff --git a/app/assets/stylesheets/components/_dialog.scss b/app/assets/stylesheets/components/_dialog.scss deleted file mode 100644 index a2df18c0..00000000 --- a/app/assets/stylesheets/components/_dialog.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use "../tools/functions" as *; - -.c-dialog { - padding: 0; - margin-top: 100px; - background: var(--dialog-bg-color); - border: none; - border-radius: border-radius("medium"); - width: 100%; - max-width: 360px; - color: inherit; -} - -.c-dialog::backdrop { - background-color: var(--dialog-backdrop-color); -} - -.c-dialog__header { - padding: spacing("narrow") spacing("small"); - background: var(--dialog-header-bg-color); - color: var(--dialog-header-color); - border-top-left-radius: border-radius("medium"); - border-top-right-radius: border-radius("medium"); -} - -.c-dialog__content { - padding: spacing("narrow") spacing("small"); - overflow-y: auto; - min-height: 50px; - max-height: calc(100vh - 300px); -} diff --git a/app/assets/stylesheets/components/_dropdown.scss b/app/assets/stylesheets/components/_dropdown.scss deleted file mode 100644 index cfbd85c0..00000000 --- a/app/assets/stylesheets/components/_dropdown.scss +++ /dev/null @@ -1,96 +0,0 @@ -@use "../tools/functions" as *; -@use "../settings/variables"; - -.c-dropdown { - display: inline-block; - position: relative; -} - -.c-dropdown > summary { - cursor: pointer; - list-style: none; - - &::-webkit-details-marker { - display: none; - } -} - -.c-dropdown[open] > summary { - &::before { - position: fixed; - inset: 0; - z-index: variables.$dropdown-overlay-zindex; - display: block; - cursor: default; - content: ""; - background: transparent; - } -} - -.c-dropdown:not([open]) > *:not(summary) { - display: none; -} - -.c-dropdown__menu { - position: absolute; - right: 0; - top: 0; - z-index: variables.$dropdown-zindex; - min-width: 100px; - background: var(--dropdown-bg-color); - border-radius: border-radius("medium"); - color: var(--dropdown-color); - box-shadow: 0 1px 6px var(--dropdown-shadow-color); - max-height: 300px; - overflow-y: auto; -} - -.c-dropdown__menu > hr { - margin: 0; -} - -.c-dropdown__menu--right { - left: 0; - right: auto; -} - -.c-dropdown__item { - display: block; - padding: spacing("narrow"); - white-space: nowrap; -} - -a.c-dropdown__item { - text-decoration: none; - color: var(--dropdown-color); -} - -form.c-dropdown__item input[type="submit"], -form.c-dropdown__item button[type="submit"] { - width: 100%; - background: var(--dropdown-bg-color); - border: none; - cursor: pointer; -} - -.c-dropdown__item:first-child, -form.c-dropdown__item:first-child input[type="submit"], -form.c-dropdown__item:first-child button[type="submit"] { - border-top-left-radius: border-radius("medium"); - border-top-right-radius: border-radius("medium"); -} - -.c-dropdown__item:last-child, -form.c-dropdown__item:last-child input[type="submit"], -form.c-dropdown__item:last-child button[type="submit"] { - border-bottom-left-radius: border-radius("medium"); - border-bottom-right-radius: border-radius("medium"); -} - -a.c-dropdown__item:hover, -form.c-dropdown__item:hover input[type="submit"], -form.c-dropdown__item:hover button[type="submit"], -.c-dropdown__item:hover { - background: var(--dropdown-active-color); - color: var(--dropdown-color); -} diff --git a/app/assets/stylesheets/components/_flash.scss b/app/assets/stylesheets/components/_flash.scss deleted file mode 100644 index b0674877..00000000 --- a/app/assets/stylesheets/components/_flash.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use "../tools/functions" as *; -@use "../settings/variables"; - -.c-flash { - position: absolute; - margin: 0; - padding: 0; - z-index: variables.$flash-zindex; - backface-visibility: hidden; - filter: blur(0); - max-width: 90%; - top: 10%; - left: 50%; - width: 325px; - transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1); -} - -.c-flash__body { - padding: spacing("tiny"); - text-align: center; - border-radius: border-radius("medium"); -} - -.c-flash__body--alert { - background-color: var(--flash-alert-bg-color); - color: var(--flash-color); -} - -.c-flash__body--notice { - background-color: var(--flash-notice-bg-color); - color: var(--flash-color); -} diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss deleted file mode 100644 index 74ab2900..00000000 --- a/app/assets/stylesheets/components/_form.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use "../tools/functions" as *; - -.c-form { - padding-bottom: spacing("medium"); -} - -.c-form__field { - margin-top: spacing("small"); -} - -.c-form__field--inline { - display: flex; - align-items: center; -} - -.c-form__field--submit { - margin-top: spacing("medium"); -} - -.c-form__field label { - display: block; - margin-bottom: spacing("narrow"); -} - -.c-form__field label[disabled] { - opacity: 0.5; -} - -.c-form__field--inline label { - margin-bottom: 0; - margin-right: spacing("tiny"); -} - -.c-form__field > label { - font-weight: bold; -} - -.c-form__radio { - display: inline-flex; - align-items: center; - margin-right: spacing("narrow"); -} - -.c-form__radio label { - margin-bottom: 0; - margin-left: spacing("tiny"); -} diff --git a/app/assets/stylesheets/components/_icon.scss b/app/assets/stylesheets/components/_icon.scss deleted file mode 100644 index b513ff8d..00000000 --- a/app/assets/stylesheets/components/_icon.scss +++ /dev/null @@ -1,28 +0,0 @@ -.c-icon { - width: 18px; - height: 18px; -} - -.c-icon--small { - width: 16px; - height: 16px; -} - -.c-icon--narrow { - width: 14px; - height: 14px; -} - -.c-icon--large { - width: 22px; - height: 22px; -} - -.c-icon--active { - color: var(--icon-active-color); -} - -.c-icon--emphasis { - color: var(--icon-emphasis-color); -} - diff --git a/app/assets/stylesheets/components/_input.scss b/app/assets/stylesheets/components/_input.scss deleted file mode 100644 index 31eeddf9..00000000 --- a/app/assets/stylesheets/components/_input.scss +++ /dev/null @@ -1,38 +0,0 @@ -@use "../tools/functions" as *; - -input.c-input { - width: 100%; - background: var(--input-bg-color); - border: none; - color: var(--input-color); - padding: spacing("tiny"); - border-radius: border-radius("medium"); - filter: none; -} - -.c-input-group { - display: flex !important; - align-items: center; - background: var(--input-bg-color); - border-radius: border-radius("medium"); - padding: 0 spacing("tiny"); -} - -.c-input-group input { - width: 0 !important; - flex-grow: 1; -} - -.c-input-group input:focus { - outline: none; -} - -.c-input-group__icon { - display: flex; - align-items: center; - color: var(--input-icon-color); -} - -.c-input-group__icon a { - color: var(--input-icon-color); -} diff --git a/app/assets/stylesheets/components/_list.scss b/app/assets/stylesheets/components/_list.scss deleted file mode 100644 index 19f3227f..00000000 --- a/app/assets/stylesheets/components/_list.scss +++ /dev/null @@ -1,63 +0,0 @@ -@use "../tools/functions" as *; - -.c-list { - list-style: none; - padding: 0; - margin: 0; -} - -.c-list--grouped { - background-color: var(--list-grouped-bg-color); - padding: 0 spacing("narrow"); - border-radius: border-radius("large"); -} - -.c-list__item { - width: 100%; - padding: spacing("narrow") 0; - text-decoration: none; - border-bottom: 1px solid var(--list-border-color); -} - -.c-list__item--divider { - margin-top: spacing("small"); - font-weight: bold; - text-transform: uppercase; -} - -.c-list__item__subtext { - display: inline-block; - margin-top: spacing("tiny"); - color: var(--list-subtext-color); -} - -.c-list--border-none .c-list__item { - border-bottom: none; -} - -.c-list--grouped .c-list__item { - padding: spacing("small") 0; -} - -.c-list__item:last-child { - border-bottom: none; -} - -.c-list__item.is-active * { - color: var(--list-active-color); -} - -.c-list.is-dragging .c-list__item { - border: none; -} - -.c-list.is-dragging .c-list__item:not(.is-dragging-source) * { - // Prevent dragleave from firing when dragging into a child element - pointer-events: none; - opacity: 0.85; -} - -.c-list__item.is-dragging-over { - border: 2px dashed var(--list-active-color) !important; - border-radius: border-radius("medium"); -} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_loader.scss b/app/assets/stylesheets/components/_loader.scss deleted file mode 100644 index 2b6fba74..00000000 --- a/app/assets/stylesheets/components/_loader.scss +++ /dev/null @@ -1,19 +0,0 @@ -.c-loader { - border: 5px solid var(--loader-secondary-bg-color); - border-top: 5px solid var(--loader-bg-color); - border-radius: 50%; - width: 40px; - height: 40px; -} - -.c-loader--small { - height: 22px; - width: 22px; - border-width: 3px; -} - -.c-loader--large { - height: 55px; - width: 55px; - border-width: 7px; -} diff --git a/app/assets/stylesheets/components/_logo.scss b/app/assets/stylesheets/components/_logo.scss deleted file mode 100644 index e66bd9dc..00000000 --- a/app/assets/stylesheets/components/_logo.scss +++ /dev/null @@ -1,7 +0,0 @@ -.c-logo { - display: inline-block; - background: url("logo.svg") no-repeat top left; - background-size: contain; - width: 70px; - height: 70px; -} diff --git a/app/assets/stylesheets/components/_nav.scss b/app/assets/stylesheets/components/_nav.scss deleted file mode 100644 index 06b5af3f..00000000 --- a/app/assets/stylesheets/components/_nav.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use "../tools/functions" as *; -@use "../settings/variables"; - -.c-nav { - padding: spacing("small") spacing("small") 0; - box-shadow: var(--nav-shadow); - z-index: variables.$nav-zindex; -} - -.c-nav--primary { - position: relative; - - &::before { - content: ""; - position: absolute; - inset: 0; - backdrop-filter: blur(15px); - -webkit-backdrop-filter: blur(15px); - z-index: variables.$base-zindex - 1; - background: var(--nav-primary-bg-color); - } -} diff --git a/app/assets/stylesheets/components/_overlay.scss b/app/assets/stylesheets/components/_overlay.scss deleted file mode 100644 index 54353420..00000000 --- a/app/assets/stylesheets/components/_overlay.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use "../settings/variables"; - -.c-overlay { - position: absolute; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - background: inherit; -} - -.c-overlay--fixed { - z-index: variables.$fixed-overlay-zindex; - position: fixed; -} - -.c-overlay--blur { - background: var(--overlay-blur-bg-color); -} diff --git a/app/assets/stylesheets/components/_player.scss b/app/assets/stylesheets/components/_player.scss deleted file mode 100644 index 388f77ec..00000000 --- a/app/assets/stylesheets/components/_player.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use "../tools/functions" as *; - -.c-player { - background: var(--player-bg-color); -} - -.c-player__control { - background: var(--player-bg-color); - position: relative; - padding: 0 spacing("wide"); - color: var(--player-control-color); -} - -.c-player__control__main { - color: var(--player-control-main-color); - padding: spacing("small") 0; - border-bottom: 1px solid var(--player-control-border-color); -} - -.c-player__control__secondary { - padding: spacing("tiny") 0; -} - -.c-player__header { - transition: max-height 0.2s ease-out; - max-height: 0; - visibility: hidden; - background: inherit; -} - -.c-player__header__content { - background: var(--player-header-bg-color); -} - -.c-player__header__background { - position: absolute; - inset: 0; - filter: blur(15px); - background-position: center; - background-repeat: no-repeat; - background-size: cover; -} - -.c-player__header.is-expanded { - max-height: 200px; - visibility: visible; -} - -.c-player__progress { - display: flex; - align-items: flex-start; - height: 4px; -} - -.c-player__progress progress { - appearance: none; - height: 2px; - border: 0 none; - background: var(--player-progress-bg-color); -} - -.c-player__progress progress::-moz-progress-bar { - background: var(--player-progress-color); -} - -.c-player__progress progress::-webkit-progress-bar { - background: transparent; -} - -.c-player__progress progress::-webkit-progress-value { - background: var(--player-progress-color); -} - -.c-player__progress:hover progress { - height: 4px; - background: var(--player-progress-hover-bg-color); -} - -.c-player__volume { - -webkit-appearance: none; - appearance: none; - width: 100%; - cursor: pointer; - outline: none; - border-radius: border-radius("large"); - height: 5px; - background: linear-gradient(to right, var(--player-volume-color) var(--progress), var(--player-volume-bg-color) var(--progress)); -} - -.c-player__volume::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - height: 12px; - width: 12px; - background-color: var(--player-volume-color); - border-radius: 50%; - border: none; -} - -.c-player__volume::-moz-range-thumb { - height: 12px; - width: 12px; - background-color: var(--player-volume-color); - border-radius: 50%; - border: none; -} diff --git a/app/assets/stylesheets/components/_search.scss b/app/assets/stylesheets/components/_search.scss deleted file mode 100644 index bb361927..00000000 --- a/app/assets/stylesheets/components/_search.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use "../tools/functions" as *; - -.c-search { - max-width: 380px; - width: 100%; - margin: 0 spacing("small"); -} - -.c-search .c-loader { - display: none; -} - -.c-search.is-loading .c-loader { - display: revert; -} diff --git a/app/assets/stylesheets/components/_tab.scss b/app/assets/stylesheets/components/_tab.scss deleted file mode 100644 index 9f0b86b0..00000000 --- a/app/assets/stylesheets/components/_tab.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use "../tools/functions" as *; - -.c-tab { - display: flex; - justify-content: center; - list-style: none; - margin: 0; - padding: 0; -} - -.c-tab__item { - padding-bottom: spacing("narrow"); - border-bottom: 2px solid transparent; - margin: 0 spacing("large"); -} - -.c-tab__item a { - color: var(--tab-color); - text-decoration: none; -} - -.c-tab__item.is-active a, -.c-tab__item a:hover { - color: var(--tab-active-color); -} - -.c-tab__item.is-active { - border-color: var(--tab-active-color); -} diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss deleted file mode 100644 index 25a6b6e2..00000000 --- a/app/assets/stylesheets/components/_table.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use "../tools/responsive"; -@use "../tools/functions" as *; - -.c-table { - display: table; - width: 100%; - table-layout: auto; - text-align: left; -} - -.c-table[role="table"] { - display: grid; - grid-template-columns: var(--grid-tc); - --grid-tc: repeat(5, auto); -} - -.c-table [role="rowgroup"] { - display: contents; -} - -.c-table [role="row"] { - display: contents; -} - -.c-table tr, -.c-table [role="columnheader"], -.c-table [role="cell"] { - border-bottom: 1px solid var(--table-border-color); -} - -.c-table [role="columnheader"] { - font-weight: bold; -} - -.c-table th, -.c-table td, -.c-table [role="columnheader"], -.c-table [role="cell"] { - display: inline-flex; - align-items: center; - padding: spacing(narrow); - text-align: left; - color: var(--table-color); -} - -.c-table [role="cell"][span="row"] { - grid-column: 1 / -1; -} - -@include responsive.media-query using ($breakpoint) { - @if $breakpoint == "medium" { - .c-table[role="table"][cols-at-medium="3"] { --grid-tc: repeat(3, auto); } - } - - @if $breakpoint == "small" { - .c-table[role="table"][cols-at-small="2"] { --grid-tc: repeat(2, auto); } - } -} diff --git a/app/assets/stylesheets/components/action_bar.css b/app/assets/stylesheets/components/action_bar.css new file mode 100644 index 00000000..2b6debdb --- /dev/null +++ b/app/assets/stylesheets/components/action_bar.css @@ -0,0 +1,7 @@ +@layer components { + .c-action-bar { + padding: var(--spacing-tiny) var(--spacing-narrow); + border-radius: var(--border-radius-medium); + background: var(--action-bar-bg-color); + } +} diff --git a/app/assets/stylesheets/components/avatar.css b/app/assets/stylesheets/components/avatar.css new file mode 100644 index 00000000..b81a5975 --- /dev/null +++ b/app/assets/stylesheets/components/avatar.css @@ -0,0 +1,7 @@ +@layer components { + .c-avatar { + width: 25px; + height: 25px; + border-radius: 50%; + } +} diff --git a/app/assets/stylesheets/components/badge.css b/app/assets/stylesheets/components/badge.css new file mode 100644 index 00000000..e54881b5 --- /dev/null +++ b/app/assets/stylesheets/components/badge.css @@ -0,0 +1,11 @@ +@layer components { + .c-badge { + display: inline-block; + border-radius: var(--border-radius-large); + background-color: var(--badge-bg-color); + color: var(--badge-color); + font-size: var(--font-size-small); + padding: 2px 13px; + font-weight: 500; + } +} diff --git a/app/assets/stylesheets/components/button.css b/app/assets/stylesheets/components/button.css new file mode 100644 index 00000000..e5174cd5 --- /dev/null +++ b/app/assets/stylesheets/components/button.css @@ -0,0 +1,81 @@ +@layer components { + .c-button { + text-align: center; + display: inline-block; + border-radius: var(--border-radius-medium); + border: none; + padding: var(--spacing-tiny) var(--spacing-narrow); + cursor: pointer; + font-size: var(--font-size-medium); + + &:hover { + text-decoration: none; + } + } + + .c-button--primary { + color: var(--btn-color); + background: var(--btn-primary-bg-color); + + &:hover { + background: var(--btn-primary-hover-bg-color); + color: var(--btn-color); + } + } + + .c-button--secondary { + background: var(--btn-secondary-bg-color); + color: var(--btn-secondary-color); + + &:hover { + background: var(--btn-secondary-hover-bg-color); + color: var(--btn-secondary-color); + } + } + + .c-button--link { + text-align: left; + background: none; + color: var(--text-primary-color); + padding: 0; + + &:hover { + color: var(--link-active-color); + } + } + + .c-button--small { + padding: 2px var(--spacing-tiny); + font-size: var(--font-size-small); + } + + .c-button--outline { + border-radius: var(--border-radius-large); + color: var(--btn-outline-color); + border: 1px solid var(--btn-outline-border-color); + background: var(--btn-outline-bg-color); + + &:hover { + background: var(--btn-outline-hover-bg-color); + } + } + + .c-button--icon { + display: inline-flex; + padding: var(--spacing-tiny); + border-radius: var(--border-radius-medium); + color: currentcolor; + + &:hover { + background: var(--btn-icon-hover-bg-color); + } + } + + .c-button--full-width { + width: 100%; + } + + .c-button[disabled] { + opacity: 0.6; + } +} diff --git a/app/assets/stylesheets/components/card.css b/app/assets/stylesheets/components/card.css new file mode 100644 index 00000000..7a6dbf27 --- /dev/null +++ b/app/assets/stylesheets/components/card.css @@ -0,0 +1,69 @@ +@layer components { + .c-card { + width: 100%; + } + + .c-card--border { + border: 1px solid var(--card-border-color); + border-radius: var(--border-radius-medium); + background-color: var(--card-bg-color); + } + + .c-card--border .c-card__body { + padding: var(--spacing-narrow); + } + + .c-card__image { + display: block; + margin-bottom: var(--spacing-narrow); + } + + .c-card__image, + .c-card__image img { + border-radius: var(--border-radius-medium); + } + + .c-card__body__title { + margin-bottom: var(--spacing-narrow); + font-size: var(--font-size-large); + } + + .c-card__body__text { + display: block; + margin-bottom: var(--spacing-tiny); + } + + .c-card__body__text:last-child { + margin-bottom: 0; + } + + .c-card--horizontal { + display: flex; + + .c-card__image { + margin-right: var(--spacing-medium); + } + + .c-card__body { + flex-grow: 1; + width: 0; + } + } + + @media (max-width: 560px) { + .c-card--center\@narrow { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + .c-card__image { + margin: 0 0 var(--spacing-small); + } + + .c-card__body { + width: auto; + } + } + } +} diff --git a/app/assets/stylesheets/components/dialog.css b/app/assets/stylesheets/components/dialog.css new file mode 100644 index 00000000..4c863e18 --- /dev/null +++ b/app/assets/stylesheets/components/dialog.css @@ -0,0 +1,31 @@ +@layer components { + .c-dialog { + padding: 0; + margin-top: 100px; + background: var(--dialog-bg-color); + border: none; + border-radius: var(--border-radius-medium); + width: 100%; + max-width: 360px; + color: inherit; + } + + .c-dialog::backdrop { + background-color: var(--dialog-backdrop-color); + } + + .c-dialog__header { + padding: var(--spacing-narrow) var(--spacing-small); + background: var(--dialog-header-bg-color); + color: var(--dialog-header-color); + border-top-left-radius: var(--border-radius-medium); + border-top-right-radius: var(--border-radius-medium); + } + + .c-dialog__content { + padding: var(--spacing-narrow) var(--spacing-small); + overflow-y: auto; + min-height: 50px; + max-height: calc(100vh - 300px); + } +} diff --git a/app/assets/stylesheets/components/dropdown.css b/app/assets/stylesheets/components/dropdown.css new file mode 100644 index 00000000..c73b96e6 --- /dev/null +++ b/app/assets/stylesheets/components/dropdown.css @@ -0,0 +1,95 @@ +@layer components { + .c-dropdown { + display: inline-block; + position: relative; + } + + .c-dropdown > summary { + cursor: pointer; + list-style: none; + + &::-webkit-details-marker { + display: none; + } + } + + .c-dropdown[open] > summary { + &::before { + position: fixed; + inset: 0; + z-index: var(--z-dropdown-overlay); + display: block; + cursor: default; + content: ""; + background: transparent; + } + } + + .c-dropdown:not([open]) > *:not(summary) { + display: none; + } + + .c-dropdown__menu { + position: absolute; + right: 0; + top: 0; + z-index: var(--z-dropdown); + min-width: 100px; + background: var(--dropdown-bg-color); + border-radius: var(--border-radius-medium); + color: var(--dropdown-color); + box-shadow: 0 1px 6px var(--dropdown-shadow-color); + max-height: 300px; + overflow-y: auto; + } + + .c-dropdown__menu > hr { + margin: 0; + } + + .c-dropdown__menu--right { + left: 0; + right: auto; + } + + .c-dropdown__item { + display: block; + padding: var(--spacing-narrow); + white-space: nowrap; + } + + a.c-dropdown__item { + text-decoration: none; + color: var(--dropdown-color); + } + + form.c-dropdown__item input[type="submit"], + form.c-dropdown__item button[type="submit"] { + width: 100%; + background: var(--dropdown-bg-color); + border: none; + cursor: pointer; + } + + .c-dropdown__item:first-child, + form.c-dropdown__item:first-child input[type="submit"], + form.c-dropdown__item:first-child button[type="submit"] { + border-top-left-radius: var(--border-radius-medium); + border-top-right-radius: var(--border-radius-medium); + } + + .c-dropdown__item:last-child, + form.c-dropdown__item:last-child input[type="submit"], + form.c-dropdown__item:last-child button[type="submit"] { + border-bottom-left-radius: var(--border-radius-medium); + border-bottom-right-radius: var(--border-radius-medium); + } + + a.c-dropdown__item:hover, + form.c-dropdown__item:hover input[type="submit"], + form.c-dropdown__item:hover button[type="submit"], + .c-dropdown__item:hover { + background: var(--dropdown-active-color); + color: var(--dropdown-color); + } +} diff --git a/app/assets/stylesheets/components/flash.css b/app/assets/stylesheets/components/flash.css new file mode 100644 index 00000000..f4f097a8 --- /dev/null +++ b/app/assets/stylesheets/components/flash.css @@ -0,0 +1,31 @@ +@layer components { + .c-flash { + position: absolute; + margin: 0; + padding: 0; + z-index: var(--z-flash); + backface-visibility: hidden; + filter: blur(0); + max-width: 90%; + top: 10%; + left: 50%; + width: 325px; + transform: translate(calc(-50% - 0.5px)) translateZ(0) scale(1, 1); + } + + .c-flash__body { + padding: var(--spacing-tiny); + text-align: center; + border-radius: var(--border-radius-medium); + } + + .c-flash__body--alert { + background-color: var(--flash-alert-bg-color); + color: var(--flash-color); + } + + .c-flash__body--notice { + background-color: var(--flash-notice-bg-color); + color: var(--flash-color); + } +} diff --git a/app/assets/stylesheets/components/form.css b/app/assets/stylesheets/components/form.css new file mode 100644 index 00000000..9defeb1c --- /dev/null +++ b/app/assets/stylesheets/components/form.css @@ -0,0 +1,47 @@ +@layer components { + .c-form { + padding-bottom: var(--spacing-medium); + } + + .c-form__field { + margin-top: var(--spacing-small); + } + + .c-form__field--inline { + display: flex; + align-items: center; + } + + .c-form__field--submit { + margin-top: var(--spacing-medium); + } + + .c-form__field label { + display: block; + margin-bottom: var(--spacing-narrow); + } + + .c-form__field label[disabled] { + opacity: 0.5; + } + + .c-form__field--inline label { + margin-bottom: 0; + margin-right: var(--spacing-tiny); + } + + .c-form__field > label { + font-weight: bold; + } + + .c-form__radio { + display: inline-flex; + align-items: center; + margin-right: var(--spacing-narrow); + } + + .c-form__radio label { + margin-bottom: 0; + margin-left: var(--spacing-tiny); + } +} diff --git a/app/assets/stylesheets/components/icon.css b/app/assets/stylesheets/components/icon.css new file mode 100644 index 00000000..297ec5f9 --- /dev/null +++ b/app/assets/stylesheets/components/icon.css @@ -0,0 +1,29 @@ +@layer components { + .c-icon { + width: 18px; + height: 18px; + } + + .c-icon--small { + width: 16px; + height: 16px; + } + + .c-icon--narrow { + width: 14px; + height: 14px; + } + + .c-icon--large { + width: 22px; + height: 22px; + } + + .c-icon--active { + color: var(--icon-active-color); + } + + .c-icon--emphasis { + color: var(--icon-emphasis-color); + } +} diff --git a/app/assets/stylesheets/components/input.css b/app/assets/stylesheets/components/input.css new file mode 100644 index 00000000..e8868069 --- /dev/null +++ b/app/assets/stylesheets/components/input.css @@ -0,0 +1,38 @@ +@layer components { + input.c-input { + width: 100%; + background: var(--input-bg-color); + border: none; + color: var(--input-color); + padding: var(--spacing-tiny); + border-radius: var(--border-radius-medium); + filter: none; + } + + .c-input-group { + display: flex; + align-items: center; + background: var(--input-bg-color); + border-radius: var(--border-radius-medium); + padding: 0 var(--spacing-tiny); + } + + .c-input-group input { + width: 0; + flex-grow: 1; + } + + .c-input-group input:focus { + outline: none; + } + + .c-input-group__icon { + display: flex; + align-items: center; + color: var(--input-icon-color); + } + + .c-input-group__icon a { + color: var(--input-icon-color); + } +} diff --git a/app/assets/stylesheets/components/list.css b/app/assets/stylesheets/components/list.css new file mode 100644 index 00000000..044344d5 --- /dev/null +++ b/app/assets/stylesheets/components/list.css @@ -0,0 +1,63 @@ +@layer components { + .c-list { + list-style: none; + padding: 0; + margin: 0; + } + + .c-list--grouped { + background-color: var(--list-grouped-bg-color); + padding: 0 var(--spacing-narrow); + border-radius: var(--border-radius-large); + } + + .c-list__item { + width: 100%; + padding: var(--spacing-narrow) 0; + text-decoration: none; + border-bottom: 1px solid var(--list-border-color); + } + + .c-list__item--divider { + margin-top: var(--spacing-small); + font-weight: bold; + text-transform: uppercase; + } + + .c-list__item__subtext { + display: inline-block; + margin-top: var(--spacing-tiny); + color: var(--list-subtext-color); + } + + .c-list--border-none .c-list__item { + border-bottom: none; + } + + .c-list--grouped .c-list__item { + padding: var(--spacing-small) 0; + } + + .c-list__item:last-child { + border-bottom: none; + } + + .c-list__item.is-active * { + color: var(--list-active-color); + } + + .c-list.is-dragging .c-list__item { + border: none; + } + + .c-list.is-dragging .c-list__item:not(.is-dragging-source) * { + /* Prevent dragleave from firing when dragging into a child element */ + pointer-events: none; + opacity: 0.85; + } + + .c-list .c-list__item.is-dragging-over { + border: 2px dashed var(--list-active-color); + border-radius: var(--border-radius-medium); + } +} diff --git a/app/assets/stylesheets/components/loader.css b/app/assets/stylesheets/components/loader.css new file mode 100644 index 00000000..f38a08b9 --- /dev/null +++ b/app/assets/stylesheets/components/loader.css @@ -0,0 +1,21 @@ +@layer components { + .c-loader { + border: 5px solid var(--loader-secondary-bg-color); + border-top: 5px solid var(--loader-bg-color); + border-radius: 50%; + width: 40px; + height: 40px; + } + + .c-loader--small { + height: 22px; + width: 22px; + border-width: 3px; + } + + .c-loader--large { + height: 55px; + width: 55px; + border-width: 7px; + } +} diff --git a/app/assets/stylesheets/components/logo.css b/app/assets/stylesheets/components/logo.css new file mode 100644 index 00000000..eacf4451 --- /dev/null +++ b/app/assets/stylesheets/components/logo.css @@ -0,0 +1,9 @@ +@layer components { + .c-logo { + display: inline-block; + background: url("logo.svg") no-repeat top left; + background-size: contain; + width: 70px; + height: 70px; + } +} diff --git a/app/assets/stylesheets/components/nav.css b/app/assets/stylesheets/components/nav.css new file mode 100644 index 00000000..2336f2ad --- /dev/null +++ b/app/assets/stylesheets/components/nav.css @@ -0,0 +1,21 @@ +@layer components { + .c-nav { + padding: var(--spacing-small) var(--spacing-small) 0; + box-shadow: var(--nav-shadow); + z-index: var(--z-nav); + } + + .c-nav--primary { + position: relative; + + &::before { + content: ""; + position: absolute; + inset: 0; + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + z-index: -1; + background: var(--nav-primary-bg-color); + } + } +} diff --git a/app/assets/stylesheets/components/overlay.css b/app/assets/stylesheets/components/overlay.css new file mode 100644 index 00000000..da05a41b --- /dev/null +++ b/app/assets/stylesheets/components/overlay.css @@ -0,0 +1,19 @@ +@layer components { + .c-overlay { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: inherit; + } + + .c-overlay--fixed { + z-index: var(--z-fixed-overlay); + position: fixed; + } + + .c-overlay--blur { + background: var(--overlay-blur-bg-color); + } +} diff --git a/app/assets/stylesheets/components/player.css b/app/assets/stylesheets/components/player.css new file mode 100644 index 00000000..0d5885de --- /dev/null +++ b/app/assets/stylesheets/components/player.css @@ -0,0 +1,106 @@ +@layer components { + .c-player { + background: var(--player-bg-color); + } + + .c-player__control { + background: var(--player-bg-color); + position: relative; + padding: 0 var(--spacing-wide); + color: var(--player-control-color); + } + + .c-player__control__main { + color: var(--player-control-main-color); + padding: var(--spacing-small) 0; + border-bottom: 1px solid var(--player-control-border-color); + } + + .c-player__control__secondary { + padding: var(--spacing-tiny) 0; + } + + .c-player__header { + transition: max-height 0.2s ease-out; + max-height: 0; + visibility: hidden; + background: inherit; + } + + .c-player__header__content { + background: var(--player-header-bg-color); + } + + .c-player__header__background { + position: absolute; + inset: 0; + filter: blur(15px); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + + .c-player__header.is-expanded { + max-height: 200px; + visibility: visible; + } + + .c-player__progress { + display: flex; + align-items: flex-start; + height: 4px; + } + + .c-player__progress progress { + appearance: none; + height: 2px; + border: 0 none; + background: var(--player-progress-bg-color); + } + + .c-player__progress progress::-moz-progress-bar { + background: var(--player-progress-color); + } + + .c-player__progress progress::-webkit-progress-bar { + background: transparent; + } + + .c-player__progress progress::-webkit-progress-value { + background: var(--player-progress-color); + } + + .c-player__progress:hover progress { + height: 4px; + background: var(--player-progress-hover-bg-color); + } + + .c-player__volume { + -webkit-appearance: none; + appearance: none; + width: 100%; + cursor: pointer; + outline: none; + border-radius: var(--border-radius-large); + height: 5px; + background: linear-gradient(to right, var(--player-volume-color) var(--progress), var(--player-volume-bg-color) var(--progress)); + } + + .c-player__volume::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + height: 12px; + width: 12px; + background-color: var(--player-volume-color); + border-radius: 50%; + border: none; + } + + .c-player__volume::-moz-range-thumb { + height: 12px; + width: 12px; + background-color: var(--player-volume-color); + border-radius: 50%; + border: none; + } +} diff --git a/app/assets/stylesheets/components/search.css b/app/assets/stylesheets/components/search.css new file mode 100644 index 00000000..7abc484a --- /dev/null +++ b/app/assets/stylesheets/components/search.css @@ -0,0 +1,15 @@ +@layer components { + .c-search { + max-width: 380px; + width: 100%; + margin: 0 var(--spacing-small); + } + + .c-search .c-loader { + display: none; + } + + .c-search.is-loading .c-loader { + display: revert; + } +} diff --git a/app/assets/stylesheets/components/_sidebar.scss b/app/assets/stylesheets/components/sidebar.css similarity index 50% rename from app/assets/stylesheets/components/_sidebar.scss rename to app/assets/stylesheets/components/sidebar.css index 408d229d..c0618315 100644 --- a/app/assets/stylesheets/components/_sidebar.scss +++ b/app/assets/stylesheets/components/sidebar.css @@ -1,53 +1,50 @@ -@use "../tools/responsive"; -@use "../settings/variables"; - -.c-sidebar { - background: var(--sidebar-bg-color); - z-index: variables.$sidebar-zindex; -} +@layer components { + .c-sidebar { + background: var(--sidebar-bg-color); + z-index: var(--z-sidebar); + } -@include responsive.media-query using ($breakpoint) { - @if $breakpoint == "extra-wide" { + @media (min-width: 1880px) { .c-sidebar { width: 440px; } } - @if $breakpoint == "wide" { + @media (max-width: 1880px) { .c-sidebar { width: 420px; } } - @if $breakpoint == "extra-large" { + @media (max-width: 1630px) { .c-sidebar { width: 400px; } } - @if $breakpoint == "large" { + @media (max-width: 1380px) { .c-sidebar { width: 380px; } } - @if $breakpoint == "medium" { + @media (max-width: 1130px) { .c-sidebar { width: 360px; } } - @if $breakpoint == "small" { + @media (max-width: 930px) { .c-sidebar { width: 340px; } } - @if $breakpoint == "extra-small" { + @media (max-width: 730px) { .c-sidebar { position: fixed; bottom: 0; - z-index: variables.$base-zindex - 1; + z-index: -1; height: 100%; width: 100%; visibility: hidden; @@ -55,7 +52,7 @@ } .c-sidebar.is-expanded { - z-index: variables.$expanded-sidebar-zindex; + z-index: var(--z-expanded-sidebar); visibility: visible; height: 100%; opacity: 1; diff --git a/app/assets/stylesheets/components/tab.css b/app/assets/stylesheets/components/tab.css new file mode 100644 index 00000000..220bd060 --- /dev/null +++ b/app/assets/stylesheets/components/tab.css @@ -0,0 +1,29 @@ +@layer components { + .c-tab { + display: flex; + justify-content: center; + list-style: none; + margin: 0; + padding: 0; + } + + .c-tab__item { + padding-bottom: var(--spacing-narrow); + border-bottom: 2px solid transparent; + margin: 0 var(--spacing-large); + } + + .c-tab__item a { + color: var(--tab-color); + text-decoration: none; + } + + .c-tab__item.is-active a, + .c-tab__item a:hover { + color: var(--tab-active-color); + } + + .c-tab__item.is-active { + border-color: var(--tab-active-color); + } +} diff --git a/app/assets/stylesheets/components/table.css b/app/assets/stylesheets/components/table.css new file mode 100644 index 00000000..884d5a20 --- /dev/null +++ b/app/assets/stylesheets/components/table.css @@ -0,0 +1,55 @@ +@layer components { + .c-table { + display: table; + width: 100%; + table-layout: auto; + text-align: left; + } + + .c-table[role="table"] { + display: grid; + grid-template-columns: var(--grid-tc); + --grid-tc: repeat(5, auto); + } + + .c-table [role="rowgroup"] { + display: contents; + } + + .c-table [role="row"] { + display: contents; + } + + .c-table tr, + .c-table [role="columnheader"], + .c-table [role="cell"] { + border-bottom: 1px solid var(--table-border-color); + } + + .c-table [role="columnheader"] { + font-weight: bold; + } + + .c-table th, + .c-table td, + .c-table [role="columnheader"], + .c-table [role="cell"] { + display: inline-flex; + align-items: center; + padding: var(--spacing-narrow); + text-align: left; + color: var(--table-color); + } + + .c-table [role="cell"][span="row"] { + grid-column: 1 / -1; + } + + @media (max-width: 1130px) { + .c-table[role="table"][cols-at-medium="3"] { --grid-tc: repeat(3, auto); } + } + + @media (max-width: 930px) { + .c-table[role="table"][cols-at-small="2"] { --grid-tc: repeat(2, auto); } + } +} diff --git a/app/assets/stylesheets/elements/_content.scss b/app/assets/stylesheets/elements/_content.scss deleted file mode 100644 index 72d63ea9..00000000 --- a/app/assets/stylesheets/elements/_content.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use "../tools/functions" as *; - -h1 { - font-size: font-size("wide"); - margin-bottom: spacing("wide"); -} - -h2, -h3 { - font-size: font-size("large"); - margin-bottom: spacing("medium"); -} - -h4, -h5, -h6 { - font-size: font-size("medium"); -} - -h1, -h2, -h3, -h4, -h5, -h6 { - color: var(--text-primary-color); -} - -p { - font-size: font-size("medium"); - color: var(--text-secondary-color); -} - -a { - text-decoration: none; - color: var(--text-primary-color); -} - -a:hover { - text-decoration: underline; -} - -a.is-active { - color: var(--link-active-color); -} - -hr { - border: 0; - margin: spacing("large") 0; - border-top: 1px solid var(--hr-color); -} diff --git a/app/assets/stylesheets/elements/_page.scss b/app/assets/stylesheets/elements/_page.scss deleted file mode 100644 index dcdd5001..00000000 --- a/app/assets/stylesheets/elements/_page.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use "sass:map"; -@use "../settings/variables"; - -body { - font-family: variables.$sans-serif-fonts; - background-color: var(--body-bg-color); - color: var(--text-secondary-color); - font-size: map.get(variables.$font-size, "medium"); -} diff --git a/app/assets/stylesheets/elements/content.css b/app/assets/stylesheets/elements/content.css new file mode 100644 index 00000000..c9b9c2ae --- /dev/null +++ b/app/assets/stylesheets/elements/content.css @@ -0,0 +1,51 @@ +@layer elements { + h1 { + font-size: var(--font-size-wide); + margin-bottom: var(--spacing-wide); + } + + h2, + h3 { + font-size: var(--font-size-large); + margin-bottom: var(--spacing-medium); + } + + h4, + h5, + h6 { + font-size: var(--font-size-medium); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--text-primary-color); + } + + p { + font-size: var(--font-size-medium); + color: var(--text-secondary-color); + } + + a { + text-decoration: none; + color: var(--text-primary-color); + } + + a:hover { + text-decoration: underline; + } + + a.is-active { + color: var(--link-active-color); + } + + hr { + border: 0; + margin: var(--spacing-large) 0; + border-top: 1px solid var(--hr-color); + } +} diff --git a/app/assets/stylesheets/elements/page.css b/app/assets/stylesheets/elements/page.css new file mode 100644 index 00000000..b7379e75 --- /dev/null +++ b/app/assets/stylesheets/elements/page.css @@ -0,0 +1,8 @@ +@layer elements { + body { + font-family: var(--font-sans-serif); + background-color: var(--body-bg-color); + color: var(--text-secondary-color); + font-size: var(--font-size-medium); + } +} diff --git a/app/assets/stylesheets/generic/_box_sizing.scss b/app/assets/stylesheets/generic/_box_sizing.scss deleted file mode 100644 index d729512f..00000000 --- a/app/assets/stylesheets/generic/_box_sizing.scss +++ /dev/null @@ -1,9 +0,0 @@ -html { - box-sizing: border-box; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} diff --git a/app/assets/stylesheets/generic/_normalize.scss b/app/assets/stylesheets/generic/_normalize.scss deleted file mode 100644 index ffb2bc5c..00000000 --- a/app/assets/stylesheets/generic/_normalize.scss +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/app/assets/stylesheets/generic/_reset.scss b/app/assets/stylesheets/generic/_reset.scss deleted file mode 100644 index 15d0d201..00000000 --- a/app/assets/stylesheets/generic/_reset.scss +++ /dev/null @@ -1,52 +0,0 @@ -blockquote, -dd, -dl, -figure, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -p, -pre { - margin: 0; -} - -button { - background: transparent; - border: 0; - padding: 0; -} - -ol, -ul { - margin: 0; - padding-left: 0; -} - -li > ol, -li > ul { - margin-bottom: 0; -} - -table { - border-collapse: collapse; -} - -textarea { - resize: vertical; -} - -/* Reset element style generate from button_to */ -[type="submit"] { - text-align: left; - color: currentcolor; - font-weight: normal; -} - -/* Reset style for turbo progress bar */ -.turbo-progress-bar { - background-color: var(--progress-bar-bg-color); -} diff --git a/app/assets/stylesheets/generic/box_sizing.css b/app/assets/stylesheets/generic/box_sizing.css new file mode 100644 index 00000000..9dc10d98 --- /dev/null +++ b/app/assets/stylesheets/generic/box_sizing.css @@ -0,0 +1,11 @@ +@layer generic { + html { + box-sizing: border-box; + } + + *, + *::before, + *::after { + box-sizing: inherit; + } +} diff --git a/app/assets/stylesheets/generic/normalize.css b/app/assets/stylesheets/generic/normalize.css new file mode 100644 index 00000000..39ee93ed --- /dev/null +++ b/app/assets/stylesheets/generic/normalize.css @@ -0,0 +1,351 @@ +@layer generic { + /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + + /* Document + ========================================================================== */ + + /** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + + html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + } + + /* Sections + ========================================================================== */ + + /** + * Remove the margin in all browsers. + */ + + body { + margin: 0; + } + + /** + * Render the `main` element consistently in IE. + */ + + main { + display: block; + } + + /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + + h1 { + font-size: 2em; + margin: 0.67em 0; + } + + /* Grouping content + ========================================================================== */ + + /** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + + hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + pre { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /* Text-level semantics + ========================================================================== */ + + /** + * Remove the gray background on active links in IE 10. + */ + + a { + background-color: transparent; + } + + /** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + + abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + } + + /** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + + b, + strong { + font-weight: bolder; + } + + /** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + + code, + kbd, + samp { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ + } + + /** + * Add the correct font size in all browsers. + */ + + small { + font-size: 80%; + } + + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sub { + bottom: -0.25em; + } + + sup { + top: -0.5em; + } + + /* Embedded content + ========================================================================== */ + + /** + * Remove the border on images inside links in IE 10. + */ + + img { + border-style: none; + } + + /* Forms + ========================================================================== */ + + /** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + + button, + input, + optgroup, + select, + textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + } + + /** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + + button, + input { /* 1 */ + overflow: visible; + } + + /** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + + button, + select { /* 1 */ + text-transform: none; + } + + /** + * Correct the inability to style clickable types in iOS and Safari. + */ + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + /** + * Remove the inner border and padding in Firefox. + */ + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + + button:-moz-focusring, + [type="button"]:-moz-focusring, + [type="reset"]:-moz-focusring, + [type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; + } + + /** + * Correct the padding in Firefox. + */ + + fieldset { + padding: 0.35em 0.75em 0.625em; + } + + /** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + + legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ + } + + /** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + + progress { + vertical-align: baseline; + } + + /** + * Remove the default vertical scrollbar in IE 10+. + */ + + textarea { + overflow: auto; + } + + /** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + + [type="checkbox"], + [type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + } + + /** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + /** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + + [type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ + } + + /** + * Remove the inner padding in Chrome and Safari on macOS. + */ + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + /** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + + ::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ + } + + /* Interactive + ========================================================================== */ + + /* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + + details { + display: block; + } + + /* + * Add the correct display in all browsers. + */ + + summary { + display: list-item; + } + + /* Misc + ========================================================================== */ + + /** + * Add the correct display in IE 10+. + */ + + template { + display: none; + } + + /** + * Add the correct display in IE 10. + */ + + [hidden] { + display: none; + } +} diff --git a/app/assets/stylesheets/generic/reset.css b/app/assets/stylesheets/generic/reset.css new file mode 100644 index 00000000..d3ae4070 --- /dev/null +++ b/app/assets/stylesheets/generic/reset.css @@ -0,0 +1,54 @@ +@layer generic { + blockquote, + dd, + dl, + figure, + h1, + h2, + h3, + h4, + h5, + h6, + hr, + p, + pre { + margin: 0; + } + + button { + background: transparent; + border: 0; + padding: 0; + } + + ol, + ul { + margin: 0; + padding-left: 0; + } + + li > ol, + li > ul { + margin-bottom: 0; + } + + table { + border-collapse: collapse; + } + + textarea { + resize: vertical; + } + + /* Reset element style generate from button_to */ + [type="submit"] { + text-align: left; + color: currentcolor; + font-weight: normal; + } + + /* Reset style for turbo progress bar */ + .turbo-progress-bar { + background-color: var(--progress-bar-bg-color); + } +} diff --git a/app/assets/stylesheets/objects/_animations.scss b/app/assets/stylesheets/objects/_animations.scss deleted file mode 100644 index 0f51213d..00000000 --- a/app/assets/stylesheets/objects/_animations.scss +++ /dev/null @@ -1,41 +0,0 @@ -@keyframes fadeInDown { - from { - opacity: 0; - transform: translate3d(0, -100%, 0); - } - - to { - opacity: 1; - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeOutUp { - from { - opacity: 1; - } - - to { - opacity: 0; - transform: translate3d(0, -100%, 0); - } -} - -@keyframes spin { - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -} - -.o-animation-fadeInDown { - animation-name: fadeInDown; - animation-duration: 0.25s; -} - -.o-animation-fadeOutUp { - animation-name: fadeOutUp; - animation-duration: 0.25s; -} - -.o-animation-spin { - animation: spin 0.9s linear infinite; -} diff --git a/app/assets/stylesheets/objects/_container.scss b/app/assets/stylesheets/objects/_container.scss deleted file mode 100644 index c71b76fe..00000000 --- a/app/assets/stylesheets/objects/_container.scss +++ /dev/null @@ -1,36 +0,0 @@ -.o-container { - max-width: 1130px; - margin: auto; -} - -.o-container--extra-wide { - max-width: 2130px; -} - -.o-container--wide { - max-width: 1880px; -} - -.o-container--extra-large { - max-width: 1630px; -} - -.o-container--large { - max-width: 1380px; -} - -.o-container--small { - max-width: 930px; -} - -.o-container--extra-small { - max-width: 730px; -} - -.o-container--narrow { - max-width: 560px; -} - -.o-container--extra-narrow { - max-width: 360px; -} diff --git a/app/assets/stylesheets/objects/_flex.scss b/app/assets/stylesheets/objects/_flex.scss deleted file mode 100644 index 94151397..00000000 --- a/app/assets/stylesheets/objects/_flex.scss +++ /dev/null @@ -1,107 +0,0 @@ -.o-flex { - display: flex; -} - -.o-flex > .o-flex__item { - appearance: none; -} - -.o-flex-inline { - display: inline-flex; -} - -.o-flex--column { - flex-direction: column; -} - -.o-flex--row-reverse { - flex-direction: row-reverse; -} - -.o-flex--column-reverse { - flex-direction: column-reverse; -} - -.o-flex--wrap { - flex-wrap: wrap; -} - -.o-flex--justify-start { - justify-content: flex-start; -} - -.o-flex--justify-end { - justify-content: flex-end; -} - -.o-flex--justify-center { - justify-content: center; -} - -.o-flex--justify-between { - justify-content: space-between; -} - -.o-flex--justify-around { - justify-content: space-around; -} - -.o-flex--align-start { - align-items: flex-start; -} - -.o-flex--align-end { - align-items: flex-end; -} - -.o-flex--align-center { - align-items: center; -} - -.o-flex--align-baseline { - align-items: baseline; -} - -.o-flex--align-stretch { - align-items: stretch; -} - -.o-flex__item--align-start { - align-self: flex-start; -} - -.o-flex__item--align-end { - align-self: flex-end; -} - -.o-flex__item--align-center { - align-self: center; -} - -.o-flex__item--align-baseline { - align-self: baseline; -} - -.o-flex__item--align-stretch { - align-self: stretch; -} - -.o-flex__item--shrink-0 { - flex-shrink: 0; -} - -.o-flex__item--shrink-1 { - flex-shrink: 1; -} - -.o-flex__item--grow-0 { - flex-grow: 0; -} - -.o-flex__item--grow-1 { - flex-grow: 1; -} - -.o-flex__item--basic-0 { - flex-basis: 0; -} diff --git a/app/assets/stylesheets/objects/_grid.scss b/app/assets/stylesheets/objects/_grid.scss deleted file mode 100644 index 8bcc8caf..00000000 --- a/app/assets/stylesheets/objects/_grid.scss +++ /dev/null @@ -1,43 +0,0 @@ -/* Base on Raster grid subsystem (rsms.me/raster) */ - -@use "../settings/variables"; -@use "../tools/responsive"; -@use "../tools/functions" as *; - -.o-grid { - display: grid !important; -} - -.o-grid > .o-grid__item { - display: block; - appearance: none; -} - -.o-grid--shelf { - grid-gap: spacing("medium"); - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); -} - -.o-grid--list { - grid-gap: spacing("small"); - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); -} - -.o-grid > .o-grid__item--row { - grid-column: 1 / -1; -} - -@include responsive.media-query using ($breakpoint) { - @if $breakpoint == "narrow" { - .o-grid--shelf { - grid-gap: spacing("small"); - } - } - - @if $breakpoint == "extra-narrow" { - .o-grid--shelf { - grid-gap: spacing("narrow"); - grid-template-columns: repeat(2, 1fr); - } - } -} diff --git a/app/assets/stylesheets/objects/animations.css b/app/assets/stylesheets/objects/animations.css new file mode 100644 index 00000000..917fa01d --- /dev/null +++ b/app/assets/stylesheets/objects/animations.css @@ -0,0 +1,43 @@ +@layer objects { + @keyframes fadeInDown { + from { + opacity: 0; + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } + } + + @keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + .o-animation-fadeInDown { + animation-name: fadeInDown; + animation-duration: 0.25s; + } + + .o-animation-fadeOutUp { + animation-name: fadeOutUp; + animation-duration: 0.25s; + } + + .o-animation-spin { + animation: spin 0.9s linear infinite; + } +} diff --git a/app/assets/stylesheets/objects/container.css b/app/assets/stylesheets/objects/container.css new file mode 100644 index 00000000..9ffa765d --- /dev/null +++ b/app/assets/stylesheets/objects/container.css @@ -0,0 +1,38 @@ +@layer objects { + .o-container { + max-width: 1130px; + margin: auto; + } + + .o-container--extra-wide { + max-width: 2130px; + } + + .o-container--wide { + max-width: 1880px; + } + + .o-container--extra-large { + max-width: 1630px; + } + + .o-container--large { + max-width: 1380px; + } + + .o-container--small { + max-width: 930px; + } + + .o-container--extra-small { + max-width: 730px; + } + + .o-container--narrow { + max-width: 560px; + } + + .o-container--extra-narrow { + max-width: 360px; + } +} diff --git a/app/assets/stylesheets/objects/flex.css b/app/assets/stylesheets/objects/flex.css new file mode 100644 index 00000000..c528ec9b --- /dev/null +++ b/app/assets/stylesheets/objects/flex.css @@ -0,0 +1,109 @@ +@layer objects { + .o-flex { + display: flex; + } + + .o-flex > .o-flex__item { + appearance: none; + } + + .o-flex-inline { + display: inline-flex; + } + + .o-flex--column { + flex-direction: column; + } + + .o-flex--row-reverse { + flex-direction: row-reverse; + } + + .o-flex--column-reverse { + flex-direction: column-reverse; + } + + .o-flex--wrap { + flex-wrap: wrap; + } + + .o-flex--justify-start { + justify-content: flex-start; + } + + .o-flex--justify-end { + justify-content: flex-end; + } + + .o-flex--justify-center { + justify-content: center; + } + + .o-flex--justify-between { + justify-content: space-between; + } + + .o-flex--justify-around { + justify-content: space-around; + } + + .o-flex--align-start { + align-items: flex-start; + } + + .o-flex--align-end { + align-items: flex-end; + } + + .o-flex--align-center { + align-items: center; + } + + .o-flex--align-baseline { + align-items: baseline; + } + + .o-flex--align-stretch { + align-items: stretch; + } + + .o-flex__item--align-start { + align-self: flex-start; + } + + .o-flex__item--align-end { + align-self: flex-end; + } + + .o-flex__item--align-center { + align-self: center; + } + + .o-flex__item--align-baseline { + align-self: baseline; + } + + .o-flex__item--align-stretch { + align-self: stretch; + } + + .o-flex__item--shrink-0 { + flex-shrink: 0; + } + + .o-flex__item--shrink-1 { + flex-shrink: 1; + } + + .o-flex__item--grow-0 { + flex-grow: 0; + } + + .o-flex__item--grow-1 { + flex-grow: 1; + } + + .o-flex__item--basic-0 { + flex-basis: 0; + } +} diff --git a/app/assets/stylesheets/objects/grid.css b/app/assets/stylesheets/objects/grid.css new file mode 100644 index 00000000..8bffa3b3 --- /dev/null +++ b/app/assets/stylesheets/objects/grid.css @@ -0,0 +1,39 @@ +@layer objects { + /* Base on Raster grid subsystem (rsms.me/raster) */ + + .o-grid { + display: grid; + } + + .o-grid > .o-grid__item { + display: block; + appearance: none; + } + + .o-grid--shelf { + gap: var(--spacing-medium); + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + } + + .o-grid--list { + gap: var(--spacing-small); + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + } + + .o-grid > .o-grid__item--row { + grid-column: 1 / -1; + } + + @media (max-width: 560px) { + .o-grid--shelf { + gap: var(--spacing-small); + } + } + + @media (max-width: 375px) { + .o-grid--shelf { + gap: var(--spacing-narrow); + grid-template-columns: repeat(2, 1fr); + } + } +} diff --git a/app/assets/stylesheets/settings/_bridge.scss b/app/assets/stylesheets/settings/_bridge.scss deleted file mode 100644 index 2e28b214..00000000 --- a/app/assets/stylesheets/settings/_bridge.scss +++ /dev/null @@ -1,4 +0,0 @@ -[data-bridge-components~="account"] [data-controller~="bridge--account"], -[data-bridge-components~="search"] [data-controller~="bridge--search"] { - display: none !important; -} \ No newline at end of file diff --git a/app/assets/stylesheets/settings/_colors.scss b/app/assets/stylesheets/settings/_colors.scss deleted file mode 100644 index ad62ae91..00000000 --- a/app/assets/stylesheets/settings/_colors.scss +++ /dev/null @@ -1,18 +0,0 @@ -$purple-dark: rgb(54, 30, 64); -$purple: rgb(119, 66, 141); -$purple-light: rgb(161, 90, 191); - -$white: rgb(255, 255, 251); -$grey-100: rgb(237, 237, 237); -$grey-200: rgb(217, 217, 217); -$grey-300: rgb(191, 191, 191); -$grey-400: rgb(166, 166, 166); -$grey-500: rgb(140, 140, 140); -$grey-600: rgb(89, 89, 89); -$grey-700: rgb(59, 59, 59); -$grey-800: rgb(33, 33, 33); -$grey-900: rgb(18, 18, 18); -$black: rgb(0, 0, 0); - -$red: rgb(166, 22, 55); -$green: rgb(35, 166, 80); diff --git a/app/assets/stylesheets/settings/_dark_theme.scss b/app/assets/stylesheets/settings/_dark_theme.scss deleted file mode 100644 index faec12bb..00000000 --- a/app/assets/stylesheets/settings/_dark_theme.scss +++ /dev/null @@ -1,127 +0,0 @@ -@use "sass:color"; -@use "colors" as *; - -@mixin dark-theme { - $primary-color: $purple-light; - $btn-primary-bg-color: $purple; - $btn-secondary-bg-color: color.change($btn-primary-bg-color, $alpha: 0.25); - $btn-outline-bg-color: $grey-700; - $loader-bg-color: $primary-color; - $player-bg-color: $black; - $badge-color: $primary-color; - - color-scheme: dark; - - --link-active-color: #{$primary-color}; - --gradient-bg-color: linear-gradient(#{$black}, #{color.change($black, $alpha: 0.75)}), linear-gradient(#{$primary-color}, #{$primary-color}); - --primary-bg-color: #{$grey-800}; - - /* Body */ - --body-bg-color: #{$grey-800}; - - /* Text */ - --text-primary-color: #{$white}; - --text-secondary-color: #{$grey-300}; - --text-success-color: #{$green}; - - /* Sidebar */ - --sidebar-bg-color: #{$grey-900}; - - /* Progress bar */ - --progress-bar-bg-color: #{$primary-color}; - - /* Button */ - --btn-color: #{$white}; - --btn-primary-bg-color: #{$btn-primary-bg-color}; - --btn-primary-hover-bg-color: #{color.adjust($btn-primary-bg-color, $lightness: 8%)}; - --btn-secondary-bg-color: #{$btn-secondary-bg-color}; - --btn-secondary-hover-bg-color: #{color.adjust($btn-secondary-bg-color, $lightness: 8%)}; - --btn-secondary-color: #{$primary-color}; - --btn-outline-color: #{$white}; - --btn-outline-border-color: #{$grey-800}; - --btn-outline-bg-color: #{$btn-outline-bg-color}; - --btn-outline-hover-bg-color: #{color.adjust($btn-outline-bg-color, $lightness: 8%)}; - --btn-icon-hover-bg-color: #{color.change($grey-600, $alpha: 0.5)}; - - /* Flash message */ - --flash-color: #{$white}; - --flash-notice-bg-color: #{$green}; - --flash-alert-bg-color: #{$red}; - - /* Tab */ - --tab-color: #{$white}; - --tab-active-color: #{$primary-color}; - - /* List */ - --list-border-color: #{$grey-800}; - --list-active-color: #{$primary-color}; - --list-grouped-bg-color: #{$grey-900}; - --list-subtext-color: #{$grey-400}; - - /* Table */ - --table-border-color: #{$grey-900}; - --table-active-color: #{$primary-color}; - --table-color: #{$grey-300}; - - /* Input */ - --input-bg-color: #{$grey-700}; - --input-color: #{$white}; - --input-icon-color: #{$grey-900}; - - /* Loader */ - --loader-bg-color: #{$loader-bg-color}; - --loader-secondary-bg-color: #{color.change($loader-bg-color, $alpha: 0.3)}; - - /* Dropdown */ - --dropdown-bg-color: #{$grey-700}; - --dropdown-active-color: #{$grey-500}; - --dropdown-color: #{$white}; - --dropdown-shadow-color: #{$black}; - - /* Dialog */ - --dialog-bg-color: #{$grey-900}; - --dialog-header-bg-color: #{$grey-500}; - --dialog-header-color: #{$grey-900}; - - ::backdrop { - --dialog-backdrop-color: #{color.change($grey-800, $alpha: 0.9)}; - } - - /* Overlay */ - --overlay-blur-bg-color: #{color.change($grey-800, $alpha: 0.9)}; - - /* Hr */ - --hr-color: #{$grey-900}; - - /* Action bar */ - --action-bar-bg-color: #{$grey-800}; - - /* Nav */ - --nav-shadow: 0 1px 0 #{color.change($black, $alpha: 0.12)}, 0 1px 3px #{color.change($black, $alpha: 0.15)}; - --nav-primary-bg-color: #{color.change($grey-800, $alpha: 0.9)}; - --nav-backdrop-bg-color: #{color.change($grey-800, $alpha: 0.88)}; - - /* Player */ - --player-bg-color: #{$player-bg-color}; - --player-header-bg-color: #{color.change($player-bg-color, $alpha: 0.65)}; - --player-progress-bg-color: #{$player-bg-color}; - --player-progress-hover-bg-color: #{$grey-800}; - --player-progress-color: #{$primary-color}; - --player-volume-bg-color: #{$grey-600}; - --player-volume-color: #{$primary-color}; - --player-control-color: #{$grey-400}; - --player-control-border-color: #{$grey-800}; - --player-control-main-color: #{$white}; - - /* Badge */ - --badge-bg-color: #{color.change($badge-color, $alpha: 0.2)}; - --badge-color: #{$badge-color}; - - /* Card */ - --card-border-color: #{$grey-700}; - --card-bg-color: #{$grey-900}; - - /* Icon */ - --icon-active-color: #{$primary-color}; - --icon-emphasis-color: #{$red}; -} diff --git a/app/assets/stylesheets/settings/_light_theme.scss b/app/assets/stylesheets/settings/_light_theme.scss deleted file mode 100644 index 1e9d371b..00000000 --- a/app/assets/stylesheets/settings/_light_theme.scss +++ /dev/null @@ -1,127 +0,0 @@ -@use "sass:color"; -@use "colors" as *; - -@mixin light-theme { - $primary-color: $purple; - $btn-primary-bg-color: $primary-color; - $btn-secondary-bg-color: color.change($btn-primary-bg-color, $alpha: 0.25); - $btn-outline-bg-color: $grey-100; - $loader-bg-color: $primary-color; - $player-bg-color: $grey-200; - $badge-color: $primary-color; - - color-scheme: light; - - --link-active-color: #{$primary-color}; - --gradient-bg-color: linear-gradient(#{color.change($white, $alpha: 0.85)}, #{color.change($white, $alpha: 0.65)}), linear-gradient(#{$primary-color}, #{$primary-color}); - --primary-bg-color: #{$white}; - - /* Body */ - --body-bg-color: #{$white}; - - /* Text */ - --text-primary-color: #{$grey-900}; - --text-secondary-color: #{$grey-600}; - --text-success-color: #{$green}; - - /* Sidebar */ - --sidebar-bg-color: #{$grey-100}; - - /* Progress bar */ - --progress-bar-bg-color: #{$primary-color}; - - /* Button */ - --btn-color: #{$white}; - --btn-primary-bg-color: #{$btn-primary-bg-color}; - --btn-primary-hover-bg-color: #{color.adjust($btn-primary-bg-color, $lightness: -8%)}; - --btn-secondary-bg-color: #{$btn-secondary-bg-color}; - --btn-secondary-hover-bg-color: #{color.adjust($btn-secondary-bg-color, $lightness: -8%)}; - --btn-secondary-color: #{$purple-light}; - --btn-outline-color: #{$grey-900}; - --btn-outline-border-color: #{$grey-300}; - --btn-outline-bg-color: #{$btn-outline-bg-color}; - --btn-outline-hover-bg-color: #{color.adjust($btn-outline-bg-color, $lightness: -8%)}; - --btn-icon-hover-bg-color: #{color.change($grey-300, $alpha: 0.3)}; - - /* Flash message */ - --flash-color: #{$white}; - --flash-notice-bg-color: #{$green}; - --flash-alert-bg-color: #{$red}; - - /* Tab */ - --tab-color: #{$grey-900}; - --tab-active-color: #{$primary-color}; - - /* List */ - --list-border-color: #{$grey-200}; - --list-active-color: #{$primary-color}; - --list-grouped-bg-color: #{$grey-100}; - --list-subtext-color: #{$grey-500}; - - /* Table */ - --table-border-color: #{$grey-200}; - --table-active-color: #{$primary-color}; - --table-color: #{$grey-600}; - - /* Input */ - --input-bg-color: #{$grey-200}; - --input-color: #{$grey-900}; - --input-icon-color: #{$grey-500}; - - /* Loader */ - --loader-bg-color: #{$loader-bg-color}; - --loader-secondary-bg-color: #{color.change($loader-bg-color, $alpha: 0.3)}; - - /* Dropdown */ - --dropdown-bg-color: #{$white}; - --dropdown-active-color: #{$grey-300}; - --dropdown-color: #{$grey-900}; - --dropdown-shadow-color: #{$grey-300}; - - /* Dialog */ - --dialog-bg-color: #{$white}; - --dialog-header-bg-color: #{$grey-200}; - --dialog-header-color: #{$grey-900}; - - ::backdrop { - --dialog-backdrop-color: #{color.change($grey-100, $alpha: 0.9)}; - } - - /* Overlay */ - --overlay-blur-bg-color: #{color.change($grey-100, $alpha: 0.9)}; - - /* Hr */ - --hr-color: #{$grey-200}; - - /* Action bar */ - --action-bar-bg-color: #{$grey-200}; - - /* Nav */ - --nav-shadow: 0 1px 0 #{color.change($grey-300, $alpha: 0.12)}, 0 1px 3px #{color.change($grey-300, $alpha: 0.15)}; - --nav-primary-bg-color: #{color.change($white, $alpha: 0.9)}; - --nav-backdrop-bg-color: #{color.change($white, $alpha: 0.88)}; - - /* Player */ - --player-bg-color: #{$player-bg-color}; - --player-header-bg-color: #{color.change($player-bg-color, $alpha: 0.65)}; - --player-progress-bg-color: #{$player-bg-color}; - --player-progress-hover-bg-color: #{$grey-100}; - --player-progress-color: #{$primary-color}; - --player-volume-bg-color: #{$grey-300}; - --player-volume-color: #{$primary-color}; - --player-control-color: #{$grey-500}; - --player-control-border-color: #{$grey-300}; - --player-control-main-color: #{$grey-900}; - - /* Badge */ - --badge-bg-color: #{color.change($badge-color, $alpha: 0.2)}; - --badge-color: #{$badge-color}; - - /* Card */ - --card-border-color: #{$grey-200}; - --card-bg-color: #{$grey-100}; - - /* Icon */ - --icon-active-color: #{$primary-color}; - --icon-emphasis-color: #{$red}; -} diff --git a/app/assets/stylesheets/settings/_theme.scss b/app/assets/stylesheets/settings/_theme.scss deleted file mode 100644 index 572ffa78..00000000 --- a/app/assets/stylesheets/settings/_theme.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use "dark_theme" as *; -@use "light_theme" as *; - -[data-color-scheme="light"] { - @include light-theme; -} - -[data-color-scheme="dark"] { - @include dark-theme; -} - -@media (prefers-color-scheme: light) { - [data-color-scheme="auto"] { - @include light-theme; - } -} - -@media (prefers-color-scheme: dark) { - [data-color-scheme="auto"] { - @include dark-theme; - } -} diff --git a/app/assets/stylesheets/settings/_variables.scss b/app/assets/stylesheets/settings/_variables.scss deleted file mode 100644 index 6013af5f..00000000 --- a/app/assets/stylesheets/settings/_variables.scss +++ /dev/null @@ -1,45 +0,0 @@ -$sans-serif-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "Wenquanyi Micro Hei", sans-serif; - -$monospace-fonts: "Menlo", "Monaco", "Consolas", "Courier New", monospace; - -$font-size: ( - "small": 12px, - "medium": 14px, - "large": 16px, - "wide": 20px, -); - -$spacing: ( - "tiny": 6px, - "narrow": 12px, - "small": 18px, - "medium": 24px, - "large": 36px, - "wide": 48px, -); - -$border-radius: ( - "small": 2px, - "medium": 4px, - "large": 8px, -); - -$breakpoint: ( - "wide": 1880px, - "extra-large": 1630px, - "large": 1380px, - "medium": 1130px, - "small": 930px, - "extra-small": 730px, - "narrow": 560px, - "extra-narrow": 375px, -); - -$base-zindex: 0; -$nav-zindex: $base-zindex + 1; -$sidebar-zindex: $nav-zindex + 1; -$dropdown-overlay-zindex: $sidebar-zindex + 1; -$dropdown-zindex: $dropdown-overlay-zindex + 1; -$flash-zindex: $dropdown-zindex + 1; -$fixed-overlay-zindex: $flash-zindex + 1; -$expanded-sidebar-zindex: $fixed-overlay-zindex + 1; diff --git a/app/assets/stylesheets/settings/colors.css b/app/assets/stylesheets/settings/colors.css new file mode 100644 index 00000000..4501cd43 --- /dev/null +++ b/app/assets/stylesheets/settings/colors.css @@ -0,0 +1,27 @@ +@layer settings { + :root { + --color-purple-dark: rgb(54 30 64); + --color-purple-shade: rgb(96 43 117); + --color-purple: rgb(119 66 141); + --color-purple-tint: rgb(143 89 166); + --color-purple-light: rgb(161 90 191); + + --color-white: rgb(255 255 251); + --color-grey-100: rgb(237 237 237); + --color-grey-200: rgb(217 217 217); + --color-grey-250: rgb(211 211 211); + --color-grey-300: rgb(191 191 191); + --color-grey-400: rgb(166 166 166); + --color-grey-500: rgb(140 140 140); + --color-grey-600: rgb(89 89 89); + --color-grey-650: rgb(80 80 80); + --color-grey-700: rgb(59 59 59); + --color-grey-800: rgb(33 33 33); + --color-grey-900: rgb(18 18 18); + --color-black: rgb(0 0 0); + + --color-red: rgb(166 22 55); + --color-green: rgb(35 166 80); + --color-navy: rgb(9 30 66); + } +} diff --git a/app/assets/stylesheets/settings/theme.css b/app/assets/stylesheets/settings/theme.css new file mode 100644 index 00000000..50b8cfe2 --- /dev/null +++ b/app/assets/stylesheets/settings/theme.css @@ -0,0 +1,148 @@ +@layer settings { + :root { + color-scheme: light dark; + + --primary-color: light-dark(var(--color-purple), var(--color-purple-light)); + --primary-bg-color: light-dark(var(--color-white), var(--color-grey-800)); + + --link-active-color: var(--primary-color); + + /* Body */ + --body-bg-color: light-dark(var(--color-white), var(--color-grey-800)); + + /* Text */ + --text-primary-color: light-dark(var(--color-grey-900), var(--color-white)); + --text-secondary-color: light-dark(var(--color-grey-600), var(--color-grey-300)); + --text-success-color: var(--color-green); + + /* Sidebar */ + --sidebar-bg-color: light-dark(var(--color-grey-100), var(--color-grey-900)); + + /* Progress bar */ + --progress-bar-bg-color: var(--primary-color); + + /* Button */ + --btn-color: var(--color-white); + --btn-primary-bg-color: var(--color-purple); + --btn-primary-hover-bg-color: light-dark(var(--color-purple-shade), var(--color-purple-tint)); + --btn-secondary-bg-color: rgb(from var(--color-purple) r g b / 0.25); + --btn-secondary-hover-bg-color: light-dark(rgb(from var(--color-purple-shade) r g b / 0.25), rgb(from var(--color-purple-tint) r g b / 0.25)); + --btn-secondary-color: light-dark(var(--color-purple-light), var(--primary-color)); + --btn-outline-color: light-dark(var(--color-grey-900), var(--color-white)); + --btn-outline-border-color: light-dark(var(--color-grey-300), var(--color-grey-800)); + --btn-outline-bg-color: light-dark(var(--color-grey-100), var(--color-grey-700)); + --btn-outline-hover-bg-color: light-dark(var(--color-grey-250), var(--color-grey-650)); + --btn-icon-hover-bg-color: light-dark(rgb(from var(--color-grey-300) r g b / 0.3), rgb(from var(--color-grey-600) r g b / 0.5)); + + /* Flash message */ + --flash-color: var(--color-white); + --flash-notice-bg-color: var(--color-green); + --flash-alert-bg-color: var(--color-red); + + /* Tab */ + --tab-color: light-dark(var(--color-grey-900), var(--color-white)); + --tab-active-color: var(--primary-color); + + /* List */ + --list-border-color: light-dark(var(--color-grey-200), var(--color-grey-800)); + --list-active-color: var(--primary-color); + --list-grouped-bg-color: light-dark(var(--color-grey-100), var(--color-grey-900)); + --list-subtext-color: light-dark(var(--color-grey-500), var(--color-grey-400)); + + /* Table */ + --table-border-color: light-dark(var(--color-grey-200), var(--color-grey-900)); + --table-active-color: var(--primary-color); + --table-color: light-dark(var(--color-grey-600), var(--color-grey-300)); + + /* Input */ + --input-bg-color: light-dark(var(--color-grey-200), var(--color-grey-700)); + --input-color: light-dark(var(--color-grey-900), var(--color-white)); + --input-icon-color: light-dark(var(--color-grey-500), var(--color-grey-900)); + + /* Loader */ + --loader-bg-color: var(--primary-color); + --loader-secondary-bg-color: rgb(from var(--primary-color) r g b / 0.3); + + /* Dropdown */ + --dropdown-bg-color: light-dark(var(--color-white), var(--color-grey-700)); + --dropdown-active-color: light-dark(var(--color-grey-300), var(--color-grey-500)); + --dropdown-color: light-dark(var(--color-grey-900), var(--color-white)); + --dropdown-shadow-color: light-dark(var(--color-grey-300), var(--color-black)); + + /* Dialog */ + --dialog-bg-color: light-dark(var(--color-white), var(--color-grey-900)); + --dialog-header-bg-color: light-dark(var(--color-grey-200), var(--color-grey-500)); + --dialog-header-color: var(--color-grey-900); + + ::backdrop { + --dialog-backdrop-color: rgb(from light-dark(var(--color-grey-100), var(--color-grey-800)) r g b / 0.9); + } + + /* Overlay */ + --overlay-blur-bg-color: rgb(from light-dark(var(--color-grey-100), var(--color-grey-800)) r g b / 0.9); + + /* Hr */ + --hr-color: light-dark(var(--color-grey-200), var(--color-grey-900)); + + /* Action bar */ + --action-bar-bg-color: light-dark(var(--color-grey-200), var(--color-grey-800)); + + /* Nav */ + --nav-shadow: + 0 1px 0 rgb(from light-dark(var(--color-grey-300), var(--color-black)) r g b / 0.12), + 0 1px 3px rgb(from light-dark(var(--color-grey-300), var(--color-black)) r g b / 0.15); + --nav-primary-bg-color: rgb(from light-dark(var(--color-white), var(--color-grey-800)) r g b / 0.9); + --nav-backdrop-bg-color: rgb(from light-dark(var(--color-white), var(--color-grey-800)) r g b / 0.88); + + /* Player */ + --player-bg-color: light-dark(var(--color-grey-200), var(--color-black)); + --player-header-bg-color: rgb(from light-dark(var(--color-grey-200), var(--color-black)) r g b / 0.65); + --player-progress-bg-color: light-dark(var(--color-grey-200), var(--color-black)); + --player-progress-hover-bg-color: light-dark(var(--color-grey-100), var(--color-grey-800)); + --player-progress-color: var(--primary-color); + --player-volume-bg-color: light-dark(var(--color-grey-300), var(--color-grey-600)); + --player-volume-color: var(--primary-color); + --player-control-color: light-dark(var(--color-grey-500), var(--color-grey-400)); + --player-control-border-color: light-dark(var(--color-grey-300), var(--color-grey-800)); + --player-control-main-color: light-dark(var(--color-grey-900), var(--color-white)); + + /* Badge */ + --badge-bg-color: rgb(from var(--primary-color) r g b / 0.2); + --badge-color: var(--primary-color); + + /* Card */ + --card-border-color: light-dark(var(--color-grey-200), var(--color-grey-700)); + --card-bg-color: light-dark(var(--color-grey-100), var(--color-grey-900)); + + /* Icon */ + --icon-active-color: var(--primary-color); + --icon-emphasis-color: var(--color-red); + + --gradient-bg-color: + linear-gradient( + rgb(from var(--color-white) r g b / 0.85), + rgb(from var(--color-white) r g b / 0.65) + ), + linear-gradient(var(--primary-color), var(--primary-color)); + + } + + [data-color-scheme="light"] { + color-scheme: light; + } + + [data-color-scheme="dark"] { + color-scheme: dark; + --gradient-bg-color: + linear-gradient(var(--color-black), rgb(from var(--color-black) r g b / 0.75)), + linear-gradient(var(--primary-color), var(--primary-color)); + } + + @media (prefers-color-scheme: dark) { + [data-color-scheme="auto"] { + --gradient-bg-color: + linear-gradient(var(--color-black), rgb(from var(--color-black) r g b / 0.75)), + linear-gradient(var(--primary-color), var(--primary-color)); + } + } +} diff --git a/app/assets/stylesheets/settings/variables.css b/app/assets/stylesheets/settings/variables.css new file mode 100644 index 00000000..950d6244 --- /dev/null +++ b/app/assets/stylesheets/settings/variables.css @@ -0,0 +1,36 @@ +@layer settings { + :root { + /* Fonts */ + --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "Wenquanyi Micro Hei", sans-serif; + --font-monospace: "Menlo", "Monaco", "Consolas", "Courier New", monospace; + + /* Font sizes */ + --font-size-small: 12px; + --font-size-medium: 14px; + --font-size-large: 16px; + --font-size-wide: 20px; + + /* Spacing */ + --spacing-tiny: 6px; + --spacing-narrow: 12px; + --spacing-small: 18px; + --spacing-medium: 24px; + --spacing-large: 36px; + --spacing-wide: 48px; + + /* Border radius */ + --border-radius-small: 2px; + --border-radius-medium: 4px; + --border-radius-large: 8px; + + /* Z-indexes */ + --z-base: 0; + --z-nav: 1; + --z-sidebar: 2; + --z-dropdown-overlay: 3; + --z-dropdown: 4; + --z-flash: 5; + --z-fixed-overlay: 6; + --z-expanded-sidebar: 7; + } +} diff --git a/app/assets/stylesheets/tools/_functions.scss b/app/assets/stylesheets/tools/_functions.scss deleted file mode 100644 index 83fc3a9a..00000000 --- a/app/assets/stylesheets/tools/_functions.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use "sass:map"; -@use "sass:string"; -@use "../settings/variables"; - -@function font-size($type) { - @return map.get(variables.$font-size, $type); -} - -@function spacing($type) { - @return map.get(variables.$spacing, $type); -} - -@function border-radius($type) { - @return map.get(variables.$border-radius, $type); -} - -@function breakpoint-postfix($breakpoint) { - @if string.length($breakpoint) != 0 { - @return "\\@#{$breakpoint}"; - } - - @return $breakpoint; -} diff --git a/app/assets/stylesheets/tools/_responsive.scss b/app/assets/stylesheets/tools/_responsive.scss deleted file mode 100644 index 246e561b..00000000 --- a/app/assets/stylesheets/tools/_responsive.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "sass:map"; -@use "../settings/variables"; - -@mixin media-query { - @content(""); - - @media (min-width: #{map.get(variables.$breakpoint, "wide")}) { - @content("extra-wide"); - } - - @each $name, $value in variables.$breakpoint { - @media (max-width: #{$value}) { - @content($name); - } - } -} diff --git a/app/assets/stylesheets/utilities/_background.scss b/app/assets/stylesheets/utilities/_background.scss deleted file mode 100644 index 19ea211c..00000000 --- a/app/assets/stylesheets/utilities/_background.scss +++ /dev/null @@ -1,7 +0,0 @@ -.u-bg-primary { - background: var(--primary-bg-color) !important; -} - -.u-bg-gradient { - background: var(--gradient-bg-color) !important; -} diff --git a/app/assets/stylesheets/utilities/_border.scss b/app/assets/stylesheets/utilities/_border.scss deleted file mode 100644 index 387ca6b3..00000000 --- a/app/assets/stylesheets/utilities/_border.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use "../settings/variables"; - -.u-border-shadow { - box-shadow: 0 8px 16px -4px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31) !important; -} - -.u-border-none { - border: none !important; -} - -@each $name, $value in variables.$border-radius { - .u-border-radius-#{$name} { - border-radius: $value !important; - } -} diff --git a/app/assets/stylesheets/utilities/_cursor.scss b/app/assets/stylesheets/utilities/_cursor.scss deleted file mode 100644 index aa1997c6..00000000 --- a/app/assets/stylesheets/utilities/_cursor.scss +++ /dev/null @@ -1,3 +0,0 @@ -.u-cursor-pointer { - cursor: pointer !important; -} diff --git a/app/assets/stylesheets/utilities/_display.scss b/app/assets/stylesheets/utilities/_display.scss deleted file mode 100644 index c824e077..00000000 --- a/app/assets/stylesheets/utilities/_display.scss +++ /dev/null @@ -1,20 +0,0 @@ -@use "../tools/responsive"; -@use "../tools/functions"; - -@mixin display($breakpoint-postfix) { - .u-display-none#{$breakpoint-postfix} { - display: none !important; - } - - .u-display-block#{$breakpoint-postfix} { - display: block !important; - } -} - -.u-display-inline-block { - display: inline-block !important; -} - -@include responsive.media-query using ($breakpoint) { - @include display(functions.breakpoint-postfix($breakpoint)); -} diff --git a/app/assets/stylesheets/utilities/_image.scss b/app/assets/stylesheets/utilities/_image.scss deleted file mode 100644 index 97212982..00000000 --- a/app/assets/stylesheets/utilities/_image.scss +++ /dev/null @@ -1,19 +0,0 @@ -.u-image-large { - width: 300px; - height: 300px; -} - -.u-image-medium { - width: 200px; - height: 200px; -} - -.u-image-small { - width: 100px; - height: 100px; -} - -.u-image-fluid { - max-width: 100%; - height: auto; -} diff --git a/app/assets/stylesheets/utilities/_overflow.scss b/app/assets/stylesheets/utilities/_overflow.scss deleted file mode 100644 index 2ceb263d..00000000 --- a/app/assets/stylesheets/utilities/_overflow.scss +++ /dev/null @@ -1,7 +0,0 @@ -.u-overflow-hidden { - overflow: hidden !important; -} - -.u-overflow-auto { - overflow: auto !important; -} diff --git a/app/assets/stylesheets/utilities/_position.scss b/app/assets/stylesheets/utilities/_position.scss deleted file mode 100644 index 94c08f7c..00000000 --- a/app/assets/stylesheets/utilities/_position.scss +++ /dev/null @@ -1,15 +0,0 @@ -.u-position-relative { - position: relative !important; -} - -.u-position-sticky-top { - position: sticky !important; - top: 0; -} - -.u-position-fixed-bottom { - position: fixed !important; - left: 0; - right: 0; - bottom: 0; -} diff --git a/app/assets/stylesheets/utilities/_sizing.scss b/app/assets/stylesheets/utilities/_sizing.scss deleted file mode 100644 index 493e0162..00000000 --- a/app/assets/stylesheets/utilities/_sizing.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use "../tools/functions"; - -.u-vw-100 { - width: 100vw !important; -} - -.u-vh-100 { - height: 100vh !important; -} - -.u-w-100 { - width: 100% !important; -} - -.u-h-100 { - height: 100% !important; -} - -.u-h-0 { - height: 0 !important; -} - -.u-w-0 { - width: 0 !important; -} diff --git a/app/assets/stylesheets/utilities/_spacing.scss b/app/assets/stylesheets/utilities/_spacing.scss deleted file mode 100644 index 49a292ef..00000000 --- a/app/assets/stylesheets/utilities/_spacing.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use "../settings/variables"; -@use "../tools/responsive"; -@use "../tools/functions" as *; - -@mixin margin($name, $size) { - .u-m-#{$name} { - margin: $size !important; - } - - .u-mt-#{$name} { - margin-top: $size !important; - } - - .u-mb-#{$name} { - margin-bottom: $size !important; - } - - .u-ml-#{$name} { - margin-left: $size !important; - } - - .u-mr-#{$name} { - margin-right: $size !important; - } - - .u-mx-#{$name} { - margin-left: $size !important; - margin-right: $size !important; - } - - .u-my-#{$name} { - margin-top: $size !important; - margin-bottom: $size !important; - } -} - -@mixin padding($name, $size) { - .u-p-#{$name} { - padding: $size !important; - } - - .u-pt-#{$name} { - padding-top: $size !important; - } - - .u-pb-#{$name} { - padding-bottom: $size !important; - } - - .u-pl-#{$name} { - padding-left: $size !important; - } - - .u-pr-#{$name} { - padding-right: $size !important; - } - - .u-px-#{$name} { - padding-left: $size !important; - padding-right: $size !important; - } - - .u-py-#{$name} { - padding-top: $size !important; - padding-bottom: $size !important; - } -} - -@each $name, $value in variables.$spacing { - @include margin($name, $value); - @include padding($name, $value); -} - -@include margin(0, 0); -@include margin(auto, auto); -@include padding(0, 0); - -@include responsive.media-query using ($breakpoint) { - @if $breakpoint == "small" { - .u-p-small\@small { - padding: spacing("small") !important; - } - } - - @if $breakpoint == "extra-narrow" { - .u-p-narrow\@extra-narrow { - padding: spacing("narrow") !important; - } - } -} diff --git a/app/assets/stylesheets/utilities/_text.scss b/app/assets/stylesheets/utilities/_text.scss deleted file mode 100644 index 0ed36750..00000000 --- a/app/assets/stylesheets/utilities/_text.scss +++ /dev/null @@ -1,52 +0,0 @@ -@use "../settings/variables"; - -.u-text-truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.u-text-weight-bold { - font-weight: bold !important; -} - -.u-text-weight-normal { - font-weight: normal !important; -} - -.u-text-color-primary { - color: var(--text-primary-color) !important; -} - -.u-text-color-secondary { - color: var(--text-secondary-color) !important; -} - -.u-text-color-success { - color: var(--text-success-color) !important; -} - -.u-text-monospace { - font-family: variables.$monospace-fonts; -} - -.u-text-align-center { - text-align: center !important; -} - -.u-text-align-left { - text-align: left !important; -} - -.u-text-line-clamp-2 { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2 !important; - overflow: hidden; -} - -@each $name, $value in variables.$font-size { - .u-text-size-#{$name} { - font-size: $value; - } -} diff --git a/app/assets/stylesheets/utilities/_visibility.scss b/app/assets/stylesheets/utilities/_visibility.scss deleted file mode 100644 index fe742e41..00000000 --- a/app/assets/stylesheets/utilities/_visibility.scss +++ /dev/null @@ -1,3 +0,0 @@ -.u-visibility-hidden { - visibility: hidden !important; -} diff --git a/app/assets/stylesheets/utilities/background.css b/app/assets/stylesheets/utilities/background.css new file mode 100644 index 00000000..ac84699c --- /dev/null +++ b/app/assets/stylesheets/utilities/background.css @@ -0,0 +1,9 @@ +@layer utilities { + .u-bg-primary { + background: var(--primary-bg-color); + } + + .u-bg-gradient { + background: var(--gradient-bg-color); + } +} diff --git a/app/assets/stylesheets/utilities/border.css b/app/assets/stylesheets/utilities/border.css new file mode 100644 index 00000000..16151006 --- /dev/null +++ b/app/assets/stylesheets/utilities/border.css @@ -0,0 +1,21 @@ +@layer utilities { + .u-border-shadow { + box-shadow: 0 8px 16px -4px rgb(from var(--color-navy) r g b / 0.25), 0 0 1px rgb(from var(--color-navy) r g b / 0.31); + } + + .u-border-none { + border: none; + } + + .u-border-radius-small { + border-radius: var(--border-radius-small); + } + + .u-border-radius-medium { + border-radius: var(--border-radius-medium); + } + + .u-border-radius-large { + border-radius: var(--border-radius-large); + } +} diff --git a/app/assets/stylesheets/utilities/bridge.css b/app/assets/stylesheets/utilities/bridge.css new file mode 100644 index 00000000..22f194a3 --- /dev/null +++ b/app/assets/stylesheets/utilities/bridge.css @@ -0,0 +1,6 @@ +@layer utilities { + [data-bridge-components~="account"] [data-controller~="bridge--account"], + [data-bridge-components~="search"] [data-controller~="bridge--search"] { + display: none; + } +} diff --git a/app/assets/stylesheets/utilities/cursor.css b/app/assets/stylesheets/utilities/cursor.css new file mode 100644 index 00000000..479c718e --- /dev/null +++ b/app/assets/stylesheets/utilities/cursor.css @@ -0,0 +1,5 @@ +@layer utilities { + .u-cursor-pointer { + cursor: pointer; + } +} diff --git a/app/assets/stylesheets/utilities/display.css b/app/assets/stylesheets/utilities/display.css new file mode 100644 index 00000000..747f935a --- /dev/null +++ b/app/assets/stylesheets/utilities/display.css @@ -0,0 +1,58 @@ +@layer utilities { + .u-display-none { + display: none; + } + + .u-display-block { + display: block; + } + + .u-display-inline-block { + display: inline-block; + } + + @media (min-width: 1880px) { + .u-display-none\@extra-wide { display: none; } + .u-display-block\@extra-wide { display: block; } + } + + @media (max-width: 1880px) { + .u-display-none\@wide { display: none; } + .u-display-block\@wide { display: block; } + } + + @media (max-width: 1630px) { + .u-display-none\@extra-large { display: none; } + .u-display-block\@extra-large { display: block; } + } + + @media (max-width: 1380px) { + .u-display-none\@large { display: none; } + .u-display-block\@large { display: block; } + } + + @media (max-width: 1130px) { + .u-display-none\@medium { display: none; } + .u-display-block\@medium { display: block; } + } + + @media (max-width: 930px) { + .u-display-none\@small { display: none; } + .u-display-block\@small { display: block; } + } + + @media (max-width: 730px) { + .u-display-none\@extra-small { display: none; } + .u-display-block\@extra-small { display: block; } + } + + @media (max-width: 560px) { + .u-display-none\@narrow { display: none; } + .u-display-block\@narrow { display: block; } + } + + @media (max-width: 375px) { + .u-display-none\@extra-narrow { display: none; } + .u-display-block\@extra-narrow { display: block; } + } +} diff --git a/app/assets/stylesheets/utilities/image.css b/app/assets/stylesheets/utilities/image.css new file mode 100644 index 00000000..d3ecc8c7 --- /dev/null +++ b/app/assets/stylesheets/utilities/image.css @@ -0,0 +1,21 @@ +@layer utilities { + .u-image-large { + width: 300px; + height: 300px; + } + + .u-image-medium { + width: 200px; + height: 200px; + } + + .u-image-small { + width: 100px; + height: 100px; + } + + .u-image-fluid { + max-width: 100%; + height: auto; + } +} diff --git a/app/assets/stylesheets/utilities/overflow.css b/app/assets/stylesheets/utilities/overflow.css new file mode 100644 index 00000000..211628dd --- /dev/null +++ b/app/assets/stylesheets/utilities/overflow.css @@ -0,0 +1,9 @@ +@layer utilities { + .u-overflow-hidden { + overflow: hidden; + } + + .u-overflow-auto { + overflow: auto; + } +} diff --git a/app/assets/stylesheets/utilities/position.css b/app/assets/stylesheets/utilities/position.css new file mode 100644 index 00000000..9c434f30 --- /dev/null +++ b/app/assets/stylesheets/utilities/position.css @@ -0,0 +1,17 @@ +@layer utilities { + .u-position-relative { + position: relative; + } + + .u-position-sticky-top { + position: sticky; + top: 0; + } + + .u-position-fixed-bottom { + position: fixed; + left: 0; + right: 0; + bottom: 0; + } +} diff --git a/app/assets/stylesheets/utilities/sizing.css b/app/assets/stylesheets/utilities/sizing.css new file mode 100644 index 00000000..35efb685 --- /dev/null +++ b/app/assets/stylesheets/utilities/sizing.css @@ -0,0 +1,25 @@ +@layer utilities { + .u-vw-100 { + width: 100vw; + } + + .u-vh-100 { + height: 100vh; + } + + .u-w-100 { + width: 100%; + } + + .u-h-100 { + height: 100%; + } + + .u-h-0 { + height: 0; + } + + .u-w-0 { + width: 0; + } +} diff --git a/app/assets/stylesheets/utilities/spacing.css b/app/assets/stylesheets/utilities/spacing.css new file mode 100644 index 00000000..1bcf89be --- /dev/null +++ b/app/assets/stylesheets/utilities/spacing.css @@ -0,0 +1,149 @@ +@layer utilities { + /* Margin — tiny (6px) */ + .u-m-tiny { margin: var(--spacing-tiny); } + .u-mt-tiny { margin-top: var(--spacing-tiny); } + .u-mb-tiny { margin-bottom: var(--spacing-tiny); } + .u-ml-tiny { margin-left: var(--spacing-tiny); } + .u-mr-tiny { margin-right: var(--spacing-tiny); } + .u-mx-tiny { margin-left: var(--spacing-tiny); margin-right: var(--spacing-tiny); } + .u-my-tiny { margin-top: var(--spacing-tiny); margin-bottom: var(--spacing-tiny); } + + /* Margin — narrow (12px) */ + .u-m-narrow { margin: var(--spacing-narrow); } + .u-mt-narrow { margin-top: var(--spacing-narrow); } + .u-mb-narrow { margin-bottom: var(--spacing-narrow); } + .u-ml-narrow { margin-left: var(--spacing-narrow); } + .u-mr-narrow { margin-right: var(--spacing-narrow); } + .u-mx-narrow { margin-left: var(--spacing-narrow); margin-right: var(--spacing-narrow); } + .u-my-narrow { margin-top: var(--spacing-narrow); margin-bottom: var(--spacing-narrow); } + + /* Margin — small (18px) */ + .u-m-small { margin: var(--spacing-small); } + .u-mt-small { margin-top: var(--spacing-small); } + .u-mb-small { margin-bottom: var(--spacing-small); } + .u-ml-small { margin-left: var(--spacing-small); } + .u-mr-small { margin-right: var(--spacing-small); } + .u-mx-small { margin-left: var(--spacing-small); margin-right: var(--spacing-small); } + .u-my-small { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); } + + /* Margin — medium (24px) */ + .u-m-medium { margin: var(--spacing-medium); } + .u-mt-medium { margin-top: var(--spacing-medium); } + .u-mb-medium { margin-bottom: var(--spacing-medium); } + .u-ml-medium { margin-left: var(--spacing-medium); } + .u-mr-medium { margin-right: var(--spacing-medium); } + .u-mx-medium { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); } + .u-my-medium { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); } + + /* Margin — large (36px) */ + .u-m-large { margin: var(--spacing-large); } + .u-mt-large { margin-top: var(--spacing-large); } + .u-mb-large { margin-bottom: var(--spacing-large); } + .u-ml-large { margin-left: var(--spacing-large); } + .u-mr-large { margin-right: var(--spacing-large); } + .u-mx-large { margin-left: var(--spacing-large); margin-right: var(--spacing-large); } + .u-my-large { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); } + + /* Margin — wide (48px) */ + .u-m-wide { margin: var(--spacing-wide); } + .u-mt-wide { margin-top: var(--spacing-wide); } + .u-mb-wide { margin-bottom: var(--spacing-wide); } + .u-ml-wide { margin-left: var(--spacing-wide); } + .u-mr-wide { margin-right: var(--spacing-wide); } + .u-mx-wide { margin-left: var(--spacing-wide); margin-right: var(--spacing-wide); } + .u-my-wide { margin-top: var(--spacing-wide); margin-bottom: var(--spacing-wide); } + + /* Padding — tiny */ + .u-p-tiny { padding: var(--spacing-tiny); } + .u-pt-tiny { padding-top: var(--spacing-tiny); } + .u-pb-tiny { padding-bottom: var(--spacing-tiny); } + .u-pl-tiny { padding-left: var(--spacing-tiny); } + .u-pr-tiny { padding-right: var(--spacing-tiny); } + .u-px-tiny { padding-left: var(--spacing-tiny); padding-right: var(--spacing-tiny); } + .u-py-tiny { padding-top: var(--spacing-tiny); padding-bottom: var(--spacing-tiny); } + + /* Padding — narrow */ + .u-p-narrow { padding: var(--spacing-narrow); } + .u-pt-narrow { padding-top: var(--spacing-narrow); } + .u-pb-narrow { padding-bottom: var(--spacing-narrow); } + .u-pl-narrow { padding-left: var(--spacing-narrow); } + .u-pr-narrow { padding-right: var(--spacing-narrow); } + .u-px-narrow { padding-left: var(--spacing-narrow); padding-right: var(--spacing-narrow); } + .u-py-narrow { padding-top: var(--spacing-narrow); padding-bottom: var(--spacing-narrow); } + + /* Padding — small */ + .u-p-small { padding: var(--spacing-small); } + .u-pt-small { padding-top: var(--spacing-small); } + .u-pb-small { padding-bottom: var(--spacing-small); } + .u-pl-small { padding-left: var(--spacing-small); } + .u-pr-small { padding-right: var(--spacing-small); } + .u-px-small { padding-left: var(--spacing-small); padding-right: var(--spacing-small); } + .u-py-small { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); } + + /* Padding — medium */ + .u-p-medium { padding: var(--spacing-medium); } + .u-pt-medium { padding-top: var(--spacing-medium); } + .u-pb-medium { padding-bottom: var(--spacing-medium); } + .u-pl-medium { padding-left: var(--spacing-medium); } + .u-pr-medium { padding-right: var(--spacing-medium); } + .u-px-medium { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); } + .u-py-medium { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); } + + /* Padding — large */ + .u-p-large { padding: var(--spacing-large); } + .u-pt-large { padding-top: var(--spacing-large); } + .u-pb-large { padding-bottom: var(--spacing-large); } + .u-pl-large { padding-left: var(--spacing-large); } + .u-pr-large { padding-right: var(--spacing-large); } + .u-px-large { padding-left: var(--spacing-large); padding-right: var(--spacing-large); } + .u-py-large { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); } + + /* Padding — wide */ + .u-p-wide { padding: var(--spacing-wide); } + .u-pt-wide { padding-top: var(--spacing-wide); } + .u-pb-wide { padding-bottom: var(--spacing-wide); } + .u-pl-wide { padding-left: var(--spacing-wide); } + .u-pr-wide { padding-right: var(--spacing-wide); } + .u-px-wide { padding-left: var(--spacing-wide); padding-right: var(--spacing-wide); } + .u-py-wide { padding-top: var(--spacing-wide); padding-bottom: var(--spacing-wide); } + + /* Margin — 0 */ + .u-m-0 { margin: 0; } + .u-mt-0 { margin-top: 0; } + .u-mb-0 { margin-bottom: 0; } + .u-ml-0 { margin-left: 0; } + .u-mr-0 { margin-right: 0; } + .u-mx-0 { margin-left: 0; margin-right: 0; } + .u-my-0 { margin-top: 0; margin-bottom: 0; } + + /* Margin — auto */ + .u-m-auto { margin: auto; } + .u-mt-auto { margin-top: auto; } + .u-mb-auto { margin-bottom: auto; } + .u-ml-auto { margin-left: auto; } + .u-mr-auto { margin-right: auto; } + .u-mx-auto { margin-left: auto; margin-right: auto; } + .u-my-auto { margin-top: auto; margin-bottom: auto; } + + /* Padding — 0 */ + .u-p-0 { padding: 0; } + .u-pt-0 { padding-top: 0; } + .u-pb-0 { padding-bottom: 0; } + .u-pl-0 { padding-left: 0; } + .u-pr-0 { padding-right: 0; } + .u-px-0 { padding-left: 0; padding-right: 0; } + .u-py-0 { padding-top: 0; padding-bottom: 0; } + + /* Responsive utilities */ + @media (max-width: 930px) { + .u-p-small\@small { + padding: var(--spacing-small); + } + } + + @media (max-width: 375px) { + .u-p-narrow\@extra-narrow { + padding: var(--spacing-narrow); + } + } +} diff --git a/app/assets/stylesheets/utilities/text.css b/app/assets/stylesheets/utilities/text.css new file mode 100644 index 00000000..e88023c9 --- /dev/null +++ b/app/assets/stylesheets/utilities/text.css @@ -0,0 +1,62 @@ +@layer utilities { + .u-text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .u-text-weight-bold { + font-weight: bold; + } + + .u-text-weight-normal { + font-weight: normal; + } + + .u-text-color-primary { + color: var(--text-primary-color); + } + + .u-text-color-secondary { + color: var(--text-secondary-color); + } + + .u-text-color-success { + color: var(--text-success-color); + } + + .u-text-monospace { + font-family: var(--font-monospace); + } + + .u-text-align-center { + text-align: center; + } + + .u-text-align-left { + text-align: left; + } + + .u-text-line-clamp-2 { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + + .u-text-size-small { + font-size: var(--font-size-small); + } + + .u-text-size-medium { + font-size: var(--font-size-medium); + } + + .u-text-size-large { + font-size: var(--font-size-large); + } + + .u-text-size-wide { + font-size: var(--font-size-wide); + } +} diff --git a/app/assets/stylesheets/utilities/visibility.css b/app/assets/stylesheets/utilities/visibility.css new file mode 100644 index 00000000..480351d9 --- /dev/null +++ b/app/assets/stylesheets/utilities/visibility.css @@ -0,0 +1,5 @@ +@layer utilities { + .u-visibility-hidden { + visibility: hidden; + } +} diff --git a/esbuild.config.mjs b/esbuild.config.mjs new file mode 100644 index 00000000..ed4f8626 --- /dev/null +++ b/esbuild.config.mjs @@ -0,0 +1,38 @@ +import * as esbuild from "esbuild" +import { readdirSync } from "node:fs" + +const watch = process.argv.includes("--watch") +const minify = !process.argv.includes("--dev") + +const externalAssets = ["*.svg", "*.png", "*.jpg", "*.gif", "*.woff", "*.woff2"] + +const jsEntryPoints = readdirSync("app/javascript") + .filter(file => /\.[a-z]+$/i.test(file)) + .map(file => `app/javascript/${file}`) + +const configs = [ + { + entryPoints: jsEntryPoints, + bundle: true, + sourcemap: true, + format: "esm", + outdir: "app/assets/builds", + publicPath: "/assets", + minify, + external: externalAssets + }, + { + entryPoints: ["app/assets/stylesheets/application.css"], + bundle: true, + outdir: "app/assets/builds", + minify, + external: externalAssets + } +] + +if (watch) { + const contexts = await Promise.all(configs.map(esbuild.context)) + await Promise.all(contexts.map(ctx => ctx.watch())) +} else { + await Promise.all(configs.map(esbuild.build)) +} diff --git a/lib/tasks/lint.rake b/lib/tasks/lint.rake index 57772e22..5831a7f2 100644 --- a/lib/tasks/lint.rake +++ b/lib/tasks/lint.rake @@ -7,7 +7,7 @@ unless Rails.env.production? end task :css do - abort("rails lint:css failed") unless system("npx stylelint 'app/assets/stylesheets/**/*.scss'") + abort("rails lint:css failed") unless system("npx stylelint 'app/assets/stylesheets/**/*.css'") end task :erb do diff --git a/package-lock.json b/package-lock.json index 096f8c3f..da2846da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,13 @@ "@hotwired/stimulus": "^3.2.1", "@hotwired/turbo-rails": "^8.0.0", "esbuild": "^0.18.17", - "howler": "^2.2.3", - "sass": "^1.64.2" + "howler": "^2.2.3" }, "devDependencies": { + "@stylistic/stylelint-plugin": "^5.2.0", "standard": "^17.1.0", - "stylelint": "^15.10.2", - "stylelint-config-standard-scss": "^9.0.0" + "stylelint": "^17.12.0", + "stylelint-config-standard": "^40.0.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -28,89 +28,130 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.5.5", + "version": "7.29.0", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz", + "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/highlight": "^7.0.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.5.0", - "dev": true, - "license": "MIT", - "dependencies": { - "chalk": "^2.0.0", - "esutils": "^2.0.2", - "js-tokens": "^4.0.0" + "@babel/helper-validator-identifier": "^7.28.5", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" } }, - "node_modules/@babel/highlight/node_modules/ansi-styles": { - "version": "3.2.1", + "node_modules/@babel/helper-validator-identifier": { + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", + "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", "dev": true, "license": "MIT", - "dependencies": { - "color-convert": "^1.9.0" - }, "engines": { - "node": ">=4" + "node": ">=6.9.0" } }, - "node_modules/@babel/highlight/node_modules/chalk": { - "version": "2.4.2", + "node_modules/@cacheable/memory": { + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.0.9.tgz", + "integrity": "sha512-HdMx6DoGywB30vacDbBsITbIX4pgFqj1zsrV58jZBUw3klzkNoXhj7qOqAgledhxG7YZI5rBSJg7Zp8/VG0DuA==", "dev": true, "license": "MIT", "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" + "@cacheable/utils": "^2.4.1", + "@keyv/bigmap": "^1.3.1", + "hookified": "^1.15.1", + "keyv": "^5.6.0" } }, - "node_modules/@babel/highlight/node_modules/color-convert": { - "version": "1.9.3", + "node_modules/@cacheable/utils": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.4.1.tgz", + "integrity": "sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==", "dev": true, "license": "MIT", "dependencies": { - "color-name": "1.1.3" + "hashery": "^1.5.1", + "keyv": "^5.6.0" } }, - "node_modules/@babel/highlight/node_modules/color-name": { - "version": "1.1.3", - "dev": true, - "license": "MIT" - }, - "node_modules/@babel/highlight/node_modules/escape-string-regexp": { - "version": "1.0.5", + "node_modules/@csstools/css-calc": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.1.tgz", + "integrity": "sha512-DtdHlgXh5ZkA43cwBcAm+huzgJiwx3ZTWVjBs94kwz2xKqSimDA3lBgCjphYgwgVUMWatSM0pDd8TILB1yrVVg==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "license": "MIT", "engines": { - "node": ">=0.8.0" + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0" } }, - "node_modules/@babel/highlight/node_modules/has-flag": { - "version": "3.0.0", + "node_modules/@csstools/css-parser-algorithms": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz", + "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "license": "MIT", "engines": { - "node": ">=4" + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-tokenizer": "^4.0.0" } }, - "node_modules/@babel/highlight/node_modules/supports-color": { - "version": "5.5.0", + "node_modules/@csstools/css-syntax-patches-for-csstree": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.4.tgz", + "integrity": "sha512-wgsqt92b7C7tQhIdPNxj0n9zuUbQlvAuI1exyzeNrOKOi62SD7ren8zqszmpVREjAOqg8cD2FqYhQfAuKjk4sw==", "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^3.0.0" + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "peerDependencies": { + "css-tree": "^3.2.1" }, - "engines": { - "node": ">=4" + "peerDependenciesMeta": { + "css-tree": { + "optional": true + } } }, - "node_modules/@csstools/css-parser-algorithms": { - "version": "2.3.1", + "node_modules/@csstools/css-tokenizer": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz", + "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==", "dev": true, "funding": [ { @@ -124,14 +165,13 @@ ], "license": "MIT", "engines": { - "node": "^14 || ^16 || >=18" - }, - "peerDependencies": { - "@csstools/css-tokenizer": "^2.2.0" + "node": ">=20.19.0" } }, - "node_modules/@csstools/css-tokenizer": { - "version": "2.2.0", + "node_modules/@csstools/media-query-list-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz", + "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==", "dev": true, "funding": [ { @@ -145,11 +185,17 @@ ], "license": "MIT", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=20.19.0" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0" } }, - "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.3", + "node_modules/@csstools/selector-resolve-nested": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.0.tgz", + "integrity": "sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==", "dev": true, "funding": [ { @@ -161,17 +207,18 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", + "license": "MIT-0", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=20.19.0" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.3.1", - "@csstools/css-tokenizer": "^2.2.0" + "postcss-selector-parser": "^7.1.1" } }, "node_modules/@csstools/selector-specificity": { - "version": "3.0.0", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz", + "integrity": "sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==", "dev": true, "funding": [ { @@ -185,10 +232,10 @@ ], "license": "MIT-0", "engines": { - "node": "^14 || ^16 || >=18" + "node": ">=20.19.0" }, "peerDependencies": { - "postcss-selector-parser": "^6.0.13" + "postcss-selector-parser": "^7.1.1" } }, "node_modules/@esbuild/android-arm": { @@ -685,12 +732,38 @@ "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@keyv/bigmap": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.1.tgz", + "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "hashery": "^1.4.0", + "hookified": "^1.15.0" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "keyv": "^5.6.0" + } + }, + "node_modules/@keyv/serialize": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@keyv/serialize/-/serialize-1.1.1.tgz", + "integrity": "sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==", + "dev": true, + "license": "MIT" + }, "node_modules/@nodelib/fs.scandir": { - "version": "2.1.3", + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", "dev": true, "license": "MIT", "dependencies": { - "@nodelib/fs.stat": "2.0.3", + "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" }, "engines": { @@ -698,7 +771,9 @@ } }, "node_modules/@nodelib/fs.stat": { - "version": "2.0.3", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", "dev": true, "license": "MIT", "engines": { @@ -706,11 +781,13 @@ } }, "node_modules/@nodelib/fs.walk": { - "version": "1.2.4", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", "dev": true, "license": "MIT", "dependencies": { - "@nodelib/fs.scandir": "2.1.3", + "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" }, "engines": { @@ -721,23 +798,40 @@ "version": "7.0.2", "license": "MIT" }, - "node_modules/@types/color-name": { - "version": "1.1.1", - "dev": true, - "license": "MIT" - }, - "node_modules/@types/json5": { - "version": "0.0.29", + "node_modules/@sindresorhus/merge-streams": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz", + "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==", "dev": true, - "license": "MIT" + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } }, - "node_modules/@types/minimist": { - "version": "1.2.2", + "node_modules/@stylistic/stylelint-plugin": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@stylistic/stylelint-plugin/-/stylelint-plugin-5.2.0.tgz", + "integrity": "sha512-pfa2PMvlH87qwoOMUH4rqz7x/vuO5Kh+r/R1Pe+/5T8sukDPe/VfF6mbdUGE5gwZPlj5O1X56qw55IZrFFRF0g==", "dev": true, - "license": "MIT" + "license": "MIT", + "dependencies": { + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-tokenizer": "^4.0.0", + "@csstools/media-query-list-parser": "^5.0.0", + "postcss": "^8.5.8", + "postcss-selector-parser": "^7.1.1", + "postcss-value-parser": "^4.2.0", + "style-search": "^0.1.0" + }, + "peerDependencies": { + "stylelint": "^17.6.0" + } }, - "node_modules/@types/normalize-package-data": { - "version": "2.4.0", + "node_modules/@types/json5": { + "version": "0.0.29", "dev": true, "license": "MIT" }, @@ -785,6 +879,8 @@ }, "node_modules/ansi-styles": { "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "license": "MIT", "dependencies": { @@ -797,17 +893,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/anymatch": { - "version": "3.1.2", - "license": "ISC", - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/argparse": { "version": "2.0.1", "dev": true, @@ -843,14 +928,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/array-union": { - "version": "2.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/array.prototype.findlastindex": { "version": "1.2.2", "dev": true, @@ -934,16 +1011,10 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/arrify": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/astral-regex": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz", + "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==", "dev": true, "license": "MIT", "engines": { @@ -961,18 +1032,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/balanced-match": { - "version": "2.0.0", - "dev": true, - "license": "MIT" - }, - "node_modules/binary-extensions": { - "version": "2.2.0", - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/brace-expansion": { "version": "1.1.11", "dev": true, @@ -988,10 +1047,13 @@ "license": "MIT" }, "node_modules/braces": { - "version": "3.0.2", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, "license": "MIT", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -1019,6 +1081,20 @@ "node": ">=10" } }, + "node_modules/cacheable": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.3.5.tgz", + "integrity": "sha512-EQfaKe09tl615iNvq/TBRWTFf1AKJNXYQSsMx0Z3EI0nA+pVsVPS8wJhnRlkbdacKPh1d0qVIhwTc2zsQNFEEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@cacheable/memory": "^2.0.8", + "@cacheable/utils": "^2.4.1", + "hookified": "^1.15.0", + "keyv": "^5.6.0", + "qified": "^0.10.1" + } + }, "node_modules/call-bind": { "version": "1.0.2", "dev": true, @@ -1063,45 +1139,6 @@ "node": ">=6" } }, - "node_modules/camelcase": { - "version": "6.3.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/camelcase-keys": { - "version": "7.0.2", - "dev": true, - "license": "MIT", - "dependencies": { - "camelcase": "^6.3.0", - "map-obj": "^4.1.0", - "quick-lru": "^5.1.1", - "type-fest": "^1.2.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/camelcase-keys/node_modules/map-obj": { - "version": "4.3.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/chalk": { "version": "4.1.0", "dev": true, @@ -1117,46 +1154,6 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, - "node_modules/chalk/node_modules/ansi-styles": { - "version": "4.2.1", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/color-name": "^1.1.1", - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/chokidar": { - "version": "3.5.3", - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/color-convert": { "version": "2.0.1", "dev": true, @@ -1175,6 +1172,8 @@ }, "node_modules/colord": { "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", "dev": true, "license": "MIT" }, @@ -1184,20 +1183,30 @@ "license": "MIT" }, "node_modules/cosmiconfig": { - "version": "8.2.0", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.1.tgz", + "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==", "dev": true, "license": "MIT", "dependencies": { - "import-fresh": "^3.2.1", + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0" + "parse-json": "^5.2.0" }, "engines": { "node": ">=14" }, "funding": { "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, "node_modules/cross-spawn": { @@ -1228,20 +1237,24 @@ } }, "node_modules/css-functions-list": { - "version": "3.2.0", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.3.3.tgz", + "integrity": "sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==", "dev": true, "license": "MIT", "engines": { - "node": ">=12.22" + "node": ">=12" } }, "node_modules/css-tree": { - "version": "2.3.1", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz", + "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==", "dev": true, "license": "MIT", "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" + "mdn-data": "2.27.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" @@ -1249,6 +1262,8 @@ }, "node_modules/cssesc": { "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "dev": true, "license": "MIT", "bin": { @@ -1266,49 +1281,18 @@ "ms": "^2.1.1" } }, - "node_modules/decamelize": { - "version": "5.0.1", + "node_modules/deep-is": { + "version": "0.1.4", + "dev": true, + "license": "MIT" + }, + "node_modules/define-properties": { + "version": "1.2.0", "dev": true, "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/decamelize-keys": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "decamelize": "^1.1.0", - "map-obj": "^1.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/decamelize-keys/node_modules/decamelize": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/deep-is": { - "version": "0.1.4", - "dev": true, - "license": "MIT" - }, - "node_modules/define-properties": { - "version": "1.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has-property-descriptors": "^1.0.0", - "object-keys": "^1.1.1" + "dependencies": { + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" }, "engines": { "node": ">= 0.4" @@ -1317,17 +1301,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/dir-glob": { - "version": "3.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "path-type": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/doctrine": { "version": "2.1.0", "dev": true, @@ -1341,9 +1314,21 @@ }, "node_modules/emoji-regex": { "version": "8.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", + "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true, "license": "MIT" }, + "node_modules/env-paths": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/error-ex": { "version": "1.3.2", "dev": true, @@ -1908,38 +1893,6 @@ "url": "https://opencollective.com/eslint" } }, - "node_modules/eslint/node_modules/@nodelib/fs.scandir": { - "version": "2.1.5", - "dev": true, - "license": "MIT", - "dependencies": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/eslint/node_modules/@nodelib/fs.stat": { - "version": "2.0.5", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 8" - } - }, - "node_modules/eslint/node_modules/@nodelib/fs.walk": { - "version": "1.2.8", - "dev": true, - "license": "MIT", - "dependencies": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" - }, - "engines": { - "node": ">= 8" - } - }, "node_modules/eslint/node_modules/debug": { "version": "4.3.4", "dev": true, @@ -2060,7 +2013,9 @@ "license": "MIT" }, "node_modules/fast-glob": { - "version": "3.3.1", + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", "dev": true, "license": "MIT", "dependencies": { @@ -2068,7 +2023,7 @@ "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", - "micromatch": "^4.0.4" + "micromatch": "^4.0.8" }, "engines": { "node": ">=8.6.0" @@ -2084,8 +2039,27 @@ "dev": true, "license": "MIT" }, + "node_modules/fast-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz", + "integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fastify" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/fastify" + } + ], + "license": "BSD-3-Clause" + }, "node_modules/fastest-levenshtein": { "version": "1.0.16", + "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", + "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==", "dev": true, "license": "MIT", "engines": { @@ -2112,7 +2086,10 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -2149,7 +2126,9 @@ } }, "node_modules/flatted": { - "version": "3.2.5", + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz", + "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==", "dev": true, "license": "ISC" }, @@ -2166,17 +2145,6 @@ "dev": true, "license": "ISC" }, - "node_modules/fsevents": { - "version": "2.3.2", - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.1", "dev": true, @@ -2218,6 +2186,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-east-asian-width": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz", + "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/get-intrinsic": { "version": "1.2.1", "dev": true, @@ -2303,6 +2284,9 @@ }, "node_modules/glob-parent": { "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -2311,16 +2295,6 @@ "node": ">= 6" } }, - "node_modules/glob-parent/node_modules/is-glob": { - "version": "4.0.1", - "license": "MIT", - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/glob/node_modules/minimatch": { "version": "3.0.4", "dev": true, @@ -2334,6 +2308,8 @@ }, "node_modules/global-modules": { "version": "2.0.0", + "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", + "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", "dev": true, "license": "MIT", "dependencies": { @@ -2345,6 +2321,8 @@ }, "node_modules/global-prefix": { "version": "3.0.0", + "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz", + "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", "dev": true, "license": "MIT", "dependencies": { @@ -2407,41 +2385,53 @@ } }, "node_modules/globby": { - "version": "11.1.0", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-16.2.0.tgz", + "integrity": "sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==", "dev": true, "license": "MIT", "dependencies": { - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.2.9", - "ignore": "^5.2.0", - "merge2": "^1.4.1", - "slash": "^3.0.0" + "@sindresorhus/merge-streams": "^4.0.0", + "fast-glob": "^3.3.3", + "ignore": "^7.0.5", + "is-path-inside": "^4.0.0", + "slash": "^5.1.0", + "unicorn-magic": "^0.4.0" }, "engines": { - "node": ">=10" + "node": ">=20" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/globby/node_modules/fast-glob": { - "version": "3.2.11", + "node_modules/globby/node_modules/ignore": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", "dev": true, "license": "MIT", - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, "engines": { - "node": ">=8.6.0" + "node": ">= 4" + } + }, + "node_modules/globby/node_modules/is-path-inside": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-4.0.0.tgz", + "integrity": "sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/globjoin": { "version": "0.1.4", + "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", + "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", "dev": true, "license": "MIT" }, @@ -2466,14 +2456,6 @@ "dev": true, "license": "MIT" }, - "node_modules/hard-rejection": { - "version": "2.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/has": { "version": "1.0.3", "dev": true, @@ -2572,27 +2554,38 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/hosted-git-info": { - "version": "4.1.0", + "node_modules/hashery": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.1.tgz", + "integrity": "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==", "dev": true, - "license": "ISC", + "license": "MIT", "dependencies": { - "lru-cache": "^6.0.0" + "hookified": "^1.15.0" }, "engines": { - "node": ">=10" + "node": ">=20" } }, + "node_modules/hookified": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz", + "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==", + "dev": true, + "license": "MIT" + }, "node_modules/howler": { "version": "2.2.3", "license": "MIT" }, "node_modules/html-tags": { - "version": "3.3.1", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-5.1.0.tgz", + "integrity": "sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==", "dev": true, "license": "MIT", "engines": { - "node": ">=8" + "node": ">=20.10" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -2606,10 +2599,6 @@ "node": ">= 4" } }, - "node_modules/immutable": { - "version": "4.1.0", - "license": "MIT" - }, "node_modules/import-fresh": { "version": "3.3.0", "dev": true, @@ -2633,12 +2622,15 @@ "node": ">=4" } }, - "node_modules/import-lazy": { - "version": "4.0.0", + "node_modules/import-meta-resolve": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz", + "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==", "dev": true, "license": "MIT", - "engines": { - "node": ">=8" + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" } }, "node_modules/imurmurhash": { @@ -2649,17 +2641,6 @@ "node": ">=0.8.19" } }, - "node_modules/indent-string": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/inflight": { "version": "1.0.6", "dev": true, @@ -2675,12 +2656,11 @@ "license": "ISC" }, "node_modules/ini": { - "version": "1.3.5", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true, - "license": "ISC", - "engines": { - "node": "*" - } + "license": "ISC" }, "node_modules/internal-slot": { "version": "1.0.3", @@ -2748,16 +2728,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "license": "MIT", - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/is-boolean-object": { "version": "1.1.2", "dev": true, @@ -2808,6 +2778,7 @@ }, "node_modules/is-extglob": { "version": "2.1.1", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -2815,6 +2786,8 @@ }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", + "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", "dev": true, "license": "MIT", "engines": { @@ -2823,6 +2796,7 @@ }, "node_modules/is-glob": { "version": "4.0.3", + "dev": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -2844,6 +2818,9 @@ }, "node_modules/is-number": { "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -2871,22 +2848,6 @@ "node": ">=8" } }, - "node_modules/is-plain-obj": { - "version": "1.1.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-plain-object": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/is-regex": { "version": "1.1.4", "dev": true, @@ -3010,6 +2971,8 @@ }, "node_modules/json-parse-even-better-errors": { "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", "dev": true, "license": "MIT" }, @@ -3203,19 +3166,26 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/keyv": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz", + "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@keyv/serialize": "^1.1.1" + } + }, "node_modules/kind-of": { - "version": "6.0.2", + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" } }, - "node_modules/known-css-properties": { - "version": "0.27.0", - "dev": true, - "license": "MIT" - }, "node_modules/levn": { "version": "0.4.1", "dev": true, @@ -3229,7 +3199,9 @@ } }, "node_modules/lines-and-columns": { - "version": "1.1.6", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", "dev": true, "license": "MIT" }, @@ -3289,6 +3261,8 @@ }, "node_modules/lodash.truncate": { "version": "4.4.2", + "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", + "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==", "dev": true, "license": "MIT" }, @@ -3314,16 +3288,10 @@ "node": ">=10" } }, - "node_modules/map-obj": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/mathml-tag-names": { - "version": "2.1.3", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz", + "integrity": "sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==", "dev": true, "license": "MIT", "funding": { @@ -3332,30 +3300,20 @@ } }, "node_modules/mdn-data": { - "version": "2.0.30", + "version": "2.27.1", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz", + "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==", "dev": true, "license": "CC0-1.0" }, "node_modules/meow": { - "version": "10.1.5", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-14.1.0.tgz", + "integrity": "sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==", "dev": true, "license": "MIT", - "dependencies": { - "@types/minimist": "^1.2.2", - "camelcase-keys": "^7.0.0", - "decamelize": "^5.0.0", - "decamelize-keys": "^1.1.0", - "hard-rejection": "^2.1.0", - "minimist-options": "4.1.0", - "normalize-package-data": "^3.0.2", - "read-pkg-up": "^8.0.0", - "redent": "^4.0.0", - "trim-newlines": "^4.0.2", - "type-fest": "^1.2.2", - "yargs-parser": "^20.2.9" - }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=20" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -3363,6 +3321,8 @@ }, "node_modules/merge2": { "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "dev": true, "license": "MIT", "engines": { @@ -3370,25 +3330,19 @@ } }, "node_modules/micromatch": { - "version": "4.0.5", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "license": "MIT", "dependencies": { - "braces": "^3.0.2", + "braces": "^3.0.3", "picomatch": "^2.3.1" }, "engines": { "node": ">=8.6" } }, - "node_modules/min-indent": { - "version": "1.0.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=4" - } - }, "node_modules/minimatch": { "version": "3.1.2", "dev": true, @@ -3405,34 +3359,15 @@ "dev": true, "license": "MIT" }, - "node_modules/minimist-options": { - "version": "4.1.0", - "dev": true, - "license": "MIT", - "dependencies": { - "arrify": "^1.0.1", - "is-plain-obj": "^1.1.0", - "kind-of": "^6.0.3" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/minimist-options/node_modules/kind-of": { - "version": "6.0.3", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/ms": { "version": "2.1.2", "dev": true, "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.6", + "version": "3.3.12", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz", + "integrity": "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==", "dev": true, "funding": [ { @@ -3453,47 +3388,11 @@ "dev": true, "license": "MIT" }, - "node_modules/normalize-package-data": { - "version": "3.0.3", + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true, - "license": "BSD-2-Clause", - "dependencies": { - "hosted-git-info": "^4.0.1", - "is-core-module": "^2.5.0", - "semver": "^7.3.4", - "validate-npm-package-license": "^3.0.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/normalize-package-data/node_modules/is-core-module": { - "version": "2.9.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/normalize-package-data/node_modules/semver": { - "version": "7.3.7", - "dev": true, - "license": "ISC", - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/normalize-path": { - "version": "3.0.0", "license": "MIT", "engines": { "node": ">=0.10.0" @@ -3702,17 +3601,22 @@ } }, "node_modules/parse-json": { - "version": "5.0.0", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.0.0", "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1", + "json-parse-even-better-errors": "^2.3.0", "lines-and-columns": "^1.1.6" }, "engines": { "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/path-exists": { @@ -3744,21 +3648,18 @@ "dev": true, "license": "MIT" }, - "node_modules/path-type": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/picocolors": { - "version": "1.0.0", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", "dev": true, "license": "ISC" }, "node_modules/picomatch": { - "version": "2.3.1", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", + "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -3844,7 +3745,9 @@ } }, "node_modules/postcss": { - "version": "8.4.27", + "version": "8.5.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz", + "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==", "dev": true, "funding": [ { @@ -3862,41 +3765,18 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.6", - "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" }, "engines": { "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-media-query-parser": { - "version": "0.2.3", - "dev": true, - "license": "MIT" - }, - "node_modules/postcss-resolve-nested-selector": { - "version": "0.1.1", - "dev": true, - "license": "MIT" - }, "node_modules/postcss-safe-parser": { - "version": "6.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.3.3" - } - }, - "node_modules/postcss-scss": { - "version": "4.0.6", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz", + "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==", "dev": true, "funding": [ { @@ -3905,19 +3785,25 @@ }, { "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/postcss-scss" + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "license": "MIT", "engines": { - "node": ">=12.0" + "node": ">=18.0" }, "peerDependencies": { - "postcss": "^8.4.19" + "postcss": "^8.4.31" } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", + "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, "license": "MIT", "dependencies": { @@ -3930,6 +3816,8 @@ }, "node_modules/postcss-value-parser": { "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true, "license": "MIT" }, @@ -3959,96 +3847,51 @@ "node": ">=6" } }, - "node_modules/quick-lru": { - "version": "5.1.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/react-is": { - "version": "16.13.1", - "dev": true, - "license": "MIT" - }, - "node_modules/read-pkg": { - "version": "6.0.0", + "node_modules/qified": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/qified/-/qified-0.10.1.tgz", + "integrity": "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==", "dev": true, "license": "MIT", "dependencies": { - "@types/normalize-package-data": "^2.4.0", - "normalize-package-data": "^3.0.2", - "parse-json": "^5.2.0", - "type-fest": "^1.0.1" + "hookified": "^2.1.1" }, "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">=20" } }, - "node_modules/read-pkg-up": { - "version": "8.0.0", + "node_modules/qified/node_modules/hookified": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/hookified/-/hookified-2.2.0.tgz", + "integrity": "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==", "dev": true, - "license": "MIT", - "dependencies": { - "find-up": "^5.0.0", - "read-pkg": "^6.0.0", - "type-fest": "^1.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } + "license": "MIT" }, - "node_modules/read-pkg/node_modules/parse-json": { - "version": "5.2.0", + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-even-better-errors": "^2.3.0", - "lines-and-columns": "^1.1.6" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/readdirp": { - "version": "3.6.0", - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" }, - "node_modules/redent": { - "version": "4.0.0", + "node_modules/react-is": { + "version": "16.13.1", "dev": true, - "license": "MIT", - "dependencies": { - "indent-string": "^5.0.0", - "strip-indent": "^4.0.0" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } + "license": "MIT" }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", @@ -4087,6 +3930,8 @@ }, "node_modules/require-from-string": { "version": "2.0.2", + "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", + "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==", "dev": true, "license": "MIT", "engines": { @@ -4109,14 +3954,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/resolve-from": { - "version": "5.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/reusify": { "version": "1.0.4", "dev": true, @@ -4141,9 +3978,28 @@ } }, "node_modules/run-parallel": { - "version": "1.1.9", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", "dev": true, - "license": "MIT" + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "queue-microtask": "^1.2.2" + } }, "node_modules/safe-array-concat": { "version": "1.0.0", @@ -4175,21 +4031,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/sass": { - "version": "1.64.2", - "license": "MIT", - "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", - "immutable": "^4.0.0", - "source-map-js": ">=0.6.2 <2.0.0" - }, - "bin": { - "sass": "sass.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/semver": { "version": "6.3.1", "dev": true, @@ -4256,6 +4097,8 @@ }, "node_modules/signal-exit": { "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "dev": true, "license": "ISC", "engines": { @@ -4266,15 +4109,22 @@ } }, "node_modules/slash": { - "version": "3.0.0", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", + "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==", "dev": true, "license": "MIT", "engines": { - "node": ">=8" + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/slice-ansi": { "version": "4.0.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", + "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", "dev": true, "license": "MIT", "dependencies": { @@ -4290,40 +4140,15 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" } }, - "node_modules/spdx-correct": { - "version": "3.1.0", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "spdx-expression-parse": "^3.0.0", - "spdx-license-ids": "^3.0.0" - } - }, - "node_modules/spdx-exceptions": { - "version": "2.2.0", - "dev": true, - "license": "CC-BY-3.0" - }, - "node_modules/spdx-expression-parse": { - "version": "3.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "spdx-exceptions": "^2.1.0", - "spdx-license-ids": "^3.0.0" - } - }, - "node_modules/spdx-license-ids": { - "version": "3.0.5", - "dev": true, - "license": "CC0-1.0" - }, "node_modules/standard": { "version": "17.1.0", "dev": true, @@ -4389,16 +4214,49 @@ } }, "node_modules/string-width": { - "version": "4.2.3", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.1.tgz", + "integrity": "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==", "dev": true, "license": "MIT", "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" + "get-east-asian-width": "^1.5.0", + "strip-ansi": "^7.1.2" }, "engines": { - "node": ">=8" + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/string-width/node_modules/ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/string-width/node_modules/strip-ansi": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz", + "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.2.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, "node_modules/string.prototype.matchall": { @@ -4480,20 +4338,6 @@ "node": ">=4" } }, - "node_modules/strip-indent": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "dependencies": { - "min-indent": "^1.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/strip-json-comments": { "version": "3.1.1", "dev": true, @@ -4507,160 +4351,177 @@ }, "node_modules/style-search": { "version": "0.1.0", + "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", + "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==", "dev": true, "license": "ISC" }, "node_modules/stylelint": { - "version": "15.10.2", + "version": "17.12.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.12.0.tgz", + "integrity": "sha512-KIlzWXMHUvgfPUR0R7TK3H80yCIi0uoivUwf+6Az4yrHJD1Q3c1qIkh/H5Z0i/K3QXgtq/UMEkWyBUSUwnpnOg==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], "license": "MIT", "dependencies": { - "@csstools/css-parser-algorithms": "^2.3.0", - "@csstools/css-tokenizer": "^2.1.1", - "@csstools/media-query-list-parser": "^2.1.2", - "@csstools/selector-specificity": "^3.0.0", - "balanced-match": "^2.0.0", + "@csstools/css-calc": "^3.2.0", + "@csstools/css-parser-algorithms": "^4.0.0", + "@csstools/css-syntax-patches-for-csstree": "^1.1.3", + "@csstools/css-tokenizer": "^4.0.0", + "@csstools/media-query-list-parser": "^5.0.0", + "@csstools/selector-resolve-nested": "^4.0.0", + "@csstools/selector-specificity": "^6.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.2.0", - "css-functions-list": "^3.2.0", - "css-tree": "^2.3.1", - "debug": "^4.3.4", - "fast-glob": "^3.3.0", + "cosmiconfig": "^9.0.1", + "css-functions-list": "^3.3.3", + "css-tree": "^3.2.1", + "debug": "^4.4.3", + "fast-glob": "^3.3.3", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^6.0.1", + "file-entry-cache": "^11.1.3", "global-modules": "^2.0.0", - "globby": "^11.1.0", + "globby": "^16.2.0", "globjoin": "^0.1.4", - "html-tags": "^3.3.1", - "ignore": "^5.2.4", - "import-lazy": "^4.0.0", - "imurmurhash": "^0.1.4", - "is-plain-object": "^5.0.0", - "known-css-properties": "^0.27.0", - "mathml-tag-names": "^2.1.3", - "meow": "^10.1.5", - "micromatch": "^4.0.5", + "html-tags": "^5.1.0", + "ignore": "^7.0.5", + "import-meta-resolve": "^4.2.0", + "mathml-tag-names": "^4.0.0", + "meow": "^14.1.0", + "micromatch": "^4.0.8", "normalize-path": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.4.25", - "postcss-resolve-nested-selector": "^0.1.1", - "postcss-safe-parser": "^6.0.0", - "postcss-selector-parser": "^6.0.13", + "picocolors": "^1.1.1", + "postcss": "^8.5.14", + "postcss-safe-parser": "^7.0.1", + "postcss-selector-parser": "^7.1.1", "postcss-value-parser": "^4.2.0", - "resolve-from": "^5.0.0", - "string-width": "^4.2.3", - "strip-ansi": "^6.0.1", - "style-search": "^0.1.0", - "supports-hyperlinks": "^3.0.0", + "string-width": "^8.2.1", + "supports-hyperlinks": "^4.4.0", "svg-tags": "^1.0.0", - "table": "^6.8.1", - "write-file-atomic": "^5.0.1" + "table": "^6.9.0", + "write-file-atomic": "^7.0.1" }, "bin": { "stylelint": "bin/stylelint.mjs" }, "engines": { - "node": "^14.13.1 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/stylelint" + "node": ">=20.19.0" } }, "node_modules/stylelint-config-recommended": { - "version": "12.0.0", - "dev": true, - "license": "MIT", - "peerDependencies": { - "stylelint": "^15.5.0" - } - }, - "node_modules/stylelint-config-recommended-scss": { - "version": "11.0.0", + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-18.0.0.tgz", + "integrity": "sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], "license": "MIT", - "dependencies": { - "postcss-scss": "^4.0.6", - "stylelint-config-recommended": "^12.0.0", - "stylelint-scss": "^4.6.0" + "engines": { + "node": ">=20.19.0" }, "peerDependencies": { - "postcss": "^8.3.3", - "stylelint": "^15.5.0" - }, - "peerDependenciesMeta": { - "postcss": { - "optional": true - } + "stylelint": "^17.0.0" } }, "node_modules/stylelint-config-standard": { - "version": "33.0.0", + "version": "40.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-40.0.0.tgz", + "integrity": "sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==", "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/stylelint" + }, + { + "type": "github", + "url": "https://github.com/sponsors/stylelint" + } + ], "license": "MIT", "dependencies": { - "stylelint-config-recommended": "^12.0.0" + "stylelint-config-recommended": "^18.0.0" + }, + "engines": { + "node": ">=20.19.0" }, "peerDependencies": { - "stylelint": "^15.5.0" + "stylelint": "^17.0.0" } }, - "node_modules/stylelint-config-standard-scss": { - "version": "9.0.0", + "node_modules/stylelint/node_modules/debug": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", "dev": true, "license": "MIT", "dependencies": { - "stylelint-config-recommended-scss": "^11.0.0", - "stylelint-config-standard": "^33.0.0" + "ms": "^2.1.3" }, - "peerDependencies": { - "postcss": "^8.3.3", - "stylelint": "^15.5.0" + "engines": { + "node": ">=6.0" }, "peerDependenciesMeta": { - "postcss": { + "supports-color": { "optional": true } } }, - "node_modules/stylelint-scss": { - "version": "4.7.0", + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "11.1.3", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.3.tgz", + "integrity": "sha512-oMbq0PD6VIiIwMF6LIa7MEwd/l9huKwmqRKXqmrkqIZv8CvRbfowL+L0ryAl8h//HfAS0zS+4SbYoRyAoA6BJA==", "dev": true, "license": "MIT", "dependencies": { - "postcss-media-query-parser": "^0.2.3", - "postcss-resolve-nested-selector": "^0.1.1", - "postcss-selector-parser": "^6.0.11", - "postcss-value-parser": "^4.2.0" - }, - "peerDependencies": { - "stylelint": "^14.5.1 || ^15.0.0" + "flat-cache": "^6.1.22" } }, - "node_modules/stylelint/node_modules/debug": { - "version": "4.3.4", + "node_modules/stylelint/node_modules/flat-cache": { + "version": "6.1.22", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.22.tgz", + "integrity": "sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==", "dev": true, "license": "MIT", "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } + "cacheable": "^2.3.4", + "flatted": "^3.4.2", + "hookified": "^1.15.0" } }, "node_modules/stylelint/node_modules/ignore": { - "version": "5.2.4", + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz", + "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==", "dev": true, "license": "MIT", "engines": { "node": ">= 4" } }, + "node_modules/stylelint/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, + "license": "MIT" + }, "node_modules/supports-color": { "version": "7.2.0", "dev": true, @@ -4673,15 +4534,46 @@ } }, "node_modules/supports-hyperlinks": { - "version": "3.0.0", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-4.4.0.tgz", + "integrity": "sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==", "dev": true, "license": "MIT", "dependencies": { - "has-flag": "^4.0.0", - "supports-color": "^7.0.0" + "has-flag": "^5.0.1", + "supports-color": "^10.2.2" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1" + } + }, + "node_modules/supports-hyperlinks/node_modules/has-flag": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-5.0.1.tgz", + "integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/supports-hyperlinks/node_modules/supports-color": { + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz", + "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==", + "dev": true, + "license": "MIT", "engines": { - "node": ">=14.18" + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" } }, "node_modules/supports-preserve-symlinks-flag": { @@ -4697,10 +4589,14 @@ }, "node_modules/svg-tags": { "version": "1.0.0", + "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", + "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, "node_modules/table": { - "version": "6.8.1", + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz", + "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==", "dev": true, "license": "BSD-3-Clause", "dependencies": { @@ -4715,14 +4611,16 @@ } }, "node_modules/table/node_modules/ajv": { - "version": "8.11.0", + "version": "8.20.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz", + "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==", "dev": true, "license": "MIT", "dependencies": { - "fast-deep-equal": "^3.1.1", + "fast-deep-equal": "^3.1.3", + "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", - "require-from-string": "^2.0.2", - "uri-js": "^4.2.2" + "require-from-string": "^2.0.2" }, "funding": { "type": "github", @@ -4731,9 +4629,26 @@ }, "node_modules/table/node_modules/json-schema-traverse": { "version": "1.0.0", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz", + "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true, "license": "MIT" }, + "node_modules/table/node_modules/string-width": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", + "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/text-table": { "version": "0.2.0", "dev": true, @@ -4741,6 +4656,9 @@ }, "node_modules/to-regex-range": { "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -4749,17 +4667,6 @@ "node": ">=8.0" } }, - "node_modules/trim-newlines": { - "version": "4.1.1", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/tsconfig-paths": { "version": "3.14.2", "dev": true, @@ -4782,17 +4689,6 @@ "node": ">= 0.8.0" } }, - "node_modules/type-fest": { - "version": "1.4.0", - "dev": true, - "license": "(MIT OR CC0-1.0)", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/typed-array-buffer": { "version": "1.0.0", "dev": true, @@ -4876,6 +4772,19 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/unicorn-magic": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz", + "integrity": "sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/uri-js": { "version": "4.4.1", "dev": true, @@ -4886,18 +4795,11 @@ }, "node_modules/util-deprecate": { "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true, "license": "MIT" }, - "node_modules/validate-npm-package-license": { - "version": "3.0.4", - "dev": true, - "license": "Apache-2.0", - "dependencies": { - "spdx-correct": "^3.0.0", - "spdx-expression-parse": "^3.0.0" - } - }, "node_modules/version-guard": { "version": "1.1.1", "dev": true, @@ -4908,6 +4810,8 @@ }, "node_modules/which": { "version": "1.3.1", + "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", + "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", "dev": true, "license": "ISC", "dependencies": { @@ -4981,15 +4885,16 @@ "license": "ISC" }, "node_modules/write-file-atomic": { - "version": "5.0.1", + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-7.0.1.tgz", + "integrity": "sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==", "dev": true, "license": "ISC", "dependencies": { - "imurmurhash": "^0.1.4", "signal-exit": "^4.0.1" }, "engines": { - "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + "node": "^20.17.0 || >=22.9.0" } }, "node_modules/xdg-basedir": { @@ -5005,14 +4910,6 @@ "dev": true, "license": "ISC" }, - "node_modules/yargs-parser": { - "version": "20.2.9", - "dev": true, - "license": "ISC", - "engines": { - "node": ">=10" - } - }, "node_modules/yocto-queue": { "version": "0.1.0", "dev": true, diff --git a/package.json b/package.json index 612d4919..0401cb95 100644 --- a/package.json +++ b/package.json @@ -6,19 +6,16 @@ "@hotwired/stimulus": "^3.2.1", "@hotwired/turbo-rails": "^8.0.0", "esbuild": "^0.18.17", - "howler": "^2.2.3", - "sass": "^1.64.2" + "howler": "^2.2.3" }, "devDependencies": { + "@stylistic/stylelint-plugin": "^5.2.0", "standard": "^17.1.0", - "stylelint": "^15.10.2", - "stylelint-config-standard-scss": "^9.0.0" + "stylelint": "^17.12.0", + "stylelint-config-standard": "^40.0.0" }, "scripts": { - "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets --minify", - "build-dev": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets", - "build:css": "sass app/assets/stylesheets/application.scss:app/assets/builds/application.css --no-source-map --style=compressed", - "build-dev:css": "sass app/assets/stylesheets/application.scss:app/assets/builds/application.css --no-source-map" + "build": "node esbuild.config.mjs" }, "standard": { "globals": [ From d7d774cfa5097bae5293aaa0922949ea10177a59 Mon Sep 17 00:00:00 2001 From: Ed Chao Date: Mon, 25 May 2026 20:01:14 +0900 Subject: [PATCH 02/12] feat: update spacing and margin variables across styles for consistency --- .../stylesheets/components/action_bar.css | 4 +- app/assets/stylesheets/components/badge.css | 4 +- app/assets/stylesheets/components/button.css | 16 +- app/assets/stylesheets/components/card.css | 18 +- app/assets/stylesheets/components/dialog.css | 10 +- .../stylesheets/components/dropdown.css | 12 +- app/assets/stylesheets/components/flash.css | 4 +- app/assets/stylesheets/components/form.css | 14 +- app/assets/stylesheets/components/input.css | 8 +- app/assets/stylesheets/components/list.css | 14 +- app/assets/stylesheets/components/nav.css | 2 +- app/assets/stylesheets/components/player.css | 8 +- app/assets/stylesheets/components/search.css | 2 +- app/assets/stylesheets/components/tab.css | 22 ++- app/assets/stylesheets/components/table.css | 2 +- app/assets/stylesheets/elements/content.css | 14 +- app/assets/stylesheets/elements/page.css | 2 +- app/assets/stylesheets/objects/grid.css | 8 +- app/assets/stylesheets/settings/theme.css | 4 +- app/assets/stylesheets/settings/variables.css | 27 +-- app/assets/stylesheets/utilities/border.css | 12 +- app/assets/stylesheets/utilities/spacing.css | 176 +++++++++--------- app/assets/stylesheets/utilities/text.css | 16 +- app/views/albums/_album.html.erb | 2 +- app/views/albums/_filters.html.erb | 10 +- app/views/albums/index.html.erb | 8 +- app/views/albums/show.html.erb | 8 +- app/views/artists/_album.html.erb | 2 +- app/views/artists/_albums.html.erb | 2 +- app/views/artists/_artist.html.erb | 2 +- app/views/artists/index.html.erb | 8 +- app/views/artists/show.html.erb | 6 +- .../current_playlist/songs/_song.html.erb | 8 +- .../current_playlist/songs/index.html.erb | 2 +- app/views/dialog/playlists/index.html.erb | 2 +- app/views/errors/forbidden.html.erb | 2 +- .../errors/internal_server_error.html.erb | 2 +- app/views/errors/not_found.html.erb | 2 +- .../errors/unprocessable_entity.html.erb | 2 +- app/views/errors/unsupported_browser.html.erb | 2 +- .../favorite_playlist/songs/index.html.erb | 4 +- app/views/home/index.html.erb | 6 +- app/views/layouts/application.html.erb | 7 +- app/views/layouts/plain.html.erb | 4 +- app/views/layouts/playlist.html.erb | 2 +- app/views/libraries/show.html.erb | 16 +- app/views/playlists/_playlist.html.erb | 2 +- app/views/playlists/index.html.erb | 8 +- app/views/playlists/songs/_list.html.erb | 2 +- app/views/playlists/songs/_song.html.erb | 10 +- app/views/playlists/songs/index.html.erb | 4 +- app/views/search/albums/index.html.erb | 4 +- app/views/search/artists/index.html.erb | 4 +- app/views/search/index.html.erb | 14 +- app/views/search/playlists/index.html.erb | 2 +- app/views/settings/_form.html.erb | 2 +- app/views/settings/show.html.erb | 2 +- app/views/shared/_empty_alert.html.erb | 2 +- app/views/shared/_filter_options.html.erb | 2 +- app/views/shared/_mini_player.html.erb | 8 +- app/views/shared/_nav_bar.html.erb | 2 +- app/views/shared/_player.html.erb | 16 +- app/views/shared/_search_bar.html.erb | 10 - app/views/shared/_sort_select.html.erb | 4 +- app/views/shared/_top_bar.html.erb | 11 ++ app/views/songs/_filters.html.erb | 10 +- app/views/songs/_table.html.erb | 2 +- app/views/songs/index.html.erb | 6 +- app/views/users/index.html.erb | 2 +- 69 files changed, 324 insertions(+), 313 deletions(-) delete mode 100644 app/views/shared/_search_bar.html.erb create mode 100644 app/views/shared/_top_bar.html.erb diff --git a/app/assets/stylesheets/components/action_bar.css b/app/assets/stylesheets/components/action_bar.css index 2b6debdb..c5a9fcdf 100644 --- a/app/assets/stylesheets/components/action_bar.css +++ b/app/assets/stylesheets/components/action_bar.css @@ -1,7 +1,7 @@ @layer components { .c-action-bar { - padding: var(--spacing-tiny) var(--spacing-narrow); - border-radius: var(--border-radius-medium); + padding: var(--spacing-1) var(--spacing-2); + border-radius: var(--border-radius-2); background: var(--action-bar-bg-color); } } diff --git a/app/assets/stylesheets/components/badge.css b/app/assets/stylesheets/components/badge.css index e54881b5..3ea5af91 100644 --- a/app/assets/stylesheets/components/badge.css +++ b/app/assets/stylesheets/components/badge.css @@ -1,10 +1,10 @@ @layer components { .c-badge { display: inline-block; - border-radius: var(--border-radius-large); + border-radius: var(--border-radius-3); background-color: var(--badge-bg-color); color: var(--badge-color); - font-size: var(--font-size-small); + font-size: var(--font-size-1); padding: 2px 13px; font-weight: 500; } diff --git a/app/assets/stylesheets/components/button.css b/app/assets/stylesheets/components/button.css index e5174cd5..fc37257a 100644 --- a/app/assets/stylesheets/components/button.css +++ b/app/assets/stylesheets/components/button.css @@ -2,11 +2,11 @@ .c-button { text-align: center; display: inline-block; - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); border: none; - padding: var(--spacing-tiny) var(--spacing-narrow); + padding: var(--spacing-1) var(--spacing-2); cursor: pointer; - font-size: var(--font-size-medium); + font-size: var(--font-size-2); &:hover { text-decoration: none; @@ -45,12 +45,12 @@ } .c-button--small { - padding: 2px var(--spacing-tiny); - font-size: var(--font-size-small); + padding: 2px var(--spacing-1); + font-size: var(--font-size-1); } .c-button--outline { - border-radius: var(--border-radius-large); + border-radius: var(--border-radius-3); color: var(--btn-outline-color); border: 1px solid var(--btn-outline-border-color); background: var(--btn-outline-bg-color); @@ -62,8 +62,8 @@ .c-button--icon { display: inline-flex; - padding: var(--spacing-tiny); - border-radius: var(--border-radius-medium); + padding: var(--spacing-1); + border-radius: var(--border-radius-2); color: currentcolor; &:hover { diff --git a/app/assets/stylesheets/components/card.css b/app/assets/stylesheets/components/card.css index 7a6dbf27..798fb843 100644 --- a/app/assets/stylesheets/components/card.css +++ b/app/assets/stylesheets/components/card.css @@ -5,32 +5,32 @@ .c-card--border { border: 1px solid var(--card-border-color); - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); background-color: var(--card-bg-color); } .c-card--border .c-card__body { - padding: var(--spacing-narrow); + padding: var(--spacing-2); } .c-card__image { display: block; - margin-bottom: var(--spacing-narrow); + margin-bottom: var(--spacing-2); } .c-card__image, .c-card__image img { - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); } .c-card__body__title { - margin-bottom: var(--spacing-narrow); - font-size: var(--font-size-large); + margin-bottom: var(--spacing-2); + font-size: var(--font-size-3); } .c-card__body__text { display: block; - margin-bottom: var(--spacing-tiny); + margin-bottom: var(--spacing-1); } .c-card__body__text:last-child { @@ -41,7 +41,7 @@ display: flex; .c-card__image { - margin-right: var(--spacing-medium); + margin-right: var(--spacing-4); } .c-card__body { @@ -58,7 +58,7 @@ text-align: center; .c-card__image { - margin: 0 0 var(--spacing-small); + margin: 0 0 var(--spacing-3); } .c-card__body { diff --git a/app/assets/stylesheets/components/dialog.css b/app/assets/stylesheets/components/dialog.css index 4c863e18..ad6123cd 100644 --- a/app/assets/stylesheets/components/dialog.css +++ b/app/assets/stylesheets/components/dialog.css @@ -4,7 +4,7 @@ margin-top: 100px; background: var(--dialog-bg-color); border: none; - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); width: 100%; max-width: 360px; color: inherit; @@ -15,15 +15,15 @@ } .c-dialog__header { - padding: var(--spacing-narrow) var(--spacing-small); + padding: var(--spacing-2) var(--spacing-3); background: var(--dialog-header-bg-color); color: var(--dialog-header-color); - border-top-left-radius: var(--border-radius-medium); - border-top-right-radius: var(--border-radius-medium); + border-top-left-radius: var(--border-radius-2); + border-top-right-radius: var(--border-radius-2); } .c-dialog__content { - padding: var(--spacing-narrow) var(--spacing-small); + padding: var(--spacing-2) var(--spacing-3); overflow-y: auto; min-height: 50px; max-height: calc(100vh - 300px); diff --git a/app/assets/stylesheets/components/dropdown.css b/app/assets/stylesheets/components/dropdown.css index c73b96e6..c9779b45 100644 --- a/app/assets/stylesheets/components/dropdown.css +++ b/app/assets/stylesheets/components/dropdown.css @@ -36,7 +36,7 @@ z-index: var(--z-dropdown); min-width: 100px; background: var(--dropdown-bg-color); - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); color: var(--dropdown-color); box-shadow: 0 1px 6px var(--dropdown-shadow-color); max-height: 300px; @@ -54,7 +54,7 @@ .c-dropdown__item { display: block; - padding: var(--spacing-narrow); + padding: var(--spacing-2); white-space: nowrap; } @@ -74,15 +74,15 @@ .c-dropdown__item:first-child, form.c-dropdown__item:first-child input[type="submit"], form.c-dropdown__item:first-child button[type="submit"] { - border-top-left-radius: var(--border-radius-medium); - border-top-right-radius: var(--border-radius-medium); + border-top-left-radius: var(--border-radius-2); + border-top-right-radius: var(--border-radius-2); } .c-dropdown__item:last-child, form.c-dropdown__item:last-child input[type="submit"], form.c-dropdown__item:last-child button[type="submit"] { - border-bottom-left-radius: var(--border-radius-medium); - border-bottom-right-radius: var(--border-radius-medium); + border-bottom-left-radius: var(--border-radius-2); + border-bottom-right-radius: var(--border-radius-2); } a.c-dropdown__item:hover, diff --git a/app/assets/stylesheets/components/flash.css b/app/assets/stylesheets/components/flash.css index f4f097a8..46003048 100644 --- a/app/assets/stylesheets/components/flash.css +++ b/app/assets/stylesheets/components/flash.css @@ -14,9 +14,9 @@ } .c-flash__body { - padding: var(--spacing-tiny); + padding: var(--spacing-1); text-align: center; - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); } .c-flash__body--alert { diff --git a/app/assets/stylesheets/components/form.css b/app/assets/stylesheets/components/form.css index 9defeb1c..2199d044 100644 --- a/app/assets/stylesheets/components/form.css +++ b/app/assets/stylesheets/components/form.css @@ -1,10 +1,10 @@ @layer components { .c-form { - padding-bottom: var(--spacing-medium); + padding-bottom: var(--spacing-4); } .c-form__field { - margin-top: var(--spacing-small); + margin-top: var(--spacing-3); } .c-form__field--inline { @@ -13,12 +13,12 @@ } .c-form__field--submit { - margin-top: var(--spacing-medium); + margin-top: var(--spacing-4); } .c-form__field label { display: block; - margin-bottom: var(--spacing-narrow); + margin-bottom: var(--spacing-2); } .c-form__field label[disabled] { @@ -27,7 +27,7 @@ .c-form__field--inline label { margin-bottom: 0; - margin-right: var(--spacing-tiny); + margin-right: var(--spacing-1); } .c-form__field > label { @@ -37,11 +37,11 @@ .c-form__radio { display: inline-flex; align-items: center; - margin-right: var(--spacing-narrow); + margin-right: var(--spacing-2); } .c-form__radio label { margin-bottom: 0; - margin-left: var(--spacing-tiny); + margin-left: var(--spacing-1); } } diff --git a/app/assets/stylesheets/components/input.css b/app/assets/stylesheets/components/input.css index e8868069..cbf52121 100644 --- a/app/assets/stylesheets/components/input.css +++ b/app/assets/stylesheets/components/input.css @@ -4,8 +4,8 @@ background: var(--input-bg-color); border: none; color: var(--input-color); - padding: var(--spacing-tiny); - border-radius: var(--border-radius-medium); + padding: var(--spacing-1); + border-radius: var(--border-radius-2); filter: none; } @@ -13,8 +13,8 @@ display: flex; align-items: center; background: var(--input-bg-color); - border-radius: var(--border-radius-medium); - padding: 0 var(--spacing-tiny); + border-radius: var(--border-radius-2); + padding: 0 var(--spacing-1); } .c-input-group input { diff --git a/app/assets/stylesheets/components/list.css b/app/assets/stylesheets/components/list.css index 044344d5..21c6185f 100644 --- a/app/assets/stylesheets/components/list.css +++ b/app/assets/stylesheets/components/list.css @@ -7,26 +7,26 @@ .c-list--grouped { background-color: var(--list-grouped-bg-color); - padding: 0 var(--spacing-narrow); - border-radius: var(--border-radius-large); + padding: 0 var(--spacing-2); + border-radius: var(--border-radius-3); } .c-list__item { width: 100%; - padding: var(--spacing-narrow) 0; + padding: var(--spacing-2) 0; text-decoration: none; border-bottom: 1px solid var(--list-border-color); } .c-list__item--divider { - margin-top: var(--spacing-small); + margin-top: var(--spacing-3); font-weight: bold; text-transform: uppercase; } .c-list__item__subtext { display: inline-block; - margin-top: var(--spacing-tiny); + margin-top: var(--spacing-1); color: var(--list-subtext-color); } @@ -35,7 +35,7 @@ } .c-list--grouped .c-list__item { - padding: var(--spacing-small) 0; + padding: var(--spacing-3) 0; } .c-list__item:last-child { @@ -58,6 +58,6 @@ .c-list .c-list__item.is-dragging-over { border: 2px dashed var(--list-active-color); - border-radius: var(--border-radius-medium); + border-radius: var(--border-radius-2); } } diff --git a/app/assets/stylesheets/components/nav.css b/app/assets/stylesheets/components/nav.css index 2336f2ad..33ab6461 100644 --- a/app/assets/stylesheets/components/nav.css +++ b/app/assets/stylesheets/components/nav.css @@ -1,6 +1,6 @@ @layer components { .c-nav { - padding: var(--spacing-small) var(--spacing-small) 0; + padding: var(--spacing-3) var(--spacing-5); box-shadow: var(--nav-shadow); z-index: var(--z-nav); } diff --git a/app/assets/stylesheets/components/player.css b/app/assets/stylesheets/components/player.css index 0d5885de..5ccb0226 100644 --- a/app/assets/stylesheets/components/player.css +++ b/app/assets/stylesheets/components/player.css @@ -6,18 +6,18 @@ .c-player__control { background: var(--player-bg-color); position: relative; - padding: 0 var(--spacing-wide); + padding: 0 var(--spacing-6); color: var(--player-control-color); } .c-player__control__main { color: var(--player-control-main-color); - padding: var(--spacing-small) 0; + padding: var(--spacing-3) 0; border-bottom: 1px solid var(--player-control-border-color); } .c-player__control__secondary { - padding: var(--spacing-tiny) 0; + padding: var(--spacing-1) 0; } .c-player__header { @@ -81,7 +81,7 @@ width: 100%; cursor: pointer; outline: none; - border-radius: var(--border-radius-large); + border-radius: var(--border-radius-3); height: 5px; background: linear-gradient(to right, var(--player-volume-color) var(--progress), var(--player-volume-bg-color) var(--progress)); } diff --git a/app/assets/stylesheets/components/search.css b/app/assets/stylesheets/components/search.css index 7abc484a..cbf0d749 100644 --- a/app/assets/stylesheets/components/search.css +++ b/app/assets/stylesheets/components/search.css @@ -2,7 +2,7 @@ .c-search { max-width: 380px; width: 100%; - margin: 0 var(--spacing-small); + margin: 0 var(--spacing-3); } .c-search .c-loader { diff --git a/app/assets/stylesheets/components/tab.css b/app/assets/stylesheets/components/tab.css index 220bd060..a1138570 100644 --- a/app/assets/stylesheets/components/tab.css +++ b/app/assets/stylesheets/components/tab.css @@ -1,29 +1,37 @@ @layer components { .c-tab { display: flex; - justify-content: center; list-style: none; margin: 0; padding: 0; } .c-tab__item { - padding-bottom: var(--spacing-narrow); - border-bottom: 2px solid transparent; - margin: 0 var(--spacing-large); + margin-right: var(--spacing-4); + border-radius: var(--border-radius-4); + + &:last-child { + margin-right: 0; + } + + &:hover { + background-color: var(--tab-hover-bg-color); + } } + .c-tab__item a { + display: inline-block; + padding: var(--spacing-1) var(--spacing-2); color: var(--tab-color); text-decoration: none; } - .c-tab__item.is-active a, - .c-tab__item a:hover { + .c-tab__item.is-active a { color: var(--tab-active-color); } .c-tab__item.is-active { - border-color: var(--tab-active-color); + background-color: var(--tab-active-bg-color); } } diff --git a/app/assets/stylesheets/components/table.css b/app/assets/stylesheets/components/table.css index 884d5a20..5e0ef54b 100644 --- a/app/assets/stylesheets/components/table.css +++ b/app/assets/stylesheets/components/table.css @@ -36,7 +36,7 @@ .c-table [role="cell"] { display: inline-flex; align-items: center; - padding: var(--spacing-narrow); + padding: var(--spacing-2); text-align: left; color: var(--table-color); } diff --git a/app/assets/stylesheets/elements/content.css b/app/assets/stylesheets/elements/content.css index c9b9c2ae..14fb20ca 100644 --- a/app/assets/stylesheets/elements/content.css +++ b/app/assets/stylesheets/elements/content.css @@ -1,19 +1,19 @@ @layer elements { h1 { - font-size: var(--font-size-wide); - margin-bottom: var(--spacing-wide); + font-size: var(--font-size-4); + margin-bottom: var(--spacing-6); } h2, h3 { - font-size: var(--font-size-large); - margin-bottom: var(--spacing-medium); + font-size: var(--font-size-3); + margin-bottom: var(--spacing-4); } h4, h5, h6 { - font-size: var(--font-size-medium); + font-size: var(--font-size-2); } h1, @@ -26,7 +26,7 @@ } p { - font-size: var(--font-size-medium); + font-size: var(--font-size-2); color: var(--text-secondary-color); } @@ -45,7 +45,7 @@ hr { border: 0; - margin: var(--spacing-large) 0; + margin: var(--spacing-5) 0; border-top: 1px solid var(--hr-color); } } diff --git a/app/assets/stylesheets/elements/page.css b/app/assets/stylesheets/elements/page.css index b7379e75..0d790c1a 100644 --- a/app/assets/stylesheets/elements/page.css +++ b/app/assets/stylesheets/elements/page.css @@ -3,6 +3,6 @@ font-family: var(--font-sans-serif); background-color: var(--body-bg-color); color: var(--text-secondary-color); - font-size: var(--font-size-medium); + font-size: var(--font-size-2); } } diff --git a/app/assets/stylesheets/objects/grid.css b/app/assets/stylesheets/objects/grid.css index 8bffa3b3..64e38582 100644 --- a/app/assets/stylesheets/objects/grid.css +++ b/app/assets/stylesheets/objects/grid.css @@ -11,12 +11,12 @@ } .o-grid--shelf { - gap: var(--spacing-medium); + gap: var(--spacing-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .o-grid--list { - gap: var(--spacing-small); + gap: var(--spacing-3); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } @@ -26,13 +26,13 @@ @media (max-width: 560px) { .o-grid--shelf { - gap: var(--spacing-small); + gap: var(--spacing-3); } } @media (max-width: 375px) { .o-grid--shelf { - gap: var(--spacing-narrow); + gap: var(--spacing-2); grid-template-columns: repeat(2, 1fr); } } diff --git a/app/assets/stylesheets/settings/theme.css b/app/assets/stylesheets/settings/theme.css index 50b8cfe2..cb8df087 100644 --- a/app/assets/stylesheets/settings/theme.css +++ b/app/assets/stylesheets/settings/theme.css @@ -41,7 +41,9 @@ /* Tab */ --tab-color: light-dark(var(--color-grey-900), var(--color-white)); - --tab-active-color: var(--primary-color); + --tab-active-bg-color: var(--primary-color); + --tab-active-color: var(--color-white); + --tab-hover-bg-color: light-dark(var(--color-grey-200), var(--color-grey-700)); /* List */ --list-border-color: light-dark(var(--color-grey-200), var(--color-grey-800)); diff --git a/app/assets/stylesheets/settings/variables.css b/app/assets/stylesheets/settings/variables.css index 950d6244..15cdec2a 100644 --- a/app/assets/stylesheets/settings/variables.css +++ b/app/assets/stylesheets/settings/variables.css @@ -5,23 +5,24 @@ --font-monospace: "Menlo", "Monaco", "Consolas", "Courier New", monospace; /* Font sizes */ - --font-size-small: 12px; - --font-size-medium: 14px; - --font-size-large: 16px; - --font-size-wide: 20px; + --font-size-1: 12px; + --font-size-2: 14px; + --font-size-3: 16px; + --font-size-4: 20px; /* Spacing */ - --spacing-tiny: 6px; - --spacing-narrow: 12px; - --spacing-small: 18px; - --spacing-medium: 24px; - --spacing-large: 36px; - --spacing-wide: 48px; + --spacing-1: 6px; + --spacing-2: 12px; + --spacing-3: 18px; + --spacing-4: 24px; + --spacing-5: 36px; + --spacing-6: 48px; /* Border radius */ - --border-radius-small: 2px; - --border-radius-medium: 4px; - --border-radius-large: 8px; + --border-radius-1: 2px; + --border-radius-2: 4px; + --border-radius-3: 8px; + --border-radius-4: 16px; /* Z-indexes */ --z-base: 0; diff --git a/app/assets/stylesheets/utilities/border.css b/app/assets/stylesheets/utilities/border.css index 16151006..7d2a7e6f 100644 --- a/app/assets/stylesheets/utilities/border.css +++ b/app/assets/stylesheets/utilities/border.css @@ -7,15 +7,15 @@ border: none; } - .u-border-radius-small { - border-radius: var(--border-radius-small); + .u-border-radius-1 { + border-radius: var(--border-radius-1); } - .u-border-radius-medium { - border-radius: var(--border-radius-medium); + .u-border-radius-2 { + border-radius: var(--border-radius-2); } - .u-border-radius-large { - border-radius: var(--border-radius-large); + .u-border-radius-3 { + border-radius: var(--border-radius-3); } } diff --git a/app/assets/stylesheets/utilities/spacing.css b/app/assets/stylesheets/utilities/spacing.css index 1bcf89be..ed6c3b7d 100644 --- a/app/assets/stylesheets/utilities/spacing.css +++ b/app/assets/stylesheets/utilities/spacing.css @@ -1,111 +1,111 @@ @layer utilities { /* Margin — tiny (6px) */ - .u-m-tiny { margin: var(--spacing-tiny); } - .u-mt-tiny { margin-top: var(--spacing-tiny); } - .u-mb-tiny { margin-bottom: var(--spacing-tiny); } - .u-ml-tiny { margin-left: var(--spacing-tiny); } - .u-mr-tiny { margin-right: var(--spacing-tiny); } - .u-mx-tiny { margin-left: var(--spacing-tiny); margin-right: var(--spacing-tiny); } - .u-my-tiny { margin-top: var(--spacing-tiny); margin-bottom: var(--spacing-tiny); } + .u-m-1 { margin: var(--spacing-1); } + .u-mt-1 { margin-top: var(--spacing-1); } + .u-mb-1 { margin-bottom: var(--spacing-1); } + .u-ml-1 { margin-left: var(--spacing-1); } + .u-mr-1 { margin-right: var(--spacing-1); } + .u-mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); } + .u-my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); } /* Margin — narrow (12px) */ - .u-m-narrow { margin: var(--spacing-narrow); } - .u-mt-narrow { margin-top: var(--spacing-narrow); } - .u-mb-narrow { margin-bottom: var(--spacing-narrow); } - .u-ml-narrow { margin-left: var(--spacing-narrow); } - .u-mr-narrow { margin-right: var(--spacing-narrow); } - .u-mx-narrow { margin-left: var(--spacing-narrow); margin-right: var(--spacing-narrow); } - .u-my-narrow { margin-top: var(--spacing-narrow); margin-bottom: var(--spacing-narrow); } + .u-m-2 { margin: var(--spacing-2); } + .u-mt-2 { margin-top: var(--spacing-2); } + .u-mb-2 { margin-bottom: var(--spacing-2); } + .u-ml-2 { margin-left: var(--spacing-2); } + .u-mr-2 { margin-right: var(--spacing-2); } + .u-mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); } + .u-my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); } /* Margin — small (18px) */ - .u-m-small { margin: var(--spacing-small); } - .u-mt-small { margin-top: var(--spacing-small); } - .u-mb-small { margin-bottom: var(--spacing-small); } - .u-ml-small { margin-left: var(--spacing-small); } - .u-mr-small { margin-right: var(--spacing-small); } - .u-mx-small { margin-left: var(--spacing-small); margin-right: var(--spacing-small); } - .u-my-small { margin-top: var(--spacing-small); margin-bottom: var(--spacing-small); } + .u-m-3 { margin: var(--spacing-3); } + .u-mt-3 { margin-top: var(--spacing-3); } + .u-mb-3 { margin-bottom: var(--spacing-3); } + .u-ml-3 { margin-left: var(--spacing-3); } + .u-mr-3 { margin-right: var(--spacing-3); } + .u-mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); } + .u-my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); } /* Margin — medium (24px) */ - .u-m-medium { margin: var(--spacing-medium); } - .u-mt-medium { margin-top: var(--spacing-medium); } - .u-mb-medium { margin-bottom: var(--spacing-medium); } - .u-ml-medium { margin-left: var(--spacing-medium); } - .u-mr-medium { margin-right: var(--spacing-medium); } - .u-mx-medium { margin-left: var(--spacing-medium); margin-right: var(--spacing-medium); } - .u-my-medium { margin-top: var(--spacing-medium); margin-bottom: var(--spacing-medium); } + .u-m-4 { margin: var(--spacing-4); } + .u-mt-4 { margin-top: var(--spacing-4); } + .u-mb-4 { margin-bottom: var(--spacing-4); } + .u-ml-4 { margin-left: var(--spacing-4); } + .u-mr-4 { margin-right: var(--spacing-4); } + .u-mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); } + .u-my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); } /* Margin — large (36px) */ - .u-m-large { margin: var(--spacing-large); } - .u-mt-large { margin-top: var(--spacing-large); } - .u-mb-large { margin-bottom: var(--spacing-large); } - .u-ml-large { margin-left: var(--spacing-large); } - .u-mr-large { margin-right: var(--spacing-large); } - .u-mx-large { margin-left: var(--spacing-large); margin-right: var(--spacing-large); } - .u-my-large { margin-top: var(--spacing-large); margin-bottom: var(--spacing-large); } + .u-m-5 { margin: var(--spacing-5); } + .u-mt-5 { margin-top: var(--spacing-5); } + .u-mb-5 { margin-bottom: var(--spacing-5); } + .u-ml-5 { margin-left: var(--spacing-5); } + .u-mr-5 { margin-right: var(--spacing-5); } + .u-mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); } + .u-my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); } /* Margin — wide (48px) */ - .u-m-wide { margin: var(--spacing-wide); } - .u-mt-wide { margin-top: var(--spacing-wide); } - .u-mb-wide { margin-bottom: var(--spacing-wide); } - .u-ml-wide { margin-left: var(--spacing-wide); } - .u-mr-wide { margin-right: var(--spacing-wide); } - .u-mx-wide { margin-left: var(--spacing-wide); margin-right: var(--spacing-wide); } - .u-my-wide { margin-top: var(--spacing-wide); margin-bottom: var(--spacing-wide); } + .u-m-6 { margin: var(--spacing-6); } + .u-mt-6 { margin-top: var(--spacing-6); } + .u-mb-6 { margin-bottom: var(--spacing-6); } + .u-ml-6 { margin-left: var(--spacing-6); } + .u-mr-6 { margin-right: var(--spacing-6); } + .u-mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); } + .u-my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); } /* Padding — tiny */ - .u-p-tiny { padding: var(--spacing-tiny); } - .u-pt-tiny { padding-top: var(--spacing-tiny); } - .u-pb-tiny { padding-bottom: var(--spacing-tiny); } - .u-pl-tiny { padding-left: var(--spacing-tiny); } - .u-pr-tiny { padding-right: var(--spacing-tiny); } - .u-px-tiny { padding-left: var(--spacing-tiny); padding-right: var(--spacing-tiny); } - .u-py-tiny { padding-top: var(--spacing-tiny); padding-bottom: var(--spacing-tiny); } + .u-p-1 { padding: var(--spacing-1); } + .u-pt-1 { padding-top: var(--spacing-1); } + .u-pb-1 { padding-bottom: var(--spacing-1); } + .u-pl-1 { padding-left: var(--spacing-1); } + .u-pr-1 { padding-right: var(--spacing-1); } + .u-px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); } + .u-py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); } /* Padding — narrow */ - .u-p-narrow { padding: var(--spacing-narrow); } - .u-pt-narrow { padding-top: var(--spacing-narrow); } - .u-pb-narrow { padding-bottom: var(--spacing-narrow); } - .u-pl-narrow { padding-left: var(--spacing-narrow); } - .u-pr-narrow { padding-right: var(--spacing-narrow); } - .u-px-narrow { padding-left: var(--spacing-narrow); padding-right: var(--spacing-narrow); } - .u-py-narrow { padding-top: var(--spacing-narrow); padding-bottom: var(--spacing-narrow); } + .u-p-2 { padding: var(--spacing-2); } + .u-pt-2 { padding-top: var(--spacing-2); } + .u-pb-2 { padding-bottom: var(--spacing-2); } + .u-pl-2 { padding-left: var(--spacing-2); } + .u-pr-2 { padding-right: var(--spacing-2); } + .u-px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } + .u-py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); } /* Padding — small */ - .u-p-small { padding: var(--spacing-small); } - .u-pt-small { padding-top: var(--spacing-small); } - .u-pb-small { padding-bottom: var(--spacing-small); } - .u-pl-small { padding-left: var(--spacing-small); } - .u-pr-small { padding-right: var(--spacing-small); } - .u-px-small { padding-left: var(--spacing-small); padding-right: var(--spacing-small); } - .u-py-small { padding-top: var(--spacing-small); padding-bottom: var(--spacing-small); } + .u-p-3 { padding: var(--spacing-3); } + .u-pt-3 { padding-top: var(--spacing-3); } + .u-pb-3 { padding-bottom: var(--spacing-3); } + .u-pl-3 { padding-left: var(--spacing-3); } + .u-pr-3 { padding-right: var(--spacing-3); } + .u-px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } + .u-py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); } /* Padding — medium */ - .u-p-medium { padding: var(--spacing-medium); } - .u-pt-medium { padding-top: var(--spacing-medium); } - .u-pb-medium { padding-bottom: var(--spacing-medium); } - .u-pl-medium { padding-left: var(--spacing-medium); } - .u-pr-medium { padding-right: var(--spacing-medium); } - .u-px-medium { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); } - .u-py-medium { padding-top: var(--spacing-medium); padding-bottom: var(--spacing-medium); } + .u-p-4 { padding: var(--spacing-4); } + .u-pt-4 { padding-top: var(--spacing-4); } + .u-pb-4 { padding-bottom: var(--spacing-4); } + .u-pl-4 { padding-left: var(--spacing-4); } + .u-pr-4 { padding-right: var(--spacing-4); } + .u-px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); } + .u-py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); } /* Padding — large */ - .u-p-large { padding: var(--spacing-large); } - .u-pt-large { padding-top: var(--spacing-large); } - .u-pb-large { padding-bottom: var(--spacing-large); } - .u-pl-large { padding-left: var(--spacing-large); } - .u-pr-large { padding-right: var(--spacing-large); } - .u-px-large { padding-left: var(--spacing-large); padding-right: var(--spacing-large); } - .u-py-large { padding-top: var(--spacing-large); padding-bottom: var(--spacing-large); } + .u-p-5 { padding: var(--spacing-5); } + .u-pt-5 { padding-top: var(--spacing-5); } + .u-pb-5 { padding-bottom: var(--spacing-5); } + .u-pl-5 { padding-left: var(--spacing-5); } + .u-pr-5 { padding-right: var(--spacing-5); } + .u-px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); } + .u-py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); } /* Padding — wide */ - .u-p-wide { padding: var(--spacing-wide); } - .u-pt-wide { padding-top: var(--spacing-wide); } - .u-pb-wide { padding-bottom: var(--spacing-wide); } - .u-pl-wide { padding-left: var(--spacing-wide); } - .u-pr-wide { padding-right: var(--spacing-wide); } - .u-px-wide { padding-left: var(--spacing-wide); padding-right: var(--spacing-wide); } - .u-py-wide { padding-top: var(--spacing-wide); padding-bottom: var(--spacing-wide); } + .u-p-6 { padding: var(--spacing-6); } + .u-pt-6 { padding-top: var(--spacing-6); } + .u-pb-6 { padding-bottom: var(--spacing-6); } + .u-pl-6 { padding-left: var(--spacing-6); } + .u-pr-6 { padding-right: var(--spacing-6); } + .u-px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); } + .u-py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); } /* Margin — 0 */ .u-m-0 { margin: 0; } @@ -136,14 +136,14 @@ /* Responsive utilities */ @media (max-width: 930px) { - .u-p-small\@small { - padding: var(--spacing-small); + .u-p-3\@small { + padding: var(--spacing-3); } } @media (max-width: 375px) { - .u-p-narrow\@extra-narrow { - padding: var(--spacing-narrow); + .u-p-2\@extra-narrow { + padding: var(--spacing-2); } } } diff --git a/app/assets/stylesheets/utilities/text.css b/app/assets/stylesheets/utilities/text.css index e88023c9..2ec0b05e 100644 --- a/app/assets/stylesheets/utilities/text.css +++ b/app/assets/stylesheets/utilities/text.css @@ -44,19 +44,19 @@ overflow: hidden; } - .u-text-size-small { - font-size: var(--font-size-small); + .u-text-size-1 { + font-size: var(--font-size-1); } - .u-text-size-medium { - font-size: var(--font-size-medium); + .u-text-size-2 { + font-size: var(--font-size-2); } - .u-text-size-large { - font-size: var(--font-size-large); + .u-text-size-3 { + font-size: var(--font-size-3); } - .u-text-size-wide { - font-size: var(--font-size-wide); + .u-text-size-4 { + font-size: var(--font-size-4); } } diff --git a/app/views/albums/_album.html.erb b/app/views/albums/_album.html.erb index da5fab52..549a709e 100644 --- a/app/views/albums/_album.html.erb +++ b/app/views/albums/_album.html.erb @@ -1,4 +1,4 @@ -
+
<%= link_to album_path(album), class: "c-card__image" do %> <%= cover_image_tag album, class: "u-image-fluid" %> <% end %> diff --git a/app/views/albums/_filters.html.erb b/app/views/albums/_filters.html.erb index 66a5a573..e33a70b3 100644 --- a/app/views/albums/_filters.html.erb +++ b/app/views/albums/_filters.html.erb @@ -1,5 +1,5 @@ <% if filter_sort_presenter.has_filter? %> - <%= link_to albums_path, class: "c-button c-button--outline c-button--small u-mr-small", data: { "turbo-action" => ("replace" if native_app?) } do %> + <%= link_to albums_path, class: "c-button c-button--outline c-button--small u-mr-3", data: { "turbo-action" => ("replace" if native_app?) } do %> <%= icon_tag "close" %> <%= t("label.clear_filters") %> @@ -7,7 +7,7 @@ <% end %> <% end %> -
+
<%= t("field.genre") %> @@ -16,14 +16,14 @@
<%= turbo_frame_tag "turbo-genre-filter", src: albums_filter_genres_path(**filter_sort_presenter.params), loading: "lazy" do %> -
+
<%= loader_tag size: "small" %>
<% end %>
-
+
<%= t("field.year") %> @@ -32,7 +32,7 @@
<%= turbo_frame_tag "turbo-year-filter", src: albums_filter_years_path(**filter_sort_presenter.params), loading: "lazy" do %> -
+
<%= loader_tag size: "small" %>
<% end %> diff --git a/app/views/albums/index.html.erb b/app/views/albums/index.html.erb index 9803be87..19a8a3ec 100644 --- a/app/views/albums/index.html.erb +++ b/app/views/albums/index.html.erb @@ -3,9 +3,9 @@ <% filter_sort_presenter = FilterSortPresenter.new(params) %>
-
+
<% unless native_app? %> -

<%= t("label.albums") %>

+

<%= t("label.albums") %>

<% end %>
<%= render partial: "albums/filters", locals: { filter_sort_presenter: filter_sort_presenter } %> @@ -13,7 +13,7 @@
<% if @albums.empty? %> -
+
<%= empty_alert_tag has_icon: true, has_overlay: false %>
<% else %> @@ -21,7 +21,7 @@ <%= render partial: "albums/album", collection: @albums %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-albums-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-albums-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
<%= loader_tag %>
diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb index 5864d6da..26fd5e4f 100644 --- a/app/views/albums/show.html.erb +++ b/app/views/albums/show.html.erb @@ -1,7 +1,7 @@ <% page_title_tag @album.name %>
-
+
<%= cover_image_tag @album, class: "c-card__image u-image-medium" %>

<%= @album.name %>

@@ -11,7 +11,7 @@ , <%= format_duration(@album.songs.sum(:duration)) %>
-
+
<%= button_to( t("button.play"), current_playlist_album_path(@album, should_play: true), @@ -27,7 +27,7 @@ } ) %> <% if is_admin? %> - <%= link_to t("label.edit"), edit_dialog_album_path(@album), data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--secondary u-ml-tiny" %> + <%= link_to t("label.edit"), edit_dialog_album_path(@album), data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--secondary u-ml-1" %> <% end %>
@@ -65,7 +65,7 @@ <% end %> <% end %>
-
<%= format_duration(song.duration) %>
+
<%= format_duration(song.duration) %>
<% end %> diff --git a/app/views/artists/_album.html.erb b/app/views/artists/_album.html.erb index f95a3388..f5040f06 100644 --- a/app/views/artists/_album.html.erb +++ b/app/views/artists/_album.html.erb @@ -1,4 +1,4 @@ -
+
<%= link_to album_path(album), class: "c-card__image" do %> <%= cover_image_tag album, class: "u-image-fluid" %> <% end %> diff --git a/app/views/artists/_albums.html.erb b/app/views/artists/_albums.html.erb index a08926d5..cd8d9ff2 100644 --- a/app/views/artists/_albums.html.erb +++ b/app/views/artists/_albums.html.erb @@ -1,6 +1,6 @@ <% if albums.present? %>

<%= title %>

-
+
<%= render partial: "artists/album", collection: albums %>
<% end %> diff --git a/app/views/artists/_artist.html.erb b/app/views/artists/_artist.html.erb index f0014252..db3f7174 100644 --- a/app/views/artists/_artist.html.erb +++ b/app/views/artists/_artist.html.erb @@ -1,4 +1,4 @@ -
+
<%= link_to artist_path(artist), class: "c-card__image" do %> <%= cover_image_tag artist, class: "u-image-fluid" %> <% end %> diff --git a/app/views/artists/index.html.erb b/app/views/artists/index.html.erb index 1542a5bb..82de99ea 100644 --- a/app/views/artists/index.html.erb +++ b/app/views/artists/index.html.erb @@ -1,16 +1,16 @@ <% page_title_tag t("label.artists") %>
-
+
<% unless native_app? %> -

<%= t("label.artists") %>

+

<%= t("label.artists") %>

<% end %>
<%= render partial: "shared/sort_select", locals: { option: @sort_option, sort_controller: controller_name, filter_sort_presenter: FilterSortPresenter.new(params) } %>
<% if @artists.empty? %> -
+
<%= empty_alert_tag has_icon: true, has_overlay: false %>
<% else %> @@ -18,7 +18,7 @@ <%= render partial: "artists/artist", collection: @artists %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-artists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-artists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
<%= loader_tag %>
diff --git a/app/views/artists/show.html.erb b/app/views/artists/show.html.erb index 77158f06..600262f5 100644 --- a/app/views/artists/show.html.erb +++ b/app/views/artists/show.html.erb @@ -1,7 +1,7 @@ <% page_title_tag @artist.name %>
-
+
<%= cover_image_tag @artist, class: "c-card__image u-image-medium" %>

<%= @artist.name %>

@@ -11,8 +11,8 @@ <%= @artist.songs.size %> <%= t("label.songs") %>
<% if is_admin? %> -
- <%= link_to t("label.edit"), edit_dialog_artist_path(@artist), data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--secondary u-mt-large" %> +
+ <%= link_to t("label.edit"), edit_dialog_artist_path(@artist), data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--secondary u-mt-5" %>
<% end %>
diff --git a/app/views/current_playlist/songs/_song.html.erb b/app/views/current_playlist/songs/_song.html.erb index b6289833..39c6eed5 100644 --- a/app/views/current_playlist/songs/_song.html.erb +++ b/app/views/current_playlist/songs/_song.html.erb @@ -6,18 +6,18 @@ data-should-play='<%= local_assigns[:should_play] ? should_play : false %>' draggable='true'> -
+
<% unless mobile? %> - + <% end %> diff --git a/app/views/current_playlist/songs/index.html.erb b/app/views/current_playlist/songs/index.html.erb index 848244c8..410f50b6 100644 --- a/app/views/current_playlist/songs/index.html.erb +++ b/app/views/current_playlist/songs/index.html.erb @@ -16,7 +16,7 @@
-
    +
      <% @songs.each do |song| %> <%= render partial: "current_playlist/songs/song", locals: { song: song, playlist: @playlist, should_play: @should_play_song_id == song.id } %> <% end %> diff --git a/app/views/dialog/playlists/index.html.erb b/app/views/dialog/playlists/index.html.erb index ed777d23..1d4397a5 100644 --- a/app/views/dialog/playlists/index.html.erb +++ b/app/views/dialog/playlists/index.html.erb @@ -8,7 +8,7 @@ <%= render partial: "dialog/playlists/playlist", collection: @playlists %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-dialog-playlists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-dialog-playlists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
      <%= loader_tag %>
      diff --git a/app/views/errors/forbidden.html.erb b/app/views/errors/forbidden.html.erb index 526edf89..2b8e8b67 100644 --- a/app/views/errors/forbidden.html.erb +++ b/app/views/errors/forbidden.html.erb @@ -1,4 +1,4 @@

      403

      -

      <%= t("error.forbidden") %>

      +

      <%= t("error.forbidden") %>

      diff --git a/app/views/errors/internal_server_error.html.erb b/app/views/errors/internal_server_error.html.erb index 6fe2e0c0..b0b40253 100644 --- a/app/views/errors/internal_server_error.html.erb +++ b/app/views/errors/internal_server_error.html.erb @@ -1,4 +1,4 @@

      500

      -

      <%= t("error.internal_server_error") %>

      +

      <%= t("error.internal_server_error") %>

      diff --git a/app/views/errors/not_found.html.erb b/app/views/errors/not_found.html.erb index 33398b27..d5f53395 100644 --- a/app/views/errors/not_found.html.erb +++ b/app/views/errors/not_found.html.erb @@ -1,4 +1,4 @@

      404

      -

      <%= t("error.not_found") %>

      +

      <%= t("error.not_found") %>

      diff --git a/app/views/errors/unprocessable_entity.html.erb b/app/views/errors/unprocessable_entity.html.erb index 335e451f..9ea2b79d 100644 --- a/app/views/errors/unprocessable_entity.html.erb +++ b/app/views/errors/unprocessable_entity.html.erb @@ -1,4 +1,4 @@

      422

      -

      <%= t("error.unprocessable_entity") %>

      +

      <%= t("error.unprocessable_entity") %>

      diff --git a/app/views/errors/unsupported_browser.html.erb b/app/views/errors/unsupported_browser.html.erb index 6ca38369..3456b5c7 100644 --- a/app/views/errors/unsupported_browser.html.erb +++ b/app/views/errors/unsupported_browser.html.erb @@ -1,3 +1,3 @@
      -

      <%= t("error.unsupported_browser") %>

      +

      <%= t("error.unsupported_browser") %>

      diff --git a/app/views/favorite_playlist/songs/index.html.erb b/app/views/favorite_playlist/songs/index.html.erb index b2c9c1b5..82af6738 100644 --- a/app/views/favorite_playlist/songs/index.html.erb +++ b/app/views/favorite_playlist/songs/index.html.erb @@ -1,6 +1,6 @@
      -
      +

      <%= @playlist.name %>

      @@ -9,7 +9,7 @@ , <%= format_duration(@playlist.songs.sum(:duration)) %>
      -
      +
      <% unless @songs.blank? %> <%= button_to( t("button.play"), diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 61a9ea81..be49daa4 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -7,19 +7,19 @@ <% if [@recently_added_albums, @recently_played_albums].any?(&:present?) %> <% if @recently_played_albums.present? %>

      <%= t("label.recently_played") %>

      -
      +
      <%= render partial: "albums/album", collection: @recently_played_albums %>
      <% end %> <% if @recently_added_albums.present? %>

      <%= t("label.recently_added") %>

      -
      +
      <%= render partial: "albums/album", collection: @recently_added_albums %>
      <% end %> <% else %> -
      +
      <%= empty_alert_tag has_icon: true, has_overlay: false %>
      <% end %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 0487d94d..ca156e4b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -8,7 +8,7 @@ <% if native_app? %> <%= render "shared/flash" %> -
      +
      <%= yield %>
      <% else %> @@ -27,10 +27,9 @@
      <%= render "shared/flash" %> - <%= render partial: "shared/search_bar", locals: { current_user: Current.user, query: params[:query] } %> - <%= render partial: "shared/nav_bar", locals: { current_controller: controller_name } %> + <%= render partial: "shared/top_bar", locals: { current_user: Current.user, current_controller: controller_name, query: params[:query] } %>
      -
      +
      <%= yield %>
      diff --git a/app/views/layouts/plain.html.erb b/app/views/layouts/plain.html.erb index 06c1a6b6..68d119f9 100644 --- a/app/views/layouts/plain.html.erb +++ b/app/views/layouts/plain.html.erb @@ -1,8 +1,8 @@ <% content_for :body do %> <%= render "shared/flash" %>
      -
      -
      +
      +
      <%= yield %> diff --git a/app/views/layouts/playlist.html.erb b/app/views/layouts/playlist.html.erb index 81956a26..0b29da1b 100644 --- a/app/views/layouts/playlist.html.erb +++ b/app/views/layouts/playlist.html.erb @@ -1,5 +1,5 @@ <%= turbo_frame_tag "turbo-playlist" do %> -
      +
      <%= yield %>
      <% end %> diff --git a/app/views/libraries/show.html.erb b/app/views/libraries/show.html.erb index eb2bdc2b..cbe58f94 100644 --- a/app/views/libraries/show.html.erb +++ b/app/views/libraries/show.html.erb @@ -8,8 +8,8 @@
      • <%= link_to albums_path, class: "o-flex o-flex--justify-between" do %> - - <%= icon_tag "album", class: "u-mr-tiny" %> + + <%= icon_tag "album", class: "u-mr-1" %> <%= t("label.albums") %> <%= format_number(@albums_count) %> @@ -17,8 +17,8 @@
      • <%= link_to artists_path, class: "o-flex o-flex--justify-between" do %> - - <%= icon_tag "mic", class: "u-mr-tiny" %> + + <%= icon_tag "mic", class: "u-mr-1" %> <%= t("label.artists") %> <%= format_number(@artists_count) %> @@ -26,8 +26,8 @@
      • <%= link_to playlists_path, class: "o-flex o-flex--justify-between" do %> - - <%= icon_tag "queue-music", class: "u-mr-tiny" %> + + <%= icon_tag "queue-music", class: "u-mr-1" %> <%= t("label.playlists") %> <%= format_number(@playlists_count) %> @@ -35,8 +35,8 @@
      • <%= link_to songs_path, class: "o-flex o-flex--justify-between" do %> - - <%= icon_tag "music-note", class: "u-mr-tiny" %> + + <%= icon_tag "music-note", class: "u-mr-1" %> <%= t("label.songs") %> <%= format_number(@songs_count) %> diff --git a/app/views/playlists/_playlist.html.erb b/app/views/playlists/_playlist.html.erb index cc1da2be..a6d28bdc 100644 --- a/app/views/playlists/_playlist.html.erb +++ b/app/views/playlists/_playlist.html.erb @@ -6,7 +6,7 @@ <% else %> <%= icon_tag("queue-music") %> <% end %> - <%= playlist.name %> + <%= playlist.name %> <% end %>
      diff --git a/app/views/playlists/index.html.erb b/app/views/playlists/index.html.erb index 14729210..f170f358 100644 --- a/app/views/playlists/index.html.erb +++ b/app/views/playlists/index.html.erb @@ -1,10 +1,10 @@ <% page_title_tag t("label.playlists") %>
      -
      -
      +
      +
      <% unless native_app? %> -

      <%= t("label.playlists") %>

      +

      <%= t("label.playlists") %>

      <% end %> <%= link_to t("label.add"), new_dialog_playlist_path, data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--primary" %>
      @@ -20,7 +20,7 @@ <% end %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-playlists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-playlists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
      <%= loader_tag %>
      diff --git a/app/views/playlists/songs/_list.html.erb b/app/views/playlists/songs/_list.html.erb index 09573e92..2fe9e070 100644 --- a/app/views/playlists/songs/_list.html.erb +++ b/app/views/playlists/songs/_list.html.erb @@ -10,7 +10,7 @@ <%= render partial: "playlists/songs/song", collection: songs, locals: { playlist: playlist } %> <% if pagy.next %> - <%= turbo_frame_tag "#{dom_id(playlist)}-page-#{pagy.next}", src: pagy_url_for(pagy, pagy.next), loading: "lazy", class: "u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "#{dom_id(playlist)}-page-#{pagy.next}", src: pagy_url_for(pagy, pagy.next), loading: "lazy", class: "u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
      <%= loader_tag %>
      diff --git a/app/views/playlists/songs/_song.html.erb b/app/views/playlists/songs/_song.html.erb index e3093754..11841b75 100644 --- a/app/views/playlists/songs/_song.html.erb +++ b/app/views/playlists/songs/_song.html.erb @@ -1,7 +1,7 @@
    • -
      +
      <% unless mobile? %> - + <% end %> <%= button_to( @@ -18,15 +18,15 @@ } ) do %>
      -
      - <%= song.name %> +
      + <%= song.name %> <% if native_app? %> <%= song.artist.name %> <% else %> <%= link_to song.artist.name, artist_path(song.artist), class: "c-list__item__subtext" %> <% end %>
      -
      <%= format_duration(song.duration) %>
      +
      <%= format_duration(song.duration) %>
      <% end %>
      diff --git a/app/views/playlists/songs/index.html.erb b/app/views/playlists/songs/index.html.erb index 965cf7c9..074019de 100644 --- a/app/views/playlists/songs/index.html.erb +++ b/app/views/playlists/songs/index.html.erb @@ -2,7 +2,7 @@
      -
      +

      <%= @playlist.name %>

      @@ -11,7 +11,7 @@ , <%= format_duration(@playlist.songs.sum(:duration)) %>
      -
      +
      <% unless @songs.blank? %> <%= button_to( t("button.play"), diff --git a/app/views/search/albums/index.html.erb b/app/views/search/albums/index.html.erb index de9c53b9..4b13a563 100644 --- a/app/views/search/albums/index.html.erb +++ b/app/views/search/albums/index.html.erb @@ -1,10 +1,10 @@

      <%= t("label.search_results_for", query: params[:query]) %>

      <%= t("label.albums") %>

      -<%= turbo_frame_tag "turbo-search-albums-page-#{@pagy.page}", class: "o-grid o-grid--shelf u-mb-large", target: "_top" do %> +<%= turbo_frame_tag "turbo-search-albums-page-#{@pagy.page}", class: "o-grid o-grid--shelf u-mb-5", target: "_top" do %> <%= render partial: "albums/album", collection: @albums %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-search-albums-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-search-albums-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
      <%= loader_tag %>
      diff --git a/app/views/search/artists/index.html.erb b/app/views/search/artists/index.html.erb index 00c54a3a..fe234ecd 100644 --- a/app/views/search/artists/index.html.erb +++ b/app/views/search/artists/index.html.erb @@ -1,10 +1,10 @@

      <%= t("label.search_results_for", query: params[:query]) %>

      <%= t("label.artists") %>

      -<%= turbo_frame_tag "turbo-search-artists-page-#{@pagy.page}", class: "o-grid o-grid--shelf u-mb-large", target: "_top" do %> +<%= turbo_frame_tag "turbo-search-artists-page-#{@pagy.page}", class: "o-grid o-grid--shelf u-mb-5", target: "_top" do %> <%= render partial: "artists/artist", collection: @artists %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-search-artists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-search-artists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
      <%= loader_tag %>
      diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb index b6718988..d118d08a 100644 --- a/app/views/search/index.html.erb +++ b/app/views/search/index.html.erb @@ -4,46 +4,46 @@

      <%= t("label.search_results_for", query: params[:query]) %>

      <% if @albums.present? %> -
      +

      <%= t("label.albums") %>

      <% unless @is_all_albums %> <%= link_to t("label.see_all"), search_albums_path(query: params[:query]), class: "is-active" %> <% end %>
      -
      +
      <%= render partial: "albums/album", collection: @albums %>
      <% end %> <% if @artists.present? %> -
      +

      <%= t("label.artists") %>

      <% unless @is_all_artists %> <%= link_to t("label.see_all"), search_artists_path(query: params[:query]), class: "is-active" %> <% end %>
      -
      +
      <%= render partial: "artists/artist", collection: @artists %>
      <% end %> <% if @playlists.present? %> -
      +

      <%= t("label.playlists") %>

      <% unless @is_all_playlists %> <%= link_to t("label.see_all"), search_playlists_path(query: params[:query]), class: "is-active" %> <% end %>
      -
      +
      <%= render partial: "playlists/playlist", collection: @playlists %>
      <% end %> <% if @songs.present? %> -
      +

      <%= t("label.songs") %>

      <% unless @is_all_songs %> diff --git a/app/views/search/playlists/index.html.erb b/app/views/search/playlists/index.html.erb index 481d8ae1..92df50b2 100644 --- a/app/views/search/playlists/index.html.erb +++ b/app/views/search/playlists/index.html.erb @@ -5,7 +5,7 @@ <%= render partial: "playlists/playlist", collection: @playlists %> <% if @pagy.next %> - <%= turbo_frame_tag "turbo-search-playlists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-small", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %> + <%= turbo_frame_tag "turbo-search-playlists-page-#{@pagy.next}", src: pagy_url_for(@pagy, @pagy.next), loading: "lazy", class: "o-grid__item o-grid__item--row u-my-3", data: { controller: "element", action: "turbo:frame-render->element#replaceWithChildren" } do %>
      <%= loader_tag %>
      diff --git a/app/views/settings/_form.html.erb b/app/views/settings/_form.html.erb index 1e3f5bd7..84fd68b4 100644 --- a/app/views/settings/_form.html.erb +++ b/app/views/settings/_form.html.erb @@ -18,7 +18,7 @@ <% if MediaListener.running? %>
      <%= icon_tag("check", size: "small") %> - <%= t("text.media_listener_running") %> + <%= t("text.media_listener_running") %>
      <% end %>
      diff --git a/app/views/settings/show.html.erb b/app/views/settings/show.html.erb index ca200c3d..f61d2223 100644 --- a/app/views/settings/show.html.erb +++ b/app/views/settings/show.html.erb @@ -6,7 +6,7 @@
      <%= render "settings/form" %> <% end %> -

      +

      <%= link_to BlackCandy::Version, BlackCandy::Version.link, target: "_blank" %>

      diff --git a/app/views/shared/_empty_alert.html.erb b/app/views/shared/_empty_alert.html.erb index 22d97d82..01cd5b06 100644 --- a/app/views/shared/_empty_alert.html.erb +++ b/app/views/shared/_empty_alert.html.erb @@ -1,7 +1,7 @@ <% if has_overlay %>
      <% end %>
      <% if has_icon %> -
      +
      <%= icon_tag "music-off", large: "large" %>
      <% end %> diff --git a/app/views/shared/_filter_options.html.erb b/app/views/shared/_filter_options.html.erb index d4db2129..e5960b7c 100644 --- a/app/views/shared/_filter_options.html.erb +++ b/app/views/shared/_filter_options.html.erb @@ -11,7 +11,7 @@ <%= option %> <% if filter_sort_presenter.filter_value(filter_name) == option.to_s %> - <%= icon_tag("check", size: "small", class: "u-ml-narrow") %> + <%= icon_tag("check", size: "small", class: "u-ml-2") %> <% end %> <% end %> diff --git a/app/views/shared/_mini_player.html.erb b/app/views/shared/_mini_player.html.erb index eb51a18d..92150abe 100644 --- a/app/views/shared/_mini_player.html.erb +++ b/app/views/shared/_mini_player.html.erb @@ -1,12 +1,12 @@ -
      +
      - <%= icon_tag "expand-less", size: "large", title: t("label.expand_player") %> + <%= icon_tag "expand-less", size: "large", title: t("label.expand_player") %> <%= loader_tag(size: "small") %>
      - - + +
      diff --git a/app/views/shared/_nav_bar.html.erb b/app/views/shared/_nav_bar.html.erb index 4a0596fd..cc27e8f5 100644 --- a/app/views/shared/_nav_bar.html.erb +++ b/app/views/shared/_nav_bar.html.erb @@ -1,4 +1,4 @@ -
    +
diff --git a/app/views/artists/show.html.erb b/app/views/artists/show.html.erb index 600262f5..8cf8ffe3 100644 --- a/app/views/artists/show.html.erb +++ b/app/views/artists/show.html.erb @@ -1,22 +1,31 @@ <% page_title_tag @artist.name %> +<% content_for :fluid_layout, true %> -
-
- <%= cover_image_tag @artist, class: "c-card__image u-image-medium" %> -
-

<%= @artist.name %>

-
- <%= @artist.all_albums.size %> <%= t("label.albums") %> - , - <%= @artist.songs.size %> <%= t("label.songs") %> -
- <% if is_admin? %> -
- <%= link_to t("label.edit"), edit_dialog_artist_path(@artist), data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--secondary u-mt-5" %> +
+
+
+ <%= cover_image_tag @artist, class: "c-card__image u-image-medium c-cover" %> +
+
+

<%= @artist.name %>

+
+ <%= @artist.all_albums.size %> <%= t("label.albums") %> + , + <%= @artist.songs.size %> <%= t("label.songs") %> +
- <% end %> + <% if is_admin? %> +
+ <%= link_to t("label.edit"), edit_dialog_artist_path(@artist), data: { "turbo-frame" => ("turbo-dialog" unless native_app?) }, class: "c-button c-button--secondary c-button--large" %> +
+ <% end %> +
- <%= render partial: "artists/albums", locals: { title: t("label.albums"), albums: @albums } %> - <%= render partial: "artists/albums", locals: { title: t("label.appears_on"), albums: @appears_on_albums } %> +
+
+
+ <%= render partial: "artists/albums", locals: { title: t("label.albums"), albums: @albums } %> + <%= render partial: "artists/albums", locals: { title: t("label.appears_on"), albums: @appears_on_albums } %> +
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 511f4e00..af1e367c 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -29,7 +29,7 @@ <%= render "shared/flash" %> <%= render partial: "shared/top_bar", locals: { current_user: Current.user, current_controller: controller_name, query: params[:query] } %> -
+
<%= yield %>