@carbon/elements 10.30.0 → 10.32.0

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

@@ -82,6 +82,80 @@ $white: utilities.merge(
     button-separator: #e0e0e0,
     skeleton-01: #e5e5e5,
     skeleton-02: #c6c6c6,
+    background: #ffffff,
+    layer: #f4f4f4,
+    layer-accent: #e0e0e0,
+    field: #f4f4f4,
+    background-inverse: #393939,
+    background-brand: #0f62fe,
+    interactive: #0f62fe,
+    border-subtle: #e0e0e0,
+    border-strong: #8d8d8d,
+    border-inverse: #161616,
+    border-interactive: #0f62fe,
+    text-primary: #161616,
+    text-secondary: #525252,
+    text-placeholder: #a8a8a8,
+    text-helper: #6f6f6f,
+    text-on-color: #ffffff,
+    text-inverse: #ffffff,
+    link-primary: #0f62fe,
+    link-secondary: #0043ce,
+    link-visited: #8a3ffc,
+    link-inverse: #78a9ff,
+    icon-primary: #161616,
+    icon-secondary: #525252,
+    icon-on-color: #ffffff,
+    icon-inverse: #ffffff,
+    support-error: #da1e28,
+    support-success: #24a148,
+    support-warning: #f1c21b,
+    support-info: #0043ce,
+    support-error-inverse: #fa4d56,
+    support-success-inverse: #42be65,
+    support-warning-inverse: #f1c21b,
+    support-info-inverse: #4589ff,
+    overlay: rgba(22, 22, 22, 0.5),
+    toggle-off: #8d8d8d,
+    button-primary: #0f62fe,
+    button-secondary: #393939,
+    button-tertiary: #0f62fe,
+    button-danger-primary: #da1e28,
+    button-danger-secondary: #da1e28,
+    background-active: #c6c6c6,
+    layer-active: #c6c6c6,
+    button-danger-active: #750e13,
+    button-primary-active: #002d9c,
+    button-secondary-active: #6f6f6f,
+    button-tertiary-active: #002d9c,
+    focus-inset: #ffffff,
+    focus-inverse: #ffffff,
+    background-hover: #e5e5e5,
+    layer-hover: #e5e5e5,
+    field-hover: #e5e5e5,
+    background-inverse-hover: #4c4c4c,
+    link-primary-hover: #0043ce,
+    button-danger-hover: #b81921,
+    button-primary-hover: #0353e9,
+    button-secondary-hover: #4c4c4c,
+    button-tertiary-hover: #0353e9,
+    background-selected: #e0e0e0,
+    background-selected-hover: #cacaca,
+    layer-selected: #e0e0e0,
+    layer-selected-hover: #cacaca,
+    layer-selected-inverse: #161616,
+    border-subtle-selected: #c6c6c6,
+    layer-disabled: #f4f4f4,
+    field-disabled: #f4f4f4,
+    border-disabled: #f4f4f4,
+    text-disabled: #c6c6c6,
+    button-disabled: #c6c6c6,
+    icon-disabled: #c6c6c6,
+    text-on-color-disabled: #8d8d8d,
+    icon-on-color-disabled: #8d8d8d,
+    layer-selected-disabled: #8d8d8d,
+    skeleton-background: #e5e5e5,
+    skeleton-element: #c6c6c6,
     brand-01: #0f62fe,
     brand-02: #393939,
     brand-03: #0f62fe,
@@ -104,7 +178,12 @@ $g10: map.merge(
     field-01: #ffffff,
     field-02: #f4f4f4,
     disabled-01: #ffffff,
-    highlight: #edf5ff,
+    background: #f4f4f4,
+    layer: #ffffff,
+    field: #ffffff,
+    layer-disabled: #ffffff,
+    field-disabled: #ffffff,
+    border-disabled: #ffffff,
   )
 ) !default;
 
