Skip to content

Commit 2c25db0

Browse files
wuda-iowuda-io
committed
refactor: remove theme vars and use m3 vars
Removes a lot of double declaration and confusion. All needed vars already exist, so there is no need in defining them multiple times.
1 parent a2650dd commit 2c25db0

28 files changed

Lines changed: 149 additions & 203 deletions

‎sass/components/_badges.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@ span.badge {
1111
font-size: 1rem;
1212
line-height: var(--bagde-height);
1313
height: var(--bagde-height);
14-
color: var(--font-color-medium);
14+
color: var(--md-sys-color-on-surface-variant);
1515
float: right;
1616
box-sizing: border-box;
1717

1818
&.new {
1919
font-weight: 300;
2020
font-size: 0.8rem;
21-
color: var(--font-on-primary-color-main);
21+
color: var(--md-sys-color-on-primary);
2222
background-color: var(--md-sys-color-primary);
2323
border-radius: 2px;
2424
}
@@ -32,7 +32,7 @@ span.badge {
3232
}
3333

3434
.active span.badge {
35-
color: var(--font-on-primary-color-main);
35+
color: var(--md-sys-color-on-primary);
3636
}
3737

3838
// Special cases
@@ -56,7 +56,7 @@ nav ul a span.badge {
5656
}
5757

5858
.collapsible .active span.badge:not(.new) {
59-
color: var(--font-color-medium);
59+
color: var(--md-sys-color-on-surface-variant);
6060
}
6161

6262
.sidenav span.badge {

‎sass/components/_cards.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
transition: color .3s ease;
174174

175175
&:hover {
176-
background-color: var(--primary-color-hover-opaque);
176+
background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
177177
}
178178
}
179179
}

‎sass/components/_carousel.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171

7272
.indicator-item {
7373
&.active {
74-
background-color: var(--carousel-indicator-active-color);
74+
background-color: var(--md-ref-palette-primary100);
7575
}
7676

7777
display: inline-block;
@@ -80,7 +80,7 @@
8080
height: 8px;
8181
width: 8px;
8282
margin: 24px 4px;
83-
background-color: var(--carousel-indicator-color);
83+
background-color: rgba(255, 255, 255, 0.45);
8484

8585
transition: background-color .3s;
8686
border-radius: 50%;

‎sass/components/_chips.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
--font-size-icon: 18px;
44
--padding: 8px;
55

6-
color: var(--font-color-medium);
7-
background-color: var(--background-color-level-4dp);
6+
color: var(--md-sys-color-on-surface-variant);
7+
background-color: rgba(0, 0, 0, 0.09);
88

99
display: inline-flex;
1010
white-space: nowrap;
@@ -28,7 +28,7 @@
2828
&:focus {
2929
outline: none;
3030
background-color: var(--md-sys-color-primary);
31-
color: var(--font-on-primary-color-main);
31+
color: var(--md-sys-color-on-primary);
3232
}
3333
}
3434

@@ -75,7 +75,7 @@
7575
flex-wrap: wrap;
7676

7777
border: none;
78-
border-bottom: 1px solid var(--font-color-medium);
78+
border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
7979
box-shadow: none;
8080
margin: 0 0 8px 0;
8181

‎sass/components/_collapsible.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242

4343

4444
.keyboard-focused .collapsible-header:focus {
45-
background-color: var(--focus-color);
45+
background-color: rgba(0, 0, 0, 0.12);
4646
}
4747

4848
.collapsible-body {

‎sass/components/_collection.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
font-size: 18px;
3838
line-height: 42px;
3939
color: #fff;
40-
background-color: var(--slider-track-color);
40+
background-color: var(--md-sys-color-shadow-light);
4141
text-align: center;
4242
}
4343

@@ -65,10 +65,10 @@
6565

6666
&.active {
6767
background-color: var(--md-sys-color-primary);
68-
color: var(--font-on-primary-color-main);
68+
color: var(--md-sys-color-on-primary);
6969

7070
.secondary-content {
71-
color: var(--font-on-primary-color-main);
71+
color: var(--md-sys-color-on-primary);
7272
}
7373
}
7474
}
@@ -80,7 +80,7 @@
8080

