@carbon/styles 0.16.2 → 1.0.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.16.2",
+  "version": "1.0.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -24,22 +24,27 @@
     "access": "public"
   },
   "peerDependencies": {
-    "sass": "^1.32.12"
+    "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^10.37.1",
+    "@carbon/colors": "^11.0.0-rc.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.43.1",
-    "@carbon/layout": "^10.37.1",
-    "@carbon/motion": "^10.29.0",
-    "@carbon/themes": "^10.53.2",
-    "@carbon/type": "^10.43.2",
+    "@carbon/grid": "^11.0.0-rc.0",
+    "@carbon/layout": "^11.0.0-rc.0",
+    "@carbon/motion": "^11.0.0-rc.0",
+    "@carbon/themes": "^11.0.0-rc.0",
+    "@carbon/type": "^11.0.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.21.1",
+    "@carbon/test-utils": "^10.22.0-rc.0",
     "css": "^3.0.0",
     "sass": "^1.45.0"
   },
-  "gitHead": "9b11eecab91c41ae4ffda711c5e1f631f2fb33db"
+  "sideEffects": [
+    "index.scss",
+    "scss/**/*.scss",
+    "scss/**/*.css"
+  ],
+  "gitHead": "e4894776a4996c10bfc8f9a724532a25966aa622"
 }

package/scss/__tests__/__snapshots__/config-test.js.snap

@@ -8,8 +8,37 @@ Object {
   "flex-grid-columns": 16,
   "font-display": "swap",
   "font-path": "~@ibm/plex",
+  "grid-breakpoints": Object {
+    "lg": Object {
+      "columns": 16,
+      "margin": "1rem",
+      "width": "66rem",
+    },
+    "max": Object {
+      "columns": 16,
+      "margin": "1.5rem",
+      "width": "99rem",
+    },
+    "md": Object {
+      "columns": 8,
+      "margin": "1rem",
+      "width": "42rem",
+    },
+    "sm": Object {
+      "columns": 4,
+      "margin": 0,
+      "width": "20rem",
+    },
+    "xlg": Object {
+      "columns": 16,
+      "margin": "1rem",
+      "width": "82rem",
+    },
+  },
+  "grid-gutter": "2rem",
+  "grid-gutter-condensed": "0.0625rem",
   "prefix": "cds",
+  "use-akamai-cdn": false,
   "use-flexbox-grid": false,
-  "use-google-fonts": false,
 }
 `;

package/scss/__tests__/type-test.js

@@ -40,7 +40,6 @@ describe('@carbon/styles/scss/type', () => {
     });
     expect(api.variables).toMatchInlineSnapshot(`
       Array [
-        "caption-01",
         "label-01",
         "helper-text-01",
         "body-short-01",

package/scss/_breakpoint.scss

@@ -5,5 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/grid/scss/modules/breakpoint'
+@use './config';
+@forward '@carbon/grid/scss/breakpoint'
   show breakpoint, breakpoint-between, breakpoint-down, breakpoint-up;

package/scss/_config.scss

@@ -36,11 +36,11 @@ $font-display: 'swap' !default;
 /// @group config
 $font-path: '~@ibm/plex' !default;
 
-/// Specify if IBM Plex should be provided by Google Fonts
+/// Specify if IBM Plex should be provided by the IBM Akamai CDN
 /// @access public
 /// @type String
 /// @group config
-$use-google-fonts: false !default;
+$use-akamai-cdn: false !default;
 
 /// The value used to prefix selectors and CSS Custom Properties across the
 /// codebase
@@ -59,3 +59,10 @@ $flex-grid-columns: 16 !default;
 /// @type Boolean
 /// @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,
+);

package/scss/_spacing.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/layout/scss/modules/spacing'
+@forward '@carbon/layout/scss/spacing'
 show
   $spacing,
   $spacing-01,

package/scss/_theme.scss

@@ -6,18 +6,18 @@
 //
 
 @use './config' as *;
