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

package/styles/core/styles/spacing/index.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+@use '../tokens/spacing/tokens';
+@use '../utils';
+
+///
+/// Gets a CSS custom property declaration for a specific spacing token with its token value as the fallback value.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   margin: spacing.variable('100'); // => margin: var(--forge-spacing-standard, 16px);
+/// }
+/// ```
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(spacing, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided spacing tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, spacing, $prefix);
+}

package/styles/core/styles/theme/_color-utils.scss

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:color';
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+  @if $normalized-channel-value < 0.03928 {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function contrast-ratio($back, $front) {
+  $backLum: luminance($back) + 0.05;
+  $foreLum: luminance($front) + 0.05;
+  @return math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum));
+}
+
+// Determine whether the color is 'light' or 'dark'.
+@function tone($color) {
+  @if $color == 'dark' or $color == 'light' {
+    @return $color;
+  }
+
+  @if meta.type-of($color) != 'color' {
+    @warn '#{$color} is not a color. Falling back to "dark" tone.';
+    @return 'dark';
+  }
+
+  $minimumContrast: 3.1;
+  $lightContrast: contrast-ratio($color, white);
+  $darkContrast: contrast-ratio($color, rgba(black, 0.87));
+
+  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
+    @return 'light';
+  } @else {
+    @return 'dark';
+  }
+}
+
+// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
+// Returns 'dark' if the given color is light and 'light' if the given color is dark.
+@function contrast-tone($color) {
+  @return if(tone($color) == 'dark', 'light', 'dark');
+}

package/styles/core/styles/theme/_utils.scss

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:color';
+@use '../utils';
+@use './color-utils';
+
+///
+/// Returns a new color with the same hue and saturation as the input color, but with a different lightness value.
+/// 
+/// Example:
+/// scale(#ff0000, 50%) => #ff6060
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Number} $lightness - The desired lightness percentage to scale `$color` by. Specified as a percentage number between 0 and 100.
+/// @return {Color} - The new color with the same hue and saturation as the input color, but with a different lightness value.
+///
+@function scale($color, $lightness) {
+  @return color.scale($color, $lightness: 100 - $lightness);
+}
+
+///
+/// Creates a new color by applying the specified emphasis to the input color via the alpha channel.
+/// 
+/// Example:
+/// emphasized(#ff0000, 50%) => rgba(255, 0, 0, 0.5)
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Number} $alpha - The desired opacity to apply to `$color`.
+/// @return {Color} - The input color, but with an alpha channel value in `rgba()` format.
+/// 
+@function emphasized($color, $emphasis) {
+  @return rgba($color, $emphasis);
+}
+
+///
+/// Computes the contrast color for the provided color.
+/// 
+/// Example:
+/// contrast(#ff0000) => #ffffff
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Color} $light - The light color to use for contrast. Default to `#ffffff`.
+/// @param {Color} $dark - The dark color to use for contrast. Default to `#000000`.
+/// @return {Color} - The contrast color for the provided color.
+/// 
+@function contrast($color, $alpha: null, $light: #ffffff, $dark: #000000) {
+  $contrast-color: if(color-utils.contrast-tone($color) == 'dark', $dark, $light);
+  @if $alpha != null {
+    @return emphasized($contrast-color, $alpha);
+  }
+  @return $contrast-color;
+}
+
+///
+/// Converts a color with an opacity value on top of a specific background color to an opaque hex color.
+/// 
+@function hexify($color, $background, $alpha: 100%) {
+  @return if($alpha == 100%, color.mix($background, $color, $alpha), color.mix($background, $color, 100 - $alpha));
+}
+
+///
+/// Determines if the provided value is a `color` type or not.
+/// 
+@function is-color($value) {
+  @return meta.type-of($value) == color;
+}
+
+///
+/// Computes the hue, saturation, lightness (and optionally alpha) values for the provided color and returns a string in HSL format.
+///
+@function hsl-values($color, $with-alpha: false) {
+  $value: utils.round(hue($color), 2) utils.round(saturation($color), 2) utils.round(lightness($color), 2);
+  @if ($with-alpha) {
+    $value: string.unquote($value + ' / ' + alpha($color));
+  }
+  @return $value;
+}

package/styles/core/styles/theme/index.scss

@@ -4,26 +4,18 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
+@use 'sass:math';
 @use '../core/config';
