@carbon/elements 10.53.0 → 10.54.1

package/scss/grid/modules/_flex-grid.scss

@@ -9,6 +9,7 @@
 // and often derived from, bootstrap:
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
 
+@use 'sass:list';
 @use 'sass:meta';
 @use 'sass:math';
 @use 'sass:map';
@@ -24,12 +25,12 @@
 /// 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
+/// @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
+  $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
@@ -254,7 +255,7 @@
   margin-right: auto;
   margin-left: auto;
 
-  @include -set-largest-breakpoint();
+  @include -set-largest-breakpoint($breakpoints);
 
   @each $name, $value in $breakpoints {
     $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
@@ -282,7 +283,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
+  $largest-breakpoint: -last-map-item($breakpoints);
 
   max-width: map.get($largest-breakpoint, 'width');
 }
@@ -299,16 +300,37 @@
   }
 }
 
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function -last-map-item($map) {
+  $total-length: list.length($map);
+  @return map-get($map, -key-by-index($map, $total-length));
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
 /// 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
+/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
 /// @access public
 /// @group @carbon/grid
 @mixin flex-grid(
   $breakpoints: $grid-breakpoints,
   $grid-gutter: $grid-gutter,
-  $condensed-gutter: $grid-gutter--condensed
+  $condensed-gutter: $grid-gutter-condensed
 ) {
   .#{$prefix}--grid {
     @include -make-container($breakpoints);
@@ -339,36 +361,3 @@
   @include -no-gutter();
   @include -hang($grid-gutter);
 }
-
-@if $flex-grid-columns == 12 {
-  $flex-12-column-grid: map.merge(
-    $grid-breakpoints,
-    (
-      lg:
-        map.merge(
-          map.get($grid-breakpoints, lg),
-          (
-            columns: 12,
-          )
-        ),
-      xlg:
-        map.merge(
-          map.get($grid-breakpoints, xlg),
-          (
-            columns: 12,
-          )
-        ),
-      max:
-        map.merge(
-          map.get($grid-breakpoints, max),
-          (
-            columns: 12,
-          )
-        ),
-    )
-  );
-
-  @include flex-grid($breakpoints: $flex-12-column-grid);
-} @else {
-  @include flex-grid();
-}

package/scss/type/modules/_default-type.scss

@@ -0,0 +1,55 @@
+//
+// 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 'styles' as *;
+
+/// Include default type styles
+/// @access public
+/// @group @carbon/type
+@mixin default-type {
+  h1 {
+    @include type-style('productive-heading-06');
+  }
+
+  h2 {
+    @include type-style('productive-heading-05');
+  }
+
+  h3 {
+    @include type-style('productive-heading-04');
+  }
+
+  h4 {
+    @include type-style('productive-heading-03');
+  }
+
+  h5 {
+    @include type-style('productive-heading-02');
+  }
+
+  h6 {
+    @include type-style('productive-heading-01');
+  }
+
+  p {
+    @include type-style('body-long-02');
+  }
+
+  a {
+    @if meta.global-variable-exists('carbon--theme') and
+      map.has-key($carbon--theme, 'link-01')
+    {
+      color: map.get($carbon--theme, 'link-01');
+    } @else {
+      color: #0062fe;
+    }
+  }
+
+  em {
+    font-style: italic;
+  }
+}

package/scss/type/modules/_reset.scss

@@ -9,7 +9,6 @@
 @use 'sass:meta';
 @use '@carbon/layout';
 @use 'font-family' as *;
-@use 'styles' as *;
 
 /// Include a type reset for a given body and mono font family
 /// @param {String} $body-font-family [font-family('sans')] - The font family used on the `<body>` element
@@ -43,50 +42,3 @@
     @include font-weight('semibold');
   }
 }
-
-/// Include default type styles
-/// @access public
-/// @group @carbon/type
-@mixin default-type {
-  h1 {
-    @include type-style('productive-heading-06');
-  }
-
-  h2 {
-    @include type-style('productive-heading-05');
-  }
-
-  h3 {
-    @include type-style('productive-heading-04');
-  }
-
-  h4 {
-    @include type-style('productive-heading-03');
-  }
-
-  h5 {
-    @include type-style('productive-heading-02');
-  }
-
-  h6 {
-    @include type-style('productive-heading-01');
-  }
-
-  p {
-    @include type-style('body-long-02');
-  }
-
-  a {
-    @if meta.global-variable-exists('carbon--theme') and
-      map.has-key($carbon--theme, 'link-01')
-    {
-      color: map.get($carbon--theme, 'link-01');
-    } @else {
-      color: #0062fe;
-    }
-  }
-
-  em {
-    font-style: italic;
-  }
-}

package/scss/type/modules/_styles.scss