-@use '@carbon/themes/scss/modules/config' with (
+@use '@carbon/themes/scss/config' with (
   $prefix: $prefix,
 );
 @use './compat/themes' as compat;
 @use './themes';
 
-@forward '@carbon/themes/scss/modules/theme' with (
+@forward '@carbon/themes/scss/theme' with (
   $fallback: themes.$white !default,
   $theme: compat.$white !default,
 );
-@forward '@carbon/themes/scss/modules/tokens';
-@use '@carbon/themes/scss/modules/tokens';
+@forward '@carbon/themes/scss/tokens';
+@use '@carbon/themes/scss/tokens';
 @use './utilities/custom-property';
 
 // Layer sets

package/scss/_themes.scss

@@ -5,4 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/themes/scss/modules/themes' show $white, $g10, $g90, $g100;
+@use './config';
+@forward '@carbon/themes/scss/themes' show $white, $g10, $g90, $g100;

package/scss/components/accordion/_accordion.scss

@@ -5,8 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../breakpoint' as *;
 @use '../../config' as *;
+@use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../theme' as *;
 @use '../../spacing' as *;

package/scss/components/aspect-ratio/_aspect-ratio.scss

@@ -15,7 +15,7 @@
 /// @type List
 /// @access public
 /// @group @carbon/grid
-$carbon--aspect-ratios: (
+$aspect-ratios: (
   (16, 9),
   (9, 16),
   (2, 1),
@@ -39,7 +39,7 @@ $carbon--aspect-ratios: (
 /// @param {Number} $height height from an aspect ratio
 /// @access private
 /// @group @carbon/grid
-@mixin aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+@mixin aspect-ratio($aspect-ratios: $aspect-ratios) {
   .#{$prefix}--aspect-ratio {
     position: relative;
   }

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -5,8 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../../breakpoint' as *;
 @use '../../config' as *;
+@use '../../breakpoint' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;

package/scss/components/button/_button.scss

@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use '../../config' as *;
 @use 'vars' as *;
 @use 'mixins' as *;
-@use '../../config' as *;
 @use '../../spacing' as *;
 @use '../../theme' as *;
 @use '../../type' as *;
@@ -219,8 +219,6 @@
       color: $text-on-color;
     }
 
-    // TODO: deprecate single dash tertiary
-    &-tertiary,
     &--tertiary {
       @include button-theme(
         transparent,
@@ -259,8 +257,6 @@
       }
     }
 
-    // TODO: deprecate single dash ghost
-    &-ghost,
     &--ghost {
       @include button-theme(
         transparent,

package/scss/components/button/_tokens.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'sass:map';
+@use '../../config';
 @use '../../themes';
 @use '../../utilities/component-tokens';
 

package/scss/components/code-snippet/_code-snippet.scss

@@ -67,7 +67,7 @@ $copy-btn-feedback: $background-inverse !default;
     position: relative;
     display: inline;
     padding: 0;
-    border: 2px solid transparent;
+    border: 1px solid transparent;
     background-color: $layer;
     border-radius: 4px;
     color: $text-primary;
@@ -82,7 +82,7 @@ $copy-btn-feedback: $background-inverse !default;
     }
 
     &:focus {
-      border: 2px solid $focus;
+      border: 1px solid $focus;
       outline: none;
     }
 
@@ -90,6 +90,8 @@ $copy-btn-feedback: $background-inverse !default;
       @include tooltip--caret;
 
       display: none;
+
+      border: none;
     }
 
     .#{$prefix}--copy-btn__feedback {
@@ -101,8 +103,6 @@ $copy-btn-feedback: $background-inverse !default;
       margin: auto;
       clip: auto;
     }
-
-    @include tooltip--placement('icon', 'bottom', 'center');
   }
 
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating::before,
@@ -257,12 +257,9 @@ $copy-btn-feedback: $background-inverse !default;
     transition: all $duration-fast-01 motion(standard, productive);
   }
 
-  .#{$prefix}--snippet-button {
+  .#{$prefix}--copy-btn {
     @include reset;
 
-    position: absolute;
-    top: 0;
-    right: 0;
     display: flex;
     overflow: visible;
     width: $spacing-08;
@@ -282,48 +279,44 @@ $copy-btn-feedback: $background-inverse !default;
     }
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--snippet-button {
-    top: $spacing-03;
-    right: $spacing-03;
-    width: $spacing-07;
-    height: $spacing-07;
-  }
+  // TODO: remove copy button styles above
+  .#{$prefix}--snippet .#{$prefix}--popover-container {
+    @include font-family('sans');
 
