@carbon/elements 10.35.0 → 10.37.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/elements",
   "description": "A collection of design elements in code for the IBM Design Language",
-  "version": "10.35.0",
+  "version": "10.37.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -35,21 +35,21 @@
     "clean": "rimraf es lib umd && node tasks/clean.js"
   },
   "dependencies": {
-    "@carbon/colors": "^10.26.0",
-    "@carbon/grid": "^10.28.0",
-    "@carbon/icons": "^10.33.0",
+    "@carbon/colors": "^10.27.0",
+    "@carbon/grid": "^10.30.0",
+    "@carbon/icons": "^10.34.0",
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.25.0",
-    "@carbon/motion": "^10.19.0",
-    "@carbon/themes": "^10.35.0",
-    "@carbon/type": "^10.29.0"
+    "@carbon/layout": "^10.26.0",
+    "@carbon/motion": "^10.20.0",
+    "@carbon/themes": "^10.37.0",
+    "@carbon/type": "^10.30.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.24.0",
+    "@carbon/cli": "^10.25.0",
     "fs-extra": "^8.1.0",
     "klaw-sync": "^6.0.0",
     "replace-in-file": "^3.4.2",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "d02eacdefc2c94da1b7619a20df441e264bf884c"
+  "gitHead": "74da5c7df7a93263ed79ed9b3dd6dc2b52d80024"
 }

package/scss/grid/modules/_css-grid.scss

@@ -11,6 +11,7 @@
 
 @mixin css-grid() {
   display: grid;
+  max-width: 99rem;
   padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
   padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
   margin-right: auto;
@@ -35,6 +36,8 @@
   --cds-grid-columns: 4;
   --cds-grid-column-size: 1fr;
   --cds-grid-gutter: 2rem;
+  // Used to configure appropriate margins for condensed subgrids inside wide grids
+  --cds-grid-gutter-wide: 2rem;
   --cds-grid-hang: 1rem;
   --cds-grid-margin: 0;
 
@@ -67,20 +70,8 @@
   @include subgrid();
 }
 
-.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  padding-right: 0;
-  padding-left: 0;
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  --cds-grid-gutter: 2rem;
-
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
-  margin-right: 0;
-  margin-left: 0;
+.#{$prefix}--subgrid[class*='col'] {
+  display: grid;
 }
 
 // -----------------------------------------------------------------------------
@@ -102,13 +93,17 @@
   margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
-// Narrow subgrid inside condensed
-.#{$prefix}--css-grid--condensed
+// Narrow subgrid inside wide
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed)
   .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
-  --cds-grid-gutter: 2rem;
+  padding: 0;
+}
 
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
+// Narrow subgrid column inside wide
+.#{$prefix}--css-grid
+  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow
+  > [class*='col'] {
+  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -122,11 +117,10 @@
 }
 
 // condensed subgrid inside wide
-.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
-  margin-right: calc(
-    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
-  );
-  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow)
+  .bx--subgrid.#{$prefix}--css-grid--condensed {
+  margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1);
+  margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -142,6 +136,13 @@
   column-gap: var(--cds-grid-gutter);
 }
 
+// -----------------------------------------------------------------------------
+// Full width
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--full-width {
+  max-width: 100%;
+}
+
 // -----------------------------------------------------------------------------
 // Column span
 // -----------------------------------------------------------------------------
@@ -151,6 +152,7 @@
   } @else {
     --cds-grid-columns: #{$i};
 
+    display: block;
     grid-column: span $i / span $i;
   }
 }
@@ -268,7 +270,10 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    @for $i from 1 through $columns {
+    // The `grid-column-end` and `grid-column-start` properies are *not* inclusive.
+    // It starts/ends the column *at* the column, not *on* the column. We must
+    // ensure that there is one additional class available for each breakpoint.
+    @for $i from 1 through $columns + 1 {
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
@@ -348,3 +353,67 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
+
+// -----------------------------------------------------------------------------
+// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
+// -----------------------------------------------------------------------------
+
+/// 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 carbon--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 {
+      padding-top: percentage($height / $width);
+    }
+  }
+}
+
+@include carbon--aspect-ratio();

package/scss/themes/generated/_mixins.scss

@@ -264,6 +264,87 @@
   $icon-size-01: map-get($theme, 'icon-size-01') !global;
   $icon-size-02: map-get($theme, 'icon-size-02') !global;
 
