@carbon/elements 10.32.0 → 10.34.0

package/scss/grid/_inlined/_mixins.scss

@@ -62,11 +62,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -117,17 +117,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {
@@ -266,11 +266,11 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    float: left;
     width: 1px;
     height: 0;
     margin-left: -1px;
     content: '';
+    float: left;
   }
 
   .#{$prefix}--aspect-ratio::after {

package/scss/grid/_mixins.scss

@@ -62,11 +62,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -117,17 +117,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {
@@ -266,11 +266,11 @@ $carbon--aspect-ratios: (
   }
 
   .#{$prefix}--aspect-ratio::before {
-    float: left;
     width: 1px;
     height: 0;
     margin-left: -1px;
     content: '';
+    float: left;
   }
 
   .#{$prefix}--aspect-ratio::after {

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

@@ -11,24 +11,24 @@
 
 @mixin css-grid() {
   display: grid;
+  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
+  margin-right: auto;
+  margin-left: auto;
+  column-gap: var(--cds-grid-gutter);
   grid-template-columns: repeat(
     var(--cds-grid-columns),
     minmax(0, var(--cds-grid-column-size))
   );
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
-  column-gap: var(--cds-grid-gutter);
 }
 
 @mixin subgrid() {
   display: grid;
+  column-gap: var(--cds-grid-gutter);
   grid-template-columns: repeat(
     var(--cds-grid-columns),
     minmax(0, var(--cds-grid-column-size))
   );
-  column-gap: var(--cds-grid-gutter);
 }
 
 :root {
@@ -68,19 +68,19 @@
 }
 
 .#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  margin-right: 0;
-  margin-left: 0;
   padding-right: 0;
   padding-left: 0;
+  margin-right: 0;
+  margin-left: 0;
 }
 
 .#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
   --cds-grid-gutter: 2rem;
 
-  margin-right: 0;
-  margin-left: 0;
   padding-right: calc(var(--cds-grid-gutter) / 2);
   padding-left: calc(var(--cds-grid-gutter) / 2);
+  margin-right: 0;
+  margin-left: 0;
 }
 
 // -----------------------------------------------------------------------------

package/scss/grid/modules/_mixins.scss

@@ -58,11 +58,11 @@
   } @else {
     // Explicitly include `display: block` to override
     display: block;
-    flex: 0 0 percentage($span / $columns);
     // Add a `max-width` to ensure content within each column does not blow out
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     max-width: percentage($span / $columns);
+    flex: 0 0 percentage($span / $columns);
   }
 }
 
@@ -113,17 +113,17 @@
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .#{$prefix}--col,
       .#{$prefix}--col#{$infix} {
+        max-width: 100%;
         flex-basis: 0;
         flex-grow: 1;
-        max-width: 100%;
       }
 
       .#{$prefix}--col--auto,
       .#{$prefix}--col#{$infix}--auto {
-        flex: 1 0 0%;
         width: auto;
         // Reset earlier grid tiers
         max-width: 100%;
