@carbon/type 10.44.0-rc.0 → 11.0.0

package/scss/_inlined/_styles.scss

@@ -4,75 +4,32 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-//-------------------------------------------
-// Compatibility notes
-// ------------------------------------------
-//
-// This file is intended to be consumed and processed with node-sass/libsass.
-// Sass language features only available in dart-sass, such as `math.div`,
-// should not be used.
-//
-// The `.import` suffixed version of this file eg. `_filename.import.scss`
-// is intended to be compatible with dart-sass.
-//
-// Styles authored within this file must be duplicated to the corresponding
-// compatibility file to ensure we continue to support node-sass and dart-sass
-// in v10.
 
 // stylelint-disable number-max-precision
 
-@import '@carbon/layout/scss/breakpoint';
-@import 'font-family';
-@import 'scale';
-
-/// @type Map
-/// @access public
-/// @deprecated
-/// @group @carbon/type
-$caption-01: (
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 1.33333,
-  letter-spacing: 0.32px,
-) !default;
-
-/// @type Map
-/// @access public
-/// @deprecated
-/// @group @carbon/type
-$caption-02: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 1.28572,
-  letter-spacing: 0.32px,
-) !default;
+@use 'sass:map';
+@use 'sass:math';
+@use '@carbon/grid/scss/config' as gridconfig;
+@use '@carbon/grid/scss/breakpoint' as grid;
+@use 'font-family';
+@use 'scale';
 
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $label-01: (
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(1),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
-/// @type Map
-/// @access public
-/// @group @carbon/type
-$label-02: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 1.28572,
-  letter-spacing: 0.16px,
-) !default;
-
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $legal-01: (
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(1),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
@@ -81,8 +38,8 @@ $legal-01: (
 /// @access public
 /// @group @carbon/type
 $legal-02: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.28572,
   letter-spacing: 0.16px,
 ) !default;
@@ -92,28 +49,17 @@ $legal-02: (
 /// @deprecated
 /// @group @carbon/type
 $helper-text-01: (
-  font-size: carbon--type-scale(1),
+  font-size: scale.type-scale(1),
   line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
 
-/// @type Map
-/// @access public
-/// @deprecated
-/// @group @carbon/type
-$helper-text-02: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
-  line-height: 1.28572,
-  letter-spacing: 0.16px,
-) !default;
-
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $body-short-01: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.28572,
   letter-spacing: 0.16px,
 ) !default;
@@ -127,8 +73,8 @@ $body-compact-01: $body-short-01 !default;
 /// @access public
 /// @group @carbon/type
 $body-long-01: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.42857,
   letter-spacing: 0.16px,
 ) !default;
@@ -142,8 +88,8 @@ $body-01: $body-long-01 !default;
 /// @access public
 /// @group @carbon/type
 $body-short-02: (
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(3),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.375,
   letter-spacing: 0,
 ) !default;
@@ -157,8 +103,8 @@ $body-compact-02: $body-short-02 !default;
 /// @access public
 /// @group @carbon/type
 $body-long-02: (
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(3),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.5,
   letter-spacing: 0,
 ) !default;
@@ -172,9 +118,9 @@ $body-02: $body-long-02 !default;
 /// @access public
 /// @group @carbon/type
 $code-01: (
-  font-family: carbon--font-family('mono'),
-  font-size: carbon--type-scale(1),
-  font-weight: carbon--font-weight('regular'),
+  font-family: font-family.font-family('mono'),
+  font-size: scale.type-scale(1),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.33333,
   letter-spacing: 0.32px,
 ) !default;
