@react-md/core 1.0.0-next.0

package/dist/theme/_theme.scss

@@ -0,0 +1,409 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use "sass:meta";
+@use "colors";
+@use "a11y";
+
+@use "../utils";
+
+/// This defines the total color scheme for your app and can be either:
+/// - `light`
+/// - `dark`
+/// - `system`
+///
+/// Setting this value to `system` will default to a light theme unless the user
+/// has set their preferred color scheme to dark on their OS.
+///
+/// If this value is changed from the default `light` value, the
+/// `colorSchemeMode` on the `CoreProviders` component should be updated to
+/// match the new value.
+$color-scheme: light !default;
+
+/// The dark elevation feature is generally recommended to keep enabled since it
+/// helps with visibility when your app is using the dark color scheme either
+/// through `$color-scheme: dark` or `using the `use-dark-theme mixin. When this
+/// feature is enabled, the `background-color` for surfaces will gradually
+/// become lighter the higher their `z-value` is with the material design box
+/// shadows.
+///
+/// If this is set to `false`, all surfaces will mimic the light theme and have
+/// a single surface color.
+$disable-dark-elevation: false !default;
+
+/// This value should be set to `false` if you do not want the initial bundle to
+/// include the `@media (prefers-color-scheme: dark)` styles.
+$disable-default-system-theme: false !default;
+$disable-default-root-theme: false !default;
+
+$primary-color: colors.$blue-500 !default;
+$on-primary-color: a11y.contrast-color($primary-color) !default;
+$secondary-color: colors.$orange-a-400 !default;
+$on-secondary-color: a11y.contrast-color($secondary-color) !default;
+$warning-color: colors.$deep-orange-a-400 !default;
+$on-warning-color: a11y.contrast-color($warning-color) !default;
+$error-color: colors.$red-500 !default;
+$on-error-color: a11y.contrast-color($error-color) !default;
+$success-color: colors.$green-a-700 !default;
+$on-success-color: a11y.contrast-color($success-color) !default;
+
+$outline-width: 0.0625em !default;
+$outline-color: currentcolor !default;
+$outline-grey-color: #999 !default;
+
+$light-theme-background-color: #fafafa !default;
+$light-theme-surface-color: #fff !default;
+$light-theme-text-primary-color: color.adjust(#000, $lightness: 13%) !default;
+$light-theme-text-secondary-color: color.adjust(#000, $lightness: 46%) !default;
+$light-theme-text-hint-color: color.adjust(#000, $lightness: 66%) !default;
+$light-theme-text-disabled-color: color.adjust(#000, $lightness: 62%) !default;
+
+$dark-theme-background-color: #121212 !default;
+$dark-theme-surface-color: if($disable-dark-elevation, #424242, null) !default;
+$dark-theme-text-primary-color: color.adjust(#fff, $lightness: -15%) !default;
+$dark-theme-text-secondary-color: color.adjust(#fff, $lightness: -30%) !default;
+$dark-theme-text-hint-color: color.adjust(#fff, $lightness: -50%) !default;
+$dark-theme-text-disabled-color: color.adjust(#fff, $lightness: -50%) !default;
+
+@function get-default-color($light-color, $dark-color) {
+  @return if($color-scheme == dark, $dark-color, $light-color);
+}
+
+$background-color: get-default-color(
+  $light-theme-background-color,
+  $dark-theme-background-color
+) !default;
+$surface-color: get-default-color(
+  $light-theme-surface-color,
+  $dark-theme-surface-color
+) !default;
+$text-primary-color: get-default-color(
+  $light-theme-text-primary-color,
+  $dark-theme-text-primary-color
+) !default;
+$text-secondary-color: get-default-color(
+  $light-theme-text-secondary-color,
+  $dark-theme-text-secondary-color
+) !default;
+$text-hint-color: get-default-color(
+  $light-theme-text-hint-color,
+  $dark-theme-text-hint-color
+) !default;
+$text-disabled-color: get-default-color(
+  $light-theme-text-disabled-color,
+  $dark-theme-text-disabled-color
+) !default;
+
+$dark-elevation-colors: (
+  0: $dark-theme-background-color,
+  1: #1f1f1f,
+  2: #242424,
+  3: #262626,
+  4: #282828,
+  5: #282828,
+  6: #2c2c2c,
+  7: #2c2c2c,
+  8: #2f2f2f,
+  9: #2f2f2f,
+  10: #2f2f2f,
+  11: #2f2f2f,
+  12: #333,
+  13: #333,
+  14: #333,
+  15: #333,
+  16: #353535,
+  17: #353535,
+  18: #353535,
+  19: #353535,
+  20: #353535,
+  21: #353535,
+  22: #353535,
+  23: #353535,
+  24: #383838,
+) !default;
+
+$_validated_color_scheme: utils.validate(
+  (light dark system),
+  $color-scheme,
+  "$color-scheme"
+);
+
+$theme-var-lookup: (
+  background-color: (
+    var: --rmd-background-color,
+    value: $background-color,
+  ),
+  on-background-color: (
+    var: --rmd-on-background-color,
+    value: null,
+  ),
+  surface-color: (
+    var: --rmd-surface-color,
+    value: $surface-color,
+  ),
+  primary-color: (
+    var: --rmd-primary-color,
+    value: $primary-color,
+  ),
+  on-primary-color: (
+    var: --rmd-on-primary-color,
+    value: $on-primary-color,
+  ),
+  secondary-color: (
+    var: --rmd-secondary-color,
+    value: $secondary-color,
+  ),
+  on-secondary-color: (
+    var: --rmd-on-secondary-color,
+    value: $on-secondary-color,
+  ),
+  warning-color: (
+    var: --rmd-warning-color,
+    value: $warning-color,
+  ),
+  on-warning-color: (
+    var: --rmd-on-warning-color,
+    value: $on-warning-color,
+  ),
+  error-color: (
+    var: --rmd-error-color,
+    value: $error-color,
+  ),
+  on-error-color: (
+    var: --rmd-on-error-color,
+    value: $on-error-color,
+  ),
+  success-color: (
+    var: --rmd-success-color,
+    value: $success-color,
+  ),
+  on-success-color: (
+    var: --rmd-on-success-color,
+    value: $on-success-color,
+  ),
+  text-primary-color: (
+    var: --rmd-text-primary-color,
+    value: $text-primary-color,
+  ),
+  text-secondary-color: (
+    var: --rmd-text-secondary-color,
+    value: $text-secondary-color,
+  ),
+  text-hint-color: (
+    var: --rmd-text-hint-color,
+    value: $text-hint-color,
+  ),
+  text-disabled-color: (
+    var: --rmd-text-disabled-color,
+    value: $text-disabled-color,
+  ),
+  outline-width: (
+    var: --rmd-outline-width,
+    value: $outline-width,
+  ),
+  outline-color: (
+    var: --rmd-outline-color,
+    value: $outline-color,
+  ),
+  outline-grey-color: (
+    var: --rmd-outline-grey-color,
+    value: $outline-grey-color,
+  ),
+);
+
+@function theme-get-var($name, $fallback: null) {
+  $found: utils.validate($theme-var-lookup, $name, "theme var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@function _dark-elevation-color($z-value) {
+  @return "--rmd-dark-elevation-color-#{$z-value}";
+}
+
+@function get-dark-elevation-color($z-value) {
+  @return var(#{_dark-elevation-color($z-value)});
+}
+
+@mixin set-dark-elevation-color($z-value, $value) {
+  #{_dark-elevation-color($z-value)}: #{$value};
+}
+
+@mixin theme-set-var($name, $value-or-theme-name) {
+  $var: map.get(utils.validate($theme-var-lookup, $name, "theme var"), var);
+  $value: $value-or-theme-name;
+  @if map.has-key($theme-var-lookup, $value-or-theme-name) {
+    $name: $value-or-theme-name;
+    $value: theme-get-var($name);
+  }
+
+  #{$var}: #{$value};
+}
+
+@mixin theme-use-var($property, $name: $property, $fallback: null) {
+  #{$property}: theme-get-var($name, $fallback);
+}
+
+@mixin use-light-theme-colors {
+  @include theme-set-var(background-color, $light-theme-background-color);
+  @if $disable-dark-elevation {
+    @include theme-set-var(surface-color, $light-theme-surface-color);
+  }
+  @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
+  @include theme-set-var(
+    text-secondary-color,
+    $light-theme-text-secondary-color
+  );
+  @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
+  @include theme-set-var(text-disabled-color, $light-theme-text-disabled-color);
+
+  @if not $disable-dark-elevation and $color-scheme != light {
+    @each $z-value, $background-color in $dark-elevation-colors {
+      @include set-dark-elevation-color($z-value, $light-theme-surface-color);
+    }
+  }
+}
+
+@mixin use-dark-theme-colors {
+  @include theme-set-var(background-color, $dark-theme-background-color);
+  @if $disable-dark-elevation {
+    @include theme-set-var(surface-color, $dark-theme-surface-color);
+  }
+  @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
+  @include theme-set-var(
+    text-secondary-color,
+    $dark-theme-text-secondary-color
+  );
+  @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
+  @include theme-set-var(text-disabled-color, $dark-theme-text-disabled-color);
+
+  @if not $disable-dark-elevation {
+    @each $z-value, $background-color in $dark-elevation-colors {
+      @include set-dark-elevation-color($z-value, $background-color);
+    }
+  }
+}
+
+@mixin colors {
+  @include theme-set-var(background-color, $background-color);
+  @if $disable-dark-elevation {
+    @include theme-set-var(surface-color, $surface-color);
+  }
+
+  @include theme-set-var(primary-color, $primary-color);
+  @include theme-set-var(on-primary-color, $on-primary-color);
+  @include theme-set-var(secondary-color, $secondary-color);
+  @include theme-set-var(on-secondary-color, $on-secondary-color);
+  @include theme-set-var(warning-color, $warning-color);
+  @include theme-set-var(on-warning-color, $on-warning-color);
+  @include theme-set-var(error-color, $error-color);
+  @include theme-set-var(on-error-color, $on-error-color);
+  @include theme-set-var(success-color, $success-color);
+  @include theme-set-var(on-success-color, $on-success-color);
+  @include theme-set-var(text-primary-color, $text-primary-color);
+  @include theme-set-var(text-secondary-color, $text-secondary-color);
+  @include theme-set-var(text-hint-color, $text-hint-color);
+  @include theme-set-var(text-disabled-color, $text-disabled-color);
+
+  @if not $disable-dark-elevation and $color-scheme == dark {
+    @each $z-value, $background-color in $dark-elevation-colors {
+      @include set-dark-elevation-color($z-value, $background-color);
+    }
+  }
+}
+
+@mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) {
+  @if not $disable-dark-elevation {
+    @include theme-set-var(surface-color, get-dark-elevation-color($z-value));
+  }
+  @if not $disable-colors {
+    @include theme-set-var(background-color, theme-get-var(surface-color));
+    @include theme-use-var(background-color);
+    @include theme-use-var(color, text-primary-color);
+  }
+}
+
+@function get-swatch(
+  $color,
+  $swatch,
+  $accent: false,
+  $fallback-color: null,
+  $fallback-name: null
+) {
+  $current-color-index: list.index(map.values(colors.$color-map), $color);
+
+  @if not $current-color-index {
+    @if not $fallback-color {
+      $fallback: if(
+        $fallback-name,
+        "the '$#{$fallback-name}' variable",
+        "a fallback color"
+      );
+
+      $error-msg: "Invalid material design color: '#{$color}'. If this was intentional because your app does " +
+        "not use material design colors, set #{$fallback} instead to get a correct color for the provided swatch: " +
+        "#{$swatch}.";
+      @error $error-msg;
+    } @else if type-of($fallback-color) != "color" {
+      @error "Invalid fallback color: '#{$fallback-color}'. This must be a valid color.";
+    } @else {
+      @return $fallback-color;
+    }
+  }
+
+  $suffixes: utils.validate(
+    if($accent, colors.$accent-suffixes, colors.$primary-suffixes),
+    $swatch,
+    "material design color swatch"
+  );
+  $current-color-name: list.nth(
+    map.keys(colors.$color-map),
+    $current-color-index
+  );
+  $accent-index: string.index($current-color-name, "-a-");
+  @if $accent-index {
+    $current-color-name: string.slice(
+      $current-color-name,
+      1,
+      $accent-index - 1
+    );
+  } @else {
+    $index: 1;
+    $found: false;
+    @while not $found and $index < length(colors.$available-color-names) {
+      $suffix: list.nth(colors.$available-color-names, $index);
+      $suffix-index: string.index($current-color-name, $suffix);
+      @if $suffix-index {
+        $found: true;
+        $current-color-name: string.slice(
+          $current-color-name,
+          1,
+          $suffix-index - 1 + string.length($suffix)
+        );
+      }
+
+      $index: $index + 1;
+    }
+  }
+
+  $color-name: "#{$current-color-name}#{if($accent, "-a", "")}-#{$swatch}";
+
+  @return map-get(colors.$color-map, $color-name);
+}
+
+@mixin default-system-theme {
+  @if not $disable-default-system-theme and $color-scheme == system {
+    @media (prefers-color-scheme: dark) {
+      :root {
+        @content;
+      }
+    }
+  }
+}

package/dist/theme/colors.d.ts

@@ -0,0 +1,256 @@
+export declare const red50 = "#ffebee";
+export declare const red100 = "#ffcdd2";
+export declare const red200 = "#ef9a9a";
+export declare const red300 = "#e57373";
+export declare const red400 = "#ef5350";
+export declare const red500 = "#f44336";
+export declare const red600 = "#e53935";
+export declare const red700 = "#d32f2f";
+export declare const red800 = "#c62828";
+export declare const red900 = "#b71c1c";
+export declare const redAccent100 = "#ff8a80";
+export declare const redAccent200 = "#ff5252";
+export declare const redAccent400 = "#ff1744";
+export declare const redAccent700 = "#d50000";
+export declare const pink50 = "#fce4ec";
+export declare const pink100 = "#f8bbd0";
+export declare const pink200 = "#f48fb1";
+export declare const pink300 = "#f06292";
+export declare const pink400 = "#ec407a";
+export declare const pink500 = "#e91e63";
+export declare const pink600 = "#d81b60";
+export declare const pink700 = "#c2185b";
+export declare const pink800 = "#ad1457";
+export declare const pink900 = "#880e4f";
+export declare const pinkAccent100 = "#ff80ab";
+export declare const pinkAccent200 = "#ff4081";
+export declare const pinkAccent400 = "#f50057";
+export declare const pinkAccent700 = "#c51162";
+export declare const purple50 = "#f3e5f5";
+export declare const purple100 = "#e1bee7";
+export declare const purple200 = "#ce93d8";
+export declare const purple300 = "#ba68c8";
+export declare const purple400 = "#ab47bc";
+export declare const purple500 = "#9c27b0";
+export declare const purple600 = "#8e24aa";
+export declare const purple700 = "#7b1fa2";
+export declare const purple800 = "#6a1b9a";
+export declare const purple900 = "#4a148c";
+export declare const purpleAccent100 = "#ea80fc";
+export declare const purpleAccent200 = "#e040fb";
+export declare const purpleAccent400 = "#d500f9";
+export declare const purpleAccent700 = "#a0f";
+export declare const deepPurple50 = "#ede7f6";
+export declare const deepPurple100 = "#d1c4e9";
+export declare const deepPurple200 = "#b39ddb";
+export declare const deepPurple300 = "#9575cd";
+export declare const deepPurple400 = "#7e57c2";
+export declare const deepPurple500 = "#673ab7";
+export declare const deepPurple600 = "#5e35b1";
+export declare const deepPurple700 = "#512da8";
+export declare const deepPurple800 = "#4527a0";
+export declare const deepPurple900 = "#311b92";
+export declare const deepPurpleAccent100 = "#b388ff";
+export declare const deepPurpleAccent200 = "#7c4dff";
+export declare const deepPurpleAccent400 = "#651fff";
+export declare const deepPurpleAccent700 = "#6200ea";
+export declare const indigo50 = "#e8eaf6";
+export declare const indigo100 = "#c5cae9";
+export declare const indigo200 = "#9fa8da";
+export declare const indigo300 = "#7986cb";
+export declare const indigo400 = "#5c6bc0";
+export declare const indigo500 = "#3f51b5";
+export declare const indigo600 = "#3949ab";
+export declare const indigo700 = "#303f9f";
+export declare const indigo800 = "#283593";
+export declare const indigo900 = "#1a237e";
+export declare const indigoAccent100 = "#8c9eff";
+export declare const indigoAccent200 = "#536dfe";
+export declare const indigoAccent400 = "#3d5afe";
+export declare const indigoAccent700 = "#304ffe";
+export declare const blue50 = "#e3f2fd";
+export declare const blue100 = "#bbdefb";
+export declare const blue200 = "#90caf9";
+export declare const blue300 = "#64b5f6";
+export declare const blue400 = "#42a5f5";
+export declare const blue500 = "#2196f3";
+export declare const blue600 = "#1e88e5";
+export declare const blue700 = "#1976d2";
+export declare const blue800 = "#1565c0";
+export declare const blue900 = "#0d47a1";
+export declare const blueAccent100 = "#82b1ff";
+export declare const blueAccent200 = "#448aff";
+export declare const blueAccent400 = "#2979ff";
+export declare const blueAccent700 = "#2962ff";
+export declare const lightBlue50 = "#e1f5fe";
+export declare const lightBlue100 = "#b3e5fc";
+export declare const lightBlue200 = "#81d4fa";
+export declare const lightBlue300 = "#4fc3f7";
+export declare const lightBlue400 = "#29b6f6";
+export declare const lightBlue500 = "#03a9f4";
+export declare const lightBlue600 = "#039be5";
+export declare const lightBlue700 = "#0288d1";
+export declare const lightBlue800 = "#0277bd";
+export declare const lightBlue900 = "#01579b";
+export declare const lightBlueAccent100 = "#80d8ff";
+export declare const lightBlueAccent200 = "#40c4ff";
+export declare const lightBlueAccent400 = "#00b0ff";
+export declare const lightBlueAccent700 = "#0091ea";
+export declare const cyan50 = "#e0f7fa";
+export declare const cyan100 = "#b2ebf2";
+export declare const cyan200 = "#80deea";
+export declare const cyan300 = "#4dd0e1";
+export declare const cyan400 = "#26c6da";
+export declare const cyan500 = "#00bcd4";
+export declare const cyan600 = "#00acc1";
+export declare const cyan700 = "#0097a7";
+export declare const cyan800 = "#00838f";
+export declare const cyan900 = "#006064";
+export declare const cyanAccent100 = "#84ffff";
+export declare const cyanAccent200 = "#18ffff";
+export declare const cyanAccent400 = "#00e5ff";
+export declare const cyanAccent700 = "#00b8d4";
+export declare const teal50 = "#e0f2f1";
+export declare const teal100 = "#b2dfdb";
+export declare const teal200 = "#80cbc4";
+export declare const teal300 = "#4db6ac";
+export declare const teal400 = "#26a69a";
+export declare const teal500 = "#009688";
+export declare const teal600 = "#00897b";
+export declare const teal700 = "#00796b";
+export declare const teal800 = "#00695c";
+export declare const teal900 = "#004d40";
+export declare const tealAccent100 = "#a7ffeb";
+export declare const tealAccent200 = "#64ffda";
+export declare const tealAccent400 = "#1de9b6";
+export declare const tealAccent700 = "#00bfa5";
+export declare const green50 = "#e8f5e9";
+export declare const green100 = "#c8e6c9";
+export declare const green200 = "#a5d6a7";
+export declare const green300 = "#81c784";
+export declare const green400 = "#66bb6a";
+export declare const green500 = "#4caf50";
+export declare const green600 = "#43a047";
+export declare const green700 = "#388e3c";
+export declare const green800 = "#2e7d32";
+export declare const green900 = "#1b5e20";
+export declare const greenAccent100 = "#b9f6ca";
+export declare const greenAccent200 = "#69f0ae";
+export declare const greenAccent400 = "#00e676";
+export declare const greenAccent700 = "#00c853";
+export declare const lightGreen50 = "#f1f8e9";
+export declare const lightGreen100 = "#dcedc8";
+export declare const lightGreen200 = "#c5e1a5";
+export declare const lightGreen300 = "#aed581";
+export declare const lightGreen400 = "#9ccc65";
+export declare const lightGreen500 = "#8bc34a";
+export declare const lightGreen600 = "#7cb342";
+export declare const lightGreen700 = "#689f38";
+export declare const lightGreen800 = "#558b2f";
+export declare const lightGreen900 = "#33691e";
+export declare const lightGreenAccent100 = "#ccff90";
+export declare const lightGreenAccent200 = "#b2ff59";
+export declare const lightGreenAccent400 = "#76ff03";
+export declare const lightGreenAccent700 = "#64dd17";
+export declare const lime50 = "#f9fbe7";
+export declare const lime100 = "#f0f4c3";
+export declare const lime200 = "#e6ee9c";
+export declare const lime300 = "#dce775";
+export declare const lime400 = "#d4e157";
+export declare const lime500 = "#cddc39";
+export declare const lime600 = "#c0ca33";
+export declare const lime700 = "#afb42b";
+export declare const lime800 = "#9e9d24";
+export declare const lime900 = "#827717";
+export declare const limeAccent100 = "#f4ff81";
+export declare const limeAccent200 = "#eeff41";
+export declare const limeAccent400 = "#c6ff00";
+export declare const limeAccent700 = "#aeea00";
+export declare const yellow50 = "#fffde7";
+export declare const yellow100 = "#fff9c4";
+export declare const yellow200 = "#fff59d";
+export declare const yellow300 = "#fff176";
+export declare const yellow400 = "#ffee58";
+export declare const yellow500 = "#ffeb3b";
+export declare const yellow600 = "#fdd835";
+export declare const yellow700 = "#fbc02d";
+export declare const yellow800 = "#f9a825";
+export declare const yellow900 = "#f57f17";
+export declare const yellowAccent100 = "#ffff8d";
+export declare const yellowAccent200 = "#ff0";
+export declare const yellowAccent400 = "#ffea00";
+export declare const yellowAccent700 = "#ffd600";
+export declare const amber50 = "#fff8e1";
+export declare const amber100 = "#ffecb3";
+export declare const amber200 = "#ffe082";
+export declare const amber300 = "#ffd54f";
+export declare const amber400 = "#ffca28";
+export declare const amber500 = "#ffc107";
+export declare const amber600 = "#ffb300";
+export declare const amber700 = "#ffa000";
+export declare const amber800 = "#ff8f00";
+export declare const amber900 = "#ff6f00";
+export declare const amberAccent100 = "#ffe57f";
+export declare const amberAccent200 = "#ffd740";
+export declare const amberAccent400 = "#ffc400";
+export declare const amberAccent700 = "#ffab00";
+export declare const orange50 = "#fff3e0";
+export declare const orange100 = "#fff0b2";
+export declare const orange200 = "#ffcc80";
+export declare const orange300 = "#ffb74d";
+export declare const orange400 = "#ffa726";
+export declare const orange500 = "#ff9800";
+export declare const orange600 = "#fb8c00";
+export declare const orange700 = "#f57c00";
+export declare const orange800 = "#ef6c00";
+export declare const orange900 = "#e65100";
+export declare const orangeAccent100 = "#ffd180";
+export declare const orangeAccent200 = "#ffab40";
+export declare const orangeAccent400 = "#ff9100";
+export declare const orangeAccent700 = "#ff6d00";
+export declare const deepOrange50 = "#fbe9e7";
+export declare const deepOrange100 = "#ffccbc";
+export declare const deepOrange200 = "#ffab91";
+export declare const deepOrange300 = "#ff8a65";
+export declare const deepOrange400 = "#ff7043";
+export declare const deepOrange500 = "#ff5722";
+export declare const deepOrange600 = "#f4511e";
+export declare const deepOrange700 = "#e64a19";
+export declare const deepOrange800 = "#d84315";
+export declare const deepOrange900 = "#bf360c";
+export declare const deepOrangeAccent100 = "#ff9e80";
+export declare const deepOrangeAccent200 = "#ff6e40";
+export declare const deepOrangeAccent400 = "#ff3d00";
+export declare const deepOrangeAccent700 = "#dd2c00";
+export declare const brown50 = "#efebe9";
+export declare const brown100 = "#d7ccc8";
+export declare const brown200 = "#bcaaa4";
+export declare const brown300 = "#a1887f";
+export declare const brown400 = "#8d6e63";
+export declare const brown500 = "#795548";
+export declare const brown600 = "#6d4c41";
+export declare const brown700 = "#5d4037";
+export declare const brown800 = "#4e342e";
+export declare const brown900 = "#3e2723";
+export declare const grey50 = "#fafafa";
+export declare const grey100 = "#f5f5f5";
+export declare const grey200 = "#eee";
+export declare const grey300 = "#e0e0e0";
+export declare const grey400 = "#bdbdbd";
+export declare const grey500 = "#9e9e9e";
+export declare const grey600 = "#757575";
+export declare const grey700 = "#616161";
+export declare const grey800 = "#424242";
+export declare const grey900 = "#212121";
+export declare const blueGrey50 = "#eceff1";
+export declare const blueGrey100 = "#cfd8dc";
+export declare const blueGrey200 = "#b0bec5";
+export declare const blueGrey300 = "#90a4ae";
+export declare const blueGrey400 = "#78909c";
+export declare const blueGrey500 = "#607d8b";
+export declare const blueGrey600 = "#546e7a";
+export declare const blueGrey700 = "#455a64";
+export declare const blueGrey800 = "#37474f";
+export declare const blueGrey900 = "#263238";
+export declare const white = "#fff";
+export declare const black = "#000";