@carbon/elements 10.50.0 → 10.51.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.50.0",
+  "version": "10.51.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -41,7 +41,7 @@
     "@carbon/import-once": "^10.6.0",
     "@carbon/layout": "^10.35.0",
     "@carbon/motion": "^10.27.0",
-    "@carbon/themes": "^10.49.0",
+    "@carbon/themes": "^10.50.0",
     "@carbon/type": "^10.40.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "ac4b4bf03cf93cb8463916231619fbfdc72f0be5"
+  "gitHead": "e76c42ab78cbee043db643597b7b5d79bd387c9b"
 }

package/scss/grid/modules/_css-grid.scss

@@ -251,10 +251,14 @@
 // -----------------------------------------------------------------------------
 // Column offset
 // -----------------------------------------------------------------------------
-@for $i from 1 through 16 {
+@for $i from 1 through 17 {
   .#{$prefix}--col-start-#{$i} {
     grid-column-start: $i;
   }
+
+  .#{$prefix}--col-end-#{$i} {
+    grid-column-start: $i;
+  }
 }
 
 .#{$prefix}--col-start-auto {
@@ -276,6 +280,10 @@
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
+
+      .#{$prefix}--#{$name}\:col-end-#{$i} {
+        grid-column-end: $i;
+      }
     }
 
     .#{$prefix}--#{$name}\:col-start-auto {

package/scss/themes/generated/_mixins.scss

@@ -176,8 +176,6 @@
   $layer-selected-hover: map-get($theme, 'layer-selected-hover') !global;
   $layer-selected-inverse: map-get($theme, 'layer-selected-inverse') !global;
   $border-subtle-selected: map-get($theme, 'border-subtle-selected') !global;
-  $layer-disabled: map-get($theme, 'layer-disabled') !global;
-  $field-disabled: map-get($theme, 'field-disabled') !global;
   $border-disabled: map-get($theme, 'border-disabled') !global;
   $text-disabled: map-get($theme, 'text-disabled') !global;
   $button-disabled: map-get($theme, 'button-disabled') !global;
@@ -358,8 +356,6 @@
     $layer-selected-hover: $hover-selected-ui !global;
     $layer-selected-inverse: $ui-05 !global;
     $border-subtle-selected: $active-ui !global;
-    $layer-disabled: $disabled-01 !global;
-    $field-disabled: $disabled-01 !global;
     $border-disabled: $disabled-01 !global;
     $text-disabled: $disabled-02 !global;
     $button-disabled: $disabled-02 !global;
@@ -901,14 +897,6 @@
       --#{$custom-property-prefix}-border-subtle-selected,
       map-get($theme, 'border-subtle-selected')
     ) !global;
-    $layer-disabled: var(
-      --#{$custom-property-prefix}-layer-disabled,
-      map-get($theme, 'layer-disabled')
-    ) !global;
-    $field-disabled: var(
-      --#{$custom-property-prefix}-field-disabled,
-      map-get($theme, 'field-disabled')
-    ) !global;
     $border-disabled: var(
       --#{$custom-property-prefix}-border-disabled,
       map-get($theme, 'border-disabled')
@@ -2489,32 +2477,6 @@
       );
     }
 
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'layer-disabled',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'layer-disabled',
-        map-get($theme, 'layer-disabled')
-      );
-    }
-
-    @if should-emit(
-      $theme,
-      $parent-carbon-theme,
-      'field-disabled',
-      $emit-difference
-    )
-    {
-      @include custom-property(
-        'field-disabled',
-        map-get($theme, 'field-disabled')
-      );
-    }
-
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/themes/generated/_themes.scss

@@ -139,8 +139,6 @@ $carbon--theme--white: (
   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,
@@ -957,8 +955,6 @@ $carbon--theme--g10: map-merge(
     background: #f4f4f4,
     layer: #ffffff,
     field: #ffffff,
-    layer-disabled: #ffffff,
-    field-disabled: #ffffff,
     border-disabled: #ffffff,
   )
 ) !default;
