@carbon/elements 10.51.0 → 10.53.0-rc.0

package/scss/grid/modules/_mixins.scss

@@ -65,11 +65,11 @@
     // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
     // do not appear to require this.
     @if meta.function-exists('div', 'math') {
-      max-width: percentage(math.div($span, $columns));
-      flex: 0 0 percentage(math.div($span, $columns));
+      max-width: math.percentage(math.div($span, $columns));
+      flex: 0 0 math.percentage(math.div($span, $columns));
     } @else {
-      max-width: percentage(($span / $columns));
-      flex: 0 0 percentage(($span / $columns));
+      max-width: math.percentage(($span / $columns));
+      flex: 0 0 math.percentage(($span / $columns));
     }
   }
 }
@@ -89,7 +89,7 @@
   @if $offset == 0 {
     margin-left: 0;
   } @else {
-    margin-left: percentage($offset);
+    margin-left: math.percentage($offset);
   }
 }
 
@@ -108,7 +108,7 @@
 
   @each $breakpoint in map-keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint);
-    $columns: map-get(map-get($breakpoints, $breakpoint), columns);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
 
     // Allow columns to stretch full width below their breakpoints
     @for $i from 0 through $columns {
@@ -252,11 +252,11 @@
   @include -set-largest-breakpoint();
 
   @each $name, $value in $breakpoints {
-    $prev-breakpoint: map-get($breakpoints, breakpoint-prev($name));
-    $margin: map-get($value, margin);
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
 
     @if $prev-breakpoint {
-      $prev-margin: map-get($prev-breakpoint, margin);
+      $prev-margin: map.get($prev-breakpoint, margin);
       @if $prev-margin != $margin {
         @include breakpoint($name) {
           padding-right: #{($grid-gutter * 0.5) + $margin};
@@ -279,7 +279,7 @@
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
   $largest-breakpoint: last-map-item($breakpoints);
 
-  max-width: map-get($largest-breakpoint, 'width');
+  max-width: map.get($largest-breakpoint, 'width');
 }
 
 /// Add in the max-widths for each breakpoint to the container
@@ -289,7 +289,7 @@
 @mixin -make-container-max-widths($breakpoints: $grid-breakpoints) {
   @each $name, $value in $breakpoints {
     @include breakpoint($name) {
-      max-width: map-get($value, width);
+      max-width: map.get($value, width);
     }
   }
 }

package/scss/grid/vendor/@carbon/import-once/import-once.scss

@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

package/scss/grid/vendor/@carbon/layout/_key-height.import.scss

@@ -21,8 +21,8 @@
 
 @use 'sass:meta';
 @use "sass:math";
-@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'breakpoint';
+@import 'utilities';
 
 /// Get the column width for a given breakpoint
 /// @param {String} $breakpoint

package/scss/grid/vendor/@carbon/layout/modules/_utilities.scss

@@ -14,7 +14,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -26,7 +26,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -36,6 +36,6 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, carbon--key-by-index($map, $total-length));
 }

package/scss/import-once/import-once.scss

@@ -18,7 +18,7 @@ $imported-modules: () !default;
 /// @content Declaration blocks to be imported
 /// @group @carbon/import-once
 @mixin exports($name, $warn: false) {
-  @if (index($imported-modules, $name) == null) {
+  @if not(index($imported-modules, $name)) {
     $imported-modules: append($imported-modules, $name) !global;
     @content;
   } @else if $warn == true {

package/scss/layout/_key-height.import.scss

@@ -21,8 +21,8 @@
 
 @use 'sass:meta';
 @use "sass:math";
-@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'breakpoint';
+@import 'utilities';
 
 /// Get the column width for a given breakpoint
 /// @param {String} $breakpoint

package/scss/layout/modules/_utilities.scss

@@ -14,7 +14,7 @@
 /// @group @carbon/layout
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
   @return $map;
 }
@@ -26,7 +26,7 @@
 /// @return {String} Desired value
 /// @group @carbon/layout
 @function key-by-index($map, $index) {
-  $keys: map-keys($map);
+  $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
@@ -36,6 +36,6 @@
 /// @return {*} Desired value
 /// @group @carbon/layout
 @function last-map-item($map) {
-  $total-length: length($map);
+  $total-length: list.length($map);
   @return map-get($map, carbon--key-by-index($map, $total-length));
 }

package/scss/themes/modules/generated/_themes.scss

@@ -77,6 +77,8 @@ $white: (
   layer-selected-hover-03: #d1d1d1,
   layer-selected-inverse: #161616,
   link-inverse: #78a9ff,
+  link-inverse-active: #f4f4f4,
+  link-inverse-hover: #a6c8ff,
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -180,6 +182,8 @@ $g10: (
   layer-selected-hover-03: #d1d1d1,
   layer-selected-inverse: #161616,
   link-inverse: #78a9ff,
+  link-inverse-active: #f4f4f4,
+  link-inverse-hover: #a6c8ff,
   link-primary: #0f62fe,
   link-primary-hover: #0043ce,
   link-secondary: #0043ce,
@@ -283,6 +287,8 @@ $g90: (
   layer-selected-hover-03: #7a7a7a,
   layer-selected-inverse: #f4f4f4,
   link-inverse: #0f62fe,
+  link-inverse-active: #161616,
+  link-inverse-hover: #0043ce,
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,
@@ -386,6 +392,8 @@ $g100: (
   layer-selected-hover-03: #5e5e5e,
   layer-selected-inverse: #f4f4f4,
   link-inverse: #0f62fe,
+  link-inverse-active: #161616,
+  link-inverse-hover: #0043ce,
   link-primary: #78a9ff,
   link-primary-hover: #a6c8ff,
   link-secondary: #a6c8ff,

package/scss/themes/modules/generated/_tokens.scss

@@ -217,11 +217,17 @@ $link-primary-hover: _get('link-primary-hover') !default;
 /// The CSS Custom Property for the `link-secondary` token
 $link-secondary: _get('link-secondary') !default;
 
+/// The CSS Custom Property for the `link-visited` token
+$link-visited: _get('link-visited') !default;
+
 /// The CSS Custom Property for the `link-inverse` token
 $link-inverse: _get('link-inverse') !default;
 
-/// The CSS Custom Property for the `link-visited` token
-$link-visited: _get('link-visited') !default;
+/// The CSS Custom Property for the `link-inverse-active` token
+$link-inverse-active: _get('link-inverse-active') !default;
+
+/// The CSS Custom Property for the `link-inverse-hover` token
+$link-inverse-hover: _get('link-inverse-hover') !default;
 
 /// The CSS Custom Property for the `icon-primary` token
 $icon-primary: _get('icon-primary') !default;

package/scss/type/_inlined/_reset.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../vendor/@carbon/layout/convert';
+@import '../../layout/convert';
 @import 'font-family';
 @import 'styles';
 

package/scss/type/_inlined/_scale.scss

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../vendor/@carbon/layout/convert';
+@import '../../layout/convert';
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step

package/scss/type/_inlined/_styles.import.scss

@@ -21,9 +21,9 @@
 
 @use "sass:meta";
 @use "sass:math";
-@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../../layout/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

package/scss/type/_inlined/_styles.scss

@@ -21,7 +21,7 @@
 
 // stylelint-disable number-max-precision
 
-@import '../vendor/@carbon/layout/breakpoint';
+@import '../../layout/breakpoint';
 @import 'font-family';
 @import 'scale';
 

package/scss/type/_styles.import.scss

@@ -21,9 +21,9 @@
 
 @use "sass:meta";
 @use "sass:math";
-@import '../layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'font-family'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'scale'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../layout/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

package/scss/type/modules/_font-family.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:string';
+
 /// Font family fallbacks for: IBM Plex Mono, IBM Plex Sans, IBM Plex Sans
 /// Condensed, IBM Plex Sans Hebrew, and IBM Plex Serif
 /// @type Map
@@ -12,47 +14,47 @@
 /// @group @carbon/type
 $font-families: (
   'mono':
-    unquote(
+    string.unquote(
       "'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace"
     ),
   'sans':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-condensed':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Condensed', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-arabic':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-devanagari':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-hebrew':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Hebrew', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-jp':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans JP', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-kr':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans KR', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-thai-looped':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Thai Looped', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'sans-thai':
-    unquote(
+    string.unquote(
       "'IBM Plex Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif"
     ),
   'serif':
-    unquote(
+    string.unquote(
       "'IBM Plex Serif', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', serif"
     ),
 ) !default;

package/scss/type/modules/_scale.scss

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/layout';
+@use 'sass:list';
 
 /// Compute the type size for the given type scale step
 /// @param {Number} $step
@@ -26,7 +27,7 @@
 /// @group @carbon/type
 $type-scale: ();
 @for $i from 1 through 23 {
-  $type-scale: append($type-scale, layout.rem(get-type-size($i)));
+  $type-scale: list.append($type-scale, layout.rem(get-type-size($i)));
 }
 
 /// Get the value of a specific step in the type scale

package/scss/type/modules/_styles.scss

@@ -8,7 +8,8 @@
 // stylelint-disable number-max-precision
 
 @use 'sass:map';
-@use '@carbon/layout';
+@use 'sass:math';
+@use '../../grid/modules/breakpoint' as grid;
 @use 'font-family';
 @use 'scale';
 
@@ -696,7 +697,7 @@ $tokens: (
 /// @access public
 /// @group @carbon/type
 @function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, $value * 0 + 1);
 }
 
 /// This helper includes fluid type styles for the given token value. Fluid type
@@ -715,7 +716,7 @@ $tokens: (
 /// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
 /// @access public
 /// @group @carbon/type
-@mixin fluid-type($type-styles, $breakpoints: layout.$grid-breakpoints) {
+@mixin fluid-type($type-styles, $breakpoints: grid.$grid-breakpoints) {
   // Include the initial styles for the given token by default without any
   // media query guard. This includes `font-size` as a fallback in the case
   // that a browser does not support `calc()`
@@ -728,7 +729,7 @@ $tokens: (
   // token and apply the properties and fluid type size for that given
   // breakpoint
   @each $name, $values in map.get($type-styles, breakpoints) {
-    @include layout.breakpoint($name) {
+    @include grid.breakpoint($name) {
       @include properties($values);
       @include fluid-type-size($type-styles, $name, $breakpoints);
     }
@@ -744,7 +745,7 @@ $tokens: (
 @mixin fluid-type-size(
   $type-styles,
   $name,
-  $breakpoints: layout.$grid-breakpoints
+  $breakpoints: grid.$grid-breakpoints
 ) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
@@ -775,7 +776,7 @@ $tokens: (
 
   // We can use `breakpoint-next` to see if there is another breakpoint we can
   // use to update `max-font-size` and `max-vw` with larger values
-  $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints);
+  $next-breakpoint-available: grid.breakpoint-next($name, $breakpoints);
   $next-fluid-breakpoint-name: null;
 
   // We need to figure out what the next available fluid breakpoint is for our
@@ -787,7 +788,7 @@ $tokens: (
       $next-fluid-breakpoint-name: $next-breakpoint-available;
       $next-breakpoint-available: null;
     } @else {
-      $next-breakpoint-available: layout.breakpoint-next(
+      $next-breakpoint-available: grid.breakpoint-next(
         $next-breakpoint-available,
         $breakpoints
       );
@@ -845,11 +846,7 @@ $custom-property-prefix: 'cds' !default;
 /// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use
 /// @access public
 /// @group @carbon/type
-@mixin type-style(
-  $name,
-  $fluid: false,
-  $breakpoints: layout.$grid-breakpoints
-) {
+@mixin type-style($name, $fluid: false, $breakpoints: grid.$grid-breakpoints) {
   @if not map.has-key($tokens, $name) {
     @error 'Unable to find a token with the name: `#{$name}`';
   }

package/scss/type/vendor/@carbon/grid/12.scss

@@ -0,0 +1,41 @@
+//
+// 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.
+//
+
+@import 'mixins';
+
+/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16
+/// @type Map
+/// @access public
+/// @group @carbon/grid
+$carbon--12-column-grid: map-merge(
+  $carbon--grid-breakpoints,
+  (
+    lg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, lg),
+        (
+          columns: 12,
+        )
+      ),
+    xlg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, xlg),
+        (
+          columns: 12,
+        )
+      ),
+    max:
+      map-merge(
+        map-get($carbon--grid-breakpoints, max),
+        (
+          columns: 12,
+        )
+      ),
+  )
+);
+
+@include carbon--grid($breakpoints: $carbon--12-column-grid);

package/scss/type/vendor/@carbon/grid/_inlined/12.scss

@@ -0,0 +1,41 @@
+//
+// 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.
+//
+
+@import 'mixins';
+
+/// Overrides `$carbon--grid-breakpoints` to use a 12 column grid instead of the default 16
+/// @type Map
+/// @access public
+/// @group @carbon/grid
+$carbon--12-column-grid: map-merge(
+  $carbon--grid-breakpoints,
+  (
+    lg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, lg),
+        (
+          columns: 12,
+        )
+      ),
+    xlg:
+      map-merge(
+        map-get($carbon--grid-breakpoints, xlg),
+        (
+          columns: 12,
+        )
+      ),
+    max:
+      map-merge(
+        map-get($carbon--grid-breakpoints, max),
+        (
+          columns: 12,
+        )
+      ),
+  )
+);
+
+@include carbon--grid($breakpoints: $carbon--12-column-grid);