From 13e449f4b04a1321950685a5c0966e8aca067531 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 23 Nov 2021 17:20:49 +0200
Subject: [PATCH 01/27] feat(themes): add dark theme presets

---
 .storybook/preview.js                        |  50 ++++-
 src/components/card/card.bootstrap.scss      |   2 +-
 src/styles/themes/dark/bootstrap.scss        | 200 +++++++++++++++++++
 src/styles/themes/{ => dark}/fluent.scss     |  20 +-
 src/styles/themes/{ => dark}/indigo.scss     |  26 +--
 src/styles/themes/{ => dark}/material.scss   |   2 +-
 src/styles/themes/{ => light}/bootstrap.scss |  24 +--
 src/styles/themes/light/fluent.scss          | 166 +++++++++++++++
 src/styles/themes/light/indigo.scss          | 195 ++++++++++++++++++
 src/styles/themes/light/material.scss        |  29 +++
 stories/story.ts                             |   3 +-
 11 files changed, 669 insertions(+), 48 deletions(-)
 create mode 100644 src/styles/themes/dark/bootstrap.scss
 rename src/styles/themes/{ => dark}/fluent.scss (85%)
 rename src/styles/themes/{ => dark}/indigo.scss (83%)
 rename src/styles/themes/{ => dark}/material.scss (95%)
 rename src/styles/themes/{ => light}/bootstrap.scss (86%)
 create mode 100644 src/styles/themes/light/fluent.scss
 create mode 100644 src/styles/themes/light/indigo.scss
 create mode 100644 src/styles/themes/light/material.scss

diff --git a/.storybook/preview.js b/.storybook/preview.js
index c312f977c..aa8fd8b6c 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,11 +1,15 @@
 import { html } from 'lit-html';
 
 const Themes = {
-  material: await import('../src/styles/themes/material.scss'),
-  bootstrap: await import('../src/styles/themes/bootstrap.scss'),
-  fluent: await import('../src/styles/themes/fluent.scss'),
-  indigo: await import('../src/styles/themes/indigo.scss')
-}
+  material_light: await import('../src/styles/themes/light/material.scss'),
+  bootstrap_light: await import('../src/styles/themes/light/bootstrap.scss'),
+  fluent_light: await import('../src/styles/themes/light/fluent.scss'),
+  indigo_light: await import('../src/styles/themes/light/indigo.scss'),
+  material_dark: await import('../src/styles/themes/dark/material.scss'),
+  bootstrap_dark: await import('../src/styles/themes/dark/bootstrap.scss'),
+  fluent_dark: await import('../src/styles/themes/dark/fluent.scss'),
+  indigo_dark: await import('../src/styles/themes/dark/indigo.scss'),
+};
 
 export const globalTypes = {
   theme: {
@@ -18,6 +22,16 @@ export const globalTypes = {
       showName: 'True',
     },
   },
+  variant: {
+    name: 'Variant',
+    description: 'Theme variant',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'mirror',
+      items: ['light', 'dark'],
+      showName: 'True',
+    },
+  },
   direction: {
     name: 'Direction',
     description: 'Component direction',
@@ -26,16 +40,32 @@ export const globalTypes = {
       icon: 'accessibility',
       items: ['ltr', 'rtl'],
       showName: 'True',
-    }
-  }
+    },
+  },
+};
+
+export const parameters = {
+  backgrounds: {
+    default: 'light',
+    values: [
+      {
+        name: 'light',
+        value: '#fff',
+      },
+      {
+        name: 'dark',
+        value: '#333',
+      },
+    ],
+  },
 };
 
