Skip to content

Commit 152ce59

Browse files
didimmovasimeonoff
didimmova
and
simeonoff
authored
refactor(themes): use dynamic-shade function for themes (#475)
* refactor(themes): use dynamic-shade function for themes * chore(slider): fix hsl function syntax error --------- Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent c40c09f commit 152ce59

29 files changed

+176
-176
lines changed

‎sass/themes/components/button-group/_button-group-theme.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,15 @@
127127

128128
// background colors
129129
@if not($item-hover-background) and $item-background {
130-
$item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
130+
$item-hover-background: dynamic-shade(var(--item-background));
131131
}
132132

133133
@if not($item-selected-background) and $item-background {
134-
$item-selected-background: hsl(from var(--item-background) h s calc(l * 0.7));
134+
$item-selected-background: dynamic-shade(var(--item-background), $offset: 10);
135135
}
136136

137137
@if not($item-selected-hover-background) and $item-selected-background {
138-
$item-selected-hover-background: hsl(from var(--item-selected-background) h s calc(l * 1.1));
138+
$item-selected-hover-background: dynamic-shade(var(--item-selected-background));
139139
}
140140

141141
@if not($item-selected-focus-background) and $item-selected-background {
@@ -150,8 +150,8 @@
150150
$item-focused-background: var(--item-hover-background);
151151
}
152152

153-
@if not($item-focused-hover-background) and $item-hover-background {
154-
$item-focused-hover-background: hsl(from var(--item-focused-background) h s calc(l * 0.9));
153+
@if not($item-focused-hover-background) and $item-focused-background {
154+
$item-focused-hover-background: dynamic-shade(var(--item-focused-background));
155155
}
156156

157157
@if not($disabled-background-color) and $item-background {
@@ -164,7 +164,7 @@
164164

165165
// border colors
166166
@if not($item-border-color) and $item-background {
167-
$item-border-color: hsl(from var(--item-background) h s calc(l * 0.8));
167+
$item-border-color: dynamic-shade(var(--item-background), $offset: 7);
168168
}
169169

170170
@if not($item-hover-border-color) and $item-border-color {

‎sass/themes/components/button/_contained-button-theme.scss‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -154,24 +154,8 @@
154154
$icon-color: adaptive-contrast(var(--background));
155155
}
156156

157-
@if $variant == 'indigo' {
158-
@if not($hover-background) and $background {
159-
$hover-background: hsl(from var(--background) h s calc(l * 1.08));
160-
}
161-
} @else {
162-
@if not($hover-background) and $background {
163-
$hover-background: hsl(from var(--background) h s calc(l * 1.05));
164-
}
165-
}
166-
167-
@if $variant == 'indigo' {
168-
@if not($focus-background) and $background {
169-
$focus-background: var(--background);
170-
}
171-
} @else {
172-
@if not($focus-background) and $background {
173-
$focus-background: hsl(from var(--background) h s calc(l * 1.1));
174-
}
157+
@if not($hover-background) and $background {
158+
$hover-background: dynamic-shade(var(--background));
175159
}
176160

177161
@if not($hover-foreground) and $hover-background {
@@ -182,10 +166,6 @@
182166
$icon-color-hover: adaptive-contrast(var(--hover-background));
183167
}
184168

185-
@if not($focus-foreground) and $focus-background {
186-
$focus-foreground: adaptive-contrast(var(--focus-background));
187-
}
188-
189169
@if not($focus-hover-background) and $hover-background {
190170
$focus-hover-background: var(--hover-background);
191171
}
@@ -194,8 +174,28 @@
194174
$focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
195175
}
196176

197-
@if not($focus-visible-background) and $focus-background {
198-
$focus-visible-background: var(--focus-background);
177+
@if $variant != 'indigo' {
178+
@if not($focus-background) and $background {
179+
$focus-background: dynamic-shade(var(--background), $offset: 10);
180+
}
181+
} @else {
182+
@if not($focus-background) and $focus-hover-background {
183+
$focus-background: var(--focus-hover-background);
184+
}
185+
}
186+
187+
@if $variant == 'fluent' or $variant == 'indigo' {
188+
@if not($focus-visible-background) and $background {
189+
$focus-visible-background: var(--background);
190+
}
191+
} @else {
192+
@if not($focus-visible-background) and $focus-background {
193+
$focus-visible-background: var(--focus-background);
194+
}
195+
}
196+
197+
@if not($focus-foreground) and $focus-background {
198+
$focus-foreground: adaptive-contrast(var(--focus-background));
199199
}
200200

201201
@if not($focus-visible-foreground) and $focus-visible-background {
@@ -210,7 +210,7 @@
210210

211211
@if $variant == 'fluent' or $variant == 'bootstrap' {
212212
@if not($active-background) and $background {
213-
$active-background: hsl(from var(--background) h s calc(l * 0.9));
213+
$active-background: dynamic-shade(var(--background), $offset: 10);
214214
}
215215
} @else if $variant == 'material' {
216216
@if not($active-background) and $focus-background {

‎sass/themes/components/button/_fab-button-theme.scss‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -130,50 +130,50 @@
130130
$icon-color: adaptive-contrast(var(--background));
131131
}
132132

133-
@if $variant == 'indigo' {
134-
@if not($hover-background) and $background {
135-
$hover-background: hsl(from var(--background) h s calc(l * 1.08));
136-
}
137-
} @else {
138-
@if not($hover-background) and $background {
139-
$hover-background: hsl(from var(--background) h s calc(l * 1.05));
140-
}
133+
@if not($hover-background) and $background {
134+
$hover-background: dynamic-shade(var(--background));
135+
}
136+
137+
@if not($hover-foreground) and $hover-background {
138+
$hover-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--hover-background)));
139+
}
140+
141+
@if not($icon-color-hover) and $hover-background {
142+
$icon-color-hover: if($icon-color, var(--icon-color), adaptive-contrast(var(--hover-background)));
143+
}
144+
145+
@if not($focus-hover-background) and $hover-background {
146+
$focus-hover-background: var(--hover-background);
141147
}
142148

143149
@if $variant == 'indigo' {
144-
@if not($focus-background) and $background {
145-
$focus-background: var(--background);
150+
@if not($focus-background) and $focus-hover-background {
151+
$focus-background: var(--focus-hover-background);
146152
}
147153
} @else {
148154
@if not($focus-background) and $background {
149-
$focus-background: hsl(from var(--background) h s calc(l * 1.1));
155+
$focus-background: dynamic-shade(var(--background), $offset: 10);
150156
}
151157
}
152158

153-
@if not($hover-foreground) and $hover-background {
154-
$hover-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--hover-background)));
155-
}
156-
157-
@if not($icon-color-hover) and $hover-background {
158-
$icon-color-hover: if($icon-color, var(--icon-color), adaptive-contrast(var(--hover-background)));
159+
@if $variant == 'fluent' {
160+
@if not($focus-visible-background) and $background {
161+
$focus-visible-background: var(--background);
162+
}
163+
} @else {
164+
@if not($focus-visible-background) and $focus-background {
165+
$focus-visible-background: var(--focus-background);
166+
}
159167
}
160168

161169
@if not($focus-foreground) and $focus-background {
162170
$focus-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--focus-background)));
163171
}
164172

