@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/styles/core/styles/tokens/theme/_tokens.surface.scss

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme/utils' as theme-utils;
+@use '../../theme/color-utils';
+@use '../../elevation';
+@use './color-emphasis';
+@use '../color-palette';
+
+///
+/// Computes the surface theme colors.
+/// 
+/// @param {Map} $theme - The surface theme map.
+/// @return {Map} - The computed surface theme map
+/// 
+@function get-surface-theme($theme) {
+  $surface: map.get($theme, surface);
+  $on-surface: theme-utils.contrast($surface);
+  $surface-tone: color-utils.tone($surface);
+  $surface-inverse: theme-utils.hexify($on-surface, $surface, color-emphasis.value(inverse));
+
+  $surface-container: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower));
+  $surface-container-low: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lowest));
+  $surface-container-medium: theme-utils.hexify($on-surface, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
+  $surface-container-high: theme-utils.hexify($on-surface, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
+
+  @return (
+    surface: $surface,
+    surface-inverse: $surface-inverse,
+    surface-container: $surface-container,
+    surface-container-low: $surface-container-low,
+    surface-container-medium: $surface-container-medium,
+    surface-container-high: $surface-container-high,
+    surface-dim: map.get($theme, surface-dim),
+    surface-bright: map.get($theme, surface-bright),
+    surface-bright-shadow: map.get($theme, surface-bright-shadow),
+    on-surface: $on-surface,
+    on-surface-inverse: theme-utils.contrast($surface-inverse),
+    on-surface-container: theme-utils.contrast($surface-container),
+    on-surface-container-low: theme-utils.contrast($surface-container-low),
+    on-surface-container-medium: theme-utils.contrast($surface-container-medium),
+    on-surface-container-high: theme-utils.contrast($surface-container-high)
+  );
+}
+
+// Light
+$tokens: get-surface-theme((
+  surface: color-palette.$neutral-50,
+  surface-bright: color-palette.$neutral-50,
+  surface-bright-shadow: elevation.value(2),
+  surface-dim: color-palette.$grey-50
+));
+
+// Dark
+$surface-dark: color-palette.$neutral-900;
+$on-surface-dark: theme-utils.contrast($surface-dark);
+$tokens-dark: get-surface-theme((
+  surface: color-palette.$neutral-900,
+  surface-bright: theme-utils.hexify($on-surface-dark, $surface-dark, color-emphasis.value(minimum)),
+  surface-bright-shadow: elevation.value(16),
+  surface-dim: color-palette.$grey-900
+));

package/styles/core/styles/tokens/theme/_tokens.text.scss

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme/utils' as theme-utils;
+@use './color-emphasis';
+@use './tokens.surface' as surface;
+
+///
+/// Computes the text theme colors.
+/// 
+/// @param {Color} $surface-theme - The base surface theme
+/// @return {Map} - The computed text theme
+/// 
+@function get-text-theme($surface-theme) {
+  $surface: map.get($surface-theme, surface);
+  $text: theme-utils.contrast($surface);
+  $text-inverse: theme-utils.contrast($text);
+
+  @return (
+    text-high: theme-utils.emphasized($text, color-emphasis.value(highest)),
+    text-high-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(highest)),
+    text-medium: theme-utils.emphasized($text, color-emphasis.value(medium)),
+    text-medium-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium)),
+    text-low: theme-utils.emphasized($text, color-emphasis.value(medium-low)),
+    text-low-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium-low)),
+    text-lowest: theme-utils.emphasized($text, color-emphasis.value(lowest)),
+    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lowest)),
+  );
+}
+
+// Light
+$tokens: get-text-theme(surface.$tokens);
+
+// Dark
+$tokens-dark: get-text-theme(surface.$tokens-dark);

package/styles/core/styles/tokens/theme/_tokens.utilities.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme/utils' as theme-utils;
+@use './color-emphasis';
+@use './tokens.surface' as surface;
+
+///
+/// Computes the utilities theme colors.
+/// 
+/// @param {Color} $surface-theme - The base surface theme
+/// @return {Map} - The computed utilities theme 
+///
+@function get-utilities-theme($surface-theme) {
+  $surface: map.get($surface-theme, surface);
+  $on-surface: map.get($surface-theme, on-surface);
+
+  @return (
+    outline: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower))
+  );
+}
+
+// Light
+$tokens: get-utilities-theme(surface.$tokens);
+
+// Dark
+$tokens-dark: get-utilities-theme(surface.$tokens-dark);

