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

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

@@ -4,130 +4,75 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../core/config';
-@use '../color-palette' as color-palette;
-@use '../../elevation';
+@use '../../utils';
+@use '../../theme/utils' as theme-utils;
+@use './tokens.core' as core;
+@use './tokens.surface' as surface;
+@use './tokens.text' as text;
+@use './tokens.status' as status;
+@use './tokens.utilities' as utilities;
 
-/// All semantic tokens for the Forge default (light) theme
-$tokens: (
-  // General theme colors
-  primary: color-palette.$indigo-500,
-  on-primary: #ffffff,
-  secondary: color-palette.$amber-500,
-  on-secondary: #000000,
-  tertiary: color-palette.$indigo-a400,
-  on-tertiary: #ffffff,
-  background: color-palette.$grey-50,
-  surface: #ffffff,
-  on-surface: #000000,
-
-  // Status colors
-  success: color-palette.$green-800,
-  on-success: #ffffff,
-  error: #b00020,
-  on-error: #ffffff,
-  warning: #d14900,
-  on-warning: #ffffff,
-
-  // Text colors
-  text-primary: rgba(0, 0, 0, 0.87),
-  text-secondary: rgba(0, 0, 0, 0.54),
-  text-disabled: rgba(0, 0, 0, 0.12),
-  text-hint: rgba(0, 0, 0, 0.38),
-  text-icon: rgba(0, 0, 0, 0.38),
-  text-primary-on-light: rgba(0, 0, 0, 0.87),
-  text-secondary-on-light: rgba(0, 0, 0, 0.54),
-  text-disabled-on-light: rgba(0, 0, 0, 0.38),
-  text-primary-on-dark: rgba(255, 255, 255, 0.87),
-  text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-
-  // Utility semantic colors
-  track-color: rgba(0, 0, 0, 0.12),
-  primary-track-color: #d0d4ef,
-  secondary-track-color: #fff0c3,
-  tertiary-track-color: #d0d7ff,
-  border-color: color-palette.$grey-300,
-  icon-color: color-palette.$grey-600,
-  form-field-label-on-background: rgba(0, 0, 0, 0.65),
-  form-field-icon-disabled-on-background: rgba(0, 0, 0, 0.26),
-  form-field-text-disabled-on-background: rgba(0, 0, 0, 0.6),
-  form-field-disabled-on-background: color-palette.$grey-100,
-  label-disabled-on-background: rgba(0, 0, 0, 0.38),
-  elevated-surface: #ffffff,
-  on-elevated-surface: rgba(0, 0, 0, 0.87),
-  popup-elevation: elevation.value(2),
-  scrollbar-thumb: color-palette.$grey-400,
-  scrollbar-thumb-hover: color-palette.$grey-500,
-  scrollbar-track: #f0f0f0,
-  scrollbar-track-hover: #ececec
-) !default;
-
-/// All tokens for the Forge dark theme
-$tokens-dark: (
-  // General theme colors
-  primary: color-palette.$indigo-a100,
-  on-primary: #000000,
-  secondary: color-palette.$amber-200,
-  on-secondary: #000000,
-  tertiary: var(--forge-theme-secondary, color-palette.$amber-200),
-  on-tertiary: #ffffff,
-  background: color-palette.$grey-900,
-  surface: #2c2c2c,
-  on-surface: #ffffff,
+// Forge default (light) theme
+$tokens: utils.flatten(
+  core.$tokens,
+  surface.$tokens,
+  text.$tokens,
+  status.$tokens,
+  utilities.$tokens,
+  (
+    // Temporary Forge-specific compatibility tokens (TODO: remove this when form field & popup are refactored)
+    border-color: utils.variable-ref(theme, outline),
+    elevated-surface: utils.variable-ref(theme, surface-bright),
+    on-elevated-surface: utils.variable-ref(theme, on-surface),
+    popup-elevation: utils.variable-ref(theme, surface-bright-shadow),
+    form-field-label-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 65%),
+    form-field-icon-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 26%),
+    form-field-text-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 60%),
+    form-field-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 4%),
+    label-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 38%)
+  )
+);
 
-  // Status colors
-  text-primary: rgba(255, 255, 255, 0.87),
-  text-secondary: rgba(255, 255, 255, 0.54),
-  text-disabled: rgba(255, 255, 255, 0.12),
-  text-hint: rgba(255, 255, 255, 0.38),
-  text-icon: rgba(255, 255, 255, 0.38),
-  text-disabled-on-background: rgba(255, 255, 255, 0.12),
-  text-disabled-on-light: rgba(255, 255, 255, 0.38),
-  text-secondary-on-light: rgba(255, 255, 255, 0.54),
-  text-primary-on-dark: #000000,
 
-  // Utility semantic colors
-  track-color: rgba(255, 255, 255, 0.12),
-  primary-track-color: #e3e8ff,
-  secondary-track-color: #7c704c,
-  tertiary-track-color: var(--forge-theme-secondary-track-color, #7c704c),
-  border-color: #464646,
-  form-field-icon-disabled-on-background: rgba(78, 45, 45, 0.26),
-  form-field-disabled-on-background: #353535,
-  form-field-text-disabled-on-background: rgba(255, 255, 255, 0.6),
-  form-field-label-on-background: rgba(255, 255, 255, 0.65),
-  label-disabled-on-background: rgba(255, 255, 255, 0.38),
-  scrollbar-thumb: color-palette.$grey-600,
-  scrollbar-thumb-hover: color-palette.$grey-500,
-  scrollbar-track: #3a3a3a,
-  scrollbar-track-hover: color-palette.$grey-800,
-  elevated-surface: #363636,
-  on-elevated-surface: rgba(255, 255, 255, 0.87),
-  popup-elevation: elevation.value(16)
-) !default;
+// Forge dark theme
+$tokens-dark: utils.flatten(
+  core.$tokens-dark,
+  surface.$tokens-dark,
+  text.$tokens-dark,
+  status.$tokens-dark,
+  utilities.$tokens-dark,
+  (
+    // Temporary Forge-specific compatibility tokens (TODO: remove this when form field is refactored)
+    form-field-label-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 65%),
+    form-field-icon-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 26%),
+    form-field-text-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 60%),
+    form-field-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 4%),
+    label-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 38%)
+  )
+);
 
 ///