-const getTheme = (themeName) => {
-  return Themes[themeName];
+const getTheme = (themeName, variant) => {
+  return Themes[`${themeName}_${variant}`];
 };
 
 const themeProvider = (Story, context) => {
-  const theme = getTheme(context.globals.theme);
+  const theme = getTheme(context.globals.theme, context.globals.variant);
   return html`
     <style>
       ${theme.default}
diff --git a/src/components/card/card.bootstrap.scss b/src/components/card/card.bootstrap.scss
index 41a8b6c51..2043efd76 100644
--- a/src/components/card/card.bootstrap.scss
+++ b/src/components/card/card.bootstrap.scss
@@ -5,7 +5,7 @@
 
 @mixin theme() {
     igc-card {
-        background: white;
+        background: #{utils.color(surface, 500)};
         border-radius: #{utils.rem(4px)};
     }
 
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
new file mode 100644
index 000000000..69455d3d6
--- /dev/null
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -0,0 +1,200 @@
+@use '../../utilities' as utils;
+@use '../../../components/badge/badge.bootstrap' as badge;
+@use '../../../components/button/button.bootstrap' as button;
+@use '../../../components/button/icon-button.bootstrap' as icon-button;
+@use '../../../components/card/card.bootstrap' as card;
+@use '../../../components/checkbox/checkbox.bootstrap' as checkbox;
+@use '../../../components/radio/radio.bootstrap' as radio;
+@use '../../../components/checkbox/switch.bootstrap' as switch;
+@use '../../../components/navbar/navbar.bootstrap' as navbar;
+@use '../../../components/list/list.bootstrap' as list;
+@use '../../../components/calendar/calendar.bootstrap' as calendar;
+@use '../../../components/input/input.bootstrap' as input;
+
+$palette: utils.palette(
+    $primary: #0d6efd,
+    $secondary: #6c757d,
+    $gray: #fff,
+    $surface: #333,
+    $info: #0dcaf0,
+    $success: #198754,
+    $warn: #ffc107,
+    $error: #dc3545,
+) !default;
+
+$elevations: utils.elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+
+$bootstrap_h1: utils.type-style(
+    $font-size: utils.rem(40px),
+    $font-weight: 500,
+    $line-height: utils.rem(48px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+
+$bootstrap_h2: utils.type-style(
+    $font-size: utils.rem(32px),
+    $font-weight: 500,
+    $line-height: utils.rem(38.4px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+
+$bootstrap_h3: utils.type-style(
+    $font-size: utils.rem(28px),
+    $font-weight: 500,
+    $line-height: utils.rem(33.6px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+
+$bootstrap_h4: utils.type-style(
+    $font-size: utils.rem(24px),
+    $font-weight: 500,
+    $line-height: utils.rem(28.8px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+
+$bootstrap_h5: utils.type-style(
+    $font-size: utils.rem(20px),
+    $font-weight: 500,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+
+$bootstrap_h6: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(19.2px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+
+$bootstrap_body-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$bootstrap_body-2: utils.type-style(
+    $font-size: utils.rem(14.4px),
+    $font-weight: 400,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$bootstrap_subtitle-1: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$bootstrap_subtitle-2: utils.type-style(
+    $font-size: utils.rem(14.4px),
+    $font-weight: 400,
+    $line-height: utils.rem(21.6px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$bootstrap_button: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 500,
+    $line-height: utils.rem(24px),
+    $text-transform: capitalize,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$bootstrap_caption: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 400,
+    $letter-spacing: utils.rem(.4px),
+    $line-height: utils.rem(16px),
+    $text-transform: none
+);
+
+$bootstrap_overline: utils.type-style(
+    $font-size: utils.rem(10px),
+    $font-weight: 400,
+    $letter-spacing: utils.rem(1.5px),
+    $line-height: utils.rem(16px),
+    $text-transform: uppercase
+);
+
+$bootstrap_weekday: utils.type-style(
+    $font-size: utils.rem(13px),
+    $font-weight: 400,
+    $line-height: normal,
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$_base-scale: utils.type-scale(
+    $_meta: (variant: 'bootstrap'),
+    $h1: $bootstrap_h1,
+    $h2: $bootstrap_h2,
+    $h3: $bootstrap_h3,
+    $h4: $bootstrap_h4,
+    $h5: $bootstrap_h5,
+    $h6: $bootstrap_h6,
+    $subtitle-1: $bootstrap_subtitle-1,
+    $subtitle-2: $bootstrap_subtitle-2,
+    $body-1: $bootstrap_body-1,
+    $body-2: $bootstrap_body-2,
+    $button: $bootstrap_button,
+    $caption: $bootstrap_caption,
+    $overline: $bootstrap_overline
+);
+
+$type-scale: utils.extend($_base-scale, (
+    calendar-labels: $bootstrap_weekday,
+));
+
+:root {
+    --igc-border-radius: #{utils.rem(2px)};
+    --igc-spacing-small: #{utils.rem(2px)};
+    --igc-spacing-medium: #{utils.rem(4px)};
+    --igc-spacing-large: #{utils.rem(8px)};
+    @include utils.palette($palette);
+    @include utils.elevations($elevations);
+    @include utils.typography(
+        $font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+        $type-scale: $type-scale
+    );
+}
+
+@include badge.theme();
+@include button.theme();
+@include card.theme();
+@include checkbox.theme();
+@include radio.theme();
+@include switch.theme();
+@include navbar.theme();
+@include list.theme();
+@include calendar.theme();
+@include input.theme();
+@include icon-button.theme();
+
diff --git a/src/styles/themes/fluent.scss b/src/styles/themes/dark/fluent.scss
similarity index 85%
rename from src/styles/themes/fluent.scss
rename to src/styles/themes/dark/fluent.scss
index 02a2c06a4..755086f75 100644
--- a/src/styles/themes/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -1,13 +1,13 @@
-@use '../utilities' as utils;
-@use '../../components/button/button.fluent' as button;
-@use '../../components/button/icon-button.fluent' as icon-button;
-@use '../../components/card/card.fluent' as card;
-@use '../../components/checkbox/checkbox.fluent' as checkbox;
-@use '../../components/radio/radio.fluent' as radio;
-@use '../../components/list/list.fluent' as list;
-@use '../../components/checkbox/switch.fluent' as switch;
-@use '../../components/calendar/calendar.fluent' as calendar;
-@use '../../components/input/input.fluent' as input;
+@use '../../utilities' as utils;
+@use '../../../components/button/button.fluent' as button;
+@use '../../../components/button/icon-button.fluent' as icon-button;
+@use '../../../components/card/card.fluent' as card;
+@use '../../../components/checkbox/checkbox.fluent' as checkbox;
+@use '../../../components/radio/radio.fluent' as radio;
+@use '../../../components/list/list.fluent' as list;
+@use '../../../components/checkbox/switch.fluent' as switch;
+@use '../../../components/calendar/calendar.fluent' as calendar;
+@use '../../../components/input/input.fluent' as input;
 
 $palette: utils.palette(
     $primary: #0078d4,
diff --git a/src/styles/themes/indigo.scss b/src/styles/themes/dark/indigo.scss
similarity index 83%
rename from src/styles/themes/indigo.scss
rename to src/styles/themes/dark/indigo.scss
index 2901d755d..65da0d916 100644
--- a/src/styles/themes/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -1,16 +1,16 @@
-@use '../utilities' as utils;
-@use '../../components/button/button.indigo' as button;
-@use '../../components/button/icon-button.indigo' as icon-button;
-@use '../../components/card/card.indigo' as card;
-@use '../../components/checkbox/checkbox.indigo' as checkbox;
-@use '../../components/radio/radio.indigo' as radio;
-@use '../../components/checkbox/switch.indigo' as switch;
-@use '../../components/navbar/navbar.indigo' as navbar;
-@use '../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
-@use '../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
-@use '../../components/nav-drawer/nav-drawer-header-item.indigo' as nav-drawer-header;
-@use '../../components/list/list.indigo' as list;
-@use '../../components/input/input.indigo' as input;
+@use '../../utilities' as utils;
+@use '../../../components/button/button.indigo' as button;
+@use '../../../components/button/icon-button.indigo' as icon-button;
+@use '../../../components/card/card.indigo' as card;
+@use '../../../components/checkbox/checkbox.indigo' as checkbox;
+@use '../../../components/radio/radio.indigo' as radio;
+@use '../../../components/checkbox/switch.indigo' as switch;
+@use '../../../components/navbar/navbar.indigo' as navbar;
+@use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
+@use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
+@use '../../../components/nav-drawer/nav-drawer-header-item.indigo' as nav-drawer-header;
+@use '../../../components/list/list.indigo' as list;
+@use '../../../components/input/input.indigo' as input;
 
 $palette: utils.palette(
     $primary: #3f51b5,
diff --git a/src/styles/themes/material.scss b/src/styles/themes/dark/material.scss
similarity index 95%
rename from src/styles/themes/material.scss
rename to src/styles/themes/dark/material.scss
index 760753535..fac5b10b5 100644
--- a/src/styles/themes/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -1,4 +1,4 @@
-@use '../utilities' as utils;
+@use '../../utilities' as utils;
 
 $palette: utils.palette(
     $primary: #09f,
diff --git a/src/styles/themes/bootstrap.scss b/src/styles/themes/light/bootstrap.scss
similarity index 86%
rename from src/styles/themes/bootstrap.scss
rename to src/styles/themes/light/bootstrap.scss
index 405485ceb..83722f370 100644
--- a/src/styles/themes/bootstrap.scss
+++ b/src/styles/themes/light/bootstrap.scss
@@ -1,15 +1,15 @@
-@use '../utilities' as utils;
-@use '../../components/badge/badge.bootstrap' as badge;
-@use '../../components/button/button.bootstrap' as button;
-@use '../../components/button/icon-button.bootstrap' as icon-button;
-@use '../../components/card/card.bootstrap' as card;
-@use '../../components/checkbox/checkbox.bootstrap' as checkbox;
-@use '../../components/radio/radio.bootstrap' as radio;
-@use '../../components/checkbox/switch.bootstrap' as switch;
-@use '../../components/navbar/navbar.bootstrap' as navbar;
-@use '../../components/list/list.bootstrap' as list;
-@use '../../components/calendar/calendar.bootstrap' as calendar;
-@use '../../components/input/input.bootstrap' as input;
+@use '../../utilities' as utils;
+@use '../../../components/badge/badge.bootstrap' as badge;
+@use '../../../components/button/button.bootstrap' as button;
+@use '../../../components/button/icon-button.bootstrap' as icon-button;
+@use '../../../components/card/card.bootstrap' as card;
+@use '../../../components/checkbox/checkbox.bootstrap' as checkbox;
+@use '../../../components/radio/radio.bootstrap' as radio;
+@use '../../../components/checkbox/switch.bootstrap' as switch;
+@use '../../../components/navbar/navbar.bootstrap' as navbar;
+@use '../../../components/list/list.bootstrap' as list;
+@use '../../../components/calendar/calendar.bootstrap' as calendar;
+@use '../../../components/input/input.bootstrap' as input;
 
 $palette: utils.palette(
     $primary: #0d6efd,
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
new file mode 100644
index 000000000..755086f75
--- /dev/null
+++ b/src/styles/themes/light/fluent.scss
@@ -0,0 +1,166 @@
+@use '../../utilities' as utils;
+@use '../../../components/button/button.fluent' as button;
+@use '../../../components/button/icon-button.fluent' as icon-button;
+@use '../../../components/card/card.fluent' as card;
+@use '../../../components/checkbox/checkbox.fluent' as checkbox;
+@use '../../../components/radio/radio.fluent' as radio;
+@use '../../../components/list/list.fluent' as list;
+@use '../../../components/checkbox/switch.fluent' as switch;
+@use '../../../components/calendar/calendar.fluent' as calendar;
+@use '../../../components/input/input.fluent' as input;
+
+$palette: utils.palette(
+    $primary: #0078d4,
+    $secondary: #0078d4,
+    $success: #107c10,
+    $warn: #797673,
+    $error: #a80000,
+) !default;
+
+$elevations: utils.elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+
+$fluent_h1: utils.type-style(
+    $font-size: utils.rem(68px),
+    $font-weight: 700,
+    $line-height: utils.rem(76px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_h2: utils.type-style(
+    $font-size: utils.rem(42px),
+    $font-weight: 700,
+    $line-height: utils.rem(52px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_h3: utils.type-style(
+    $font-size: utils.rem(32px),
+    $font-weight: 600,
+    $line-height: utils.rem(40px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_h4: utils.type-style(
+    $font-size: utils.rem(28px),
+    $font-weight: 400,
+    $line-height: utils.rem(36px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_h5: utils.type-style(
+    $font-size: utils.rem(20px),
+    $font-weight: 400,
+    $line-height: utils.rem(28px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_h6: utils.type-style(
+    $font-size: utils.rem(18px),
+    $font-weight: 400,
+    $line-height: utils.rem(22px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_body-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(22px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_body-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_subtitle-1: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 400,
+    $line-height: utils.rem(16px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_subtitle-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(16px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$fluent_button: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 600,
+    $line-height: normal,
+    $text-transform: capitalize,
+    $margin-top: 0,
+    $margin-bottom: 0,
+    $letter-spacing: 0,
+);
+
+$fluent-type-scale: utils.type-scale(
+    $_meta: (variant: 'fluent'),
+    $h1: $fluent_h1,
+    $h2: $fluent_h2,
+    $h3: $fluent_h3,
+    $h4: $fluent_h4,
+    $h5: $fluent_h5,
+    $h6: $fluent_h6,
+    $subtitle-1: $fluent_subtitle-1,
+    $subtitle-2: $fluent_subtitle-2,
+    $body-1: $fluent_body-1,
+    $body-2: $fluent_body-2,
+    $button: $fluent_button
+);
+
+$type-scale: utils.extend($fluent-type-scale);
+
+:root {
+    --igc-border-radius: #{utils.rem(2px)};
+    --igc-spacing-small: #{utils.rem(2px)};
+    --igc-spacing-medium: #{utils.rem(4px)};
+    --igc-spacing-large: #{utils.rem(8px)};
+    @include utils.palette($palette);
+    @include utils.elevations($elevations);
+    @include utils.typography(
+        $font-family: '\'Open Sans\', Helvetica, Arial, sans-serif',
+        $type-scale: $type-scale
+    );
+}
+
+@include button.theme();
+@include card.theme();
+@include checkbox.theme();
+@include radio.theme();
+@include list.theme();
+@include switch.theme();
+@include calendar.theme();
+@include input.theme();
+@include icon-button.theme();
+
+
diff --git a/src/styles/themes/light/indigo.scss b/src/styles/themes/light/indigo.scss
new file mode 100644
index 000000000..65da0d916
--- /dev/null
+++ b/src/styles/themes/light/indigo.scss
@@ -0,0 +1,195 @@
+@use '../../utilities' as utils;
+@use '../../../components/button/button.indigo' as button;
+@use '../../../components/button/icon-button.indigo' as icon-button;
+@use '../../../components/card/card.indigo' as card;
+@use '../../../components/checkbox/checkbox.indigo' as checkbox;
+@use '../../../components/radio/radio.indigo' as radio;
+@use '../../../components/checkbox/switch.indigo' as switch;
+@use '../../../components/navbar/navbar.indigo' as navbar;
+@use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
+@use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
+@use '../../../components/nav-drawer/nav-drawer-header-item.indigo' as nav-drawer-header;
+@use '../../../components/list/list.indigo' as list;
+@use '../../../components/input/input.indigo' as input;
+
+$palette: utils.palette(
+    $primary: #3f51b5,
+    $secondary: #3f51b5,
+    $gray: hsl(236, 8%, 5%),
+    $surface: #fff,
+    $info: #9208bc,
+    $success: #689f38,
+    $warn: #ff9800,
+    $error: #cf1a2b
+) !default;
+
+$elevations: utils.elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+
+$indigo_h1: utils.type-style(
+    $font-size: utils.rem(96px),
+    $font-weight: 200,
+    $line-height: utils.rem(112px),
+    $letter-spacing: utils.rem(-1.54px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_h2: utils.type-style(
+    $font-size: utils.rem(60px),
+    $font-weight: 200,
+    $line-height: utils.rem(72px),
+    $letter-spacing: utils.rem(-.48px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_h3: utils.type-style(
+    $font-size: utils.rem(48px),
+    $font-weight: 200,
+    $line-height: utils.rem(56px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_h4: utils.type-style(
+    $font-size: utils.rem(36px),
+    $font-weight: 200,
+    $line-height: utils.rem(42px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_h5: utils.type-style(
+    $font-size: utils.rem(24px),
+    $font-weight: 200,
+    $line-height: utils.rem(28px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_h6: utils.type-style(
+    $font-size: utils.rem(20px),
+    $font-weight: 600,
+    $line-height: utils.rem(26px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_body-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_body-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_subtitle-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 600,
+    $line-height: utils.rem(22px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_subtitle-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 700,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_button: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 700,
+    $line-height: normal,
+    $text-transform: uppercase,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_caption: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 400,
+    $line-height: utils.rem(16px),
+    $text-transform: normal,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo_overline: utils.type-style(
+    $font-size: utils.rem(10px),
+    $font-weight: 700,
+    $line-height: utils.rem(14px),
+    $text-transform: uppercase,
+    $letter-spacing: utils.rem(.2px),
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+
+$indigo-type-scale: utils.type-scale(
+    $_meta: (variant: 'indigo'),
+    $h1: $indigo_h1,
+    $h2: $indigo_h2,
+    $h3: $indigo_h3,
+    $h4: $indigo_h4,
+    $h5: $indigo_h5,
+    $h6: $indigo_h6,
+    $subtitle-1: $indigo_subtitle-1,
+    $subtitle-2: $indigo_subtitle-2,
+    $body-1: $indigo_body-1,
+    $body-2: $indigo_body-2,
+    $button: $indigo_button,
+    $caption: $indigo_caption,
+    $overline: $indigo_overline
+);
+
+$type-scale: utils.extend($indigo-type-scale);
+
+:root {
+    --igc-border-radius: #{utils.rem(2px)};
+    --igc-spacing-small: #{utils.rem(2px)};
+    --igc-spacing-medium: #{utils.rem(4px)};
+    --igc-spacing-large: #{utils.rem(8px)};
+    @include utils.palette($palette);
+    @include utils.elevations($elevations);
+    @include utils.typography(
+        $font-family: '\'Nunito Sans\', sans-serif',
+        $type-scale: $type-scale
+    );
+}
+
+@include button.theme();
+@include card.theme();
+@include checkbox.theme();
+@include radio.theme();
+@include switch.theme();
+@include navbar.theme();
+@include nav-drawer.theme();
+@include nav-drawer-item.theme();
+@include nav-drawer-header.theme();
+@include list.theme();
+@include input.theme();
+@include icon-button.theme();
diff --git a/src/styles/themes/light/material.scss b/src/styles/themes/light/material.scss
new file mode 100644
index 000000000..fac5b10b5
--- /dev/null
+++ b/src/styles/themes/light/material.scss
@@ -0,0 +1,29 @@
+@use '../../utilities' as utils;
+
+$palette: utils.palette(
+    $primary: #09f,
+    $secondary: #e41c77,
+    $gray: #000,
+    $surface: white,
+) !default;
+
+$elevations: utils.elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+
+$type-scale: utils.type-scale();
+
+:root {
+    --igc-border-radius: #{utils.rem(2px)};
+    --igc-spacing-small: #{utils.rem(2px)};
+    --igc-spacing-medium: #{utils.rem(4px)};
+    --igc-spacing-large: #{utils.rem(8px)};
+    @include utils.palette($palette);
+    @include utils.elevations($elevations);
+    @include utils.typography(
+        $font-family: 'Roboto, sans-serif',
+        $type-scale: $type-scale
+    );
+}
diff --git a/stories/story.ts b/stories/story.ts
index 001b6702b..2a8223aba 100644
--- a/stories/story.ts
+++ b/stories/story.ts
@@ -1,6 +1,7 @@
 import { TemplateResult } from 'lit-html';
 
 export type Direction = 'ltr' | 'rtl' | 'auto';
+export type Variant = 'light' | 'dark';
 
 export interface Story<T, K> {
   (args: T, context: K): TemplateResult;
@@ -10,5 +11,5 @@ export interface Story<T, K> {
 }
 
 export interface Context {
-  globals: { theme: string; direction: Direction };
+  globals: { theme: string; direction: Direction; variant: Variant };
 }

From fdbb19d35c0090ec3979ee87b4bd889a78950c37 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Tue, 23 Nov 2021 17:52:45 +0200
Subject: [PATCH 02/27] refactor(themes): update dark palettes

---
 .storybook/preview.js                | 2 +-
 src/styles/themes/dark/fluent.scss   | 2 ++
 src/styles/themes/dark/indigo.scss   | 4 ++--
 src/styles/themes/dark/material.scss | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index aa8fd8b6c..6fc559ec6 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -54,7 +54,7 @@ export const parameters = {
       },
       {
         name: 'dark',
-        value: '#333',
+        value: '#444',
       },
     ],
   },
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 755086f75..2e08b6964 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -12,6 +12,8 @@
 $palette: utils.palette(
     $primary: #0078d4,
     $secondary: #0078d4,
+    $gray: #fff,
+    $surface: #222,
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 65da0d916..7f805ed50 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -15,8 +15,8 @@
 $palette: utils.palette(
     $primary: #3f51b5,
     $secondary: #3f51b5,
-    $gray: hsl(236, 8%, 5%),
-    $surface: #fff,
+    $gray: hsl(262, 8%, 98%),
+    $surface: #2a2b2f,
     $info: #9208bc,
     $success: #689f38,
     $warn: #ff9800,
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index fac5b10b5..4dfb6b7f4 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -3,8 +3,8 @@
 $palette: utils.palette(
     $primary: #09f,
     $secondary: #e41c77,
-    $gray: #000,
-    $surface: white,
+    $gray: #fff,
+    $surface: #222,
 ) !default;
 
 $elevations: utils.elevations(

From 4bf7ba7ea21a7e1dfe6bd8208b3f6ede39abee04 Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Fri, 26 Nov 2021 15:34:08 +0200
Subject: [PATCH 03/27] refactor(calendar-theme): improve dark theme styles.

---
 .../calendar/calendar.bootstrap.scss           |  3 +--
 src/components/calendar/calendar.material.scss |  1 +
 .../calendar/days-view/days-view.material.scss | 18 ++++++++++++++++++
 src/components/calendar/shared-calendar.scss   |  1 +
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/calendar.bootstrap.scss b/src/components/calendar/calendar.bootstrap.scss
index 7be9f3915..85598a666 100644
--- a/src/components/calendar/calendar.bootstrap.scss
+++ b/src/components/calendar/calendar.bootstrap.scss
@@ -11,7 +11,7 @@ $current-color: color(gray, 800);
 $range-preview-background: color(primary, 200);
 $range-preview-color: contrast-color(primary, 600);
 $header-background: color(secondary, 50, .2);
-$header-color: contrast-color(secondary, 50);
+$header-color: contrast-color(gray, 50);
 $header-border-width: rem(1px);
 $border-color: color(gray, 300);
 $date-color: color(gray, 700);
@@ -22,7 +22,6 @@ $days-view-gap: rem(4px);
     igc-calendar {
         border: rem(1px) solid $border-color;
         border-radius: $border-radius;
-        background: transparent;
     }
 
     igc-calendar::part(days-row) {
diff --git a/src/components/calendar/calendar.material.scss b/src/components/calendar/calendar.material.scss
index 8399e56d8..a200535c7 100644
--- a/src/components/calendar/calendar.material.scss
+++ b/src/components/calendar/calendar.material.scss
@@ -8,6 +8,7 @@
     flex-direction: column;
     font-family: var(--igc-font-family);
     background: $calendar-background;
+    color: $calendar-foreground;
 
     > * {
         font-family: var(--igc-font-family);
diff --git a/src/components/calendar/days-view/days-view.material.scss b/src/components/calendar/days-view/days-view.material.scss
index f0045179b..abf4937fd 100644
--- a/src/components/calendar/days-view/days-view.material.scss
+++ b/src/components/calendar/days-view/days-view.material.scss
@@ -33,6 +33,7 @@ $border-radius: rem(4px);
     &:hover,
     &:focus {
         background: color(secondary, 100);
+        color: contrast-color(secondary, 100);
         border-color: color(secondary, 100);
     }
 }
@@ -44,6 +45,11 @@ $border-radius: rem(4px);
 
 [part~='current'][part~='date-inner'] {
     box-shadow: inset 0 0 0 rem(1px) color(gray, 600);
+
+    &:hover,
+    &:focus {
+        box-shadow: inset 0 0 0 rem(1px) color(surface);
+    }
 }
 
 [part~='date'],
@@ -146,6 +152,14 @@ $border-radius: rem(4px);
     color: $week-number-color;
 }
 
+[part~='date-inner'][part~='weekend'],
+[part~='date-inner'][part~='inactive'] {
+    &:hover,
+    &:focus {
+        color: contrast-color(secondary, 100);
+    }
+}
+
 [part~='date-inner'][part~='selected'][part~='range'][part~='first'],
 [part~='date-inner'][part~='selected'][part~='range'][part~='last'],
 [part~='date-inner'][part~='selected'][part~='range'][part~='weekend'][part~='first'],
@@ -198,6 +212,10 @@ $border-radius: rem(4px);
 [part='week-number-inner first'] {
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
+
+    &::after {
+        display: none;
+    }
 }
 
 [part='week-number-inner last'] {
diff --git a/src/components/calendar/shared-calendar.scss b/src/components/calendar/shared-calendar.scss
index e2bcb6e2c..98716ff1a 100644
--- a/src/components/calendar/shared-calendar.scss
+++ b/src/components/calendar/shared-calendar.scss
@@ -4,3 +4,4 @@ $date-size-large: rem(32px);
 $date-size-medium: rem(28px);
 $date-size-small: rem(24px);
 $calendar-background: color(surface);
+$calendar-foreground: contrast-color(surface);

From b2de9f0f28ba99e3f38120f5cbc06b3b95a0f053 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Mon, 29 Nov 2021 10:14:24 +0200
Subject: [PATCH 04/27] feat(checkbox): implement-dark-themes

---
 .../checkbox/checkbox.bootstrap.scss          |   1 +
 .../checkbox/checkbox.dark.fluent.scss        | 184 ++++++++++++++++++
 .../checkbox/checkbox.dark.indigo.scss        | 116 +++++++++++
 src/components/checkbox/checkbox.fluent.scss  |   1 +
 src/components/checkbox/checkbox.indigo.scss  |  14 +-
 .../checkbox/checkbox.material.scss           |  24 +--
 src/styles/themes/dark/fluent.scss            |   4 +-
 src/styles/themes/dark/indigo.scss            |   2 +-
 src/styles/themes/light/fluent.scss           |   2 -
 9 files changed, 323 insertions(+), 25 deletions(-)
 create mode 100644 src/components/checkbox/checkbox.dark.fluent.scss
 create mode 100644 src/components/checkbox/checkbox.dark.indigo.scss

diff --git a/src/components/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/checkbox.bootstrap.scss
index 4f1a194f3..7651cec26 100644
--- a/src/components/checkbox/checkbox.bootstrap.scss
+++ b/src/components/checkbox/checkbox.bootstrap.scss
@@ -25,6 +25,7 @@
         stroke-width: 4;
         transform: scale(.7);
         transition: none;
+        stroke: white;
     }
 
     igc-checkbox::part(label) {
diff --git a/src/components/checkbox/checkbox.dark.fluent.scss b/src/components/checkbox/checkbox.dark.fluent.scss
new file mode 100644
index 000000000..eb06909b3
--- /dev/null
+++ b/src/components/checkbox/checkbox.dark.fluent.scss
@@ -0,0 +1,184 @@
+@use '../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-checkbox::part(control) {
+        width: var(--size, utils.rem(20px));
+        height: var(--size, utils.rem(20px));
+        min-width: var(--size, utils.rem(20px));
+        background: transparent;
+        transition: none;
+
+        &::after {
+            border: none;
+            background: transparent;
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 500)};
+        }
+    }
+
+    igc-checkbox::part(indicator) {
+        stroke-width: 1.5;
+        transform: scale(.8);
+        stroke: #{utils.color(surface, 500)};
+    }
+
+    igc-checkbox:hover {
+        &::part(indicator) {
+            opacity: 1;
+            stroke: #{utils.color(gray, 700)};
+            stroke-dashoffset: 0;
+            transition: opacity .1s ease-out;
+        }
+
+        &::part(indicator checked) {
+            stroke: #{utils.color(surface, 500)};
+        }
+    }
+
+    igc-checkbox:hover,
+    igc-checkbox:focus-within {
+        &::part(control)::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
+        }
+    }
+
+    igc-checkbox[indeterminate] {
+        &::part(indicator) {
+            display: none;
+        }
+
+        &::part(control)::before {
+            display: block;
+            width: inherit;
+            height: inherit;
+            content: '';
+            transform: scale(.5);
+            transition-duration: .1s;
+            background: #{utils.color(primary, 500)};
+            border-radius: utils.rem(2px);
+            z-index: 1;
+        }
+
+        &::part(control)::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
+        }
+
+        &::part(control checked)::after {
+            background: transparent;
+        }
+    }
+
+    igc-checkbox[indeterminate]:hover::part(control),
+    igc-checkbox[indeterminate]:focus-within::part(control) {
+        &::before {
+            background: #{utils.color(primary, 100)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
+            background: transparent;
+        }
+    }
+
+    igc-checkbox::part(control checked) {
+        &::after {
+            background: #{utils.color(primary, 500)};
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
+        }
+    }
+
+    igc-checkbox:hover::part(control checked),
+    igc-checkbox:focus-within::part(control checked) {
+        &::after {
+            background: #{utils.color(primary, 100)};
+            box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
+        }
+    }
+
+    igc-checkbox:not([disabled])[invalid]::part(label) {
+        color: #{utils.color(error, 200)};
+    }
+
+    igc-checkbox[invalid]::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+        }
+    }
+
+    igc-checkbox[invalid]:hover::part(indicator) {
+        stroke: #{utils.color(error, 200)};
+    }
+
+    igc-checkbox[invalid]:hover::part(indicator checked) {
+        stroke: #{utils.color(surface, 500)};
+    }
+
+    igc-checkbox[invalid]::part(control checked) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+            background: #{utils.color(error, 200)};
+        }
+    }
+
+    igc-checkbox[indeterminate][invalid]::part(control) {
+        &::before {
+            background: #{utils.color(error, 200)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+        }
+    }
+
+    igc-checkbox[invalid]:hover::part(control),
+    igc-checkbox[invalid]:focus-within::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+        }
+    }
+
+    igc-checkbox[invalid]:hover::part(control checked),
+    igc-checkbox[invalid]:focus-within::part(control checked) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+            background: #{utils.color(error, 100)};
+        }
+    }
+
+    igc-checkbox[indeterminate][invalid]:hover::part(control),
+    igc-checkbox[indeterminate][invalid]:focus-within::part(control) {
+        &::before {
+            background: #{utils.color(error, 100)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+        }
+    }
+
+    igc-checkbox[disabled]::part(control),
+    igc-checkbox[disabled][invalid]::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
+            background: transparent;
+        }
+    }
+
+    igc-checkbox[disabled]::part(control checked),
+    igc-checkbox[disabled][invalid]::part(control checked) {
+        &::after {
+            background: #{utils.color(gray, 400)};
+        }
+    }
+
+    igc-checkbox[disabled][indeterminate]::part(control),
+    igc-checkbox[disabled][indeterminate][invalid]::part(control) {
+        &::before {
+            background: #{utils.color(gray, 400)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
+            background: transparent;
+        }
+    }
+}
diff --git a/src/components/checkbox/checkbox.dark.indigo.scss b/src/components/checkbox/checkbox.dark.indigo.scss
new file mode 100644
index 000000000..cbf77570d
--- /dev/null
+++ b/src/components/checkbox/checkbox.dark.indigo.scss
@@ -0,0 +1,116 @@
+@use '../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-checkbox {
+        font-weight: 600;
+    }
+
+    igc-checkbox::part(control) {
+        width: var(--size, utils.rem(20px));
+        height: var(--size, utils.rem(20px));
+        min-width: var(--size, utils.rem(20px));
+        transition: none;
+        background: none;
+        border-radius: utils.rem(3px);
+        border: none;
+        box-shadow: inset 0 0 0 2px #{utils.color(gray, 500)};
+
+        &::after {
+            border-radius: inherit;
+        }
+    }
+
+    igc-checkbox::part(indicator) {
+        transform: scale(.8);
+        stroke: #{utils.color(surface, 500)};
+    }
+
+    igc-checkbox[indeterminate]::part(indicator) {
+        transform: rotate(45deg) translateX(-.125rem) scale(.8);
+        stroke-dashoffset: 41;
+    }
+
+    igc-checkbox:hover::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(gray, 200, .87)};
+    }
+
+    igc-checkbox:focus-within::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(gray, 300, .87)};
+    }
+
+    igc-checkbox::part(control)::after {
+        border-color: #{utils.color(gray, 700)};
+        transition: none;
+    }
+
+    igc-checkbox::part(control checked),
+    igc-checkbox[indeterminate]::part(control) {
+        background: #{utils.color(primary, 500)};
+        box-shadow: inset 0 0 0 4px #{utils.color(secondary, 500)};
+    }
+
+    igc-checkbox:hover::part(control checked),
+    igc-checkbox[indeterminate]:hover::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(secondary, 100, .87)};
+    }
+
+    igc-checkbox:focus-within::part(control checked),
+    igc-checkbox[indeterminate]:focus-within::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(secondary, 200, .87)};
+    }
+
+    igc-checkbox:not([invalid])::part(control checked)::after {
+        background: #{utils.color(gray, 900)};
+    }
+
+    igc-checkbox[invalid]::part(control checked),
+    igc-checkbox[invalid][indeterminate]::part(control) {
+        box-shadow: inset 0 0 0 4px #{utils.color(error, 500)};
+        background: #{utils.color(error, 500)};
+    }
+
+    igc-checkbox[invalid]::part(control)::after {
+        border-color: #{utils.color(error, 500)};
+    }
+
+    igc-checkbox[invalid]:hover::part(control),
+    igc-checkbox[invalid]:hover::part(control checked),
+    igc-checkbox[invalid][indeterminate]:hover::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(error, 100, .87)};
+    }
+
+    igc-checkbox[invalid]:focus-within::part(control),
+    igc-checkbox[invalid]:focus-within::part(control checked),
+    igc-checkbox[invalid][indeterminate]:focus-within::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(error, 200, .87)};
+    }
+
+    igc-checkbox[disabled],
+    igc-checkbox[disabled][invalid] {
+        &::part(control)::after {
+            border-color: #{utils.color(gray, 400)};
+        }
+
+        &::part(control checked) {
+            background: transparent;
+            box-shadow: none;
+        }
+
+        &::part(control checked)::after {
+            background: #{utils.color(gray, 400)};
+        }
+    }
+
+    igc-checkbox[disabled][indeterminate] {
+        &::part(control)::after {
+            background: #{utils.color(gray, 400)};
+        }
+    }
+
+    igc-checkbox[disabled][invalid][indeterminate] {
+        &::part(control) {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+}
diff --git a/src/components/checkbox/checkbox.fluent.scss b/src/components/checkbox/checkbox.fluent.scss
index 436b0c8d2..e8226df1d 100644
--- a/src/components/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/checkbox.fluent.scss
@@ -18,6 +18,7 @@
     igc-checkbox::part(indicator) {
         stroke-width: 1.5;
         transform: scale(.8);
+        stroke: white;
     }
 
     igc-checkbox:hover {
diff --git a/src/components/checkbox/checkbox.indigo.scss b/src/components/checkbox/checkbox.indigo.scss
index 4ce024bf1..fc6b9b19b 100644
--- a/src/components/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/checkbox.indigo.scss
@@ -61,16 +61,26 @@
     }
 
     igc-checkbox[invalid]:hover::part(control),
-    igc-checkbox[invalid]:focus-within::part(control),
     igc-checkbox[invalid]:hover::part(control checked),
+    igc-checkbox[invalid][indeterminate]:hover::part(control) {
+        box-shadow: 0 0 0 4px #{utils.color(error, 100, .87)};
+    }
+
+    igc-checkbox[invalid]:focus-within::part(control),
     igc-checkbox[invalid]:focus-within::part(control checked),
-    igc-checkbox[invalid][indeterminate]:hover::part(control),
     igc-checkbox[invalid][indeterminate]:focus-within::part(control) {
         box-shadow: 0 0 0 4px #{utils.color(error, 200, .87)};
     }
 
     igc-checkbox[disabled],
     igc-checkbox[disabled][invalid] {
+        &::part(control checked) {
+            background: transparent;
+            box-shadow: none;
+        }
+    }
+
+    igc-checkbox[disabled][invalid][indeterminate] {
         &::part(control) {
             background: transparent;
             box-shadow: none;
diff --git a/src/components/checkbox/checkbox.material.scss b/src/components/checkbox/checkbox.material.scss
index 437177157..b52db9b68 100644
--- a/src/components/checkbox/checkbox.material.scss
+++ b/src/components/checkbox/checkbox.material.scss
@@ -19,11 +19,11 @@ $mark-length: 24;
     flex-flow: row nowrap;
 
     &:hover [part='control'] {
-        background: color(gray, 200, .87);
+        background: color(gray, 600, .06);
     }
 
     &:focus-within [part='control'] {
-        background: color(gray, 300, .87);
+        background: color(gray, 600, .12);
     }
 }
 
@@ -68,7 +68,7 @@ $mark-length: 24;
     right: 0;
     bottom: 0;
     left: 0;
-    stroke: white;
+    stroke: color(surface, 500);
     stroke-linecap: square;
     stroke-width: 3;
     stroke-dasharray: $mark-length;
@@ -82,11 +82,11 @@ $mark-length: 24;
 
 [part='base checked'] {
     &:hover [part~='control'] {
-        background: color(secondary, 50, .54);
+        background: color(secondary, 500, .06);
     }
 
     &:focus-within [part~='control'] {
-        background: color(secondary, 100, .72);
+        background: color(secondary, 500, .12);
     }
 }
 
@@ -104,11 +104,11 @@ $mark-length: 24;
 :host([indeterminate]) {
     [part~='base'] {
         &:hover [part~='control'] {
-            background: color(secondary, 50, .54);
+            background: color(secondary, 500, .06);
         }
 
         &:focus-within [part~='control'] {
-            background: color(secondary, 100, .72);
+            background: color(secondary, 500, .12);
         }
     }
 
@@ -145,16 +145,6 @@ $mark-length: 24;
             background: color(error, 500);
         }
     }
-
-    [part~='base'] {
-        &:hover [part~='control'] {
-            background: color(error, 50, .54);
-        }
-
-        &:focus-within [part~='control'] {
-            background: color(error, 100, .72);
-        }
-    }
 }
 
 :host(:not([disabled])[invalid][indeterminate]) {
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 2e08b6964..1873237fd 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -2,7 +2,7 @@
 @use '../../../components/button/button.fluent' as button;
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
-@use '../../../components/checkbox/checkbox.fluent' as checkbox;
+@use '../../../components/checkbox/checkbox.dark.fluent' as checkbox;
 @use '../../../components/radio/radio.fluent' as radio;
 @use '../../../components/list/list.fluent' as list;
 @use '../../../components/checkbox/switch.fluent' as switch;
@@ -164,5 +164,3 @@ $type-scale: utils.extend($fluent-type-scale);
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
-
-
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 7f805ed50..11c86f8a5 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -2,7 +2,7 @@
 @use '../../../components/button/button.indigo' as button;
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
-@use '../../../components/checkbox/checkbox.indigo' as checkbox;
+@use '../../../components/checkbox/checkbox.dark.indigo' as checkbox;
 @use '../../../components/radio/radio.indigo' as radio;
 @use '../../../components/checkbox/switch.indigo' as switch;
 @use '../../../components/navbar/navbar.indigo' as navbar;
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
index 755086f75..633121b1d 100644
--- a/src/styles/themes/light/fluent.scss
+++ b/src/styles/themes/light/fluent.scss
@@ -162,5 +162,3 @@ $type-scale: utils.extend($fluent-type-scale);
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
-
-

From 1c2e9c68bc14a696899ca1ac042905da46d0f448 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Mon, 29 Nov 2021 12:35:58 +0200
Subject: [PATCH 05/27] use light theme mixins

---
 .../checkbox/checkbox.dark.fluent.scss        | 78 +---------------
 .../checkbox/checkbox.dark.indigo.scss        | 91 ++-----------------
 src/components/checkbox/checkbox.indigo.scss  |  6 --
 src/styles/themes/dark/fluent.scss            |  4 +-
 src/styles/themes/dark/indigo.scss            |  4 +-
 5 files changed, 16 insertions(+), 167 deletions(-)

diff --git a/src/components/checkbox/checkbox.dark.fluent.scss b/src/components/checkbox/checkbox.dark.fluent.scss
index eb06909b3..6c3e18a4e 100644
--- a/src/components/checkbox/checkbox.dark.fluent.scss
+++ b/src/components/checkbox/checkbox.dark.fluent.scss
@@ -1,34 +1,20 @@
 @use '../../styles/utilities' as utils;
+@use 'checkbox.fluent.scss' as light-checkbox;
+
+@include light-checkbox.theme();
 
 @mixin theme() {
     igc-checkbox::part(control) {
-        width: var(--size, utils.rem(20px));
-        height: var(--size, utils.rem(20px));
-        min-width: var(--size, utils.rem(20px));
-        background: transparent;
-        transition: none;
-
         &::after {
-            border: none;
-            background: transparent;
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 500)};
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 700)};
         }
     }
 
     igc-checkbox::part(indicator) {
-        stroke-width: 1.5;
-        transform: scale(.8);
         stroke: #{utils.color(surface, 500)};
     }
 
     igc-checkbox:hover {
-        &::part(indicator) {
-            opacity: 1;
-            stroke: #{utils.color(gray, 700)};
-            stroke-dashoffset: 0;
-            transition: opacity .1s ease-out;
-        }
-
         &::part(indicator checked) {
             stroke: #{utils.color(surface, 500)};
         }
@@ -37,33 +23,7 @@
     igc-checkbox:hover,
     igc-checkbox:focus-within {
         &::part(control)::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
-        }
-    }
-
-    igc-checkbox[indeterminate] {
-        &::part(indicator) {
-            display: none;
-        }
-
-        &::part(control)::before {
-            display: block;
-            width: inherit;
-            height: inherit;
-            content: '';
-            transform: scale(.5);
-            transition-duration: .1s;
-            background: #{utils.color(primary, 500)};
-            border-radius: utils.rem(2px);
-            z-index: 1;
-        }
-
-        &::part(control)::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
-        }
-
-        &::part(control checked)::after {
-            background: transparent;
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 900)};
         }
     }
 
@@ -81,7 +41,6 @@
 
     igc-checkbox::part(control checked) {
         &::after {
-            background: #{utils.color(primary, 500)};
             box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
         }
     }
@@ -154,31 +113,4 @@
             box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
         }
     }
-
-    igc-checkbox[disabled]::part(control),
-    igc-checkbox[disabled][invalid]::part(control) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
-            background: transparent;
-        }
-    }
-
-    igc-checkbox[disabled]::part(control checked),
-    igc-checkbox[disabled][invalid]::part(control checked) {
-        &::after {
-            background: #{utils.color(gray, 400)};
-        }
-    }
-
-    igc-checkbox[disabled][indeterminate]::part(control),
-    igc-checkbox[disabled][indeterminate][invalid]::part(control) {
-        &::before {
-            background: #{utils.color(gray, 400)};
-        }
-
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
-            background: transparent;
-        }
-    }
 }
diff --git a/src/components/checkbox/checkbox.dark.indigo.scss b/src/components/checkbox/checkbox.dark.indigo.scss
index cbf77570d..d3fa026bd 100644
--- a/src/components/checkbox/checkbox.dark.indigo.scss
+++ b/src/components/checkbox/checkbox.dark.indigo.scss
@@ -1,101 +1,30 @@
 @use '../../styles/utilities' as utils;
+@use 'checkbox.indigo.scss' as light-checkbox;
 
-@mixin theme() {
-    igc-checkbox {
-        font-weight: 600;
-    }
-
-    igc-checkbox::part(control) {
-        width: var(--size, utils.rem(20px));
-        height: var(--size, utils.rem(20px));
-        min-width: var(--size, utils.rem(20px));
-        transition: none;
-        background: none;
-        border-radius: utils.rem(3px);
-        border: none;
-        box-shadow: inset 0 0 0 2px #{utils.color(gray, 500)};
-
-        &::after {
-            border-radius: inherit;
-        }
-    }
-
-    igc-checkbox::part(indicator) {
-        transform: scale(.8);
-        stroke: #{utils.color(surface, 500)};
-    }
-
-    igc-checkbox[indeterminate]::part(indicator) {
-        transform: rotate(45deg) translateX(-.125rem) scale(.8);
-        stroke-dashoffset: 41;
-    }
-
-    igc-checkbox:hover::part(control) {
-        box-shadow: 0 0 0 4px #{utils.color(gray, 200, .87)};
-    }
-
-    igc-checkbox:focus-within::part(control) {
-        box-shadow: 0 0 0 4px #{utils.color(gray, 300, .87)};
-    }
+@include light-checkbox.theme();
 
+@mixin theme() {
     igc-checkbox::part(control)::after {
         border-color: #{utils.color(gray, 700)};
         transition: none;
     }
 
-    igc-checkbox::part(control checked),
-    igc-checkbox[indeterminate]::part(control) {
-        background: #{utils.color(primary, 500)};
-        box-shadow: inset 0 0 0 4px #{utils.color(secondary, 500)};
-    }
-
-    igc-checkbox:hover::part(control checked),
-    igc-checkbox[indeterminate]:hover::part(control) {
-        box-shadow: 0 0 0 4px #{utils.color(secondary, 100, .87)};
-    }
-
-    igc-checkbox:focus-within::part(control checked),
-    igc-checkbox[indeterminate]:focus-within::part(control) {
-        box-shadow: 0 0 0 4px #{utils.color(secondary, 200, .87)};
-    }
-
-    igc-checkbox:not([invalid])::part(control checked)::after {
+    igc-checkbox:not([invalid])::part(control checked)::after,
+    igc-checkbox:not([invalid])[indeterminate]::part(control)::after {
         background: #{utils.color(gray, 900)};
-    }
-
-    igc-checkbox[invalid]::part(control checked),
-    igc-checkbox[invalid][indeterminate]::part(control) {
-        box-shadow: inset 0 0 0 4px #{utils.color(error, 500)};
-        background: #{utils.color(error, 500)};
+        border-color: #{utils.color(gray, 900)};
     }
 
     igc-checkbox[invalid]::part(control)::after {
         border-color: #{utils.color(error, 500)};
     }
 
-    igc-checkbox[invalid]:hover::part(control),
-    igc-checkbox[invalid]:hover::part(control checked),
-    igc-checkbox[invalid][indeterminate]:hover::part(control) {
-        box-shadow: 0 0 0 4px #{utils.color(error, 100, .87)};
-    }
-
-    igc-checkbox[invalid]:focus-within::part(control),
-    igc-checkbox[invalid]:focus-within::part(control checked),
-    igc-checkbox[invalid][indeterminate]:focus-within::part(control) {
-        box-shadow: 0 0 0 4px #{utils.color(error, 200, .87)};
-    }
-
     igc-checkbox[disabled],
     igc-checkbox[disabled][invalid] {
         &::part(control)::after {
             border-color: #{utils.color(gray, 400)};
         }
 
-        &::part(control checked) {
-            background: transparent;
-            box-shadow: none;
-        }
-
         &::part(control checked)::after {
             background: #{utils.color(gray, 400)};
         }
@@ -104,13 +33,7 @@
     igc-checkbox[disabled][indeterminate] {
         &::part(control)::after {
             background: #{utils.color(gray, 400)};
-        }
-    }
-
-    igc-checkbox[disabled][invalid][indeterminate] {
-        &::part(control) {
-            background: transparent;
-            box-shadow: none;
+            border-color: #{utils.color(gray, 400)};
         }
     }
 }
diff --git a/src/components/checkbox/checkbox.indigo.scss b/src/components/checkbox/checkbox.indigo.scss
index fc6b9b19b..dee92ea24 100644
--- a/src/components/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/checkbox.indigo.scss
@@ -38,12 +38,6 @@
         box-shadow: 0 0 0 4px #{utils.color(gray, 300, .87)};
     }
 
-    igc-checkbox::part(control checked),
-    igc-checkbox[indeterminate]::part(control) {
-        background: #{utils.color(primary, 500)};
-        box-shadow: inset 0 0 0 4px #{utils.color(secondary, 500)};
-    }
-
     igc-checkbox:hover::part(control checked),
     igc-checkbox[indeterminate]:hover::part(control) {
         box-shadow: 0 0 0 4px #{utils.color(secondary, 100, .87)};
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 1873237fd..9c10075d9 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -2,7 +2,7 @@
 @use '../../../components/button/button.fluent' as button;
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
-@use '../../../components/checkbox/checkbox.dark.fluent' as checkbox;
+@use '../../../components/checkbox/checkbox.dark.fluent' as dark-checkbox;
 @use '../../../components/radio/radio.fluent' as radio;
 @use '../../../components/list/list.fluent' as list;
 @use '../../../components/checkbox/switch.fluent' as switch;
@@ -157,7 +157,7 @@ $type-scale: utils.extend($fluent-type-scale);
 
 @include button.theme();
 @include card.theme();
-@include checkbox.theme();
+@include dark-checkbox.theme();
 @include radio.theme();
 @include list.theme();
 @include switch.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 11c86f8a5..6c314b376 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -2,7 +2,7 @@
 @use '../../../components/button/button.indigo' as button;
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
-@use '../../../components/checkbox/checkbox.dark.indigo' as checkbox;
+@use '../../../components/checkbox/checkbox.dark.indigo' as dark-checkbox;
 @use '../../../components/radio/radio.indigo' as radio;
 @use '../../../components/checkbox/switch.indigo' as switch;
 @use '../../../components/navbar/navbar.indigo' as navbar;
@@ -183,7 +183,7 @@ $type-scale: utils.extend($indigo-type-scale);
 
 @include button.theme();
 @include card.theme();
-@include checkbox.theme();
+@include dark-checkbox.theme();
 @include radio.theme();
 @include switch.theme();
 @include navbar.theme();

From b9332373d0d3574c8f5674868ef92b32b6b3b46d Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Mon, 29 Nov 2021 17:24:59 +0200
Subject: [PATCH 06/27] move light-checkbox mixin

---
 src/components/checkbox/checkbox.dark.fluent.scss | 6 +++---
 src/components/checkbox/checkbox.dark.indigo.scss | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/checkbox/checkbox.dark.fluent.scss b/src/components/checkbox/checkbox.dark.fluent.scss
index 6c3e18a4e..8818c9745 100644
--- a/src/components/checkbox/checkbox.dark.fluent.scss
+++ b/src/components/checkbox/checkbox.dark.fluent.scss
@@ -1,9 +1,9 @@
 @use '../../styles/utilities' as utils;
-@use 'checkbox.fluent.scss' as light-checkbox;
-
-@include light-checkbox.theme();
+@use 'checkbox.fluent' as light-checkbox;
 
 @mixin theme() {
+    @include light-checkbox.theme();
+
     igc-checkbox::part(control) {
         &::after {
             box-shadow: inset 0 0 0 1px #{utils.color(gray, 700)};
diff --git a/src/components/checkbox/checkbox.dark.indigo.scss b/src/components/checkbox/checkbox.dark.indigo.scss
index d3fa026bd..2c506c444 100644
--- a/src/components/checkbox/checkbox.dark.indigo.scss
+++ b/src/components/checkbox/checkbox.dark.indigo.scss
@@ -1,9 +1,9 @@
 @use '../../styles/utilities' as utils;
-@use 'checkbox.indigo.scss' as light-checkbox;
-
-@include light-checkbox.theme();
+@use 'checkbox.indigo' as light-checkbox;
 
 @mixin theme() {
+    @include light-checkbox.theme();
+
     igc-checkbox::part(control)::after {
         border-color: #{utils.color(gray, 700)};
         transition: none;

From 4391031c7ffcfece3f1a8b20415e69871cc2b0fd Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Tue, 30 Nov 2021 12:26:47 +0200
Subject: [PATCH 07/27] dark fluent disabled styles

---
 .../checkbox/checkbox.dark.fluent.scss        | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/components/checkbox/checkbox.dark.fluent.scss b/src/components/checkbox/checkbox.dark.fluent.scss
index 8818c9745..bfeb5cb6a 100644
--- a/src/components/checkbox/checkbox.dark.fluent.scss
+++ b/src/components/checkbox/checkbox.dark.fluent.scss
@@ -85,6 +85,7 @@
 
         &::after {
             box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+            background: transparent;
         }
     }
 
@@ -111,6 +112,36 @@
 
         &::after {
             box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+            background: transparent;
+        }
+    }
+
+    igc-checkbox[disabled]::part(label) {
+        color: #{utils.color(gray, 200)};
+    }
+
+    igc-checkbox[disabled]::part(control),
+    igc-checkbox[disabled][invalid]::part(control) {
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
+        }
+    }
+
+    igc-checkbox[disabled]::part(control checked),
+    igc-checkbox[disabled][invalid]::part(control checked) {
+        &::after {
+            background: #{utils.color(gray, 200)};
+        }
+    }
+
+    igc-checkbox[disabled][indeterminate]::part(control),
+    igc-checkbox[disabled][indeterminate][invalid]::part(control) {
+        &::before {
+            background: #{utils.color(gray, 200)};
+        }
+
+        &::after {
+            box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
         }
     }
 }

From c9f8c420fd4fb08680c267107e4e7491e6ff7d26 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Tue, 30 Nov 2021 13:44:11 +0200
Subject: [PATCH 08/27] feat(switch): implement dark themes

---
 .../checkbox/switch.dark.fluent.scss          | 92 +++++++++++++++++++
 .../checkbox/switch.dark.indigo.scss          | 38 ++++++++
 src/components/checkbox/switch.fluent.scss    | 19 ++--
 src/styles/themes/dark/fluent.scss            |  4 +-
 src/styles/themes/dark/indigo.scss            |  4 +-
 5 files changed, 140 insertions(+), 17 deletions(-)
 create mode 100644 src/components/checkbox/switch.dark.fluent.scss
 create mode 100644 src/components/checkbox/switch.dark.indigo.scss

diff --git a/src/components/checkbox/switch.dark.fluent.scss b/src/components/checkbox/switch.dark.fluent.scss
new file mode 100644
index 000000000..0db3a13e2
--- /dev/null
+++ b/src/components/checkbox/switch.dark.fluent.scss
@@ -0,0 +1,92 @@
+@use '../../styles/utilities' as utils;
+@use 'switch.fluent' as light-switch;
+
+@mixin theme {
+    @include light-switch.theme();
+
+    igc-switch:hover::part(control) {
+        box-shadow: inset 0 0 0 1px #{utils.color(gray, 900)};
+    }
+
+    igc-switch::part(thumb) {
+        background: #{utils.color(gray, 500)};
+    }
+
+    igc-switch:hover::part(thumb) {
+        background: #{utils.color(gray, 900)};
+    }
+
+    igc-switch::part(control checked),
+    igc-switch:hover::part(control checked) {
+        box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
+    }
+
+    igc-switch:hover::part(control checked),
+    igc-switch:focus-within::part(control checked) {
+        background: #{utils.color(primary, 100)};
+        box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
+    }
+
+    igc-switch:not([disabled])[invalid]::part(label) {
+        color: #{utils.color(error, 200)};
+    }
+
+    igc-switch[invalid]::part(control) {
+        box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+    }
+
+    igc-switch[invalid]:hover::part(control),
+    igc-switch[invalid]:focus-within::part(control) {
+        box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+    }
+
+    igc-switch[invalid]::part(thumb) {
+        background: #{utils.color(error, 200)};
+    }
+
+    igc-switch[invalid]:hover::part(thumb),
+    igc-switch[invalid]:focus-within::part(thumb) {
+        background: #{utils.color(error, 100)};
+    }
+
+    igc-switch[invalid]::part(control checked) {
+        box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
+        background: #{utils.color(error, 200)};
+    }
+
+    igc-switch[invalid]:hover::part(control checked),
+    igc-switch[invalid]:focus-within::part(control checked) {
+        box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
+        background: #{utils.color(error, 100)};
+    }
+
+    igc-switch::part(thumb checked),
+    igc-switch:hover::part(thumb checked),
+    igc-switch:focus-within::part(thumb checked),
+    igc-switch[invalid]::part(thumb checked),
+    igc-switch[invalid]:hover::part(thumb checked),
+    igc-switch[invalid]:focus-within::part(thumb checked) {
+        background: #{utils.color(surface, 500)};
+    }
+
+    igc-switch[disabled]::part(label) {
+        color: #{utils.color(gray, 200)};
+    }
+
+    igc-switch[disabled]::part(control),
+    igc-switch[disabled][invalid]::part(control) {
+        box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
+    }
+
+    igc-switch[disabled]::part(thumb),
+    igc-switch[disabled][invalid]::part(thumb),
+    igc-switch[disabled]::part(control checked),
+    igc-switch[disabled][invalid]::part(control checked) {
+        background: #{utils.color(gray, 200)};
+    }
+
+    igc-switch[disabled]::part(thumb checked),
+    igc-switch[disabled][invalid]::part(thumb checked) {
+        background: #{utils.color(surface, 100)};
+    }
+}
diff --git a/src/components/checkbox/switch.dark.indigo.scss b/src/components/checkbox/switch.dark.indigo.scss
new file mode 100644
index 000000000..c443fd278
--- /dev/null
+++ b/src/components/checkbox/switch.dark.indigo.scss
@@ -0,0 +1,38 @@
+@use '../../styles/utilities' as utils;
+@use 'switch.indigo' as light-switch;
+
+@mixin theme() {
+    @include light-switch.theme();
+
+    igc-switch::part(control) {
+        box-shadow: inset 0 0 0 2px #{utils.color(gray, 700)};
+    }
+
+    igc-switch:hover::part(control),
+    igc-switch:focus-within::part(control) {
+        &::after {
+            border: 2px solid #{utils.color(gray, 700)};
+        }
+    }
+
+    igc-switch::part(control checked) {
+        background: #{utils.color(gray, 900)};
+        box-shadow: inset 0 0 0 2px #{utils.color(gray, 900)};
+    }
+
+    igc-switch:hover::part(control checked),
+    igc-switch:focus-within::part(control checked) {
+        &::after {
+            border: 2px solid #{utils.color(gray, 900)};
+        }
+    }
+
+    igc-switch::part(thumb) {
+        background: #{utils.color(gray, 700)};
+    }
+
+    igc-switch::part(thumb checked),
+    igc-switch[invalid]::part(thumb checked) {
+        background: #{utils.color(surface, 500)};
+    }
+}
diff --git a/src/components/checkbox/switch.fluent.scss b/src/components/checkbox/switch.fluent.scss
index 336eaf4c8..dc4b32ffd 100644
--- a/src/components/checkbox/switch.fluent.scss
+++ b/src/components/checkbox/switch.fluent.scss
@@ -15,24 +15,22 @@
         background: transparent;
     }
 
-    igc-switch:hover::part(control) {
+    igc-switch:hover::part(control),
+    igc-switch:focus-within::part(control) {
         box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
     }
 
-    igc-switch:hover::part(thumb) {
+    igc-switch:hover::part(thumb),
+    igc-switch:focus-within::part(thumb) {
         background: #{utils.color(gray, 800)};
     }
 
-    igc-switch::part(control checked),
-    igc-switch:hover::part(control checked) {
+    igc-switch::part(control checked) {
         background: #{utils.color(primary, 500)};
         box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
     }
 
-    igc-switch:focus-within::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
-    }
-
+    igc-switch:hover::part(control checked),
     igc-switch:focus-within::part(control checked) {
         background: utils.color(primary, 900);
         box-shadow: inset 0 0 0 1px #{utils.color(primary, 900)};
@@ -102,11 +100,6 @@
         }
     }
 
-    igc-switch:focus-within::part(thumb),
-    igc-switch:hover::part(thumb) {
-        background: #{utils.color(gray, 800)};
-    }
-
     igc-switch::part(thumb checked),
     igc-switch:hover::part(thumb checked),
     igc-switch:focus-within::part(thumb checked),
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 2e08b6964..76fb595ef 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -5,7 +5,7 @@
 @use '../../../components/checkbox/checkbox.fluent' as checkbox;
 @use '../../../components/radio/radio.fluent' as radio;
 @use '../../../components/list/list.fluent' as list;
-@use '../../../components/checkbox/switch.fluent' as switch;
+@use '../../../components/checkbox/switch.dark.fluent' as dark-switch;
 @use '../../../components/calendar/calendar.fluent' as calendar;
 @use '../../../components/input/input.fluent' as input;
 
@@ -160,7 +160,7 @@ $type-scale: utils.extend($fluent-type-scale);
 @include checkbox.theme();
 @include radio.theme();
 @include list.theme();
-@include switch.theme();
+@include dark-switch.theme();
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 7f805ed50..df27d55ce 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -4,7 +4,7 @@
 @use '../../../components/card/card.indigo' as card;
 @use '../../../components/checkbox/checkbox.indigo' as checkbox;
 @use '../../../components/radio/radio.indigo' as radio;
-@use '../../../components/checkbox/switch.indigo' as switch;
+@use '../../../components/checkbox/switch.dark.indigo' as dark-switch;
 @use '../../../components/navbar/navbar.indigo' as navbar;
 @use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
 @use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
@@ -185,7 +185,7 @@ $type-scale: utils.extend($indigo-type-scale);
 @include card.theme();
 @include checkbox.theme();
 @include radio.theme();
-@include switch.theme();
+@include dark-switch.theme();
 @include navbar.theme();
 @include nav-drawer.theme();
 @include nav-drawer-item.theme();

From 0639e99bd8848c5c579e5e762275210418d818be Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Wed, 1 Dec 2021 10:20:59 +0200
Subject: [PATCH 09/27] feat: (list) update light and add dark themes

---
 src/components/list/list.bootstrap.scss      | 20 +++++++++++++++-----
 src/components/list/list.dark.bootstrap.scss | 19 +++++++++++++++++++
 src/components/list/list.dark.fluent.scss    | 13 +++++++++++++
 src/components/list/list.dark.indigo.scss    | 13 +++++++++++++
 src/components/list/list.fluent.scss         |  2 +-
 src/components/list/list.indigo.scss         |  2 +-
 src/styles/themes/dark/bootstrap.scss        |  4 ++--
 src/styles/themes/dark/fluent.scss           |  4 ++--
 src/styles/themes/dark/indigo.scss           |  4 ++--
 9 files changed, 68 insertions(+), 13 deletions(-)
 create mode 100644 src/components/list/list.dark.bootstrap.scss
 create mode 100644 src/components/list/list.dark.fluent.scss
 create mode 100644 src/components/list/list.dark.indigo.scss

diff --git a/src/components/list/list.bootstrap.scss b/src/components/list/list.bootstrap.scss
index c8d020c3c..4ba97babe 100644
--- a/src/components/list/list.bootstrap.scss
+++ b/src/components/list/list.bootstrap.scss
@@ -1,14 +1,24 @@
-@use '../../styles/utilities' as utils;
+@use '../../styles/utilities' as *;
 
 @mixin theme() {
+    igc-list-item,
     igc-list {
-        border: utils.rem(1px) solid utils.color(gray, 300);
-        border-radius: utils.rem(4px);
+        background: contrast-color(gray, 900);
+    }
+
+    igc-list {
+        border: rem(1px) solid color(gray, 200);
+        border-radius: rem(4px);
     }
 
     igc-list-item {
-        color: utils.color(gray, 900);
-        border-bottom: utils.rem(1px) solid utils.color(gray, 300);
+        color: color(gray, 900);
+        border-bottom: rem(1px) solid color(gray, 200);
+
+        &:hover,
+        &:focus-within {
+            background: color(gray, 100);
+        }
 
         &:last-of-type {
             border-bottom: none;
diff --git a/src/components/list/list.dark.bootstrap.scss b/src/components/list/list.dark.bootstrap.scss
new file mode 100644
index 000000000..771cfd95e
--- /dev/null
+++ b/src/components/list/list.dark.bootstrap.scss
@@ -0,0 +1,19 @@
+@use '../../styles/utilities' as *;
+@use 'list.bootstrap' as light-list;
+
+@mixin theme() {
+    @include light-list.theme();
+
+    igc-list-item,
+    igc-list {
+        background: color(gray, 50);
+    }
+
+    igc-list {
+        border: rem(1px) solid color(gray, 100);
+    }
+
+    igc-list-item {
+        border-bottom: rem(1px) solid color(gray, 100);
+    }
+}
diff --git a/src/components/list/list.dark.fluent.scss b/src/components/list/list.dark.fluent.scss
new file mode 100644
index 000000000..f4dbe363e
--- /dev/null
+++ b/src/components/list/list.dark.fluent.scss
@@ -0,0 +1,13 @@
+@use '../../styles/utilities' as *;
+@use 'list.fluent' as light-list;
+
+@mixin theme() {
+    @include light-list.theme();
+
+    igc-list-item {
+        &:hover,
+        &:focus-within {
+            background: color(gray, 100);
+        }
+    }
+}
diff --git a/src/components/list/list.dark.indigo.scss b/src/components/list/list.dark.indigo.scss
new file mode 100644
index 000000000..4f03ea4f6
--- /dev/null
+++ b/src/components/list/list.dark.indigo.scss
@@ -0,0 +1,13 @@
+@use '../../styles/utilities' as *;
+@use 'list.indigo' as light-list;
+
+@mixin theme() {
+    @include light-list.theme();
+
+    igc-list-item {
+        &:hover,
+        &:focus-within {
+            background: color(primary, 500, .5);
+        }
+    }
+}
diff --git a/src/components/list/list.fluent.scss b/src/components/list/list.fluent.scss
index 7e048efff..12ca88608 100644
--- a/src/components/list/list.fluent.scss
+++ b/src/components/list/list.fluent.scss
@@ -2,7 +2,7 @@
 
 @mixin theme() {
     igc-list-item {
-        border-bottom: utils.rem(1px) solid utils.color(gray, 200);
+        border-bottom: utils.rem(1px) solid utils.color(gray, 100);
 
         &:last-of-type {
             border-bottom: none;
diff --git a/src/components/list/list.indigo.scss b/src/components/list/list.indigo.scss
index 32298088d..64bd47832 100644
--- a/src/components/list/list.indigo.scss
+++ b/src/components/list/list.indigo.scss
@@ -10,7 +10,7 @@
 
         &:hover,
         &:focus-within {
-            background: utils.color(primary, 50, .54);
+            background: utils.color(primary, 50);
         }
 
         &::part(subtitle) {
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 69455d3d6..90dc64271 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -7,7 +7,7 @@
 @use '../../../components/radio/radio.bootstrap' as radio;
 @use '../../../components/checkbox/switch.bootstrap' as switch;
 @use '../../../components/navbar/navbar.bootstrap' as navbar;
-@use '../../../components/list/list.bootstrap' as list;
+@use '../../../components/list/list.dark.bootstrap' as dark-list;
 @use '../../../components/calendar/calendar.bootstrap' as calendar;
 @use '../../../components/input/input.bootstrap' as input;
 
@@ -193,7 +193,7 @@ $type-scale: utils.extend($_base-scale, (
 @include radio.theme();
 @include switch.theme();
 @include navbar.theme();
-@include list.theme();
+@include dark-list.theme();
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 2e08b6964..39e3bec65 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -4,7 +4,7 @@
 @use '../../../components/card/card.fluent' as card;
 @use '../../../components/checkbox/checkbox.fluent' as checkbox;
 @use '../../../components/radio/radio.fluent' as radio;
-@use '../../../components/list/list.fluent' as list;
+@use '../../../components/list/list.dark.fluent' as dark-list;
 @use '../../../components/checkbox/switch.fluent' as switch;
 @use '../../../components/calendar/calendar.fluent' as calendar;
 @use '../../../components/input/input.fluent' as input;
@@ -159,7 +159,7 @@ $type-scale: utils.extend($fluent-type-scale);
 @include card.theme();
 @include checkbox.theme();
 @include radio.theme();
-@include list.theme();
+@include dark-list.theme();
 @include switch.theme();
 @include calendar.theme();
 @include input.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 7f805ed50..e4dde279f 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -9,7 +9,7 @@
 @use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
 @use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
 @use '../../../components/nav-drawer/nav-drawer-header-item.indigo' as nav-drawer-header;
-@use '../../../components/list/list.indigo' as list;
+@use '../../../components/list/list.dark.indigo' as dark-list;
 @use '../../../components/input/input.indigo' as input;
 
 $palette: utils.palette(
@@ -190,6 +190,6 @@ $type-scale: utils.extend($indigo-type-scale);
 @include nav-drawer.theme();
 @include nav-drawer-item.theme();
 @include nav-drawer-header.theme();
-@include list.theme();
+@include dark-list.theme();
 @include input.theme();
 @include icon-button.theme();

From ae8f1c007192a46bb1b6ccd47a3db0b229901f70 Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Wed, 1 Dec 2021 11:09:17 +0200
Subject: [PATCH 10/27] fix: (navbar) theme colors and icon size.

---
 src/components/navbar/navbar.bootstrap.scss | 2 +-
 src/components/navbar/navbar.material.scss  | 7 +++++--
 stories/navbar.stories.ts                   | 6 +-----
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/navbar/navbar.bootstrap.scss b/src/components/navbar/navbar.bootstrap.scss
index 59c2935b9..3cf609432 100644
--- a/src/components/navbar/navbar.bootstrap.scss
+++ b/src/components/navbar/navbar.bootstrap.scss
@@ -13,7 +13,7 @@
         padding-inline-end: utils.rem(4px);
     }
 
-    ::slotted(igc-icon) {
+    igc-navbar igc-icon {
         color: #{utils.contrast-color(surface, 500)};
     }
 }
diff --git a/src/components/navbar/navbar.material.scss b/src/components/navbar/navbar.material.scss
index 3c71b931e..90a8f0f03 100644
--- a/src/components/navbar/navbar.material.scss
+++ b/src/components/navbar/navbar.material.scss
@@ -8,7 +8,7 @@
     max-height: rem(128px);
     padding: 0 rem(16px);
     background: color(primary, 500);
-    color: contrast-color(primary, 500);
+    color: contrast-color(primary, 600);
     box-shadow: var(--igc-elevation-4);
     font-family: var(--igc-font-family);
 }
@@ -48,7 +48,10 @@
 
 ::slotted(igc-icon) {
     cursor: pointer;
-    color: contrast-color(primary, 500);
+    color: contrast-color(primary, 600);
+    width: rem(32px);
+    height: rem(32px);
+    font-size: rem(32px);
 }
 
 ::slotted(*) {
diff --git a/stories/navbar.stories.ts b/stories/navbar.stories.ts
index 5e6741bde..2b01eac12 100644
--- a/stories/navbar.stories.ts
+++ b/stories/navbar.stories.ts
@@ -30,11 +30,7 @@ const Template: Story<any, Context> = (
   return html`
     <igc-navbar dir=${ifDefined(direction)} style="height:30px">
       <h2>${content}</h2>
-      <igc-icon-button
-        slot="end"
-        name="search"
-        variant="outlined"
-      ></igc-icon-button>
+      <igc-icon slot="end" name="search"></igc-icon>
     </igc-navbar>
   `;
 };

From b172fdeb897345f5e4b2eba342a3687882a98e7a Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Wed, 1 Dec 2021 11:15:41 +0200
Subject: [PATCH 11/27] feat: (navbar) Add home icon

---
 stories/navbar.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stories/navbar.stories.ts b/stories/navbar.stories.ts
index 2b01eac12..d12c75de5 100644
--- a/stories/navbar.stories.ts
+++ b/stories/navbar.stories.ts
@@ -29,6 +29,7 @@ const Template: Story<any, Context> = (
 ) => {
   return html`
     <igc-navbar dir=${ifDefined(direction)} style="height:30px">
+      <igc-icon slot="start" name="home"></igc-icon>
       <h2>${content}</h2>
       <igc-icon slot="end" name="search"></igc-icon>
     </igc-navbar>

From ea2f45b0c24af1706cf4a054bd9b4caa387ad9b0 Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Wed, 1 Dec 2021 13:33:41 +0200
Subject: [PATCH 12/27] fix: (navbar) outline button cut off. also make sure
 that our atomic components work well with the navbar

---
 src/components/navbar/navbar.bootstrap.scss |  4 ++++
 src/components/navbar/navbar.fluent.scss    |  7 ++++++
 src/components/navbar/navbar.indigo.scss    |  4 ++++
 src/components/navbar/navbar.material.scss  | 13 +++++++++++
 src/styles/themes/light/fluent.scss         |  2 ++
 stories/navbar.stories.ts                   | 24 ++++++++++++++++++---
 6 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 src/components/navbar/navbar.fluent.scss

diff --git a/src/components/navbar/navbar.bootstrap.scss b/src/components/navbar/navbar.bootstrap.scss
index 3cf609432..7c2fe76b2 100644
--- a/src/components/navbar/navbar.bootstrap.scss
+++ b/src/components/navbar/navbar.bootstrap.scss
@@ -16,4 +16,8 @@
     igc-navbar igc-icon {
         color: #{utils.contrast-color(surface, 500)};
     }
+
+    igc-input::part(helper-text) {
+        margin-top: 0 !important;
+    }
 }
diff --git a/src/components/navbar/navbar.fluent.scss b/src/components/navbar/navbar.fluent.scss
new file mode 100644
index 000000000..266f55ed7
--- /dev/null
+++ b/src/components/navbar/navbar.fluent.scss
@@ -0,0 +1,7 @@
+@use '../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-input::part(helper-text) {
+        margin-top: 0 !important;
+    }
+}
diff --git a/src/components/navbar/navbar.indigo.scss b/src/components/navbar/navbar.indigo.scss
index f98b82a44..3ca308419 100644
--- a/src/components/navbar/navbar.indigo.scss
+++ b/src/components/navbar/navbar.indigo.scss
@@ -4,4 +4,8 @@
     igc-navbar {
         box-shadow: none;
     }