package/styles/core/styles/tokens/typography/_scale.scss

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+
+$scale: (
+  '0750': 0.75,  // 12px
+  '0875': 0.875, // 14px
+  '1000': 1,     // 16px
+  '1125': 1.125, // 18px
+  '1250': 1.25,  // 20px
+  '1375': 1.375, // 22px
+  '1500': 1.5,   // 24px
+  '1750': 1.75,  // 28px
+  '2000': 2,     // 32px
+  '2125': 2.125, // 34px
+  '2250': 2.25,  // 36px
+  '2500': 2.5,   // 40px
+  '2625': 2.625, // 42px
+  '2750': 2.75,  // 44px
+  '3000': 3,     // 48px
+  '3250': 3.25,  // 52px
+  '3500': 3.5,   // 56px
+  '3750': 3.75,  // 60px
+  '4000': 4,     // 64px
+  '4250': 4.25,  // 68px
+  '4500': 4.5,   // 72px
+  '4750': 4.75,  // 76px
+  '5000': 5      // 80px
+) !default;
+
+@function value($key) {
+  @if not map.has-key($scale, $key) {
+    @error 'Unknown scale value `#{$key}`.';
+  }
+  @return map.get($scale, $key);
+}

package/styles/core/styles/tokens/typography/_tokens.body.scss

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use '../../utils';
+@use './scale';
+@use './type-utils';
+@use './tokens.core' as core;
+
+$body1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '0875'),
+  line-height: type-utils.font-size-relative(body, line-height, '1125'),
+  letter-spacing: type-utils.calc-letter-spacing(0.5, scale.value('0875'))
+)) !default;
+
+$body2: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1000'),
+  line-height: type-utils.font-size-relative(body, line-height, '1375'),
+  letter-spacing: type-utils.calc-letter-spacing(0.25, scale.value('1000'))
+)) !default;
+
+$body3: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1125'),
+  line-height: type-utils.font-size-relative(body, line-height, '1500'),
+  letter-spacing: type-utils.calc-letter-spacing(0.15, scale.value('1125'))
+)) !default;
+
+$body4: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1250'),
+  line-height: type-utils.font-size-relative(body, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0.1, scale.value('1250'))
+)) !default;
+
+$tokens: (
+  body1: $body1,
+  body2: $body2,
+  body3: $body3,
+  body4: $body4
+) !default;

package/styles/core/styles/tokens/typography/_tokens.core.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../core/config';
+@use './weight';
+
+// Base typography style values
+$font-family: 'Roboto', sans-serif !default;
+$font-size: 1rem !default; // 16px
+
+// The base typography styles that other styles inherit from.
+$base: (
+  font-family: utils.create-var(typography, font-family, $font-family),
+  font-size: utils.create-var(typography, font-size, $font-size),
+  font-weight: weight.value(regular),
+  line-height: normal,
+  letter-spacing: normal,
+  text-transform: inherit,
+  text-decoration: inherit
+) !default;
+
+@function get($key) {
+  @if not map.has-key($base, $key) {
+    @error 'No typography style exists with the key `#{$key}`.';
+  }
+  @return map.get($base, $key);
+}

