Skip to content

Commit d39d102

Browse files
pmbrownpmbrown
committed
StyleMods v1.1.7
See release notes.
1 parent 34e0158 commit d39d102

File tree

14 files changed

+261
-58
lines changed

14 files changed

+261
-58
lines changed

‎scss/color/all-colors.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ $color-tokens: where(html) !default;
2222
@include surface-variables;
2323
@include gray-variables;
2424
@include blue-variables;
25-
@include blue-variables;
2625
@include red-variables;
2726
@include green-variables;
2827
@include orange-variables;

‎scss/color/blue.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $blue-7: color-mix(in srgb, var(--blue) 80%, black) !default;
1313
$blue-8: color-mix(in srgb, var(--blue) 70%, black) !default;
1414
$blue-9: color-mix(in srgb, var(--blue) 60%, black) !default;
1515
$blue-10: color-mix(in srgb, var(--blue) 50%, black) !default;
16-
$blue-11: color-mix(in srgb, var(--blue) 40%, black) !default;
16+
$blue-11: color-mix(in srgb, var(--blue) 44%, black) !default;
1717

1818
// Utility colors
1919
$blue-bg-text: #fff !default;

‎scss/color/green.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $green-7: color-mix(in srgb, var(--green) 80%, black) !default;
1313
$green-8: color-mix(in srgb, var(--green) 70%, black) !default;
1414
$green-9: color-mix(in srgb, var(--green) 60%, black) !default;
1515
$green-10: color-mix(in srgb, var(--green) 50%, black) !default;
16-
$green-11: color-mix(in srgb, var(--green) 40%, black) !default;
16+
$green-11: color-mix(in srgb, var(--green) 44%, black) !default;
1717

1818
// Utility colors
1919
$green-bg-text: #fff !default;

‎scss/color/purple.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ $purple-3: color-mix(in srgb, var(--purple) 60%, white) !default;
99
$purple-4: color-mix(in srgb, var(--purple) 70%, white) !default;
1010
$purple-5: color-mix(in srgb, var(--purple) 80%, white) !default;
1111
$purple-6: var(--purple) !default;
12-
$purple-7: color-mix(in srgb, var(--purple) 75%, black) !default;
13-
$purple-8: color-mix(in srgb, var(--purple) 65%, black) !default;
14-
$purple-9: color-mix(in srgb, var(--purple) 55%, black) !default;
15-
$purple-10: color-mix(in srgb, var(--purple) 45%, black) !default;
16-
$purple-11: color-mix(in srgb, var(--purple) 35%, black) !default;
12+
$purple-7: color-mix(in srgb, var(--purple) 73%, black) !default;
13+
$purple-8: color-mix(in srgb, var(--purple) 64%, black) !default;
14+
$purple-9: color-mix(in srgb, var(--purple) 56%, black) !default;
15+
$purple-10: color-mix(in srgb, var(--purple) 46%, black) !default;
16+
$purple-11: color-mix(in srgb, var(--purple) 40%, black) !default;
1717

1818
// Utility colors
1919
$purple-bg-text: #fff !default;

‎scss/color/red.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $red-7: color-mix(in srgb, var(--red) 80%, black) !default;
1313
$red-8: color-mix(in srgb, var(--red) 70%, black) !default;
1414
$red-9: color-mix(in srgb, var(--red) 60%, black) !default;
1515
$red-10: color-mix(in srgb, var(--red) 50%, black) !default;
16-
$red-11: color-mix(in srgb, var(--red) 40%, black) !default;
16+
$red-11: color-mix(in srgb, var(--red) 44%, black) !default;
1717

1818
// Utility colors
1919
$red-bg-text: #fff !default;

‎scss/color/theme.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ $theme-link: light-dark($link-light, $link-dark) !default;
2222
$theme-link-visited: light-dark($link-visited-light, $link-visited-dark) !default;
2323
$theme-link-hover: light-dark($link-hover-light, $link-hover-dark) !default;
2424

25-
// Theme variables
26-
2725
// Theme surfaces
2826
$theme-surface: var(--surface) !default;
2927
$theme-surface-1: var(--surf-1) !default;

‎scss/utilities/badges.scss renamed to ‎scss/components/badges.scss

File renamed without changes.

‎scss/utilities/buttons.scss renamed to ‎scss/components/buttons.scss

File renamed without changes.

‎scss/components/index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
// ----------------------------------------------------------
44
@forward "accordions";
55
@forward "alerts";
6+
@forward "badges";
7+
@forward "buttons";
68
@forward "cards";
79
@forward "dialogs";
810
@forward "icons";

