Skip to content

Commit 9a9b3a3

Browse files
simeonoffsimeonoff
authored
refactor(color): update color function to work with named colors (#367)
* refactor(color): update color function to work with named colors The color function will not work with named colors for keys in a palette. This PR fixes that so an expression like `color($palette, gray, 200)` can still work with palettes where the `gray` variants are keyed to a string. * fix(var-get): return properly formatted error message * refactor(palettes): always interpolate keys to string type * refactor(colors): add quotes to contrast and raw colors * refactor(palettes): refactor indigo handmate palettes to use strings as keys
1 parent 18f8780 commit 9a9b3a3

File tree

9 files changed

+289
-263
lines changed

9 files changed

+289
-263
lines changed

‎sass/color/_functions.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ $_enhanced-accessibility: false;
104104
$result,
105105
(
106106
$variant: map.get($shade, 'hsl'),
107-
#{$variant}-contrast:
107+
'#{$variant}-contrast':
108108
text-contrast(
109109
$background: map.get($shade, 'raw'),
110110
$contrast: 'AA',
111111
),
112-
#{$variant}-raw: map.get($shade, 'raw'),
112+
'#{$variant}-raw': map.get($shade, 'raw'),
113113
)
114114
);
115115
}
@@ -137,7 +137,7 @@ $_enhanced-accessibility: false;
137137
$color: if($color, $color, if($lum > 0.5, #000, #fff));
138138
$lmap: map.get(multipliers.$grayscale, 'l');
139139
$len: list.length($lmap);
140-
$i: list.index(map.keys($lmap), $shade);
140+
$i: list.index(map.keys($lmap), #{$shade});
141141
$l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
142142
$raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
143143
$hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
@@ -148,8 +148,8 @@ $_enhanced-accessibility: false;
148148

149149
@return (raw: $raw, hsl: $hsl);
150150
} @else {
151-
$sx: map.get(multipliers.$color, 's', $shade);
152-
$lx: map.get(multipliers.$color, 'l', $shade);
151+
$sx: map.get(multipliers.$color, 's', #{$shade});
152+
$lx: map.get(multipliers.$color, 'l', #{$shade});
153153
$raw: hsl(
154154
to-fixed(color.hue($color)),
155155
to-fixed(color.saturation($color) * $sx),
@@ -185,19 +185,19 @@ $_enhanced-accessibility: false;
185185
/// .my-component-2 {
186186
/// background: color($my-palette, 'primary', 200, .5);
187187
/// }
188-
@function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
188+
@function color($palette: null, $color: primary, $variant: 500, $opacity: null) {
189189
$s: #{var(--ig-#{$color}-#{$variant})};
190190
$contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
191191
$_alpha: if($opacity, $opacity, 1);
192192
$_hsl-alpha: hsl(from $s h s l / $_alpha);
193193
$_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
194194

195195
@if $palette {
196-
$s: map.get($palette, $color);
197-
$base: map.get($s, $variant);
196+
$s: map.get($palette, #{$color});
197+
$base: map.get($s, #{$variant});
198198
$raw: if($contrast, map.get($s, #{$variant}-contrast), map.get($s, #{$variant}-raw));
199199

200-
@return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
200+
@return if($raw and $variant != '500', rgba($raw, $_alpha), rgba($base, $_alpha));
201201
}
202202

203203
@return if($contrast, $_mix-alpha, $_hsl-alpha);

‎sass/color/_multipliers.scss‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
11
$color: (
22
s: (
3-
50: 1.23,
4-
100: 0.8,
5-
200: 0.64,
6-
300: 0.73,
7-
400: 0.875,
8-
500: 1,
9-
600: 1.26,
10-
700: 1.26,
11-
800: 1.26,
12-
900: 1.26,
3+
'50': 1.23,
4+
'100': 0.8,
5+
'200': 0.64,
6+
'300': 0.73,
7+
'400': 0.875,
8+
'500': 1,
9+
'600': 1.26,
10+
'700': 1.26,
11+
'800': 1.26,
12+
'900': 1.26,
1313
'A100': 1.23,
1414
'A200': 1.22,
1515
'A400': 1.23,
1616
'A700': 1.23,
1717
),
1818
l: (
19-
50: 1.78,
20-
100: 1.66,
21-
200: 1.43,
22-
300: 1.19,
23-
400: 1.08,
24-
500: 1,
25-
600: 0.89,
26-
700: 0.81,
27-
800: 0.73,
28-
900: 0.64,
19+
'50': 1.78,
20+
'100': 1.66,
21+
'200': 1.43,
22+
'300': 1.19,
23+
'400': 1.08,
24+
'500': 1,
25+
'600': 0.89,
26+
'700': 0.81,
27+
'800': 0.73,
28+
'900': 0.64,
2929
'A100': 1.34,
3030
'A200': 1.16,
3131
'A400': 0.91,
@@ -34,15 +34,15 @@ $color: (
3434
);
3535
$grayscale: (
3636
l: (
37-
50: 13%,
38-
100: 26%,
39-
200: 38%,
40-
300: 54%,
41-
400: 62%,
42-
500: 74%,
43-
600: 88%,
44-
700: 93%,
45-
800: 96%,
46-
900: 98%,
37+
'50': 13%,
38+
'100': 26%,
39+
'200': 38%,
40+
'300': 54%,
41+
'400': 62%,
42+
'500': 74%,
43+
'600': 88%,
44+
'700': 93%,
45+
'800': 96%,
46+
'900': 98%,
4747
),
4848
);

‎sass/color/_types.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
/// A list consisting of all generated gray shades
1010
/// @type Map
1111
/// @access private
12-
$IGrayShades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
12+
$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');
1313

1414
/// A list consisting of all generated shades for palette colors
1515
/// @type Map

‎sass/color/presets/dark/_indigo.scss‎

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,25 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
2323
/// @prop {Color} surface [#1e1f24] - The surface color.
2424
$palette: (
2525
'primary': (
26-
50: #c5cdff,
26+
'50': #c5cdff,
2727
'50-contrast': black,
28-
100: #a3aff6,
28+
'100': #a3aff6,
2929
'100-contrast': black,
30-
200: #8293f8,
30+
'200': #8293f8,
3131
'200-contrast': black,
32-
300: #7385f4,
32+
'300': #7385f4,
3333
'300-contrast': black,
34-
400: #5468d9,
34+
'400': #5468d9,
3535
'400-contrast': black,
36-
500: #3f51b5,
36+
'500': #3f51b5,
3737
'500-contrast': white,
38-
600: #39479c,
38+
'600': #39479c,
3939
'600-contrast': white,
40-
700: #333d83,
40+
'700': #333d83,
4141
'700-contrast': white,
42-
800: #2e3172,
42+
'800': #2e3172,
4343
'800-contrast': white,
44-
900: #262851,
44+
'900': #262851,
4545
'900-contrast': white,
4646
'A100': #39479c,
4747
'A100-contrast': white,
@@ -53,25 +53,25 @@ $palette: (
5353
'A700-contrast': white,
5454
),
5555
'secondary': (
56-
50: #c5cdff,
56+
'50': #c5cdff,
5757
'50-contrast': black,
58-
100: #a3aff6,
58+
'100': #a3aff6,
5959
'100-contrast': black,
60-
200: #8293f8,
60+
'200': #8293f8,
6161
'200-contrast': black,
62-
300: #7385f4,
62+
'300': #7385f4,
6363
'300-contrast': black,
64-
400: #5468d9,
64+
'400': #5468d9,
6565
'400-contrast': black,
66-
500: #3f51b5,
66+
'500': #3f51b5,
6767
'500-contrast': white,
68-
600: #39479c,
68+
'600': #39479c,
6969
'600-contrast': white,
70-
700: #333d83,
70+
'700': #333d83,
7171
'700-contrast': white,
72-
800: #2e3172,
72+
'800': #2e3172,
7373
'800-contrast': white,
74-
900: #262851,
74+
'900': #262851,
7575
'900-contrast': white,
7676
'A100': #39479c,
7777
'A100-contrast': white,
@@ -83,47 +83,47 @@ $palette: (
8383
'A700-contrast': white,
8484
),
8585
'gray': (
86-
50: #24252c,
86+
'50': #24252c,
8787
'50-contrast': white,
88-
100: #3b3d47,
88+
'100': #3b3d47,
8989
'100-contrast': white,
90-
200: #545762,
90+
'200': #545762,
9191
'200-contrast': white,
92-
300: #6c707a,
92+
'300': #6c707a,
9393
'300-contrast': white,
94-
400: #9a9da2,
94+
'400': #9a9da2,
9595
'400-contrast': black,
96-
500: #c3c4c7,
96+
'500': #c3c4c7,
9797
'500-contrast': black,
98-
600: #d6d8dc,
98+
'600': #d6d8dc,
9999
'600-contrast': black,
100-
700: #ebedf2,
100+
'700': #ebedf2,
101101
'700-contrast': black,
102-
800: #f8f8fa,
102+
'800': #f8f8fa,
103103
'800-contrast': black,
104-
900: #fcfcfd,
104+
'900': #fcfcfd,
105105
'900-contrast': black,
106106
),
107107
'info': (
108-
50: #f1c3ff,
108+
'50': #f1c3ff,
109109
'50-contrast': black,
110-
100: #e89eff,
110+
'100': #e89eff,
111111
'100-contrast': black,
112-
200: #dd71ff,
112+
'200': #dd71ff,
113113
'200-contrast': black,
114-
300: #da64ff,
114+
'300': #da64ff,
115115
'300-contrast': black,
116-
400: #bc34d3,
116+
'400': #bc34d3,
117117
'400-contrast': white,
118-
500: #9c27b0,
118+
'500': #9c27b0,
119119
'500-contrast': white,
120-
600: #8c16a0,
120+
'600': #8c16a0,
121121
'600-contrast': white,
122-
700: #7f1192,
122+
'700': #7f1192,
123123
'700-contrast': white,
124-
800: #6f0a80,
124+
'800': #6f0a80,
125125
'800-contrast': white,
126-
900: #5c056b,
126+
'900': #5c056b,
127127
'900-contrast': white,
128128
'A100': #8c16a0,
129129
'A100-contrast': white,
@@ -135,25 +135,25 @@ $palette: (
135135
'A700-contrast': white,
136136
),
137137
'success': (
138-
50: #edf3e7,
138+
'50': #edf3e7,
139139
'50-contrast': black,
140-
100: #d2e2c3,
140+
'100': #d2e2c3,
141141
'100-contrast': black,
142-
200: #b4cf9c,
142+
'200': #b4cf9c,
143143
'200-contrast': black,
144-
300: #95bc74,
144+
'300': #95bc74,
145145
'300-contrast': black,
146-
400: #7fad56,
146+
'400': #7fad56,
147147
'400-contrast': black,
148-
500: #689f38,
148+
'500': #689f38,
149149
'500-contrast': black,
150-
600: #5a912a,
150+
'600': #5a912a,
151151
'600-contrast': black,
152-
700: #4e8222,
152+
'700': #4e8222,
153153
'700-contrast': white,
154-
800: #3d7012,
154+
'800': #3d7012,
155155
'800-contrast': white,
156-
900: #316109,
156+
'900': #316109,
157157
'900-contrast': white,
158158
'A100': #5a912a,
159159
'A100-contrast': black,
@@ -165,25 +165,25 @@ $palette: (
165165
'A700-contrast': white,
166166
),
167167
'warn': (
168-
50: #fed7b7,
168+
'50': #fed7b7,
169169
'50-contrast': black,
170-
100: #ffc696,
170+
'100': #ffc696,
171171
'100-contrast': black,
172-
200: #ffad67,
172+
'200': #ffad67,
173173
'200-contrast': black,
174-
300: #fb8f32,
174+
'300': #fb8f32,
175175
'300-contrast': black,
176-
400: #fa7b0e,
176+
'400': #fa7b0e,
177177
'400-contrast': black,
178-
500: #f56b1d,
178+
'500': #f56b1d,
179179
'500-contrast': black,
180-
600: #f05a2b,
180+
'600': #f05a2b,
181181
'600-contrast': black,
182-
700: #ec4820,
182+
'700': #ec4820,
183183
'700-contrast': black,
184-
800: #df370e,
184+
'800': #df370e,
185185
'800-contrast': black,
186-
900: #d22900,
186+
'900': #d22900,
187187
'900-contrast': white,
188188
'A100': #f05a2b,
189189
'A100-contrast': black,
@@ -195,25 +195,25 @@ $palette: (
195195
'A700-contrast': white,
196196
),
197197
'error': (
198-
50: #ffebf0,
198+
'50': #ffebf0,
199199
'50-contrast': black,
200-
100: #ffb0b7,
200+
'100': #ffb0b7,
201201
'100-contrast': black,
202-
200: #fc7f8a,
202+
'200': #fc7f8a,
203203
'200-contrast': black,
204-
300: #ec5461,
204+
'300': #ec5461,
205205
'300-contrast': black,
206-
400: #dd3544,
206+
'400': #dd3544,
207207
'400-contrast': black,
208-
500: #cf1a2b,
208+
'500': #cf1a2b,
209209
'500-contrast': white,
210-
600: #c31223,
210+
'600': #c31223,
211211
'600-contrast': white,
212-
700: #b90415,
212+
'700': #b90415,
213213
'700-contrast': white,
214-
800: #ae0111,
214+
'800': #ae0111,
215215
'800-contrast': white,
216-
900: #9f000f,
216+
'900': #9f000f,
217217
'900-contrast': white,
218218
'A100': #c31223,
219219
'A100-contrast': white,

0 commit comments

Comments
 (0)