@carbon/elements 10.55.0-rc.0 → 11.0.0

package/scss/themes/index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import 'themes';

package/scss/themes/modules/_config.scss

@@ -1,11 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$prefix: 'cds' !default;
-
-/// Specify if a fallback value should be provided for the CSS Custom Property
-$use-fallback-value: true !default;

package/scss/themes/modules/_theme.scss

@@ -1,120 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use 'sass:map';
-@use 'sass:meta';
-@use 'config';
-@use 'themes';
-
-/// Specify the fallback theme, used as a catch-all for tokens that you may not
-/// have defined in your custom theme
-$fallback: themes.$white !default;
-
-/// Specify the current theme. This can override existing tokens, or add new
-/// tokens. If you are adding new tokens, it's recommended that you set the
-/// fallback for your current theme
-$theme: () !default;
-$theme: map.merge($fallback, $theme);
-
-/// Local component tokens that can be updated with `@mixin add-component-tokens`.
-$-component-tokens: ();
-
-/// Include the CSS Custom Properties for the active theme or a given theme on
-/// a selector
-@mixin theme($active-theme: $theme, $component-tokens...) {
-  @each $token, $value in $active-theme {
-    @include -custom-property($token, $value);
-  }
-
-  @each $group in $component-tokens {
-    @each $token, $value in $group {
-      @include -custom-property($token, $value);
-    }
-  }
-
-  @each $token, $value in $-component-tokens {
-    @include -custom-property(
-      $token,
-      -resolve-token-value($active-theme, $value)
-    );
-  }
-}
-
-/// Retrieve the value for the given $token from the current $theme
-/// @param {String} $token
-@function get($token) {
-  @if map.has-key($theme, $token) {
-    @return map.get($theme, $token);
-  }
-  @error "Unable to find token: #{$token} in current $theme";
-}
-
-/// Compare two themes to see if the second theme is a superset of the first
-/// theme. In other words, this function will return true if every token in the
-/// first theme is available in the second theme and has the same value. The
-/// second theme is allowed to have additional values and it will still match.
-/// @param {Map} $a
-/// @param {Map} $b
-/// @returns {Boolean}
-@function matches($a, $b) {
-  @each $key, $value in $a {
-    @if map.has-key($b, $key) == false {
-      @return false;
-    }
-
-    @if map.get($b, $key) != $value {
-      @return false;
-    }
-  }
-
-  @return true;
-}
-
-/// Add component tokens which will be included any time the theme mixin is
-/// called
-@mixin add-component-tokens($token-map) {
-  $-component-tokens: map.merge($-component-tokens, $token-map) !global;
-}
-
-/// Determine the value from a component token that matches the given theme.
-/// This is helpful when a component token may change depending on what theme the
-/// component is being rendered in.
-@function -resolve-token-value($active-theme: $theme, $token-value) {
-  @if meta.type-of($token-value) == map and map.has-key($token-value, values) {
-    $fallback: map.get($token-value, fallback);
-    $theme-values: map.get($token-value, values);
-
-    @each $theme-value in $theme-values {
-      $theme-to-match: map.get($theme-value, theme);
-      $value: map.get($theme-value, value);
-
-      @if matches($theme-to-match, $active-theme) {
-        @return $value;
-      }
-    }
-
-    @return $fallback;
-  }
-
-  @return $token-value;
-}
-
-/// @access private
-/// @group @carbon/themes
-@mixin -custom-property($name, $value) {
-  @if meta.type-of($value) == map {
-    @each $property, $property-value in $value {
-      // Only support one-level of depth for values that are maps. This is to
-      // avoid bringing properties like `breakpoints` on type tokens
-      @if type-of($property-value) != map {
-        @include -custom-property('#{$name}-#{$property}', $property-value);
-      }
-    }
-  } @else {
-    --#{config.$prefix}-#{$name}: #{$value};
-  }
-}

package/scss/themes/modules/_themes.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@forward 'generated/themes';

package/scss/themes/modules/_tokens.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@forward 'generated/tokens';

package/scss/themes/modules/_utilities.scss

@@ -1,18 +0,0 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use 'sass:map';
-
-/// @access private
-/// @group @carbon/themes
-@function merge($map, $maps...) {
-  $result: $map;
-  @each $map in $maps {
-    $result: map.merge($result, $map);
-  }
-  @return $result;
-}

package/scss/themes/modules/generated/_themes.scss