8181
&:not(.active) {
8282
&:hover {
83-
background-color: var(--hover-color);
83+
background-color: rgba(0, 0, 0, 0.04);
8484
}
8585
}
8686
}
@@ -106,7 +106,7 @@
106106
// Made less specific to allow easier overriding
107107
.secondary-content {
108108
float: right;
109-
color: var(--primary-color);
109+
color: var(--md-sys-color-primary);
110110
}
111111

112112
.collapsible .collection {

‎sass/components/_datepicker.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
display: flex;
1010
flex-direction: column;
1111
padding: 0;
12-
background-color: var(--surface-color);
12+
background-color: var(--md-sys-color-surface);
1313
}
1414

1515
.datepicker-controls {
@@ -54,7 +54,7 @@
5454

5555
.month-prev > svg,
5656
.month-next > svg {
57-
fill: var(--font-color-medium);
57+
fill: var(--md-sys-color-on-surface-variant);
5858
}
5959
}
6060

@@ -69,16 +69,16 @@
6969
/* Date Display */
7070
.datepicker-date-display {
7171
flex: 1 auto;
72-
background-color: var(--primary-color);
73-
color: var(--font-on-primary-color-main);
72+
background-color: var(--md-sys-color-primary);
73+
color: var(--md-sys-color-on-primary);
7474
padding: 20px 22px;
7575
font-weight: 500;
7676

7777
.year-text {
7878
display: block;
7979
font-size: 1.5rem;
8080
line-height: 25px;
81-
color: var(--font-on-primary-color-main);
81+
color: var(--md-sys-color-on-primary);
8282
}
8383

8484
.date-text {
@@ -115,24 +115,24 @@
115115

116116
abbr {
117117
text-decoration: none;
118-
color: var(--font-color-medium);
118+
color: var(--md-sys-color-on-surface-variant);
119119
}
120120

121121
td {
122122
color: var(--md-sys-color-on-background);
123123

124124
&.is-today {
125-
color: var(--primary-color);
125+
color: var(--md-sys-color-primary);
126126
}
127127

128128
&.is-selected {
129-
background-color: var(--primary-color);
130-
color: var(--font-on-primary-color-main);
129+
background-color: var(--md-sys-color-primary);
130+
color: var(--md-sys-color-on-primary);
131131
}
132132

133133
&.is-outside-current-month,
134134
&.is-disabled {
135-
color: var(--font-color-disabled);
135+
color: var(--md-sys-color-on-surface);
136136
pointer-events: none;
137137
}
138138

@@ -153,11 +153,11 @@
153153
color: inherit;
154154

155155
&:hover {
156-
background-color: var(--primary-color-hover-opaque);
156+
background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
157157
}
158158

159159
&:focus {
160-
background-color: var(--primary-color-focus-opaque);
160+
background-color: rgba(var(--md-sys-color-primary-numeric), 0.18);
161161
}
162162
}
163163

@@ -175,7 +175,7 @@
175175
.datepicker-clear,
176176
.datepicker-today,
177177
.datepicker-done {
178-
color: var(--primary-color);
178+
color: var(--md-sys-color-primary);
179179
padding: 0 1rem;
180180
}
181181

‎sass/components/_dropdown.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858

5959
body.keyboard-focused {
6060
.dropdown-content li:focus {
61-
background-color: var(--focus-color);
61+
background-color: rgba(0, 0, 0, 0.12);
6262
}
6363
}
6464

‎sass/components/_global.scss‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ html {
66
box-sizing: inherit;
77
}
88

9+
body {
10+
background-color: var(--md-sys-color-background);
11+
}
12+
913
button,
1014
input,
1115
optgroup,
@@ -82,7 +86,7 @@ a { color: $link-color; text-decoration: none;
8286
}
8387

8488
// Blockquote
85-
blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--primary-color); }
89+
blockquote { margin: 20px 0; padding-left: 1.5rem; border-left: 5px solid var(--md-sys-color-primary); }
8690

