@carbon/elements 10.39.0-rc.0 → 10.40.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.39.0-rc.0",
+  "version": "10.40.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,21 +35,21 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.29.0-rc.0",
-    "@carbon/grid": "^10.32.0-rc.0",
-    "@carbon/icons": "^10.36.0-rc.0",
+    "@carbon/colors": "^10.30.0",
+    "@carbon/grid": "^10.33.0",
+    "@carbon/icons": "^10.37.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.28.0-rc.0",
-    "@carbon/motion": "^10.21.0-rc.0",
-    "@carbon/themes": "^10.39.0-rc.0",
-    "@carbon/type": "^10.32.0-rc.0"
+    "@carbon/layout": "^10.29.0",
+    "@carbon/motion": "^10.22.0",
+    "@carbon/themes": "^10.40.0",
+    "@carbon/type": "^10.33.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.26.0-rc.0",
+    "@carbon/cli": "^10.27.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "e67704162819d0c37dd42be0d83d86bbb135e09f"
+  "gitHead": "9c2eb1cfa0e5b2c4dc0142b98cd8828e84640af8"
 }

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

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use "sass:math";
+
 @use 'sass:map';
 @use 'config' as *;
 @use 'breakpoint' as *;
@@ -110,7 +112,7 @@
 // Condensed
 // -----------------------------------------------------------------------------
 .#{$prefix}--css-grid--condensed {
-  --cds-grid-gutter: 2px;
+  --cds-grid-gutter: 1px;
 
   column-gap: var(--cds-grid-gutter);
   row-gap: var(--cds-grid-gutter);
@@ -411,7 +413,7 @@ $carbon--aspect-ratios: (
     $height: nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
-      padding-top: percentage($height / $width);
+      padding-top: percentage(math.div($height, $width));
     }
   }
 }

package/scss/grid/modules/_mixins.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use "sass:math";
+
 @use 'config' as *;
 @use 'breakpoint' as *;
 
@@ -27,21 +29,21 @@
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
   width: 100%;
-  padding-right: ($gutter / 2);
-  padding-left: ($gutter / 2);
+  padding-right: ($gutter * 0.5);
+  padding-left: ($gutter * 0.5);
 
   // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
   // side.
   .#{$prefix}--row--condensed &,
   .#{$prefix}--grid--condensed & {
-    padding-right: ($condensed-gutter / 2);
-    padding-left: ($condensed-gutter / 2);
+    padding-right: ($condensed-gutter * 0.5);
+    padding-left: ($condensed-gutter * 0.5);
   }
 
   // For our narrow use-case, our container hangs 16px into the gutter
   .#{$prefix}--row--narrow &,
   .#{$prefix}--grid--narrow & {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
     padding-left: 0;
   }
 }
@@ -61,8 +63,8 @@
     // 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);
+    max-width: percentage(math.div($span, $columns));
+    flex: 0 0 percentage(math.div($span, $columns));
   }
 }
 
@@ -72,7 +74,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-offset($span, $columns) {
-  $offset: $span / $columns;
+  $offset: math.div($span, $columns);
   @if $offset == 0 {
     margin-left: 0;
   } @else {
@@ -154,8 +156,8 @@
 @mixin make-row($gutter: $grid-gutter) {
   display: flex;
   flex-wrap: wrap;
-  margin-right: -1 * $gutter / 2;
-  margin-left: -1 * $gutter / 2;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
 }
 
 // -----------------------------------------------------------------------------
@@ -206,20 +208,20 @@
 /// @group @carbon/grid
 @mixin -hang($gutter: $grid-gutter) {
   .#{$prefix}--hang--start {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--end {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
   }
 
   // Deprecated ☠️
   .#{$prefix}--hang--left {
-    padding-left: ($gutter / 2);
+    padding-left: ($gutter * 0.5);
   }
 
   .#{$prefix}--hang--right {
-    padding-right: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
   }
 }
 
@@ -246,14 +248,14 @@
       $prev-margin: map-get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