package/styles/core/styles/tokens/typography/_tokens.display.scss

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../utils';
+@use './type-utils';
+@use './tokens.core' as core;
+@use './weight';
+@use './scale';
+
+$display1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(display1, font-size, '1500'),
+  font-weight: weight.value(light),
+  line-height: type-utils.font-size-relative(display1, line-height, '2250')
+)) !default;
+
+$display2: utils.inherit-map($display1, (
+  font-size: type-utils.font-size-relative(display2, font-size, '1750'),
+  line-height: type-utils.font-size-relative(display2, line-height, '2250')
+)) !default;
+
+$display3: utils.inherit-map($display2, (
+  font-size: type-utils.font-size-relative(display3, font-size, '2000'),
+  line-height: type-utils.font-size-relative(display3, line-height, '2500')
+)) !default;
+
+$display4: utils.inherit-map($display3, (
+  font-size: type-utils.font-size-relative(display4, font-size, '2250'),
+  line-height: type-utils.font-size-relative(display4, line-height, '2750'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.25, scale.value('2250'))
+)) !default;
+
+$display5: utils.inherit-map($display4, (
+  font-size: type-utils.font-size-relative(display5, font-size, '2500'),
+  line-height: type-utils.font-size-relative(display5, line-height, '3000'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.5, scale.value('2500'))
+)) !default;
+
+$display6: utils.inherit-map($display5, (
+  font-size: type-utils.font-size-relative(display6, font-size, '3000'),
+  line-height: type-utils.font-size-relative(display6, line-height, '4000'),
+  letter-spacing: type-utils.calc-letter-spacing(-1, scale.value('3000'))
+)) !default;
+
+$display7: utils.inherit-map($display6, (
+  font-size: type-utils.font-size-relative(display7, font-size, '3500'),
+  line-height: type-utils.font-size-relative(display7, line-height, '4500'),
+  letter-spacing: type-utils.calc-letter-spacing(-1.5, scale.value('3500'))
+)) !default;
+
+$display8: utils.inherit-map($display7, (
+  font-size: type-utils.font-size-relative(display8, font-size, '4000'),
+  line-height: type-utils.font-size-relative(display8, line-height, '4750'),
+  letter-spacing: type-utils.calc-letter-spacing(-2, scale.value('4000'))
+)) !default;
+
+$tokens: (
+  display1: $display1,
+  display2: $display2,
+  display3: $display3,
+  display4: $display4,
+  display5: $display5,
+  display6: $display6,
+  display7: $display7,
+  display8: $display8
+) !default;

package/styles/core/styles/tokens/typography/_tokens.heading.scss

@@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../utils';
+@use './type-utils';
+@use './scale';
+@use './weight';
+@use './tokens.core' as core;
+
+$heading1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(heading1, font-size, '0875'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(heading1, line-height, '1125'),
+  letter-spacing: type-utils.calc-letter-spacing(0.25, scale.value('0875'))
+)) !default;
+
+$heading2: utils.inherit-map($heading1, (
+  font-size: type-utils.font-size-relative(heading2, font-size, '1000'),
+  line-height: type-utils.font-size-relative(heading2, line-height, '1250'),
+  letter-spacing: type-utils.calc-letter-spacing(0.2, scale.value('1000'))
+)) !default;
+
+$heading3: utils.inherit-map($heading2, (
+  font-size: type-utils.font-size-relative(heading3, font-size, '1125'),
+  line-height: type-utils.font-size-relative(heading3, line-height, '1375'),
+  letter-spacing: type-utils.calc-letter-spacing(0.15, scale.value('1125'))
+)) !default;
+
+$heading4: utils.inherit-map($heading3, (
+  font-size: type-utils.font-size-relative(heading4, font-size, '1250'),
+  line-height: type-utils.font-size-relative(heading4, line-height, '1500'),
+  letter-spacing: type-utils.calc-letter-spacing(0.1, scale.value('1250'))
+)) !default;
+
+$heading5: utils.inherit-map($heading4, (
+  font-size: type-utils.font-size-relative(heading5, font-size, '1500'),
+  line-height: type-utils.font-size-relative(heading5, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1500'))
+)) !default;
+
+$heading6: utils.inherit-map($heading5, (
+  font-size: type-utils.font-size-relative(heading6, font-size, '1750'),
+  line-height: type-utils.font-size-relative(heading6, line-height, '2125'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1750'))
+)) !default;
+
+$heading7: utils.inherit-map($heading6, (
+  font-size: type-utils.font-size-relative(heading7, font-size, '2000'),
+  line-height: type-utils.font-size-relative(heading7, line-height, '2500'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.05, scale.value('2000'))
+)) !default;
+
+$heading8: utils.inherit-map($heading7, (
+  font-size: type-utils.font-size-relative(heading8, font-size, '2250'),
+  line-height: type-utils.font-size-relative(heading8, line-height, '2625'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.1, scale.value('2250'))
+)) !default;
+
+$tokens: (
+  heading1: $heading1,
+  heading2: $heading2,
+  heading3: $heading3,
+  heading4: $heading4,
+  heading5: $heading5,
+  heading6: $heading6,
+  heading7: $heading7,
+  heading8: $heading8
+) !default;

package/styles/core/styles/tokens/typography/_tokens.label.scss

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../utils';
+@use './type-utils';
+@use './weight';
+@use './scale';
+@use './tokens.core' as core;
+
+$label: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(label, font-size, '0750'),
+  line-height: type-utils.font-size-relative(label, line-height, '1250'),
+  letter-spacing: type-utils.calc-letter-spacing(0.5, scale.value('0875'))
+)) !default;
+
+$button: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(button, font-size, '0875'),
+  font-weight: weight.value(medium),
+  letter-spacing: type-utils.calc-letter-spacing(1, scale.value('0875'))
+)) !default;
+
+$overline: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(overline, font-size, '0750'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(overline, line-height, '2000'),
+  letter-spacing: type-utils.calc-letter-spacing(2, scale.value('0750')),
+  text-transform: uppercase
+)) !default;
+
+$tokens: (
+  label: $label,
+  button: $button,
+  overline: $overline
+) !default;

