Skip to content

Commit

Permalink
feat(indigo): implement new theme changes (#158) (#176)
Browse files Browse the repository at this point in the history 
* refactor(indigo):  implement foundations (#158)

* feat(avatar): update indigo avatar (#162)

* feat(icon): update icon sizes for new indigo theme (#174)

* feat(checkbox): update checkbox to new indigo design theme (#163)

* feat(button/icon-button): update indigo schemas for new ui kit (#183)

* refactor(input): implement indigo design changes (#165)

* feat(card): implement indigo design changes (#186)

* feat(dialog): update indigo dialog schemas for new ui kit (#187)

* feat(dialog): update indigo dialog schemas for new ui kit

* feat(dialog): update background in light schema

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

* feat(button-group): implement indigo design changes (#184)

* feat(radio): update schemas for new indigo ui kit (#185)

Co-authored-by: Simeon Simeonoff <[email protected]>

* feat(button): add icon colors to schemas (#190)

* feat(banner): implement indigo design changes (#197)

* feat(snackbar): implement indigo design changes (#196)

Co-authored-by: Simeon Simeonoff <[email protected]>

* fix(indigo-palette): update primary/secondary 400 variant

* fix(dark-indigo): update primary/secondary 400 variant

* fix(color): function not returning hex value for handmade palettes

* fix(schemas): apply requested changes

* feat(carousel): implement indigo design changes (#189)

* feat(elevations): add indigo elevation levels

* Update _index.scss

* feat(expansion-panel): update indigo schema for new ui kit (#199)

* fix(schemas): expansion panel & button group

---------

Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Dilyana Yarabanova <[email protected]>
Co-authored-by: sivanova <[email protected]>
  • Loading branch information
@simeonoff @SisIvanova @didimmova
4 people authored Mar 12, 2024
1 parent de57648 commit 49616e3
Show file tree
Hide file tree
Showing 39 changed files with 2,978 additions and 887 deletions.
8 changes: 7 additions & 1 deletion sass/color/_functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,13 @@ $_enhanced-accessibility: false;
@return if($contrast, $_mix-alpha, $_hsl-alpha);
}

@return rgba(map.get($c, $variant), $alpha: $_alpha);
$_shade: map.get($c, $variant);

@if meta.type-of($_shade) == 'list' and list.length($_shade) == 3 {
$_shade: hsl($_shade...);
}

@return rgba($_shade, $alpha: $_alpha);
}

/// Retrieves a contrast text color for a given color variant from a color palette.
Expand Down
24 changes: 13 additions & 11 deletions sass/color/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,21 @@
@mixin _base($color, $shade, $value) {
@if $shade == 500 {
$_type: meta.type-of($value);
$_color: '' + $color;

@if $_type == 'color' {
--ig-#{$color}-h: #{math.round(color.hue($value))};
--ig-#{$color}-s: #{math.round(color.saturation($value))};
--ig-#{$color}-l: #{math.round(color.lightness($value))};
--ig-#{$color}-a: #{color.alpha($value)};
--ig-#{$_color}-h: #{math.round(color.hue($value))};
--ig-#{$_color}-s: #{math.round(color.saturation($value))};
--ig-#{$_color}-l: #{math.round(color.lightness($value))};
--ig-#{$_color}-a: #{color.alpha($value)};
}

// Cover handmade palettes with hsl values for base color
@if $_type == 'list' and list.length($value) == 3 {
--ig-#{$color}-h: #{list.nth($value, 1)};
--ig-#{$color}-s: #{list.nth($value, 2)};
--ig-#{$color}-l: #{list.nth($value, 3)};
--ig-#{$color}-a: 1;
--ig-#{$_color}-h: #{list.nth($value, 1)};
--ig-#{$_color}-s: #{list.nth($value, 2)};
--ig-#{$_color}-l: #{list.nth($value, 3)};
--ig-#{$_color}-a: 1;
}
}
}
Expand All @@ -39,19 +40,20 @@
$_shade: meta.type-of($shade) == 'string';
$_hsl: if($_shade, string.index($shade, 'hsl'), false);
$_contrast: if($_shade, string.index($shade, 'contrast'), false);
$_color: '' + $color;

@if $_hsl {
$variant: string.slice($shade, 1, string.index($shade, '-hsl') - 1);

--ig-#{$color}-#{$variant}: #{$value};
--ig-#{$_color}-#{$variant}: #{$value};
}

@if not($_hsl) and not($_contrast) {
--ig-#{$color}-#{$shade}: #{$value};
--ig-#{$_color}-#{$shade}: #{$value};
}

@if $_contrast and $contrast {
--ig-#{$color}-#{$shade}: #{$value};
--ig-#{$_color}-#{$shade}: #{$value};
}
}

Expand Down
236 changes: 218 additions & 18 deletions sass/color/presets/dark/_indigo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,222 @@
/// Generates the dark indigo palette.
/// @type Map
/// @name dark-indigo-palette
/// @prop {Color} primary [#3f51b5] - The primary color
/// @prop {Color} secondary [#3f51b5] - The secondary color
/// @prop {Color} gray [hsl(262deg 8% 98%)] - The gray color
/// @prop {Color} surface [#2a2b2f] - The surface color
/// @prop {Color} info [#9208bc] - The info color
/// @prop {Color} success [#689f38] - The success color
/// @prop {Color} warn [#ff9800] - The warn color
/// @prop {Color} error [#cf1a2b] - The error color
$palette: palette(
$primary: #3f51b5,
$secondary: #3f51b5,
$gray: hsl(262deg 8% 98%),
$surface: #2a2b2f,
$info: #9208bc,
$success: #689f38,
$warn: #ff9800,
$error: #cf1a2b,
$variant: 'indigo',
/// @prop {Color} primary [#3f51b5] - The 500 variant of the primary color.
/// @prop {Color} secondary [#3f51b5] - The 500 variant of the secondary color.
/// @prop {Color} gray [#9a9da2] - The 500 variant of the gray color.
/// @prop {Color} info [#9c27b0] - The 500 variant of the info color.
/// @prop {Color} success [#689f38] - The 500 variant of the success color.
/// @prop {Color} warn [#f56b1d] - The 500 variant of the warn color.
/// @prop {Color} error [#cf1a2b] - The 500 variant of the error color.
/// @prop {Color} surface [#1e1f24] - The surface color.
$palette: (
primary: (
50: to-hsl(#c5cdff),
'50-contrast': black,
100: to-hsl(#a3aff6),
'100-contrast': black,
200: to-hsl(#8293f8),
'200-contrast': black,
300: to-hsl(#7385f4),
'300-contrast': black,
400: to-hsl(#5468d9),
'400-contrast': black,
500: to-hsl(#3f51b5),
'500-contrast': white,
600: to-hsl(#39479c),
'600-contrast': white,
700: to-hsl(#333d83),
'700-contrast': white,
800: to-hsl(#2e3172),
'800-contrast': white,
900: to-hsl(#262851),
'900-contrast': white,
'A100': to-hsl(#39479c),
'A100-contrast': white,
'A200': to-hsl(#333d83),
'A200-contrast': white,
'A400': to-hsl(#2e3172),
'A400-contrast': white,
'A700': to-hsl(#262851),
'A700-contrast': white,
),
secondary: (
50: to-hsl(#c5cdff),
'50-contrast': black,
100: to-hsl(#a3aff6),
'100-contrast': black,
200: to-hsl(#8293f8),
'200-contrast': black,
300: to-hsl(#7385f4),
'300-contrast': black,
400: to-hsl(#5468d9),
'400-contrast': black,
500: to-hsl(#3f51b5),
'500-contrast': white,
600: to-hsl(#39479c),
'600-contrast': white,
700: to-hsl(#333d83),
'700-contrast': white,
800: to-hsl(#2e3172),
'800-contrast': white,
900: to-hsl(#262851),
'900-contrast': white,
'A100': to-hsl(#39479c),
'A100-contrast': white,
'A200': to-hsl(#333d83),
'A200-contrast': white,
'A400': to-hsl(#2e3172),
'A400-contrast': white,
'A700': to-hsl(#262851),
'A700-contrast': white,
),
gray: (
50: to-hsl(#24252c),
'50-contrast': white,
100: to-hsl(#3b3d47),
'100-contrast': white,
200: to-hsl(#545762),
'200-contrast': white,
300: to-hsl(#6c707a),
'300-contrast': white,
400: to-hsl(#9a9da2),
'400-contrast': black,
500: to-hsl(#c3c4c7),
'500-contrast': black,
600: to-hsl(#d6d8dc),
'600-contrast': black,
700: to-hsl(#ebedf2),
'700-contrast': black,
800: to-hsl(#f8f8fa),
'800-contrast': black,
900: to-hsl(#fcfcfd),
'900-contrast': black,
),
info: (
50: to-hsl(#f1c3ff),
'50-contrast': black,
100: to-hsl(#e89eff),
'100-contrast': black,
200: to-hsl(#dd71ff),
'200-contrast': black,
300: to-hsl(#da64ff),
'300-contrast': black,
400: to-hsl(#bc34d3),
'400-contrast': white,
500: to-hsl(#9c27b0),
'500-contrast': white,
600: to-hsl(#8c16a0),
'600-contrast': white,
700: to-hsl(#7f1192),
'700-contrast': white,
800: to-hsl(#6f0a80),
'800-contrast': white,
900: to-hsl(#5c056b),
'900-contrast': white,
'A100': to-hsl(#8c16a0),
'A100-contrast': white,
'A200': to-hsl(#7f1192),
'A200-contrast': white,
'A400': to-hsl(#6f0a80),
'A400-contrast': white,
'A700': to-hsl(#5c056b),
'A700-contrast': white,
),
success: (
50: to-hsl(#edf3e7),
'50-contrast': black,
100: to-hsl(#d2e2c3),
'100-contrast': black,
200: to-hsl(#b4cf9c),
'200-contrast': black,
300: to-hsl(#95bc74),
'300-contrast': black,
400: to-hsl(#7fad56),
'400-contrast': black,
500: to-hsl(#689f38),
'500-contrast': black,
600: to-hsl(#5a912a),
'600-contrast': black,
700: to-hsl(#4e8222),
'700-contrast': white,
800: to-hsl(#3d7012),
'800-contrast': white,
900: to-hsl(#316109),
'900-contrast': white,
'A100': to-hsl(#5a912a),
'A100-contrast': black,
'A200': to-hsl(#4e8222),
'A200-contrast': white,
'A400': to-hsl(#3d7012),
'A400-contrast': white,
'A700': to-hsl(#316109),
'A700-contrast': white,
),
warn: (
50: to-hsl(#fed7b7),
'50-contrast': black,
100: to-hsl(#ffc696),
'100-contrast': black,
200: to-hsl(#ffad67),
'200-contrast': black,
300: to-hsl(#fb8f32),
'300-contrast': black,
400: to-hsl(#fa7b0e),
'400-contrast': black,
500: to-hsl(#f56b1d),
'500-contrast': black,
600: to-hsl(#f05a2b),
'600-contrast': black,
700: to-hsl(#ec4820),
'700-contrast': black,
800: to-hsl(#df370e),
'800-contrast': black,
900: to-hsl(#d22900),
'900-contrast': white,
'A100': to-hsl(#f05a2b),
'A100-contrast': black,
'A200': to-hsl(#ec4820),
'A200-contrast': black,
'A400': to-hsl(#df370e),
'A400-contrast': black,
'A700': to-hsl(#d22900),
'A700-contrast': white,
),
error: (
50: to-hsl(#ffebf0),
'50-contrast': black,
100: to-hsl(#ffb0b7),
'100-contrast': black,
200: to-hsl(#fc7f8a),
'200-contrast': black,
300: to-hsl(#ec5461),
'300-contrast': black,
400: to-hsl(#dd3544),
'400-contrast': black,
500: to-hsl(#cf1a2b),
'500-contrast': white,
600: to-hsl(#c31223),
'600-contrast': white,
700: to-hsl(#b90415),
'700-contrast': white,
800: to-hsl(#ae0111),
'800-contrast': white,
900: to-hsl(#9f000f),
'900-contrast': white,
'A100': to-hsl(#c31223),
'A100-contrast': white,
'A200': to-hsl(#b90415),
'A200-contrast': white,
'A400': to-hsl(#ae0111),
'A400-contrast': white,
'A700': to-hsl(#9f000f),
'A700-contrast': white,
),
surface: (
500: to-hsl(#1e1f24),
'500-contrast': white,
),
_meta: (
variant: 'indigo',
),
);
Loading

0 comments on commit 49616e3

Please sign in to comment.