@@ -183,9 +129,9 @@ $code-01: (
 /// @access public
 /// @group @carbon/type
 $code-02: (
-  font-family: carbon--font-family('mono'),
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('regular'),
+  font-family: font-family.font-family('mono'),
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.42857,
   letter-spacing: 0.32px,
 ) !default;
@@ -194,8 +140,8 @@ $code-02: (
 /// @access public
 /// @group @carbon/type
 $heading-01: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.42857,
   letter-spacing: 0.16px,
 ) !default;
@@ -204,8 +150,8 @@ $heading-01: (
 /// @access public
 /// @group @carbon/type
 $productive-heading-01: (
-  font-size: carbon--type-scale(2),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(2),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.28572,
   letter-spacing: 0.16px,
 ) !default;
@@ -219,8 +165,8 @@ $heading-compact-01: $productive-heading-01 !default;
 /// @access public
 /// @group @carbon/type
 $heading-02: (
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(3),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.5,
   letter-spacing: 0,
 ) !default;
@@ -229,24 +175,23 @@ $heading-02: (
 /// @access public
 /// @group @carbon/type
 $productive-heading-02: (
-  font-size: carbon--type-scale(3),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(3),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.375,
   letter-spacing: 0,
 ) !default;
 
+/// @type Map
+/// @access public
+/// @group @carbon/type
 $heading-compact-02: $productive-heading-02 !default;
 
-// Question for designers:
-// heading-02 currently maps to productive heading-02
-// what are the styles for heading-compact-02?
-
 /// @type Map
 /// @access public
 /// @group @carbon/type
 $productive-heading-03: (
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(5),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.4,
   letter-spacing: 0,
 ) !default;
@@ -260,8 +205,8 @@ $heading-03: $productive-heading-03 !default;
 /// @access public
 /// @group @carbon/type
 $productive-heading-04: (
-  font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(7),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.28572,
   letter-spacing: 0,
 ) !default;
@@ -275,8 +220,8 @@ $heading-04: $productive-heading-04 !default;
 /// @access public
 /// @group @carbon/type
 $productive-heading-05: (
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(8),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.25,
   letter-spacing: 0,
 ) !default;
@@ -290,8 +235,8 @@ $heading-05: $productive-heading-05 !default;
 /// @access public
 /// @group @carbon/type
 $productive-heading-06: (
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
+  font-size: scale.type-scale(8),
+  font-weight: font-family.font-weight('light'),
   // Extra digit needed for precision in Chrome
   line-height: 1.199,
   letter-spacing: 0,
@@ -306,8 +251,8 @@ $heading-06: $productive-heading-06 !default;
 /// @access public
 /// @group @carbon/type
 $productive-heading-07: (
-  font-size: carbon--type-scale(12),
-  font-weight: carbon--font-weight('light'),
+  font-size: scale.type-scale(10),
+  font-weight: font-family.font-weight('light'),
   line-height: 1.19,
   letter-spacing: 0,
 ) !default;
@@ -331,18 +276,18 @@ $expressive-heading-02: $heading-02 !default;
 /// @access public
 /// @group @carbon/type
 $expressive-heading-03: (
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(5),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.4,
   letter-spacing: 0,
   breakpoints: (
     xlg: (
-      font-size: carbon--type-scale(5),
+      font-size: scale.type-scale(5),
       line-height: 1.25,
     ),
     max: (
-      font-size: carbon--type-scale(6),
-      line-height: 1.33333,
+      font-size: scale.type-scale(6),
+      line-height: 1.334,
     ),
   ),
 ) !default;
@@ -356,17 +301,17 @@ $fluid-heading-03: $expressive-heading-03 !default;
 /// @access public
 /// @group @carbon/type
 $expressive-heading-04: (
-  font-size: carbon--type-scale(7),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(7),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.28572,
   letter-spacing: 0,
   breakpoints: (
     xlg: (
-      font-size: carbon--type-scale(7),
+      font-size: scale.type-scale(7),
       line-height: 1.25,
     ),
     max: (
-      font-size: carbon--type-scale(8),
+      font-size: scale.type-scale(8),
     ),
   ),
 ) !default;
@@ -380,26 +325,26 @@ $fluid-heading-04: $expressive-heading-04 !default;
 /// @access public
 /// @group @carbon/type
 $expressive-heading-05: (
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
+  font-size: scale.type-scale(8),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(9),
-      font-weight: carbon--font-weight('light'),
+      font-size: scale.type-scale(9),
+      font-weight: font-family.font-weight('light'),
       line-height: 1.22,
     ),
     lg: (
-      font-size: carbon--type-scale(10),
+      font-size: scale.type-scale(10),
       line-height: 1.19,
     ),
     xlg: (
-      font-size: carbon--type-scale(11),
+      font-size: scale.type-scale(11),
       line-height: 1.17,
     ),
     max: (
-      font-size: carbon--type-scale(13),
+      font-size: scale.type-scale(13),
     ),
   ),
 ) !default;
@@ -413,25 +358,25 @@ $fluid-heading-05: $expressive-heading-05 !default;
 /// @access public
 /// @group @carbon/type
 $expressive-heading-06: (
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(8),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(9),
+      font-size: scale.type-scale(9),
       line-height: 1.22,
     ),
     lg: (
-      font-size: carbon--type-scale(10),
+      font-size: scale.type-scale(10),
       line-height: 1.19,
     ),
     xlg: (
-      font-size: carbon--type-scale(11),
+      font-size: scale.type-scale(11),
       line-height: 1.17,
     ),
     max: (
-      font-size: carbon--type-scale(13),
+      font-size: scale.type-scale(13),
     ),
   ),
 ) !default;
