@carbon/styles 0.14.0 → 0.15.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "0.14.0",
+  "version": "0.15.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.36.0",
+    "@carbon/colors": "^10.37.0-rc.0",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/grid": "^10.41.0",
-    "@carbon/layout": "^10.36.0",
-    "@carbon/motion": "^10.28.0",
-    "@carbon/themes": "^10.51.0",
-    "@carbon/type": "^10.41.0",
+    "@carbon/grid": "^10.42.0-rc.0",
+    "@carbon/layout": "^10.37.0-rc.0",
+    "@carbon/motion": "^10.29.0-rc.0",
+    "@carbon/themes": "^10.52.0-rc.0",
+    "@carbon/type": "^10.42.0-rc.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
     "@carbon/test-utils": "^10.21.0",
     "css": "^3.0.0"
   },
-  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
+  "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
 }

package/scss/_motion.scss

@@ -6,62 +6,33 @@
 //
 
 @forward '@carbon/motion';
-@use '@carbon/motion';
 
 /// Used primarily for removing elements from the screen
 /// @type Function
 /// @access public
-/// @group global-motion
+/// @group motion
 $ease-in: cubic-bezier(0.25, 0, 1, 1);
 
 /// Used for adding elements to the screen or changing on-screen states at a user's input
 /// @type Function
 /// @access public
-/// @group global-motion
+/// @group motion
 $ease-out: cubic-bezier(0, 0, 0.25, 1);
 
 /// Used for the majority of animations
 /// @type Function
 /// @access public
-/// @group global-motion
+/// @group motion
 $standard-easing: cubic-bezier(0.5, 0, 0.1, 1);
 
 /// Base transition duration
 /// @type Number
 /// @access public
-/// @group global-motion
-$transition--base: 250ms;
+/// @group motion
+$transition-base: 250ms;
 
 /// Expansion duration
 /// @type Number
 /// @access public
-/// @group global-motion
-$transition--expansion: 300ms;
-
-/// Default ease-in for components
-/// @access public
-/// @type Function
-/// @group global-motion
-$ease-in: cubic-bezier(0, 0, 0.38, 0.9);
-
-/// Default ease-out for components
-/// @access public
-/// @type Function
-/// @group global-motion
-$ease-out: cubic-bezier(0.2, 0, 1, 0.9);
-
-/// Default easing for components
-/// @access public
-/// @type Function
-/// @group global-motion
-$standard-easing: cubic-bezier(0.2, 0, 0.38, 0.9);
-
-/// @access public
-/// @group global-motion
-/// @alias duration--fast-02
-$transition--base: motion.$duration-fast-02;
-
-/// @access public
-/// @group global-motion
-/// @alias duration--moderate-02
-$transition--expansion: motion.$duration-moderate-02;
+/// @group motion
+$transition-expansion: 300ms;

package/scss/_reset.scss

@@ -144,8 +144,8 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
-  /// End vendor reset
 
+  /// End vendor reset
   html {
     box-sizing: border-box;
   }

package/scss/components/accordion/_accordion.scss

@@ -151,7 +151,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__title {
-    @include type-style('body-long-01');
+    @include type-style('body-01');
 
     z-index: 1;
     width: 100%;
@@ -176,7 +176,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     }
 
     > p {
-      @include type-style('body-long-01');
+      @include type-style('body-01');
     }
   }
 
@@ -207,6 +207,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     0% {
       @include -content-visible;
     }
+
     100% {
       @include -content-hidden;
     }
@@ -216,6 +217,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
     0% {
       @include -content-hidden;
     }
+
     100% {
       @include -content-visible;
     }

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

@@ -5,6 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:list';
 @use 'sass:math';
 @use 'sass:meta';
 @use '../../config' as *;
@@ -58,14 +59,14 @@ $carbon--aspect-ratios: (
   }
 
   @each $aspect-ratio in $aspect-ratios {
-    $width: nth($aspect-ratio, 1);
-    $height: nth($aspect-ratio, 2);
+    $width: list.nth($aspect-ratio, 1);
+    $height: list.nth($aspect-ratio, 2);
 
     .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
       @if meta.function-exists('div', 'math') {
-        padding-top: percentage(math.div($height, $width));
+        padding-top: math.percentage(math.div($height, $width));
       } @else {
-        padding-top: percentage(($height / $width));
+        padding-top: math.percentage(($height / $width));
       }
     }
   }

package/scss/components/breadcrumb/_breadcrumb.scss

@@ -17,7 +17,7 @@
 @mixin breadcrumb {
   .#{$prefix}--breadcrumb {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: inline;
 

package/scss/components/button/_tokens.scss

@@ -330,11 +330,11 @@ $button-disabled: (
     ),
     (
       theme: themes.$g90,
-      value: rgba(141, 141, 141, 0.3),
+      value: rgb(141 141 141 / 30%),
     ),
     (
       theme: themes.$g100,
-      value: rgba(141, 141, 141, 0.3),
+      value: rgb(141 141 141 / 30%),
     ),
   ),
 ) !default;

package/scss/components/checkbox/_checkbox.scss

