@carbon/styles 0.11.0-rc.0 → 0.13.0-rc.0

package/index.scss

@@ -15,4 +15,6 @@
 
 @use 'scss/reset';
 @forward 'scss/fonts';
+@forward 'scss/layer';
+@forward 'scss/zone';
 @use 'scss/components';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.11.0-rc.0",
+  "version": "0.13.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.34.0",
-    "@carbon/feature-flags": "^0.6.0",
-    "@carbon/grid": "^10.39.0",
-    "@carbon/layout": "^10.34.0",
-    "@carbon/motion": "^10.26.0",
-    "@carbon/themes": "^10.48.0-rc.0",
-    "@carbon/type": "^10.39.0-rc.0",
+    "@carbon/colors": "^10.35.0",
+    "@carbon/feature-flags": "^0.7.0",
+    "@carbon/grid": "^10.40.0",
+    "@carbon/layout": "^10.35.0",
+    "@carbon/motion": "^10.27.0",
+    "@carbon/themes": "^10.49.0",
+    "@carbon/type": "^10.40.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.20.0",
+    "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "f6e5dd2362aa2970add45c7fb7fc32841c252671"
+  "gitHead": "885c987334058efa5ba30582d615c04de2e631a4"
 }

package/scss/_config.scss

@@ -36,6 +36,12 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
+/// Specify if IBM Plex should be provided by Google Fonts
+/// @access public
+/// @type String
+/// @group config
+$use-google-fonts: false !default;
+
 /// The value used to prefix selectors and CSS Custom Properties across the
 /// codebase
 /// @access public

package/scss/_layer.scss

@@ -0,0 +1,112 @@
+//
+// Copyright IBM Corp. 2021
+//
+// 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:list';
+@use 'sass:map';
+@use './config' as *;
+@use './theme';
+@use './utilities/custom-property';
+
+$-default-layer-sets: (
+  layer: (
+    theme.$layer-01,
+    theme.$layer-02,
+    theme.$layer-03,
+  ),
+  layer-active: (
+    theme.$layer-active-01,
+    theme.$layer-active-02,
+    theme.$layer-active-03,
+  ),
+  layer-hover: (
+    theme.$layer-hover-01,
+    theme.$layer-hover-02,
+    theme.$layer-hover-03,
+  ),
+  layer-selected: (
+    theme.$layer-selected-01,
+    theme.$layer-selected-02,
+    theme.$layer-selected-03,
+  ),
+  layer-selected-hover: (
+    theme.$layer-selected-hover-01,
+    theme.$layer-selected-hover-02,
+    theme.$layer-selected-hover-03,
+  ),
+  layer-accent: (
+    theme.$layer-accent-01,
+    theme.$layer-accent-02,
+    theme.$layer-accent-03,
+  ),
+  layer-accent-hover: (
+    theme.$layer-accent-hover-01,
+    theme.$layer-accent-hover-02,
+    theme.$layer-accent-hover-03,
+  ),
+  layer-accent-active: (
+    theme.$layer-accent-active-01,
+    theme.$layer-accent-active-02,
+    theme.$layer-accent-active-03,
+  ),
+  field: (
+    theme.$field-01,
+    theme.$field-02,
+    theme.$field-03,
+  ),
+  field-hover: (
+    theme.$field-hover-01,
+    theme.$field-hover-02,
+    theme.$field-hover-03,
+  ),
+  border-subtle: (
+    theme.$border-subtle-01,
+    theme.$border-subtle-02,
+    theme.$border-subtle-03,
+  ),
+  border-subtle-selected: (
+    theme.$border-subtle-selected-01,
+    theme.$border-subtle-selected-02,
+    theme.$border-subtle-selected-03,
+  ),
+  border-strong: (
+    theme.$border-strong-01,
+    theme.$border-strong-02,
+    theme.$border-strong-03,
+  ),
+);
+
+/// Define a map of layer sets, each set should have values for each layer in
+/// the application. The key of this map is used for the CSS Custom Property
+/// name whose value is updated as more layers are added.
+/// @type {Map}
+$layer-sets: () !default;
+$layer-sets: map.deep-merge($-default-layer-sets, $layer-sets);
+
+/// Emit the layer tokens defined in $layer-sets for the given $level
+/// @param {Number} $level
+@mixin -emit-layer-tokens($level) {
+  @each $key, $layer-set in $layer-sets {
+    $value: list.nth($layer-set, $level);
+    @include custom-property.declaration($key, $value);
+  }
+}
+
+:root {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer-one {
+  @include -emit-layer-tokens(1);
+}
+
+.#{$prefix}--layer-two {
+  @include -emit-layer-tokens(2);
+}
+
+.#{$prefix}--layer-three {
+  @include -emit-layer-tokens(3);
+}