@@ -9,6 +9,7 @@
 
 @use 'sass:map';
 @use 'sass:math';
+@use '../../grid/modules/config' as gridconfig;
 @use '../../grid/modules/breakpoint' as grid;
 @use 'font-family';
 @use 'scale';
@@ -716,7 +717,7 @@ $tokens: (
 /// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
 /// @access public
 /// @group @carbon/type
-@mixin fluid-type($type-styles, $breakpoints: grid.$grid-breakpoints) {
+@mixin fluid-type($type-styles, $breakpoints: gridconfig.$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()`
@@ -745,7 +746,7 @@ $tokens: (
 @mixin fluid-type-size(
   $type-styles,
   $name,
-  $breakpoints: grid.$grid-breakpoints
+  $breakpoints: gridconfig.$grid-breakpoints
 ) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
@@ -846,7 +847,11 @@ $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: grid.$grid-breakpoints) {
+@mixin type-style(
+  $name,
+  $fluid: false,
+  $breakpoints: gridconfig.$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/modules/_breakpoint.scss

@@ -5,25 +5,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use '../../../../../layout/modules/convert';
-
-/// Map deep get
-/// @author Hugo Giraudel
-/// @access public
-/// @param {Map} $map - Map
-/// @param {Arglist} $keys - Key chain
-/// @return {*} Desired value
-/// @group @carbon/layout
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map.get($map, $key);
-  }
-  @return $map;
-}
+@use 'config' as *;
 
 /// Provide a map and index, and get back the relevant key value
 /// @access public
@@ -31,65 +17,11 @@
 /// @param {Integer} $index - Key chain
 /// @return {String} Desired value
 /// @group @carbon/layout
-@function key-by-index($map, $index) {
+@function -key-by-index($map, $index) {
   $keys: map.keys($map);
   @return nth($keys, $index);
 }
 
-/// Pass in a map, and get the last one in the list back
-/// @access public
-/// @param {Map} $map - Map
-/// @return {*} Desired value
-/// @group @carbon/layout
-@function last-map-item($map) {
-  $total-length: list.length($map);
-  @return map-get($map, key-by-index($map, $total-length));
-}
-
-/// Carbon gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$grid-gutter: convert.rem(32px);
-
-/// Carbon condensed gutter size in rem
-/// @type Number
-/// @access public
-/// @group @carbon/layout
-$grid-gutter--condensed: convert.rem(1px);
-
-// Initial map of our breakpoints and their values
-/// @type Map
-/// @access public
-/// @group @carbon/layout
-$grid-breakpoints: (
-  sm: (
-    columns: 4,
-    margin: 0,
-    width: convert.rem(320px),
-  ),
-  md: (
-    columns: 8,
-    margin: convert.rem(16px),
-    width: convert.rem(672px),
-  ),
-  lg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1056px),
-  ),
-  xlg: (
-    columns: 16,
-    margin: convert.rem(16px),
-    width: convert.rem(1312px),
-  ),
-  max: (
-    columns: 16,
-    margin: convert.rem(24px),
-    width: convert.rem(1584px),
-  ),
-) !default;
-
 /// Get the value of the next breakpoint, or null for the last breakpoint
 /// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
@@ -145,7 +77,7 @@ $grid-breakpoints: (
 /// @group @carbon/layout
 @function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
   $total-breakpoints: list.length($breakpoints);
-  @return key-by-index($breakpoints, $total-breakpoints);
+  @return -key-by-index($breakpoints, $total-breakpoints);
 }
 
 /// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.

package/scss/type/vendor/@carbon/grid/modules/_config.scss

@@ -5,14 +5,90 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+@use '../../../../../layout/modules/convert';
+
 /// Namespace prefix
 /// @type String
 /// @access public
 /// @group @carbon/grid
-$prefix: 'bx' !default;
+$prefix: 'cds' !default;
 
 /// Total columns used in the flex grid
 /// @type Number
 /// @access public
 /// @group @carbon/grid
 $flex-grid-columns: 16 !default;
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.rem(32px) !default;
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter-condensed: convert.rem(1px) !default;
+
+// Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+) !default;
+
+@if $flex-grid-columns == 12 {
+  $grid-breakpoints: map.merge(
+    $grid-breakpoints,
+    (
+      lg:
+        map.merge(
+          map.get($grid-breakpoints, lg),
+          (
+            columns: 12,
+          )
+        ),
+      xlg:
+        map.merge(
+          map.get($grid-breakpoints, xlg),
+          (
+            columns: 12,
+          )
+        ),
+      max:
+        map.merge(
+          map.get($grid-breakpoints, max),
+          (
+            columns: 12,
+          )
+        ),
+    )
+  );
+}