package/styles/core/styles/tokens/typography/_tokens.scss

@@ -4,222 +4,27 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use 'sass:list';
-@use '../../core/config';
-@use '../../theme';
 @use '../../utils';
-
-/// Base typography style values
-$font-family: 'Roboto', sans-serif !default;
-$font-size: 1rem !default; // 16px
-
-/// The Forge typography scale system
-$font-scale: (
-  12: 0.75,
-  14: 0.875,
-  16: 1,
-  18: 1.125,
-  20: 1.25,
-  22: 1.375,
-  24: 1.5,
-  28: 1.75,
-  32: 2,
-  34: 2.125,
-  36: 2.25,
-  40: 2.5,
-  42: 2.625,
-  44: 2.75,
-  48: 3,
-  56: 3.5,
-  64: 4,
-) !default;
-
-/// Available font weights for Forge typography styles
-$font-weight: (
-  light: 300,
-  regular: 400,
-  medium: 500,
-  bold: 700
-) !default;
-
-/// The base typography styles that other styles inherit from.
-$base: (
-  font-family: var(--#{config.$prefix}-typography-font-family, #{$font-family}),
-  font-size: var(--#{config.$prefix}-typography-font-size, #{$font-size}),
-  font-weight: map.get($font-weight, regular),
-  line-height: normal,
-  letter-spacing: normal,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-primary)
+@use './tokens.body' as body;
+@use './tokens.display' as display;
+@use './tokens.heading' as heading;
+@use './tokens.label' as label;
+@use './tokens.subheading' as subheading;
+
+$tokens: utils.flatten(
+  display.$tokens,
+  heading.$tokens,
+  subheading.$tokens,
+  body.$tokens,
+  label.$tokens
 ) !default;
 
 ///
-/// Creates a style value that is relative to the base font size for the given property.
+/// Retrieves a typography style token value.
 /// 
-/// This allows for typography styles to be scaled relative to the root font size, or
-/// relative to a specific CSS custom property if optionally applied. This is useful
-/// when embedding Forge in an application that adjusts the root `font-size` to something
-/// other than `16px` (browser default).
-///
-@function _font-size-relative($style, $property, $scale) {
-  @return calc(#{map.get($base, font-size)} * var(--#{config.$prefix}-typography-#{$style}-#{$property}-scale, #{$scale}));
-}
-
-/// Heading
-$heading-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(heading-01, font-size, map.get($font-scale, 14)),
-  font-weight: map.get($font-weight, medium),
-  line-height: _font-size-relative(heading-01, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.0071428571em
-)) !default;
-
-$heading-02: utils.inherit-map($heading-01, (
-  font-size: _font-size-relative(heading-02, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(heading-02, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.009375em
-)) !default;
-
-$heading-03: utils.inherit-map($heading-02, (
-  font-size: _font-size-relative(heading-03, font-size, map.get($font-scale, 18)),
-  line-height: _font-size-relative(heading-03, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.0125em
-)) !default;
-
-$heading-04: utils.inherit-map($heading-03, (
-  font-size: _font-size-relative(heading-04, font-size, map.get($font-scale, 20)),
-  line-height: _font-size-relative(heading-04, line-height, map.get($font-scale, 28)),
-  letter-spacing: normal
-)) !default;
-
-$heading-05: utils.inherit-map($heading-04, (
-  font-size: _font-size-relative(heading-05, font-size, map.get($font-scale, 24)),
-  line-height: _font-size-relative(heading-05, line-height, map.get($font-scale, 32)),
-)) !default;
-
-$heading-06: utils.inherit-map($heading-05, (
-  font-size: _font-size-relative(heading-06, font-size, map.get($font-scale, 28)),
-  line-height: _font-size-relative(heading-06, line-height, map.get($font-scale, 36)),
-)) !default;
-
-/// Display
-$display-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(display-01, font-size, map.get($font-scale, 24)),
-  font-weight: map.get($font-weight, light),
-  line-height: _font-size-relative(display-01, line-height, map.get($font-scale, 30)),
-)) !default;
-
-$display-02: utils.inherit-map($display-01, (
-  font-size: _font-size-relative(display-02, font-size, map.get($font-scale, 28)),
-  line-height: _font-size-relative(display-02, line-height, map.get($font-scale, 34)),
-)) !default;
-
-$display-03: utils.inherit-map($display-02, (
-  font-size: _font-size-relative(display-03, font-size, map.get($font-scale, 32)),
-  line-height: _font-size-relative(display-03, line-height, map.get($font-scale, 40)),
-)) !default;
-
-$display-04: utils.inherit-map($display-03, (
-  font-size: _font-size-relative(display-04, font-size, map.get($font-scale, 36)),
-  line-height: _font-size-relative(display-04, line-height, map.get($font-scale, 44)),
-)) !default;
-
-$display-05: utils.inherit-map($display-04, (
-  font-size: _font-size-relative(display-05, font-size, map.get($font-scale, 40)),
-  line-height: _font-size-relative(display-05, line-height, map.get($font-scale, 48)),
-)) !default;
-
-$display-06: utils.inherit-map($display-05, (
-  font-size: _font-size-relative(display-06, font-size, map.get($font-scale, 48)),
-  line-height: _font-size-relative(display-06, line-height, map.get($font-scale, 64)),
-)) !default;
-
-/// Title
-$title: utils.inherit-map($heading-03, (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(title, font-size, map.get($font-scale, 20)),
-  font-weight: map.get($font-weight, regular),
-  line-height: _font-size-relative(title, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.0125em,
-)) !default;
-
-/// Subtitle
-$subtitle: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(subtitle, font-size, map.get($font-scale, 16)),
-  font-weight: map.get($base, font-weight),
-  line-height: _font-size-relative(subtitle, line-height, map.get($font-scale, 28)),
-  letter-spacing: 0.009375em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-secondary)
-) !default;
-
-$body-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 14)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.0178571429em
-)) !default;
-
-$body-02: utils.inherit-map($base, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.03125em
-)) !default;
-
-$body: utils.inherit-map($body-01, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
-)) !default;
-
-/// Label
-$label: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(label, font-size, 0.75), // 12px
-  font-weight: map.get($base, font-weight),
-  line-height: _font-size-relative(label, line-height, 1.25), // 20px
-  letter-spacing: 0.0333333333em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-/// Button
-$button: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(button, font-size, 0.875), // 14px
-  font-weight: 500,
-  line-height: _font-size-relative(button, line-height, 2.25), // 36px
-  letter-spacing: 0.0892857143em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-$tokens: (
-  heading-01: $heading-01,
-  heading-02: $heading-02,
-  heading-03: $heading-03,
-  heading-04: $heading-04,
-  heading-05: $heading-05,
-  heading-06: $heading-06,
-  display-01: $display-01,
-  display-02: $display-02,
-  display-03: $display-03,
-  display-04: $display-04,
-  display-05: $display-05,
-  display-06: $display-06,
-  title: $title,
-  subtitle: $subtitle,
-  body-01: $body-01,
-  body-02: $body-02,
-  body: $body,
-  label: $label,
-  button: $button
-) !default;
-
-///
-/// Returns a typography style token value.
+/// @param {String} $style - The typography style.
+/// @param {String} $token - The token within the provided style.
+/// @return {String} - The value of the style token.
 /// 
 @function get($style, $token) {
   $style-tokens: map.get($tokens, $style);