@carbon/styles 0.14.0-rc.0 → 0.14.0

package/package.json

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

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

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

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

@@ -0,0 +1,72 @@
+//
+// 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: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: nth($aspect-ratio, 1);
+    $height: nth($aspect-ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
+      @if meta.function-exists('div', 'math') {
+        padding-top: percentage(math.div($height, $width));
+      } @else {
+        padding-top: 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/list-box/_list-box.scss

@@ -112,7 +112,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--list-box .#{$prefix}--text-input {
@@ -153,21 +153,21 @@ $list-box-menu-width: rem(300px);
   // V11: Possibly deprecate
   // Light variation for 'list-box'
   .#{$prefix}--list-box--light {
-    background-color: $field-02;
+    background-color: $field;
 
     &:hover {
-      background-color: $layer-hover-02;
+      background-color: $layer-hover;
     }
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
-    background: $field-02;
+    background: $field;
   }
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle-02;
+    border-top-color: $border-subtle;
   }
 
   .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
@@ -181,7 +181,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
-    background-color: $field-02;
+    background-color: $field;
   }
 
   .#{$prefix}--list-box--disabled,
@@ -556,7 +556,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
-    background-color: $layer-hover-02;
+    background-color: $layer-hover;
   }
 
   .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
@@ -573,8 +573,7 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active {
-    // To Do: What should this variable be?
-    // background-color: $selected-light-ui;
+    background-color: $layer-selected;
   }
 
   .#{$prefix}--list-box--disabled
@@ -727,9 +726,8 @@ $list-box-menu-width: rem(300px);
 
   // V11: Possibly deprecate
   .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active {
-    // To Do: What should this token be?
-    // border-bottom-color: $selected-light-ui;
-    // background-color: $selected-light-ui;
+    border-bottom-color: $layer-selected;
+    background-color: $layer-selected;
   }
 
   .#{$prefix}--list-box__menu-item--active:hover,