@@ -445,17 +390,17 @@ $fluid-heading-06: $expressive-heading-06 !default;
 /// @access public
 /// @group @carbon/type
 $expressive-paragraph-01: (
-  font-size: carbon--type-scale(6),
-  font-weight: carbon--font-weight('light'),
-  line-height: 1.33333,
+  font-size: scale.type-scale(6),
+  font-weight: font-family.font-weight('light'),
+  line-height: 1.334,
   letter-spacing: 0,
   breakpoints: (
     lg: (
-      font-size: carbon--type-scale(7),
+      font-size: scale.type-scale(7),
       line-height: 1.28572,
     ),
     max: (
-      font-size: carbon--type-scale(8),
+      font-size: scale.type-scale(8),
       line-height: 1.25,
     ),
   ),
@@ -470,25 +415,25 @@ $fluid-paragraph-01: $expressive-paragraph-01 !default;
 /// @access public
 /// @group @carbon/type
 $quotation-01: (
-  font-family: carbon--font-family('serif'),
-  font-size: carbon--type-scale(5),
-  font-weight: carbon--font-weight('regular'),
+  font-family: font-family.font-family('serif'),
+  font-size: scale.type-scale(5),
+  font-weight: font-family.font-weight('regular'),
   line-height: 1.3,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(5),
+      font-size: scale.type-scale(5),
     ),
     lg: (
-      font-size: carbon--type-scale(6),
-      line-height: 1.33333,
+      font-size: scale.type-scale(6),
+      line-height: 1.334,
     ),
     xlg: (
-      font-size: carbon--type-scale(7),
+      font-size: scale.type-scale(7),
       line-height: 1.28572,
     ),
     max: (
-      font-size: carbon--type-scale(8),
+      font-size: scale.type-scale(8),
       line-height: 1.25,
     ),
   ),
@@ -503,26 +448,26 @@ $fluid-quotation-01: $quotation-01 !default;
 /// @access public
 /// @group @carbon/type
 $quotation-02: (
-  font-family: carbon--font-family('serif'),
-  font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('light'),
+  font-family: font-family.font-family('serif'),
+  font-size: scale.type-scale(8),
+  font-weight: font-family.font-weight('light'),
   line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(9),
+      font-size: scale.type-scale(9),
       line-height: 1.22,
     ),
     lg: (
-      font-size: carbon--type-scale(10),
+      font-size: scale.type-scale(10),
       line-height: 1.19,
     ),
     xlg: (
-      font-size: carbon--type-scale(11),
+      font-size: scale.type-scale(11),
       line-height: 1.17,
     ),
     max: (
-      font-size: carbon--type-scale(13),
+      font-size: scale.type-scale(13),
     ),
   ),
 ) !default;
@@ -536,23 +481,23 @@ $fluid-quotation-02: $quotation-02 !default;
 /// @access public
 /// @group @carbon/type
 $display-01: (
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
+  font-size: scale.type-scale(10),
+  font-weight: font-family.font-weight('light'),
   line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(10),
+      font-size: scale.type-scale(10),
     ),
     lg: (
-      font-size: carbon--type-scale(12),
+      font-size: scale.type-scale(12),
     ),
     xlg: (
-      font-size: carbon--type-scale(13),
+      font-size: scale.type-scale(13),
       line-height: 1.17,
     ),
     max: (
-      font-size: carbon--type-scale(15),
+      font-size: scale.type-scale(15),
       line-height: 1.13,
     ),
   ),
@@ -567,23 +512,23 @@ $fluid-display-01: $display-01 !default;
 /// @access public
 /// @group @carbon/type
 $display-02: (
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(10),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(10),
+      font-size: scale.type-scale(10),
     ),
     lg: (
-      font-size: carbon--type-scale(12),
+      font-size: scale.type-scale(12),
     ),
     xlg: (
-      font-size: carbon--type-scale(13),
+      font-size: scale.type-scale(13),
       line-height: 1.16,
     ),
     max: (
-      font-size: carbon--type-scale(15),
+      font-size: scale.type-scale(15),
       line-height: 1.13,
     ),
   ),