@@ -51,7 +51,7 @@
   // accommodate the spacing needed for the checkbox.
   .#{$prefix}--checkbox-label {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
     display: flex;

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

@@ -298,7 +298,7 @@ $copy-btn-feedback: $background-inverse !default;
   }
 
   .#{$prefix}--btn--copy__feedback {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include font-family('sans');
 
     z-index: z('overlay');
@@ -328,7 +328,7 @@ $copy-btn-feedback: $background-inverse !default;
 
   // Show more / less button
   .#{$prefix}--snippet-btn--expand {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
     @include font-family('sans');
 
     position: absolute;
@@ -379,7 +379,7 @@ $copy-btn-feedback: $background-inverse !default;
     .#{$prefix}--snippet-btn--expand
     .#{$prefix}--icon-chevron--down {
     transform: rotate(180deg);
-    transition: transform $transition--expansion;
+    transition: transform $transition-expansion;
   }
 
   // Light version

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

@@ -36,7 +36,7 @@
     @include reset;
     @include font-family('sans');
     @include focus-outline('reset');
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
     display: inline-flex;
@@ -67,6 +67,10 @@
       transform: scaleY(0);
       transform-origin: bottom;
       transition: all $duration-moderate-01 motion(standard, productive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
 
     &:disabled::after {

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

@@ -35,7 +35,7 @@
 
     &::before {
       @include box-shadow;
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       z-index: 2;
       top: 1.1rem;

package/scss/components/data-table/_data-table.scss

@@ -43,13 +43,13 @@
   }
 
   .#{$prefix}--data-table-header__title {
-    @include type-style('productive-heading-03');
+    @include type-style('heading-03');
 
     color: $text-primary;
   }
 
   .#{$prefix}--data-table-header__description {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     color: $text-secondary;
   }
@@ -64,13 +64,13 @@
   }
 
   .#{$prefix}--data-table thead {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     background-color: $layer-accent;
   }
 
   .#{$prefix}--data-table tbody {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     width: 100%;
     background-color: $layer;

package/scss/components/data-table/action/_data-table-action.scss

@@ -77,7 +77,7 @@
     height: $spacing-09;
     box-shadow: none;
     cursor: pointer;
-    transition: width $transition--expansion $standard-easing,
+    transition: width $transition-expansion $standard-easing,
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
@@ -476,7 +476,7 @@
 
   .#{$prefix}--btn--primary.#{$prefix}--batch-summary__cancel:hover::before {
     opacity: 0;
-    transition: opacity $transition--base $standard-easing;
+    transition: opacity $transition-base $standard-easing;
   }
 
   // cancel btn
@@ -496,7 +496,7 @@
   }
 
   .#{$prefix}--batch-summary__para {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
   }
 
   //-------------------------------------------------

package/scss/components/data-table/sort/_data-table-sort.scss

@@ -181,7 +181,7 @@
     fill: $icon-primary;
     opacity: 1;
     transform: rotate(0);
-    transition: transform $transition--base $standard-easing;
+    transition: transform $transition-base $standard-easing;
   }
 
   //----------------------------------------------------------------------------

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

@@ -16,66 +16,73 @@
 
 @use '../button/tokens' as *;
 