-          padding-right: #{($grid-gutter / 2) + $margin};
-          padding-left: #{($grid-gutter / 2) + $margin};
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
         }
       }
     } @else {
       @include breakpoint($name) {
-        padding-right: #{($grid-gutter / 2) + $margin};
-        padding-left: #{($grid-gutter / 2) + $margin};
+        padding-right: #{($grid-gutter * 0.5) + $margin};
+        padding-left: #{($grid-gutter * 0.5) + $margin};
       }
     }
   }
@@ -308,13 +310,13 @@
 
   .#{$prefix}--row-padding [class*='#{$prefix}--col'],
   .#{$prefix}--col-padding {
-    padding-top: $grid-gutter / 2;
-    padding-bottom: $grid-gutter / 2;
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
   }
 
   .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
-    padding-top: $condensed-gutter / 2;
-    padding-bottom: $condensed-gutter / 2;
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
   }
 
   @include -make-grid-columns($breakpoints, $grid-gutter);

package/scss/themes/compat/_themes.scss

@@ -0,0 +1,8 @@
+//
+// 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/compat/_tokens.scss

@@ -0,0 +1,8 @@
+//
+// 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/compat/generated/_themes.scss

@@ -0,0 +1,271 @@
+// 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.
+//
+
+/// Token values for the white theme
+$white: (
+  interactive-01: #0f62fe,
+  interactive-02: #393939,
+  interactive-03: #0f62fe,
+  interactive-04: #0f62fe,
+  ui-background: #ffffff,
+  ui-01: #f4f4f4,
+  ui-02: #ffffff,
+  ui-03: #e0e0e0,
+  ui-04: #8d8d8d,
+  ui-05: #161616,
+  text-01: #161616,
+  text-02: #525252,
+  text-03: #a8a8a8,
+  text-04: #ffffff,
+  text-05: #6f6f6f,
+  icon-01: #161616,
+  icon-02: #525252,
+  icon-03: #ffffff,
+  link-01: #0f62fe,
+  link-02: #0043ce,
+  inverse-link: #78a9ff,
+  inverse-01: #ffffff,
+  inverse-02: #393939,
+  support-01: #da1e28,
+  support-02: #198038,
+  support-03: #f1c21b,
+  support-04: #0043ce,
+  inverse-support-01: #fa4d56,
+  inverse-support-02: #42be65,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #4589ff,
+  overlay-01: rgba(22, 22, 22, 0.5),
+  danger-01: #da1e28,
+  danger-02: #da1e28,
+  inverse-focus-ui: #ffffff,
+  hover-primary: #0353e9,
+  active-primary: #002d9c,
+  hover-primary-text: #0043ce,
+  hover-secondary: #4c4c4c,
+  active-secondary: #6f6f6f,
+  hover-tertiary: #0353e9,
+  active-tertiary: #002d9c,
+  hover-ui: #e5e5e5,
+  hover-light-ui: #e5e5e5,
+  active-ui: #c6c6c6,
+  active-light-ui: #c6c6c6,
+  selected-ui: #e0e0e0,
+  selected-light-ui: #e0e0e0,
+  inverse-hover-ui: #4c4c4c,
+  hover-selected-ui: #cacaca,
+  hover-danger: #b81921,
+  active-danger: #750e13,
+  hover-row: #e5e5e5,
+  visited-link: #8a3ffc,
+  disabled-01: #f4f4f4,
+  disabled-02: #c6c6c6,
+  disabled-03: #8d8d8d,
+  decorative-01: #e0e0e0,
+  button-separator: #e0e0e0,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #c6c6c6,
+  hover-field: #e5e5e5,
+) !default;
+
+/// Token values for the g10 theme
+$g10: (
+  interactive-01: #0f62fe,
+  interactive-02: #393939,
+  interactive-03: #0f62fe,
+  interactive-04: #0f62fe,
+  ui-background: #f4f4f4,
+  ui-01: #ffffff,
+  ui-02: #f4f4f4,
+  ui-03: #e0e0e0,
+  ui-04: #8d8d8d,
+  ui-05: #161616,
+  text-01: #161616,
+  text-02: #525252,
+  text-03: #a8a8a8,
+  text-04: #ffffff,
+  text-05: #6f6f6f,
+  icon-01: #161616,
+  icon-02: #525252,
+  icon-03: #ffffff,
+  link-01: #0f62fe,
+  link-02: #0043ce,
+  inverse-link: #78a9ff,
+  inverse-01: #ffffff,
+  inverse-02: #393939,
+  support-01: #da1e28,
+  support-02: #198038,
+  support-03: #f1c21b,
+  support-04: #0043ce,
+  inverse-support-01: #fa4d56,
+  inverse-support-02: #42be65,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #4589ff,
+  overlay-01: rgba(22, 22, 22, 0.5),
+  danger-01: #da1e28,
+  danger-02: #da1e28,
+  inverse-focus-ui: #ffffff,
+  hover-primary: #0353e9,
+  active-primary: #002d9c,
+  hover-primary-text: #0043ce,
+  hover-secondary: #4c4c4c,
+  active-secondary: #6f6f6f,
+  hover-tertiary: #0353e9,
+  active-tertiary: #002d9c,
+  hover-ui: #e5e5e5,
+  hover-light-ui: #e5e5e5,
+  active-ui: #c6c6c6,
+  active-light-ui: #c6c6c6,
+  selected-ui: #e0e0e0,
+  selected-light-ui: #e0e0e0,
+  inverse-hover-ui: #4c4c4c,
+  hover-selected-ui: #cacaca,
+  hover-danger: #b81921,
+  active-danger: #750e13,
+  hover-row: #e5e5e5,
+  visited-link: #8a3ffc,
+  disabled-01: #ffffff,
+  disabled-02: #c6c6c6,
+  disabled-03: #8d8d8d,
+  decorative-01: #e0e0e0,
+  button-separator: #e0e0e0,
+  skeleton-01: #e5e5e5,
+  skeleton-02: #c6c6c6,
+  hover-field: #e5e5e5,
+) !default;
+
+/// Token values for the g90 theme
+$g90: (
+  interactive-01: #0f62fe,
+  interactive-02: #6f6f6f,
+  interactive-03: #ffffff,
+  interactive-04: #4589ff,
+  ui-background: #262626,
+  ui-01: #393939,
+  ui-02: #525252,
+  ui-03: #525252,
+  ui-04: #8d8d8d,
+  ui-05: #f4f4f4,
+  text-01: #f4f4f4,
+  text-02: #c6c6c6,
+  text-03: #6f6f6f,
+  text-04: #ffffff,
+  text-05: #8d8d8d,
+  icon-01: #f4f4f4,
+  icon-02: #c6c6c6,
+  icon-03: #ffffff,
+  link-01: #78a9ff,
+  link-02: #a6c8ff,
+  inverse-link: #0f62fe,
+  inverse-01: #161616,
+  inverse-02: #f4f4f4,
+  support-01: #ff8389,
+  support-02: #42be65,
+  support-03: #f1c21b,
+  support-04: #4589ff,
+  inverse-support-01: #da1e28,
+  inverse-support-02: #24a148,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #0f62fe,
+  overlay-01: rgba(22, 22, 22, 0.7),
+  danger-01: #da1e28,
+  danger-02: #ff8389,
+  inverse-focus-ui: #0f62fe,
+  hover-primary: #0353e9,
+  active-primary: #002d9c,
+  hover-primary-text: #a6c8ff,
+  hover-secondary: #606060,
+  active-secondary: #393939,
+  hover-tertiary: #f4f4f4,
+  active-tertiary: #c6c6c6,
+  hover-ui: #4c4c4c,
+  hover-light-ui: #656565,
+  active-ui: #6f6f6f,
+  active-light-ui: #8d8d8d,
+  selected-ui: #525252,
+  selected-light-ui: #6f6f6f,
+  inverse-hover-ui: #e5e5e5,
+  hover-selected-ui: #656565,
+  hover-danger: #b81921,
+  active-danger: #750e13,
+  hover-row: #4c4c4c,
+  visited-link: #be95ff,
+  disabled-01: #393939,
+  disabled-02: #6f6f6f,
+  disabled-03: #a8a8a8,
+  decorative-01: #6f6f6f,
+  button-separator: #161616,
+  skeleton-01: #353535,
+  skeleton-02: #525252,
+  hover-field: #4c4c4c,
+) !default;
+
+/// Token values for the g100 theme
+$g100: (
+  interactive-01: #0f62fe,
+  interactive-02: #6f6f6f,
+  interactive-03: #ffffff,
+  interactive-04: #4589ff,
+  ui-background: #161616,
+  ui-01: #262626,
+  ui-02: #393939,
+  ui-03: #393939,
+  ui-04: #6f6f6f,
+  ui-05: #f4f4f4,
+  text-01: #f4f4f4,
+  text-02: #c6c6c6,
+  text-03: #6f6f6f,
+  text-04: #ffffff,
+  text-05: #8d8d8d,
+  icon-01: #f4f4f4,
+  icon-02: #c6c6c6,
+  icon-03: #ffffff,
+  link-01: #78a9ff,
+  link-02: #a6c8ff,
+  inverse-link: #0f62fe,
+  inverse-01: #161616,
+  inverse-02: #f4f4f4,
+  support-01: #fa4d56,
+  support-02: #42be65,
+  support-03: #f1c21b,
+  support-04: #4589ff,
+  inverse-support-01: #da1e28,
+  inverse-support-02: #24a148,
+  inverse-support-03: #f1c21b,
+  inverse-support-04: #0f62fe,
+  overlay-01: rgba(22, 22, 22, 0.7),
+  danger-01: #da1e28,
+  danger-02: #fa4d56,
+  inverse-focus-ui: #0f62fe,
+  hover-primary: #0353e9,
+  active-primary: #002d9c,
+  hover-primary-text: #a6c8ff,
+  hover-secondary: #606060,
+  active-secondary: #393939,
+  hover-tertiary: #f4f4f4,
+  active-tertiary: #c6c6c6,
+  hover-ui: #353535,
+  hover-light-ui: #4c4c4c,
+  active-ui: #525252,
+  active-light-ui: #6f6f6f,
+  selected-ui: #393939,
+  selected-light-ui: #525252,
+  inverse-hover-ui: #e5e5e5,
+  hover-selected-ui: #4c4c4c,
+  hover-danger: #b81921,
+  active-danger: #750e13,
+  hover-row: #353535,
+  visited-link: #be95ff,
+  disabled-01: #262626,
+  disabled-02: #525252,
+  disabled-03: #8d8d8d,
+  decorative-01: #525252,
+  button-separator: #161616,
+  skeleton-01: #353535,
+  skeleton-02: #525252,
+  hover-field: #353535,
+) !default;