-@use '../tokens/theme/tokens' as theme-tokens;
+@use '../tokens/theme/tokens';
+@use '../tokens/theme/color-emphasis';
+@use '../utils';
 
 ///
 /// Emits custom property declarations for all default theme tokens.
 /// 
 @mixin properties {
-  /// Temporary tokens to map the MDC theme to Forge theme
-  /// TODO: Remove this once MDC dependency is removed
-  :root {
-    @each $token-name, $token-value in theme-tokens.$mdc-remap {
-      --mdc-theme-#{$token-name}: #{$token-value};
-    }
-  }
-
-  // Forge theme tokens
-  :root {
-    @each $token-name, $token-value in theme-tokens.$tokens {
-      --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
-    }
+  @each $token-name, $token-value in tokens.$tokens {
+    --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
   }
 }
 
@@ -31,18 +23,56 @@
 /// Emits custom property declarations for all dark theme tokens.
 /// 
 @mixin properties-dark {
-  @each $token-name, $token-value in theme-tokens.$tokens-dark {
+  @each $token-name, $token-value in tokens.$tokens-dark {
     --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
   }
 }
 
 ///
-/// Gets a CSS custom property declaration for a specific theme variable, with its token value as the fallback value
+/// Temporary tokens to map the MDC theme to Forge theme
+/// 
+/// TODO: Remove this once MDC dependency is removed
+/// 
+@mixin properties-compat {
+  @each $token-name, $token-value in tokens.$mdc-remap {
+    --mdc-theme-#{$token-name}: #{$token-value};
+  }
+}
+
+///
+/// Generates utility classes for each theme token as both `color` and `background-color` styles separately.
 /// 
-@function variable($key, $prefix: '#{config.$prefix}-theme') {
-  @if not map.get(theme-tokens.$tokens, $key) {
-    @error 'Invalid theme property: #{$key}';
+@mixin classes {
+  @each $token, $value in tokens.$tokens {
+    .#{config.$prefix}-color--#{$token} {
+      color: #{variable($token)};
+    }
+    .#{config.$prefix}-background--#{$token} {
+      background-color: #{variable($token)};
+    }
   }
-  $value: map.get(theme-tokens.$tokens, $key);
-  @return var(--#{$prefix}-#{$key}, $value);
 }
+
+///
+/// Gets a CSS custom property declaration for a specific theme token, with its token value as the fallback value
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(theme, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided theme tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, theme, $prefix);
+}
+
+///
+/// Gets a theme emphasis value by semantic name.
+/// 
+/// Valid names are `highest`, `higher`, `high`, `medium-high`, `medium`, `medium-low`, `low`, `lower`, and `lowest`.
+/// 
+@function emphasis($emphasis) {
+  @return math.div(color-emphasis.value($emphasis), 100%);
+}
+

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

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$tokens: (
+  duration-short1: 50ms,
+  duration-short2: 100ms,
+  duration-short3: 150ms,
+  duration-short4: 200ms,
+
+  duration-medium1: 250ms,
+  duration-medium2: 300ms,
+  duration-medium3: 350ms,
+  duration-medium4: 400ms,
+
+  duration-long1: 450ms,
+  duration-long2: 500ms,
+  duration-long3: 550ms,
+  duration-long4: 600ms,
+
+  duration-extra-long1: 700ms,
+  duration-extra-long2: 800ms,
+  duration-extra-long3: 900ms,
+  duration-extra-long4: 1000ms,
+
+  easing-linear: cubic-bezier(0, 0, 1, 1),
+  easing-standard: cubic-bezier(0.2, 0, 0, 1),
+  easing-accelerate: cubic-bezier(0.3, 0, 1, 1),
+  easing-decelerate: cubic-bezier(0, 0, 0, 1),
+  easing-emphasized: cubic-bezier(0.2, 0, 0, 1),
+  easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15),
+  easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  thin: 1px,
+  medium: 2px,
+  thick: 4px
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/circular-progress/_tokens.scss

@@ -5,14 +5,14 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../utils';
 
 $tokens: (
   size: utils.module-val(circular-progress, size, 48px),
   padding: utils.module-val(circular-progress, padding, 0),
   track-width: utils.module-val(circular-progress, track-width, 12),
   track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary)),
-  track-background: utils.module-val(circular-progress, track-background, theme.variable(track-color)),
+  track-background: utils.module-val(circular-progress, track-background, theme.variable(surface-container)),
   arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms)
 ) !default;
 

