igniteui-theming 13.0.2 → 13.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +9 -0
  2. package/json/colors/meta/multipliers.json +1 -1
  3. package/json/colors/presets/palettes.json +1 -1
  4. package/package.json +3 -4
  5. package/sass/color/_functions.scss +14 -20
  6. package/sass/color/_mixins.scss +5 -34
  7. package/sass/color/_multipliers.scss +3 -3
  8. package/sass/color/presets/dark/_indigo.scss +94 -94
  9. package/sass/color/presets/light/_indigo.scss +94 -94
  10. package/sass/elevations/presets/_index.scss +3 -3
  11. package/sass/elevations/presets/_indigo.scss +16 -16
  12. package/sass/elevations/presets/_material.scss +3 -3
package/README.md CHANGED
@@ -102,3 +102,12 @@ To start the docs in your browser, run
102
102
  ```
103
103
  npm run serve:docs
104
104
  ```
105
+
106
+ ## Testing and Debugging
107
+
108
+ ### Preview Palettes
109
+ To preview a palette you can pass the palette (`material`, `bootstrap`, `fluent`, `indigo`) and variant (`light` or `dark`) to the `palette` and `variant` arguments respectively. If you want to output the result to a file in the `./dist` folder add the `out` option.
110
+
111
+ ```
112
+ npm run preview:palette -- --palette=material --variant=light --out
113
+ ```
package/json/colors/meta/multipliers.json CHANGED
@@ -1 +1 @@
1
- {"color":{"s":{"50":"1.23","100":"0.8","200":"0.64","300":"0.73","400":"0.875","500":"1","600":"1.26","700":"1.52","800":"1.5","900":"1.34","A100":"1.23","A200":"1.22","A400":"1.23","A700":"1.23"},"l":{"50":"1.78","100":"1.66","200":"1.43","300":"1.19","400":"1.08","500":"1","600":"0.89","700":"0.81","800":"0.73","900":"0.64","A100":"1.34","A200":"1.16","A400":"0.91","A700":"0.65"}},"grayscale":{"l":{"50":"13%","100":"26%","200":"38%","300":"54%","400":"62%","500":"74%","600":"88%","700":"93%","800":"96%","900":"98%"}}}
1
+ {"color":{"s":{"50":"1.23","100":"0.8","200":"0.64","300":"0.73","400":"0.875","500":"1","600":"1.26","700":"1.26","800":"1.26","900":"1.26","A100":"1.23","A200":"1.22","A400":"1.23","A700":"1.23"},"l":{"50":"1.78","100":"1.66","200":"1.43","300":"1.19","400":"1.08","500":"1","600":"0.89","700":"0.81","800":"0.73","900":"0.64","A100":"1.34","A200":"1.16","A400":"0.91","A700":"0.65"}},"grayscale":{"l":{"50":"13%","100":"26%","200":"38%","300":"54%","400":"62%","500":"74%","600":"88%","700":"93%","800":"96%","900":"98%"}}}
package/json/colors/presets/palettes.json CHANGED
@@ -1 +1 @@
1
- {"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#949ea9","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#b6bdc4","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#bdbdbd","surface":"#1b1b1b","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#9a9da2","surface":"#f8f8fa","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"},"dark-indigo-palette":{"primary":"#4051b5","secondary":"#4051b5","gray":"#c3c3c6","surface":"#1e1f24","info":"#9b27b0","success":"#689f38","warn":"#f66d1e","error":"#d11a2c"}}
1
+ {"light-bootstrap-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"dark-bootstrap-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"light-material-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"dark-material-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"light-fluent-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"dark-fluent-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"light-indigo-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"},"dark-indigo-palette":{"primary":"hsl(from var(--ig-primary-500) h s l/1)","secondary":"hsl(from var(--ig-secondary-500) h s l/1)","gray":"hsl(from var(--ig-gray-500) h s l/1)","surface":"hsl(from var(--ig-surface-500) h s l/1)","info":"hsl(from var(--ig-info-500) h s l/1)","success":"hsl(from var(--ig-success-500) h s l/1)","warn":"hsl(from var(--ig-warn-500) h s l/1)","error":"hsl(from var(--ig-error-500) h s l/1)"}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "13.0.2",
3
+ "version": "13.1.0-beta.1",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -93,10 +93,9 @@
93
93
  "shx": "^0.3.4",
94
94
  "stylelint": "^15.6.2",
95
95
  "stylelint-config-standard-scss": "^7.0.1",
96
- "stylelint-scss": "^4.7.0",
97
- "yargs": "^17.7.2"
96
+ "stylelint-scss": "^4.7.0"
98
97
  },
99
98
  "peerDependencies": {
100
- "sass": "^1.58.1"
99
+ "sass": "^1.69.5"
101
100
  }
102
101
  }
package/sass/color/_functions.scss CHANGED
@@ -103,13 +103,12 @@ $_enhanced-accessibility: false;
103
103
  $result: map.merge(
104
104
  $result,
105
105
  (
106
- $variant: map.get($shade, 'raw'),
106
+ $variant: map.get($shade, 'hsl'),
107
107
  #{$variant}-contrast:
108
108
  text-contrast(
109
109
  $background: map.get($shade, 'raw'),
110
110
  $contrast: 'AA',
111
111
  ),
112
- #{$variant}-hsl: map.get($shade, 'hsl'),
113
112
  )
114
113
  );