@@ -170,6 +249,67 @@ $g90: map.merge(
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
+    background: #262626,
+    layer: #393939,
+    layer-accent: #525252,
+    field: #393939,
+    background-inverse: #f4f4f4,
+    interactive: #4589ff,
+    border-subtle: #525252,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #8d8d8d,
+    text-inverse: #161616,
+    link-primary: #78a9ff,
+    link-secondary: #a6c8ff,
+    link-visited: #be95ff,
+    link-inverse: #0f62fe,
+    icon-primary: #f4f4f4,
+    icon-secondary: #c6c6c6,
+    icon-inverse: #161616,
+    support-error: #ff8389,
+    support-success: #42be65,
+    support-info: #4589ff,
+    support-error-inverse: #da1e28,
+    support-success-inverse: #24a148,
+    support-info-inverse: #0f62fe,
+    overlay: rgba(22, 22, 22, 0.7),
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #ff8389,
+    background-active: #6f6f6f,
+    layer-active: #6f6f6f,
+    button-secondary-active: #393939,
+    button-tertiary-active: #c6c6c6,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    background-hover: #4c4c4c,
+    layer-hover: #4c4c4c,
+    field-hover: #4c4c4c,
+    background-inverse-hover: #e5e5e5,
+    link-primary-hover: #a6c8ff,
+    button-secondary-hover: #606060,
+    button-tertiary-hover: #f4f4f4,
+    background-selected: #525252,
+    background-selected-hover: #656565,
+    layer-selected: #525252,
+    layer-selected-hover: #656565,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #6f6f6f,
+    layer-disabled: #393939,
+    field-disabled: #393939,
+    border-disabled: #393939,
+    text-disabled: #6f6f6f,
+    button-disabled: #6f6f6f,
+    icon-disabled: #6f6f6f,
+    text-on-color-disabled: #a8a8a8,
+    icon-on-color-disabled: #a8a8a8,
+    layer-selected-disabled: #a8a8a8,
+    skeleton-background: #353535,
+    skeleton-element: #525252,
     brand-02: #6f6f6f,
     brand-03: #ffffff,
     active-01: #6f6f6f,
@@ -239,6 +379,66 @@ $g100: map.merge(
     button-separator: #161616,
     skeleton-01: #353535,
     skeleton-02: #525252,
+    background: #161616,
+    layer: #262626,
+    layer-accent: #393939,
+    field: #262626,
+    background-inverse: #f4f4f4,
+    interactive: #4589ff,
+    border-subtle: #393939,
+    border-strong: #6f6f6f,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #8d8d8d,
+    text-inverse: #161616,
+    link-primary: #78a9ff,
+    link-secondary: #a6c8ff,
+    link-visited: #be95ff,
+    link-inverse: #0f62fe,
+    icon-primary: #f4f4f4,
+    icon-secondary: #c6c6c6,
+    icon-inverse: #161616,
+    support-error: #fa4d56,
+    support-success: #42be65,
+    support-info: #4589ff,
+    support-error-inverse: #da1e28,
+    support-success-inverse: #24a148,
+    support-info-inverse: #0f62fe,
+    overlay: rgba(22, 22, 22, 0.7),
+    toggle-off: #6f6f6f,
+    button-secondary: #6f6f6f,
+    button-tertiary: #ffffff,
+    button-danger-secondary: #fa4d56,
+    background-active: #525252,
+    layer-active: #525252,
+    button-secondary-active: #393939,
+    button-tertiary-active: #c6c6c6,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    background-hover: #353535,
+    layer-hover: #353535,
+    field-hover: #353535,
+    background-inverse-hover: #e5e5e5,
+    link-primary-hover: #a6c8ff,
+    button-secondary-hover: #606060,
+    button-tertiary-hover: #f4f4f4,
+    background-selected: #393939,
+    background-selected-hover: #4c4c4c,
+    layer-selected: #393939,
+    layer-selected-hover: #4c4c4c,
+    layer-selected-inverse: #f4f4f4,
+    border-subtle-selected: #525252,
+    layer-disabled: #262626,
+    field-disabled: #262626,
+    border-disabled: #262626,
+    text-disabled: #525252,
+    button-disabled: #525252,
+    icon-disabled: #525252,
+    skeleton-background: #353535,
+    skeleton-element: #525252,
     brand-02: #6f6f6f,
     brand-03: #ffffff,
     active-01: #525252,

package/scss/type/vendor/@carbon/layout/_breakpoint.scss

@@ -196,8 +196,16 @@ $carbon--grid-breakpoints: (
   $max: if($is-number-upper, $upper, map-get($breakpoints, $upper));
 
   @if $min and $max {
-    $min-width: if(not $is-number-lower and $min, map-get($min, width), $min);
-    $max-width: if(not $is-number-upper and $max, map-get($max, width), $max);
+    $min-width: if(
+      not $is-number-lower and $min,
+      map-get($min, width + 0.02),
+      $min
+    );
+    $max-width: if(
+      not $is-number-upper and $max,
+      map-get($max, width - 0.02),
+      $max
+    );
     @media (min-width: $min-width) and (max-width: $max-width) {
       @content;
     }

package/scss/type/vendor/@carbon/layout/generated/_spacing.scss

@@ -66,6 +66,11 @@ $carbon--spacing-11: 5rem !default;
 /// @group @carbon/layout
 $carbon--spacing-12: 6rem !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing-13: 10rem !default;
+
 /// @type List
 /// @access public
 /// @group @carbon/layout
@@ -81,7 +86,8 @@ $carbon--spacing: (
   $carbon--spacing-09,
   $carbon--spacing-10,
   $carbon--spacing-11,
-  $carbon--spacing-12
+  $carbon--spacing-12,
+  $carbon--spacing-13
 );
 
 /// @type Number
@@ -155,3 +161,9 @@ $spacing-11: $carbon--spacing-11 !default;
 /// @group @carbon/layout
 /// @alias carbon--spacing-12
 $spacing-12: $carbon--spacing-12 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-13
+$spacing-13: $carbon--spacing-13 !default;

package/scss/type/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -66,6 +66,11 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-13: 10rem !default;
+
 /// @type Map
 /// @access public
 /// @group @carbon/layout
@@ -82,4 +87,5 @@ $spacing: (
   spacing-10: $spacing-10,
   spacing-11: $spacing-11,
   spacing-12: $spacing-12,
+  spacing-13: $spacing-13,
 );

package/src/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9,6 +9,14 @@ Array [
   "activeSecondary",
   "activeTertiary",
   "activeUI",
+  "background",
+  "backgroundActive",
+  "backgroundBrand",
+  "backgroundHover",
+  "backgroundInverse",
+  "backgroundInverseHover",
+  "backgroundSelected",
+  "backgroundSelectedHover",
   "baseFontSize",
   "black",
   "black100",
@@ -27,6 +35,12 @@ Array [
   "bodyLong02",
   "bodyShort01",
   "bodyShort02",
+  "borderDisabled",
+  "borderInteractive",
+  "borderInverse",
+  "borderStrong",
+  "borderSubtle",
+  "borderSubtleSelected",
   "brand01",
   "brand02",
   "brand03",
@@ -34,7 +48,21 @@ Array [
   "breakpointDown",
   "breakpointUp",
   "breakpoints",
+  "buttonDangerActive",
+  "buttonDangerHover",
+  "buttonDangerPrimary",
+  "buttonDangerSecondary",
+  "buttonDisabled",
+  "buttonPrimary",
+  "buttonPrimaryActive",
+  "buttonPrimaryHover",
+  "buttonSecondary",
+  "buttonSecondaryActive",
+  "buttonSecondaryHover",
   "buttonSeparator",
+  "buttonTertiary",
+  "buttonTertiaryActive",
+  "buttonTertiaryHover",
   "caption01",
   "code01",
   "code02",
@@ -89,8 +117,11 @@ Array [
   "expressiveParagraph01",
   "fast01",
   "fast02",
+  "field",
   "field01",
   "field02",
+  "fieldDisabled",
+  "fieldHover",
   "fluid",
   "fluidSpacing",
   "fluidSpacing01",
@@ -98,6 +129,8 @@ Array [
   "fluidSpacing03",
   "fluidSpacing04",
   "focus",
+  "focusInset",
+  "focusInverse",
   "fontFamilies",
   "fontFamily",
   "fontWeight",
@@ -146,9 +179,16 @@ Array [
   "icon01",
   "icon02",
   "icon03",
+  "iconDisabled",
+  "iconInverse",
+  "iconOnColor",
+  "iconOnColorDisabled",
+  "iconPrimary",
+  "iconSecondary",
   "iconSize",
   "iconSize01",
   "iconSize02",
+  "interactive",
   "interactive01",
   "interactive02",
   "interactive03",
@@ -163,6 +203,15 @@ Array [
   "inverseSupport03",
   "inverseSupport04",
   "label01",
+  "layer",
+  "layerAccent",
+  "layerActive",
+  "layerDisabled",
+  "layerHover",
+  "layerSelected",
+  "layerSelectedDisabled",
+  "layerSelectedHover",
+  "layerSelectedInverse",
   "layout",
   "layout01",
   "layout02",
@@ -173,6 +222,11 @@ Array [
   "layout07",
   "link01",
   "link02",
+  "linkInverse",
+  "linkPrimary",
+  "linkPrimaryHover",
+  "linkSecondary",
+  "linkVisited",
   "magenta",
   "magenta10",
   "magenta100",
@@ -193,6 +247,7 @@ Array [
   "orange40",
   "orange60",
   "orange70",
+  "overlay",
   "overlay01",
   "print",
   "productiveHeading01",
@@ -235,6 +290,8 @@ Array [
   "selectedUI",
   "skeleton01",
   "skeleton02",
+  "skeletonBackground",
+  "skeletonElement",
   "slow01",
   "slow02",
   "spacing",
@@ -250,11 +307,20 @@ Array [
   "spacing10",
   "spacing11",
   "spacing12",
+  "spacing13",
   "styles",
   "support01",
   "support02",
   "support03",
   "support04",
+  "supportError",
+  "supportErrorInverse",
+  "supportInfo",
+  "supportInfoInverse",
+  "supportSuccess",
+  "supportSuccessInverse",
+  "supportWarning",
+  "supportWarningInverse",
   "teal",
   "teal10",
   "teal100",
@@ -271,8 +337,17 @@ Array [
   "text03",
   "text04",
   "text05",
+  "textDisabled",
   "textError",
+  "textHelper",
+  "textInverse",
+  "textOnColor",
+  "textOnColorDisabled",
+  "textPlaceholder",
+  "textPrimary",
+  "textSecondary",
   "themes",
+  "toggleOff",
   "tokens",
   "ui01",
   "ui02",

package/umd/index.js

@@ -4,14 +4,6 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CarbonElements = {}, global.CarbonColors, global.CarbonType, global.CarbonLayout, global.CarbonThemes, global.CarbonMotion));
 }(this, (function (exports, colors, type, layout, themes, motion) { 'use strict';
 
-  Object.keys(themes).forEach(function (k) {
-    if (k !== 'default') Object.defineProperty(exports, k, {
-      enumerable: true,
-      get: function () {
-        return themes[k];
-      }
-    });
-  });
   Object.defineProperty(exports, 'black', {
     enumerable: true,
     get: function () {
@@ -960,6 +952,14 @@
       return motion.slow02;
     }
   });
+  Object.keys(themes).forEach(function (k) {
+    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: function () {
+        return themes[k];
+      }
+    });
+  });
 
   Object.defineProperty(exports, '__esModule', { value: true });