@carbon/type 10.40.0 → 10.42.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.40.0",
+  "version": "10.42.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,11 +37,11 @@
     "clean": "rimraf css es lib umd scss/_inlined scss/vendor"
   },
   "dependencies": {
-    "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.35.0"
+    "@carbon/grid": "^10.42.0-rc.0",
+    "@carbon/import-once": "^10.7.0-rc.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.32.0",
+    "@carbon/cli": "^10.34.0-rc.0",
     "@carbon/test-utils": "^10.21.0",
     "change-case": "^4.1.1",
     "rimraf": "^3.0.0"
@@ -52,5 +52,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "ac4b4bf03cf93cb8463916231619fbfdc72f0be5"
+  "gitHead": "e41618f5aaa9a10ce93edd844f1a280dc29eaf50"
 }

package/scss/_inlined/_reset.scss

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

package/scss/_inlined/_scale.scss

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

package/scss/_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 '@carbon/layout/scss/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

package/scss/_inlined/_styles.scss

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

package/scss/_styles.import.scss

@@ -21,9 +21,9 @@
 
 @use "sass:meta";
 @use "sass:math";
-@import '@carbon/layout/scss/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 '@carbon/layout/scss/breakpoint';
+@import 'font-family';
+@import 'scale';
 
 /// @type Map
 /// @access public

package/scss/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/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/modules/_styles.scss

@@ -8,7 +8,8 @@
 // stylelint-disable number-max-precision
 
 @use 'sass:map';
-@use '@carbon/layout';
+@use 'sass:math';
+@use '@carbon/grid/scss/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/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/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);