@react-md/core 1.0.0-next.15 → 1.0.0-next.17

package/src/theme/_theme.scss

@@ -1,520 +0,0 @@
-@use "sass:color";
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@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: $color-scheme == light !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;
-
-// this should only be used if your application does not use menu, dialog,
-// sheet, card, expansion-panel, select, app-bar (theme="surface")
-$disable-surface-color: false !default;
-$disable-primary-color: false !default;
-$disable-on-primary-color: $disable-primary-color !default;
-$disable-secondary-color: false !default;
-$disable-on-secondary-color: $disable-secondary-color !default;
-$disable-warning-color: false !default;
-$disable-on-warning-color: $disable-warning-color !default;
-$disable-error-color: false !default;
-$disable-on-error-color: $disable-error-color !default;
-$disable-success-color: false !default;
-$disable-on-success-color: $disable-success-color !default;
-$disable-outline-grey-color: false !default;
-$disable-text-primary-color: false !default;
-$disable-text-secondary-color: false !default;
-$disable-text-hint-color: false !default;
-$disable-text-disabled-color: 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-variables: (
-  background-color,
-  on-background-color,
-  surface-color,
-  primary-color,
-  on-primary-color,
-  secondary-color,
-  on-secondary-color,
-  warning-color,
-  on-warning-color,
-  success-color,
-  on-success-color,
-  error-color,
-  on-error-color,
-  text-primary-color,
-  text-secondary-color,
-  text-hint-color,
-  text-disabled-color,
-  outline-width,
-  outline-color,
-  outline-grey-color
-);
-
-@function _is-var-disabled($name) {
-  @if $name == surface-color {
-    @return $disable-surface-color;
-  }
-
-  @if $name == primary-color {
-    @return $disable-primary-color;
-  }
-
-  @if $name == on-primary-color {
-    @return $disable-on-primary-color;
-  }
-
-  @if $name == secondary-color {
-    @return $disable-secondary-color;
-  }
-
-  @if $name == on-secondary-color {
-    @return $disable-on-secondary-color;
-  }
-
-  @if $name == warning-color {
-    @return $disable-warning-color;
-  }
-
-  @if $name == on-warning-color {
-    @return $disable-on-warning-color;
-  }
-
-  @if $name == error-color {
-    @return $disable-error-color;
-  }
-
-  @if $name == on-error-color {
-    @return $disable-on-error-color;
-  }
-
-  @if $name == success-color {
-    @return $disable-success-color;
-  }
-
-  @if $name == on-success-color {
-    @return $disable-on-success-color;
-  }
-
-  @if $name == text-primary-color {
-    @return $disable-text-primary-color;
-  }
-
-  @if $name == text-secondary-color {
-    @return $disable-text-secondary-color;
-  }
-
-  @if $name == text-hint-color {
-    @return $disable-text-hint-color;
-  }
-
-  @if $name == text-disabled-color {
-    @return $disable-text-disabled-color;
-  }
-
-  @if $name == outline-grey-color {
-    @return $disable-outline-grey-color;
-  }
-
-  @return false;
-}
-
-@function theme-get-var($name, $fallback: null) {
-  @if _is-var-disabled($name) {
-    @return $fallback;
-  }
-
-  $var: utils.get-var-name($theme-variables, $name, "theme");
-
-  @if $fallback {
-    @return var(#{$var}, #{$fallback});
-  }
-
-  @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) {
-  @if _is-var-disabled($name) {
-    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
-  }
-
-  $var: utils.get-var-name($theme-variables, $name, "theme");
-  $value: $value-or-theme-name;
-  @if list.index($theme-variables, $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) {
-  @if _is-var-disabled($name) {
-    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
-  }
-
-  #{$property}: theme-get-var($name, $fallback);
-}
-
-@mixin use-light-theme-elevation-colors {
-  @each $z-value, $background-color in $dark-elevation-colors {
-    @include set-dark-elevation-color($z-value, $light-theme-surface-color);
-  }
-}
-
-@mixin use-dark-theme-elevation-colors {
-  @each $z-value, $background-color in $dark-elevation-colors {
-    @include set-dark-elevation-color($z-value, $background-color);
-  }
-}
-
-@mixin use-light-theme-colors {
-  @include theme-set-var(background-color, $light-theme-background-color);
-  @if $disable-dark-elevation and not $disable-surface-color {
-    @include theme-set-var(surface-color, $light-theme-surface-color);
-  }
-  @if not $disable-text-primary-color {
-    @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
-  }
-  @if not $disable-text-secondary-color {
-    @include theme-set-var(
-      text-secondary-color,
-      $light-theme-text-secondary-color
-    );
-  }
-  @if not $disable-text-hint-color {
-    @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
-  }
-  @if not $disable-text-disabled-color {
-    @include theme-set-var(
-      text-disabled-color,
-      $light-theme-text-disabled-color
-    );
-  }
-
-  @if not $disable-dark-elevation and $color-scheme != light {
-    @include use-light-theme-elevation-colors;
-  }
-}
-
-@mixin use-dark-theme-colors {
-  @include theme-set-var(background-color, $dark-theme-background-color);
-  @if $disable-dark-elevation and not $disable-surface-color {
-    @include theme-set-var(surface-color, $dark-theme-surface-color);
-  }
-  @if not $disable-text-primary-color {
-    @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
-  }
-  @if not $disable-text-secondary-color {
-    @include theme-set-var(
-      text-secondary-color,
-      $dark-theme-text-secondary-color
-    );
-  }
-  @if not $disable-text-hint-color {
-    @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
-  }
-  @if not $disable-text-disabled-color {
-    @include theme-set-var(
-      text-disabled-color,
-      $dark-theme-text-disabled-color
-    );
-  }
-
-  @if not $disable-dark-elevation {
-    @include use-dark-theme-elevation-colors;
-  }
-}
-
-@mixin theme-variables {
-  @include theme-set-var(background-color, $background-color);
-  @if $disable-dark-elevation and not $disable-surface-color {
-    @include theme-set-var(surface-color, $surface-color);
-  }
-
-  @if not $disable-primary-color {
-    @include theme-set-var(primary-color, $primary-color);
-  }
-  @if not $disable-on-primary-color {
-    @include theme-set-var(on-primary-color, $on-primary-color);
-  }
-  @if not $disable-secondary-color {
-    @include theme-set-var(secondary-color, $secondary-color);
-  }
-  @if not $disable-on-secondary-color {
-    @include theme-set-var(on-secondary-color, $on-secondary-color);
-  }
-  @if not $disable-warning-color {
-    @include theme-set-var(warning-color, $warning-color);
-  }
-  @if not $disable-on-warning-color {
-    @include theme-set-var(on-warning-color, $on-warning-color);
-  }
-  @if not $disable-error-color {
-    @include theme-set-var(error-color, $error-color);
-  }
-  @if not $disable-on-error-color {
-    @include theme-set-var(on-error-color, $on-error-color);
-  }
-  @if not $disable-success-color {
-    @include theme-set-var(success-color, $success-color);
-  }
-  @if not $disable-on-success-color {
-    @include theme-set-var(on-success-color, $on-success-color);
-  }
-  @if not $disable-text-primary-color {
-    @include theme-set-var(text-primary-color, $text-primary-color);
-  }
-  @if not $disable-text-secondary-color {
-    @include theme-set-var(text-secondary-color, $text-secondary-color);
-  }
-  @if not $disable-text-hint-color {
-    @include theme-set-var(text-hint-color, $text-hint-color);
-  }
-  @if not $disable-text-disabled-color {
-    @include theme-set-var(text-disabled-color, $text-disabled-color);
-  }
-
-  @if not $disable-dark-elevation {
-    @if $color-scheme == dark {
-      @include use-dark-theme-elevation-colors;
-    } @else {
-      // default to light theme for system themes as well
-      @include use-light-theme-elevation-colors;
-    }
-  }
-
-  @include theme-set-var(outline-width, $outline-width);
-  @include theme-set-var(outline-color, $outline-color);
-  @if not $disable-outline-grey-color {
-    @include theme-set-var(outline-grey-color, $outline-grey-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);
-    @if not $disable-text-primary-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 meta.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 < list.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
-    $disable-default-root-theme and
-    $color-scheme ==
-    system
-  {
-    @media (prefers-color-scheme: dark) {
-      :root {
-        @content;
-      }
-    }
-  }
-}