package/styles/core/styles/tokens/color-palette/_extended-color-palette.scss

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$white: #ffffff;
+$black: #000000;
+
+$neutral-50: #ffffff;
+$neutral-100: #f9f9f9;
+$neutral-200: #dddddd;
+$neutral-300: #c1c1c1;
+$neutral-400: #a6a6a6;
+$neutral-500: #8b8b8b;
+$neutral-600: #727272;
+$neutral-700: #595959;
+$neutral-800: #424242;
+$neutral-900: #2c2c2c;
+
+$crimson-50: #fdeaee;
+$crimson-100: #fbcad2;
+$crimson-200: #ea959b;
+$crimson-300: #de6c74;
+$crimson-400: #e84853;
+$crimson-500: #ed323b;
+$crimson-600: #de2839;
+$crimson-700: #cc1d33;
+$crimson-800: #bf152c;
+$crimson-900: #b00020;
+
+$burnt-orange-50: #fbe9e6;
+$burnt-orange-100: #fdccb9;
+$burnt-orange-200: #fcac8c;
+$burnt-orange-300: #fa8c5d;
+$burnt-orange-400: #f87439;
+$burnt-orange-500: #f75d0e;
+$burnt-orange-600: #ec5709;
+$burnt-orange-700: #df5003;
+$burnt-orange-800: #d14900;
+$burnt-orange-900: #b93c00;
+
+$ruddy-pink-50: #fbe1e5;
+$ruddy-pink-100: #f5b4c0;
+$ruddy-pink-200: #ec8396;
+$ruddy-pink-300: #e2526f;
+$ruddy-pink-400: #d82c52;
+$ruddy-pink-500: #cf0038;
+$ruddy-pink-600: #c00038;
+$ruddy-pink-700: #ac0035;
+$ruddy-pink-800: #990033;
+$ruddy-pink-900: #78002f;
+
+$apricot-50: #fceae3;
+$apricot-100: #fbcfb0;
+$apricot-200: #f8b27c;
+$apricot-300: #f29645;
+$apricot-400: #ed830b;
+$apricot-500: #e87200;
+$apricot-600: #de6c00;
+$apricot-700: #d16400;
+$apricot-800: #c45c00;
+$apricot-900: #ad4e00;
+
+$dollar-bill-50: #f2f8ec;
+$dollar-bill-100: #deedcf;
+$dollar-bill-200: #c8e1b2;
+$dollar-bill-300: #b4d494;
+$dollar-bill-400: #a4cb7e;
+$dollar-bill-500: #95c269;
+$dollar-bill-600: #86b260;
+$dollar-bill-700: #749e55;
+$dollar-bill-800: #63894c;
+$dollar-bill-900: #46673b;
+
+$maroon-50: #f0e2e4;
+$maroon-100: #dcb7bb;
+$maroon-200: #bf868d;
+$maroon-300: #ad5661;
+$maroon-400: #92313c;
+$maroon-500: #7f0d1a;
+$maroon-600: #6c0913;
+$maroon-700: #62070f;
+$maroon-800: #4f0308;
+$maroon-900: #31050a;
+$maroon-a100: #ff636f;
+$maroon-a200: #ff3540;
+$maroon-a300: #991100;
+$maroon-a700: #771100;

package/styles/core/styles/tokens/color-palette/index.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './extended-color-palette';
+@forward './material-color-palette';

package/styles/core/styles/tokens/focus-indicator/_tokens.scss

@@ -5,18 +5,22 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../shape';
+@use '../../border';
+@use '../../animation';
+@use '../../spacing';
+@use '../../utils';
 
 /* stylelint-disable length-zero-no-unit */
 $tokens: (
   active-width: utils.module-val(focus-indicator, active-width, 6px),
   color: utils.module-val(focus-indicator, color, theme.variable(primary)),
-  duration: utils.module-val(focus-indicator, duration, 600ms),
-  outward-offset: utils.module-val(focus-indicator, outward-offset, 4px),
+  duration: utils.module-val(focus-indicator, duration, animation.variable(duration-long4)),
+  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable('025')),
   inward-offset: utils.module-val(focus-indicator, inward-offset, 0px), // Requires unit