+
+    igc-input::part(helper-text) {
+        margin-top: 0 !important;
+    }
 }
diff --git a/src/components/navbar/navbar.material.scss b/src/components/navbar/navbar.material.scss
index 90a8f0f03..1316ca595 100644
--- a/src/components/navbar/navbar.material.scss
+++ b/src/components/navbar/navbar.material.scss
@@ -40,10 +40,23 @@
 
 [name='start']::slotted(*) {
     margin-inline-end: rem(16px);
+    margin-inline-start: rem(1px);
 }
 
 [name='end']::slotted(*) {
     margin-inline-start: rem(16px);
+    margin-inline-end: rem(1px);
+}
+
+::slotted(igc-input[part='helper-text']) {
+    margin-top: 0 !important;
+}
+
+::slotted(igc-avatar[part='base']) {
+    max-width: rem(32px);
+    max-height: rem(32px);
+    min-height: 0;
+    min-width: 0;
 }
 
 ::slotted(igc-icon) {
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
index 633121b1d..1f88fd0c7 100644
--- a/src/styles/themes/light/fluent.scss
+++ b/src/styles/themes/light/fluent.scss
@@ -8,6 +8,7 @@
 @use '../../../components/checkbox/switch.fluent' as switch;
 @use '../../../components/calendar/calendar.fluent' as calendar;
 @use '../../../components/input/input.fluent' as input;
+@use '../../../components/navbar/navbar.fluent' as navbar;
 
 $palette: utils.palette(
     $primary: #0078d4,
@@ -162,3 +163,4 @@ $type-scale: utils.extend($fluent-type-scale);
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
+@include navbar.theme();
diff --git a/stories/navbar.stories.ts b/stories/navbar.stories.ts
index d12c75de5..166db0977 100644
--- a/stories/navbar.stories.ts
+++ b/stories/navbar.stories.ts
@@ -19,8 +19,8 @@ registerIcon(
 );
 
 registerIcon(
-  'search',
-  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg'
+  'favorite',
+  'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_favorite_24px.svg'
 );
 
 const Template: Story<any, Context> = (
@@ -31,7 +31,25 @@ const Template: Story<any, Context> = (
     <igc-navbar dir=${ifDefined(direction)} style="height:30px">
       <igc-icon slot="start" name="home"></igc-icon>
       <h2>${content}</h2>
-      <igc-icon slot="end" name="search"></igc-icon>
+      <igc-input
+        slot="end"
+        style="align-self: center"
+        type="search"
+        placeholder="search"
+        size="small"
+        outlined
+      >
+        <igc-icon name="search" slot="suffix"></igc-icon>
+      </igc-input>
+      <igc-icon slot="end" name="favorite"></igc-icon>
+      <igc-avatar
+        slot="end"
+        size="small"
+        shape="circle"
+        src="https://i.pravatar.cc/200"
+        >MP</igc-avatar
+      >
+      <igc-button slot="end" name="search">Login</igc-button>
     </igc-navbar>
   `;
 };

From 29ca8e7987c37e35e2e665cb073e0050eb105c69 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Dec 2021 12:12:58 +0200
Subject: [PATCH 13/27] refactor(themes): add dark input themes

---
 .storybook/preview.js                         |  2 +-
 src/components/input/input.bootstrap.scss     |  7 +++++--
 src/components/input/input.dark.material.scss |  9 ++++++++
 src/components/input/input.fluent.scss        |  4 +++-
 src/components/input/input.indigo.scss        |  6 ++++++
 src/components/input/input.material.scss      | 21 +++++++++++--------
 src/styles/themes/dark/bootstrap.scss         |  2 +-
 src/styles/themes/dark/fluent.scss            |  2 +-
 src/styles/themes/dark/indigo.scss            |  2 +-
 src/styles/themes/dark/material.scss          |  3 +++
 10 files changed, 42 insertions(+), 16 deletions(-)
 create mode 100644 src/components/input/input.dark.material.scss

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 01bad5f16..a0907d492 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -54,7 +54,7 @@ export const parameters = {
       },
       {
         name: 'dark',
-        value: '#444',
+        value: '#000',
       },
     ],
   },
diff --git a/src/components/input/input.bootstrap.scss b/src/components/input/input.bootstrap.scss
index c5c0b08dc..1f1fe5dd3 100644
--- a/src/components/input/input.bootstrap.scss
+++ b/src/components/input/input.bootstrap.scss
@@ -1,5 +1,7 @@
 @use '../../styles/utilities' as utils;
 
+$input-background: #fff !default;
+
 @mixin theme() {
     igc-input,
     igc-input[outlined] {
@@ -12,7 +14,7 @@
         &::part(input) {
             padding: initial;
             border-radius: utils.rem(4px);
-            background: #fff;
+            background: $input-background;
             box-shadow: 0 0 0 0 transparent;
             z-index: 1;
             border: 1px solid utils.color(gray, 400);
@@ -53,6 +55,7 @@
         &::part(container) {
             border: none;
             grid-template-columns: auto 1fr auto;
+            background: $input-background;
 
             &::after {
                 display: none;
@@ -168,7 +171,7 @@
         }
 
         &::part(input), {
-            font-size: utils.rem(14px);
+            font-size: utils.rem(16px);
             padding: utils.rem(4px) utils.rem(8px);
         }
 
diff --git a/src/components/input/input.dark.material.scss b/src/components/input/input.dark.material.scss
new file mode 100644
index 000000000..5a859ea2c
--- /dev/null
+++ b/src/components/input/input.dark.material.scss
@@ -0,0 +1,9 @@
+@use '../../styles/utilities' as utils;
+
+@mixin theme() {
+    igc-input:focus-within {
+        &::part(container) {
+            background: utils.color(gray, 100);
+        }
+    }
+}
diff --git a/src/components/input/input.fluent.scss b/src/components/input/input.fluent.scss
index f69d8833b..abcc5ec42 100644
--- a/src/components/input/input.fluent.scss
+++ b/src/components/input/input.fluent.scss
@@ -1,5 +1,7 @@
 @use '../../styles/utilities' as utils;
 
+$container-background: utils.color(surface, 500) !default;
+
 @mixin theme() {
     igc-input,
     igc-input[outlined] {
@@ -38,7 +40,7 @@
             border: 1px solid utils.color(gray, 500);
             border-radius: utils.rem(2px);
             transition: none;
-            background: utils.color(surface, 500);
+            background: $container-background;
             cursor: text;
             grid-template-columns: auto 1fr auto;
             overflow: hidden;
diff --git a/src/components/input/input.indigo.scss b/src/components/input/input.indigo.scss
index 4cded7a52..cd4e7c3e3 100644
--- a/src/components/input/input.indigo.scss
+++ b/src/components/input/input.indigo.scss
@@ -1,5 +1,7 @@
 @use '../../styles/utilities' as utils;
 
+$label-focus-color: utils.color(primary, 500) !default;
+
 @mixin theme() {
     igc-input,
     igc-input[outlined] {
@@ -72,6 +74,10 @@
                 transform: scaleY(1);
             }
         }
+
+        &::part(label) {
+            color: $label-focus-color;
+        }
     }
 
     igc-input[invalid],
diff --git a/src/components/input/input.material.scss b/src/components/input/input.material.scss
index 01b39ceeb..2dc03d6b7 100644
--- a/src/components/input/input.material.scss
+++ b/src/components/input/input.material.scss
@@ -3,13 +3,15 @@
 @use '../../styles/common/component';
 @use '../../styles/utilities' as *;
 
-$idle-color: color(gray, 600);
-$idle-hover-color: color(gray, 800);
-$active-color: color(primary, 500);
-$error-color: color(error, 500);
-$idle-border-width: rem(1px);
-$active-border-width: rem(2px);
-$fs: rem(16px);
+$idle-color: color(gray, 600) !default;
+$idle-hover-color: color(gray, 800) !default;
+$hover-background: color(gray, 200) !default;
+$focus-background: color(gray, 300) !default;
+$active-color: color(primary, 500) !default;
+$error-color: color(error, 500) !default;
+$idle-border-width: rem(1px) !default;
+$active-border-width: rem(2px) !default;
+$fs: rem(16px) !default;
 
 $input-height: (
     large: rem(56px),
@@ -135,6 +137,7 @@ $input-height: (
     height: 100%;
     border: none;
     background: transparent;
+    color: color(gray, 900);
     outline-style: none;
     padding: 0 rem(4px);
     font-size: rem(16px);
@@ -449,14 +452,14 @@ $input-height: (
 
 :host(:not([outlined]):hover) {
     [part~='container'] {
-        background: color(gray, 200);
+        background: $hover-background;
         border-bottom: 1px solid color(gray, 800);
     }
 }
 
 :host(:not([outlined]):focus-within) {
     [part~='container'] {
-        background: color(gray, 300);
+        background: $focus-background;
         border-bottom: 1px solid $active-color;
 
         &::after {
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 90dc64271..43d1b269c 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -9,7 +9,7 @@
 @use '../../../components/navbar/navbar.bootstrap' as navbar;
 @use '../../../components/list/list.dark.bootstrap' as dark-list;
 @use '../../../components/calendar/calendar.bootstrap' as calendar;
-@use '../../../components/input/input.bootstrap' as input;
+@use '../../../components/input/input.bootstrap' as input with ($input-background: transparent);
 
 $palette: utils.palette(
     $primary: #0d6efd,
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 71c5ab9f8..7274278f9 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -7,7 +7,7 @@
 @use '../../../components/checkbox/switch.dark.fluent' as dark-switch;
 @use '../../../components/list/list.dark.fluent' as dark-list;
 @use '../../../components/calendar/calendar.fluent' as calendar;
-@use '../../../components/input/input.fluent' as input;
+@use '../../../components/input/input.fluent' as input with($container-background: transparent);
 
 $palette: utils.palette(
     $primary: #0078d4,
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index daf3a107c..1c80afbb9 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -10,7 +10,7 @@
 @use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
 @use '../../../components/nav-drawer/nav-drawer-header-item.indigo' as nav-drawer-header;
 @use '../../../components/list/list.dark.indigo' as dark-list;
-@use '../../../components/input/input.indigo' as input;
+@use '../../../components/input/input.indigo' as input with($label-focus-color: utils.color(gray, 800));
 
 $palette: utils.palette(
     $primary: #3f51b5,
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index 4dfb6b7f4..6234cc9eb 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../../../components/input/input.dark.material.scss' as input;
 
 $palette: utils.palette(
     $primary: #09f,
@@ -27,3 +28,5 @@ $type-scale: utils.type-scale();
         $type-scale: $type-scale
     );
 }
+
+@include input.theme();

From 411bff9e5552a2d1fd0d79b90536e3c637acf960 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Dec 2021 12:28:15 +0200
Subject: [PATCH 14/27] lint(themes): fix errors

---
 src/styles/themes/dark/bootstrap.scss | 36 +++++++++------------------
 src/styles/themes/dark/fluent.scss    | 21 +++-------------
 src/styles/themes/dark/indigo.scss    | 25 ++++---------------
 src/styles/themes/dark/material.scss  |  9 +++----
 4 files changed, 25 insertions(+), 66 deletions(-)

diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 43d1b269c..09d9cce86 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -21,13 +21,11 @@ $palette: utils.palette(
     $warn: #ffc107,
     $error: #dc3545,
 ) !default;
-
 $elevations: utils.elevations(
-    rgba(0, 0, 0, .26),
-    rgba(0, 0, 0, .12),
-    rgba(0, 0, 0, .08)
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
 ) !default;
-
 $bootstrap_h1: utils.type-style(
     $font-size: utils.rem(40px),
     $font-weight: 500,
@@ -36,7 +34,6 @@ $bootstrap_h1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: utils.rem(8px)
 );
-
 $bootstrap_h2: utils.type-style(
     $font-size: utils.rem(32px),
     $font-weight: 500,
@@ -45,7 +42,6 @@ $bootstrap_h2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: utils.rem(8px)
 );
-
 $bootstrap_h3: utils.type-style(
     $font-size: utils.rem(28px),
     $font-weight: 500,
@@ -54,7 +50,6 @@ $bootstrap_h3: utils.type-style(
     $margin-top: 0,
     $margin-bottom: utils.rem(8px)
 );
-
 $bootstrap_h4: utils.type-style(
     $font-size: utils.rem(24px),
     $font-weight: 500,
@@ -63,7 +58,6 @@ $bootstrap_h4: utils.type-style(
     $margin-top: 0,
     $margin-bottom: utils.rem(8px)
 );
-
 $bootstrap_h5: utils.type-style(
     $font-size: utils.rem(20px),
     $font-weight: 500,
@@ -72,7 +66,6 @@ $bootstrap_h5: utils.type-style(
     $margin-top: 0,
     $margin-bottom: utils.rem(8px)
 );
-
 $bootstrap_h6: utils.type-style(
     $font-size: utils.rem(16px),
     $font-weight: 400,
@@ -81,7 +74,6 @@ $bootstrap_h6: utils.type-style(
     $margin-top: 0,
     $margin-bottom: utils.rem(8px)
 );
-
 $bootstrap_body-1: utils.type-style(
     $font-size: utils.rem(16px),
     $font-weight: 400,
@@ -90,7 +82,6 @@ $bootstrap_body-1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $bootstrap_body-2: utils.type-style(
     $font-size: utils.rem(14.4px),
     $font-weight: 400,
@@ -99,7 +90,6 @@ $bootstrap_body-2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $bootstrap_subtitle-1: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 400,
@@ -108,7 +98,6 @@ $bootstrap_subtitle-1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $bootstrap_subtitle-2: utils.type-style(
     $font-size: utils.rem(14.4px),
     $font-weight: 400,
@@ -117,7 +106,6 @@ $bootstrap_subtitle-2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $bootstrap_button: utils.type-style(
     $font-size: utils.rem(16px),
     $font-weight: 500,
@@ -126,7 +114,6 @@ $bootstrap_button: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $bootstrap_caption: utils.type-style(
     $font-size: utils.rem(12px),
     $font-weight: 400,
@@ -134,7 +121,6 @@ $bootstrap_caption: utils.type-style(
     $line-height: utils.rem(16px),
     $text-transform: none
 );
-
 $bootstrap_overline: utils.type-style(
     $font-size: utils.rem(10px),
     $font-weight: 400,
@@ -142,7 +128,6 @@ $bootstrap_overline: utils.type-style(
     $line-height: utils.rem(16px),
     $text-transform: uppercase
 );
-
 $bootstrap_weekday: utils.type-style(
     $font-size: utils.rem(13px),
     $font-weight: 400,
@@ -151,7 +136,6 @@ $bootstrap_weekday: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $_base-scale: utils.type-scale(
     $_meta: (variant: 'bootstrap'),
     $h1: $bootstrap_h1,
@@ -168,22 +152,27 @@ $_base-scale: utils.type-scale(
     $caption: $bootstrap_caption,
     $overline: $bootstrap_overline
 );
-
-$type-scale: utils.extend($_base-scale, (
-    calendar-labels: $bootstrap_weekday,
-));
+$type-scale: utils.extend(
+    $_base-scale,
+    (
+        calendar-labels: $bootstrap_weekday,
+    )
+);
 
 :root {
     --igc-border-radius: #{utils.rem(2px)};
     --igc-spacing-small: #{utils.rem(2px)};
     --igc-spacing-medium: #{utils.rem(4px)};
     --igc-spacing-large: #{utils.rem(8px)};
+
     @include utils.palette($palette);
     @include utils.elevations($elevations);
+    /* stylelint-disable */
     @include utils.typography(
         $font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
         $type-scale: $type-scale
     );
+    /* stylelint-enable */
 }
 
 @include badge.theme();
@@ -197,4 +186,3 @@ $type-scale: utils.extend($_base-scale, (
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
-
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 7274278f9..54a74db89 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -18,13 +18,11 @@ $palette: utils.palette(
     $warn: #797673,
     $error: #a80000,
 ) !default;
-
 $elevations: utils.elevations(
-    rgba(0, 0, 0, .26),
-    rgba(0, 0, 0, .12),
-    rgba(0, 0, 0, .08)
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
 ) !default;
-
 $fluent_h1: utils.type-style(
     $font-size: utils.rem(68px),
     $font-weight: 700,
@@ -33,7 +31,6 @@ $fluent_h1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_h2: utils.type-style(
     $font-size: utils.rem(42px),
     $font-weight: 700,
@@ -42,7 +39,6 @@ $fluent_h2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_h3: utils.type-style(
     $font-size: utils.rem(32px),
     $font-weight: 600,
@@ -51,7 +47,6 @@ $fluent_h3: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_h4: utils.type-style(
     $font-size: utils.rem(28px),
     $font-weight: 400,
@@ -60,7 +55,6 @@ $fluent_h4: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_h5: utils.type-style(
     $font-size: utils.rem(20px),
     $font-weight: 400,
@@ -69,7 +63,6 @@ $fluent_h5: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_h6: utils.type-style(
     $font-size: utils.rem(18px),
     $font-weight: 400,
@@ -78,7 +71,6 @@ $fluent_h6: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_body-1: utils.type-style(
     $font-size: utils.rem(16px),
     $font-weight: 400,
@@ -87,7 +79,6 @@ $fluent_body-1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_body-2: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 400,
@@ -96,7 +87,6 @@ $fluent_body-2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_subtitle-1: utils.type-style(
     $font-size: utils.rem(12px),
     $font-weight: 400,
@@ -105,7 +95,6 @@ $fluent_subtitle-1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_subtitle-2: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 400,
@@ -114,7 +103,6 @@ $fluent_subtitle-2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $fluent_button: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 600,
@@ -124,7 +112,6 @@ $fluent_button: utils.type-style(
     $margin-bottom: 0,
     $letter-spacing: 0,
 );
-
 $fluent-type-scale: utils.type-scale(
     $_meta: (variant: 'fluent'),
     $h1: $fluent_h1,
@@ -139,7 +126,6 @@ $fluent-type-scale: utils.type-scale(
     $body-2: $fluent_body-2,
     $button: $fluent_button
 );
-
 $type-scale: utils.extend($fluent-type-scale);
 
 :root {
@@ -147,6 +133,7 @@ $type-scale: utils.extend($fluent-type-scale);
     --igc-spacing-small: #{utils.rem(2px)};
     --igc-spacing-medium: #{utils.rem(4px)};
     --igc-spacing-large: #{utils.rem(8px)};
+
     @include utils.palette($palette);
     @include utils.elevations($elevations);
     @include utils.typography(
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 1c80afbb9..c8e88a4b6 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -15,20 +15,18 @@
 $palette: utils.palette(
     $primary: #3f51b5,
     $secondary: #3f51b5,
-    $gray: hsl(262, 8%, 98%),
+    $gray: hsl(262deg 8% 98%),
     $surface: #2a2b2f,
     $info: #9208bc,
     $success: #689f38,
     $warn: #ff9800,
     $error: #cf1a2b
 ) !default;
-
 $elevations: utils.elevations(
-    rgba(0, 0, 0, .26),
-    rgba(0, 0, 0, .12),
-    rgba(0, 0, 0, .08)
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
 ) !default;
-
 $indigo_h1: utils.type-style(
     $font-size: utils.rem(96px),
     $font-weight: 200,
@@ -38,7 +36,6 @@ $indigo_h1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_h2: utils.type-style(
     $font-size: utils.rem(60px),
     $font-weight: 200,
@@ -48,7 +45,6 @@ $indigo_h2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_h3: utils.type-style(
     $font-size: utils.rem(48px),
     $font-weight: 200,
@@ -57,7 +53,6 @@ $indigo_h3: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_h4: utils.type-style(
     $font-size: utils.rem(36px),
     $font-weight: 200,
@@ -66,7 +61,6 @@ $indigo_h4: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_h5: utils.type-style(
     $font-size: utils.rem(24px),
     $font-weight: 200,
@@ -75,7 +69,6 @@ $indigo_h5: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_h6: utils.type-style(
     $font-size: utils.rem(20px),
     $font-weight: 600,
@@ -84,7 +77,6 @@ $indigo_h6: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_body-1: utils.type-style(
     $font-size: utils.rem(16px),
     $font-weight: 400,
@@ -93,7 +85,6 @@ $indigo_body-1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_body-2: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 400,
@@ -102,7 +93,6 @@ $indigo_body-2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_subtitle-1: utils.type-style(
     $font-size: utils.rem(16px),
     $font-weight: 600,
@@ -111,7 +101,6 @@ $indigo_subtitle-1: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_subtitle-2: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 700,
@@ -120,7 +109,6 @@ $indigo_subtitle-2: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_button: utils.type-style(
     $font-size: utils.rem(12px),
     $font-weight: 700,
@@ -129,7 +117,6 @@ $indigo_button: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_caption: utils.type-style(
     $font-size: utils.rem(12px),
     $font-weight: 400,
@@ -138,7 +125,6 @@ $indigo_caption: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo_overline: utils.type-style(
     $font-size: utils.rem(10px),
     $font-weight: 700,
@@ -148,7 +134,6 @@ $indigo_overline: utils.type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-
 $indigo-type-scale: utils.type-scale(
     $_meta: (variant: 'indigo'),
     $h1: $indigo_h1,
@@ -165,7 +150,6 @@ $indigo-type-scale: utils.type-scale(
     $caption: $indigo_caption,
     $overline: $indigo_overline
 );
-
 $type-scale: utils.extend($indigo-type-scale);
 
 :root {
@@ -173,6 +157,7 @@ $type-scale: utils.extend($indigo-type-scale);
     --igc-spacing-small: #{utils.rem(2px)};
     --igc-spacing-medium: #{utils.rem(4px)};
     --igc-spacing-large: #{utils.rem(8px)};
+
     @include utils.palette($palette);
     @include utils.elevations($elevations);
     @include utils.typography(
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index 6234cc9eb..b760c8b6e 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -7,13 +7,11 @@ $palette: utils.palette(
     $gray: #fff,
     $surface: #222,
 ) !default;
-
 $elevations: utils.elevations(
-    rgba(0, 0, 0, .26),
-    rgba(0, 0, 0, .12),
-    rgba(0, 0, 0, .08)
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
 ) !default;
-
 $type-scale: utils.type-scale();
 
 :root {
@@ -21,6 +19,7 @@ $type-scale: utils.type-scale();
     --igc-spacing-small: #{utils.rem(2px)};
     --igc-spacing-medium: #{utils.rem(4px)};
     --igc-spacing-large: #{utils.rem(8px)};
+
     @include utils.palette($palette);
     @include utils.elevations($elevations);
     @include utils.typography(

From b55841139e0d44b6ca7d8324af2ad891215a790b Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Thu, 2 Dec 2021 14:20:12 +0200
Subject: [PATCH 15/27] feat(radio): implement dark themes

---
 src/components/radio/radio.fluent.scss   | 40 ++++++++++++++++--------
 src/components/radio/radio.indigo.scss   | 27 +++++++++++++++-
 src/components/radio/radio.material.scss |  8 ++---
 src/styles/themes/dark/fluent.scss       |  8 ++++-
 src/styles/themes/dark/indigo.scss       |  6 +++-
 5 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/src/components/radio/radio.fluent.scss b/src/components/radio/radio.fluent.scss
index 88b4b4cc1..fecc426a8 100644
--- a/src/components/radio/radio.fluent.scss
+++ b/src/components/radio/radio.fluent.scss
@@ -1,5 +1,11 @@
 @use '../../styles/utilities' as utils;
 
+$idle-hover-color: utils.color(gray, 700) !default;
+$checked-hover-color: utils.color(primary, 900) !default;
+$invalid-color: utils.color(error, 500) !default;
+$invalid-hover-color: utils.color(error, 700) !default;
+$disabled-color: utils.color(gray, 400) !default;
+
 @mixin theme() {
     igc-radio::part(base) {
         transition-duration: .1s;
@@ -29,7 +35,7 @@
     igc-radio:hover::part(control),
     igc-radio:focus-within::part(control) {
         &::before {
-            background: utils.color(gray, 700);
+            background: $idle-hover-color;
         }
     }
 
@@ -46,67 +52,75 @@
     igc-radio:hover::part(control checked),
     igc-radio:focus-within::part(control checked) {
         &::after {
-            border-color: utils.color(primary, 900);
+            border-color: $checked-hover-color;
         }
 
         &::before {
-            background: utils.color(primary, 900);
+            background: $checked-hover-color;
         }
     }
 
+    igc-radio[invalid]::part(label) {
+        color: $invalid-color;
+    }
+
     igc-radio[invalid]::part(control) {
         &::after {
-            border-color: utils.color(error, 500);
+            border-color: $invalid-color;
         }
     }
 
     igc-radio[invalid]:hover::part(control) {
         &::before {
-            background: utils.color(error, 500);
+            background: $invalid-color;
         }
     }
 
     igc-radio[invalid]::part(control checked) {
         &::after {
-            border-color: utils.color(error, 500);
+            border-color: $invalid-color;
         }
 
         &::before {
-            background: utils.color(error, 500);
+            background: $invalid-color;
         }
     }
 
     igc-radio[invalid]:hover::part(control),
     igc-radio[invalid]:focus-within::part(control) {
         &::after {
-            border-color: utils.color(error, 700);
+            border-color: $invalid-hover-color;
         }
     }
 
     igc-radio[invalid]:hover::part(control checked),
     igc-radio[invalid]:focus-within::part(control checked) {
         &::after {
-            border-color: utils.color(error, 700);
+            border-color: $invalid-hover-color;
         }
 
         &::before {
-            background: utils.color(error, 700);
+            background: $invalid-hover-color;
         }
     }
 
+    igc-radio[disabled]::part(label) {
+        color: $disabled-color;
+    }
+
     igc-radio[disabled]::part(control) {
         &::after {
-            border-color: utils.color(gray, 400);
+            border-color: $disabled-color;
         }
     }
 
     igc-radio[disabled]::part(control checked) {
         &::after {
-            border-color: utils.color(gray, 400);
+            border-color: $disabled-color;
         }
 
         &::before {
-            background: utils.color(gray, 400);
+            background: $disabled-color;
         }
     }
 }
diff --git a/src/components/radio/radio.indigo.scss b/src/components/radio/radio.indigo.scss
index 1c898944c..a95194dbb 100644
--- a/src/components/radio/radio.indigo.scss
+++ b/src/components/radio/radio.indigo.scss
@@ -1,5 +1,9 @@
 @use '../../styles/utilities' as utils;
 
+$idle-color: utils.color(gray, 600) !default;
+$checked-color: utils.color(secondary, 500) !default;
+$disabled-color: utils.color(gray, 300) !default;
+
 @mixin theme() {
     igc-radio {
         font-weight: 600;
@@ -13,6 +17,10 @@
         background: none;
     }
 
+    igc-radio:not([invalid])::part(control)::after {
+        border-color: $idle-color;
+    }
+
     igc-radio:hover::part(control) {
         box-shadow: 0 0 0 utils.rem(4px) utils.color(gray, 200, .87);
     }
@@ -21,6 +29,15 @@
         box-shadow: 0 0 0 utils.rem(4px) utils.color(gray, 300, .87);
     }
 
+    igc-radio:not([invalid])::part(control checked)::after {
+        border-color: $checked-color;
+    }
+
+    igc-radio:not([invalid])::part(control checked)::before {
+        background: $checked-color;
+        border-color: $checked-color;
+    }
+
     igc-radio:hover::part(control checked) {
         box-shadow: 0 0 0 utils.rem(4px) utils.color(secondary, 100, .87);
     }
@@ -39,7 +56,6 @@
 
     igc-radio[disabled] {
         pointer-events: none;
-        color: color(gray, 400);
         user-select: none;
 
         &::part(control) {
@@ -48,4 +64,13 @@
             }
         }
     }
+
+    igc-radio[disabled]::part(control)::after,
+    igc-radio[disabled]::part(control checked)::after {
+        border-color: $disabled-color;
+    }
+
+    igc-radio[disabled]::part(control checked)::before {
+        background: $disabled-color;
+    }
 }
diff --git a/src/components/radio/radio.material.scss b/src/components/radio/radio.material.scss
index 85beda89e..2aad67fb9 100644
--- a/src/components/radio/radio.material.scss
+++ b/src/components/radio/radio.material.scss
@@ -18,11 +18,11 @@ input[type='radio'] {
     transition: color .15s ease-in;
 
     &:hover [part='control'] {
-        background: color(gray, 200, .87);
+        background: color(gray, 600, .06);
     }
 
     &:focus-within [part='control'] {
-        background: color(gray, 300, .87);
+        background: color(gray, 600, .12);
     }
 }
 
@@ -65,11 +65,11 @@ input[type='radio'] {
 
 [part='base checked'] {
     &:hover [part~='control'] {
-        background: color(secondary, 50, .54);
+        background: color(secondary, 500, .06);
     }
 
     &:focus-within [part~='control'] {
-        background: color(secondary, 100, .72);
+        background: color(secondary, 500, .12);
     }
 }
 
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 54a74db89..ad5343d1f 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -3,7 +3,13 @@
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
 @use '../../../components/checkbox/checkbox.dark.fluent' as dark-checkbox;
-@use '../../../components/radio/radio.fluent' as radio;
+@use '../../../components/radio/radio.fluent' as radio with (
+    $idle-hover-color: utils.color(gray, 500),
+    $checked-hover-color: utils.color(primary, 100),
+    $invalid-color: utils.color(error, 200),
+    $invalid-hover-color: utils.color(error, 100),
+    $disabled-color: utils.color(gray, 200)
+);
 @use '../../../components/checkbox/switch.dark.fluent' as dark-switch;
 @use '../../../components/list/list.dark.fluent' as dark-list;
 @use '../../../components/calendar/calendar.fluent' as calendar;
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index c8e88a4b6..25402e0b3 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -3,7 +3,11 @@
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
 @use '../../../components/checkbox/checkbox.dark.indigo' as dark-checkbox;
-@use '../../../components/radio/radio.indigo' as radio;
+@use '../../../components/radio/radio.indigo' as radio with (
+    $idle-color: utils.color(gray, 700),
+    $checked-color: utils.color(gray, 900),
+    $disabled-color: utils.color(gray, 400)
+);
 @use '../../../components/checkbox/switch.dark.indigo' as dark-switch;
 @use '../../../components/navbar/navbar.indigo' as navbar;
 @use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;

From c1d8cdba73332d471242d1a93b4856cf912ea7d3 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Thu, 2 Dec 2021 15:37:47 +0200
Subject: [PATCH 16/27] refactor(switch): dark themes

---
 .../checkbox/switch.dark.fluent.scss          | 92 -------------------
 .../checkbox/switch.dark.indigo.scss          | 38 --------
 src/components/checkbox/switch.fluent.scss    | 63 +++++++++----
 src/components/checkbox/switch.indigo.scss    | 33 ++++---
 src/components/radio/radio.fluent.scss        |  4 +-
 src/components/radio/radio.indigo.scss        |  4 +
 src/styles/themes/dark/fluent.scss            | 14 ++-
 src/styles/themes/dark/indigo.scss            |  9 +-
 8 files changed, 89 insertions(+), 168 deletions(-)
 delete mode 100644 src/components/checkbox/switch.dark.fluent.scss
 delete mode 100644 src/components/checkbox/switch.dark.indigo.scss

diff --git a/src/components/checkbox/switch.dark.fluent.scss b/src/components/checkbox/switch.dark.fluent.scss
deleted file mode 100644
index 0db3a13e2..000000000
--- a/src/components/checkbox/switch.dark.fluent.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@use '../../styles/utilities' as utils;
-@use 'switch.fluent' as light-switch;
-
-@mixin theme {
-    @include light-switch.theme();
-
-    igc-switch:hover::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(gray, 900)};
-    }
-
-    igc-switch::part(thumb) {
-        background: #{utils.color(gray, 500)};
-    }
-
-    igc-switch:hover::part(thumb) {
-        background: #{utils.color(gray, 900)};
-    }
-
-    igc-switch::part(control checked),
-    igc-switch:hover::part(control checked) {
-        box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
-    }
-
-    igc-switch:hover::part(control checked),
-    igc-switch:focus-within::part(control checked) {
-        background: #{utils.color(primary, 100)};
-        box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
-    }
-
-    igc-switch:not([disabled])[invalid]::part(label) {
-        color: #{utils.color(error, 200)};
-    }
-
-    igc-switch[invalid]::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
-    }
-
-    igc-switch[invalid]:hover::part(control),
-    igc-switch[invalid]:focus-within::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
-    }
-
-    igc-switch[invalid]::part(thumb) {
-        background: #{utils.color(error, 200)};
-    }
-
-    igc-switch[invalid]:hover::part(thumb),
-    igc-switch[invalid]:focus-within::part(thumb) {
-        background: #{utils.color(error, 100)};
-    }
-
-    igc-switch[invalid]::part(control checked) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
-        background: #{utils.color(error, 200)};
-    }
-
-    igc-switch[invalid]:hover::part(control checked),
-    igc-switch[invalid]:focus-within::part(control checked) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
-        background: #{utils.color(error, 100)};
-    }
-
-    igc-switch::part(thumb checked),
-    igc-switch:hover::part(thumb checked),
-    igc-switch:focus-within::part(thumb checked),
-    igc-switch[invalid]::part(thumb checked),
-    igc-switch[invalid]:hover::part(thumb checked),
-    igc-switch[invalid]:focus-within::part(thumb checked) {
-        background: #{utils.color(surface, 500)};
-    }
-
-    igc-switch[disabled]::part(label) {
-        color: #{utils.color(gray, 200)};
-    }
-
-    igc-switch[disabled]::part(control),
-    igc-switch[disabled][invalid]::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
-    }
-
-    igc-switch[disabled]::part(thumb),
-    igc-switch[disabled][invalid]::part(thumb),
-    igc-switch[disabled]::part(control checked),
-    igc-switch[disabled][invalid]::part(control checked) {
-        background: #{utils.color(gray, 200)};
-    }
-
-    igc-switch[disabled]::part(thumb checked),
-    igc-switch[disabled][invalid]::part(thumb checked) {
-        background: #{utils.color(surface, 100)};
-    }
-}
diff --git a/src/components/checkbox/switch.dark.indigo.scss b/src/components/checkbox/switch.dark.indigo.scss
deleted file mode 100644
index c443fd278..000000000
--- a/src/components/checkbox/switch.dark.indigo.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@use '../../styles/utilities' as utils;
-@use 'switch.indigo' as light-switch;
-
-@mixin theme() {
-    @include light-switch.theme();
-
-    igc-switch::part(control) {
-        box-shadow: inset 0 0 0 2px #{utils.color(gray, 700)};
-    }
-
-    igc-switch:hover::part(control),
-    igc-switch:focus-within::part(control) {
-        &::after {
-            border: 2px solid #{utils.color(gray, 700)};
-        }
-    }
-
-    igc-switch::part(control checked) {
-        background: #{utils.color(gray, 900)};
-        box-shadow: inset 0 0 0 2px #{utils.color(gray, 900)};
-    }
-
-    igc-switch:hover::part(control checked),
-    igc-switch:focus-within::part(control checked) {
-        &::after {
-            border: 2px solid #{utils.color(gray, 900)};
-        }
-    }
-
-    igc-switch::part(thumb) {
-        background: #{utils.color(gray, 700)};
-    }
-
-    igc-switch::part(thumb checked),
-    igc-switch[invalid]::part(thumb checked) {
-        background: #{utils.color(surface, 500)};
-    }
-}
diff --git a/src/components/checkbox/switch.fluent.scss b/src/components/checkbox/switch.fluent.scss
index dc4b32ffd..8a7d32b82 100644
--- a/src/components/checkbox/switch.fluent.scss
+++ b/src/components/checkbox/switch.fluent.scss
@@ -1,5 +1,13 @@
 @use '../../styles/utilities' as utils;
 
+$thumb-color: #{utils.color(gray, 700)} !default;
+$disabled-thumb-color: #{utils.color(surface, 500)} !default;
+$hover-color: #{utils.color(gray, 800)} !default;
+$checked-hover-color: #{utils.color(primary, 900)} !default;
+$invalid-color: #{utils.color(error, 500)} !default;
+$invalid-hover-color: #{utils.color(error, 700)} !default;
+$disabled-color: #{utils.color(gray, 400)} !default;
+
 @mixin theme() {
     igc-switch {
         --size: #{utils.rem(40px)};
@@ -7,6 +15,10 @@
         --thumb-offset: calc(var(--thumb-size) / 2);
     }
 
+    igc-switch::part(thumb) {
+        background: $thumb-color;
+    }
+
     igc-switch::part(control) {
         width: var(--size);
         height: utils.rem(20px);
@@ -17,12 +29,12 @@
 
     igc-switch:hover::part(control),
     igc-switch:focus-within::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
+        box-shadow: inset 0 0 0 1px $hover-color;
     }
 
     igc-switch:hover::part(thumb),
     igc-switch:focus-within::part(thumb) {
-        background: #{utils.color(gray, 800)};
+        background: $hover-color;
     }
 
     igc-switch::part(control checked) {
@@ -32,54 +44,63 @@
 
     igc-switch:hover::part(control checked),
     igc-switch:focus-within::part(control checked) {
-        background: utils.color(primary, 900);
-        box-shadow: inset 0 0 0 1px #{utils.color(primary, 900)};
+        background: $checked-hover-color;
+        box-shadow: inset 0 0 0 1px $checked-hover-color;
+    }
+
+    igc-switch:not([disabled])[invalid]::part(label) {
+        color: $invalid-color;
     }
 
     igc-switch[invalid]::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 500)};
+        box-shadow: inset 0 0 0 1px $invalid-color;
     }
 
     igc-switch[invalid]::part(thumb) {
-        background: utils.color(error, 500);
+        background: $invalid-color;
     }
 
     igc-switch[invalid]::part(control checked) {
-        background: utils.color(error, 500);
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 500)};
+        background: $invalid-color;
+        box-shadow: inset 0 0 0 1px $invalid-color;
     }
 
     igc-switch[invalid]:hover::part(control),
     igc-switch[invalid]:focus-within::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 700)};
+        box-shadow: inset 0 0 0 1px $invalid-hover-color;
     }
 
     igc-switch[invalid]:hover::part(thumb),
     igc-switch[invalid]:focus-within::part(thumb) {
-        background: utils.color(error, 700);
+        background: $invalid-hover-color;
     }
 
     igc-switch[invalid]::part(thumb checked),
     igc-switch[invalid]:hover::part(thumb checked),
     igc-switch[invalid]:focus-within::part(thumb checked) {
-        background: white;
+        background: #{utils.color(surface, 500)};
     }
 
     igc-switch[invalid]:hover::part(control checked),
     igc-switch[invalid]:focus-within::part(control checked) {
-        box-shadow: inset 0 0 0 1px #{utils.color(error, 700)};
-        background: utils.color(error, 700);
+        box-shadow: inset 0 0 0 1px $invalid-hover-color;
+        background: $invalid-hover-color;
+    }
+
+    igc-switch[disabled]::part(label) {
+        color: $disabled-color;
     }
 
     igc-switch[disabled]::part(control),
     igc-switch[disabled][invalid]::part(control) {
-        box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
+        box-shadow: inset 0 0 0 1px $disabled-color;
     }
 
     igc-switch[disabled]::part(control checked),
     igc-switch[disabled][invalid]::part(control checked),
-    igc-switch[disabled]::part(thumb) {
-        background: #{utils.color(gray, 400)};
+    igc-switch[disabled]::part(thumb),
+    igc-switch[disabled][invalid]::part(thumb) {
+        background: $disabled-color;
     }
 
     igc-switch::part(thumb) {
@@ -102,10 +123,14 @@
 
     igc-switch::part(thumb checked),
     igc-switch:hover::part(thumb checked),
-    igc-switch:focus-within::part(thumb checked),
-    igc-switch[disabled]::part(thumb checked) {
-        background: white;
+    igc-switch:focus-within::part(thumb checked) {
+        background: #{utils.color(surface, 500)};
         animation-name: thumb-on;
         margin-inline-start: calc(var(--size) - var(--thumb-size) - var(--thumb-offset));
     }
+
+    igc-switch[disabled]::part(thumb checked),
+    igc-switch[disabled][invalid]::part(thumb checked) {
+        background: $disabled-thumb-color;
+    }
 }
diff --git a/src/components/checkbox/switch.indigo.scss b/src/components/checkbox/switch.indigo.scss
index 0ce75a7a5..2491b6162 100644
--- a/src/components/checkbox/switch.indigo.scss
+++ b/src/components/checkbox/switch.indigo.scss
@@ -1,5 +1,10 @@
 @use '../../styles/utilities' as utils;
 
+$border-color: utils.color(gray, 500) !default;
+$checked-color: utils.color(secondary, 500) !default;
+$thumb-color: utils.color(gray, 600) !default;
+$disabled-color: utils.color(gray, 300) !default;
+
 @mixin theme() {
     igc-switch {
         font-weight: 600;
@@ -12,7 +17,7 @@
     igc-switch::part(control) {
         width: var(--size);
         height: utils.rem(16px);
-        box-shadow: inset 0 0 0 2px #{utils.color(gray, 500)};
+        box-shadow: inset 0 0 0 2px $border-color;
         border-radius: utils.rem(8px);
         background: transparent;
 
@@ -29,7 +34,7 @@
         box-shadow: 0 0 0 2px #{utils.color(gray, 200, .87)};
 
         &::after {
-            border: 2px solid #{utils.color(gray, 500)};
+            border: 2px solid $border-color;
         }
     }
 
@@ -37,20 +42,20 @@
         box-shadow: 0 0 0 2px #{utils.color(gray, 300, .87)};
 
         &::after {
-            border: 2px solid #{utils.color(gray, 500)};
+            border: 2px solid $border-color;
         }
     }
 
     igc-switch::part(control checked) {
-        background: #{utils.color(primary, 500)};
-        box-shadow: inset 0 0 0 2px #{utils.color(secondary, 500)};
+        background: $checked-color;
+        box-shadow: inset 0 0 0 2px $checked-color;
     }
 
     igc-switch:hover::part(control checked) {
         box-shadow: 0 0 0 2px #{utils.color(secondary, 100, .87)};
 
         &::after {
-            border: 2px solid #{utils.color(secondary, 500)};
+            border: 2px solid $checked-color;
         }
     }
 
@@ -58,7 +63,7 @@
         box-shadow: 0 0 0 2px #{utils.color(secondary, 200, .87)};
 
         &::after {
-            border: 2px solid #{utils.color(secondary, 500)};
+            border: 2px solid $checked-color;
         }
     }
 
@@ -70,7 +75,7 @@
 
     igc-switch[invalid]::part(control checked),
     igc-switch[invalid]::part(thumb) {
-        background: utils.color(error, 500);
+        background: #{utils.color(error, 500)};
     }
 
     igc-switch[invalid]:hover::part(control) {
@@ -92,7 +97,7 @@
 
     igc-switch[disabled]::part(control),
     igc-switch[disabled][invalid]::part(control) {
-        box-shadow: inset 0 0 0 2px #{utils.color(gray, 300)};
+        box-shadow: inset 0 0 0 2px $disabled-color;
     }
 
     igc-switch[disabled]::part(control checked),
@@ -107,7 +112,7 @@
         border-radius: utils.rem(10px);
         animation-name: thumb-off;
         margin-inline-start: var(--thumb-offset);
-        background: #{utils.color(gray, 600)};
+        background: $thumb-color;
         box-shadow: none;
 
         &::after {
@@ -121,13 +126,17 @@
 
     igc-switch::part(thumb checked),
     igc-switch[invalid]::part(thumb checked) {
-        background: white;
+        background: #{utils.color(surface, 500)};
         animation-name: thumb-on;
         margin-inline-start: calc(var(--size) - var(--thumb-size) - var(--thumb-offset));
     }
 
     igc-switch[disabled]::part(thumb),
     igc-switch[disabled][invalid]::part(thumb) {
-        background: #{utils.color(gray, 400)};
+        background: $disabled-color;
+    }
+
+    igc-switch[disabled]::part(label) {
+        color: $disabled-color;
     }
 }
diff --git a/src/components/radio/radio.fluent.scss b/src/components/radio/radio.fluent.scss
index fecc426a8..54fb5580a 100644
--- a/src/components/radio/radio.fluent.scss
+++ b/src/components/radio/radio.fluent.scss
@@ -1,6 +1,6 @@
 @use '../../styles/utilities' as utils;
 
-$idle-hover-color: utils.color(gray, 700) !default;
+$hover-color: utils.color(gray, 700) !default;
 $checked-hover-color: utils.color(primary, 900) !default;
 $invalid-color: utils.color(error, 500) !default;
 $invalid-hover-color: utils.color(error, 700) !default;
@@ -35,7 +35,7 @@ $disabled-color: utils.color(gray, 400) !default;
     igc-radio:hover::part(control),
     igc-radio:focus-within::part(control) {
         &::before {
-            background: $idle-hover-color;
+            background: $hover-color;
         }
     }
 
diff --git a/src/components/radio/radio.indigo.scss b/src/components/radio/radio.indigo.scss
index a95194dbb..94f3d9ee8 100644
--- a/src/components/radio/radio.indigo.scss
+++ b/src/components/radio/radio.indigo.scss
@@ -73,4 +73,8 @@ $disabled-color: utils.color(gray, 300) !default;
     igc-radio[disabled]::part(control checked)::before {
         background: $disabled-color;
     }
+
+    igc-radio[disabled]::part(label) {
+        color: $disabled-color;
+    }
 }
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index ad5343d1f..12ef65b90 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -4,13 +4,21 @@
 @use '../../../components/card/card.fluent' as card;
 @use '../../../components/checkbox/checkbox.dark.fluent' as dark-checkbox;
 @use '../../../components/radio/radio.fluent' as radio with (
-    $idle-hover-color: utils.color(gray, 500),
+    $hover-color: utils.color(gray, 500),
+    $checked-hover-color: utils.color(primary, 100),
+    $invalid-color: utils.color(error, 200),
+    $invalid-hover-color: utils.color(error, 100),
+    $disabled-color: utils.color(gray, 200)
+);
+@use '../../../components/checkbox/switch.fluent' as switch with (
+    $thumb-color: utils.color(gray, 500),
+    $disabled-thumb-color: utils.color(surface, 100),
+    $hover-color: utils.color(gray, 900),
     $checked-hover-color: utils.color(primary, 100),
     $invalid-color: utils.color(error, 200),
     $invalid-hover-color: utils.color(error, 100),
     $disabled-color: utils.color(gray, 200)
 );
-@use '../../../components/checkbox/switch.dark.fluent' as dark-switch;
 @use '../../../components/list/list.dark.fluent' as dark-list;
 @use '../../../components/calendar/calendar.fluent' as calendar;
 @use '../../../components/input/input.fluent' as input with($container-background: transparent);
@@ -152,7 +160,7 @@ $type-scale: utils.extend($fluent-type-scale);
 @include card.theme();
 @include dark-checkbox.theme();
 @include radio.theme();
-@include dark-switch.theme();
+@include switch.theme();
 @include dark-list.theme();
 @include calendar.theme();
 @include input.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 25402e0b3..b28cc0033 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -8,7 +8,12 @@
     $checked-color: utils.color(gray, 900),
     $disabled-color: utils.color(gray, 400)
 );
-@use '../../../components/checkbox/switch.dark.indigo' as dark-switch;
+@use '../../../components/checkbox/switch.indigo' as switch with (
+    $border-color: utils.color(gray, 700),
+    $checked-color: utils.color(gray, 900),
+    $thumb-color: utils.color(gray, 700),
+    $disabled-color: utils.color(gray, 400)
+);
 @use '../../../components/navbar/navbar.indigo' as navbar;
 @use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
 @use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
@@ -174,7 +179,7 @@ $type-scale: utils.extend($indigo-type-scale);
 @include card.theme();
 @include dark-checkbox.theme();
 @include radio.theme();
-@include dark-switch.theme();
+@include switch.theme();
 @include navbar.theme();
 @include nav-drawer.theme();
 @include nav-drawer-item.theme();

From 6a039883b5f59f4a8cdaeda47488e7c2ff537295 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Thu, 2 Dec 2021 15:42:15 +0200
Subject: [PATCH 17/27] fix duplicate selector

---
 src/components/checkbox/switch.fluent.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/checkbox/switch.fluent.scss b/src/components/checkbox/switch.fluent.scss
index 8a7d32b82..876c0fbec 100644
--- a/src/components/checkbox/switch.fluent.scss
+++ b/src/components/checkbox/switch.fluent.scss
@@ -15,10 +15,6 @@ $disabled-color: #{utils.color(gray, 400)} !default;
         --thumb-offset: calc(var(--thumb-size) / 2);
     }
 
-    igc-switch::part(thumb) {
-        background: $thumb-color;
-    }
-
     igc-switch::part(control) {
         width: var(--size);
         height: utils.rem(20px);
@@ -109,7 +105,7 @@ $disabled-color: #{utils.color(gray, 400)} !default;
         min-width: var(--thumb-size);
         animation-name: thumb-off;
         margin-inline-start: var(--thumb-offset);
-        background: #{utils.color(gray, 700)};
+        background: $thumb-color;
         box-shadow: none;
 
         &::after {

From 412f83b3c9d761e47b06fca7ebb7b839489701c6 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Thu, 2 Dec 2021 17:30:37 +0200
Subject: [PATCH 18/27] refactor(checkbox): dark themes

---
 .../checkbox/checkbox.dark.fluent.scss        | 147 ------------------
 .../checkbox/checkbox.dark.indigo.scss        |  39 -----
 src/components/checkbox/checkbox.fluent.scss  |  65 +++++---
 src/components/checkbox/checkbox.indigo.scss  |  35 ++++-
 src/components/radio/radio.indigo.scss        |   4 +-
 src/styles/themes/dark/fluent.scss            |  11 +-
 src/styles/themes/dark/indigo.scss            |  10 +-
 7 files changed, 92 insertions(+), 219 deletions(-)
 delete mode 100644 src/components/checkbox/checkbox.dark.fluent.scss
 delete mode 100644 src/components/checkbox/checkbox.dark.indigo.scss

diff --git a/src/components/checkbox/checkbox.dark.fluent.scss b/src/components/checkbox/checkbox.dark.fluent.scss
deleted file mode 100644
index bfeb5cb6a..000000000
--- a/src/components/checkbox/checkbox.dark.fluent.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@use '../../styles/utilities' as utils;
-@use 'checkbox.fluent' as light-checkbox;
-
-@mixin theme() {
-    @include light-checkbox.theme();
-
-    igc-checkbox::part(control) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 700)};
-        }
-    }
-
-    igc-checkbox::part(indicator) {
-        stroke: #{utils.color(surface, 500)};
-    }
-
-    igc-checkbox:hover {
-        &::part(indicator checked) {
-            stroke: #{utils.color(surface, 500)};
-        }
-    }
-
-    igc-checkbox:hover,
-    igc-checkbox:focus-within {
-        &::part(control)::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 900)};
-        }
-    }
-
-    igc-checkbox[indeterminate]:hover::part(control),
-    igc-checkbox[indeterminate]:focus-within::part(control) {
-        &::before {
-            background: #{utils.color(primary, 100)};
-        }
-
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
-            background: transparent;
-        }
-    }
-
-    igc-checkbox::part(control checked) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(primary, 500)};
-        }
-    }
-
-    igc-checkbox:hover::part(control checked),
-    igc-checkbox:focus-within::part(control checked) {
-        &::after {
-            background: #{utils.color(primary, 100)};
-            box-shadow: inset 0 0 0 1px #{utils.color(primary, 100)};
-        }
-    }
-
-    igc-checkbox:not([disabled])[invalid]::part(label) {
-        color: #{utils.color(error, 200)};
-    }
-
-    igc-checkbox[invalid]::part(control) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
-        }
-    }
-
-    igc-checkbox[invalid]:hover::part(indicator) {
-        stroke: #{utils.color(error, 200)};
-    }
-
-    igc-checkbox[invalid]:hover::part(indicator checked) {
-        stroke: #{utils.color(surface, 500)};
-    }
-
-    igc-checkbox[invalid]::part(control checked) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
-            background: #{utils.color(error, 200)};
-        }
-    }
-
-    igc-checkbox[indeterminate][invalid]::part(control) {
-        &::before {
-            background: #{utils.color(error, 200)};
-        }
-
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 200)};
-            background: transparent;
-        }
-    }
-
-    igc-checkbox[invalid]:hover::part(control),
-    igc-checkbox[invalid]:focus-within::part(control) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
-        }
-    }
-
-    igc-checkbox[invalid]:hover::part(control checked),
-    igc-checkbox[invalid]:focus-within::part(control checked) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
-            background: #{utils.color(error, 100)};
-        }
-    }
-
-    igc-checkbox[indeterminate][invalid]:hover::part(control),
-    igc-checkbox[indeterminate][invalid]:focus-within::part(control) {
-        &::before {
-            background: #{utils.color(error, 100)};
-        }
-
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 100)};
-            background: transparent;
-        }
-    }
-
-    igc-checkbox[disabled]::part(label) {
-        color: #{utils.color(gray, 200)};
-    }
-
-    igc-checkbox[disabled]::part(control),
-    igc-checkbox[disabled][invalid]::part(control) {
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
-        }
-    }
-
-    igc-checkbox[disabled]::part(control checked),
-    igc-checkbox[disabled][invalid]::part(control checked) {
-        &::after {
-            background: #{utils.color(gray, 200)};
-        }
-    }
-
-    igc-checkbox[disabled][indeterminate]::part(control),
-    igc-checkbox[disabled][indeterminate][invalid]::part(control) {
-        &::before {
-            background: #{utils.color(gray, 200)};
-        }
-
-        &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 200)};
-        }
-    }
-}
diff --git a/src/components/checkbox/checkbox.dark.indigo.scss b/src/components/checkbox/checkbox.dark.indigo.scss
deleted file mode 100644
index 2c506c444..000000000
--- a/src/components/checkbox/checkbox.dark.indigo.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@use '../../styles/utilities' as utils;
-@use 'checkbox.indigo' as light-checkbox;
-
-@mixin theme() {
-    @include light-checkbox.theme();
-
-    igc-checkbox::part(control)::after {
-        border-color: #{utils.color(gray, 700)};
-        transition: none;
-    }
-
-    igc-checkbox:not([invalid])::part(control checked)::after,
-    igc-checkbox:not([invalid])[indeterminate]::part(control)::after {
-        background: #{utils.color(gray, 900)};
-        border-color: #{utils.color(gray, 900)};
-    }
-
-    igc-checkbox[invalid]::part(control)::after {
-        border-color: #{utils.color(error, 500)};
-    }
-
-    igc-checkbox[disabled],
-    igc-checkbox[disabled][invalid] {
-        &::part(control)::after {
-            border-color: #{utils.color(gray, 400)};
-        }
-
-        &::part(control checked)::after {
-            background: #{utils.color(gray, 400)};
-        }
-    }
-
-    igc-checkbox[disabled][indeterminate] {
-        &::part(control)::after {
-            background: #{utils.color(gray, 400)};
-            border-color: #{utils.color(gray, 400)};
-        }
-    }
-}
diff --git a/src/components/checkbox/checkbox.fluent.scss b/src/components/checkbox/checkbox.fluent.scss
index e8226df1d..7391a6791 100644
--- a/src/components/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/checkbox.fluent.scss
@@ -1,5 +1,12 @@
 @use '../../styles/utilities' as utils;
 
+$border-color: utils.color(gray, 500) !default;
+$hover-color: utils.color(gray, 800) !default;
+$checked-hover-color: utils.color(primary, 900) !default;
+$invalid-color: utils.color(error, 500) !default;
+$invalid-hover-color: utils.color(error, 700) !default;
+$disabled-color: utils.color(gray, 400) !default;
+
 @mixin theme() {
     igc-checkbox::part(control) {
         width: var(--size, utils.rem(20px));
@@ -11,14 +18,14 @@
         &::after {
             border: none;
             background: transparent;
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 500)};
+            box-shadow: inset 0 0 0 1px $border-color;
         }
     }
 
     igc-checkbox::part(indicator) {
         stroke-width: 1.5;
         transform: scale(.8);
-        stroke: white;
+        stroke: #{utils.color(surface, 500)};
     }
 
     igc-checkbox:hover {
@@ -30,14 +37,14 @@
         }
 
         &::part(indicator checked) {
-            stroke: white;
+            stroke: #{utils.color(surface, 500)};
         }
     }
 
     igc-checkbox:hover,
     igc-checkbox:focus-within {
         &::part(control)::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 800)};
+            box-shadow: inset 0 0 0 1px $hover-color;
         }
     }
 
@@ -70,11 +77,11 @@
     igc-checkbox[indeterminate]:hover::part(control),
     igc-checkbox[indeterminate]:focus-within::part(control) {
         &::before {
-            background: #{utils.color(primary, 900)};
+            background: $checked-hover-color;
         }
 
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(primary, 900)};
+            box-shadow: inset 0 0 0 1px $checked-hover-color;
             background: transparent;
         }
     }
@@ -89,72 +96,82 @@
     igc-checkbox:hover::part(control checked),
     igc-checkbox:focus-within::part(control checked) {
         &::after {
-            background: #{utils.color(primary, 900)};
-            box-shadow: inset 0 0 0 1px #{utils.color(primary, 900)};
+            background: $checked-hover-color;
+            box-shadow: inset 0 0 0 1px $checked-hover-color;
         }
     }
 
+    igc-checkbox:not([disabled])[invalid]::part(label) {
+        color: $invalid-color;
+    }
+
     igc-checkbox[invalid]::part(control) {
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 500)};
+            box-shadow: inset 0 0 0 1px $invalid-color;
         }
     }
 
     igc-checkbox[invalid]:hover::part(indicator) {
-        stroke: #{utils.color(error, 500, .54)};
+        stroke: $invalid-color;
     }
 
     igc-checkbox[invalid]:hover::part(indicator checked) {
-        stroke: white;
+        stroke: #{utils.color(surface, 500)};
     }
 
     igc-checkbox[invalid]::part(control checked) {
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 500)};
-            background: #{utils.color(error, 500)};
+            box-shadow: inset 0 0 0 1px $invalid-color;
+            background: $invalid-color;
         }
     }
 
     igc-checkbox[indeterminate][invalid]::part(control) {
         &::before {
-            background: #{utils.color(error, 500)};
+            background: $invalid-color;
         }
 
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 500)};
+            box-shadow: inset 0 0 0 1px $invalid-color;
+            background: transparent;
         }
     }
 
     igc-checkbox[invalid]:hover::part(control),
     igc-checkbox[invalid]:focus-within::part(control) {
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 700)};
+            box-shadow: inset 0 0 0 1px $invalid-hover-color;
         }
     }
 
     igc-checkbox[invalid]:hover::part(control checked),
     igc-checkbox[invalid]:focus-within::part(control checked) {
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 700)};
-            background: #{utils.color(error, 700)};
+            box-shadow: inset 0 0 0 1px $invalid-hover-color;
+            background: $invalid-hover-color;
         }
     }
 
     igc-checkbox[indeterminate][invalid]:hover::part(control),
     igc-checkbox[indeterminate][invalid]:focus-within::part(control) {
         &::before {
-            background: #{utils.color(error, 700)};
+            background: $invalid-hover-color;
         }
 
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(error, 700)};
+            box-shadow: inset 0 0 0 1px $invalid-hover-color;
+            background: transparent;
         }
     }
 
+    igc-checkbox[disabled]::part(label) {
+        color: $disabled-color;
+    }
+
     igc-checkbox[disabled]::part(control),
     igc-checkbox[disabled][invalid]::part(control) {
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
+            box-shadow: inset 0 0 0 1px $disabled-color;
             background: transparent;
         }
     }
@@ -162,18 +179,18 @@
     igc-checkbox[disabled]::part(control checked),
     igc-checkbox[disabled][invalid]::part(control checked) {
         &::after {
-            background: #{utils.color(gray, 400)};
+            background: $disabled-color;
         }
     }
 
     igc-checkbox[disabled][indeterminate]::part(control),
     igc-checkbox[disabled][indeterminate][invalid]::part(control) {
         &::before {
-            background: #{utils.color(gray, 400)};
+            background: $disabled-color;
         }
 
         &::after {
-            box-shadow: inset 0 0 0 1px #{utils.color(gray, 400)};
+            box-shadow: inset 0 0 0 1px $disabled-color;
             background: transparent;
         }
     }
diff --git a/src/components/checkbox/checkbox.indigo.scss b/src/components/checkbox/checkbox.indigo.scss
index dee92ea24..521657569 100644
--- a/src/components/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/checkbox.indigo.scss
@@ -1,5 +1,9 @@
 @use '../../styles/utilities' as utils;
 
+$border-color: utils.color(gray, 500) !default;
+$checked-color: utils.color(secondary, 500) !default;
+$disabled-color: utils.color(gray, 300) !default;
+
 @mixin theme() {
     igc-checkbox {
         font-weight: 600;
@@ -13,10 +17,10 @@
         background: none;
         border-radius: utils.rem(3px);
         border: none;
-        box-shadow: inset 0 0 0 2px #{utils.color(gray, 500)};
 
         &::after {
             border-radius: inherit;
+            border-color: $border-color;
         }
     }
 
@@ -30,6 +34,12 @@
         stroke-dashoffset: 41;
     }
 
+    igc-checkbox:not([invalid])::part(control checked)::after,
+    igc-checkbox:not([invalid])[indeterminate]::part(control)::after {
+        background: $checked-color;
+        border-color: $checked-color;
+    }
+
     igc-checkbox:hover::part(control) {
         box-shadow: 0 0 0 4px #{utils.color(gray, 200, .87)};
     }
@@ -48,6 +58,10 @@
         box-shadow: 0 0 0 4px #{utils.color(secondary, 200, .87)};
     }
 
+    igc-checkbox[invalid]::part(control)::after {
+        border-color: #{utils.color(error, 500)};
+    }
+
     igc-checkbox[invalid]::part(control checked),
     igc-checkbox[invalid][indeterminate]::part(control) {
         box-shadow: inset 0 0 0 4px #{utils.color(error, 500)};
@@ -68,16 +82,33 @@
 
     igc-checkbox[disabled],
     igc-checkbox[disabled][invalid] {
+        &::part(control)::after {
+            border-color: $disabled-color;
+        }
+
         &::part(control checked) {
             background: transparent;
             box-shadow: none;
         }
+
+        &::part(control checked)::after {
+            background: $disabled-color;
+        }
     }
 
-    igc-checkbox[disabled][invalid][indeterminate] {
+    igc-checkbox[disabled][indeterminate] {
         &::part(control) {
             background: transparent;
             box-shadow: none;
         }
+
+        &::part(control)::after {
+            background: $disabled-color;
+            border-color: $disabled-color;
+        }
+    }
+
+    igc-checkbox[disabled]::part(label) {
+        color: $disabled-color;
     }
 }
diff --git a/src/components/radio/radio.indigo.scss b/src/components/radio/radio.indigo.scss
index 94f3d9ee8..f6b913dc7 100644
--- a/src/components/radio/radio.indigo.scss
+++ b/src/components/radio/radio.indigo.scss
@@ -1,6 +1,6 @@
 @use '../../styles/utilities' as utils;
 
-$idle-color: utils.color(gray, 600) !default;
+$border-color: utils.color(gray, 600) !default;
 $checked-color: utils.color(secondary, 500) !default;
 $disabled-color: utils.color(gray, 300) !default;
 
@@ -18,7 +18,7 @@ $disabled-color: utils.color(gray, 300) !default;
     }
 
     igc-radio:not([invalid])::part(control)::after {
-        border-color: $idle-color;
+        border-color: $border-color;
     }
 
     igc-radio:hover::part(control) {
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 12ef65b90..1ffec4f84 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -2,7 +2,14 @@
 @use '../../../components/button/button.fluent' as button;
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
-@use '../../../components/checkbox/checkbox.dark.fluent' as dark-checkbox;
+@use '../../../components/checkbox/checkbox.fluent' as checkbox with (
+    $border-color: utils.color(gray, 700),
+    $hover-color: utils.color(gray, 900),
+    $checked-hover-color: utils.color(primary, 100),
+    $invalid-color: utils.color(error, 200),
+    $invalid-hover-color: utils.color(error, 100),
+    $disabled-color: utils.color(gray, 200)
+);
 @use '../../../components/radio/radio.fluent' as radio with (
     $hover-color: utils.color(gray, 500),
     $checked-hover-color: utils.color(primary, 100),
@@ -158,7 +165,7 @@ $type-scale: utils.extend($fluent-type-scale);
 
 @include button.theme();
 @include card.theme();
-@include dark-checkbox.theme();
+@include checkbox.theme();
 @include radio.theme();
 @include switch.theme();
 @include dark-list.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index b28cc0033..b274eb1b0 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -2,9 +2,13 @@
 @use '../../../components/button/button.indigo' as button;
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
-@use '../../../components/checkbox/checkbox.dark.indigo' as dark-checkbox;
+@use '../../../components/checkbox/checkbox.indigo' as checkbox with (
+    $border-color: utils.color(gray, 700),
+    $checked-color: utils.color(gray, 900),
+    $disabled-color: utils.color(gray, 400)
+);
 @use '../../../components/radio/radio.indigo' as radio with (
-    $idle-color: utils.color(gray, 700),
+    $border-color: utils.color(gray, 700),
     $checked-color: utils.color(gray, 900),
     $disabled-color: utils.color(gray, 400)
 );
@@ -177,7 +181,7 @@ $type-scale: utils.extend($indigo-type-scale);
 
 @include button.theme();
 @include card.theme();
-@include dark-checkbox.theme();
+@include checkbox.theme();
 @include radio.theme();
 @include switch.theme();
 @include navbar.theme();

From 643cfe43bf866af5fa3acb04b5d67ccc99e356e7 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Fri, 3 Dec 2021 10:17:11 +0200
Subject: [PATCH 19/27] feat(button): dark fluent theme

---
 src/components/button/button.fluent.scss | 14 +++++++++-----
 src/styles/themes/dark/fluent.scss       |  6 +++++-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/button/button.fluent.scss b/src/components/button/button.fluent.scss
index 6d3e0597d..5d6c92381 100644
--- a/src/components/button/button.fluent.scss
+++ b/src/components/button/button.fluent.scss
@@ -1,5 +1,9 @@
 @use '../../styles/utilities' as utils;
 
+$button-color: #{utils.contrast-color(primary, 600)} !default;
+$hover-color: #{utils.color(primary, 600)} !default;
+$active-color: #{utils.color(primary, 700)} !default;
+
 @mixin theme() {
     igc-button[variant='contained']::part(base),
     igc-button[variant='fab']::part(base) {
@@ -129,21 +133,21 @@
     // FAB & CONTAINED
     igc-button[variant='contained']:not([disabled])::part(base),
     igc-button[variant='fab']:not([disabled])::part(base) {
-        color: #{utils.contrast-color(primary, 600)};
+        color: $button-color;
 
         &:hover,
         &:focus-visible:hover {
-            color: #{utils.contrast-color(primary, 600)};
+            color: $button-color;
 
             &::before {
                 opacity: 1;
-                background: #{utils.color(primary, 600)};
+                background: $hover-color;
             }
         }
 
         &:focus,
         &:active {
-            color: #{utils.contrast-color(primary, 600)};
+            color: $button-color;
         }
 
         &::before {
@@ -155,7 +159,7 @@
         &:focus-visible:active {
             &::before {
                 opacity: 1;
-                background: #{utils.color(primary, 700)};
+                background: $active-color;
             }
         }
 
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 1ffec4f84..bb3418d44 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -1,5 +1,9 @@
 @use '../../utilities' as utils;
-@use '../../../components/button/button.fluent' as button;
+@use '../../../components/button/button.fluent' as button with (
+    $button-color: utils.color(surface, 500),
+    $hover-color: utils.color(primary, 300),
+    $active-color: utils.color(primary, 100),
+);
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
 @use '../../../components/checkbox/checkbox.fluent' as checkbox with (

From 35dd5feb69e7ff8d54841e37f7a0750912cc7788 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Fri, 3 Dec 2021 11:01:52 +0200
Subject: [PATCH 20/27] refactor(themes): simplify structure

---
 src/styles/themes/base/_bootstrap.scss | 157 +++++++++++++++++++++++++
 src/styles/themes/base/_fluent.scss    | 127 ++++++++++++++++++++
 src/styles/themes/base/_indigo.scss    | 147 +++++++++++++++++++++++
 src/styles/themes/base/_material.scss  |  24 ++++
 src/styles/themes/dark/bootstrap.scss  | 155 +-----------------------
 src/styles/themes/dark/fluent.scss     | 125 +-------------------
 src/styles/themes/dark/indigo.scss     | 145 +----------------------
 src/styles/themes/dark/material.scss   |  22 +---
 src/styles/themes/light/bootstrap.scss | 155 +-----------------------
 src/styles/themes/light/fluent.scss    | 125 +-------------------
 src/styles/themes/light/indigo.scss    | 145 +----------------------
 src/styles/themes/light/material.scss  |  21 +---
 12 files changed, 471 insertions(+), 877 deletions(-)
 create mode 100644 src/styles/themes/base/_bootstrap.scss
 create mode 100644 src/styles/themes/base/_fluent.scss
 create mode 100644 src/styles/themes/base/_indigo.scss
 create mode 100644 src/styles/themes/base/_material.scss

diff --git a/src/styles/themes/base/_bootstrap.scss b/src/styles/themes/base/_bootstrap.scss
new file mode 100644
index 000000000..b65b76b98
--- /dev/null
+++ b/src/styles/themes/base/_bootstrap.scss
@@ -0,0 +1,157 @@
+@use '../../utilities' as utils;
+
+$elevations: utils.elevations(
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
+) !default;
+$bootstrap_h1: utils.type-style(
+    $font-size: utils.rem(40px),
+    $font-weight: 500,
+    $line-height: utils.rem(48px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+$bootstrap_h2: utils.type-style(
+    $font-size: utils.rem(32px),
+    $font-weight: 500,
+    $line-height: utils.rem(38.4px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+$bootstrap_h3: utils.type-style(
+    $font-size: utils.rem(28px),
+    $font-weight: 500,
+    $line-height: utils.rem(33.6px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+$bootstrap_h4: utils.type-style(
+    $font-size: utils.rem(24px),
+    $font-weight: 500,
+    $line-height: utils.rem(28.8px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+$bootstrap_h5: utils.type-style(
+    $font-size: utils.rem(20px),
+    $font-weight: 500,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+$bootstrap_h6: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(19.2px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: utils.rem(8px)
+);
+$bootstrap_body-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$bootstrap_body-2: utils.type-style(
+    $font-size: utils.rem(14.4px),
+    $font-weight: 400,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$bootstrap_subtitle-1: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(24px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$bootstrap_subtitle-2: utils.type-style(
+    $font-size: utils.rem(14.4px),
+    $font-weight: 400,
+    $line-height: utils.rem(21.6px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$bootstrap_button: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 500,
+    $line-height: utils.rem(24px),
+    $text-transform: capitalize,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$bootstrap_caption: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 400,
+    $letter-spacing: utils.rem(.4px),
+    $line-height: utils.rem(16px),
+    $text-transform: none
+);
+$bootstrap_overline: utils.type-style(
+    $font-size: utils.rem(10px),
+    $font-weight: 400,
+    $letter-spacing: utils.rem(1.5px),
+    $line-height: utils.rem(16px),
+    $text-transform: uppercase
+);
+$bootstrap_weekday: utils.type-style(
+    $font-size: utils.rem(13px),
+    $font-weight: 400,
+    $line-height: normal,
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$_base-scale: utils.type-scale(
+    $_meta: (variant: 'bootstrap'),
+    $h1: $bootstrap_h1,
+    $h2: $bootstrap_h2,
+    $h3: $bootstrap_h3,
+    $h4: $bootstrap_h4,
+    $h5: $bootstrap_h5,
+    $h6: $bootstrap_h6,
+    $subtitle-1: $bootstrap_subtitle-1,
+    $subtitle-2: $bootstrap_subtitle-2,
+    $body-1: $bootstrap_body-1,
+    $body-2: $bootstrap_body-2,
+    $button: $bootstrap_button,
+    $caption: $bootstrap_caption,
+    $overline: $bootstrap_overline
+);
+$type-scale: utils.extend(
+    $_base-scale,
+    (
+        calendar-labels: $bootstrap_weekday,
+    )
+);
+
+@mixin root-styles($palette) {
+    :root {
+        --igc-border-radius: #{utils.rem(2px)};
+        --igc-spacing-small: #{utils.rem(2px)};
+        --igc-spacing-medium: #{utils.rem(4px)};
+        --igc-spacing-large: #{utils.rem(8px)};
+
+        @include utils.palette($palette);
+        @include utils.elevations($elevations);
+        /* stylelint-disable */
+        @include utils.typography(
+            $font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+            $type-scale: $type-scale
+        );
+        /* stylelint-enable */
+    }
+}
diff --git a/src/styles/themes/base/_fluent.scss b/src/styles/themes/base/_fluent.scss
new file mode 100644
index 000000000..578700d68
--- /dev/null
+++ b/src/styles/themes/base/_fluent.scss
@@ -0,0 +1,127 @@
+@use '../../utilities' as utils;
+
+$elevations: utils.elevations(
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
+) !default;
+$fluent_h1: utils.type-style(
+    $font-size: utils.rem(68px),
+    $font-weight: 700,
+    $line-height: utils.rem(76px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_h2: utils.type-style(
+    $font-size: utils.rem(42px),
+    $font-weight: 700,
+    $line-height: utils.rem(52px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_h3: utils.type-style(
+    $font-size: utils.rem(32px),
+    $font-weight: 600,
+    $line-height: utils.rem(40px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_h4: utils.type-style(
+    $font-size: utils.rem(28px),
+    $font-weight: 400,
+    $line-height: utils.rem(36px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_h5: utils.type-style(
+    $font-size: utils.rem(20px),
+    $font-weight: 400,
+    $line-height: utils.rem(28px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_h6: utils.type-style(
+    $font-size: utils.rem(18px),
+    $font-weight: 400,
+    $line-height: utils.rem(22px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_body-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(22px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_body-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_subtitle-1: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 400,
+    $line-height: utils.rem(16px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_subtitle-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(16px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$fluent_button: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 600,
+    $line-height: normal,
+    $text-transform: capitalize,
+    $margin-top: 0,
+    $margin-bottom: 0,
+    $letter-spacing: 0,
+);
+$fluent-type-scale: utils.type-scale(
+    $_meta: (variant: 'fluent'),
+    $h1: $fluent_h1,
+    $h2: $fluent_h2,
+    $h3: $fluent_h3,
+    $h4: $fluent_h4,
+    $h5: $fluent_h5,
+    $h6: $fluent_h6,
+    $subtitle-1: $fluent_subtitle-1,
+    $subtitle-2: $fluent_subtitle-2,
+    $body-1: $fluent_body-1,
+    $body-2: $fluent_body-2,
+    $button: $fluent_button
+);
+$type-scale: utils.extend($fluent-type-scale);
+
+@mixin root-styles($palette) {
+    :root {
+        --igc-border-radius: #{utils.rem(2px)};
+        --igc-spacing-small: #{utils.rem(2px)};
+        --igc-spacing-medium: #{utils.rem(4px)};
+        --igc-spacing-large: #{utils.rem(8px)};
+
+        @include utils.palette($palette);
+        @include utils.elevations($elevations);
+        @include utils.typography(
+            $font-family: '\'Open Sans\', Helvetica, Arial, sans-serif',
+            $type-scale: $type-scale
+        );
+    }
+}
diff --git a/src/styles/themes/base/_indigo.scss b/src/styles/themes/base/_indigo.scss
new file mode 100644
index 000000000..8cd85af92
--- /dev/null
+++ b/src/styles/themes/base/_indigo.scss
@@ -0,0 +1,147 @@
+@use '../../utilities' as utils;
+
+$elevations: utils.elevations(
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
+) !default;
+$indigo_h1: utils.type-style(
+    $font-size: utils.rem(96px),
+    $font-weight: 200,
+    $line-height: utils.rem(112px),
+    $letter-spacing: utils.rem(-1.54px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_h2: utils.type-style(
+    $font-size: utils.rem(60px),
+    $font-weight: 200,
+    $line-height: utils.rem(72px),
+    $letter-spacing: utils.rem(-.48px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_h3: utils.type-style(
+    $font-size: utils.rem(48px),
+    $font-weight: 200,
+    $line-height: utils.rem(56px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_h4: utils.type-style(
+    $font-size: utils.rem(36px),
+    $font-weight: 200,
+    $line-height: utils.rem(42px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_h5: utils.type-style(
+    $font-size: utils.rem(24px),
+    $font-weight: 200,
+    $line-height: utils.rem(28px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_h6: utils.type-style(
+    $font-size: utils.rem(20px),
+    $font-weight: 600,
+    $line-height: utils.rem(26px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_body-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 400,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_body-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 400,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_subtitle-1: utils.type-style(
+    $font-size: utils.rem(16px),
+    $font-weight: 600,
+    $line-height: utils.rem(22px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_subtitle-2: utils.type-style(
+    $font-size: utils.rem(14px),
+    $font-weight: 700,
+    $line-height: utils.rem(20px),
+    $text-transform: none,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_button: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 700,
+    $line-height: normal,
+    $text-transform: uppercase,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_caption: utils.type-style(
+    $font-size: utils.rem(12px),
+    $font-weight: 400,
+    $line-height: utils.rem(16px),
+    $text-transform: normal,
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo_overline: utils.type-style(
+    $font-size: utils.rem(10px),
+    $font-weight: 700,
+    $line-height: utils.rem(14px),
+    $text-transform: uppercase,
+    $letter-spacing: utils.rem(.2px),
+    $margin-top: 0,
+    $margin-bottom: 0
+);
+$indigo-type-scale: utils.type-scale(
+    $_meta: (variant: 'indigo'),
+    $h1: $indigo_h1,
+    $h2: $indigo_h2,
+    $h3: $indigo_h3,
+    $h4: $indigo_h4,
+    $h5: $indigo_h5,
+    $h6: $indigo_h6,
+    $subtitle-1: $indigo_subtitle-1,
+    $subtitle-2: $indigo_subtitle-2,
+    $body-1: $indigo_body-1,
+    $body-2: $indigo_body-2,
+    $button: $indigo_button,
+    $caption: $indigo_caption,
+    $overline: $indigo_overline
+);
+$type-scale: utils.extend($indigo-type-scale);
+
+@mixin root-styles($palette) {
+    :root {
+        --igc-border-radius: #{utils.rem(2px)};
+        --igc-spacing-small: #{utils.rem(2px)};
+        --igc-spacing-medium: #{utils.rem(4px)};
+        --igc-spacing-large: #{utils.rem(8px)};
+
+        @include utils.palette($palette);
+        @include utils.elevations($elevations);
+        @include utils.typography(
+            $font-family: '\'Nunito Sans\', sans-serif',
+            $type-scale: $type-scale
+        );
+    }
+}
diff --git a/src/styles/themes/base/_material.scss b/src/styles/themes/base/_material.scss
new file mode 100644
index 000000000..9e85bc2b0
--- /dev/null
+++ b/src/styles/themes/base/_material.scss
@@ -0,0 +1,24 @@
+@use '../../utilities' as utils;
+
+$elevations: utils.elevations(
+    rgb(0 0 0 / 26%),
+    rgb(0 0 0 / 12%),
+    rgb(0 0 0 / 8%)
+) !default;
+$type-scale: utils.type-scale();
+
+@mixin root-styles($palette) {
+    :root {
+        --igc-border-radius: #{utils.rem(2px)};
+        --igc-spacing-small: #{utils.rem(2px)};
+        --igc-spacing-medium: #{utils.rem(4px)};
+        --igc-spacing-large: #{utils.rem(8px)};
+
+        @include utils.palette($palette);
+        @include utils.elevations($elevations);
+        @include utils.typography(
+            $font-family: 'Roboto, sans-serif',
+            $type-scale: $type-scale
+        );
+    }
+}
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 09d9cce86..601184b69 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/bootstrap' as base;
 @use '../../../components/badge/badge.bootstrap' as badge;
 @use '../../../components/button/button.bootstrap' as button;
 @use '../../../components/button/icon-button.bootstrap' as icon-button;
@@ -21,160 +22,8 @@ $palette: utils.palette(
     $warn: #ffc107,
     $error: #dc3545,
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$bootstrap_h1: utils.type-style(
-    $font-size: utils.rem(40px),
-    $font-weight: 500,
-    $line-height: utils.rem(48px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h2: utils.type-style(
-    $font-size: utils.rem(32px),
-    $font-weight: 500,
-    $line-height: utils.rem(38.4px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h3: utils.type-style(
-    $font-size: utils.rem(28px),
-    $font-weight: 500,
-    $line-height: utils.rem(33.6px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h4: utils.type-style(
-    $font-size: utils.rem(24px),
-    $font-weight: 500,
-    $line-height: utils.rem(28.8px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h5: utils.type-style(
-    $font-size: utils.rem(20px),
-    $font-weight: 500,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h6: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(19.2px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_body-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_body-2: utils.type-style(
-    $font-size: utils.rem(14.4px),
-    $font-weight: 400,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_subtitle-1: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_subtitle-2: utils.type-style(
-    $font-size: utils.rem(14.4px),
-    $font-weight: 400,
-    $line-height: utils.rem(21.6px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_button: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 500,
-    $line-height: utils.rem(24px),
-    $text-transform: capitalize,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_caption: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 400,
-    $letter-spacing: utils.rem(.4px),
-    $line-height: utils.rem(16px),
-    $text-transform: none
-);
-$bootstrap_overline: utils.type-style(
-    $font-size: utils.rem(10px),
-    $font-weight: 400,
-    $letter-spacing: utils.rem(1.5px),
-    $line-height: utils.rem(16px),
-    $text-transform: uppercase
-);
-$bootstrap_weekday: utils.type-style(
-    $font-size: utils.rem(13px),
-    $font-weight: 400,
-    $line-height: normal,
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$_base-scale: utils.type-scale(
-    $_meta: (variant: 'bootstrap'),
-    $h1: $bootstrap_h1,
-    $h2: $bootstrap_h2,
-    $h3: $bootstrap_h3,
-    $h4: $bootstrap_h4,
-    $h5: $bootstrap_h5,
-    $h6: $bootstrap_h6,
-    $subtitle-1: $bootstrap_subtitle-1,
-    $subtitle-2: $bootstrap_subtitle-2,
-    $body-1: $bootstrap_body-1,
-    $body-2: $bootstrap_body-2,
-    $button: $bootstrap_button,
-    $caption: $bootstrap_caption,
-    $overline: $bootstrap_overline
-);
-$type-scale: utils.extend(
-    $_base-scale,
-    (
-        calendar-labels: $bootstrap_weekday,
-    )
-);
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    /* stylelint-disable */
-    @include utils.typography(
-        $font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-        $type-scale: $type-scale
-    );
-    /* stylelint-enable */
-}
 
+@include base.root-styles($palette);
 @include badge.theme();
 @include button.theme();
 @include card.theme();
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index bb3418d44..fb176dd9e 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/fluent' as base;
 @use '../../../components/button/button.fluent' as button with (
     $button-color: utils.color(surface, 500),
     $hover-color: utils.color(primary, 300),
@@ -43,130 +44,8 @@ $palette: utils.palette(
     $warn: #797673,
     $error: #a80000,
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$fluent_h1: utils.type-style(
-    $font-size: utils.rem(68px),
-    $font-weight: 700,
-    $line-height: utils.rem(76px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h2: utils.type-style(
-    $font-size: utils.rem(42px),
-    $font-weight: 700,
-    $line-height: utils.rem(52px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h3: utils.type-style(
-    $font-size: utils.rem(32px),
-    $font-weight: 600,
-    $line-height: utils.rem(40px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h4: utils.type-style(
-    $font-size: utils.rem(28px),
-    $font-weight: 400,
-    $line-height: utils.rem(36px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h5: utils.type-style(
-    $font-size: utils.rem(20px),
-    $font-weight: 400,
-    $line-height: utils.rem(28px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h6: utils.type-style(
-    $font-size: utils.rem(18px),
-    $font-weight: 400,
-    $line-height: utils.rem(22px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_body-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(22px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_body-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_subtitle-1: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 400,
-    $line-height: utils.rem(16px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_subtitle-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(16px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_button: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 600,
-    $line-height: normal,
-    $text-transform: capitalize,
-    $margin-top: 0,
-    $margin-bottom: 0,
-    $letter-spacing: 0,
-);
-$fluent-type-scale: utils.type-scale(
-    $_meta: (variant: 'fluent'),
-    $h1: $fluent_h1,
-    $h2: $fluent_h2,
-    $h3: $fluent_h3,
-    $h4: $fluent_h4,
-    $h5: $fluent_h5,
-    $h6: $fluent_h6,
-    $subtitle-1: $fluent_subtitle-1,
-    $subtitle-2: $fluent_subtitle-2,
-    $body-1: $fluent_body-1,
-    $body-2: $fluent_body-2,
-    $button: $fluent_button
-);
-$type-scale: utils.extend($fluent-type-scale);
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    @include utils.typography(
-        $font-family: '\'Open Sans\', Helvetica, Arial, sans-serif',
-        $type-scale: $type-scale
-    );
-}
 
+@include base.root-styles($palette);
 @include button.theme();
 @include card.theme();
 @include checkbox.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index b274eb1b0..dcc9f0504 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/indigo' as base;
 @use '../../../components/button/button.indigo' as button;
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
@@ -35,150 +36,8 @@ $palette: utils.palette(
     $warn: #ff9800,
     $error: #cf1a2b
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$indigo_h1: utils.type-style(
-    $font-size: utils.rem(96px),
-    $font-weight: 200,
-    $line-height: utils.rem(112px),
-    $letter-spacing: utils.rem(-1.54px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h2: utils.type-style(
-    $font-size: utils.rem(60px),
-    $font-weight: 200,
-    $line-height: utils.rem(72px),
-    $letter-spacing: utils.rem(-.48px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h3: utils.type-style(
-    $font-size: utils.rem(48px),
-    $font-weight: 200,
-    $line-height: utils.rem(56px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h4: utils.type-style(
-    $font-size: utils.rem(36px),
-    $font-weight: 200,
-    $line-height: utils.rem(42px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h5: utils.type-style(
-    $font-size: utils.rem(24px),
-    $font-weight: 200,
-    $line-height: utils.rem(28px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h6: utils.type-style(
-    $font-size: utils.rem(20px),
-    $font-weight: 600,
-    $line-height: utils.rem(26px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_body-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_body-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_subtitle-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 600,
-    $line-height: utils.rem(22px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_subtitle-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 700,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_button: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 700,
-    $line-height: normal,
-    $text-transform: uppercase,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_caption: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 400,
-    $line-height: utils.rem(16px),
-    $text-transform: normal,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_overline: utils.type-style(
-    $font-size: utils.rem(10px),
-    $font-weight: 700,
-    $line-height: utils.rem(14px),
-    $text-transform: uppercase,
-    $letter-spacing: utils.rem(.2px),
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo-type-scale: utils.type-scale(
-    $_meta: (variant: 'indigo'),
-    $h1: $indigo_h1,
-    $h2: $indigo_h2,
-    $h3: $indigo_h3,
-    $h4: $indigo_h4,
-    $h5: $indigo_h5,
-    $h6: $indigo_h6,
-    $subtitle-1: $indigo_subtitle-1,
-    $subtitle-2: $indigo_subtitle-2,
-    $body-1: $indigo_body-1,
-    $body-2: $indigo_body-2,
-    $button: $indigo_button,
-    $caption: $indigo_caption,
-    $overline: $indigo_overline
-);
-$type-scale: utils.extend($indigo-type-scale);
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    @include utils.typography(
-        $font-family: '\'Nunito Sans\', sans-serif',
-        $type-scale: $type-scale
-    );
-}
 
+@include base.root-styles($palette);
 @include button.theme();
 @include card.theme();
 @include checkbox.theme();
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index b760c8b6e..edc04fe82 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/material' as base;
 @use '../../../components/input/input.dark.material.scss' as input;
 
 $palette: utils.palette(
@@ -7,25 +8,6 @@ $palette: utils.palette(
     $gray: #fff,
     $surface: #222,
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$type-scale: utils.type-scale();
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    @include utils.typography(
-        $font-family: 'Roboto, sans-serif',
-        $type-scale: $type-scale
-    );
-}
 
+@include base.root-styles($palette);
 @include input.theme();
diff --git a/src/styles/themes/light/bootstrap.scss b/src/styles/themes/light/bootstrap.scss
index 3058dc07d..26c206fab 100644
--- a/src/styles/themes/light/bootstrap.scss
+++ b/src/styles/themes/light/bootstrap.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/bootstrap' as base;
 @use '../../../components/badge/badge.bootstrap' as badge;
 @use '../../../components/button/button.bootstrap' as button;
 @use '../../../components/button/icon-button.bootstrap' as icon-button;
@@ -21,160 +22,8 @@ $palette: utils.palette(
     $warn: #ffc107,
     $error: #dc3545,
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$bootstrap_h1: utils.type-style(
-    $font-size: utils.rem(40px),
-    $font-weight: 500,
-    $line-height: utils.rem(48px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h2: utils.type-style(
-    $font-size: utils.rem(32px),
-    $font-weight: 500,
-    $line-height: utils.rem(38.4px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h3: utils.type-style(
-    $font-size: utils.rem(28px),
-    $font-weight: 500,
-    $line-height: utils.rem(33.6px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h4: utils.type-style(
-    $font-size: utils.rem(24px),
-    $font-weight: 500,
-    $line-height: utils.rem(28.8px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h5: utils.type-style(
-    $font-size: utils.rem(20px),
-    $font-weight: 500,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_h6: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(19.2px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: utils.rem(8px)
-);
-$bootstrap_body-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_body-2: utils.type-style(
-    $font-size: utils.rem(14.4px),
-    $font-weight: 400,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_subtitle-1: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(24px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_subtitle-2: utils.type-style(
-    $font-size: utils.rem(14.4px),
-    $font-weight: 400,
-    $line-height: utils.rem(21.6px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_button: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 500,
-    $line-height: utils.rem(24px),
-    $text-transform: capitalize,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$bootstrap_caption: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 400,
-    $letter-spacing: utils.rem(.4px),
-    $line-height: utils.rem(16px),
-    $text-transform: none
-);
-$bootstrap_overline: utils.type-style(
-    $font-size: utils.rem(10px),
-    $font-weight: 400,
-    $letter-spacing: utils.rem(1.5px),
-    $line-height: utils.rem(16px),
-    $text-transform: uppercase
-);
-$bootstrap_weekday: utils.type-style(
-    $font-size: utils.rem(13px),
-    $font-weight: 400,
-    $line-height: normal,
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$_base-scale: utils.type-scale(
-    $_meta: (variant: 'bootstrap'),
-    $h1: $bootstrap_h1,
-    $h2: $bootstrap_h2,
-    $h3: $bootstrap_h3,
-    $h4: $bootstrap_h4,
-    $h5: $bootstrap_h5,
-    $h6: $bootstrap_h6,
-    $subtitle-1: $bootstrap_subtitle-1,
-    $subtitle-2: $bootstrap_subtitle-2,
-    $body-1: $bootstrap_body-1,
-    $body-2: $bootstrap_body-2,
-    $button: $bootstrap_button,
-    $caption: $bootstrap_caption,
-    $overline: $bootstrap_overline
-);
-$type-scale: utils.extend(
-    $_base-scale,
-    (
-        calendar-labels: $bootstrap_weekday,
-    )
-);
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    /* stylelint-disable */
-    @include utils.typography(
-        $font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
-        $type-scale: $type-scale
-    );
-    /* stylelint-enable */
-}
 
+@include base.root-styles($palette);
 @include badge.theme();
 @include button.theme();
 @include card.theme();
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
index ec9faebad..b985d89b8 100644
--- a/src/styles/themes/light/fluent.scss
+++ b/src/styles/themes/light/fluent.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/fluent' as base;
 @use '../../../components/button/button.fluent' as button;
 @use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
@@ -17,130 +18,8 @@ $palette: utils.palette(
     $warn: #797673,
     $error: #a80000,
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$fluent_h1: utils.type-style(
-    $font-size: utils.rem(68px),
-    $font-weight: 700,
-    $line-height: utils.rem(76px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h2: utils.type-style(
-    $font-size: utils.rem(42px),
-    $font-weight: 700,
-    $line-height: utils.rem(52px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h3: utils.type-style(
-    $font-size: utils.rem(32px),
-    $font-weight: 600,
-    $line-height: utils.rem(40px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h4: utils.type-style(
-    $font-size: utils.rem(28px),
-    $font-weight: 400,
-    $line-height: utils.rem(36px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h5: utils.type-style(
-    $font-size: utils.rem(20px),
-    $font-weight: 400,
-    $line-height: utils.rem(28px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_h6: utils.type-style(
-    $font-size: utils.rem(18px),
-    $font-weight: 400,
-    $line-height: utils.rem(22px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_body-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(22px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_body-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_subtitle-1: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 400,
-    $line-height: utils.rem(16px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_subtitle-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(16px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$fluent_button: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 600,
-    $line-height: normal,
-    $text-transform: capitalize,
-    $margin-top: 0,
-    $margin-bottom: 0,
-    $letter-spacing: 0,
-);
-$fluent-type-scale: utils.type-scale(
-    $_meta: (variant: 'fluent'),
-    $h1: $fluent_h1,
-    $h2: $fluent_h2,
-    $h3: $fluent_h3,
-    $h4: $fluent_h4,
-    $h5: $fluent_h5,
-    $h6: $fluent_h6,
-    $subtitle-1: $fluent_subtitle-1,
-    $subtitle-2: $fluent_subtitle-2,
-    $body-1: $fluent_body-1,
-    $body-2: $fluent_body-2,
-    $button: $fluent_button
-);
-$type-scale: utils.extend($fluent-type-scale);
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    @include utils.typography(
-        $font-family: '\'Open Sans\', Helvetica, Arial, sans-serif',
-        $type-scale: $type-scale
-    );
-}
 
+@include base.root-styles($palette);
 @include button.theme();
 @include card.theme();
 @include checkbox.theme();
diff --git a/src/styles/themes/light/indigo.scss b/src/styles/themes/light/indigo.scss
index a8a655bdb..c7ae58b06 100644
--- a/src/styles/themes/light/indigo.scss
+++ b/src/styles/themes/light/indigo.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/indigo' as base;
 @use '../../../components/button/button.indigo' as button;
 @use '../../../components/button/icon-button.indigo' as icon-button;
 @use '../../../components/card/card.indigo' as card;
@@ -22,150 +23,8 @@ $palette: utils.palette(
     $warn: #ff9800,
     $error: #cf1a2b
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$indigo_h1: utils.type-style(
-    $font-size: utils.rem(96px),
-    $font-weight: 200,
-    $line-height: utils.rem(112px),
-    $letter-spacing: utils.rem(-1.54px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h2: utils.type-style(
-    $font-size: utils.rem(60px),
-    $font-weight: 200,
-    $line-height: utils.rem(72px),
-    $letter-spacing: utils.rem(-.48px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h3: utils.type-style(
-    $font-size: utils.rem(48px),
-    $font-weight: 200,
-    $line-height: utils.rem(56px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h4: utils.type-style(
-    $font-size: utils.rem(36px),
-    $font-weight: 200,
-    $line-height: utils.rem(42px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h5: utils.type-style(
-    $font-size: utils.rem(24px),
-    $font-weight: 200,
-    $line-height: utils.rem(28px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_h6: utils.type-style(
-    $font-size: utils.rem(20px),
-    $font-weight: 600,
-    $line-height: utils.rem(26px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_body-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 400,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_body-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 400,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_subtitle-1: utils.type-style(
-    $font-size: utils.rem(16px),
-    $font-weight: 600,
-    $line-height: utils.rem(22px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_subtitle-2: utils.type-style(
-    $font-size: utils.rem(14px),
-    $font-weight: 700,
-    $line-height: utils.rem(20px),
-    $text-transform: none,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_button: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 700,
-    $line-height: normal,
-    $text-transform: uppercase,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_caption: utils.type-style(
-    $font-size: utils.rem(12px),
-    $font-weight: 400,
-    $line-height: utils.rem(16px),
-    $text-transform: normal,
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo_overline: utils.type-style(
-    $font-size: utils.rem(10px),
-    $font-weight: 700,
-    $line-height: utils.rem(14px),
-    $text-transform: uppercase,
-    $letter-spacing: utils.rem(.2px),
-    $margin-top: 0,
-    $margin-bottom: 0
-);
-$indigo-type-scale: utils.type-scale(
-    $_meta: (variant: 'indigo'),
-    $h1: $indigo_h1,
-    $h2: $indigo_h2,
-    $h3: $indigo_h3,
-    $h4: $indigo_h4,
-    $h5: $indigo_h5,
-    $h6: $indigo_h6,
-    $subtitle-1: $indigo_subtitle-1,
-    $subtitle-2: $indigo_subtitle-2,
-    $body-1: $indigo_body-1,
-    $body-2: $indigo_body-2,
-    $button: $indigo_button,
-    $caption: $indigo_caption,
-    $overline: $indigo_overline
-);
-$type-scale: utils.extend($indigo-type-scale);
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
-
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    @include utils.typography(
-        $font-family: '\'Nunito Sans\', sans-serif',
-        $type-scale: $type-scale
-    );
-}
 
+@include base.root-styles($palette);
 @include button.theme();
 @include card.theme();
 @include checkbox.theme();
diff --git a/src/styles/themes/light/material.scss b/src/styles/themes/light/material.scss
index 5d205fe2e..840a2af68 100644
--- a/src/styles/themes/light/material.scss
+++ b/src/styles/themes/light/material.scss
@@ -1,4 +1,5 @@
 @use '../../utilities' as utils;
+@use '../base/material' as base;
 
 $palette: utils.palette(
     $primary: #09f,
@@ -6,23 +7,5 @@ $palette: utils.palette(
     $gray: #000,
     $surface: white,
 ) !default;
-$elevations: utils.elevations(
-    rgb(0 0 0 / 26%),
-    rgb(0 0 0 / 12%),
-    rgb(0 0 0 / 8%)
-) !default;
-$type-scale: utils.type-scale();
-
-:root {
-    --igc-border-radius: #{utils.rem(2px)};
-    --igc-spacing-small: #{utils.rem(2px)};
-    --igc-spacing-medium: #{utils.rem(4px)};
-    --igc-spacing-large: #{utils.rem(8px)};
 
-    @include utils.palette($palette);
-    @include utils.elevations($elevations);
-    @include utils.typography(
-        $font-family: 'Roboto, sans-serif',
-        $type-scale: $type-scale
-    );
-}
+@include base.root-styles($palette);

From 4e1c7d2778056a2e440f0f7cde8429d714d1bc0c Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Fri, 3 Dec 2021 11:48:33 +0200
Subject: [PATCH 21/27] fix icon button box-shadow

---
 src/components/button/icon-button.bootstrap.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button/icon-button.bootstrap.scss b/src/components/button/icon-button.bootstrap.scss
index 46a80cbd2..37d23abb8 100644
--- a/src/components/button/icon-button.bootstrap.scss
+++ b/src/components/button/icon-button.bootstrap.scss
@@ -32,7 +32,7 @@
         &:focus,
         &:active {
             background: #{utils.color(primary, 600)};
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
+            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
         }
     }
 
@@ -48,7 +48,7 @@
         &:active {
             color: #{utils.contrast-color(primary, 600)};
             background: #{utils.color(primary, 600)};
-            box-shadow: 0 0 0 utils.rem(3px) utils.color(primary, 200);
+            box-shadow: 0 0 0 utils.rem(4px) utils.color(primary, 200, .5);
         }
     }
 

From 2f2bb805b457199c5eab6106612f638000cd46c3 Mon Sep 17 00:00:00 2001
From: Silvia Ivanova <SIvanova@infragistics.com>
Date: Fri, 3 Dec 2021 13:00:46 +0200
Subject: [PATCH 22/27] feat(icon-button): dark fluent theme

---
 src/components/button/icon-button.fluent.scss | 7 +++++--
 src/styles/themes/dark/fluent.scss            | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/button/icon-button.fluent.scss b/src/components/button/icon-button.fluent.scss
index 4a1f1b98c..d3d9c4f61 100644
--- a/src/components/button/icon-button.fluent.scss
+++ b/src/components/button/icon-button.fluent.scss
@@ -1,5 +1,8 @@
 @use '../../styles/utilities' as utils;
 
+$button-color: #{utils.contrast-color(primary, 600)} !default;
+$hover-color: #{utils.color(primary, 600)} !default;
+
 @mixin theme() {
     igc-icon-button::part(base) {
         background: transparent;
@@ -35,11 +38,11 @@
     }
 
     igc-icon-button[variant='contained']:not([disabled])::part(base) {
-        color: utils.contrast-color(primary, 600);
+        color: $button-color;
         background: utils.color(primary, 500);
 
         &:hover {
-            background: utils.color(primary, 600);
+            background: $hover-color;
         }
 
         &:focus-visible::after {
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index fb176dd9e..98b9dd9ef 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -3,9 +3,12 @@
 @use '../../../components/button/button.fluent' as button with (
     $button-color: utils.color(surface, 500),
     $hover-color: utils.color(primary, 300),
-    $active-color: utils.color(primary, 100),
+    $active-color: utils.color(primary, 100)
+);
+@use '../../../components/button/icon-button.fluent' as icon-button with (
+    $button-color: utils.color(surface, 500),
+    $hover-color: utils.color(primary, 300)
 );
-@use '../../../components/button/icon-button.fluent' as icon-button;
 @use '../../../components/card/card.fluent' as card;
 @use '../../../components/checkbox/checkbox.fluent' as checkbox with (
     $border-color: utils.color(gray, 700),

From 8d101a42a67fe4cc140f6f572820f88fd89668c9 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Fri, 3 Dec 2021 15:10:22 +0200
Subject: [PATCH 23/27] build(themes): include only light and dark folders

---
 scripts/build.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/build.js b/scripts/build.js
index b2ff2b34f..8838ec106 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -18,7 +18,7 @@ const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
 const THEMES_PATH = `src/styles/themes`;
 
 async function buildThemes() {
-  const paths = await globby(`${THEMES_PATH}/**/*.scss`);
+  const paths = await globby(`${THEMES_PATH}/{light,dark}/*.scss`);
 
   for (const sassFile of paths) {
     const result = await renderSass({

From acdf4f7b07f502831e3d95e976d91ef51c1d9198 Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Fri, 3 Dec 2021 15:38:45 +0200
Subject: [PATCH 24/27] feat: (list) update themes

---
 src/components/list/list.bootstrap.scss      | 16 +++++++++++-----
 src/components/list/list.dark.bootstrap.scss | 19 -------------------
 src/components/list/list.dark.fluent.scss    | 13 -------------
 src/components/list/list.dark.indigo.scss    | 13 -------------
 src/components/list/list.fluent.scss         | 12 ++++++++++--
 src/components/list/list.indigo.scss         | 15 ++++++++++-----
 src/styles/themes/dark/bootstrap.scss        |  6 ++++--
 src/styles/themes/dark/fluent.scss           |  8 +++++---
 src/styles/themes/dark/indigo.scss           |  8 +++++---
 9 files changed, 45 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/list/list.dark.bootstrap.scss
 delete mode 100644 src/components/list/list.dark.fluent.scss
 delete mode 100644 src/components/list/list.dark.indigo.scss

diff --git a/src/components/list/list.bootstrap.scss b/src/components/list/list.bootstrap.scss
index 4ba97babe..5a1620fe2 100644
--- a/src/components/list/list.bootstrap.scss
+++ b/src/components/list/list.bootstrap.scss
@@ -1,23 +1,29 @@
 @use '../../styles/utilities' as *;
 
+$list-bg: contrast-color(gray, 900) !default;
+$separator-color: color(gray, 200) !default;
+$item-color: color(gray, 900) !default;
+$item-hover-bg: color(gray, 100) !default;
+$subtitle-color: color(gray, 800) !default;
+
 @mixin theme() {
     igc-list-item,
     igc-list {
-        background: contrast-color(gray, 900);
+        background: $list-bg;
     }
 
     igc-list {
-        border: rem(1px) solid color(gray, 200);
+        border: rem(1px) solid $separator-color;
         border-radius: rem(4px);
     }
 
     igc-list-item {
-        color: color(gray, 900);
-        border-bottom: rem(1px) solid color(gray, 200);
+        color: $item-color;
+        border-bottom: rem(1px) solid $separator-color;
 
         &:hover,
         &:focus-within {
-            background: color(gray, 100);
+            background: $item-hover-bg;
         }
 
         &:last-of-type {
diff --git a/src/components/list/list.dark.bootstrap.scss b/src/components/list/list.dark.bootstrap.scss
deleted file mode 100644
index 771cfd95e..000000000
--- a/src/components/list/list.dark.bootstrap.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use '../../styles/utilities' as *;
-@use 'list.bootstrap' as light-list;
-
-@mixin theme() {
-    @include light-list.theme();
-
-    igc-list-item,
-    igc-list {
-        background: color(gray, 50);
-    }
-
-    igc-list {
-        border: rem(1px) solid color(gray, 100);
-    }
-
-    igc-list-item {
-        border-bottom: rem(1px) solid color(gray, 100);
-    }
-}
diff --git a/src/components/list/list.dark.fluent.scss b/src/components/list/list.dark.fluent.scss
deleted file mode 100644
index f4dbe363e..000000000
--- a/src/components/list/list.dark.fluent.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '../../styles/utilities' as *;
-@use 'list.fluent' as light-list;
-
-@mixin theme() {
-    @include light-list.theme();
-
-    igc-list-item {
-        &:hover,
-        &:focus-within {
-            background: color(gray, 100);
-        }
-    }
-}
diff --git a/src/components/list/list.dark.indigo.scss b/src/components/list/list.dark.indigo.scss
deleted file mode 100644
index 4f03ea4f6..000000000
--- a/src/components/list/list.dark.indigo.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '../../styles/utilities' as *;
-@use 'list.indigo' as light-list;
-
-@mixin theme() {
-    @include light-list.theme();
-
-    igc-list-item {
-        &:hover,
-        &:focus-within {
-            background: color(primary, 500, .5);
-        }
-    }
-}
diff --git a/src/components/list/list.fluent.scss b/src/components/list/list.fluent.scss
index 12ca88608..a4f74b977 100644
--- a/src/components/list/list.fluent.scss
+++ b/src/components/list/list.fluent.scss
@@ -1,8 +1,16 @@
-@use '../../styles/utilities' as utils;
+@use '../../styles/utilities' as *;
+
+$separator-color: color(gray, 100) !default;
+$item-hover-bg: color(gray, 200) !default;
 
 @mixin theme() {
     igc-list-item {
-        border-bottom: utils.rem(1px) solid utils.color(gray, 100);
+        border-bottom: rem(1px) solid $separator-color;
+
+        &:hover,
+        &:focus-within {
+            background: $item-hover-bg;
+        }
 
         &:last-of-type {
             border-bottom: none;
diff --git a/src/components/list/list.indigo.scss b/src/components/list/list.indigo.scss
index 35e7fa301..9e81480fe 100644
--- a/src/components/list/list.indigo.scss
+++ b/src/components/list/list.indigo.scss
@@ -1,20 +1,25 @@
-@use '../../styles/utilities' as utils;
+@use '../../styles/utilities' as *;
+
+$header-color: color(primary, 500) !default;
+$item-color: color(gray, 900) !default;
+$item-hover-bg: color(gray, 50) !default;
+$subtitle-color: color(gray, 800) !default;
 
 @mixin theme() {
     igc-list-header {
-        color: utils.color(primary, 500);
+        color: $header-color;
     }
 
     igc-list-item {
-        color: utils.color(gray, 900);
+        color: $item-color;
 
         &:hover,
         &:focus-within {
-            background: utils.color(primary, 50);
+            background: $item-hover-bg;
         }
 
         &::part(subtitle) {
-            color: utils.color(gray, 800);
+            color: $subtitle-color;
         }
     }
 }
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 601184b69..79e2cd30a 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -8,7 +8,9 @@
 @use '../../../components/radio/radio.bootstrap' as radio;
 @use '../../../components/checkbox/switch.bootstrap' as switch;
 @use '../../../components/navbar/navbar.bootstrap' as navbar;
-@use '../../../components/list/list.dark.bootstrap' as dark-list;
+@use '../../../components/list/list.bootstrap' as list with (
+    $separator-color: utils.color(gray, 100)
+);
 @use '../../../components/calendar/calendar.bootstrap' as calendar;
 @use '../../../components/input/input.bootstrap' as input with ($input-background: transparent);
 
@@ -31,7 +33,7 @@ $palette: utils.palette(
 @include radio.theme();
 @include switch.theme();
 @include navbar.theme();
-@include dark-list.theme();
+@include list.theme();
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 98b9dd9ef..f8e8d98d1 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -34,9 +34,11 @@
     $invalid-hover-color: utils.color(error, 100),
     $disabled-color: utils.color(gray, 200)
 );
-@use '../../../components/list/list.dark.fluent' as dark-list;
+@use '../../../components/list/list.fluent' as list with (
+    $item-hover-bg: utils.color(gray, 100),
+);
 @use '../../../components/calendar/calendar.fluent' as calendar;
-@use '../../../components/input/input.fluent' as input with($container-background: transparent);
+@use '../../../components/input/input.fluent' as input with ($container-background: transparent);
 
 $palette: utils.palette(
     $primary: #0078d4,
@@ -54,7 +56,7 @@ $palette: utils.palette(
 @include checkbox.theme();
 @include radio.theme();
 @include switch.theme();
-@include dark-list.theme();
+@include list.theme();
 @include calendar.theme();
 @include input.theme();
 @include icon-button.theme();
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index dcc9f0504..f1dad1c09 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -23,8 +23,10 @@
 @use '../../../components/nav-drawer/nav-drawer.indigo' as nav-drawer;
 @use '../../../components/nav-drawer/nav-drawer-item.indigo' as nav-drawer-item;
 @use '../../../components/nav-drawer/nav-drawer-header-item.indigo' as nav-drawer-header;
-@use '../../../components/list/list.dark.indigo' as dark-list;
-@use '../../../components/input/input.indigo' as input with($label-focus-color: utils.color(gray, 800));
+@use '../../../components/list/list.indigo' as list with (
+    $item-hover-bg: utils.color(primary, 500, .5)
+);
+@use '../../../components/input/input.indigo' as input with ($label-focus-color: utils.color(gray, 800));
 
 $palette: utils.palette(
     $primary: #3f51b5,
@@ -47,6 +49,6 @@ $palette: utils.palette(
 @include nav-drawer.theme();
 @include nav-drawer-item.theme();
 @include nav-drawer-header.theme();
-@include dark-list.theme();
+@include list.theme();
 @include input.theme();
 @include icon-button.theme();

From 2b79671709ed16aaa569c44463980534382802e4 Mon Sep 17 00:00:00 2001
From: MPopov <mspopovv@gmail.com>
Date: Fri, 3 Dec 2021 17:08:28 +0200
Subject: [PATCH 25/27] fear: (scrollbars) add scrollbars styles

---
 src/styles/common/component.scss       |  4 ++
 src/styles/themes/base/_bootstrap.scss |  6 ++
 src/styles/themes/base/_fluent.scss    |  6 ++
 src/styles/themes/base/_indigo.scss    |  6 ++
 src/styles/themes/base/_material.scss  |  6 ++
 src/styles/utilities/_mixins.scss      | 17 +++++
 stories/nav-drawer.stories.ts          | 94 +++++++++++++++++++++++---
 7 files changed, 129 insertions(+), 10 deletions(-)

diff --git a/src/styles/common/component.scss b/src/styles/common/component.scss
index 2ec1dd1d3..49b319b50 100644
--- a/src/styles/common/component.scss
+++ b/src/styles/common/component.scss
@@ -1,3 +1,5 @@
+@use '../utilities/mixins' as *;
+
 :host {
     position: relative;
     box-sizing: border-box;
@@ -7,6 +9,8 @@
     *::after {
         box-sizing: border-box;
     }
+
+    @include igc-scrollbar(var(--scrolbar-size), var(--igc-scrollbar-track-color), var(--igc-scrollbar-thumb-color));
 }
 
 [hidden] {
diff --git a/src/styles/themes/base/_bootstrap.scss b/src/styles/themes/base/_bootstrap.scss
index b65b76b98..42bd0e031 100644
--- a/src/styles/themes/base/_bootstrap.scss
+++ b/src/styles/themes/base/_bootstrap.scss
@@ -138,6 +138,12 @@ $type-scale: utils.extend(
     )
 );
 
+.igc-scrollbar {
+    --scrolbar-size: #{utils.rem(16px)};
+    --igc-scrollbar-track-color: #{utils.color(gray, 100)};
+    --igc-scrollbar-thumb-color: #{utils.color(gray, 400)};
+}
+
 @mixin root-styles($palette) {
     :root {
         --igc-border-radius: #{utils.rem(2px)};
diff --git a/src/styles/themes/base/_fluent.scss b/src/styles/themes/base/_fluent.scss
index 578700d68..5fe383339 100644
--- a/src/styles/themes/base/_fluent.scss
+++ b/src/styles/themes/base/_fluent.scss
@@ -110,6 +110,12 @@ $fluent-type-scale: utils.type-scale(
 );
 $type-scale: utils.extend($fluent-type-scale);
 
+.igc-scrollbar {
+    --scrolbar-size: #{utils.rem(16px)};
+    --igc-scrollbar-track-color: #{utils.color(gray, 100)};
+    --igc-scrollbar-thumb-color: #{utils.color(gray, 400)};
+}
+
 @mixin root-styles($palette) {
     :root {
         --igc-border-radius: #{utils.rem(2px)};
diff --git a/src/styles/themes/base/_indigo.scss b/src/styles/themes/base/_indigo.scss
index 8cd85af92..5dd1c326d 100644
--- a/src/styles/themes/base/_indigo.scss
+++ b/src/styles/themes/base/_indigo.scss
@@ -130,6 +130,12 @@ $indigo-type-scale: utils.type-scale(
 );
 $type-scale: utils.extend($indigo-type-scale);
 
+.igc-scrollbar {
+    --scrolbar-size: #{utils.rem(16px)};
+    --igc-scrollbar-track-color: #{utils.color(gray, 200)};
+    --igc-scrollbar-thumb-color: #{utils.color(gray, 400)};
+}
+
 @mixin root-styles($palette) {
     :root {
         --igc-border-radius: #{utils.rem(2px)};
diff --git a/src/styles/themes/base/_material.scss b/src/styles/themes/base/_material.scss
index 9e85bc2b0..f22f05a41 100644
--- a/src/styles/themes/base/_material.scss
+++ b/src/styles/themes/base/_material.scss
@@ -7,6 +7,12 @@ $elevations: utils.elevations(
 ) !default;
 $type-scale: utils.type-scale();
 
+.igc-scrollbar {
+    --scrolbar-size: #{utils.rem(16px)};
+    --igc-scrollbar-track-color: #{utils.color(gray, 100)};
+    --igc-scrollbar-thumb-color: #{utils.color(gray, 400)};
+}
+
 @mixin root-styles($palette) {
     :root {
         --igc-border-radius: #{utils.rem(2px)};
diff --git a/src/styles/utilities/_mixins.scss b/src/styles/utilities/_mixins.scss
index f3dfe6ca7..e8d0f5d59 100644
--- a/src/styles/utilities/_mixins.scss
+++ b/src/styles/utilities/_mixins.scss
@@ -258,3 +258,20 @@
         }
     }
 }
+
+@mixin igc-scrollbar($track-size, $track-bg, $thumb-bg) {
+    // Firefox only
+    scrollbar-width: $track-size;
+    scrollbar-color: $thumb-bg $track-bg;
+
+    // Chromium only
+    ::-webkit-scrollbar {
+        width: $track-size;
+        height: $track-size;
+        background: $track-bg;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: $thumb-bg;
+    }
+}
diff --git a/stories/nav-drawer.stories.ts b/stories/nav-drawer.stories.ts
index 1dba7452f..601264753 100644
--- a/stories/nav-drawer.stories.ts
+++ b/stories/nav-drawer.stories.ts
@@ -96,12 +96,87 @@ const handleToggle = () => {
   drawer?.toggle();
 };
 
+const nabarItems = [
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+  {
+    icon: 'home',
+    text: 'Navbar item text',
+  },
+];
+
 const Template: Story<ArgTypes, Context> = (
   { open = false, position }: ArgTypes,
   { globals: { direction } }: Context
 ) => {
   return html`
-    <div style="display: flex;">
+    <div class="igc-scrollbar" style="display: flex;">
       <igc-nav-drawer
         dir=${ifDefined(direction)}
         .open=${open}
@@ -110,15 +185,14 @@ const Template: Story<ArgTypes, Context> = (
       >
         <igc-nav-drawer-header-item>Sample Drawer</igc-nav-drawer-header-item>
 
-        <igc-nav-drawer-item>
-          <igc-icon slot="icon" name="home"></igc-icon>
-          <span slot="content">Home</span>
-        </igc-nav-drawer-item>
-
-        <igc-nav-drawer-item>
-          <igc-icon slot="icon" name="search"></igc-icon>
-          <span slot="content">Search</span>
-        </igc-nav-drawer-item>
+        ${nabarItems.map((items) => {
+          return html`
+            <igc-nav-drawer-item>
+              <igc-icon slot="icon" name="${items.icon}"></igc-icon>
+              <span slot="content">${items.text}</span>
+            </igc-nav-drawer-item>
+          `;
+        })}
 
         <div slot="mini">
           <igc-nav-drawer-item>

From 91b53eec390d9642542140f5b77b2110ef61e8ea Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Mon, 6 Dec 2021 20:17:14 +0200
Subject: [PATCH 26/27] chore(changelog): add dark themes entry

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f653e985..a4ff83e92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.1.0
+
+### Added
+- Dark Themes
+
 ## 1.0.0 - 2021-11-22
 Initial release of Ignite UI Web Components
 

From 439d935ec7158466919e3cb5953c1f12c300390c Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 7 Dec 2021 09:03:43 +0200
Subject: [PATCH 27/27] chore: Update changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4ff83e92..f1f7f9906 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## 1.1.0
+## [Unreleased]
 
 ### Added
 - Dark Themes