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

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;

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

@@ -4,70 +4,38 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme';
-
-$font-family: 'Roboto', sans-serif !default;
-
-$base: (
-  font-family: $font-family,
-  font-size: 16px,
-  font-weight: 400,
-  line-height: normal,
-  letter-spacing: normal,
-  text-transform: none,
-  text-decoration: none,
-  color: theme.variable(text-primary)
-) !default;
-
-$title: (
-  font-family: map.get($base, font-family),
-  // font-size: typography.font-size(title) var(--forge-typography-title-font-size, calc(var(--forge-typography-root-font-size, 16px) * 1.5)),
-  font-weight: map.get($base, font-weight),
-  line-height: 24px,
-  letter-spacing: 0.0125em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
+@use '../../utils';
+@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;
 
-$label: (
-  font-family: map.get($base, font-family),
-  font-size: 12px,
-  font-weight: map.get($base, font-weight),
-  line-height: 20px,
-  letter-spacing: 0.0333333333em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-// $caption: (
-//   ...$label,
-//   font-size: 10px,
-// ) !default;
-
-$tokens: (
-  title: $title,
-  label: $label,
-  helper-text: $label
-) !default;
-
-
-// @mixin typography($style) {
-//   $typography-tokens: map.get($tokens, $style);
-
-//   @if not $typography-tokens {
-//     @error 'Invalid typography style: "#{$style}"';
-//   }
-
-//   /// Use the `font` style instead??
-
-//   font-family: var(--forge-typography-#{$style}-font-family, map.get($typography-tokens, font-family));
-//   font-size: var(--forge-typography-#{$style}-font-size, map.get($typography-tokens, font-size));
-//   font-weight: var(--forge-typography-#{$style}-font-weight, map.get($typography-tokens, font-weight));
-//   line-height: var(--forge-typography-#{$style}-line-height, map.get($typography-tokens, line-height));
-//   letter-spacing: var(--forge-typography-#{$style}-letter-spacing, map.get($typography-tokens, letter-spacing));
-//   text-transform: var(--forge-typography-#{$style}-text-transform, map.get($typography-tokens, text-transform));
-//   text-decoration: var(--forge-typography-#{$style}-text-decoration, map.get($typography-tokens, text-decoration));
-//   color: var(--forge-typography-#{$style}-color, map.get($typography-tokens, color));
-// }
+///
+/// Retrieves 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);
+
+  @if not $style-tokens {
+    @error 'Invalid typography style: "#{$style}"';
+  }
+
+  @if not map.get($style-tokens, $token) {
+    @error 'Invalid typography token for style "#{$style}" using token "#{$token}"';
+  }
+
+  @return map.get($style-tokens, $token);
+}

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../utils';
+@use './scale';
+@use './weight';
+@use './type-utils';
+@use './tokens.core' as core;
+
+$subheading1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(subheading1, font-size, '0875'),
+  font-weight: weight.value(regular),
+  line-height: type-utils.font-size-relative(subheading1, line-height, '1125')
+)) !default;
+
+$subheading2: utils.inherit-map($subheading1, (
+  font-size: type-utils.font-size-relative(subheading2, font-size, '1000'),
+  line-height: type-utils.font-size-relative(subheading2, line-height, '1250')
+)) !default;
+
+$subheading3: utils.inherit-map($subheading2, (
+  font-size: type-utils.font-size-relative(subheading3, font-size, '1125'),
+  line-height: type-utils.font-size-relative(subheading3, line-height, '1375')
+)) !default;
+
+$subheading4: utils.inherit-map($subheading3, (
+  font-size: type-utils.font-size-relative(subheading4, font-size, '1250'),
+  line-height: type-utils.font-size-relative(subheading4, line-height, '1500')
+)) !default;
+
+$subheading5: utils.inherit-map($subheading4, (
+  font-size: type-utils.font-size-relative(subheading5, font-size, '1500'),
+  line-height: type-utils.font-size-relative(subheading5, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1500'))
+)) !default;
+
+$subheading6: utils.inherit-map($subheading5, (
+  font-size: type-utils.font-size-relative(subheading6, font-size, '1750'),
+  line-height: type-utils.font-size-relative(subheading6, line-height, '2125'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1750'))
+)) !default;
+
+$subheading7: utils.inherit-map($subheading6, (
+  font-size: type-utils.font-size-relative(subheading7, font-size, '2000'),
+  line-height: type-utils.font-size-relative(subheading7, line-height, '2500'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.05, scale.value('2000'))
+)) !default;
+
+$subheading8: utils.inherit-map($subheading7, (
+  font-size: type-utils.font-size-relative(subheading8, font-size, '2250'),
+  line-height: type-utils.font-size-relative(subheading8, line-height, '2625'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.1, scale.value('2250'))
+)) !default;
+
+$tokens: (
+  subheading1: $subheading1,
+  subheading2: $subheading2,
+  subheading3: $subheading3,
+  subheading4: $subheading4,
+  subheading5: $subheading5,
+  subheading6: $subheading6,
+  subheading7: $subheading7,
+  subheading8: $subheading8
+) !default;

package/styles/core/styles/tokens/typography/_type-utils.scss

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:math';
+@use '../../core/config';
+@use './tokens.core' as core;
+@use './scale';
+
+$module: 'typography' !default;
+$token: 'scale' !default;
+
+///
+/// Creates a style value that is relative to the base font size for the given property.
+/// 
+/// 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) {
+  $scale-value: scale.value($scale);
+  $var-name: '--#{config.$prefix}-#{$module}-#{$style}-#{$property}-#{$token}';
+  @return calc(#{core.get(font-size)} * var(#{$var-name}, #{$scale-value}));
+}
+
+///
+/// Calculates the letter spacing value for the given tracking and font size.
+/// 
+/// @param {Number} $tracking - The tracking value.
+/// @param {Number} $font-size - The font size value.
+/// @return {String} - The letter spacing value.
+/// 
+@function calc-letter-spacing($tracking, $font-size) {
+  @return math.div($tracking, $font-size * 16) * 1em;
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+
+$font-weight: (
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700
+) !default;
+
+@function value($weight) {
+  @if not map.has-key($font-weight, $weight) {
+    @error 'Invalid font weight: "#{$weight}"';
+  }
+  @return map.get($font-weight, $weight);
+}