-  shape: utils.module-val(focus-indicator, shape, 1px),
-  width: utils.module-val(focus-indicator, width, 2px),
-  easing: utils.module-val(focus-indicator, easing, cubic-bezier(0.2, 0, 0, 1)),
+  shape: utils.module-val(focus-indicator, shape, shape.variable(extra-small)),
+  width: utils.module-val(focus-indicator, width, border.variable(medium)),
+  easing: utils.module-val(focus-indicator, easing, animation.variable(easing-emphasized)),
   shape-start-start: utils.module-ref(focus-indicator, shape-start-start, shape),
   shape-start-end: utils.module-ref(focus-indicator, shape-start-end, shape),
   shape-end-end: utils.module-ref(focus-indicator, shape-end-end, shape),

package/styles/core/styles/tokens/linear-progress/_tokens.scss

@@ -5,15 +5,17 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../animation';
+@use '../../shape';
+@use '../../utils';
 
 $tokens: (
   track-height: utils.module-val(linear-progress, track-height, 4px),
-  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-track-color)),
+  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-container)),
   active-indicator-color: utils.module-val(linear-progress, indicator-color, theme.variable(tertiary)),
-  track-shape: utils.module-val(linear-progress, track-shape, 0),
+  track-shape: utils.module-val(linear-progress, track-shape, shape.variable(full)),
   active-indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),
-  determinate-duration: utils.module-val(linear-progress, determinate-duration, 250ms),
+  determinate-duration: utils.module-val(linear-progress, determinate-duration, animation.variable(duration-medium1)),
   indeterminate-duration: utils.module-val(linear-progress, indeterminate-duration, 2s),
   determinate-easing: utils.module-val(linear-progress, determinate-easing, cubic-bezier(0.4, 0, 0.6, 1)),
 ) !default;

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

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../../utils';
+
+$tokens: (
+  container-color: utils.module-val(list, container-color, transparent),
+  block-padding: utils.module-val(list, block-padding, 8px),
+  inline-padding: utils.module-val(list, inline-padding, 0),
+) !default;
+
+@function get($key) {
+  @return map-get($tokens, $key);
+}

