From 23da22aa2a1eeb09546c6647fc5bc6232ee54fdd Mon Sep 17 00:00:00 2001 From: cade Date: Wed, 8 Jul 2026 14:01:27 +0800 Subject: [PATCH] Updated SCSS definitions to resolve potential deprecated feature removals - Used sass-migrator - Hoisted custom variables out of light.scss into _variables.scss, pulled in via @use rules. --- src/css/app.scss | 19 +++--- src/css/custom.scss | 3 + src/css/scheme/_variables.scss | 105 ++++++++++++++++++++++++++++++++ src/css/scheme/light.scss | 106 --------------------------------- 4 files changed, 118 insertions(+), 115 deletions(-) create mode 100644 src/css/scheme/_variables.scss diff --git a/src/css/app.scss b/src/css/app.scss index 2ac8f0014..0731d0edc 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -1,18 +1,19 @@ +// IMPORTANT: +// Do not use dollar signs in this file, as it causes Quasar to import its variables, which infects bulma's defaults. +// If you need to use dollar signs, consider creating a new file that contains them and importing that file from here instead. @charset "utf-8"; +@use "sass:meta"; +@use "quasar.variables"; @use "v2/main"; @use "v2/initial"; @use "v2/components/all"; @import "./quasar.css"; -@import "./quasar.variables"; -@import "fontawesome-free-5.11.2/css/all.min.css"; -// IMPORTANT: -// Do not use dollar signs in this file, as it causes Quasar to import its variables, which infects bulma's defaults. -// If you need to use dollar signs, consider creating a new file that contains them and importing that file from here instead. +@import "fontawesome-free-5.11.2/css/all.min.css"; -@import "scheme/light"; -@import "scheme/dark"; -@import "scheme/funky"; +@include meta.load-css("scheme/light"); +@include meta.load-css("scheme/dark"); +@include meta.load-css("scheme/funky"); @import "bulma/css/bulma.css"; @import "bulma-steps/dist/css/bulma-steps.min.css"; @@ -20,4 +21,4 @@ @import "bulma-slider/dist/css/bulma-slider.min.css"; @import "bulma-checkradio/dist/css/bulma-checkradio.min.css"; -@import "custom"; +@include meta.load-css("custom"); diff --git a/src/css/custom.scss b/src/css/custom.scss index ca029ed59..4ff3ed05c 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -1,3 +1,6 @@ +@use "scheme/variables" as *; +@use "quasar.variables" as *; + // fix color vars that we can't override html { background-color: $scheme-background; diff --git a/src/css/scheme/_variables.scss b/src/css/scheme/_variables.scss new file mode 100644 index 000000000..27d8532fc --- /dev/null +++ b/src/css/scheme/_variables.scss @@ -0,0 +1,105 @@ +// custom vars +$scheme-background: var(--background, #ffffff); +$scheme-text: var(--text, #4a4a4a); +$scheme-text-secondary: var(--text-secondary, #6b6464); +$scheme-text-strong: var(--text-strong, #363636); +$scheme-primary: var(--scheme-primary, #3273dc); +$scheme-link: var(--link, $scheme-primary); +$scheme-link-hover: var(--link-hover, $scheme-text-strong); +$scheme-shadow: var(--shadow, #0000003b); +$scheme-border: var(--border, #e1e1e1); +$scheme-border-secondary: var(--border-secondary, #c9d3ee); +$scheme-border-hover: var(--border-hover, #b5b5b5); +$scheme-border-active: var(--border-active, #4a4a4a); +$code-font-color: var(--code-font-color, #d01e49); +$card-expand-shadow-color: var(--card-expand-shadow-color, rgba(0, 0, 0, 0.1)); +$card-expand-background-color: var(--card-expand-background-color, #f6f6f8); +$scrollbar-background: var(--border-hover, #b5b5b5); +$scrollbar-background-hover: var(--border, #e1e1e1); + +// overriding bulma variables with CSS vars that can be replaced with other values when on a different scheme + +$strong-color: $scheme-text-strong; + +// KEY: $bulma-var: var(--css-var, #default-color || $default-color (taken from bulma defaults)); +$title-color: var(--title-color, $scheme-text-strong); +$subtitle-color: var(--subtitle-color, $scheme-text); + +$hr-background-color: var(--hr-background-color, #f5f5f5); + +$button-color: var(--button-color, $scheme-text-strong); +$button-background-color: var(--button-background-color, $scheme-background); +$button-border-color: var(--button-border-color, $scheme-border); +$button-hover-color: var(--button-hover-color, $button-color); +$button-hover-border-color: var(--button-hover-border-color, $scheme-border-hover); +$button-active-color: var(--button-active-color, $button-color); +$button-active-border-color: var(--button-active-border-color, $scheme-border-active); +$button-disabled-color: var(--button-disabled-color, $button-color); +$button-disabled-background-color: var(--button-disabled-background-color, $button-background-color); +$button-disabled-border-color: var(--button-disabled-border-color, $button-border-color); + +$code-background: var(--code-background, #f5f5f5); + +$content-heading-color: var(--content-heading-color, $title-color); + +$notification-background-color: var(--notification-background-color, #f5f5f5); + +$card-background-color: var(--card-background-color, $scheme-background); +$card-header-color: var(--card-header-color, $scheme-text-strong); +$card-color: var(--card-color, $scheme-text); +$card-footer-border-top: 1px solid var(--card-footer-border-top, $scheme-border); + +$modal-card-body-background-color: var(--modal-card-body-background-color, $scheme-background); +$modal-card-head-background-color: var(--modal-card-head-background-color, $scheme-background); +$modal-card-head-border-bottom: 1px solid var(--modal-card-head-border-bottom, $scheme-border); +$modal-card-foot-border-top: 1px solid var(--modal-card-foot-border-top, $scheme-border); +$modal-card-title-color: var(--modal-card-title-color, $scheme-text); + +$menu-item-color: var(--menu-item-color, $scheme-text); +$menu-item-hover-background-color: var(--menu-item-hover-background-color, #e9eaed); +$menu-item-hover-color: var(--menu-item-hover-color, $scheme-text-strong); +$menu-label-color: var(--menu-label-color, #9e9e9e); +$menu-list-border-left: 1px solid var(--menu-list-border-left, $scheme-border); + +$tabs-link-color: var(--tabs-link-color, $scheme-text); +$tabs-link-hover-color: var(--tabs-link-hover-color, $scheme-text-strong); +$tabs-link-active-color: var(--tabs-link-active-color, #3273dc); +$tabs-border-bottom-color: var(--tabs-border-bottom-color, $scheme-border); +$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color, currentcolor); +$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color, currentcolor); + +$input-color: var(--input-color, $scheme-text-strong); +$input-background-color: var(--input-background-color, $scheme-background); +$input-placeholder-color: var(--input-placeholder-color, #3636364d); +$input-border-color: var(--input-border-color, $scheme-border); +$input-hover-border-color: var(--input-hover-border-color, $scheme-border-hover); +$input-focus-border-color: var(--input-focus-border-color, #3273dc); +$input-disabled-color: var(--input-disabled-color, #7a7a7a); +$input-disabled-background-color: var(--input-disabled-background-color, #f5f5f5); +$input-disabled-border-color: var(--input-disabled-border-color, $scheme-border-secondary); +$input-disabled-placeholder-color: var(--input-disabled-placeholder-color, #7a7a7a4a); + +$pagination-color: var(--pagination-color, $scheme-text-strong); +$pagination-hover-color: var(--pagination-hover-color, $scheme-text-strong); +$pagination-focus-color: var(--pagination-focus-color, $scheme-text-strong); +$pagination-border-color: var(--pagination-border-color, $scheme-border); +$pagination-hover-border-color: var(--pagination-hover-border-color, $scheme-border-hover); +$pagination-focus-border-color: var(--pagination-focus-border-color, $scheme-border-hover); + +$panel-block-color: var(--panel-block-color, $scheme-text-strong); +$panel-item-border: 1px solid var(--panel-item-border, $scheme-border); +$panel-block-hover-background-color: var(--panel-block-hover-background-color, #f5f5f5); + +$list-item-color: var(--list-item-color, $scheme-text); +$list-background-color: var(--list-background-color, $scheme-background); +$list-item-border: 1px solid var(--list-item-border, $scheme-border); + +// other bulma overrides +$list-shadow: 0 0 0 1px $scheme-border, 0 2px 3px $scheme-shadow; +$card-header-shadow: 0 0.125em 0.25em $scheme-shadow; + +// custom vars +$select-color: var(--select-color, $strong-color); +$select-background-color: var(--select-background-color, $scheme-background); +$select-border-color: var(--select-border-color, $scheme-border); +$select-hover-border-color: var(--select-hover-border-color, $scheme-border-hover); diff --git a/src/css/scheme/light.scss b/src/css/scheme/light.scss index 8870b7134..1ecf1aa23 100644 --- a/src/css/scheme/light.scss +++ b/src/css/scheme/light.scss @@ -9,109 +9,3 @@ --ecosystem-update-error-background: #fce7ec; --ecosystem-update-error-border: #f6cbd5; } - -// custom vars -$scheme-background: var(--background, #ffffff); -$scheme-text: var(--text, #4a4a4a); -$scheme-text-secondary: var(--text-secondary, #6b6464); -$scheme-text-strong: var(--text-strong, #363636); -$scheme-primary: var(--scheme-primary, #3273dc); -$scheme-link: var(--link, $scheme-primary); -$scheme-link-hover: var(--link-hover, $scheme-text-strong); -$scheme-shadow: var(--shadow, #0000003b); -$scheme-border: var(--border, #e1e1e1); -$scheme-border-secondary: var(--border-secondary, #c9d3ee); -$scheme-border-hover: var(--border-hover, #b5b5b5); -$scheme-border-active: var(--border-active, #4a4a4a); -$code-font-color: var(--code-font-color, #d01e49); -$card-expand-shadow-color: var(--card-expand-shadow-color, rgba(0, 0, 0, 0.1)); -$card-expand-background-color: var(--card-expand-background-color, #f6f6f8); -$scrollbar-background: var(--border-hover, #b5b5b5); -$scrollbar-background-hover: var(--border, #e1e1e1); - -// overriding bulma variables with CSS vars that can be replaced with other values when on a different scheme - -$strong-color: $scheme-text-strong; - -// KEY: $bulma-var: var(--css-var, #default-color || $default-color (taken from bulma defaults)); -$title-color: var(--title-color, $scheme-text-strong); -$subtitle-color: var(--subtitle-color, $scheme-text); - -$hr-background-color: var(--hr-background-color, #f5f5f5); - -$button-color: var(--button-color, $scheme-text-strong); -$button-background-color: var(--button-background-color, $scheme-background); -$button-border-color: var(--button-border-color, $scheme-border); -$button-hover-color: var(--button-hover-color, $button-color); -$button-hover-border-color: var(--button-hover-border-color, $scheme-border-hover); -$button-active-color: var(--button-active-color, $button-color); -$button-active-border-color: var(--button-active-border-color, $scheme-border-active); -$button-disabled-color: var(--button-disabled-color, $button-color); -$button-disabled-background-color: var(--button-disabled-background-color, $button-background-color); -$button-disabled-border-color: var(--button-disabled-border-color, $button-border-color); - -$code-background: var(--code-background, #f5f5f5); - -$content-heading-color: var(--content-heading-color, $title-color); - -$notification-background-color: var(--notification-background-color, #f5f5f5); - -$card-background-color: var(--card-background-color, $scheme-background); -$card-header-color: var(--card-header-color, $scheme-text-strong); -$card-color: var(--card-color, $scheme-text); -$card-footer-border-top: 1px solid var(--card-footer-border-top, $scheme-border); - -$modal-card-body-background-color: var(--modal-card-body-background-color, $scheme-background); -$modal-card-head-background-color: var(--modal-card-head-background-color, $scheme-background); -$modal-card-head-border-bottom: 1px solid var(--modal-card-head-border-bottom, $scheme-border); -$modal-card-foot-border-top: 1px solid var(--modal-card-foot-border-top, $scheme-border); -$modal-card-title-color: var(--modal-card-title-color, $scheme-text); - -$menu-item-color: var(--menu-item-color, $scheme-text); -$menu-item-hover-background-color: var(--menu-item-hover-background-color, #e9eaed); -$menu-item-hover-color: var(--menu-item-hover-color, $scheme-text-strong); -$menu-label-color: var(--menu-label-color, #9e9e9e); -$menu-list-border-left: 1px solid var(--menu-list-border-left, $scheme-border); - -$tabs-link-color: var(--tabs-link-color, $scheme-text); -$tabs-link-hover-color: var(--tabs-link-hover-color, $scheme-text-strong); -$tabs-link-active-color: var(--tabs-link-active-color, #3273dc); -$tabs-border-bottom-color: var(--tabs-border-bottom-color, $scheme-border); -$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color, currentcolor); -$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color, currentcolor); - -$input-color: var(--input-color, $scheme-text-strong); -$input-background-color: var(--input-background-color, $scheme-background); -$input-placeholder-color: var(--input-placeholder-color, #3636364d); -$input-border-color: var(--input-border-color, $scheme-border); -$input-hover-border-color: var(--input-hover-border-color, $scheme-border-hover); -$input-focus-border-color: var(--input-focus-border-color, #3273dc); -$input-disabled-color: var(--input-disabled-color, #7a7a7a); -$input-disabled-background-color: var(--input-disabled-background-color, #f5f5f5); -$input-disabled-border-color: var(--input-disabled-border-color, $scheme-border-secondary); -$input-disabled-placeholder-color: var(--input-disabled-placeholder-color, #7a7a7a4a); - -$pagination-color: var(--pagination-color, $scheme-text-strong); -$pagination-hover-color: var(--pagination-hover-color, $scheme-text-strong); -$pagination-focus-color: var(--pagination-focus-color, $scheme-text-strong); -$pagination-border-color: var(--pagination-border-color, $scheme-border); -$pagination-hover-border-color: var(--pagination-hover-border-color, $scheme-border-hover); -$pagination-focus-border-color: var(--pagination-focus-border-color, $scheme-border-hover); - -$panel-block-color: var(--panel-block-color, $scheme-text-strong); -$panel-item-border: 1px solid var(--panel-item-border, $scheme-border); -$panel-block-hover-background-color: var(--panel-block-hover-background-color, #f5f5f5); - -$list-item-color: var(--list-item-color, $scheme-text); -$list-background-color: var(--list-background-color, $scheme-background); -$list-item-border: 1px solid var(--list-item-border, $scheme-border); - -// other bulma overrides -$list-shadow: 0 0 0 1px $scheme-border, 0 2px 3px $scheme-shadow; -$card-header-shadow: 0 0.125em 0.25em $scheme-shadow; - -// custom vars -$select-color: var(--select-color, $strong-color); -$select-background-color: var(--select-background-color, $scheme-background); -$select-border-color: var(--select-border-color, $scheme-border); -$select-hover-border-color: var(--select-hover-border-color, $scheme-border-hover);