+        flex: 1 0 0%;
       }
 
       @for $i from 0 through $columns {

package/scss/themes/generated/_mixins.scss

@@ -191,8 +191,11 @@
   $hover-field: map-get($theme, 'hover-field') !global;
   $danger: map-get($theme, 'danger') !global;
   $caption-01: map-get($theme, 'caption-01') !global;
+  $caption-02: map-get($theme, 'caption-02') !global;
   $label-01: map-get($theme, 'label-01') !global;
+  $label-02: map-get($theme, 'label-02') !global;
   $helper-text-01: map-get($theme, 'helper-text-01') !global;
+  $helper-text-02: map-get($theme, 'helper-text-02') !global;
   $body-short-01: map-get($theme, 'body-short-01') !global;
   $body-long-01: map-get($theme, 'body-long-01') !global;
   $body-short-02: map-get($theme, 'body-short-02') !global;
@@ -2493,11 +2496,26 @@
       @include custom-property('caption-01', map-get($theme, 'caption-01'));
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'caption-02',
+      $emit-difference
+    )
+    {
+      @include custom-property('caption-02', map-get($theme, 'caption-02'));
+    }
+
     @if should-emit($theme, $parent-carbon-theme, 'label-01', $emit-difference)
     {
       @include custom-property('label-01', map-get($theme, 'label-01'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'label-02', $emit-difference)
+    {
+      @include custom-property('label-02', map-get($theme, 'label-02'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -2511,6 +2529,19 @@
       );
     }
 
+    @if should-emit(
+      $theme,
+      $parent-carbon-theme,
+      'helper-text-02',
+      $emit-difference
+    )
+    {
+      @include custom-property(
+        'helper-text-02',
+        map-get($theme, 'helper-text-02')
+      );
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/themes/generated/_themes.scss

@@ -34,7 +34,7 @@ $carbon--theme--white: (
   inverse-01: #ffffff,
   inverse-02: #393939,
   support-01: #da1e28,
-  support-02: #24a148,
+  support-02: #198038,
   support-03: #f1c21b,
   support-04: #0043ce,
   inverse-support-01: #fa4d56,
@@ -99,7 +99,7 @@ $carbon--theme--white: (
   icon-on-color: #ffffff,
   icon-inverse: #ffffff,
   support-error: #da1e28,
-  support-success: #24a148,
+  support-success: #198038,
   support-warning: #f1c21b,
   support-info: #0043ce,
   support-error-inverse: #fa4d56,
@@ -159,17 +159,34 @@ $carbon--theme--white: (
     line-height: 1.34,
     letter-spacing: 0.32px,
   ),
+  caption-02: (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  ),
   label-01: (
     font-size: 0.75rem,
     font-weight: 400,
     line-height: 1.34,
     letter-spacing: 0.32px,
   ),
+  label-02: (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  ),
   helper-text-01: (
     font-size: 0.75rem,
     line-height: 1.34,
     letter-spacing: 0.32px,
   ),
+  helper-text-02: (
+    font-size: 0.875rem,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  ),
   body-short-01: (
     font-size: 0.875rem,
     font-weight: 400,
@@ -595,6 +612,140 @@ $carbon--theme--g10: map-merge(
   )
 ) !default;
 
+/// Carbon's g80 color theme
+/// @type Map
+/// @access public
+/// @group @carbon/themes
+$carbon--theme--g80: map-merge(
+  $carbon--theme--white,
+  (
+    background: #393939,
+    layer: #525252,
+    layer-accent: #6f6f6f,
+    field: #525252,
+    background-inverse: #f4f4f4,
+    interactive: #78a9ff,
+    border-subtle: #6f6f6f,
+    border-strong: #a8a8a8,
+    border-inverse: #f4f4f4,
+    border-interactive: #4589ff,
+    text-primary: #f4f4f4,
+    text-secondary: #c6c6c6,
+    text-placeholder: #6f6f6f,
+    text-helper: #a8a8a8,
+    text-error: #ffb3b8,
+    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,
+    button-separator: #161616,
+    background-active: #525252,
+    layer-active: #6f6f6f,
+    button-secondary-active: #525252,
+    button-tertiary-active: #c6c6c6,
+    focus: #ffffff,
+    focus-inset: #161616,
+    focus-inverse: #0f62fe,
+    highlight: #0043ce,
+    background-hover: #474747,
+    layer-hover: #636363,
+    field-hover: #636363,
+    background-inverse-hover: #e8e8e8,
+    link-primary-hover: #a6c8ff,
+    button-primary-hover: #0151e4,
+    button-secondary-hover: #5e5e5e,
+    button-tertiary-hover: #ffffff,
+    background-selected: #525252,
+    background-selected-hover: #636363,
+    layer-selected: #6f6f6f,
+    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,
+    icon-disabled: #8d8d8d,
+    text-on-color-disabled: #c6c6c6,
+    icon-on-color-disabled: #c6c6c6,
+    layer-selected-disabled: #c6c6c6,
+    skeleton-background: #474747,
+    skeleton-element: #6f6f6f,
+    interactive-02: #6f6f6f,
+    interactive-03: #ffffff,
+    interactive-04: #78a9ff,
+    ui-background: #393939,
+    ui-01: #525252,
+    ui-02: #525252,
+    ui-03: #6f6f6f,
+    ui-04: #a8a8a8,
+    ui-05: #f4f4f4,
+    text-01: #f4f4f4,
+    text-02: #c6c6c6,
+    text-03: #6f6f6f,
+    text-05: #a8a8a8,
+    icon-01: #f4f4f4,
+    icon-02: #c6c6c6,
+    link-01: #78a9ff,
+    link-02: #a6c8ff,
+    inverse-link: #0f62fe,
+    field-01: #525252,
+    field-02: #6f6f6f,
+    inverse-01: #161616,
+    inverse-02: #f4f4f4,
+    support-01: #ff8389,
+    support-02: #42be65,
+    support-04: #4589ff,
+    inverse-support-01: #da1e28,
+    inverse-support-02: #24a148,
+    inverse-support-04: #0f62fe,
+    overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
+    inverse-focus-ui: #0f62fe,
+    hover-primary: #0151e4,
+    hover-primary-text: #a6c8ff,
+    hover-secondary: #5e5e5e,
+    active-secondary: #525252,
+    hover-tertiary: #ffffff,
+    active-tertiary: #c6c6c6,
+    hover-ui: #474747,
+    hover-light-ui: #5e5e5e,
+    active-ui: #525252,
+    active-light-ui: #8d8d8d,
+    selected-ui: #525252,
+    selected-light-ui: #8d8d8d,
+    inverse-hover-ui: #e8e8e8,
+    hover-selected-ui: #616161,
+    hover-row: #636363,
+    visited-link: #be95ff,
+    disabled-01: #525252,
+    disabled-02: #8d8d8d,
+    disabled-03: #c6c6c6,
+    decorative-01: #6f6f6f,
+    skeleton-01: #474747,
+    skeleton-02: #6f6f6f,
+    brand-02: #6f6f6f,
+    brand-03: #ffffff,
+    active-01: #525252,
+    hover-field: #474747,
+  )
+) !default;
+
 /// Carbon's g90 color theme
 /// @type Map
 /// @access public
@@ -1882,18 +2033,36 @@ $carbon--theme: (
       $caption-01,
       map-get($carbon--theme--white, 'caption-01')
     ),
+  caption-02:
+    if(
+      global-variable-exists('caption-02'),
+      $caption-02,
+      map-get($carbon--theme--white, 'caption-02')
+    ),
   label-01:
     if(
       global-variable-exists('label-01'),
       $label-01,
       map-get($carbon--theme--white, 'label-01')
     ),
+  label-02:
+    if(
+      global-variable-exists('label-02'),
+      $label-02,
+      map-get($carbon--theme--white, 'label-02')
+    ),
   helper-text-01:
     if(
       global-variable-exists('helper-text-01'),
       $helper-text-01,
       map-get($carbon--theme--white, 'helper-text-01')
     ),
+  helper-text-02:
+    if(
+      global-variable-exists('helper-text-02'),
+      $helper-text-02,
+      map-get($carbon--theme--white, 'helper-text-02')
+    ),
   body-short-01:
     if(
       global-variable-exists('body-short-01'),

package/scss/themes/generated/_tokens.scss

@@ -308,7 +308,7 @@ $support-02: if(
   global-variable-exists('carbon--theme') and
     map-has-key($carbon--theme, 'support-02'),
   map-get($carbon--theme, 'support-02'),
-  #24a148
+  #198038
 ) !default;
 
 /// Warning
@@ -987,7 +987,7 @@ $support-success: if(
   global-variable-exists('carbon--theme') and
     map-has-key($carbon--theme, 'support-success'),
   map-get($carbon--theme, 'support-success'),
-  #24a148
+  #198038
 ) !default;
 
 /// @type {undefined}
@@ -1545,6 +1545,21 @@ $caption-01: if(
   )
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$caption-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'caption-02'),
+  map-get($carbon--theme, 'caption-02'),
+  (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  )
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes
@@ -1560,6 +1575,21 @@ $label-01: if(
   )
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$label-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'label-02'),
+  map-get($carbon--theme, 'label-02'),
+  (
+    font-size: 0.875rem,
+    font-weight: 400,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  )
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes
@@ -1574,6 +1604,20 @@ $helper-text-01: if(
   )
 ) !default;
 
+/// @type {Number}
+/// @access public
+/// @group @carbon/themes
+$helper-text-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'helper-text-02'),
+  map-get($carbon--theme, 'helper-text-02'),
+  (
+    font-size: 0.875rem,
+    line-height: 1.29,
+    letter-spacing: 0.32px,
+  )
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes

package/scss/themes/modules/_theme.scss

@@ -29,7 +29,7 @@ $-custom-property-prefix: 'cds';
 
 /// @access public
 /// @group @carbon/themes
-@mixin set($active-theme) {
+@mixin set-theme($active-theme) {
   $theme: $active-theme !global;
 }