@@ -598,27 +543,27 @@ $fluid-display-02: $display-02 !default;
 /// @access public
 /// @group @carbon/type
 $display-03: (
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('light'),
+  font-size: scale.type-scale(10),
+  font-weight: font-family.font-weight('light'),
   line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(14),
+      font-size: scale.type-scale(14),
       line-height: 1.15,
     ),
     lg: (
-      font-size: carbon--type-scale(17),
+      font-size: scale.type-scale(17),
       line-height: 1.11,
       letter-spacing: -0.64px,
     ),
     xlg: (
-      font-size: carbon--type-scale(20),
+      font-size: scale.type-scale(20),
       line-height: 1.07,
       letter-spacing: -0.64px,
     ),
     max: (
-      font-size: carbon--type-scale(23),
+      font-size: scale.type-scale(23),
       line-height: 1.05,
       letter-spacing: -0.96px,
     ),
@@ -634,27 +579,27 @@ $fluid-display-03: $display-03 !default;
 /// @access public
 /// @group @carbon/type
 $display-04: (
-  font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
+  font-size: scale.type-scale(10),
+  font-weight: font-family.font-weight('semibold'),
   line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(14),
+      font-size: scale.type-scale(14),
       line-height: 1.15,
     ),
     lg: (
-      font-size: carbon--type-scale(17),
+      font-size: scale.type-scale(17),
       line-height: 1.11,
       letter-spacing: -0.64px,
     ),
     xlg: (
-      font-size: carbon--type-scale(20),
+      font-size: scale.type-scale(20),
       line-height: 1.07,
       letter-spacing: -0.64px,
     ),
     max: (
-      font-size: carbon--type-scale(23),
+      font-size: scale.type-scale(23),
       line-height: 1.05,
       letter-spacing: -0.96px,
     ),
