@carbon/styles 1.3.0 → 1.5.0-rc.0

package/index.scss

@@ -7,7 +7,6 @@
 
 @forward 'scss/config';
 @forward 'scss/colors' hide $white;
-@forward 'scss/grid';
 @forward 'scss/motion';
 @forward 'scss/type';
 @forward 'scss/themes';
@@ -15,6 +14,7 @@
 
 @use 'scss/reset';
 @forward 'scss/fonts';
+@forward 'scss/grid';
 @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": "1.3.0",
+  "version": "1.5.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -17,28 +17,39 @@
     "react"
   ],
   "files": [
+    "css",
     "scss",
     "index.scss"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "yarn clean && node tasks/build-css.js",
+    "clean": "rimraf css"
+  },
   "peerDependencies": {
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.2.0-rc.0",
-    "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^11.2.0-rc.0",
-    "@carbon/layout": "^11.2.0-rc.0",
-    "@carbon/motion": "^11.1.0-rc.0",
-    "@carbon/themes": "^11.3.0-rc.0",
-    "@carbon/type": "^11.3.0-rc.0",
+    "@carbon/colors": "^11.3.0-rc.0",
+    "@carbon/feature-flags": "^0.8.0-rc.0",
+    "@carbon/grid": "^11.3.0-rc.0",
+    "@carbon/layout": "^11.3.0-rc.0",
+    "@carbon/motion": "^11.2.0-rc.0",
+    "@carbon/themes": "^11.4.0-rc.0",
+    "@carbon/type": "^11.4.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.24.0-rc.0",
+    "@carbon/test-utils": "^10.25.0-rc.0",
+    "autoprefixer": "^10.4.7",
+    "browserslist-config-carbon": "^11.0.0",
     "css": "^3.0.0",
+    "cssnano": "^5.1.9",
+    "postcss": "^8.4.14",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "rimraf": "^3.0.2",
     "sass": "^1.51.0"
   },
   "sideEffects": [
@@ -46,5 +57,5 @@
     "scss/**/*.scss",
     "scss/**/*.css"
   ],
-  "gitHead": "df7ebd7676092998702f525cdef6d8d80c6ed9ad"
+  "gitHead": "a44075aa04612c5ddaf73953ca7ce14d1882a02c"
 }

package/scss/__tests__/type-test.js

