feat(themes): add dark theme presets

.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: '#000',
+      },
+    ],
+  },
 };
 
-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);
 
   // Workaround for https://github.com/cfware/babel-plugin-template-html-minifier/issues/56
   const htmlNoMin = html;

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/).
 
+## [Unreleased]
+
+### Added
+- Dark Themes
+
 ## 1.0.0 - 2021-11-22
 Initial release of Ignite UI Web Components
 

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({

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;
             }
         }
 

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);
         }
     }
 

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 {

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) {

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);

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);
     }
 }
@@ -43,6 +44,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'],
@@ -145,6 +151,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'],
@@ -196,6 +210,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'] {

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);

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)};
     }
 

src/components/checkbox/checkbox.bootstrap.scss

@@ -26,6 +26,7 @@
         stroke-width: 4;
         transform: scale(.7);
         transition: none;
+        stroke: white;
     }
 
     igc-checkbox::part(label) {