package/scss/themes/compat/generated/_tokens.scss

@@ -0,0 +1,206 @@
+// 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 '../../modules/config';
+@use '../../modules/theme';
+
+/// Internal helper for generating CSS Custom Properties
+@function _get($token) {
+  @if config.$use-fallback-value == false {
+    @return var(--#{config.$prefix}-#{$token});
+  } @else {
+    @return var(--#{config.$prefix}-#{$token}, #{theme.get($token)});
+  }
+}
+
+/// CSS Custom Property for the interactive-01 token
+$interactive-01: _get('interactive-01') !default;
+
+/// CSS Custom Property for the interactive-02 token
+$interactive-02: _get('interactive-02') !default;
+
+/// CSS Custom Property for the interactive-03 token
+$interactive-03: _get('interactive-03') !default;
+
+/// CSS Custom Property for the interactive-04 token
+$interactive-04: _get('interactive-04') !default;
+
+/// CSS Custom Property for the ui-background token
+$ui-background: _get('ui-background') !default;
+
+/// CSS Custom Property for the ui-01 token
+$ui-01: _get('ui-01') !default;
+
+/// CSS Custom Property for the ui-02 token
+$ui-02: _get('ui-02') !default;
+
+/// CSS Custom Property for the ui-03 token
+$ui-03: _get('ui-03') !default;
+
+/// CSS Custom Property for the ui-04 token
+$ui-04: _get('ui-04') !default;
+
+/// CSS Custom Property for the ui-05 token
+$ui-05: _get('ui-05') !default;
+
+/// CSS Custom Property for the text-01 token
+$text-01: _get('text-01') !default;
+
+/// CSS Custom Property for the text-02 token
+$text-02: _get('text-02') !default;
+
+/// CSS Custom Property for the text-03 token
+$text-03: _get('text-03') !default;
+
+/// CSS Custom Property for the text-04 token
+$text-04: _get('text-04') !default;
+
+/// CSS Custom Property for the text-05 token
+$text-05: _get('text-05') !default;
+
+/// CSS Custom Property for the icon-01 token
+$icon-01: _get('icon-01') !default;
+
+/// CSS Custom Property for the icon-02 token
+$icon-02: _get('icon-02') !default;
+
+/// CSS Custom Property for the icon-03 token
+$icon-03: _get('icon-03') !default;
+
+/// CSS Custom Property for the link-01 token
+$link-01: _get('link-01') !default;
+
+/// CSS Custom Property for the link-02 token
+$link-02: _get('link-02') !default;
+
+/// CSS Custom Property for the inverse-link token
+$inverse-link: _get('inverse-link') !default;
+
+/// CSS Custom Property for the inverse-01 token
+$inverse-01: _get('inverse-01') !default;
+
+/// CSS Custom Property for the inverse-02 token
+$inverse-02: _get('inverse-02') !default;
+
+/// CSS Custom Property for the support-01 token
+$support-01: _get('support-01') !default;
+
+/// CSS Custom Property for the support-02 token
+$support-02: _get('support-02') !default;
+
+/// CSS Custom Property for the support-03 token
+$support-03: _get('support-03') !default;
+
+/// CSS Custom Property for the support-04 token
+$support-04: _get('support-04') !default;
+
+/// CSS Custom Property for the inverse-support-01 token
+$inverse-support-01: _get('inverse-support-01') !default;
+
+/// CSS Custom Property for the inverse-support-02 token
+$inverse-support-02: _get('inverse-support-02') !default;
+
+/// CSS Custom Property for the inverse-support-03 token
+$inverse-support-03: _get('inverse-support-03') !default;
+
+/// CSS Custom Property for the inverse-support-04 token
+$inverse-support-04: _get('inverse-support-04') !default;
+
+/// CSS Custom Property for the overlay-01 token
+$overlay-01: _get('overlay-01') !default;
+
+/// CSS Custom Property for the danger-01 token
+$danger-01: _get('danger-01') !default;
+
+/// CSS Custom Property for the danger-02 token
+$danger-02: _get('danger-02') !default;
+
+/// CSS Custom Property for the inverse-focus-ui token
+$inverse-focus-ui: _get('inverse-focus-ui') !default;
+
+/// CSS Custom Property for the hover-primary token
+$hover-primary: _get('hover-primary') !default;
+
+/// CSS Custom Property for the active-primary token
+$active-primary: _get('active-primary') !default;
+
+/// CSS Custom Property for the hover-primary-text token
+$hover-primary-text: _get('hover-primary-text') !default;
+
+/// CSS Custom Property for the hover-secondary token
+$hover-secondary: _get('hover-secondary') !default;
+
+/// CSS Custom Property for the active-secondary token
+$active-secondary: _get('active-secondary') !default;
+
+/// CSS Custom Property for the hover-tertiary token
+$hover-tertiary: _get('hover-tertiary') !default;
+
+/// CSS Custom Property for the active-tertiary token
+$active-tertiary: _get('active-tertiary') !default;
+
+/// CSS Custom Property for the hover-ui token
+$hover-ui: _get('hover-ui') !default;
+
+/// CSS Custom Property for the hover-light-ui token
+$hover-light-ui: _get('hover-light-ui') !default;
+
+/// CSS Custom Property for the hover-selected-ui token
+$hover-selected-ui: _get('hover-selected-ui') !default;
+
+/// CSS Custom Property for the active-ui token
+$active-ui: _get('active-ui') !default;
+
+/// CSS Custom Property for the active-light-ui token
+$active-light-ui: _get('active-light-ui') !default;
+
+/// CSS Custom Property for the selected-ui token
+$selected-ui: _get('selected-ui') !default;
+
+/// CSS Custom Property for the selected-light-ui token
+$selected-light-ui: _get('selected-light-ui') !default;
+
+/// CSS Custom Property for the inverse-hover-ui token
+$inverse-hover-ui: _get('inverse-hover-ui') !default;
+
+/// CSS Custom Property for the hover-danger token
+$hover-danger: _get('hover-danger') !default;
+
+/// CSS Custom Property for the active-danger token
+$active-danger: _get('active-danger') !default;
+
+/// CSS Custom Property for the hover-row token
+$hover-row: _get('hover-row') !default;
+
+/// CSS Custom Property for the visited-link token
+$visited-link: _get('visited-link') !default;
+
+/// CSS Custom Property for the disabled-01 token
+$disabled-01: _get('disabled-01') !default;
+
+/// CSS Custom Property for the disabled-02 token
+$disabled-02: _get('disabled-02') !default;
+
+/// CSS Custom Property for the disabled-03 token
+$disabled-03: _get('disabled-03') !default;
+
+/// CSS Custom Property for the decorative-01 token
+$decorative-01: _get('decorative-01') !default;
+
+/// CSS Custom Property for the button-separator token
+$button-separator: _get('button-separator') !default;
+
+/// CSS Custom Property for the skeleton-01 token
+$skeleton-01: _get('skeleton-01') !default;
+
+/// CSS Custom Property for the skeleton-02 token
+$skeleton-02: _get('skeleton-02') !default;
+
+/// CSS Custom Property for the hover-field token
+$hover-field: _get('hover-field') !default;

package/scss/themes/modules/_config.scss

@@ -6,3 +6,6 @@
 //
 
 $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/_themes.scss

@@ -6,4 +6,3 @@
 //
 
 @forward 'generated/themes';
-@use 'generated/themes';

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

@@ -10,12 +10,9 @@
 @use '../config';
 @use '../theme';
 
-/// Specify if a fallback value should be provided for the CSS Custom Property
-$use-fallback-value: false !default;
-
 /// Internal helper for generating CSS Custom Properties
 @function _get($token) {
-  @if $use-fallback-value == false {
+  @if config.$use-fallback-value == false {
     @return var(--#{config.$prefix}-#{$token});
   } @else {
     @return var(--#{config.$prefix}-#{$token}, #{theme.get($token)});

package/scss/type/modules/_font-family.scss

@@ -13,16 +13,44 @@
 $font-families: (
   'mono':
     unquote(
-      "'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace"
+      "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
+    ),
+  'sans':
+    unquote(
+      "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
-  'sans': unquote("'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif"),
   'sans-condensed':
-    unquote("'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif"),
+    unquote(
+      "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-arabic':
+    unquote(
+      "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-devanagari':
+    unquote(
+      "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
   'sans-hebrew':
     unquote(
-      "'IBM Plex Sans Hebrew', 'Helvetica Hebrew', 'Arial Hebrew', sans-serif"
+      "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-jp':
+    unquote(
+      "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-kr':
+    unquote(
+      "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'sans-thai':
+    unquote(
+      "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
+    ),
+  'serif':
+    unquote(
+      "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
     ),
-  'serif': unquote("'IBM Plex Serif', 'Georgia', Times, serif"),
 ) !default;
 
 /// Get the font-family for an IBM Plex font