8791
// Icon Styles
8892
i {
@@ -135,29 +139,29 @@ video.responsive-video {
135139
height: 30px;
136140

137141
a {
138-
color: var(--font-color-medium);
142+
color: var(--md-sys-color-on-surface-variant);
139143
display: inline-block;
140144
font-size: 1.2rem;
141145
padding: 0 10px;
142146
line-height: 30px;
143147
}
144148

145149
&:hover:not(.disabled) {
146-
background-color: var(--primary-color-hover-opaque);
150+
background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
147151
}
148152

149153
&.active a {
150-
color: var(--font-on-primary-color-main);
154+
color: var(--md-sys-color-on-primary);
151155
}
152156

153157
&.active,
154158
&.active:hover {
155-
background-color: var(--primary-color);
159+
background-color: var(--md-sys-color-primary);
156160
}
157161

158162
&.disabled a {
159163
cursor: default;
160-
color: var(--font-color-disabled);
164+
color: var(--md-sys-color-on-surface);
161165
}
162166

163167
i {
@@ -223,7 +227,7 @@ video.responsive-video {
223227
}
224228

225229
&:last-child {
226-
color: var(--font-on-primary-color-main);
230+
color: var(--md-sys-color-on-primary);
227231
}
228232
}
229233

@@ -335,12 +339,12 @@ ul.staggered-list li { opacity: 0; }
335339
.page-footer {
336340
margin-top: 5rem;
337341
padding-top: 5rem;
338-
color: var(--font-on-primary-color-main);
342+
color: var(--md-sys-color-on-primary);
339343
//background-color: var(--md-sys-color-primary);
340344
border-top: 1px dashed var(--md-sys-color-outline-variant);
341345

342346
a {
343-
color: var(--font-on-primary-color-main);
347+
color: var(--md-sys-color-on-primary);
344348
}
345349

346350
.footer-copyright,
@@ -351,8 +355,8 @@ ul.staggered-list li { opacity: 0; }
351355
align-items: center;
352356
justify-content: space-between;
353357
padding: 10px 0px;
354-
color: var(--font-on-primary-color-dark-medium);
355-
background-color: var(--primary-color-dark);
358+
color: var(--md-sys-color-on-surface-variant-dark);
359+
background-color: var(--md-sys-color-primary-dark);
356360
}
357361
}
358362
.page-footer ul {
@@ -376,20 +380,20 @@ table {
376380
border-bottom: none;
377381
}
378382
tbody > tr:nth-child(odd) {
379-
background-color: var(--background-color-slight-emphasis);
383+
background-color: rgba(0, 0, 0, 0.08);
380384
}
381385
}
382386

383387
&.highlight > tbody > tr {
384388
transition: background-color .25s ease;
385389

386390
&:hover {
387-
background-color: var(--hover-color);
391+
background-color: rgba(0, 0, 0, 0.04);
388392
}
389393
}
390394

391395
thead {
392-
color: var(--font-color-medium);
396+
color: var(--md-sys-color-on-surface-variant);
393397
}
394398

395399
&.centered {

‎sass/components/_grid.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,13 +41,21 @@
4141
}
4242

4343
.row {
44-
//--grid-gap: 1rem;
44+
--gap-size: 1.5rem; // default
45+
4546
display: grid;
46-
grid-template-columns: repeat(12, 1fr); //repeat(12, calc(8.33% - var(--grid-gap) + (var(--grid-gap) / 12)));
47-
//gap: var(--grid-gap);
47+
grid-template-columns: repeat(12, 1fr);
48+
gap: var(--gap-size);
4849

49-
//--- S
50+
//--- Gap
51+
.g-0 { gap: 0; }
52+
.g-1 { gap: calc(0.25 * var(--gap-size)); }
53+
.g-2 { gap: calc(0.5 * var(--gap-size)); }
54+
.g-3 { gap: calc(1 * var(--gap-size)); }
55+
.g-4 { gap: calc(1.5 * var(--gap-size)); }
56+
.g-5 { gap: calc(3 * var(--gap-size)); }
5057

58+
//--- S
5159
.s1 { grid-column: auto / span 1; }
5260
.s2 { grid-column: auto / span 2; }
5361
.s3 { grid-column: auto / span 3; }

0 commit comments

Comments
 (0)