165-
@if not($focus-hover-background) and $hover-background {
166-
$focus-hover-background: var(--hover-background);
167-
}
168-
169173
@if not($focus-hover-foreground) and $focus-hover-background {
170174
$focus-hover-foreground: if($foreground, var(--foreground), adaptive-contrast(var(--focus-hover-background)));
171175
}
172176

173-
@if not($focus-visible-background) and $focus-background {
174-
$focus-visible-background: var(--focus-background);
175-
}
176-
177177
@if not($focus-visible-foreground) and $focus-visible-background {
178178
$focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
179179
}
@@ -186,7 +186,7 @@
186186

187187
@if $variant == 'fluent' or $variant == 'bootstrap' {
188188
@if not($active-background) and $background {
189-
$active-background: hsl(from var(--background) h s calc(l * 0.9));
189+
$active-background: dynamic-shade(var(--background), $offset: 10);
190190
}
191191
} @else if $variant == 'material' {
192192
@if not($active-background) and $focus-background {

‎sass/themes/components/button/_flat-button-theme.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@
231231

232232
@if $variant == 'bootstrap' or $variant == 'indigo' {
233233
@if not($hover-foreground) and $foreground {
234-
$hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
234+
$hover-foreground: dynamic-shade(var(--foreground));
235235
}
236236

237237
@if not($icon-color-hover) and $hover-foreground {
@@ -240,24 +240,24 @@
240240

241241
@if $variant == 'bootstrap' {
242242
@if not($focus-foreground) and $foreground {
243-
$focus-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
243+
$focus-foreground: dynamic-shade(var(--foreground), $offset: 10);
244244
}
245245
} @else {
246246
@if not($focus-foreground) and $foreground {
247-
$focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
247+
$focus-foreground: dynamic-shade(var(--foreground));
248248
}
249249
}
250250

251251
@if not($focus-hover-foreground) and $foreground {
252-
$focus-hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
252+
$focus-hover-foreground: dynamic-shade(var(--foreground));
253253
}
254254

255255
@if not($focus-visible-foreground) and $foreground {
256256
$focus-visible-foreground: var(--foreground);
257257
}
258258

259259
@if not($disabled-foreground) and $foreground {
260-
$disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
260+
$disabled-foreground: hsla(from (var(--foreground) h s l / 0.5));
261261
}
262262

263263
@if not($disabled-icon-color) and $disabled-foreground {
@@ -266,15 +266,15 @@
266266

267267
@if $variant == 'bootstrap' {
268268
@if not($active-foreground) and $foreground {
269-
$active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
269+
$active-foreground: dynamic-shade(var(--foreground), $offset: 10);
270270
}
271271

272272
@if not($shadow-color) and $focus-visible-foreground {
273273
$shadow-color: hsla(from var(--focus-visible-foreground) h s l / 0.5);
274274
}
275275
} @else {
276276
@if not($active-foreground) and $foreground {
277-
$active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
277+
$active-foreground: dynamic-shade(var(--foreground));
278278
}
279279

280280
@if not($shadow-color) and $focus-visible-foreground {

‎sass/themes/components/button/_outlined-button-theme.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -225,23 +225,23 @@
225225
}
226226

227227
@if not($hover-foreground) and $foreground {
228-
$hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
228+
$hover-foreground: dynamic-shade(var(--foreground));
229229
}
230230

231231
@if not($focus-foreground) and $foreground {
232-
$focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
232+
$focus-foreground: dynamic-shade(var(--foreground));
233233
}
234234

235235
@if not($focus-hover-foreground) and $foreground {
236-
$focus-hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
236+
$focus-hover-foreground: dynamic-shade(var(--foreground));
237237
}
238238

239239
@if not($focus-visible-foreground) and $foreground {
240240
$focus-visible-foreground: var(--foreground);
241241
}
242242

243243
@if not($active-foreground) and $foreground {
244-
$active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
244+
$active-foreground: dynamic-shade(var(--foreground));
245245
}
246246

247247
@if not($shadow-color) and $focus-visible-foreground {
@@ -259,15 +259,15 @@
259259
}
260260

261261
@if not($focus-background) and $foreground {
262-
$focus-background: hsl(from var(--foreground) h s calc(l * 0.8));
262+
$focus-background: dynamic-shade(var(--foreground), $offset: 10);
263263
}
264264

265265
@if not($focus-foreground) and $focus-background {
266266
$focus-foreground: adaptive-contrast(var(--focus-background));
267267
}
268268

269269
@if not($focus-hover-background) and $hover-background {
270-
$focus-hover-background: hsl(from var(--hover-background) h s calc(l * 0.9));
270+
$focus-hover-background: dynamic-shade(var(--hover-background));
271271
}
272272

273273
@if not($focus-hover-foreground) and $focus-hover-background {
@@ -283,15 +283,15 @@
283283
}
284284

285285
@if not($active-background) and $foreground {
286-
$active-background: hsl(from var(--foreground) h s calc(l * 0.8));
286+
$active-background: dynamic-shade(var(--foreground), $offset: 10);
287287
}
288288

289289
@if not($active-foreground) and $active-background {
290290
$active-foreground: adaptive-contrast(var(--active-background));
291291
}
292292

293293
@if not($disabled-foreground) and $foreground {
294-
$disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
294+
$disabled-foreground: hsla(from (var(--foreground) h s l / 0.5));
295295
}
296296

297297
@if not($disabled-icon-color) and $disabled-foreground {

0 commit comments

Comments
 (0)