115
114
  }
@@ -139,8 +138,14 @@ $_enhanced-accessibility: false;
139
138
  $len: list.length($lmap);
140
139
  $i: list.index(map.keys($lmap), $shade);
141
140
  $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
141
+ $raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
142
+ $hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
142
143
 
143
- @return (raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l), hsl: #{$h, $s, $l});
144
+ @if #{$shade} == '500' {
145
+ $hsl: $raw;
146
+ }
147
+
148
+ @return (raw: $raw, hsl: $hsl);
144
149
  } @else {
145
150
  $sx: map.get(multipliers.$color, 's', $shade);
146
151
  $lx: map.get(multipliers.$color, 'l', $shade);
@@ -149,9 +154,11 @@ $_enhanced-accessibility: false;
149
154
  to-fixed(color.saturation($color) * $sx),
150
155
  to-fixed(color.lightness($color) * $lx)
151
156
  );
157
+ $hsl: #{hsl(from var(--ig-#{$name}-500) h calc(s * $sx) calc(l * $lx))};
152
158
 
153
- // prettier-ignore
154
- $hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})};
159
+ @if #{$shade} == '500' {
160
+ $hsl: $color;
161
+ }
155
162
 
156
163
  @return (raw: $raw, hsl: $hsl);
157
164
  }
@@ -178,26 +185,13 @@ $_enhanced-accessibility: false;
178
185
  /// background: color($my-palette, 'primary', 200, .5);
179
186
  /// }
180
187
  @function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
181
- $c: map.get($palette or types.$IPalette, #{$color});
182
- $a: var(--ig-#{$color}-a);
183
188
  $s: #{var(--ig-#{$color}-#{$variant})};
184
189
  $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
185
- $meta: if($palette, map.get($palette, '_meta'), null);
186
190
  $_alpha: if($opacity, $opacity, 1);
187
- $_hsl-alpha: hsla($s, if($opacity, $opacity, $a));
191
+ $_hsl-alpha: hsl(from $s h s l / $_alpha);
188
192
  $_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);
189
193
 
190
- @if not($palette) or not($meta) {
191
- @return if($contrast, $_mix-alpha, $_hsl-alpha);
192
- }
193
-
194
- $_shade: map.get($c, $variant);
195
-
196
- @if meta.type-of($_shade) == 'list' and list.length($_shade) == 3 {
197
- $_shade: hsl($_shade...);
198
- }
199
-
200
- @return rgba($_shade, $alpha: $_alpha);
194
+ @return if($contrast, $_mix-alpha, $_hsl-alpha);
201
195
  }
202
196
 
203
197
  /// Retrieves a contrast text color for a given color variant from a color palette.
package/sass/color/_mixins.scss CHANGED
@@ -10,29 +10,8 @@
10
10
  /// @package theming
11
11
  ////
12
12
 
13
- // Generates CSS variables for a base color
14
- // @access private
15
- @mixin _base($color, $shade, $value) {
16
- @if $shade == 500 {
17
- $_type: meta.type-of($value);
18
- $_color: '' + $color;
19
-
20
- @if $_type == 'color' {
21
- --ig-#{$_color}-h: #{math.round(color.hue($value))};
22
- --ig-#{$_color}-s: #{math.round(color.saturation($value))};
23
- --ig-#{$_color}-l: #{math.round(color.lightness($value))};
24
- --ig-#{$_color}-a: #{color.alpha($value)};
25
- }
26
-
27
- // Cover handmade palettes with hsl values for base color
28
- @if $_type == 'list' and list.length($value) == 3 {
29
- --ig-#{$_color}-h: #{list.nth($value, 1)};
30
- --ig-#{$_color}-s: #{list.nth($value, 2)};
31
- --ig-#{$_color}-l: #{list.nth($value, 3)};
32
- --ig-#{$_color}-a: 1;
33
- }
34
- }
35
- }
13
+ // Tracks added CSS variables for color shades
14
+ $_added: () !default;
36
15
 
37
16
  // Generates CSS variables for a shade color
38
17
  // @access private
@@ -41,18 +20,11 @@
41
20
  $_hsl: if($_shade, string.index($shade, 'hsl'), false);
42
21
  $_contrast: if($_shade, string.index($shade, 'contrast'), false);
43
22
  $_color: '' + $color;