package/styles/core/styles/tokens/list/list-item/_tokens.scss

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../utils';
+@use '../../../theme';
+@use '../../../shape';
+@use '../../../typography';
+
+$tokens: (
+  // Base
+  background-color: utils.module-val(list-item, background-color, transparent),
+  shape: utils.module-val(list-item, shape, 0),
+  padding: utils.module-val(list-item, padding, 8px 16px),
+  margin: utils.module-val(list-item, margin, 0),
+  height: utils.module-val(list-item, height, 48px),
+  dense-height: utils.module-val(list-item, dense-height, 32px),
+  indent: utils.module-val(list-item, indent, 56px),
+  cursor: utils.module-val(list-item, cursor, pointer),
+
+  // Supporting text
+  supporting-text-color: utils.module-val(list-item, supporting-text-color, theme.variable(text-medium)),
+  supporting-text-font-size: utils.module-val(list-item, supporting-text-font-size, typography.variable(body2, font-size)),
+  supporting-text-font-weight: utils.module-val(list-item, supporting-text-font-weight, typography.variable(body2, font-weight)),
+  supporting-text-line-height: utils.module-val(list-item, supporting-text-line-height, typography.scale('1500')),
+
+  // Selected
+  selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)),
+  selected-opacity: utils.module-val(list-item, selected-opacity, 0.08),
+  selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color),
+  selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color),
+  selected-supporting-text-color: utils.module-val(list-item, selected-supporting-text-color, theme.variable(text-medium)),
+
+  // Disabled
+  disabled-opacity: utils.module-val(list-item, disabled-opacity, 0.38),
+  disabled-cursor: utils.module-val(list-item, disabled-cursor, not-allowed),
+
+  // Line variants
+  one-line-height: utils.module-ref(list-item, one-line-height, height),
+  two-line-height: utils.module-val(list-item, two-line-height, utils.module-ref(list-item, height, 72px, value)),
+  three-line-height: utils.module-val(list-item, three-line-height, utils.module-ref(list-item, height, 88px, value)),
+
+  // Dense
+  dense-one-line-height: utils.module-ref(list-item, dense-one-line-height, dense-height),
+  dense-two-line-height: utils.module-val(list-item, dense-two-line-height, utils.module-ref(list-item, dense-height, 56px, value)),
+  dense-three-line-height: utils.module-val(list-item, dense-three-line-height, utils.module-ref(list-item, dense-height, 72px, value)),
+  dense-font-size: utils.module-val(list-item, dense-font-size, 0.875rem),
+  dense-indent: utils.module-val(list-item, dense-indent, 48px),
+
+  // Dense leading/trailing
+  dense-leading-margin-end: utils.module-val(list-item, dense-leading-margin-end, utils.module-ref(list-item, leading-margin-end, 24px, value)),
+  dense-trailing-margin-start: utils.module-val(list-item, dense-trailing-margin-start, utils.module-ref(list-item, trailing-margin-start, 24px, value)),
+
+  // Leading
+  leading-margin-start: utils.module-val(list-item, leading-margin-start, 0),
+  leading-margin-end: utils.module-val(list-item, leading-margin-end, 32px),
+  leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
+
+  // Trailing
+  trailing-margin-start: utils.module-val(list-item, trailing-margin-start, 32px),
+  trailing-margin-end: utils.module-val(list-item, trailing-margin-end, 0),
+  trailing-selected-color: utils.module-ref(list-item, trailing-selected-color, selected-color),
+
+  // Avatar
+  avatar-background-color: utils.module-val(list-item, avatar-background-color, theme.variable(text-medium)),
+  avatar-color: utils.module-val(list-item, avatar-color, theme.variable(on-primary)),
+  avatar-shape: utils.module-val(list-item, avatar-shape, shape.variable(round)),
+  avatar-margin-start: utils.module-val(list-item, avatar-margin-start, 0),
+  avatar-margin-end: utils.module-val(list-item, avatar-margin-end, 16px),
+  avatar-size: utils.module-val(list-item, avatar-size, 40px),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../utils';
+@use '../../shape';
+
+$tokens: (
+  height: utils.module-val(scrollbar, height, 16px),
+  width: utils.module-val(scrollbar, width, 16px),
+  thumb-min-height: utils.module-val(scrollbar, thumb-min-height, 32px),
+  thumb-min-width: utils.module-val(scrollbar, thumb-min-width, 32px),
+  border-radius: utils.module-val(scrollbar, border-radius, shape.variable(full)),
+  border-width: utils.module-val(scrollbar, border-width, 3px),
+  track-container: utils.module-val(scrollbar, track-container, theme.variable(surface-container-low)),
+  track-container-hover: utils.module-val(scrollbar, track-container-hover, theme.variable(surface-container-low)),
+  thumb-container: utils.module-val(scrollbar, thumb-container, theme.variable(surface-container-medium)),
+  thumb-container-hover: utils.module-val(scrollbar, thumb-container-hover, theme.variable(surface-container-high))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:math';
+@use 'sass:map';
+
+$base: 4px !default;
+$extra-small: math.div($base, 4) !default; // 1px
+$small: math.div($base, 2) !default;       // 2px
+$medium: $base !default;                   // 4px
+$large: $base * 2 !default;                // 8px
+
+$tokens: (
+  extra-small: $extra-small,
+  extra-small-block-start: $extra-small $extra-small 0 0,
+  extra-small-block-end: 0 0 $extra-small $extra-small,
+  extra-small-inline-start: $extra-small 0 0 $extra-small,
+  extra-small-inline-end: 0 $extra-small $extra-small 0,
+  small: $small,
+  small-block-start: $small $small 0 0,
+  small-block-end: 0 0 $small $small,
+  small-inline-start: $small 0 0 $small,
+  small-inline-end: 0 $small $small 0,
+  medium: $medium,
+  medium-block-start: $medium $medium 0 0,
+  medium-block-end: 0 0 $medium $medium,
+  medium-inline-start: $medium 0 0 $medium,
+  medium-inline-end: 0 $medium $medium 0,
+  large: $large,
+  large-block-start: $large $large 0 0,
+  large-block-end: 0 0 $large $large,
+  large-inline-start: $large 0 0 $large,
+  large-inline-end: 0 $large $large 0,
+  full: 9999px, // Pill shaped
+  round: 50%
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}