@@ -1029,8 +1025,6 @@ $carbon--theme--g80: map-merge(
     layer-selected-hover: #616161,
     layer-selected-inverse: #f4f4f4,
     border-subtle-selected: #8d8d8d,
-    layer-disabled: #525252,
-    field-disabled: #525252,
     border-disabled: #525252,
     text-disabled: #8d8d8d,
     button-disabled: #8d8d8d,
@@ -1215,8 +1209,6 @@ $carbon--theme--g90: map-merge(
     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,
@@ -1350,8 +1342,6 @@ $carbon--theme--g100: map-merge(
     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,
@@ -1487,8 +1477,6 @@ $carbon--theme--v9: map-merge(
     layer-selected-hover: #dfeafa,
     layer-selected-inverse: #5a6872,
     border-subtle-selected: #dfeafa,
-    layer-disabled: #fafbfd,
-    field-disabled: #fafbfd,
     border-disabled: #fafbfd,
     text-disabled: #dfe3e6,
     button-disabled: #dfe3e6,
@@ -2304,18 +2292,6 @@ $carbon--theme: (
       $border-subtle-selected,
       map-get($carbon--theme--white, 'border-subtle-selected')
     ),
-  layer-disabled:
-    if(
-      global-variable-exists('layer-disabled'),
-      $layer-disabled,
-      map-get($carbon--theme--white, 'layer-disabled')
-    ),
-  field-disabled:
-    if(
-      global-variable-exists('field-disabled'),
-      $field-disabled,
-      map-get($carbon--theme--white, 'field-disabled')
-    ),
   border-disabled:
     if(
       global-variable-exists('border-disabled'),

package/scss/themes/generated/_tokens.scss

@@ -1380,26 +1380,6 @@ $border-subtle-selected: if(
   #c6c6c6
 ) !default;
 
-/// @type {undefined}
-/// @access public
-/// @group @carbon/themes
-$layer-disabled: if(
-  global-variable-exists('carbon--theme') and
-    map-has-key($carbon--theme, 'layer-disabled'),
-  map-get($carbon--theme, 'layer-disabled'),
-  #f4f4f4
-) !default;
-
-/// @type {undefined}
-/// @access public
-/// @group @carbon/themes
-$field-disabled: if(
-  global-variable-exists('carbon--theme') and
-    map-has-key($carbon--theme, 'field-disabled'),
-  map-get($carbon--theme, 'field-disabled'),
-  #f4f4f4
-) !default;
-
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes

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

@@ -36,7 +36,6 @@ $white: (
   field-01: #f4f4f4,
   field-02: #ffffff,
   field-03: #f4f4f4,
-  field-disabled: #f4f4f4,
   field-hover-01: #e8e8e8,
   field-hover-02: #e8e8e8,
   field-hover-03: #e8e8e8,
@@ -44,7 +43,7 @@ $white: (
   focus-inset: #ffffff,
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
-  icon-disabled: #c6c6c6,
+  icon-disabled: rgba(22, 22, 22, 0.25),
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -66,7 +65,6 @@ $white: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
-  layer-disabled: #f4f4f4,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -141,7 +139,6 @@ $g10: (
   field-01: #ffffff,
   field-02: #f4f4f4,
   field-03: #ffffff,
-  field-disabled: #ffffff,
   field-hover-01: #e8e8e8,
   field-hover-02: #e8e8e8,
   field-hover-03: #e8e8e8,
@@ -149,7 +146,7 @@ $g10: (
   focus-inset: #ffffff,
   focus-inverse: #ffffff,
   highlight: #d0e2ff,
-  icon-disabled: #c6c6c6,
+  icon-disabled: rgba(22, 22, 22, 0.25),
   icon-inverse: #ffffff,
   icon-on-color: #ffffff,
   icon-on-color-disabled: #8d8d8d,
@@ -171,7 +168,6 @@ $g10: (
   layer-active-01: #c6c6c6,
   layer-active-02: #c6c6c6,
   layer-active-03: #c6c6c6,
-  layer-disabled: #ffffff,
   layer-hover-01: #e8e8e8,
   layer-hover-02: #e8e8e8,
   layer-hover-03: #e8e8e8,
@@ -246,7 +242,6 @@ $g90: (
   field-01: #393939,
   field-02: #525252,
   field-03: #6f6f6f,
-  field-disabled: #393939,
   field-hover-01: #474747,
   field-hover-02: #636363,
   field-hover-03: #5e5e5e,
@@ -254,7 +249,7 @@ $g90: (
   focus-inset: #161616,
   focus-inverse: #0f62fe,
   highlight: #0043ce,
-  icon-disabled: #6f6f6f,
+  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),
@@ -271,12 +266,11 @@ $g90: (
   layer-accent-active-02: #393939,
   layer-accent-active-03: #525252,
   layer-accent-hover-01: #636363,
-  layer-accent-hover-02: #404040,
+  layer-accent-hover-02: #5e5e5e,
   layer-accent-hover-03: #7a7a7a,
   layer-active-01: #6f6f6f,
   layer-active-02: #8d8d8d,
   layer-active-03: #393939,
-  layer-disabled: #393939,
   layer-hover-01: #474747,
   layer-hover-02: #636363,
   layer-hover-03: #5e5e5e,
@@ -303,7 +297,7 @@ $g90: (
   support-error: #ff8389,
   support-error-inverse: #da1e28,
   support-info: #4589ff,
-  support-info-inverse: #0f62fe,
+  support-info-inverse: #0043ce,
   support-success: #42be65,
   support-success-inverse: #24a148,
   support-warning: #f1c21b,
@@ -351,15 +345,14 @@ $g100: (
   field-01: #262626,
   field-02: #393939,
   field-03: #525252,
-  field-disabled: #393939,
   field-hover-01: #333333,
   field-hover-02: #474747,
   field-hover-03: #636363,
   focus: #ffffff,
   focus-inset: #161616,
   focus-inverse: #0f62fe,
-  highlight: #d0e2ff,
-  icon-disabled: #525252,
+  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),
@@ -381,7 +374,6 @@ $g100: (
   layer-active-01: #525252,
   layer-active-02: #6f6f6f,
   layer-active-03: #8d8d8d,
-  layer-disabled: #262626,
   layer-hover-01: #333333,
   layer-hover-02: #474747,
   layer-hover-03: #636363,
@@ -408,13 +400,13 @@ $g100: (
   support-error: #fa4d56,
   support-error-inverse: #da1e28,
   support-info: #4589ff,
-  support-info-inverse: #0f62fe,
+  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-error: #ff8389,
   text-helper: #a8a8a8,
   text-inverse: #161616,
   text-on-color: #ffffff,
@@ -422,7 +414,7 @@ $g100: (
   text-placeholder: rgba(244, 244, 244, 0.4),
   text-primary: #f4f4f4,
   text-secondary: #c6c6c6,
-  toggle-off: #8d8d8d,
+  toggle-off: #6f6f6f,
 ) !default;
 $g100: utilities.merge(
   $g100,

package/scss/themes/modules/generated/_tokens.scss

@@ -88,9 +88,6 @@ $layer-selected-03: _get('layer-selected-03') !default;
 /// The CSS Custom Property for the `layer-selected-hover-03` token
 $layer-selected-hover-03: _get('layer-selected-hover-03') !default;
 
-/// The CSS Custom Property for the `layer-disabled` token
-$layer-disabled: _get('layer-disabled') !default;
-
 /// The CSS Custom Property for the `layer-selected-inverse` token
 $layer-selected-inverse: _get('layer-selected-inverse') !default;
 
@@ -142,9 +139,6 @@ $field-03: _get('field-03') !default;
 /// The CSS Custom Property for the `field-hover-03` token
 $field-hover-03: _get('field-hover-03') !default;
 
-/// The CSS Custom Property for the `field-disabled` token
-$field-disabled: _get('field-disabled') !default;
-
 /// The CSS Custom Property for the `interactive` token
 $interactive: _get('interactive') !default;
 

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

@@ -125,7 +125,6 @@ Array [
   "field",
   "field01",
   "field02",
-  "fieldDisabled",
   "fieldHover",
   "fluid",
   "fluidDisplay01",
@@ -234,7 +233,6 @@ Array [
   "layerAccentActive",
   "layerAccentHover",
   "layerActive",
-  "layerDisabled",
   "layerHover",
   "layerSelected",
   "layerSelectedDisabled",