23
+ $_exists: list.index($_added, #{$_color}-#{$shade});
44
24
 
45
- @if $_hsl {
46
- $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
47
-
48
- --ig-#{$_color}-#{$variant}: #{$value};
49
- }
50
-
51
- @if not($_hsl) and not($_contrast) {
52
- --ig-#{$_color}-#{$shade}: #{$value};
53
- }
25
+ @if not($_hsl) {
26
+ $_added: list.append($_added, #{$_color}-#{$shade}) !global;
54
27
 
55
- @if $_contrast and $contrast {
56
28
  --ig-#{$_color}-#{$shade}: #{$value};
57
29
  }
58
30
  }
@@ -72,7 +44,6 @@
72
44
  #{$scope} {
73
45
  @each $color, $shades in map.remove($palette, '_meta') {
74
46
  @each $shade, $value in $shades {
75
- @include _base($color, $shade, $value);
76
47
  @include _shade($color, $shade, $value, $contrast);
77
48
  }
78
49
  }
package/sass/color/_multipliers.scss CHANGED
@@ -7,9 +7,9 @@ $color: (
7
7
  400: 0.875,
8
8
  500: 1,
9
9
  600: 1.26,
10
- 700: 1.52,
11
- 800: 1.5,
12
- 900: 1.34,
10
+ 700: 1.26,
11
+ 800: 1.26,
12
+ 900: 1.26,
13
13
  'A100': 1.23,
14
14
  'A200': 1.22,
15
15
  'A400': 1.23,
package/sass/color/presets/dark/_indigo.scss CHANGED
@@ -23,205 +23,205 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
23
23
  /// @prop {Color} surface [#1e1f24] - The surface color.
24
24
  $palette: (
25
25
  'primary': (
26
- 50: to-hsl(#c5cdff),
26
+ 50: #c5cdff,
27
27
  '50-contrast': black,
28
- 100: to-hsl(#a3aff6),
28
+ 100: #a3aff6,
29
29
  '100-contrast': black,
30
- 200: to-hsl(#8293f8),
30
+ 200: #8293f8,
31
31
  '200-contrast': black,
32
- 300: to-hsl(#7385f4),
32
+ 300: #7385f4,
33
33
  '300-contrast': black,
34
- 400: to-hsl(#5468d9),
34
+ 400: #5468d9,
35
35
  '400-contrast': black,
36
- 500: to-hsl(#3f51b5),
36
+ 500: #3f51b5,
37
37
  '500-contrast': white,
38
- 600: to-hsl(#39479c),
38
+ 600: #39479c,
39
39
  '600-contrast': white,
40
- 700: to-hsl(#333d83),
40
+ 700: #333d83,
41
41
  '700-contrast': white,
42
- 800: to-hsl(#2e3172),
42
+ 800: #2e3172,
43
43
  '800-contrast': white,
44
- 900: to-hsl(#262851),
44
+ 900: #262851,
45
45
  '900-contrast': white,
46
- 'A100': to-hsl(#39479c),
46
+ 'A100': #39479c,
47
47
  'A100-contrast': white,
48
- 'A200': to-hsl(#333d83),
48
+ 'A200': #333d83,
49
49
  'A200-contrast': white,
50
- 'A400': to-hsl(#2e3172),
50
+ 'A400': #2e3172,
51
51
  'A400-contrast': white,
52
- 'A700': to-hsl(#262851),
52
+ 'A700': #262851,
53
53
  'A700-contrast': white,
54
54
  ),
55
55
  'secondary': (
56
- 50: to-hsl(#c5cdff),
56
+ 50: #c5cdff,
57
57
  '50-contrast': black,
58
- 100: to-hsl(#a3aff6),
58
+ 100: #a3aff6,
59
59
  '100-contrast': black,
60
- 200: to-hsl(#8293f8),
60
+ 200: #8293f8,
61
61
  '200-contrast': black,
62
- 300: to-hsl(#7385f4),
62
+ 300: #7385f4,
63
63
  '300-contrast': black,
64
- 400: to-hsl(#5468d9),
64
+ 400: #5468d9,
65
65
  '400-contrast': black,
66
- 500: to-hsl(#3f51b5),
66
+ 500: #3f51b5,
67
67
  '500-contrast': white,
68
- 600: to-hsl(#39479c),
68
+ 600: #39479c,
69
69
  '600-contrast': white,
70
- 700: to-hsl(#333d83),
70
+ 700: #333d83,
71
71
  '700-contrast': white,
72
- 800: to-hsl(#2e3172),
72
+ 800: #2e3172,
73
73
  '800-contrast': white,
74
- 900: to-hsl(#262851),
74
+ 900: #262851,
75
75
  '900-contrast': white,
76
- 'A100': to-hsl(#39479c),
76
+ 'A100': #39479c,
77
77
  'A100-contrast': white,
78
- 'A200': to-hsl(#333d83),
78
+ 'A200': #333d83,
79
79
  'A200-contrast': white,
80
- 'A400': to-hsl(#2e3172),
80
+ 'A400': #2e3172,
81
81
  'A400-contrast': white,
82
- 'A700': to-hsl(#262851),
82
+ 'A700': #262851,
83
83
  'A700-contrast': white,
84
84
  ),
85
85
  'gray': (
86
- 50: to-hsl(#24252c),
86
+ 50: #24252c,
87
87
  '50-contrast': white,
88
- 100: to-hsl(#3b3d47),
88
+ 100: #3b3d47,
89
89
  '100-contrast': white,
90
- 200: to-hsl(#545762),
90
+ 200: #545762,
91
91
  '200-contrast': white,
92
- 300: to-hsl(#6c707a),
92
+ 300: #6c707a,
93
93
  '300-contrast': white,
94
- 400: to-hsl(#9a9da2),
94
+ 400: #9a9da2,
95
95
  '400-contrast': black,
96
- 500: to-hsl(#c3c4c7),
96
+ 500: #c3c4c7,
97
97
  '500-contrast': black,
98
- 600: to-hsl(#d6d8dc),
98
+ 600: #d6d8dc,
99
99
  '600-contrast': black,
100
- 700: to-hsl(#ebedf2),
100
+ 700: #ebedf2,
101
101
  '700-contrast': black,
102
- 800: to-hsl(#f8f8fa),
102
+ 800: #f8f8fa,
103
103
  '800-contrast': black,
104
- 900: to-hsl(#fcfcfd),
104
+ 900: #fcfcfd,
105
105
  '900-contrast': black,
106
106
  ),
107
107
  'info': (
108
- 50: to-hsl(#f1c3ff),
108
+ 50: #f1c3ff,
109
109
  '50-contrast': black,
110
- 100: to-hsl(#e89eff),
110
+ 100: #e89eff,
111
111
  '100-contrast': black,
112
- 200: to-hsl(#dd71ff),
112
+ 200: #dd71ff,
113
113
  '200-contrast': black,
114
- 300: to-hsl(#da64ff),
114
+ 300: #da64ff,
115
115
  '300-contrast': black,
116
- 400: to-hsl(#bc34d3),
116
+ 400: #bc34d3,
117
117
  '400-contrast': white,
118
- 500: to-hsl(#9c27b0),
118
+ 500: #9c27b0,
119
119
  '500-contrast': white,
120
- 600: to-hsl(#8c16a0),
120
+ 600: #8c16a0,
121
121
  '600-contrast': white,
122
- 700: to-hsl(#7f1192),
122
+ 700: #7f1192,
123
123
  '700-contrast': white,
124
- 800: to-hsl(#6f0a80),
124
+ 800: #6f0a80,
125
125
  '800-contrast': white,
126
- 900: to-hsl(#5c056b),
126
+ 900: #5c056b,
127
127
  '900-contrast': white,
128
- 'A100': to-hsl(#8c16a0),
128
+ 'A100': #8c16a0,
129
129
  'A100-contrast': white,
130
- 'A200': to-hsl(#7f1192),
130
+ 'A200': #7f1192,
131
131
  'A200-contrast': white,
132
- 'A400': to-hsl(#6f0a80),
132
+ 'A400': #6f0a80,
133
133
  'A400-contrast': white,
134
- 'A700': to-hsl(#5c056b),
134
+ 'A700': #5c056b,
135
135
  'A700-contrast': white,
136
136
  ),
137
137
  'success': (
138
- 50: to-hsl(#edf3e7),
138
+ 50: #edf3e7,
139
139
  '50-contrast': black,
140
- 100: to-hsl(#d2e2c3),
140
+ 100: #d2e2c3,
141
141
  '100-contrast': black,
142
- 200: to-hsl(#b4cf9c),
142
+ 200: #b4cf9c,
143
143
  '200-contrast': black,
144
- 300: to-hsl(#95bc74),
144
+ 300: #95bc74,
145
145
  '300-contrast': black,
146
- 400: to-hsl(#7fad56),
146
+ 400: #7fad56,
147
147
  '400-contrast': black,
148
- 500: to-hsl(#689f38),
148
+ 500: #689f38,
149
149
  '500-contrast': black,
150
- 600: to-hsl(#5a912a),
150
+ 600: #5a912a,
151
151
  '600-contrast': black,
152
- 700: to-hsl(#4e8222),
152
+ 700: #4e8222,
153
153
  '700-contrast': white,
154
- 800: to-hsl(#3d7012),
154
+ 800: #3d7012,
155
155
  '800-contrast': white,
156
- 900: to-hsl(#316109),
156
+ 900: #316109,
157
157
  '900-contrast': white,
158
- 'A100': to-hsl(#5a912a),
158
+ 'A100': #5a912a,
159
159
  'A100-contrast': black,
160
- 'A200': to-hsl(#4e8222),
160
+ 'A200': #4e8222,
161
161
  'A200-contrast': white,
162
- 'A400': to-hsl(#3d7012),
162
+ 'A400': #3d7012,
163
163
  'A400-contrast': white,
164
- 'A700': to-hsl(#316109),
164
+ 'A700': #316109,
165
165
  'A700-contrast': white,
166
166
  ),
167
167
  'warn': (
168
- 50: to-hsl(#fed7b7),
168
+ 50: #fed7b7,
169
169
  '50-contrast': black,
170
- 100: to-hsl(#ffc696),
170
+ 100: #ffc696,
171
171
  '100-contrast': black,
172
- 200: to-hsl(#ffad67),
172
+ 200: #ffad67,
173
173
  '200-contrast': black,
174
- 300: to-hsl(#fb8f32),
174
+ 300: #fb8f32,
175
175
  '300-contrast': black,
176
- 400: to-hsl(#fa7b0e),
176
+ 400: #fa7b0e,
177
177
  '400-contrast': black,
178
- 500: to-hsl(#f56b1d),
178
+ 500: #f56b1d,
179
179
  '500-contrast': black,
180
- 600: to-hsl(#f05a2b),
180
+ 600: #f05a2b,
181
181
  '600-contrast': black,
182
- 700: to-hsl(#ec4820),
182
+ 700: #ec4820,
183
183
  '700-contrast': black,
184
- 800: to-hsl(#df370e),
184
+ 800: #df370e,
185
185
  '800-contrast': black,
186
- 900: to-hsl(#d22900),
186
+ 900: #d22900,
187
187
  '900-contrast': white,
188
- 'A100': to-hsl(#f05a2b),
188
+ 'A100': #f05a2b,
189
189
  'A100-contrast': black,
190
- 'A200': to-hsl(#ec4820),
190
+ 'A200': #ec4820,
191
191
  'A200-contrast': black,
192
- 'A400': to-hsl(#df370e),
192
+ 'A400': #df370e,
193
193
  'A400-contrast': black,
194
- 'A700': to-hsl(#d22900),
194
+ 'A700': #d22900,
195
195
  'A700-contrast': white,
196
196
  ),
197
197
  'error': (
198
- 50: to-hsl(#ffebf0),
198
+ 50: #ffebf0,
199
199
  '50-contrast': black,
200
- 100: to-hsl(#ffb0b7),
200
+ 100: #ffb0b7,
201
201
  '100-contrast': black,
202
- 200: to-hsl(#fc7f8a),
202
+ 200: #fc7f8a,
203
203
  '200-contrast': black,
204
- 300: to-hsl(#ec5461),
204
+ 300: #ec5461,
205
205
  '300-contrast': black,
206
- 400: to-hsl(#dd3544),
206
+ 400: #dd3544,
207
207
  '400-contrast': black,
208
- 500: to-hsl(#cf1a2b),
208
+ 500: #cf1a2b,
209
209
  '500-contrast': white,
210
- 600: to-hsl(#c31223),
210
+ 600: #c31223,
211
211
  '600-contrast': white,
212
- 700: to-hsl(#b90415),
212
+ 700: #b90415,
213
213
  '700-contrast': white,
214
- 800: to-hsl(#ae0111),
214
+ 800: #ae0111,
215
215
  '800-contrast': white,
216
- 900: to-hsl(#9f000f),
216
+ 900: #9f000f,
217
217
  '900-contrast': white,
218
- 'A100': to-hsl(#c31223),
218
+ 'A100': #c31223,
219
219
  'A100-contrast': white,
220
- 'A200': to-hsl(#b90415),
220
+ 'A200': #b90415,
221
221
  'A200-contrast': white,
222
- 'A400': to-hsl(#ae0111),
222
+ 'A400': #ae0111,
223
223
  'A400-contrast': white,
224
- 'A700': to-hsl(#9f000f),
224
+ 'A700': #9f000f,
225
225
  'A700-contrast': white,
226
226
  ),
227
227
  'surface': $surface-shades,
package/sass/color/presets/light/_indigo.scss CHANGED
@@ -23,205 +23,205 @@ $surface-shades: shades('surface', #f8f8fa, $color-shades);
23
23
  /// @prop {Color} surface [#f8f8fa] - The surface color.
24
24
  $palette: (
25
25
  'primary': (
26
- 50: to-hsl(#c5cdff),
26
+ 50: #c5cdff,
27
27
  '50-contrast': black,
28
- 100: to-hsl(#a3aff6),
28
+ 100: #a3aff6,
29
29
  '100-contrast': black,
30
- 200: to-hsl(#8293f8),
30
+ 200: #8293f8,
31
31
  '200-contrast': black,
32
- 300: to-hsl(#7385f4),
32
+ 300: #7385f4,
33
33
  '300-contrast': black,
34
- 400: to-hsl(#5468d9),
34
+ 400: #5468d9,
35
35
  '400-contrast': black,
36
- 500: to-hsl(#3f51b5),
36
+ 500: #3f51b5,
37
37
  '500-contrast': white,
38
- 600: to-hsl(#39479c),
38
+ 600: #39479c,
39
39
  '600-contrast': white,
40
- 700: to-hsl(#333d83),
40
+ 700: #333d83,
41
41
  '700-contrast': white,
42
- 800: to-hsl(#2e3172),
42
+ 800: #2e3172,
43
43
  '800-contrast': white,
44
- 900: to-hsl(#262851),
44
+ 900: #262851,
45
45
  '900-contrast': white,
46
- 'A100': to-hsl(#39479c),
46
+ 'A100': #39479c,
47
47
  'A100-contrast': white,
48
- 'A200': to-hsl(#333d83),
48
+ 'A200': #333d83,
49
49
  'A200-contrast': white,
50
- 'A400': to-hsl(#2e3172),
50
+ 'A400': #2e3172,
51
51
  'A400-contrast': white,
52
- 'A700': to-hsl(#262851),
52
+ 'A700': #262851,
53
53
  'A700-contrast': white,
54
54
  ),
55
55
  'secondary': (
56
- 50: to-hsl(#c5cdff),
56
+ 50: #c5cdff,
57
57
  '50-contrast': black,
58
- 100: to-hsl(#a3aff6),
58
+ 100: #a3aff6,
59
59
  '100-contrast': black,
60
- 200: to-hsl(#8293f8),
60
+ 200: #8293f8,
61
61
  '200-contrast': black,
62
- 300: to-hsl(#7385f4),
62
+ 300: #7385f4,
63
63
  '300-contrast': black,
64
- 400: to-hsl(#5468d9),
64
+ 400: #5468d9,
65
65
  '400-contrast': black,
66
- 500: to-hsl(#3f51b5),
66
+ 500: #3f51b5,
67
67
  '500-contrast': white,
68
- 600: to-hsl(#39479c),
68
+ 600: #39479c,
69
69
  '600-contrast': white,
70
- 700: to-hsl(#333d83),
70
+ 700: #333d83,
71
71
  '700-contrast': white,
72
- 800: to-hsl(#2e3172),
72
+ 800: #2e3172,
73
73
  '800-contrast': white,
74
- 900: to-hsl(#262851),
74
+ 900: #262851,
75
75
  '900-contrast': white,
76
- 'A100': to-hsl(#39479c),
76
+ 'A100': #39479c,
77
77
  'A100-contrast': white,
78
- 'A200': to-hsl(#333d83),
78
+ 'A200': #333d83,
79
79
  'A200-contrast': white,
80
- 'A400': to-hsl(#2e3172),
80
+ 'A400': #2e3172,
81
81
  'A400-contrast': white,
82
- 'A700': to-hsl(#262851),
82
+ 'A700': #262851,
83
83
  'A700-contrast': white,
84
84
  ),
85
85
  'gray': (
86
- 50: to-hsl(#fcfcfd),
86
+ 50: #fcfcfd,
87
87
  '50-contrast': black,
88
- 100: to-hsl(#f8f8fa),
88
+ 100: #f8f8fa,
89
89
  '100-contrast': black,
90
- 200: to-hsl(#ebedf2),
90
+ 200: #ebedf2,
91
91
  '200-contrast': black,
92
- 300: to-hsl(#d6d8dc),
92
+ 300: #d6d8dc,
93
93
  '300-contrast': black,
94
- 400: to-hsl(#c3c4c7),
94
+ 400: #c3c4c7,
95
95
  '400-contrast': black,
96
- 500: to-hsl(#9a9da2),
96
+ 500: #9a9da2,
97
97
  '500-contrast': black,
98
- 600: to-hsl(#6c707a),
98
+ 600: #6c707a,
99
99
  '600-contrast': white,
100
- 700: to-hsl(#545762),
100
+ 700: #545762,
101
101
  '700-contrast': white,
102
- 800: to-hsl(#3b3d47),
102
+ 800: #3b3d47,
103
103
  '800-contrast': white,
104
- 900: to-hsl(#24252c),
104
+ 900: #24252c,
105
105
  '900-contrast': white,
106
106
  ),
107
107
  'info': (
108
- 50: to-hsl(#f1c3ff),
108
+ 50: #f1c3ff,
109
109
  '50-contrast': black,
110
- 100: to-hsl(#e89eff),
110
+ 100: #e89eff,
111
111
  '100-contrast': black,
112
- 200: to-hsl(#dd71ff),
112
+ 200: #dd71ff,
113
113
  '200-contrast': black,
114
- 300: to-hsl(#da64ff),
114
+ 300: #da64ff,
115
115
  '300-contrast': black,
116
- 400: to-hsl(#bc34d3),
116
+ 400: #bc34d3,
117
117
  '400-contrast': white,
118
- 500: to-hsl(#9c27b0),
118
+ 500: #9c27b0,
119
119
  '500-contrast': white,
120
- 600: to-hsl(#8c16a0),
120
+ 600: #8c16a0,
121
121
  '600-contrast': white,
122
- 700: to-hsl(#7f1192),
122
+ 700: #7f1192,
123
123
  '700-contrast': white,
124
- 800: to-hsl(#6f0a80),
124
+ 800: #6f0a80,
125
125
  '800-contrast': white,
126
- 900: to-hsl(#5c056b),
126
+ 900: #5c056b,
127
127
  '900-contrast': white,
128
- 'A100': to-hsl(#8c16a0),
128
+ 'A100': #8c16a0,
129
129
  'A100-contrast': white,
130
- 'A200': to-hsl(#7f1192),
130
+ 'A200': #7f1192,
131
131
  'A200-contrast': white,
132
- 'A400': to-hsl(#6f0a80),
132
+ 'A400': #6f0a80,
133
133
  'A400-contrast': white,
134
- 'A700': to-hsl(#5c056b),
134
+ 'A700': #5c056b,
135
135
  'A700-contrast': white,
136
136
  ),
137
137
  'success': (
138
- 50: to-hsl(#edf3e7),
138
+ 50: #edf3e7,
139
139
  '50-contrast': black,
140
- 100: to-hsl(#d2e2c3),
140
+ 100: #d2e2c3,
141
141
  '100-contrast': black,
142
- 200: to-hsl(#b4cf9c),
142
+ 200: #b4cf9c,
143
143
  '200-contrast': black,
144
- 300: to-hsl(#95bc74),
144
+ 300: #95bc74,
145
145
  '300-contrast': black,
146
- 400: to-hsl(#7fad56),
146
+ 400: #7fad56,
147
147
  '400-contrast': black,
148
- 500: to-hsl(#689f38),
148
+ 500: #689f38,
149
149
  '500-contrast': black,
150
- 600: to-hsl(#5a912a),
150
+ 600: #5a912a,
151
151
  '600-contrast': black,
152
- 700: to-hsl(#4e8222),
152
+ 700: #4e8222,
153
153
  '700-contrast': white,
154
- 800: to-hsl(#3d7012),
154
+ 800: #3d7012,
155
155
  '800-contrast': white,
156
- 900: to-hsl(#316109),
156
+ 900: #316109,
157
157
  '900-contrast': white,
158
- 'A100': to-hsl(#5a912a),
158
+ 'A100': #5a912a,
159
159
  'A100-contrast': black,
160
- 'A200': to-hsl(#4e8222),
160
+ 'A200': #4e8222,
161
161
  'A200-contrast': white,
162
- 'A400': to-hsl(#3d7012),
162
+ 'A400': #3d7012,
163
163
  'A400-contrast': white,
164
- 'A700': to-hsl(#316109),
164
+ 'A700': #316109,
165
165
  'A700-contrast': white,
166
166
  ),
167
167
  'warn': (
168
- 50: to-hsl(#fed7b7),
168
+ 50: #fed7b7,
169
169
  '50-contrast': black,
170
- 100: to-hsl(#ffc696),
170
+ 100: #ffc696,
171
171
  '100-contrast': black,
172
- 200: to-hsl(#ffad67),
172
+ 200: #ffad67,
173
173
  '200-contrast': black,
174
- 300: to-hsl(#fb8f32),
174
+ 300: #fb8f32,
175
175
  '300-contrast': black,
176
- 400: to-hsl(#fa7b0e),
176
+ 400: #fa7b0e,
177
177
  '400-contrast': black,
178
- 500: to-hsl(#f56b1d),
178
+ 500: #f56b1d,
179
179
  '500-contrast': black,
180
- 600: to-hsl(#f05a2b),
180
+ 600: #f05a2b,
181
181
  '600-contrast': black,
182
- 700: to-hsl(#ec4820),
182
+ 700: #ec4820,
183
183
  '700-contrast': black,
184
- 800: to-hsl(#df370e),
184
+ 800: #df370e,
185
185
  '800-contrast': black,
186
- 900: to-hsl(#d22900),
186
+ 900: #d22900,
187
187
  '900-contrast': white,
188
- 'A100': to-hsl(#f05a2b),
188
+ 'A100': #f05a2b,
189
189
  'A100-contrast': black,
190
- 'A200': to-hsl(#ec4820),
190
+ 'A200': #ec4820,
191
191
  'A200-contrast': black,
192
- 'A400': to-hsl(#df370e),
192
+ 'A400': #df370e,
193
193
  'A400-contrast': black,
194
- 'A700': to-hsl(#d22900),
194
+ 'A700': #d22900,
195
195
  'A700-contrast': white,
196
196
  ),
197
197
  'error': (
198
- 50: to-hsl(#ffebf0),
198
+ 50: #ffebf0,
199
199
  '50-contrast': black,
200
- 100: to-hsl(#ffb0b7),
200
+ 100: #ffb0b7,
201
201
  '100-contrast': black,
202
- 200: to-hsl(#fc7f8a),
202
+ 200: #fc7f8a,
203
203
  '200-contrast': black,
204
- 300: to-hsl(#ec5461),
204
+ 300: #ec5461,
205
205
  '300-contrast': black,
206
- 400: to-hsl(#dd3544),
206
+ 400: #dd3544,
207
207
  '400-contrast': black,
208
- 500: to-hsl(#cf1a2b),
208
+ 500: #cf1a2b,
209
209
  '500-contrast': white,
210
- 600: to-hsl(#c31223),
210
+ 600: #c31223,
211
211
  '600-contrast': white,
212
- 700: to-hsl(#b90415),
212
+ 700: #b90415,
213
213
  '700-contrast': white,
214
- 800: to-hsl(#ae0111),
214
+ 800: #ae0111,
215
215
  '800-contrast': white,
216
- 900: to-hsl(#9f000f),
216
+ 900: #9f000f,
217
217
  '900-contrast': white,
218
- 'A100': to-hsl(#c31223),
218
+ 'A100': #c31223,
219
219
  'A100-contrast': white,
220
- 'A200': to-hsl(#b90415),
220
+ 'A200': #b90415,
221
221
  'A200-contrast': white,
222
- 'A400': to-hsl(#ae0111),
222
+ 'A400': #ae0111,
223
223
  'A400-contrast': white,
224
- 'A700': to-hsl(#9f000f),
224
+ 'A700': #9f000f,
225
225
  'A700-contrast': white,
226
226
  ),
227
227
  'surface': $surface-shades,
package/sass/elevations/presets/_index.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  /// Level 1 - The color used to generate umbra shadows.
2
2
  /// @type Color
3
3
  /// @access private
4
- $color-1: rgba(0 0 0 / 26%) !default;
4
+ $color-1: rgba(0 0 0 / 0.26) !default;
5
5
 
6
6
  /// Level 2 - The color used to generate penumbra shadows.
7
7
  /// @type Color
8
8
  /// @access private
9
- $color-2: rgba(0 0 0 / 12%) !default;
9
+ $color-2: rgba(0 0 0 / 0.12) !default;
10
10
 
11
11
  /// Level 3 - The color used to generate ambient shadows.
12
12
  /// @type Color
13
13
  /// @access private
14
- $color-3: rgba(0 0 0 / 8%) !default;
14
+ $color-3: rgba(0 0 0 / 0.08) !default;
15
15
 
16
16
  @forward './material' as material-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
17
17
  @forward './indigo' as indigo-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);
package/sass/elevations/presets/_indigo.scss CHANGED
@@ -9,32 +9,32 @@
9
9
  /// Level 1 - The color used to generate umbra shadows.
10
10
  /// @type Color
11
11
  /// @access private
12
- $color-1: rgba(0 0 0 / 26%) !default;
12
+ $color-1: rgba(0 0 0 / 0.26) !default;
13
13
 
14
14
  /// Level 2 - The color used to generate penumbra shadows.
15
15
  /// @type Color
16
16
  /// @access private
17
- $color-2: rgba(0 0 0 / 12%) !default;
17
+ $color-2: rgba(0 0 0 / 0.12) !default;
18
18
 
19
19
  /// Level 3 - The color used to generate ambient shadows.
20
20
  /// @type Color
21
21
  /// @access private
22
- $color-3: rgba(0 0 0 / 8%) !default;
22
+ $color-3: rgba(0 0 0 / 0.08) !default;
23
23
 
24
24
  /// All elevation levels
25
25
  /// @access private
26
26
  $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
27
- $_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 30%)));
28
- $_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 20%)));
29
- $_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
30
- $_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 20%)));
31
- $_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
32
- $_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 30%)));
33
- $_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 20%)));
34
- $_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 30%)));
35
- $_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 40%)));
36
- $_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 40%)));
37
- $_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
27
+ $_2: box-shadow((0 3px 6px 0 rgba(0 0 0 / 0.3)));
28
+ $_3: box-shadow((0 3px 6px 0 rgba(36 37 44 / 0.2)));
29
+ $_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.1)));
30
+ $_5: box-shadow((0 0 12px 0 rgba(36 37 44 / 0.2)));
31
+ $_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 0.2)));
32
+ $_7: box-shadow((0 0 12px 0 rgba(0 0 0 / 0.3)));
33
+ $_8: box-shadow((0 2px 2px 0 rgba(36 37 44 / 0.2)));
34
+ $_9: box-shadow((0 2px 2px 0 rgba(0 0 0 / 0.3)));
35
+ $_10: box-shadow((0 2px 6px 0 rgba(36 37 44 / 0.4)));
36
+ $_11: box-shadow((0 2px 6px 0 rgba(0 0 0 / 0.4)));
37
+ $_12: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
38
38
  $_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
39
39
  $_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
40
40
  $_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
@@ -45,8 +45,8 @@ $_19: box-shadow((0 9px 12px -6px $color-1, 0 19px 29px 2px $color-2, 0 7px 36px
45
45
  $_20: box-shadow((0 10px 13px -6px $color-1, 0 20px 31px 3px $color-2, 0 8px 38px 7px $color-3));
46
46
  $_21: box-shadow((0 10px 13px -6px $color-1, 0 21px 33px 3px $color-2, 0 8px 40px 7px $color-3));
47
47
  $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42px 7px $color-3));
48
- $_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 30%)));
49
- $_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 40%)));
48
+ $_23: box-shadow((0 0 16px 0 rgba(0 0 0 / 0.3)));
49
+ $_24: box-shadow((0 0 16px 0 rgba(36 37 44 / 0.4)));
50
50
 
51
51
  /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
52
52
  /// @type Map
package/sass/elevations/presets/_material.scss CHANGED
@@ -9,17 +9,17 @@
9
9
  /// Level 1 - The color used to generate umbra shadows.
10
10
  /// @type Color
11
11
  /// @access private
12
- $color-1: rgba(0 0 0 / 26%) !default;
12
+ $color-1: rgba(0 0 0 / 0.26) !default;
13
13
 
14
14
  /// Level 2 - The color used to generate penumbra shadows.
15
15
  /// @type Color
16
16
  /// @access private
17
- $color-2: rgba(0 0 0 / 12%) !default;
17
+ $color-2: rgba(0 0 0 / 0.12) !default;
18
18
 
19
19
  /// Level 3 - The color used to generate ambient shadows.
20
20
  /// @type Color
21
21
  /// @access private
22
- $color-3: rgba(0 0 0 / 8%) !default;
22
+ $color-3: rgba(0 0 0 / 0.08) !default;
23
23
 
24
24
  /// All elevation levels
25
25
  /// @access private