@@ -1,432 +0,0 @@
-// Code generated by @carbon/themes. DO NOT EDIT.
-//
-// Copyright IBM Corp. 2018, 2019
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@use 'sass:map';
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '../utilities';
-
-$white: (
-  background: #ffffff,
-  background-active: rgba(141, 141, 141, 0.5),
-  background-brand: #0f62fe,
-  background-hover: rgba(141, 141, 141, 0.12),
-  background-inverse: #393939,
-  background-inverse-hover: #474747,
-  background-selected: rgba(141, 141, 141, 0.2),
-  background-selected-hover: rgba(141, 141, 141, 0.32),
-  border-disabled: #c6c6c6,
-  border-interactive: #0f62fe,
-  border-inverse: #161616,
-  border-strong-01: #8d8d8d,
-  border-strong-02: #8d8d8d,
-  border-strong-03: #8d8d8d,
-  border-subtle-00: #e0e0e0,
-  border-subtle-01: #e0e0e0,
-  border-subtle-02: #e0e0e0,
-  border-subtle-03: #e0e0e0,
-  border-subtle-selected-01: #c6c6c6,
-  border-subtle-selected-02: #c6c6c6,
-  border-subtle-selected-03: #c6c6c6,
-  field-01: #f4f4f4,
-  field-02: #ffffff,
-  field-03: #f4f4f4,
-  field-hover-01: #e8e8e8,
-  field-hover-02: #e8e8e8,
-  field-hover-03: #e8e8e8,
-  focus: #0f62fe,
-  focus-inset: #ffffff,
-  focus-inverse: #ffffff,
-  highlight: #d0e2ff,
-  icon-disabled: rgba(22, 22, 22, 0.25),
-  icon-inverse: #ffffff,
-  icon-on-color: #ffffff,
-  icon-on-color-disabled: #8d8d8d,
-  icon-primary: #161616,
-  icon-secondary: #525252,
-  interactive: #0f62fe,
-  layer-01: #f4f4f4,
-  layer-02: #ffffff,
-  layer-03: #f4f4f4,
-  layer-accent-01: #e0e0e0,
-  layer-accent-02: #e0e0e0,
-  layer-accent-03: #e0e0e0,
-  layer-accent-active-01: #a8a8a8,
-  layer-accent-active-02: #a8a8a8,
-  layer-accent-active-03: #a8a8a8,
-  layer-accent-hover-01: #d1d1d1,
-  layer-accent-hover-02: #d1d1d1,
-  layer-accent-hover-03: #d1d1d1,
-  layer-active-01: #c6c6c6,
-  layer-active-02: #c6c6c6,
-  layer-active-03: #c6c6c6,
-  layer-hover-01: #e8e8e8,
-  layer-hover-02: #e8e8e8,
-  layer-hover-03: #e8e8e8,
-  layer-selected-01: #e0e0e0,
-  layer-selected-02: #e0e0e0,
-  layer-selected-03: #e0e0e0,
-  layer-selected-disabled: #8d8d8d,
-  layer-selected-hover-01: #d1d1d1,
-  layer-selected-hover-02: #d1d1d1,
-  layer-selected-hover-03: #d1d1d1,
-  layer-selected-inverse: #161616,
-  link-inverse: #78a9ff,
-  link-inverse-active: #f4f4f4,
-  link-inverse-hover: #a6c8ff,
-  link-primary: #0f62fe,
-  link-primary-hover: #0043ce,
-  link-secondary: #0043ce,
-  link-visited: #8a3ffc,
-  overlay: rgba(22, 22, 22, 0.5),
-  shadow: rgba(0, 0, 0, 0.3),
-  skeleton-background: #e8e8e8,
-  skeleton-element: #c6c6c6,
-  support-caution-major: #ff832b,
-  support-caution-minor: #f1c21b,
-  support-caution-undefined: #8a3ffc,
-  support-error: #da1e28,
-  support-error-inverse: #fa4d56,
-  support-info: #0043ce,
-  support-info-inverse: #4589ff,
-  support-success: #24a148,
-  support-success-inverse: #42be65,
-  support-warning: #f1c21b,
-  support-warning-inverse: #f1c21b,
-  text-disabled: rgba(22, 22, 22, 0.25),
-  text-error: #da1e28,
-  text-helper: #6f6f6f,
-  text-inverse: #ffffff,
-  text-on-color: #ffffff,
-  text-on-color-disabled: #8d8d8d,
-  text-placeholder: rgba(22, 22, 22, 0.4),
-  text-primary: #161616,
-  text-secondary: #525252,
-  toggle-off: #8d8d8d,
-) !default;
-$white: utilities.merge(
-  $white,
-  layout.$spacing,
-  layout.$fluid-spacing,
-  type.$tokens
-);
-
-$g10: (
-  background: #f4f4f4,
-  background-active: rgba(141, 141, 141, 0.5),
-  background-brand: #0f62fe,
-  background-hover: rgba(141, 141, 141, 0.12),
-  background-inverse: #393939,
-  background-inverse-hover: #474747,
-  background-selected: rgba(141, 141, 141, 0.2),
-  background-selected-hover: rgba(141, 141, 141, 0.32),
-  border-disabled: #c6c6c6,
-  border-interactive: #0f62fe,
-  border-inverse: #161616,
-  border-strong-01: #8d8d8d,
-  border-strong-02: #8d8d8d,
-  border-strong-03: #8d8d8d,
-  border-subtle-00: #e0e0e0,
-  border-subtle-01: #e0e0e0,
-  border-subtle-02: #e0e0e0,
-  border-subtle-03: #e0e0e0,
-  border-subtle-selected-01: #c6c6c6,
-  border-subtle-selected-02: #c6c6c6,
-  border-subtle-selected-03: #c6c6c6,
-  field-01: #ffffff,
-  field-02: #f4f4f4,
-  field-03: #ffffff,
-  field-hover-01: #e8e8e8,
-  field-hover-02: #e8e8e8,
-  field-hover-03: #e8e8e8,
-  focus: #0f62fe,
-  focus-inset: #ffffff,
-  focus-inverse: #ffffff,
-  highlight: #d0e2ff,
-  icon-disabled: rgba(22, 22, 22, 0.25),
-  icon-inverse: #ffffff,
-  icon-on-color: #ffffff,
-  icon-on-color-disabled: #8d8d8d,
-  icon-primary: #161616,
-  icon-secondary: #525252,
-  interactive: #0f62fe,
-  layer-01: #ffffff,
-  layer-02: #f4f4f4,
-  layer-03: #ffffff,
-  layer-accent-01: #e0e0e0,
-  layer-accent-02: #e0e0e0,
-  layer-accent-03: #e0e0e0,
-  layer-accent-active-01: #a8a8a8,
-  layer-accent-active-02: #a8a8a8,
-  layer-accent-active-03: #a8a8a8,
-  layer-accent-hover-01: #d1d1d1,
-  layer-accent-hover-02: #d1d1d1,
-  layer-accent-hover-03: #d1d1d1,
-  layer-active-01: #c6c6c6,
-  layer-active-02: #c6c6c6,
-  layer-active-03: #c6c6c6,
-  layer-hover-01: #e8e8e8,
-  layer-hover-02: #e8e8e8,
-  layer-hover-03: #e8e8e8,
-  layer-selected-01: #e0e0e0,
-  layer-selected-02: #e0e0e0,
-  layer-selected-03: #e0e0e0,
-  layer-selected-disabled: #8d8d8d,
-  layer-selected-hover-01: #d1d1d1,
-  layer-selected-hover-02: #d1d1d1,
-  layer-selected-hover-03: #d1d1d1,
-  layer-selected-inverse: #161616,
-  link-inverse: #78a9ff,
-  link-inverse-active: #f4f4f4,
-  link-inverse-hover: #a6c8ff,
-  link-primary: #0f62fe,
-  link-primary-hover: #0043ce,
-  link-secondary: #0043ce,
-  link-visited: #8a3ffc,
-  overlay: rgba(22, 22, 22, 0.5),
-  shadow: rgba(0, 0, 0, 0.3),
-  skeleton-background: #e8e8e8,
-  skeleton-element: #c6c6c6,
-  support-caution-major: #ff832b,
-  support-caution-minor: #f1c21b,
-  support-caution-undefined: #8a3ffc,
-  support-error: #da1e28,
-  support-error-inverse: #fa4d56,
-  support-info: #0043ce,
-  support-info-inverse: #4589ff,
-  support-success: #24a148,
-  support-success-inverse: #42be65,
-  support-warning: #f1c21b,
-  support-warning-inverse: #f1c21b,
-  text-disabled: rgba(22, 22, 22, 0.25),
-  text-error: #da1e28,
-  text-helper: #6f6f6f,
-  text-inverse: #ffffff,
-  text-on-color: #ffffff,
-  text-on-color-disabled: #8d8d8d,
-  text-placeholder: rgba(22, 22, 22, 0.4),
-  text-primary: #161616,
-  text-secondary: #525252,
-  toggle-off: #8d8d8d,
-) !default;
-$g10: utilities.merge(
-  $g10,
-  layout.$spacing,
-  layout.$fluid-spacing,
-  type.$tokens
-);
-
-$g90: (
-  background: #262626,
-  background-active: rgba(141, 141, 141, 0.4),
-  background-brand: #0f62fe,
-  background-hover: rgba(141, 141, 141, 0.16),
-  background-inverse: #f4f4f4,
-  background-inverse-hover: #e8e8e8,
-  background-selected: rgba(141, 141, 141, 0.24),
-  background-selected-hover: rgba(141, 141, 141, 0.32),
-  border-disabled: rgba(141, 141, 141, 0.5),
-  border-interactive: #4589ff,
-  border-inverse: #f4f4f4,
-  border-strong-01: #8d8d8d,
-  border-strong-02: #a8a8a8,
-  border-strong-03: #c6c6c6,
-  border-subtle-00: #525252,
-  border-subtle-01: #525252,
-  border-subtle-02: #6f6f6f,
-  border-subtle-03: #8d8d8d,
-  border-subtle-selected-01: #6f6f6f,
-  border-subtle-selected-02: #8d8d8d,
-  border-subtle-selected-03: #a8a8a8,
-  field-01: #393939,
-  field-02: #525252,
-  field-03: #6f6f6f,
-  field-hover-01: #474747,
-  field-hover-02: #636363,
-  field-hover-03: #5e5e5e,
-  focus: #ffffff,
-  focus-inset: #161616,
-  focus-inverse: #0f62fe,
-  highlight: #0043ce,
-  icon-disabled: rgba(244, 244, 244, 0.25),
-  icon-inverse: #161616,
-  icon-on-color: #ffffff,
-  icon-on-color-disabled: rgba(255, 255, 255, 0.25),
-  icon-primary: #f4f4f4,
-  icon-secondary: #c6c6c6,
-  interactive: #4589ff,
-  layer-01: #393939,
-  layer-02: #525252,
-  layer-03: #6f6f6f,
-  layer-accent-01: #525252,
-  layer-accent-02: #6f6f6f,
-  layer-accent-03: #8d8d8d,
-  layer-accent-active-01: #8d8d8d,
-  layer-accent-active-02: #393939,
-  layer-accent-active-03: #525252,
-  layer-accent-hover-01: #636363,
-  layer-accent-hover-02: #5e5e5e,
-  layer-accent-hover-03: #7a7a7a,
-  layer-active-01: #6f6f6f,
-  layer-active-02: #8d8d8d,
-  layer-active-03: #393939,
-  layer-hover-01: #474747,
-  layer-hover-02: #636363,
-  layer-hover-03: #5e5e5e,
-  layer-selected-01: #525252,
-  layer-selected-02: #6f6f6f,
-  layer-selected-03: #8d8d8d,
-  layer-selected-disabled: #a8a8a8,
-  layer-selected-hover-01: #636363,
-  layer-selected-hover-02: #5e5e5e,
-  layer-selected-hover-03: #7a7a7a,
-  layer-selected-inverse: #f4f4f4,
-  link-inverse: #0f62fe,
-  link-inverse-active: #161616,
-  link-inverse-hover: #0043ce,
-  link-primary: #78a9ff,
-  link-primary-hover: #a6c8ff,
-  link-secondary: #a6c8ff,
-  link-visited: #be95ff,
-  overlay: rgba(0, 0, 0, 0.65),
-  shadow: rgba(0, 0, 0, 0.8),
-  skeleton-background: #333333,
-  skeleton-element: #525252,
-  support-caution-major: #ff832b,
-  support-caution-minor: #f1c21b,
-  support-caution-undefined: #a56eff,
-  support-error: #ff8389,
-  support-error-inverse: #da1e28,
-  support-info: #4589ff,
-  support-info-inverse: #0043ce,
-  support-success: #42be65,
-  support-success-inverse: #24a148,
-  support-warning: #f1c21b,
-  support-warning-inverse: #f1c21b,
-  text-disabled: rgba(244, 244, 244, 0.25),
-  text-error: #ffb3b8,
-  text-helper: #c6c6c6,
-  text-inverse: #161616,
-  text-on-color: #ffffff,
-  text-on-color-disabled: rgba(255, 255, 255, 0.25),
-  text-placeholder: rgba(244, 244, 244, 0.4),
-  text-primary: #f4f4f4,
-  text-secondary: #c6c6c6,
-  toggle-off: #8d8d8d,
-) !default;
-$g90: utilities.merge(
-  $g90,
-  layout.$spacing,
-  layout.$fluid-spacing,
-  type.$tokens
-);
-
-$g100: (
-  background: #161616,
-  background-active: rgba(141, 141, 141, 0.4),
-  background-brand: #0f62fe,
-  background-hover: rgba(141, 141, 141, 0.16),
-  background-inverse: #f4f4f4,
-  background-inverse-hover: #e8e8e8,
-  background-selected: rgba(141, 141, 141, 0.24),
-  background-selected-hover: rgba(141, 141, 141, 0.32),
-  border-disabled: rgba(141, 141, 141, 0.5),
-  border-interactive: #4589ff,
-  border-inverse: #f4f4f4,
-  border-strong-01: #6f6f6f,
-  border-strong-02: #8d8d8d,
-  border-strong-03: #a8a8a8,
-  border-subtle-00: #393939,
-  border-subtle-01: #393939,
-  border-subtle-02: #525252,
-  border-subtle-03: #6f6f6f,
-  border-subtle-selected-01: #525252,
-  border-subtle-selected-02: #6f6f6f,
-  border-subtle-selected-03: #8d8d8d,
-  field-01: #262626,
-  field-02: #393939,
-  field-03: #525252,
-  field-hover-01: #333333,
-  field-hover-02: #474747,
-  field-hover-03: #636363,
-  focus: #ffffff,
-  focus-inset: #161616,
-  focus-inverse: #0f62fe,
-  highlight: #002d9c,
-  icon-disabled: rgba(244, 244, 244, 0.25),
-  icon-inverse: #161616,
-  icon-on-color: #ffffff,
-  icon-on-color-disabled: rgba(255, 255, 255, 0.25),
-  icon-primary: #f4f4f4,
-  icon-secondary: #c6c6c6,
-  interactive: #4589ff,
-  layer-01: #262626,
-  layer-02: #393939,
-  layer-03: #525252,
-  layer-accent-01: #393939,
-  layer-accent-02: #525252,
-  layer-accent-03: #6f6f6f,
-  layer-accent-active-01: #6f6f6f,
-  layer-accent-active-02: #8d8d8d,
-  layer-accent-active-03: #393939,
-  layer-accent-hover-01: #474747,
-  layer-accent-hover-02: #636363,
-  layer-accent-hover-03: #5e5e5e,
-  layer-active-01: #525252,
-  layer-active-02: #6f6f6f,
-  layer-active-03: #8d8d8d,
-  layer-hover-01: #333333,
-  layer-hover-02: #474747,
-  layer-hover-03: #636363,
-  layer-selected-01: #393939,
-  layer-selected-02: #525252,
-  layer-selected-03: #6f6f6f,
-  layer-selected-disabled: #a8a8a8,
-  layer-selected-hover-01: #474747,
-  layer-selected-hover-02: #636363,
-  layer-selected-hover-03: #5e5e5e,
-  layer-selected-inverse: #f4f4f4,
-  link-inverse: #0f62fe,
-  link-inverse-active: #161616,
-  link-inverse-hover: #0043ce,
-  link-primary: #78a9ff,
-  link-primary-hover: #a6c8ff,
-  link-secondary: #a6c8ff,
-  link-visited: #be95ff,
-  overlay: rgba(0, 0, 0, 0.65),
-  shadow: rgba(0, 0, 0, 0.8),
-  skeleton-background: #292929,
-  skeleton-element: #393939,
-  support-caution-major: #ff832b,
-  support-caution-minor: #f1c21b,
-  support-caution-undefined: #a56eff,
-  support-error: #fa4d56,
-  support-error-inverse: #da1e28,
-  support-info: #4589ff,
-  support-info-inverse: #0043ce,
-  support-success: #42be65,
-  support-success-inverse: #24a148,
-  support-warning: #f1c21b,
-  support-warning-inverse: #f1c21b,
-  text-disabled: rgba(244, 244, 244, 0.25),
-  text-error: #ff8389,
-  text-helper: #a8a8a8,
-  text-inverse: #161616,
-  text-on-color: #ffffff,
-  text-on-color-disabled: rgba(255, 255, 255, 0.25),
-  text-placeholder: rgba(244, 244, 244, 0.4),
-  text-primary: #f4f4f4,
-  text-secondary: #c6c6c6,
-  toggle-off: #6f6f6f,
-) !default;
-$g100: utilities.merge(
-  $g100,
-  layout.$spacing,
-  layout.$fluid-spacing,
-  type.$tokens
-);