@carbon/grid 10.41.0 → 10.43.0

package/index.scss

@@ -5,10 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward 'scss/modules/config' with (
-  $prefix: 'bx' !default,
-  $flex-grid-columns: 16 !default,
-);
+@forward 'scss/modules/config';
 @forward 'scss/modules/breakpoint';
 @forward 'scss/modules/css-grid';
 @forward 'scss/modules/flex-grid';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.41.0",
+  "version": "10.43.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,11 +32,11 @@
     "clean": "rimraf scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.36.0"
+    "@carbon/import-once": "^10.7.0",
+    "@carbon/layout": "^10.37.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.33.0",
+    "@carbon/cli": "^10.34.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -45,5 +45,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "6a49764a3df2cc3e3b8fce6575f4853d1400e183"
+  "gitHead": "05b57e9181903cb87173d48a0635691a2e942e30"
 }

package/scss/_inlined/_mixins.import.scss

@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '../vendor/@carbon/layout/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '../vendor/@carbon/layout/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

package/scss/_mixins.import.scss

@@ -25,8 +25,8 @@
 
 @use 'sass:meta';
 @use 'sass:math';
-@import '@carbon/layout/scss/breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
-@import 'prefix'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import '@carbon/layout/scss/breakpoint';
+@import 'prefix';
 
 // -----------------------------------------------------------------------------
 // Columns

package/scss/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 '@carbon/layout/scss/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) {
-  $keys: map-keys($map);
+@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: 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/modules/_config.scss

@@ -5,14 +5,90 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:map';
+@use '@carbon/layout/scss/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,
+          )
+        ),
+    )
+  );
+}