package/scss/_theme.scss

@@ -19,75 +19,6 @@
 @forward '@carbon/themes/scss/modules/tokens';
 @use '@carbon/themes/scss/modules/tokens';
 @use './utilities/custom-property';
-@use './utilities/layer-set' with (
-  $layer-sets: (
-    layer: (
-      tokens.$layer-01,
-      tokens.$layer-02,
-      tokens.$layer-03,
-    ),
-    layer-active: (
-      tokens.$layer-active-01,
-      tokens.$layer-active-02,
-      tokens.$layer-active-03,
-    ),
-    layer-hover: (
-      tokens.$layer-hover-01,
-      tokens.$layer-hover-02,
-      tokens.$layer-hover-03,
-    ),
-    layer-selected: (
-      tokens.$layer-selected-01,
-      tokens.$layer-selected-02,
-      tokens.$layer-selected-03,
-    ),
-    layer-selected-hover: (
-      tokens.$layer-selected-hover-01,
-      tokens.$layer-selected-hover-02,
-      tokens.$layer-selected-hover-03,
-    ),
-    layer-accent: (
-      tokens.$layer-accent-01,
-      tokens.$layer-accent-02,
-      tokens.$layer-accent-03,
-    ),
-    layer-accent-hover: (
-      tokens.$layer-accent-hover-01,
-      tokens.$layer-accent-hover-02,
-      tokens.$layer-accent-hover-03,
-    ),
-    layer-accent-active: (
-      tokens.$layer-accent-active-01,
-      tokens.$layer-accent-active-02,
-      tokens.$layer-accent-active-03,
-    ),
-    field: (
-      tokens.$field-01,
-      tokens.$field-02,
-      tokens.$field-03,
-    ),
-    field-hover: (
-      tokens.$field-hover-01,
-      tokens.$field-hover-02,
-      tokens.$field-hover-03,
-    ),
-    border-subtle: (
-      tokens.$border-subtle-01,
-      tokens.$border-subtle-02,
-      tokens.$border-subtle-03,
-    ),
-    border-subtle-selected: (
-      tokens.$border-subtle-selected-01,
-      tokens.$border-subtle-selected-02,
-      tokens.$border-subtle-selected-03,
-    ),
-    border-strong: (
-      tokens.$border-strong-01,
-      tokens.$border-strong-02,
-      tokens.$border-strong-03,
-    ),
-  ),
-);
 
 // Layer sets
 $layer: custom-property.get-var('layer');

package/scss/_type.scss

@@ -12,6 +12,7 @@
   type-style,
   font-family,
   default-type,
+  type-classes,
 
   // Variables
   $caption-01,

package/scss/_zone.scss

@@ -10,6 +10,8 @@
 @use './config';
 @use './themes';
 @use './theme';
+// Inline themes depend on layer styles to property reset the layer level
+@use './layer';
 @use './utilities/custom-property';
 
 /// Specify a Map of zones where the key will be used as part of the selector

package/scss/components/_index.scss

@@ -51,6 +51,7 @@
 @use 'text-input';
 @use 'tile';
 @use 'time-picker';
+@use 'toggletip';
 @use 'toggle';
 @use 'tooltip';
 @use 'treeview';

package/scss/components/button/_mixins.scss