-  .#{$prefix}--snippet-button:hover {
-    background: $layer-hover;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 
-  .#{$prefix}--snippet-button:active {
-    background-color: $copy-active;
+  // Overrides for codesnippet copy btn
+  // TLDR: Copy/CopyButton now uses IconButton, which uses Carbon buttons under the hood
+  // v10 opy just used native html button so it didn't have extra carbon styles that needed overriding
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--md.#{$prefix}--btn--icon-only {
+    padding-right: 0;
+    padding-left: 0;
   }
 
-  .#{$prefix}--btn--copy__feedback {
-    @include type-style('body-compact-01');
-    @include font-family('sans');
-
-    z-index: z('overlay');
-    top: 0.75rem;
-    right: 1.25rem;
-    left: inherit;
-    font-weight: 400;
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--md {
+    min-height: 1.25rem;
   }
 
-  .#{$prefix}--btn--copy__feedback::before,
-  .#{$prefix}--btn--copy__feedback::after {
-    background: $copy-btn-feedback;
+  .#{$prefix}--snippet--inline.#{$prefix}--btn--primary:hover {
+    color: $text-primary;
   }
 
-  .#{$prefix}--btn--copy__feedback::after {
-    border: none;
+  // override multi copy btn styles
+  .#{$prefix}--snippet.#{$prefix}--snippet--multi
+    .#{$prefix}--popover-container {
+    top: 0.5rem;
+    right: 0.5rem;
   }
 
-  // TODO: remove copy button styles above
-  .#{$prefix}--snippet .#{$prefix}--copy-btn {
-    @include font-family('sans');
-
-    position: absolute;
-    top: 0;
-    right: 0;
+  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn.#{$prefix}--btn--md {
+    z-index: 10;
+    width: $spacing-07;
+    height: $spacing-07;
+    min-height: $spacing-07;
+    padding: 0;
   }
 
   // Show more / less button
@@ -435,14 +428,6 @@ $copy-btn-feedback: $background-inverse !default;
     }
   }
 
-  .#{$prefix}--snippet--multi .#{$prefix}--copy-btn {
-    z-index: 10;
-    top: $spacing-03;
-    right: $spacing-03;
-    width: $spacing-07;
-    height: $spacing-07;
-  }
-
   .#{$prefix}--snippet--multi
     .#{$prefix}--snippet-button
     .#{$prefix}--btn--copy__feedback {

package/scss/components/content-switcher/_content-switcher.scss

@@ -26,8 +26,6 @@
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--content-switcher--xl,
   .#{$prefix}--content-switcher--lg {
     height: rem(48px);
   }

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

@@ -18,63 +18,6 @@
 @use '../../utilities/visually-hidden' as *;
 
 @mixin copy-button {
-  .#{$prefix}--btn--copy {
-    position: relative;
-    overflow: visible;
-
-    .#{$prefix}--btn__icon {
-      margin-left: rem(5px);
-    }
-  }
-
-  .#{$prefix}--btn--copy__feedback {
-    position: absolute;
-    top: 1.2rem;
-    left: 50%;
-    display: none;
-
-    &::before {
-      @include box-shadow;
-      @include type-style('body-compact-01');
-
-      z-index: 2;
-      top: 1.1rem;
-      padding: $spacing-02;
-      border-radius: 4px;
-      color: $text-inverse;
-      content: attr(data-feedback);
-      font-weight: 400;
-      pointer-events: none;
-      transform: translateX(-50%);
-      white-space: nowrap;
-    }
-
-    &::after {
-      z-index: 1;
-      top: 0.85rem;
-      left: -0.3rem;
-      width: 0.6rem;
-      height: 0.6rem;
-      border-right: 1px solid $background-inverse;
-      border-bottom: 1px solid $background-inverse;
-      content: '';
-      transform: rotate(-135deg);
-    }
-
-    &::before,
-    &::after {
-      position: absolute;
-      display: block;
-      background: $background-inverse;
-    }
-
-    &--displayed {
-      display: inline-flex;
-    }
-  }
-
-  // TODO: deprecate above styles
-
   .#{$prefix}--copy-btn {
     @include reset;
 
@@ -113,8 +56,6 @@
       clip: auto;
     }
 
-    @include tooltip--placement('icon', 'bottom', 'center');
-
     &:focus {
       @include focus-outline('outline');