+  @if global-variable-exists('feature-flags') ==
+    false or
+    global-variable-exists('feature-flags') and
+    map-get($feature-flags, 'enable-v11-release') !=
+    true
+  {
+    $background: $ui-background !global;
+    $layer: $ui-01 !global;
+    $layer-accent: $ui-03 !global;
+    $field: $field-01 !global;
+    $background-inverse: $inverse-02 !global;
+    $background-brand: $interactive-01 !global;
+    $interactive: $interactive-04 !global;
+    $border-subtle: $ui-03 !global;
+    $border-strong: $ui-04 !global;
+    $border-inverse: $ui-05 !global;
+    $border-interactive: $interactive-04 !global;
+    $text-primary: $text-01 !global;
+    $text-secondary: $text-02 !global;
+    $text-placeholder: $text-03 !global;
+    $text-helper: $text-05 !global;
+    $text-on-color: $text-04 !global;
+    $text-inverse: $inverse-01 !global;
+    $link-primary: $link-01 !global;
+    $link-secondary: $link-02 !global;
+    $link-visited: $visited-link !global;
+    $link-inverse: $inverse-link !global;
+    $icon-primary: $icon-01 !global;
+    $icon-secondary: $icon-02 !global;
+    $icon-on-color: $icon-03 !global;
+    $icon-inverse: $inverse-01 !global;
+    $support-error: $support-01 !global;
+    $support-success: $support-02 !global;
+    $support-warning: $support-03 !global;
+    $support-info: $support-04 !global;
+    $support-error-inverse: $inverse-support-01 !global;
+    $support-success-inverse: $inverse-support-02 !global;
+    $support-warning-inverse: $inverse-support-03 !global;
+    $support-info-inverse: $inverse-support-04 !global;
+    $overlay: $overlay-01 !global;
+    $toggle-off: $ui-04 !global;
+    $button-primary: $interactive-01 !global;
+    $button-secondary: $interactive-02 !global;
+    $button-tertiary: $interactive-03 !global;
+    $button-danger-primary: $danger-01 !global;
+    $button-danger-secondary: $danger-02 !global;
+    $background-active: $active-ui !global;
+    $layer-active: $active-ui !global;
+    $button-danger-active: $active-danger !global;
+    $button-primary-active: $active-primary !global;
+    $button-secondary-active: $active-secondary !global;
+    $button-tertiary-active: $active-tertiary !global;
+    $focus-inset: $inverse-01 !global;
+    $focus-inverse: $inverse-focus-ui !global;
+    $background-hover: $hover-ui !global;
+    $layer-hover: $hover-ui !global;
+    $field-hover: $hover-ui !global;
+    $background-inverse-hover: $inverse-hover-ui !global;
+    $link-primary-hover: $hover-primary-text !global;
+    $button-danger-hover: $hover-danger !global;
+    $button-primary-hover: $hover-primary !global;
+    $button-secondary-hover: $hover-secondary !global;
+    $button-tertiary-hover: $hover-tertiary !global;
+    $background-selected: $selected-ui !global;
+    $background-selected-hover: $hover-selected-ui !global;
+    $layer-selected: $selected-ui !global;
+    $layer-selected-hover: $hover-selected-ui !global;
+    $layer-selected-inverse: $ui-05 !global;
+    $border-subtle-selected: $active-ui !global;
+    $layer-disabled: $disabled-01 !global;
+    $field-disabled: $disabled-01 !global;
+    $border-disabled: $disabled-01 !global;
+    $text-disabled: $disabled-02 !global;
+    $button-disabled: $disabled-02 !global;
+    $icon-disabled: $disabled-02 !global;
+    $text-on-color-disabled: $disabled-03 !global;
+    $icon-on-color-disabled: $disabled-03 !global;
+    $layer-selected-disabled: $disabled-03 !global;
+    $skeleton-background: $skeleton-01 !global;
+    $skeleton-element: $skeleton-02 !global;
+  }
   @if global-variable-exists('feature-flags') and
     map-get($feature-flags, 'enable-css-custom-properties')
   {

package/scss/themes/modules/_theme.scss

@@ -14,7 +14,7 @@ $-custom-property-prefix: 'cds';
 
 /// @access public
 /// @group @carbon/themes
-@mixin theme($active-theme: $theme) {
+@mixin theme($active-theme: $theme, $component-tokens...) {
   $parent-theme: $theme;
   $theme: $active-theme !global;
 
@@ -22,6 +22,12 @@ $-custom-property-prefix: 'cds';
     @include -custom-property($token, $value);
   }
 
+  @each $group in $component-tokens {
+    @each $token, $value in $group {
+      @include -custom-property($token, $value);
+    }
+  }
+
   @content;
 
   $theme: $parent-theme !global;