@@ -13,8 +13,11 @@
 @use '../../type' as *;
 @use '../../utilities/component-reset';
 @use '../../utilities/convert' as *;
+@use '../../utilities/custom-property';
 @use 'tokens' as *;
 
+$button-focus-color: custom-property.get-var('button-focus-color', $focus);
+
 @mixin button-base {
   @include component-reset.reset;
   @include type-style('body-short-01');
@@ -84,8 +87,8 @@
   }
 
   &:focus {
-    border-color: $focus;
-    box-shadow: inset 0 0 0 $button-outline-width $focus,
+    border-color: $button-focus-color;
+    box-shadow: inset 0 0 0 $button-outline-width $button-focus-color,
       inset 0 0 0 $button-border-width $background;
   }
 

package/scss/components/button/_tokens.scss

@@ -330,11 +330,11 @@ $button-disabled: (
     ),
     (
       theme: themes.$g90,
-      value: #6f6f6f,
+      value: rgba(141, 141, 141, 0.3),
     ),
     (
       theme: themes.$g100,
-      value: #525252,
+      value: rgba(141, 141, 141, 0.3),
     ),
   ),
 ) !default;

package/scss/components/date-picker/_date-picker.scss

@@ -141,8 +141,8 @@
     // vertically center icon within parent container on IE11
     top: 50%;
     right: 1rem;
-    cursor: pointer;
     fill: $icon-primary;
+    pointer-events: none;
     transform: translateY(-50%);
   }
 

package/scss/components/date-picker/_flatpickr.scss

@@ -219,6 +219,7 @@
     text-decoration: none;
     transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'};
     transition: background-color $duration-fast-01 motion(standard, productive);
+    user-select: none;
     // Windows HCM fix
     @include high-contrast-mode('icon-fill');
 

package/scss/components/link/_link.scss

@@ -11,8 +11,19 @@
 @use '../../theme' as *;
 @use '../../type';
 @use '../../utilities/component-reset';
+@use '../../utilities/custom-property';
 @use '../../utilities/focus-outline' as *;
 
+$link-text-color: custom-property.get-var('link-text-color', $link-primary);
+$link-hover-text-color: custom-property.get-var(
+  'link-hover-text-color',
+  $link-primary-hover
+);
+$link-focus-text-color: custom-property.get-var(
+  'link-focus-text-color',
+  $focus
+);
+
 /// Link styles
 /// @access public
 /// @group link
@@ -22,13 +33,13 @@
     @include type.type-style('body-short-01');
 
     display: inline-flex;
-    color: $link-primary;
+    color: $link-text-color;
     outline: none;
     text-decoration: none;
     transition: color $duration-fast-01 motion(standard, productive);
 
     &:hover {
-      color: $link-primary-hover;
+      color: $link-hover-text-color;
       text-decoration: underline;
     }
 
@@ -41,6 +52,8 @@
 
     &:focus {
       @include focus-outline;
+
+      outline-color: $link-focus-text-color;
     }
 
     &:visited {

package/scss/components/notification/_inline-notification.scss

@@ -324,5 +324,8 @@
   .#{$prefix}--inline-notification__icon {
     @include high-contrast-mode('icon-fill');
   }
+  .#{$prefix}--inline-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   /* stylelint-enable */
 }

package/scss/components/notification/_toast-notification.scss

@@ -255,6 +255,9 @@
   .#{$prefix}--toast-notification__close-button:focus {
     @include high-contrast-mode('focus');
   }
+  .#{$prefix}--toast-notification__close-icon {
+    @include high-contrast-mode('icon-fill');
+  }
   .#{$prefix}--toast-notification__icon {
     @include high-contrast-mode('icon-fill');
   }

package/scss/components/select/_select.scss

@@ -214,6 +214,11 @@
     color: $text-primary;
   }
 
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus option,
+  .#{$prefix}--select--inline .#{$prefix}--select-input:focus optgroup {
+    background-color: $background;
+  }
+
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled],
   .#{$prefix}--select--inline .#{$prefix}--select-input[disabled]:hover {
     background-color: $field-disabled;