@carbon/elements 10.27.0-rc.0 → 10.28.0

package/scss/grid/modules/_mixins.scss

@@ -0,0 +1,323 @@
+//
+// 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 'config' as *;
+@use 'breakpoint' as *;
+
+// -----------------------------------------------------------------------------
+// Columns
+// -----------------------------------------------------------------------------
+
+/// Used to initialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col-ready(
+  $gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: ($gutter / 2);
+  padding-left: ($gutter / 2);
+
+  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
+  // side.
+  .#{$prefix}--row--condensed &,
+  .#{$prefix}--grid--condensed & {
+    padding-right: ($condensed-gutter / 2);
+    padding-left: ($condensed-gutter / 2);
+  }
+
+  // For our narrow use-case, our container hangs 16px into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: ($gutter / 2);
+    padding-left: 0;
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
+/// @param {Number} $span - The number of columns covered
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    flex: 0 0 percentage($span / $columns);
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: percentage($span / $columns);
+  }
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - The number of columns the offset should cover
+/// @param {Number} $columns - The total number of columns available
+/// @access private
+/// @group @carbon/grid
+@mixin -make-col-offset($span, $columns) {
+  $offset: $span / $columns;
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -make-grid-columns(
+  $breakpoints: $grid-breakpoints,
+  $gutter: $grid-gutter
+) {
+  .#{$prefix}--col {
+    @include -make-col-ready($gutter);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include -make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include -make-col-ready($gutter);
+    }
+
+    @include breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        flex: 1 0 0%;
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+      }
+
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include -make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include -make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Rows
+// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin make-row($gutter: $grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter / 2;
+  margin-left: -1 * $gutter / 2;
+}
+
+// -----------------------------------------------------------------------------
+// No gutter
+// -----------------------------------------------------------------------------
+
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+/// @access private
+/// @group @carbon/grid
+@mixin -no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+
+  // Deprecated ☠️
+  .#{$prefix}--no-gutter--left,
+  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--right,
+  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+/// @access private
+/// @group @carbon/grid
+@mixin -hang($gutter: $grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: ($gutter / 2);
+  }
+
+  // Deprecated ☠️
+  .#{$prefix}--hang--left {
+    padding-left: ($gutter / 2);
+  }
+
+  .#{$prefix}--hang--right {
+    padding-right: ($gutter / 2);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Grid
+// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `-make-container-max-widths`
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -make-container($breakpoints: $grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include -set-largest-breakpoint();
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
+    $margin: map-get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map-get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include breakpoint($name) {
+          padding-right: #{($grid-gutter / 2) + $margin};
+          padding-left: #{($grid-gutter / 2) + $margin};
+        }
+      }
+    } @else {
+      @include breakpoint($name) {
+        padding-right: #{($grid-gutter / 2) + $margin};
+        padding-left: #{($grid-gutter / 2) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: last-map-item($breakpoints);
+
+  max-width: map-get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @access private
+/// @group @carbon/grid
+@mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include breakpoint($name) {
+      max-width: map-get($value, width);
+    }
+  }
+}
+
+/// Generate the CSS for a grid for the given breakpoints and gutters
+/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
+/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
+/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @access public
+/// @group @carbon/grid
+@mixin grid(
+  $breakpoints: $grid-breakpoints,
+  $grid-gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter--condensed
+) {
+  .#{$prefix}--grid {
+    @include -make-container($breakpoints);
+  }
+
+  @include largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-width: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include make-row();
+  }
+
+  .#{$prefix}--row-padding [class*='#{$prefix}--col'],
+  .#{$prefix}--col-padding {
+    padding-top: $grid-gutter / 2;
+    padding-bottom: $grid-gutter / 2;
+  }
+
+  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
+    padding-top: $condensed-gutter / 2;
+    padding-bottom: $condensed-gutter / 2;
+  }
+
+  @include -make-grid-columns($breakpoints, $grid-gutter);
+  @include -no-gutter();
+  @include -hang($grid-gutter);
+}

package/scss/grid/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss

@@ -26,12 +26,12 @@ $fluid-spacing-03: 5vw !default;
 /// @group @carbon/layout
 $fluid-spacing-04: 10vw !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $fluid-spacing: (
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
 );

package/scss/grid/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -66,20 +66,20 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $spacing: (
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
 );

package/scss/layout/modules/generated/_fluid-spacing.scss

@@ -26,12 +26,12 @@ $fluid-spacing-03: 5vw !default;
 /// @group @carbon/layout
 $fluid-spacing-04: 10vw !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $fluid-spacing: (
-  $fluid-spacing-01,
-  $fluid-spacing-02,
-  $fluid-spacing-03,
-  $fluid-spacing-04
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
 );

package/scss/layout/modules/generated/_spacing.scss

@@ -66,20 +66,20 @@ $spacing-11: 5rem !default;
 /// @group @carbon/layout
 $spacing-12: 6rem !default;
 
-/// @type List
+/// @type Map
 /// @access public
 /// @group @carbon/layout
 $spacing: (
-  $spacing-01,
-  $spacing-02,
-  $spacing-03,
-  $spacing-04,
-  $spacing-05,
-  $spacing-06,
-  $spacing-07,
-  $spacing-08,
-  $spacing-09,
-  $spacing-10,
-  $spacing-11,
-  $spacing-12
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
 );

package/scss/motion/motion.scss

@@ -5,6 +5,30 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+/// @access public
+/// @group @carbon/motion
+$fast-01: 70ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$fast-02: 110ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$moderate-01: 150ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$moderate-02: 240ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$slow-01: 400ms !default;
+
+/// @access public
+/// @group @carbon/motion
+$slow-02: 700ms !default;
+
 /// Common component easings
 /// @type Map
 /// @access public

package/scss/themes/generated/_mixins.scss

@@ -58,6 +58,7 @@
   $icon-02: map-get($theme, 'icon-02') !global;
   $icon-03: map-get($theme, 'icon-03') !global;
   $link-01: map-get($theme, 'link-01') !global;
+  $link-02: map-get($theme, 'link-02') !global;
   $inverse-link: map-get($theme, 'inverse-link') !global;
   $field-01: map-get($theme, 'field-01') !global;
   $field-02: map-get($theme, 'field-02') !global;
@@ -254,6 +255,10 @@
       --#{$custom-property-prefix}-link-01,
       map-get($theme, 'link-01')
     ) !global;