@@ -670,12 +615,8 @@ $fluid-display-04: $display-04 !default;
 /// @access public
 /// @group @carbon/type
 $tokens: (
-  caption-01: $caption-01,
-  caption-02: $caption-02,
   label-01: $label-01,
-  label-02: $label-02,
   helper-text-01: $helper-text-01,
-  helper-text-02: $helper-text-02,
   body-short-01: $body-short-01,
   body-short-02: $body-short-02,
   body-long-01: $body-long-01,
@@ -745,7 +686,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
@@ -761,14 +702,14 @@ $tokens: (
 /// https://css-tricks.com/snippets/css/fluid-typography/
 ///
 /// @param {Map} $type-styles - The value of a given type token
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Custom breakpoints to use
+/// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use
 /// @access public
 /// @group @carbon/type
-@mixin fluid-type($type-styles, $breakpoints: $carbon--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()`
-  @include properties(map-remove($type-styles, breakpoints));
+  @include properties(map.remove($type-styles, breakpoints));
   // We also need to include the `sm` styles by default since they don't
   // appear in the fluid styles for tokens
   @include fluid-type-size($type-styles, sm, $breakpoints);
@@ -776,8 +717,8 @@ $tokens: (
   // Finally, we need to go through all the breakpoints defined in the type
   // token and apply the properties and fluid type size for that given
   // breakpoint
-  @each $name, $values in map-get($type-styles, breakpoints) {
-    @include carbon--breakpoint($name) {
+  @each $name, $values in map.get($type-styles, breakpoints) {
+    @include grid.breakpoint($name) {
       @include properties($values);
       @include fluid-type-size($type-styles, $name, $breakpoints);
     }
@@ -787,44 +728,44 @@ $tokens: (
 /// Computes the fluid `font-size` for a given type style and breakpoint
 /// @param {Map} $type-styles - The styles for a given token
 /// @param {String} $name - The name of the breakpoint to which we apply the fluid
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - The breakpoints for the grid system
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints for the grid system
 /// @access public
 /// @group @carbon/type
 @mixin fluid-type-size(
   $type-styles,
   $name,
-  $breakpoints: $carbon--grid-breakpoints
+  $breakpoints: gridconfig.$grid-breakpoints
 ) {
   // Get the information about the breakpoint we're currently working in. Useful
   // for getting initial width information
-  $breakpoint: map-get($breakpoints, $name);
+  $breakpoint: map.get($breakpoints, $name);
 
   // Our fluid styles are captured under the 'breakpoints' property in our type
   // styles map. These define what values to treat as `max-` variables below
-  $fluid-sizes: map-get($type-styles, breakpoints);
+  $fluid-sizes: map.get($type-styles, breakpoints);
   $fluid-breakpoint: ();
   // Special case for `sm` because the styles for small are on the type style
   // directly
   @if $name == sm {
-    $fluid-breakpoint: map-remove($type-styles, breakpoints);
+    $fluid-breakpoint: map.remove($type-styles, breakpoints);
   } @else {
-    $fluid-breakpoint: map-get($fluid-sizes, $name);
+    $fluid-breakpoint: map.get($fluid-sizes, $name);
   }
 
   // Initialize our font-sizes to the default size for the type style
-  $max-font-size: map-get($type-styles, font-size);
-  $min-font-size: map-get($type-styles, font-size);
-  @if map-has-key($fluid-breakpoint, font-size) {
-    $min-font-size: map-get($fluid-breakpoint, font-size);
+  $max-font-size: map.get($type-styles, font-size);
+  $min-font-size: map.get($type-styles, font-size);
+  @if map.has-key($fluid-breakpoint, font-size) {
+    $min-font-size: map.get($fluid-breakpoint, font-size);
   }
 
   // Initialize our min and max width to the width of the current breakpoint
-  $max-vw: map-get($breakpoint, width);
-  $min-vw: map-get($breakpoint, width);
+  $max-vw: map.get($breakpoint, width);
+  $min-vw: map.get($breakpoint, width);
 
   // 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: carbon--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
@@ -832,11 +773,11 @@ $tokens: (
   // until we either manually set $next-breakpoint-available to null or
   // `breakpoint-next` returns null.
   @while $next-breakpoint-available {
-    @if map-has-key($fluid-sizes, $next-breakpoint-available) {
+    @if map.has-key($fluid-sizes, $next-breakpoint-available) {
       $next-fluid-breakpoint-name: $next-breakpoint-available;
       $next-breakpoint-available: null;
     } @else {
-      $next-breakpoint-available: carbon--breakpoint-next(
+      $next-breakpoint-available: grid.breakpoint-next(
         $next-breakpoint-available,
         $breakpoints
       );
@@ -847,12 +788,12 @@ $tokens: (
   // that we have values that we can use to set max-font-size and max-vw as both
   // values derive from the next breakpoint
   @if $next-fluid-breakpoint-name {
-    $next-fluid-breakpoint: map-get($breakpoints, $next-fluid-breakpoint-name);
-    $max-font-size: map-get(
-      map-get($fluid-sizes, $next-fluid-breakpoint-name),
+    $next-fluid-breakpoint: map.get($breakpoints, $next-fluid-breakpoint-name);
+    $max-font-size: map.get(
+      map.get($fluid-sizes, $next-fluid-breakpoint-name),
       font-size
     );
-    $max-vw: map-get($next-fluid-breakpoint, width);
+    $max-vw: map.get($next-fluid-breakpoint, width);
 
     // prettier-ignore
     font-size: calc(#{$min-font-size} +
@@ -891,34 +832,25 @@ $custom-property-prefix: 'cds' !default;
 /// with caution in fixed contexts.
 /// @param {String} $name - The name of the token to get the styles for
 /// @param {Boolean} $fluid [false] - Specify whether to include fluid styles for the
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - Provide a custom breakpoint map to use
+/// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use
 /// @access public
 /// @group @carbon/type
-@mixin carbon--type-style(
+@mixin type-style(
   $name,
   $fluid: false,
-  $breakpoints: $carbon--grid-breakpoints
+  $breakpoints: gridconfig.$grid-breakpoints
 ) {
-  @if not map-has-key($tokens, $name) {
+  @if not map.has-key($tokens, $name) {
     @error 'Unable to find a token with the name: `#{$name}`';
   }
 
-  $token: map-get($tokens, $name);
+  $token: map.get($tokens, $name);
 
   // If $fluid is set to true and the token has breakpoints defined for fluid
   // styles, delegate to the fluid-type helper for the given token
-  // Otherwise remove token breakpoints
-  @if $fluid == true and map-has-key($token, 'breakpoints') {
+  @if $fluid == true and map.has-key($token, 'breakpoints') {
     @include fluid-type($token, $breakpoints);
   } @else {
-    @if global-variable-exists('feature-flags') and
-      map-get($feature-flags, 'enable-css-custom-properties')
-    {
-      @include custom-properties($name, map-remove($token, 'breakpoints'));
-    } @else {
-      // Otherwise, we just include all the property declarations directly on the
-      // selector
-      @include properties(map-remove($token, 'breakpoints'));
-    }
+    @include custom-properties($name, $token);
   }
 }