Skip to content

Commit

Permalink
Merge branch 'master' into sivanova/tile-manager
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeonoff
simeonoff authored Jan 8, 2025
2 parents 008cdc7 + 1fe8143 commit 78c3dfe
Show file tree
Hide file tree
Showing 11 changed files with 316 additions and 264 deletions.
18 changes: 9 additions & 9 deletions sass/color/_functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,12 @@ $_enhanced-accessibility: false;
$result,
(
$variant: map.get($shade, 'hsl'),
#{$variant}-contrast:
'#{$variant}-contrast':
text-contrast(
$background: map.get($shade, 'raw'),
$contrast: 'AA',
),
#{$variant}-raw: map.get($shade, 'raw'),
'#{$variant}-raw': map.get($shade, 'raw'),
)
);
}
Expand Down Expand Up @@ -137,7 +137,7 @@ $_enhanced-accessibility: false;
$color: if($color, $color, if($lum > 0.5, #000, #fff));
$lmap: map.get(multipliers.$grayscale, 'l');
$len: list.length($lmap);
$i: list.index(map.keys($lmap), $shade);
$i: list.index(map.keys($lmap), #{$shade});
$l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
$raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
$hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
Expand All @@ -148,8 +148,8 @@ $_enhanced-accessibility: false;

@return (raw: $raw, hsl: $hsl);
} @else {
$sx: map.get(multipliers.$color, 's', $shade);
$lx: map.get(multipliers.$color, 'l', $shade);
$sx: map.get(multipliers.$color, 's', #{$shade});
$lx: map.get(multipliers.$color, 'l', #{$shade});
$raw: hsl(
to-fixed(color.hue($color)),
to-fixed(color.saturation($color) * $sx),
Expand Down Expand Up @@ -185,19 +185,19 @@ $_enhanced-accessibility: false;
/// .my-component-2 {
/// background: color($my-palette, 'primary', 200, .5);
/// }
@function color($palette: null, $color: 'primary', $variant: 500, $opacity: null) {
@function color($palette: null, $color: primary, $variant: 500, $opacity: null) {
$s: #{var(--ig-#{$color}-#{$variant})};
$contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
$_alpha: if($opacity, $opacity, 1);
$_hsl-alpha: hsl(from $s h s l / $_alpha);
$_mix-alpha: color-mix(in oklch, $s #{$_alpha * 100%}, transparent);

@if $palette {
$s: map.get($palette, $color);
$base: map.get($s, $variant);
$s: map.get($palette, #{$color});
$base: map.get($s, #{$variant});
$raw: if($contrast, map.get($s, #{$variant}-contrast), map.get($s, #{$variant}-raw));

@return if($raw and $variant != 500, rgba($raw, $_alpha), rgba($base, $_alpha));
@return if($raw and $variant != '500', rgba($raw, $_alpha), rgba($base, $_alpha));
}

@return if($contrast, $_mix-alpha, $_hsl-alpha);
Expand Down
60 changes: 30 additions & 30 deletions sass/color/_multipliers.scss
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
$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,
'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,
'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,
Expand All @@ -34,15 +34,15 @@ $color: (
);
$grayscale: (
l: (
50: 13%,
100: 26%,
200: 38%,
300: 54%,
400: 62%,
500: 74%,
600: 88%,
700: 93%,
800: 96%,
900: 98%,
'50': 13%,
'100': 26%,
'200': 38%,
'300': 54%,
'400': 62%,
'500': 74%,
'600': 88%,
'700': 93%,
'800': 96%,
'900': 98%,
),
);
2 changes: 1 addition & 1 deletion sass/color/_types.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
/// A list consisting of all generated gray shades
/// @type Map
/// @access private
$IGrayShades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
$IGrayShades: ('50', '100', '200', '300', '400', '500', '600', '700', '800', '900');

/// A list consisting of all generated shades for palette colors
/// @type Map
Expand Down
140 changes: 70 additions & 70 deletions sass/color/presets/dark/_indigo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,25 @@ $surface-shades: shades('surface', #1e1f24, $color-shades);
/// @prop {Color} surface [#1e1f24] - The surface color.
$palette: (
'primary': (
50: #c5cdff,
'50': #c5cdff,
'50-contrast': black,
100: #a3aff6,
'100': #a3aff6,
'100-contrast': black,
200: #8293f8,
'200': #8293f8,
'200-contrast': black,
300: #7385f4,
'300': #7385f4,
'300-contrast': black,
400: #5468d9,
'400': #5468d9,
'400-contrast': black,
500: #3f51b5,
'500': #3f51b5,
'500-contrast': white,
600: #39479c,
'600': #39479c,
'600-contrast': white,
700: #333d83,
'700': #333d83,
'700-contrast': white,
800: #2e3172,
'800': #2e3172,
'800-contrast': white,
900: #262851,
'900': #262851,
'900-contrast': white,
'A100': #39479c,
'A100-contrast': white,
Expand All @@ -53,25 +53,25 @@ $palette: (
'A700-contrast': white,
),
'secondary': (
50: #c5cdff,
'50': #c5cdff,
'50-contrast': black,
100: #a3aff6,
'100': #a3aff6,
'100-contrast': black,
200: #8293f8,
'200': #8293f8,
'200-contrast': black,
300: #7385f4,
'300': #7385f4,
'300-contrast': black,
400: #5468d9,
'400': #5468d9,
'400-contrast': black,
500: #3f51b5,
'500': #3f51b5,
'500-contrast': white,
600: #39479c,
'600': #39479c,
'600-contrast': white,
700: #333d83,
'700': #333d83,
'700-contrast': white,
800: #2e3172,
'800': #2e3172,
'800-contrast': white,
900: #262851,
'900': #262851,
'900-contrast': white,
'A100': #39479c,
'A100-contrast': white,
Expand All @@ -83,47 +83,47 @@ $palette: (
'A700-contrast': white,
),
'gray': (
50: #24252c,
'50': #24252c,
'50-contrast': white,
100: #3b3d47,
'100': #3b3d47,
'100-contrast': white,
200: #545762,
'200': #545762,
'200-contrast': white,
300: #6c707a,
'300': #6c707a,
'300-contrast': white,
400: #9a9da2,
'400': #9a9da2,
'400-contrast': black,
500: #c3c4c7,
'500': #c3c4c7,
'500-contrast': black,
600: #d6d8dc,
'600': #d6d8dc,
'600-contrast': black,
700: #ebedf2,
'700': #ebedf2,
'700-contrast': black,
800: #f8f8fa,
'800': #f8f8fa,
'800-contrast': black,
900: #fcfcfd,
'900': #fcfcfd,
'900-contrast': black,
),
'info': (
50: #f1c3ff,
'50': #f1c3ff,
'50-contrast': black,
100: #e89eff,
'100': #e89eff,
'100-contrast': black,
200: #dd71ff,
'200': #dd71ff,
'200-contrast': black,
300: #da64ff,
'300': #da64ff,
'300-contrast': black,
400: #bc34d3,
'400': #bc34d3,
'400-contrast': white,
500: #9c27b0,
'500': #9c27b0,
'500-contrast': white,
600: #8c16a0,
'600': #8c16a0,
'600-contrast': white,
700: #7f1192,
'700': #7f1192,
'700-contrast': white,
800: #6f0a80,
'800': #6f0a80,
'800-contrast': white,
900: #5c056b,
'900': #5c056b,
'900-contrast': white,
'A100': #8c16a0,
'A100-contrast': white,
Expand All @@ -135,25 +135,25 @@ $palette: (
'A700-contrast': white,
),
'success': (
50: #edf3e7,
'50': #edf3e7,
'50-contrast': black,
100: #d2e2c3,
'100': #d2e2c3,
'100-contrast': black,
200: #b4cf9c,
'200': #b4cf9c,
'200-contrast': black,
300: #95bc74,
'300': #95bc74,
'300-contrast': black,
400: #7fad56,
'400': #7fad56,
'400-contrast': black,
500: #689f38,
'500': #689f38,
'500-contrast': black,
600: #5a912a,
'600': #5a912a,
'600-contrast': black,
700: #4e8222,
'700': #4e8222,
'700-contrast': white,
800: #3d7012,
'800': #3d7012,
'800-contrast': white,
900: #316109,
'900': #316109,
'900-contrast': white,
'A100': #5a912a,
'A100-contrast': black,
Expand All @@ -165,25 +165,25 @@ $palette: (
'A700-contrast': white,
),
'warn': (
50: #fed7b7,
'50': #fed7b7,
'50-contrast': black,
100: #ffc696,
'100': #ffc696,
'100-contrast': black,
200: #ffad67,
'200': #ffad67,
'200-contrast': black,
300: #fb8f32,
'300': #fb8f32,
'300-contrast': black,
400: #fa7b0e,
'400': #fa7b0e,
'400-contrast': black,
500: #f56b1d,
'500': #f56b1d,
'500-contrast': black,
600: #f05a2b,
'600': #f05a2b,
'600-contrast': black,
700: #ec4820,
'700': #ec4820,
'700-contrast': black,
800: #df370e,
'800': #df370e,
'800-contrast': black,
900: #d22900,
'900': #d22900,
'900-contrast': white,
'A100': #f05a2b,
'A100-contrast': black,
Expand All @@ -195,25 +195,25 @@ $palette: (
'A700-contrast': white,
),
'error': (
50: #ffebf0,
'50': #ffebf0,
'50-contrast': black,
100: #ffb0b7,
'100': #ffb0b7,
'100-contrast': black,
200: #fc7f8a,
'200': #fc7f8a,
'200-contrast': black,
300: #ec5461,
'300': #ec5461,
'300-contrast': black,
400: #dd3544,
'400': #dd3544,
'400-contrast': black,
500: #cf1a2b,
'500': #cf1a2b,
'500-contrast': white,
600: #c31223,
'600': #c31223,
'600-contrast': white,
700: #b90415,
'700': #b90415,
'700-contrast': white,
800: #ae0111,
'800': #ae0111,
'800-contrast': white,
900: #9f000f,
'900': #9f000f,
'900-contrast': white,
'A100': #c31223,
'A100-contrast': white,
Expand Down
Loading

0 comments on commit 78c3dfe

Please sign in to comment.