Dark theme added with css variables

The organisation of the css variables as been reviewed
to accomodate a dark theme.

components/autocomplete/config.css

@@ -1,10 +1,11 @@
 :root {
-  --autocomplete-border-size: calc(var(--input-field-height) / 7);
-  --autocomplete-color-primary-contrast: var(--color-primary-contrast);
   --autocomplete-color-primary: var(--color-primary);
+  --autocomplete-color-primary-contrast: var(--color-primary-contrast);
+  --autocomplete-suggestion-active-background: var(--color-background-hover);
+  --autocomplete-suggestions-color: var(--color-text);
+  --autocomplete-suggestions-background: var(--color-background-raised);
+  --autocomplete-border-size: calc(var(--input-field-height) / 7);
   --autocomplete-overflow-max-height: 45vh;
-  --autocomplete-suggestion-active-background: var(--palette-grey-200);
   --autocomplete-suggestion-padding: var(--unit);
-  --autocomplete-suggestions-background: var(--color-white);
   --autocomplete-value-margin: calc(var(--unit) * 0.25) calc(var(--unit) * 0.5) calc(var(--unit) * 0.25) 0;
 }

components/autocomplete/theme.css

@@ -32,6 +32,7 @@
 
 .suggestions {
   background-color: var(--autocomplete-suggestions-background);
+  color: var(--autocomplete-suggestions-color);
   list-style: none;
   max-height: 0;
   overflow-x: hidden;

components/button/config.css

@@ -1,24 +1,31 @@
 :root {
-  --button-border-radius: calc(0.2 * var(--unit));
-  --button-height: calc(3.6 * var(--unit));
-  --button-toggle-font-size: calc(2 * var(--unit));
   --button-primary-color: var(--color-primary);
-  --button-primary-color-hover: color(var(--color-primary) a(20%));
+  --button-primary-color-focus: color(var(--color-primary) shade(12%));
   --button-primary-color-contrast: var(--color-primary-contrast);
-  --button-accent-color-contrast: var(--color-primary-contrast);
-  --button-accent-color-hover: color(var(--color-accent) a(20%));
+  --button-flat-primary-color-hover: color(var(--color-primary) a(12%));
   --button-accent-color: var(--color-accent);
-  --button-neutral-color: var(--color-white);
-  --button-neutral-color-contrast: var(--palette-grey-900);
-  --button-neutral-color-hover: color(var(--palette-grey-900) a(20%));
+  --button-accent-color-focus: color(var(--color-accent) shade(12%));
+  --button-accent-color-contrast: var(--color-primary-contrast);
+  --button-flat-accent-color-hover: color(var(--color-accent) a(12%));
+  --button-neutral-color: var(--color-background);
+  --button-neutral-color-focus: color(var(--color-background) shade(12%));
+  --button-neutral-color-contrast: var(--color-text);
+  --button-flat-neutral-color-hover: color(var(--color-text) a(12%));
+  --button-disabled-text-color: var(--color-faded);
+  --button-disabled-background-color: var(--color-divider);
+  --button-disabled-text-color-inverse: color(var(--color-background) a(28%));
+  --button-disabled-background-inverse: color(var(--color-background) a(12%));
+  --button-border-radius: calc(0.2 * var(--unit));
+  --button-height: calc(3.6 * var(--unit));
+  --button-shadow: var(--shadow-2p);
+  --button-shadow-active: var(--shadow-8p);
+  --button-floating-shadow: var(--shadow-6p);
+  --button-floating-shadow-active: var(--shadow-12p);
+  --button-toggle-font-size: calc(2 * var(--unit));
   --button-floating-font-size: calc(2.4 * var(--unit));
   --button-floating-height: calc(5.6 * var(--unit));
   --button-floating-mini-height: calc(4 * var(--unit));
   --button-floating-mini-font-size: calc(var(--button-floating-mini-height) / 2.25);
-  --button-disabled-text-color: color(var(--color-black) a(26%));
-  --button-disabled-background-color: color(var(--color-black) a(12%));
-  --button-disabled-text-color-inverse: color(var(--color-black) a(54%));
-  --button-disabled-background-inverse: color(var(--color-black) a(8%));
   --button-squared-icon-margin: calc(0.6 * var(--unit));
   --button-squared-min-width: calc(9 * var(--unit));
   --button-squared-padding: 0 calc(1.2 * var(--unit));

components/button/theme.css

@@ -93,11 +93,6 @@
 .solid {
   &[disabled] {
     background-color: var(--button-disabled-background-color);
-    box-shadow: var(--shadow-2p);
-  }
-
-  &:active {
-    box-shadow: var(--shadow-2p);
   }
 
   &:focus:not(:active) {
@@ -108,7 +103,14 @@
 }
 
 .raised {
-  box-shadow: var(--shadow-2p);
+  &:not([disabled]) {
+    box-shadow: var(--button-shadow);
+
+    &:active {
+      box-shadow: var(--button-shadow-active);
+    }
+  }
+
   composes: button;
   composes: squared;
   composes: solid;
@@ -122,9 +124,15 @@
 
 .floating {
   border-radius: 50%;
-  box-shadow:
-    0 1px 1.5px 0 rgba(0, 0, 0, 0.12),
-    0 1px 1px 0 rgba(0, 0, 0, 0.24);
+
+  &:not([disabled]) {
+    box-shadow: var(--button-floating-shadow);
+
+    &:active {
+      box-shadow: var(--button-floating-shadow-active);
+    }
+  }
+
   composes: button;
   composes: solid;
   font-size: var(--button-floating-font-size);
@@ -174,19 +182,23 @@
   &.floating {
     background: var(--button-primary-color);
     color: var(--button-primary-color-contrast);
+
+    &:focus:not(:active) {
+      background: var(--button-primary-color-focus);
+    }
   }
 
   &.flat,
   &.toggle {
     color: var(--button-primary-color);
 
     &:focus:not(:active) {
-      background: var(--button-primary-color-hover);
+      background: var(--button-flat-primary-color-hover);
     }
   }
 
   &.flat:hover {
-    background: var(--button-primary-color-hover);
+    background: var(--button-flat-primary-color-hover);
   }
 }
 
@@ -195,19 +207,23 @@
   &.floating {
     background: var(--button-accent-color);
     color: var(--button-accent-color-contrast);
+
+    &:focus:not(:active) {
+      background: var(--button-accent-color-focus);
+    }
   }
 
   &.flat,
   &.toggle {
     color: var(--button-accent-color);
 
     &:focus:not(:active) {
-      background: var(--button-accent-color-hover);
+      background: var(--button-flat-accent-color-hover);
     }
   }
 
   &.flat:hover {
-    background: var(--button-accent-color-hover);
+    background: var(--button-flat-accent-color-hover);
   }
 }
 
@@ -216,39 +232,47 @@
   &.floating {
     background-color: var(--button-neutral-color);
     color: var(--button-neutral-color-contrast);
+
+    &:focus:not(:active) {
+      background: var(--button-neutral-color-focus);
+    }
   }
 
   &.flat,
   &.toggle {
     color: var(--button-neutral-color-contrast);
 
     &:focus:not(:active) {
-      background: var(--button-neutral-color-hover);
+      background: var(--button-flat-neutral-color-hover);
     }
   }
 
   &.flat:hover {
-    background: var(--button-neutral-color-hover);
+    background: var(--button-flat-neutral-color-hover);
   }
 
   &.inverse {
     &.raised,
     &.floating {
       background-color: var(--button-neutral-color-contrast);
       color: var(--button-neutral-color);
+
+      &:focus:not(:active) {
+        background: var(--button-neutral-color-focus);
+      }
     }
 
     &.flat,
     &.toggle {
       color: var(--button-neutral-color);
 
       &:focus:not(:active) {
-        background: var(--button-neutral-color-hover);
+        background: var(--button-flat-neutral-color-hover);
       }
     }
 
     &.flat:hover {
-      background: var(--button-neutral-color-hover);
+      background: var(--button-flat-neutral-color-hover);
     }
   }
 }

components/card/config.css

@@ -1,7 +1,7 @@
 :root {
   --card-color-white: var(--color-white);
   --card-text-overlay: color(var(--color-black) a(35%));
-  --card-background-color: var(--card-color-white);
+  --card-background: var(--color-background-raised);
   --card-padding-sm: calc(0.8 * var(--unit));
   --card-padding: calc(1.6 * var(--unit));
   --card-padding-lg: calc(2 * var(--unit));

components/card/theme.css

@@ -3,7 +3,7 @@
 @import './config.css';
 
 .card {
-  background: var(--card-background-color);
+  background: var(--card-background);
   border-radius: calc(0.2 * var(--unit));
   box-shadow: var(--shadow-2p);
   display: flex;
@@ -95,6 +95,7 @@
   }
 
   & .title {
+    color: var(--color-text);
     font-size: calc(2 * var(--unit));
     font-weight: 500;
     letter-spacing: 0.02em;

components/checkbox/config.css

@@ -1,13 +1,13 @@
 :root {
   --checkbox-color: var(--color-primary);
-  --checkbox-disabled-color: color(var(--color-black) a(26%));
-  --checkbox-field-margin-bottom: calc(1.5 * var(--unit));
+  --checkbox-text-color: var(--color-text);
+  --checkbox-disabled-color: var(--color-faded);
   --checkbox-focus-checked-color: color(var(--color-primary) a(26%));
+  --checkbox-focus-color: var(--color-text-secondary);
+  --checkbox-focus-size: calc(var(--checkbox-size) * 2.3);
+  --checkbox-field-margin-bottom: calc(1.5 * var(--unit));
   --checkbox-ripple-duration: 650ms;
   --checkbox-size: calc(1.8 * var(--unit));
-  --checkbox-focus-color: color(var(--color-black) a(1%));
-  --checkbox-focus-size: calc(var(--checkbox-size) * 2.3);
-  --checkbox-text-color: var(--color-black);
   --checkbox-text-font-size: var(--font-size-small);
   --checkbox-total-height: calc(1.8 * var(--unit));
   --checkbox-transition-duration: 0.2s;

components/chip/config.css

@@ -1,16 +1,15 @@
 :root {
+  --chip-color: var(--color-text);
+  --chip-background: var(--color-background-hover);
+  --chip-remove-color: var(--color-faded);
+  --chip-remove-color-hover: var(--color-text-disabled);
   --chip-height: calc(3.2 * var(--unit));
   --chip-padding: calc(1.2 * var(--unit));
   --chip-margin-right: calc(0.25 * var(--unit));
-  --chip-background: var(--palette-grey-200);
   --chip-icon-font-size: calc(2 * var(--unit));
   --chip-icon-margin-right: calc(0.8 * var(--unit));
-  --chip-color: var(--color-text-secondary);
   --chip-font-size: var(--font-size-small);
   --chip-remove-size: calc(2.4 * var(--unit));
   --chip-remove-margin: calc(0.4 * var(--unit));
   --chip-remove-stroke-width: calc(0.4 * var(--unit));
-  --chip-remove-background: var(--palette-grey-400);
-  --chip-remove-background-hover: var(--palette-grey-500);
-  --chip-remove-color: var(--color-white);
 }

components/chip/theme.css

@@ -52,17 +52,17 @@
 }
 
 .delete:hover .deleteIcon {
-  background: var(--chip-remove-background-hover);
+  background: var(--chip-remove-color-hover);
 }
 
 .deleteIcon {
-  background: var(--chip-remove-background);
+  background: var(--chip-remove-color);
   border-radius: var(--chip-remove-size);
   vertical-align: top;
 
   & .deleteX {
     fill: transparent;
-    stroke: var(--chip-remove-color);
+    stroke: var(--chip-background);
     stroke-width: var(--chip-remove-stroke-width);
   }
 }

components/colors.css

@@ -274,6 +274,39 @@
 
   --color-black: rgb(0, 0, 0);
   --color-white: rgb(255, 255, 255);
-  --color-dark-contrast: var(--color-white);
-  --color-light-contrast: var(--color-black);
+
+  --theme-light-background: var(--palette-grey-50);
+  --theme-light-background-raised: var(--color-white);
+  --theme-light-background-secondary: var(--palette-grey-100);
+  --theme-light-background-hover: var(--palette-grey-200);
+  --theme-light-background-statusbar: var(--palette-grey-300);
+  --theme-light-background-snackbar: rgb(50, 50, 50);
+  --theme-light-text: color(var(--color-black) a(87%));
+  --theme-light-text-secondary: color(var(--color-black) a(54%));
+  --theme-light-text-disabled: color(var(--color-black) a(38%));
+  --theme-light-text-snackbar: var(--color-white);
+  --theme-light-divider: color(var(--color-black) a(12%));
+  --theme-light-faded: color(var(--color-black) a(26%));
+  --theme-light-switch-thumb-off: var(--palette-grey-50);
+  --theme-light-switch-track-off: color(var(--color-black) a(38%));
+  --theme-light-switch-disabled-thumb: var(--palette-grey-400);
+  --theme-light-switch-disabled-track: color(var(--color-black) a(12%));
+
+  --theme-dark-background: rgb(48, 48, 48);
+  --theme-dark-background-raised: var(--palette-grey-800);
+  --theme-dark-background-secondary: var(--palette-grey-900);
+  --theme-dark-background-hover: var(--palette-grey-700); /* just a guess */
+  --theme-dark-background-statusbar: var(--color-black);
+  --theme-dark-background-snackbar: rgb(50, 50, 50); /* just a guess */
+  --theme-dark-text: var(--color-white);
+  --theme-dark-text-secondary: color(var(--color-white) a(70%));
+  --theme-dark-text-disabled: color(var(--color-white) a(50%));
+  --theme-dark-text-snackbar: var(--color-white);
+  --theme-dark-divider: color(var(--color-white) a(12%));
+  --theme-dark-faded: color(var(--color-white) a(30%));
+  --theme-dark-switch-thumb-off: var(--palette-grey-400);
+  --theme-dark-switch-track-off: color(var(--color-white) a(30%));
+  --theme-dark-switch-disabled-thumb: var(--palette-grey-800);
+  --theme-dark-switch-disabled-track: color(var(--color-white) a(10%));
+
 }

components/date_picker/config.css

@@ -6,6 +6,7 @@
   --datepicker-primary-hover-color: color(var(--datepicker-primary) a(0.2));
   --datepicker-primary-contrast-color: var(--datepicker-primary-contrast);
   --datepicker-primary-dark-color: var(--datepicker-primary-dark);
+  --datepicker-background: var(--color-background-raised);
   --datepicker-dialog-width: calc(33 * var(--unit));
   --datepicker-inactive-opacity: 0.6;
   --datepicker-weekday-line-height: calc(2 * var(--unit));
@@ -19,7 +20,7 @@
   --calendar-primary-color: var(--calendar-primary);
   --calendar-primary-contrast-color: var(--calendar-primary-contrast);
   --calendar-primary-hover-color: color(var(--calendar-primary) a(0.21));
-  --calendar-arrows-color: var(--palette-grey-600);
+  --calendar-arrows-color: var(--palette-grey-600); /* TODO */
   --calendar-arrows-font-size: calc(2 * var(--unit));
   --calendar-year-font-size: 2.4;
   --calendar-day-font-size: calc(1.3 * var(--unit));

components/date_picker/theme.css

@@ -51,6 +51,7 @@
 }
 
 .dialog {
+  background-color: var(--datepicker-background);
   width: var(--datepicker-dialog-width);
 
   & > [role='body'] {
@@ -71,7 +72,6 @@
 }
 
 .calendar {
-  background: var(--calendar-primary-contrast-color);
   font-size: var(--font-size-small);
   height: var(--calendar-total-height);
   line-height: var(--calendar-row-height);
@@ -174,10 +174,6 @@
   }
 }
 
-.month {
-  background-color: var(--calendar-primary-contrast-color);
-}
-
 .slideRightEnter,
 .slideRightLeave {
   position: absolute;