‎scss/layout/scrollbar.scss

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
// ------------------------------------------------------------
22
// Scrollbar
33
// ------------------------------------------------------------
4+
$scrollbar-thumb-color: var(--scroll-thumb, initial) !default;
5+
$scrollbar-track-color: var(--scroll-track, initial) !default;
6+
7+
$scrollbar-color: (
8+
"scroll-color": $scrollbar-thumb-color $scrollbar-track-color,
9+
"scroll-color-initial": initial,
10+
) !default;
11+
412
$scrollbar-gutter: (
513
"stable": stable,
614
"stable-edges": stable both-edges,
@@ -14,6 +22,14 @@ $scrollbar-width: (
1422
"initial": initial,
1523
) !default;
1624

25+
@mixin scrollbar-color-css {
26+
@each $name, $value in $scrollbar-color {
27+
.#{$name} {
28+
scrollbar-color: #{$value};
29+
}
30+
}
31+
}
32+
1733
@mixin scrollbar-gutter-css {
1834
@each $name, $value in $scrollbar-gutter {
1935
.scroll-gutter-#{$name} {
@@ -31,6 +47,14 @@ $scrollbar-width: (
3147
}
3248

3349
// Breakpoint XXL
50+
@mixin scrollbar-color-xxl-css {
51+
@each $name, $value in $scrollbar-color {
52+
.#{$name} {
53+
scrollbar-color: #{$value};
54+
}
55+
}
56+
}
57+
3458
@mixin scrollbar-gutter-xxl-css {
3559
@each $name, $value in $scrollbar-gutter {
3660
.scroll-gutter-#{$name}-xxl {
@@ -48,6 +72,14 @@ $scrollbar-width: (
4872
}
4973

5074
// Breakpoint XL
75+
@mixin scrollbar-color-xl-css {
76+
@each $name, $value in $scrollbar-color {
77+
.#{$name} {
78+
scrollbar-color: #{$value};
79+
}
80+
}
81+
}
82+
5183
@mixin scrollbar-gutter-xl-css {
5284
@each $name, $value in $scrollbar-gutter {
5385
.scroll-gutter-#{$name}-xl {
@@ -65,6 +97,14 @@ $scrollbar-width: (
6597
}
6698

6799
// Breakpoint LG
100+
@mixin scrollbar-color-lg-css {
101+
@each $name, $value in $scrollbar-color {
102+
.#{$name} {
103+
scrollbar-color: #{$value};
104+
}
105+
}
106+
}
107+
68108
@mixin scrollbar-gutter-lg-css {
69109
@each $name, $value in $scrollbar-gutter {
70110
.scroll-gutter-#{$name}-lg {
@@ -82,6 +122,14 @@ $scrollbar-width: (
82122
}
83123

84124
// Breakpoint MD
125+
@mixin scrollbar-color-md-css {
126+
@each $name, $value in $scrollbar-color {
127+
.#{$name} {
128+
scrollbar-color: #{$value};
129+
}
130+
}
131+
}
132+
85133
@mixin scrollbar-gutter-md-css {
86134
@each $name, $value in $scrollbar-gutter {
87135
.scroll-gutter-#{$name}-md {
@@ -99,6 +147,14 @@ $scrollbar-width: (
99147
}
100148

101149
// Breakpoint SM
150+
@mixin scrollbar-color-sm-css {
151+
@each $name, $value in $scrollbar-color {
152+
.#{$name} {
153+
scrollbar-color: #{$value};
154+
}
155+
}
156+
}
157+
102158
@mixin scrollbar-gutter-sm-css {
103159
@each $name, $value in $scrollbar-gutter {
104160
.scroll-gutter-#{$name}-sm {
@@ -116,6 +172,14 @@ $scrollbar-width: (
116172
}
117173

118174
// Breakpoint XS
175+
@mixin scrollbar-color-xs-css {
176+
@each $name, $value in $scrollbar-color {
177+
.#{$name} {
178+
scrollbar-color: #{$value};
179+
}
180+
}
181+
}
182+
119183
@mixin scrollbar-gutter-xs-css {
120184
@each $name, $value in $scrollbar-gutter {
121185
.scroll-gutter-#{$name}-xs {
@@ -133,6 +197,14 @@ $scrollbar-width: (
133197
}
134198

135199
// Breakpoint XXS
200+
@mixin scrollbar-color-xxs-css {
201+
@each $name, $value in $scrollbar-color {
202+
.#{$name} {
203+
scrollbar-color: #{$value};
204+
}
205+
}
206+
}
207+
136208
@mixin scrollbar-gutter-xxs-css {
137209
@each $name, $value in $scrollbar-gutter {
138210
.scroll-gutter-#{$name}-xxs {
@@ -148,3 +220,52 @@ $scrollbar-width: (
148220
}
149221
}
150222
}
223+
224+
// Grouped mixins
225+
@mixin scrollbars-css {
226+
@include scrollbar-gutter-css;
227+
@include scrollbar-width-css;
228+
@include scrollbar-color-css;
229+
}
230+
231+
@mixin scrollbars-xxl-css {
232+
@include scrollbar-gutter-xxl-css;
233+
@include scrollbar-width-xxl-css;
234+
@include scrollbar-color-xxl-css;
235+
}
236+
237+
@mixin scrollbars-xl-css {
238+
@include scrollbar-gutter-xl-css;
239+
@include scrollbar-width-xl-css;
240+
@include scrollbar-color-xl-css;
241+
}
242+
243+
@mixin scrollbars-lg-css {
244+
@include scrollbar-gutter-lg-css;
245+
@include scrollbar-width-lg-css;
246+
@include scrollbar-color-lg-css;
247+
}
248+
249+
@mixin scrollbars-md-css {
250+
@include scrollbar-gutter-md-css;
251+
@include scrollbar-width-md-css;
252+
@include scrollbar-color-md-css;
253+
}
254+
255+
@mixin scrollbars-sm-css {
256+
@include scrollbar-gutter-sm-css;
257+
@include scrollbar-width-sm-css;
258+
@include scrollbar-color-sm-css;
259+
}
260+
261+
@mixin scrollbars-xs-css {
262+
@include scrollbar-gutter-xs-css;
263+
@include scrollbar-width-xs-css;
264+
@include scrollbar-color-xs-css;
265+
}
266+
267+
@mixin scrollbars-xxs-css {
268+
@include scrollbar-gutter-xxs-css;
269+
@include scrollbar-width-xxs-css;
270+
@include scrollbar-color-xxs-css;
271+
}

0 commit comments

Comments
 (0)