@@ -27,19 +27,27 @@ describe('@carbon/styles/scss/type', () => {
           reset: meta.mixin-exists('reset', 'type'),
           type-style: meta.mixin-exists('type-style', 'type'),
           font-family: meta.mixin-exists('font-family', 'type'),
+          font-weight: meta.mixin-exists('font-family', 'type'),
           default-type: meta.mixin-exists('default-type', 'type'),
           type-classes: meta.mixin-exists('type-classes', 'type'),
         ),
+        functions: (
+          font-weight: meta.function-exists('font-family', 'type'),
+        ),
       ));
     `);
 
     const { value: api } = get('api');
+    expect(api.functions).toEqual({
+      'font-weight': true,
+    });
     expect(api.mixins).toEqual({
       reset: true,
       'type-style': true,
       'font-family': true,
       'default-type': true,
       'type-classes': true,
+      'font-weight': true,
     });
     expect(api.variables).toMatchInlineSnapshot(`
       Array [
@@ -73,6 +81,8 @@ describe('@carbon/styles/scss/type', () => {
         "display-02",
         "display-03",
         "display-04",
+        "font-families",
+        "font-weights",
         "tokens",
       ]
     `);

package/scss/_breakpoint.scss

@@ -6,5 +6,5 @@
 //
 
 @use './config';
-@forward '@carbon/grid/scss/breakpoint'
-  show breakpoint, breakpoint-between, breakpoint-down, breakpoint-up;
+@forward '@carbon/grid/scss/breakpoint' show breakpoint, breakpoint-between,
+  breakpoint-down, breakpoint-up;

package/scss/_config.scss

@@ -67,9 +67,8 @@ $flex-grid-columns: 16 !default;
 /// @group config
 $use-flexbox-grid: false !default;
 
-@forward '@carbon/grid/scss/config'
-  hide $prefix, $flex-grid-columns
-  with (
-  $prefix: $prefix,
-  $flex-grid-columns: $flex-grid-columns,
-);
+@forward '@carbon/grid/scss/config' hide $prefix,
+  $flex-grid-columns with (
+    $prefix: $prefix,
+    $flex-grid-columns: $flex-grid-columns
+  );

package/scss/_feature-flags.scss

@@ -11,5 +11,6 @@
     'enable-use-controlled-state-with-value': true,
     'enable-css-grid': true,
     'enable-v11-release': true,
-  ) !default
+  )
+  !default
 );

package/scss/_spacing.scss

@@ -5,23 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/layout/scss/spacing'
-show
-  $spacing,
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12,
-  $spacing-13,
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04;
+@forward '@carbon/layout/scss/spacing' show $spacing, $spacing-01, $spacing-02,
+  $spacing-03, $spacing-04, $spacing-05, $spacing-06, $spacing-07, $spacing-08,
+  $spacing-09, $spacing-10, $spacing-11, $spacing-12, $spacing-13,
+  $fluid-spacing-01, $fluid-spacing-02, $fluid-spacing-03, $fluid-spacing-04;

package/scss/components/checkbox/_checkbox.scss

@@ -123,8 +123,8 @@
   .#{$prefix}--checkbox:indeterminate + .#{$prefix}--checkbox-label::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='true']::before,
   .#{$prefix}--checkbox-label[data-contained-checkbox-state='mixed']::before {
+    border: none;
     border-width: 1px;
-    border-color: $icon-primary;
     background-color: $icon-primary;
   }
 
@@ -187,6 +187,9 @@
   //-----------------------------------------------
   // Skeleton
   //-----------------------------------------------
+  .#{$prefix}--checkbox-skeleton .#{$prefix}--checkbox-label {
+    cursor: default;
+  }
 
   .#{$prefix}--checkbox-label-text.#{$prefix}--skeleton {
     @include skeleton;

package/scss/components/copy-button/_copy-button.scss

@@ -67,6 +67,10 @@
       display: block;
     }
 
+    &.#{$prefix}--copy-btn--animating::before {
+      border: none;
+    }
+
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
       .#{$prefix}--copy-btn__feedback {

package/scss/components/link/_link.scss

@@ -97,11 +97,13 @@ $link-focus-text-color: custom-property.get-var(
     text-decoration: underline;
   }
 
-  .#{$prefix}--link--sm {
+  .#{$prefix}--link--sm,
+  .#{$prefix}--link--sm.#{$prefix}--link--disabled:hover {
     @include type.type-style('helper-text-01');
   }
 
-  .#{$prefix}--link--lg {
+  .#{$prefix}--link--lg,
+  .#{$prefix}--link--lg.#{$prefix}--link--disabled:hover {
     @include type.type-style('body-compact-02');
   }
 

package/scss/components/modal/_modal.scss

@@ -108,6 +108,10 @@
     @include breakpoint(xlg) {
       width: 48%;
     }
+
+    .#{$prefix}--modal-container-body {
+      display: contents;
+    }
   }
 
   // -----------------------------

package/scss/components/notification/_actionable-notification.scss

@@ -180,8 +180,6 @@
     }
   }
 
-  .#{$prefix}--actionable-notification--warning
-    .#{$prefix}--inline-notification__icon,
   .#{$prefix}--actionable-notification--warning
     .#{$prefix}--toast-notification__icon
     path[opacity='0'] {

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

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use 'mixins' as*;
+@use 'mixins' as *;
 @use 'tokens' as *;
 @use '../../breakpoint' as *;
 @use '../../colors' as *;

package/scss/components/notification/_tokens.scss

@@ -6,7 +6,7 @@
 //
 
 @use 'sass:color';
-@use "sass:map";
+@use 'sass:map';
 @use 'sass:list';
 @use '../../config';
 @use '../../colors';

package/scss/components/structured-list/_structured-list.scss

@@ -7,12 +7,12 @@
 
 @use '../../config' as *;
 @use '../../feature-flags' as *;
-@use "../../type" as *;
+@use '../../type' as *;
 @use '../../motion';
 @use '../../theme' as *;
-@use "../../utilities/focus-outline" as *;
-@use "../../utilities/skeleton" as *;
-@use "../../utilities/high-contrast-mode" as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/convert' as *;
 @use 'mixins' as *;
 
@@ -83,7 +83,7 @@
     display: table-row;
     border-bottom: 1px solid $border-subtle;
     transition: background-color motion.$duration-fast-02
-      motion(standard, productive);
+      motion.motion(standard, productive);
   }
 
   .#{$prefix}--structured-list--selection
@@ -162,7 +162,8 @@
       border-top: 1px solid $border-subtle;
     }
 
-    transition: color motion.$duration-fast-02 motion(standard, productive);
+    transition: color motion.$duration-fast-02
+      motion.motion(standard, productive);
   }
 
   .#{$prefix}--structured-list-content--nowrap {
@@ -172,7 +173,7 @@
   .#{$prefix}--structured-list-svg {
     display: inline-block;
     fill: transparent;
-    transition: all motion.$duration-fast-02 motion(standard, productive);
+    transition: all motion.$duration-fast-02 motion.motion(standard, productive);
     vertical-align: middle;
   }
 

package/scss/components/toggle/_toggle.scss

@@ -113,6 +113,8 @@
       position: absolute;
       top: rem(6px);
       right: rem(5px);
+      width: rem(6px);
+      height: rem(5px);
       fill: $support-success;
       visibility: hidden;
     }

package/scss/components/treeview/_treeview.scss

@@ -12,7 +12,7 @@
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
-@use "../../utilities/skeleton" as *;
+@use '../../utilities/skeleton' as *;
 
 /// Treeview styles
 /// @access public
@@ -20,154 +20,154 @@
 @mixin treeview {
   .#{$prefix}--tree {
     overflow: hidden;
+  }
 
-    .#{$prefix}--tree-node {
-      padding-left: $spacing-05;
-      background-color: $layer-01;
-      color: $text-secondary;
-
-      &:focus {
-        outline: none;
-      }
-    }
+  .#{$prefix}--tree-node {
+    padding-left: $spacing-05;
+    background-color: $layer-01;
+    color: $text-secondary;
 
-    .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
-      @include focus-outline('outline');
-    }
-
-    .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
+    &:focus {
       outline: none;
     }
+  }
 
-    .#{$prefix}--tree-node--disabled,
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
-    .#{$prefix}--tree-node--disabled
-      .#{$prefix}--tree-node__label:hover
-      .#{$prefix}--tree-node__label__details {
-      background-color: $field-01;
-      color: $text-disabled;
-    }
+  .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
+    @include focus-outline('outline');
+  }
 
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
-    .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
-    .#{$prefix}--tree-node--disabled
-      .#{$prefix}--tree-node__label:hover
-      .#{$prefix}--tree-parent-node__toggle-icon,
-    .#{$prefix}--tree-node--disabled
-      .#{$prefix}--tree-node__label:hover
-      .#{$prefix}--tree-node__icon {
-      fill: $icon-disabled;
-    }
+  .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
+    outline: none;
+  }
 
-    .#{$prefix}--tree-node--disabled,
-    .#{$prefix}--tree-node--disabled
-      .#{$prefix}--tree-parent-node__toggle-icon:hover {
-      cursor: not-allowed;
-    }
+  .#{$prefix}--tree-node--disabled,
+  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
+  .#{$prefix}--tree-node--disabled
+    .#{$prefix}--tree-node__label:hover
+    .#{$prefix}--tree-node__label__details {
+    background-color: $field-01;
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
+  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
+  .#{$prefix}--tree-node--disabled
+    .#{$prefix}--tree-node__label:hover
+    .#{$prefix}--tree-parent-node__toggle-icon,
+  .#{$prefix}--tree-node--disabled
+    .#{$prefix}--tree-node__label:hover
+    .#{$prefix}--tree-node__icon {
+    fill: $icon-disabled;
+  }
 
-    .#{$prefix}--tree-node__label {
-      @include type-style('body-compact-01');
+  .#{$prefix}--tree-node--disabled,
+  .#{$prefix}--tree-node--disabled
+    .#{$prefix}--tree-parent-node__toggle-icon:hover {
+    cursor: not-allowed;
+  }
 
-      display: flex;
-      min-height: rem(32px);
-      flex: 1;
-      align-items: center;
+  .#{$prefix}--tree-node__label {
+    @include type-style('body-compact-01');
 
-      &:hover {
-        background-color: $layer-hover-01;
-        color: $text-primary;
-      }
-    }
+    display: flex;
+    min-height: rem(32px);
+    flex: 1;
+    align-items: center;
 
-    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
+    &:hover {
+      background-color: $layer-hover-01;
       color: $text-primary;
     }
+  }
 
-    .#{$prefix}--tree-node__label:hover
-      .#{$prefix}--tree-parent-node__toggle-icon,
-    .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
-      fill: $icon-primary;
-    }
+  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
+    color: $text-primary;
+  }
 
-    .#{$prefix}--tree-leaf-node {
-      display: flex;
-      padding-left: $spacing-08;
-    }
+  .#{$prefix}--tree-node__label:hover
+    .#{$prefix}--tree-parent-node__toggle-icon,
+  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
+    fill: $icon-primary;
+  }
 
-    .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
-      padding-left: $spacing-07;
-    }
+  .#{$prefix}--tree-leaf-node {
+    display: flex;
+    padding-left: $spacing-08;
+  }
 
-    .#{$prefix}--tree-node__label__details {
-      display: flex;
-      align-items: center;
-    }
+  .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
+    padding-left: $spacing-07;
+  }
 
-    .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
-      margin-right: 0;
-    }
+  .#{$prefix}--tree-node__label__details {
+    display: flex;
+    align-items: center;
+  }
 
-    .#{$prefix}--tree-parent-node__toggle {
-      padding: 0;
-      border: 0;
-      margin-right: $spacing-03;
+  .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
+    margin-right: 0;
+  }
 
-      &:hover {
-        cursor: pointer;
-      }
+  .#{$prefix}--tree-parent-node__toggle {
+    padding: 0;
+    border: 0;
+    margin-right: $spacing-03;
 
-      &:focus {
-        outline: none;
-      }
+    &:hover {
+      cursor: pointer;
     }
 
-    .#{$prefix}--tree-parent-node__toggle-icon {
-      fill: $icon-secondary;
-      transform: rotate(-90deg);
-      transition: all $duration-fast-02 motion(standard, productive);
+    &:focus {
+      outline: none;
     }
+  }
 
-    .#{$prefix}--tree-parent-node__toggle-icon--expanded {
-      transform: rotate(0);
-    }
+  .#{$prefix}--tree-parent-node__toggle-icon {
+    fill: $icon-secondary;
+    transform: rotate(-90deg);
+    transition: all $duration-fast-02 motion(standard, productive);
+  }
 
-    .#{$prefix}--tree-node__icon {
-      min-width: 1rem;
-      min-height: 1rem;
-      margin-right: $spacing-03;
-      fill: $icon-secondary;
-    }
+  .#{$prefix}--tree-parent-node__toggle-icon--expanded {
+    transform: rotate(0);
+  }
 
-    .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
-      background-color: $layer-selected-01;
-      color: $text-primary;
+  .#{$prefix}--tree-node__icon {
+    min-width: 1rem;
+    min-height: 1rem;
+    margin-right: $spacing-03;
+    fill: $icon-secondary;
+  }
 
-      &:hover {
-        background-color: $layer-selected-hover-01;
-      }
-    }
+  .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
+    background-color: $layer-selected-01;
+    color: $text-primary;
 
-    .#{$prefix}--tree-node--selected
-      > .#{$prefix}--tree-node__label
-      .#{$prefix}--tree-parent-node__toggle-icon,
-    .#{$prefix}--tree-node--selected
-      > .#{$prefix}--tree-node__label
-      .#{$prefix}--tree-node__icon {
-      fill: $icon-primary;
+    &:hover {
+      background-color: $layer-selected-hover-01;
     }
+  }
+
+  .#{$prefix}--tree-node--selected
+    > .#{$prefix}--tree-node__label
+    .#{$prefix}--tree-parent-node__toggle-icon,
+  .#{$prefix}--tree-node--selected
+    > .#{$prefix}--tree-node__label
+    .#{$prefix}--tree-node__icon {
+    fill: $icon-primary;
+  }
 
-    .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
-      position: relative;
-
-      &::before {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: rem(4px);
-        height: 100%;
-        background-color: $interactive;
-        content: '';
-      }
+  .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
+    position: relative;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: rem(4px);
+      height: 100%;
+      background-color: $interactive;
+      content: '';
     }
   }
 

package/scss/fonts/README.md

@@ -25,7 +25,7 @@ Plex Sans, and IBM Plex Serif. To bring in additional fonts, you can include the
 @use '@carbon/styles/scss/fonts' with (
   $fonts: (
     IBM-Plex-Sans-Arabic: true,
-  ),
+  )
 );
 ```
 
@@ -35,7 +35,7 @@ You can also configure it to disable specific fonts:
 @use '@carbon/styles/scss/fonts' with (
   $fonts: (
     IBM-Plex-Sans: false,
-  ),
+  )
 );
 ```
 
@@ -44,7 +44,7 @@ in:
 
 ```scss
 @use '@carbon/styles/scss/config' with (
-  $css--font-face: false,
+  $css--font-face: false
 );
 ```
 
@@ -88,7 +88,7 @@ The `$font-path` options is available in `scss/config`:
 
 ```scss
 @use '@carbon/styles/scss/config' with (
-  $font-path: 'https://cdn.custom-font-path.com/fonts',
+  $font-path: 'https://cdn.custom-font-path.com/fonts'
 );
 ```
 

package/scss/grid/_index.scss

@@ -6,12 +6,8 @@
 //
 
 @use '../config';
-@forward '@carbon/grid' show
-  $grid-gutter,
-  $grid-gutter-condensed,
-  $grid-breakpoints,
-  flex-grid,
-  css-grid;
+@forward '@carbon/grid' show $grid-gutter, $grid-gutter-condensed,
+  $grid-breakpoints, flex-grid, css-grid;
 @use '@carbon/grid';
 
 @if config.$use-flexbox-grid == true {