igniteui-theming 1.4.0 → 1.4.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 (2) hide show
  1. package/package.json +1 -1
  2. package/sass/color/_mixins.scss +31 -39
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "1.4.0",
3
+ "version": "1.4.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": {
package/sass/color/_mixins.scss CHANGED
@@ -5,51 +5,35 @@
5
5
  @use 'sass:string';
6
6
  @use '../utils/meta' as *;
7
7
 
8
- // Generates CSS variables for the base colors.
8
+ // Generates CSS variables for a base color
9
9
  // @access private
10
- @mixin _base-colors($palette) {
11
- $scope: if(is-root(), ':root', '&');
12
-
13
- #{$scope} {
14
- @each $color, $shades in map.remove($palette, '_meta') {
15
- @each $shade, $value in $shades {
16
- $_shade: $shade == 500;
17
- $_valid: meta.type-of($value == 'color');
18
-
19
- @if $_shade and $_valid {
20
- --ig-#{$color}-h: #{math.round(color.hue($value))};
21
- --ig-#{$color}-s: #{math.round(color.saturation($value))};
22
- --ig-#{$color}-l: #{math.round(color.lightness($value))};
23
- --ig-#{$color}-a: #{color.alpha($value)};
24
- }
25
- }
26
- }
10
+ @mixin _base($color, $shade, $value) {
11
+ $_shade: $shade == 500;
12
+ $_valid: meta.type-of($value == 'color');
13
+
14
+ @if $_shade and $_valid {
15
+ --ig-#{$color}-h: #{math.round(color.hue($value))};
16
+ --ig-#{$color}-s: #{math.round(color.saturation($value))};
17
+ --ig-#{$color}-l: #{math.round(color.lightness($value))};
18
+ --ig-#{$color}-a: #{color.alpha($value)};
27
19
  }
28
20
  }
29
21
 
30
- // Generates shade CSS variables from the base colors.
22
+ // Generates CSS variables for a shade color
31
23
  // @access private
32
- @mixin _shade-colors($palette, $contrast: true) {
33
- $scope: if(is-root(), '*', '&');
34
-
35
- #{$scope} {
36
- @each $color, $shades in map.remove($palette, '_meta') {
37
- @each $shade, $value in $shades {
38
- $_shade: meta.type-of($shade) == 'string';
39
- $_hsl: if($_shade, string.index($shade, 'hsl'), false);
40
- $_contrast: if($_shade, string.index($shade, 'contrast'), false);
24
+ @mixin _shade($color, $shade, $value, $contrast) {
25
+ $_shade: meta.type-of($shade) == 'string';
26
+ $_hsl: if($_shade, string.index($shade, 'hsl'), false);
27
+ $_contrast: if($_shade, string.index($shade, 'contrast'), false);
41
28
 
42
- @if $_hsl {
43
- $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
29
+ @if $_hsl {
30
+ $variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);
44
31
 
45
- --ig-#{$color}-#{$variant}: #{$value};
46
- }
32
+ --ig-#{$color}-#{$variant}: #{$value};
33
+ }
47
34
 
48
- @if $_contrast and $contrast {
49
- --ig-#{$color}-#{$shade}: #{$value};
50
- }
51
- }
52
- }
35
+ @if $_contrast and $contrast {
36
+ --ig-#{$color}-#{$shade}: #{$value};
53
37
  }
54
38
  }
55
39
 
@@ -63,6 +47,14 @@
63
47
  /// @include palette($palette);
64
48
  /// @require {function} is-root
65
49
  @mixin palette($palette, $contrast: true) {
66
- @include _base-colors($palette);
67
- @include _shade-colors($palette, $contrast);
50
+ $scope: if(is-root(), ':root', '&');
51
+
52
+ #{$scope} {
53
+ @each $color, $shades in map.remove($palette, '_meta') {
54
+ @each $shade, $value in $shades {
55
+ @include _base($color, $shade, $value);
56
+ @include _shade($color, $shade, $value, $contrast);
57
+ }
58
+ }
59
+ }
68
60
  }