+    $link-02: var(
+      --#{$custom-property-prefix}-link-02,
+      map-get($theme, 'link-02')
+    ) !global;
     $inverse-link: var(
       --#{$custom-property-prefix}-inverse-link,
       map-get($theme, 'inverse-link')
@@ -711,6 +716,10 @@
       @include custom-property('link-01', map-get($theme, 'link-01'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'link-02', $emit-difference) {
+      @include custom-property('link-02', map-get($theme, 'link-02'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,

package/scss/themes/generated/_themes.scss

@@ -27,6 +27,7 @@ $carbon--theme--white: (
   icon-02: #525252,
   icon-03: #ffffff,
   link-01: #0f62fe,
+  link-02: #0043ce,
   inverse-link: #78a9ff,
   field-01: #f4f4f4,
   field-02: #ffffff,
@@ -303,13 +304,15 @@ $carbon--theme--white: (
     font-weight: 300,
     line-height: 1.334,
     letter-spacing: 0,
-    lg: (
-      font-size: 1.75rem,
-      line-height: 1.29,
-    ),
-    max: (
-      font-size: 2rem,
-      line-height: 1.25,
+    breakpoints: (
+      lg: (
+        font-size: 1.75rem,
+        line-height: 1.29,
+      ),
+      max: (
+        font-size: 2rem,
+        line-height: 1.25,
+      ),
     ),
   ),
   quotation-01: (
@@ -535,6 +538,7 @@ $carbon--theme--g90: map-merge(
     icon-01: #f4f4f4,
     icon-02: #c6c6c6,
     link-01: #78a9ff,
+    link-02: #a6c8ff,
     inverse-link: #0f62fe,
     field-01: #393939,
     field-02: #525252,
@@ -604,6 +608,7 @@ $carbon--theme--g100: map-merge(
     icon-01: #f4f4f4,
     icon-02: #c6c6c6,
     link-01: #78a9ff,
+    link-02: #a6c8ff,
     inverse-link: #0f62fe,
     field-01: #262626,
     field-02: #393939,
@@ -640,7 +645,7 @@ $carbon--theme--g100: map-merge(
     decorative-01: #525252,
     button-separator: #161616,
     skeleton-01: #353535,
-    skeleton-02: #393939,
+    skeleton-02: #525252,
     brand-02: #6f6f6f,
     brand-03: #ffffff,
     active-01: #525252,
@@ -673,6 +678,7 @@ $carbon--theme--v9: map-merge(
     icon-01: #3d70b2,
     icon-02: #5a6872,
     link-01: #3d70b2,
+    link-02: #3d70b2,
     inverse-link: #5596e6,
     field-01: #ffffff,
     field-02: #f4f7fb,
@@ -847,6 +853,12 @@ $carbon--theme: (
       $link-01,
       map-get($carbon--theme--white, 'link-01')
     ),
+  link-02:
+    if(
+      global-variable-exists('link-02'),
+      $link-02,
+      map-get($carbon--theme--white, 'link-02')
+    ),
   inverse-link:
     if(
       global-variable-exists('inverse-link'),

package/scss/themes/generated/_tokens.scss

@@ -224,6 +224,17 @@ $link-01: if(
   #0f62fe
 ) !default;
 
+/// Secondary link color for lower contrast backgrounds
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$link-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'link-02'),
+  map-get($carbon--theme, 'link-02'),
+  #0043ce
+) !default;
+
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes
@@ -1227,13 +1238,15 @@ $expressive-paragraph-01: if(
     font-weight: 300,
     line-height: 1.334,
     letter-spacing: 0,
-    lg: (
-      font-size: 1.75rem,
-      line-height: 1.29,
-    ),
-    max: (
-      font-size: 2rem,
-      line-height: 1.25,
+    breakpoints: (
+      lg: (
+        font-size: 1.75rem,
+        line-height: 1.29,
+      ),
+      max: (
+        font-size: 2rem,
+        line-height: 1.25,
+      ),
     ),
   )
 ) !default;

package/scss/themes/modules/_theme.scss

@@ -0,0 +1,50 @@
+//
+// 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:map';
+@use 'sass:meta';
+@use 'themes';
+
+$theme: themes.$white !default;
+$-custom-property-prefix: 'cds';
+
+/// @access public
+/// @group @carbon/themes
+@mixin theme($active-theme: $theme) {
+  $parent-theme: $theme;
+  $theme: $active-theme !global;
+
+  @each $token, $value in $theme {
+    @include -custom-property($token, $value);
+  }
+
+  @content;
+
+  $theme: $parent-theme !global;
+}
+
+/// @access public
+/// @group @carbon/themes
+@mixin set($active-theme) {
+  $theme: $active-theme !global;
+}
+
+/// @access private
+/// @group @carbon/themes
+@mixin -custom-property($name, $value, $prefix: $-custom-property-prefix) {
+  @if meta.type-of($value) == map {
+    @each $property, $property-value in $value {
+      // Only support one-level of depth for values that are maps. This is to
+      // avoid bringing properties like `breakpoints` on type tokens
+      @if type-of($property-value) != map {
+        @include -custom-property('#{$name}-#{$property}', $property-value);
+      }
+    }
+  } @else {
+    --#{$prefix}-#{$name}: #{$value};
+  }
+}

package/scss/themes/modules/_themes.scss

@@ -0,0 +1,8 @@
+//
+// 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 'generated/themes';

package/scss/themes/modules/_utilities.scss

@@ -0,0 +1,18 @@
+//
+// 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:map';
+
+/// @access private
+/// @group @carbon/themes
+@function merge($map, $maps...) {
+  $result: $map;
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}