Skip to content

Commit 23da22a

Browse files
ebkrebkr
committed
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.
1 parent ae580a9 commit 23da22a

4 files changed

Lines changed: 118 additions & 115 deletions

File tree

‎src/css/app.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1+
// IMPORTANT:
2+
// Do not use dollar signs in this file, as it causes Quasar to import its variables, which infects bulma's defaults.
3+
// If you need to use dollar signs, consider creating a new file that contains them and importing that file from here instead.
14
@charset "utf-8";
5+
@use "sass:meta";
6+
@use "quasar.variables";
27
@use "v2/main";
38
@use "v2/initial";
49
@use "v2/components/all";
510
@import "./quasar.css";
6-
@import "./quasar.variables";
7-
@import "fontawesome-free-5.11.2/css/all.min.css";
811

9-
// IMPORTANT:
10-
// Do not use dollar signs in this file, as it causes Quasar to import its variables, which infects bulma's defaults.
11-
// If you need to use dollar signs, consider creating a new file that contains them and importing that file from here instead.
12+
@import "fontawesome-free-5.11.2/css/all.min.css";
1213

13-
@import "scheme/light";
14-
@import "scheme/dark";
15-
@import "scheme/funky";
14+
@include meta.load-css("scheme/light");
15+
@include meta.load-css("scheme/dark");
16+
@include meta.load-css("scheme/funky");
1617

1718
@import "bulma/css/bulma.css";
1819
@import "bulma-steps/dist/css/bulma-steps.min.css";
1920
@import "bulma-divider/dist/css/bulma-divider.min.css";
2021
@import "bulma-slider/dist/css/bulma-slider.min.css";
2122
@import "bulma-checkradio/dist/css/bulma-checkradio.min.css";
2223

23-
@import "custom";
24+
@include meta.load-css("custom");