-/// Temporary tokens to map the MDC theme to Forge theme
+/// Temporary tokens to map the MDC theme to the Forge theme.
 ///
 /// TODO: Remove this once MDC dependency is removed
 /// 
 $mdc-remap: (
-  primary: var(--forge-theme-primary, map.get($tokens, primary)),
-  on-primary: var(--forge-theme-on-primary, map.get($tokens, on-primary)),
-  secondary: var(--forge-theme-secondary, map.get($tokens, secondary)),
-  on-secondary: var(--forge-theme-on-secondary, map.get($tokens, on-secondary)),
-  background: var(--forge-theme-background, map.get($tokens, background)),
-  surface: var(--forge-theme-surface, map.get($tokens, surface)),
-  on-surface: var(--forge-theme-on-surface, map.get($tokens, on-surface)),
-  error: var(--forge-theme-error, map.get($tokens, error)),
-  on-error: var(--forge-theme-on-error, map.get($tokens, on-error)),
-  text-primary-on-background: var(--forge-theme-text-primary, map.get($tokens, text-primary)),
-  text-secondary-on-background: var(--forge-theme-text-secondary, map.get($tokens, text-secondary)),
-  text-disabled-on-background: var(--forge-theme-text-disabled, map.get($tokens, text-disabled)),
-  text-hint-on-background: var(--forge-theme-text-hint, map.get($tokens, text-hint)),
-  text-icon-on-background: var(--forge-theme-text-icon, map.get($tokens, text-icon)),
-  text-primary-on-light: var(--forge-theme-text-primary-on-light, map.get($tokens, text-primary-on-light)),
-  text-secondary-on-light: var(--forge-theme-text-secondary-on-light, map.get($tokens, text-secondary-on-light)),
-  text-disabled-on-light: var(--forge-theme-text-disabled-on-light, map.get($tokens, text-disabled-on-light)),
-  text-primary-on-dark: var(--forge-theme-text-primary-on-dark, map.get($tokens, text-primary-on-dark)),
+  primary: utils.variable-ref(theme, primary),
+  on-primary: utils.variable-ref(theme, on-primary),
+  secondary: utils.variable-ref(theme, secondary),
+  on-secondary: utils.variable-ref(theme, on-secondary),
+  background: utils.variable-ref(theme, surface-dim),
+  surface: utils.variable-ref(theme, surface),
+  on-surface: utils.variable-ref(theme, on-surface),
+  error: utils.variable-ref(theme, error),
+  on-error: utils.variable-ref(theme, on-error),
+  text-primary-on-background: utils.variable-ref(theme, text-high),
+  text-secondary-on-background: utils.variable-ref(theme, text-medium),
+  text-disabled-on-background: utils.variable-ref(theme, text-lowest),
+  text-hint-on-background: utils.variable-ref(theme, text-low),
+  text-icon-on-background: utils.variable-ref(theme, text-medium),
+  text-primary-on-light: utils.variable-ref(theme, text-high),
+  text-secondary-on-light: utils.variable-ref(theme, text-medium),
+  text-disabled-on-light: utils.variable-ref(theme, text-low),
+  text-primary-on-dark: utils.variable-ref(theme, text-high-inverse),
 );

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use './token-utils';
+@use './tokens.surface' as surface;
+@use '../color-palette';
+
+///
+/// Computes the status theme colors.
+/// 
+/// @param {Map} $colors - The status colors map.
+/// @param {Map} $surface-theme - The base surface theme
+/// @return {Map} - The computed status theme
+///
+@function get-status-theme($colors, $surface-theme) {
+  $surface: map.get($surface-theme, surface);
+
+  $success-theme: token-utils.get-color-theme('success', map.get($colors, success), $surface);
+  $error-theme: token-utils.get-color-theme('error', map.get($colors, error), $surface);
+  $warning-theme: token-utils.get-color-theme('warning', map.get($colors, warning), $surface);
+  $info-theme: token-utils.get-color-theme('info', map.get($colors, info), $surface);
+
+  @return utils.flatten(
+    $success-theme,
+    $error-theme,
+    $warning-theme,
+    $info-theme
+  );
+}
+
+// Light
+$tokens: get-status-theme((
+  success: color-palette.$green-800,
+  error: color-palette.$crimson-900,
+  warning: color-palette.$burnt-orange-800,
+  info: color-palette.$blue-800
+), surface.$tokens);
+
+// Dark
+$tokens-dark: get-status-theme((
+  success: color-palette.$dollar-bill-600,
+  error: color-palette.$ruddy-pink-200,
+  warning: color-palette.$apricot-200,
+  info: color-palette.$blue-800,
+), surface.$tokens-dark);

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,37 @@
+/**
+ * @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),
+  line-height: type-utils.font-size-relative(button, line-height, '2250'),
+  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;