@carbon/styles 0.13.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.13.0",
+  "version": "0.15.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,18 +20,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@carbon/colors": "^10.35.0",
+    "@carbon/colors": "^10.37.0-rc.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.50.0",
-    "@carbon/type": "^10.40.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": "e76c42ab78cbee043db643597b7b5d79bd387c9b"
+  "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
 }

package/scss/_config.scss

@@ -48,3 +48,9 @@ $use-google-fonts: false !default;
 /// @type String
 /// @group config
 $prefix: 'cds' !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;

package/scss/_grid.scss

@@ -10,11 +10,13 @@
 @forward '@carbon/grid'
   show css-grid,
        subgrid,
+       flex-grid,
        $grid-gutter,
        $grid-gutter-condensed,
        $grid-breakpoints
   with (
-    $prefix: config.$prefix
+    $prefix: config.$prefix,
+    $flex-grid-columns: config.$flex-grid-columns,
   );
 
 @use '@carbon/grid';

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/_index.scss

@@ -6,6 +6,7 @@
 //
 
 @use 'accordion';
+@use 'aspect-ratio';
 @use 'breadcrumb';
 @use 'button';
 @use 'checkbox';

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

@@ -0,0 +1,73 @@
+//
+// 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.
+//
+
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+@use '../../config' as *;
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @type List
+/// @access public
+/// @group @carbon/grid
+$carbon--aspect-ratios: (
+  (16, 9),
+  (9, 16),
+  (2, 1),
+  (1, 2),
+  (4, 3),
+  (3, 4),
+  (3, 2),
+  (2, 3),
+  (1, 1)
+);
+
+/// Generates the CSS classname utilities for the aspect ratios
+///
+/// CSS Tricks article on aspect ratios and all the different ways it can be done.
+/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
+///
+/// That article references an earlier article on the topic.
+/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
+///
+/// @param {Number} $width width from an aspect ratio
+/// @param {Number} $height height from an aspect ratio
+/// @access private
+/// @group @carbon/grid
+@mixin aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio::before {
+    width: 1px;
+    height: 0;
+    margin-left: -1px;
+    content: '';
+    float: left;
+  }
+
+  .#{$prefix}--aspect-ratio::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  @each $aspect-ratio in $aspect-ratios {
+    $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: math.percentage(math.div($height, $width));
+      } @else {
+        padding-top: math.percentage(($height / $width));
+      }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+//
+// 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 'aspect-ratio';
+@use 'aspect-ratio';
+
+@include aspect-ratio.aspect-ratio;

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/_button.scss

@@ -102,9 +102,9 @@
       transparent,
       transparent,
       $link-primary,
-      $background-hover,
+      $layer-hover,
       currentColor,
-      $background-active
+      $layer-active
     );
 
     padding: $button-padding-ghost;
@@ -243,6 +243,7 @@
 
       &:active {
         border-color: $button-danger-active;
+        background-color: $button-danger-active;
         color: $text-on-color;
       }
 
@@ -334,7 +335,7 @@
 
   //expressive styles
   .#{$prefix}--btn--expressive {
-    @include type-style('body-short-02');
+    @include type-style('body-compact-02');
 
     min-height: 3rem;
   }

package/scss/components/button/_mixins.scss

@@ -20,10 +20,11 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
 @mixin button-base {
   @include component-reset.reset;
-  @include type-style('body-short-01');
+  @include type-style('body-compact-01');
 
   position: relative;
   display: inline-flex;
+  width: max-content;
   max-width: rem(320px);
   min-height: $button-height;
   flex-shrink: 0;

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;
@@ -197,4 +197,11 @@
     // Add extra spacing when label is present
     margin: rem(1px) 0 0 rem(6px);
   }
+
+  //-----------------------------------------------
+  // InlineCheckbox
+  //-----------------------------------------------
+  .#{$prefix}--checkbox--inline {
+    position: relative;
+  }
 }

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;
@@ -52,15 +52,41 @@
     color: $text-secondary;
     text-align: left;
     text-decoration: none;
-    transition: all $duration-fast-01 motion(standard, productive);
+    transition: all $duration-moderate-01 motion(standard, productive);
     white-space: nowrap;
 
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: $layer-selected-inverse;
+      content: '';
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: all $duration-moderate-01 motion(standard, productive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &:disabled::after {
+      display: none;
+    }
+
     &:focus {
       z-index: 3;
       border-color: $focus;
       box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
     }
 
+    &:focus::after {
+      clip-path: inset(3px 3px 3px 3px);
+    }
+
     &:hover {
       color: $text-primary;
       cursor: pointer;
@@ -157,6 +183,7 @@
   }
 
   .#{$prefix}--content-switcher__label {
+    z-index: 1;
     overflow: hidden;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -177,6 +204,10 @@
       background-color: $layer-selected-disabled;
       color: $text-disabled;
     }
+
+    &::after {
+      transform: scaleY(1);
+    }
   }
 
   .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected

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;