‎src/css/custom.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use "scheme/variables" as *;
2+
@use "quasar.variables" as *;
3+
14
// fix color vars that we can't override
25
html {
36
background-color: $scheme-background;

‎src/css/scheme/_variables.scss‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// custom vars
2+
$scheme-background: var(--background, #ffffff);
3+
$scheme-text: var(--text, #4a4a4a);
4+
$scheme-text-secondary: var(--text-secondary, #6b6464);
5+
$scheme-text-strong: var(--text-strong, #363636);
6+
$scheme-primary: var(--scheme-primary, #3273dc);
7+
$scheme-link: var(--link, $scheme-primary);
8+
$scheme-link-hover: var(--link-hover, $scheme-text-strong);
9+
$scheme-shadow: var(--shadow, #0000003b);
10+
$scheme-border: var(--border, #e1e1e1);
11+
$scheme-border-secondary: var(--border-secondary, #c9d3ee);
12+
$scheme-border-hover: var(--border-hover, #b5b5b5);
13+
$scheme-border-active: var(--border-active, #4a4a4a);
14+
$code-font-color: var(--code-font-color, #d01e49);
15+
$card-expand-shadow-color: var(--card-expand-shadow-color, rgba(0, 0, 0, 0.1));
16+
$card-expand-background-color: var(--card-expand-background-color, #f6f6f8);
17+
$scrollbar-background: var(--border-hover, #b5b5b5);
18+
$scrollbar-background-hover: var(--border, #e1e1e1);
19+
20+
// overriding bulma variables with CSS vars that can be replaced with other values when on a different scheme
21+
22+
$strong-color: $scheme-text-strong;
23+
24+
// KEY: $bulma-var: var(--css-var, #default-color || $default-color (taken from bulma defaults));
25+
$title-color: var(--title-color, $scheme-text-strong);
26+
$subtitle-color: var(--subtitle-color, $scheme-text);
27+
28+
$hr-background-color: var(--hr-background-color, #f5f5f5);
29+
30+
$button-color: var(--button-color, $scheme-text-strong);
31+
$button-background-color: var(--button-background-color, $scheme-background);
32+
$button-border-color: var(--button-border-color, $scheme-border);
33+
$button-hover-color: var(--button-hover-color, $button-color);
34+
$button-hover-border-color: var(--button-hover-border-color, $scheme-border-hover);
35+
$button-active-color: var(--button-active-color, $button-color);
36+
$button-active-border-color: var(--button-active-border-color, $scheme-border-active);
37+
$button-disabled-color: var(--button-disabled-color, $button-color);
38+
$button-disabled-background-color: var(--button-disabled-background-color, $button-background-color);
39+
$button-disabled-border-color: var(--button-disabled-border-color, $button-border-color);
40+
41+
$code-background: var(--code-background, #f5f5f5);
42+
43+
$content-heading-color: var(--content-heading-color, $title-color);
44+
45+
$notification-background-color: var(--notification-background-color, #f5f5f5);
46+
47+
$card-background-color: var(--card-background-color, $scheme-background);
48+
$card-header-color: var(--card-header-color, $scheme-text-strong);
49+
$card-color: var(--card-color, $scheme-text);
50+
$card-footer-border-top: 1px solid var(--card-footer-border-top, $scheme-border);
51+
52+
$modal-card-body-background-color: var(--modal-card-body-background-color, $scheme-background);
53+
$modal-card-head-background-color: var(--modal-card-head-background-color, $scheme-background);
54+
$modal-card-head-border-bottom: 1px solid var(--modal-card-head-border-bottom, $scheme-border);
55+
$modal-card-foot-border-top: 1px solid var(--modal-card-foot-border-top, $scheme-border);
56+
$modal-card-title-color: var(--modal-card-title-color, $scheme-text);
57+
58+
$menu-item-color: var(--menu-item-color, $scheme-text);
59+
$menu-item-hover-background-color: var(--menu-item-hover-background-color, #e9eaed);
60+
$menu-item-hover-color: var(--menu-item-hover-color, $scheme-text-strong);
61+
$menu-label-color: var(--menu-label-color, #9e9e9e);
62+
$menu-list-border-left: 1px solid var(--menu-list-border-left, $scheme-border);
63+
64+
$tabs-link-color: var(--tabs-link-color, $scheme-text);
65+
$tabs-link-hover-color: var(--tabs-link-hover-color, $scheme-text-strong);
66+
$tabs-link-active-color: var(--tabs-link-active-color, #3273dc);
67+
$tabs-border-bottom-color: var(--tabs-border-bottom-color, $scheme-border);
68+
$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color, currentcolor);
69+
$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color, currentcolor);
70+
71+
$input-color: var(--input-color, $scheme-text-strong);
72+
$input-background-color: var(--input-background-color, $scheme-background);
73+
$input-placeholder-color: var(--input-placeholder-color, #3636364d);
74+
$input-border-color: var(--input-border-color, $scheme-border);
75+
$input-hover-border-color: var(--input-hover-border-color, $scheme-border-hover);
76+
$input-focus-border-color: var(--input-focus-border-color, #3273dc);
77+
$input-disabled-color: var(--input-disabled-color, #7a7a7a);
78+
$input-disabled-background-color: var(--input-disabled-background-color, #f5f5f5);
79+
$input-disabled-border-color: var(--input-disabled-border-color, $scheme-border-secondary);
80+
$input-disabled-placeholder-color: var(--input-disabled-placeholder-color, #7a7a7a4a);
81+
82+
$pagination-color: var(--pagination-color, $scheme-text-strong);
83+
$pagination-hover-color: var(--pagination-hover-color, $scheme-text-strong);
84+
$pagination-focus-color: var(--pagination-focus-color, $scheme-text-strong);
85+
$pagination-border-color: var(--pagination-border-color, $scheme-border);
86+
$pagination-hover-border-color: var(--pagination-hover-border-color, $scheme-border-hover);
87+
$pagination-focus-border-color: var(--pagination-focus-border-color, $scheme-border-hover);
88+
89+
$panel-block-color: var(--panel-block-color, $scheme-text-strong);
90+
$panel-item-border: 1px solid var(--panel-item-border, $scheme-border);
91+
$panel-block-hover-background-color: var(--panel-block-hover-background-color, #f5f5f5);
92+
93+
$list-item-color: var(--list-item-color, $scheme-text);
94+
$list-background-color: var(--list-background-color, $scheme-background);
95+
$list-item-border: 1px solid var(--list-item-border, $scheme-border);
96+
97+
// other bulma overrides
98+
$list-shadow: 0 0 0 1px $scheme-border, 0 2px 3px $scheme-shadow;
99+
$card-header-shadow: 0 0.125em 0.25em $scheme-shadow;
100+
101+
// custom vars
102+
$select-color: var(--select-color, $strong-color);
103+
$select-background-color: var(--select-background-color, $scheme-background);
104+
$select-border-color: var(--select-border-color, $scheme-border);
105+
$select-hover-border-color: var(--select-hover-border-color, $scheme-border-hover);

‎src/css/scheme/light.scss‎

Lines changed: 0 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -9,109 +9,3 @@
99
--ecosystem-update-error-background: #fce7ec;
1010
--ecosystem-update-error-border: #f6cbd5;
1111
}
12-
13-
// custom vars
14-
$scheme-background: var(--background, #ffffff);
15-
$scheme-text: var(--text, #4a4a4a);
16-
$scheme-text-secondary: var(--text-secondary, #6b6464);
17-
$scheme-text-strong: var(--text-strong, #363636);
18-
$scheme-primary: var(--scheme-primary, #3273dc);
19-
$scheme-link: var(--link, $scheme-primary);
20-
$scheme-link-hover: var(--link-hover, $scheme-text-strong);
21-
$scheme-shadow: var(--shadow, #0000003b);
22-
$scheme-border: var(--border, #e1e1e1);
23-
$scheme-border-secondary: var(--border-secondary, #c9d3ee);
24-
$scheme-border-hover: var(--border-hover, #b5b5b5);
25-
$scheme-border-active: var(--border-active, #4a4a4a);
26-
$code-font-color: var(--code-font-color, #d01e49);
27-
$card-expand-shadow-color: var(--card-expand-shadow-color, rgba(0, 0, 0, 0.1));
28-
$card-expand-background-color: var(--card-expand-background-color, #f6f6f8);
29-
$scrollbar-background: var(--border-hover, #b5b5b5);
30-
$scrollbar-background-hover: var(--border, #e1e1e1);
31-
32-
// overriding bulma variables with CSS vars that can be replaced with other values when on a different scheme
33-
34-
$strong-color: $scheme-text-strong;
35-
36-
// KEY: $bulma-var: var(--css-var, #default-color || $default-color (taken from bulma defaults));
37-
$title-color: var(--title-color, $scheme-text-strong);
38-
$subtitle-color: var(--subtitle-color, $scheme-text);
39-
40-
$hr-background-color: var(--hr-background-color, #f5f5f5);
41-
42-
$button-color: var(--button-color, $scheme-text-strong);
43-
$button-background-color: var(--button-background-color, $scheme-background);
44-
$button-border-color: var(--button-border-color, $scheme-border);
45-
$button-hover-color: var(--button-hover-color, $button-color);
46-
$button-hover-border-color: var(--button-hover-border-color, $scheme-border-hover);
47-
$button-active-color: var(--button-active-color, $button-color);
48-
$button-active-border-color: var(--button-active-border-color, $scheme-border-active);
49-
$button-disabled-color: var(--button-disabled-color, $button-color);
50-
$button-disabled-background-color: var(--button-disabled-background-color, $button-background-color);
51-
$button-disabled-border-color: var(--button-disabled-border-color, $button-border-color);
52-
53-
$code-background: var(--code-background, #f5f5f5);
54-
55-
$content-heading-color: var(--content-heading-color, $title-color);
56-
57-
$notification-background-color: var(--notification-background-color, #f5f5f5);
58-
59-
$card-background-color: var(--card-background-color, $scheme-background);
60-
$card-header-color: var(--card-header-color, $scheme-text-strong);
61-
$card-color: var(--card-color, $scheme-text);
62-
$card-footer-border-top: 1px solid var(--card-footer-border-top, $scheme-border);
63-
64-
$modal-card-body-background-color: var(--modal-card-body-background-color, $scheme-background);
65-
$modal-card-head-background-color: var(--modal-card-head-background-color, $scheme-background);
66-
$modal-card-head-border-bottom: 1px solid var(--modal-card-head-border-bottom, $scheme-border);
67-
$modal-card-foot-border-top: 1px solid var(--modal-card-foot-border-top, $scheme-border);
68-
$modal-card-title-color: var(--modal-card-title-color, $scheme-text);
69-
70-
$menu-item-color: var(--menu-item-color, $scheme-text);
71-
$menu-item-hover-background-color: var(--menu-item-hover-background-color, #e9eaed);
72-
$menu-item-hover-color: var(--menu-item-hover-color, $scheme-text-strong);
73-
$menu-label-color: var(--menu-label-color, #9e9e9e);
74-
$menu-list-border-left: 1px solid var(--menu-list-border-left, $scheme-border);
75-
76-
$tabs-link-color: var(--tabs-link-color, $scheme-text);
77-
$tabs-link-hover-color: var(--tabs-link-hover-color, $scheme-text-strong);
78-
$tabs-link-active-color: var(--tabs-link-active-color, #3273dc);
79-
$tabs-border-bottom-color: var(--tabs-border-bottom-color, $scheme-border);
80-
$tabs-link-hover-border-bottom-color: var(--tabs-link-hover-border-bottom-color, currentcolor);
81-
$tabs-link-active-border-bottom-color: var(--tabs-link-active-border-bottom-color, currentcolor);
82-
83-
$input-color: var(--input-color, $scheme-text-strong);
84-
$input-background-color: var(--input-background-color, $scheme-background);
85-
$input-placeholder-color: var(--input-placeholder-color, #3636364d);
86-
$input-border-color: var(--input-border-color, $scheme-border);
87-
$input-hover-border-color: var(--input-hover-border-color, $scheme-border-hover);
88-
$input-focus-border-color: var(--input-focus-border-color, #3273dc);
89-
$input-disabled-color: var(--input-disabled-color, #7a7a7a);
90-
$input-disabled-background-color: var(--input-disabled-background-color, #f5f5f5);
91-
$input-disabled-border-color: var(--input-disabled-border-color, $scheme-border-secondary);
92-
$input-disabled-placeholder-color: var(--input-disabled-placeholder-color, #7a7a7a4a);
93-
94-
$pagination-color: var(--pagination-color, $scheme-text-strong);
95-
$pagination-hover-color: var(--pagination-hover-color, $scheme-text-strong);
96-
$pagination-focus-color: var(--pagination-focus-color, $scheme-text-strong);
97-
$pagination-border-color: var(--pagination-border-color, $scheme-border);
98-
$pagination-hover-border-color: var(--pagination-hover-border-color, $scheme-border-hover);
99-
$pagination-focus-border-color: var(--pagination-focus-border-color, $scheme-border-hover);
100-
101-
$panel-block-color: var(--panel-block-color, $scheme-text-strong);
102-
$panel-item-border: 1px solid var(--panel-item-border, $scheme-border);
103-
$panel-block-hover-background-color: var(--panel-block-hover-background-color, #f5f5f5);
104-
105-
$list-item-color: var(--list-item-color, $scheme-text);
106-
$list-background-color: var(--list-background-color, $scheme-background);
107-
$list-item-border: 1px solid var(--list-item-border, $scheme-border);
108-
109-
// other bulma overrides
110-
$list-shadow: 0 0 0 1px $scheme-border, 0 2px 3px $scheme-shadow;
111-
$card-header-shadow: 0 0.125em 0.25em $scheme-shadow;
112-
113-
// custom vars
114-
$select-color: var(--select-color, $strong-color);
115-
$select-background-color: var(--select-background-color, $scheme-background);
116-
$select-border-color: var(--select-border-color, $scheme-border);
117-
$select-hover-border-color: var(--select-hover-border-color, $scheme-border-hover);

0 commit comments

Comments
 (0)