-@keyframes fpFadeInDown {
+@keyframes fp-fade-in-down {
   from {
     opacity: 0;
     transform: translate3d(0, -20px, 0);
   }
+
   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpSlideLeft {
+@keyframes fp-slide-left {
   from {
     transform: translate3d(0, 0, 0);
   }
+
   to {
     transform: translate3d(-100%, 0, 0);
   }
 }
 
-@keyframes fpSlideLeftNew {
+@keyframes fp-slide-left-new {
   from {
     transform: translate3d(100%, 0, 0);
   }
+
   to {
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpSlideRight {
+@keyframes fp-slide-right {
   from {
     transform: translate3d(0, 0, 0);
   }
+
   to {
     transform: translate3d(100%, 0, 0);
   }
 }
 
-@keyframes fpSlideRightNew {
+@keyframes fp-slide-right-new {
   from {
     transform: translate3d(-100%, 0, 0);
   }
+
   to {
     transform: translate3d(0, 0, 0);
   }
 }
 
-@keyframes fpFadeOut {
+@keyframes fp-fade-out {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
 }
 
-@keyframes fpFadeIn {
+@keyframes fp-fade-in {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -130,7 +137,7 @@
   }
 
   .flatpickr-calendar.animate.open {
-    animation: fpFadeInDown $duration-fast-02 motion(entrance, productive);
+    animation: fp-fade-in-down $duration-fast-02 motion(entrance, productive);
   }
 
   .flatpickr-calendar.inline {
@@ -193,7 +200,7 @@
   }
 
   .flatpickr-month {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: flex;
     height: rem(40px);
@@ -240,7 +247,7 @@
   }
 
   .flatpickr-current-month {
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     display: flex;
     height: rem(28px);
@@ -380,7 +387,7 @@
   }
 
   .flatpickr-weekday {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     flex: 1;
     color: $text-primary;
@@ -392,8 +399,8 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft {
-    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft,
@@ -402,23 +409,23 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeftNew {
-    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRight {
-    animation: fpFadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideRight 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1);
     transform: translate3d(100%, 0, 0);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRightNew {
-    animation: fpFadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1),
-      fpSlideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1);
+    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+      fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-day {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     width: rem(40px);

package/scss/components/dropdown/_dropdown.scss

@@ -29,7 +29,7 @@
     grid-template: auto auto / auto min-content;
 
     .#{$prefix}--label {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
     }
 
     .#{$prefix}--label,
@@ -167,7 +167,7 @@
   }
 
   .#{$prefix}--dropdown-text {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: block;
     overflow: hidden;
@@ -184,7 +184,7 @@
     @include reset;
     @include focus-outline('reset');
     @include box-shadow;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: absolute;
     z-index: z('dropdown');

package/scss/components/file-uploader/_file-uploader.scss

@@ -35,7 +35,7 @@
   // TODO: sync with type
   .#{$prefix}--file--label {
     @include reset;
-    @include type-style('productive-heading-01');
+    @include type-style('heading-compact-01');
 
     margin-bottom: $spacing-03;
     color: $text-primary;
@@ -108,7 +108,7 @@
 
   .#{$prefix}--label-description {
     @include reset;
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     margin-bottom: $spacing-05;
     color: $text-secondary;
@@ -161,7 +161,7 @@
     }
 
     .#{$prefix}--file-filename {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       overflow: hidden;
       margin-left: $spacing-05;
@@ -247,7 +247,7 @@
 
   // TODO: deprecate
   .#{$prefix}--file__selected-file--invalid + .#{$prefix}--form-requirement {
-    @include type-style('caption-01');
+    @include type-style('label-01');
 
     display: block;
     overflow: visible;

package/scss/components/form/_form.scss

@@ -34,7 +34,7 @@ $input-label-weight: 400 !default;
   }
 
   .#{$prefix}--form-item {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     display: flex;
     // We specify `auto` as the default value so that the form item does
@@ -161,7 +161,7 @@ $input-label-weight: 400 !default;
 
   .#{$prefix}--form-requirement {
     @include reset;
-    @include type-style('caption-01');
+    @include type-style('label-01');
 
     display: none;
     overflow: hidden;

package/scss/components/link/_link.scss

@@ -30,7 +30,7 @@ $link-focus-text-color: custom-property.get-var(
 @mixin link {
   .#{$prefix}--link {
     @include component-reset.reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     display: inline-flex;
     color: $link-text-color;
@@ -68,7 +68,7 @@ $link-focus-text-color: custom-property.get-var(
   .#{$prefix}--link--disabled,
   .#{$prefix}--link--disabled:hover {
     @include component-reset.reset;
-    @include type.type-style('body-short-01');
+    @include type.type-style('body-compact-01');
 
     color: $text-disabled;
     cursor: not-allowed;
@@ -102,7 +102,7 @@ $link-focus-text-color: custom-property.get-var(
   }
 
   .#{$prefix}--link--lg {
-    @include type.type-style('body-short-02');
+    @include type.type-style('body-compact-02');
   }
 
   .#{$prefix}--link__icon {

package/scss/components/list/_list.scss

@@ -25,14 +25,14 @@
   .#{$prefix}--list--ordered,
   .#{$prefix}--list--ordered--native {
     @include component-reset.reset;
-    @include type.type-style('body-long-01');
+    @include type.type-style('body-01');
 
     list-style: none;
   }
 
   .#{$prefix}--list--expressive,
   .#{$prefix}--list--expressive .#{$prefix}--list--nested {
-    @include type.type-style('body-long-02');
+    @include type.type-style('body-02');
   }
 
   .#{$prefix}--list--ordered--native {

package/scss/components/list-box/_list-box.scss

@@ -55,7 +55,7 @@ $list-box-menu-width: rem(300px);
     grid-template: auto auto / auto auto;
 
     .#{$prefix}--label {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
     }
 
     .#{$prefix}--label,
@@ -371,7 +371,7 @@ $list-box-menu-width: rem(300px);
 
   // Label for a `list-box__field`
   .#{$prefix}--list-box__label {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     overflow: hidden;
     color: $text-primary;
@@ -536,7 +536,7 @@ $list-box-menu-width: rem(300px);
 
   // Descendant of a `list-box__menu` that represents a selection for a control
   .#{$prefix}--list-box__menu-item {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     position: relative;
     height: rem(40px);

package/scss/components/loading/_loading.scss

@@ -102,6 +102,7 @@
     0% {
       transform: rotate(0deg);
     }
+
     100% {
       transform: rotate(360deg);
     }
@@ -124,6 +125,7 @@
     0% {
       stroke-dashoffset: loading-progress($circumference, 0);
     }
+
     100% {
       stroke-dashoffset: loading-progress($circumference, 81);
     }
@@ -133,6 +135,7 @@
     0% {
       stroke-dashoffset: loading-progress($circumference, 81);
     }
+
     100% {
       stroke-dashoffset: loading-progress($circumference, 0);
     }