@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/styles/chip-field/chip-field.scss

@@ -3,14 +3,79 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../field';
+@use '../chips/chip';
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+forge-field {
+  @include tokens;
+}
+
+.container {
+  @include container;
+  
+  &.has-members {
+    @include has-members;
+
+    ::slotted(input) {
+      block-size: auto;
+      inline-size: auto;
+    }
+  }
+}
+
+::slotted(input) {
+  @include input;
+  @include field.default-slot-content;
+}
+
+//
+// Field
+//
+
+forge-field {
+  display: contents;
+
+  @include field.provide-theme((
+    multiline-resize: none
+  ));
+
+  &::part(label) {
+    &::after {
+      content: none; // Hiding the field's multiline box shadow on the label
+    }
+  }
+}
+
+//
+// Theme
+//
+
+$themes: (primary, secondary, tertiary, success, warning, error, info);
+@each $theme in $themes {
+  :host([theme=#{$theme}]) {
+    ::slotted([slot=member]) {
+      @include chip.provide-theme((
+        field-background: theme.variable($theme),
+        field-color: theme.variable(on-#{$theme})
+      ));
+    }
+  }
+}

package/styles/chip-field/index.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './core';

package/styles/chips/chip/_core.scss

@@ -9,7 +9,7 @@
 @forward './token-utils';
 
 @mixin host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 @mixin base {

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../elevation';
+@use '../../spacing';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(backdrop, background, #000),
+  opacity: utils.module-val(backdrop, opacity, theme.emphasis(medium)),
+  z-index: utils.module-val(backdrop, z-index, elevation.z-index-variable(backdrop)),
+
+  // Animation
+  enter-animation-duration: utils.module-val(backdrop, enter-animation-duration, animation.variable(duration-short4)),
+  enter-animation-easing: utils.module-val(backdrop, enter-animation-easing, animation.variable(easing-standard)),
+  exit-animation-duration: utils.module-val(backdrop, exit-animation-duration, animation.variable(duration-short1)),
+  exit-animation-easing: utils.module-val(backdrop, exit-animation-easing, animation.variable(easing-emphasized-accelerate)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use '../../border';
+@use '../../spacing';
+@use '../../shape';
+@use '../../elevation';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(card, background, theme.variable(surface)),
+  height: utils.module-val(card, height, 100%),
+  width: utils.module-val(card, width, 100%),
+  outline-color: utils.module-val(card, outline-color, theme.variable(outline)),
+  outline-width: utils.module-val(card, outline-width, border.variable(thin)),
+  outline-style: utils.module-val(card, outline-style, solid),
+  elevation: utils.module-val(card, elevation, none),
+  padding: utils.module-val(card, padding, spacing.variable(medium)),
+  shape: utils.module-val(card, shape, shape.variable(medium)),
+  overflow: utils.module-val(card, overflow, hidden),
+
+  // Raised
+  raised-elevation: utils.module-val(card, raised-elevation, elevation.value(1)),
+  raised-outline-width: utils.module-val(card, raised-outline-width, 0)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -21,7 +21,7 @@ $tokens: (
   state-layer-dense-size: utils.module-val(checkbox, state-layer-dense-size, 24px),
 
   // Checkbox
-  background-color: utils.module-val(checkbox, background-color, theme.variable(surface)),
+  background: utils.module-val(checkbox, background, theme.variable(surface)),
   width: utils.module-ref(checkbox, width, size),
   height: utils.module-ref(checkbox, height, size),
   unchecked-border-width: utils.module-ref(checkbox, unchecked-border-width, border-width),
@@ -30,9 +30,9 @@ $tokens: (
   elevation: utils.module-val(checkbox, elevation, elevation.value(0)),
   
   // Checkbox checked
-  checked-background-color: utils.module-ref(checkbox, checked-background-color, primary-color),
+  checked-background: utils.module-ref(checkbox, checked-background, primary-color),
   checked-border-width: utils.module-ref(checkbox, checked-border-width, border-width),
-  checked-border-color: utils.module-ref(checkbox, checked-border-color, checked-background-color),
+  checked-border-color: utils.module-ref(checkbox, checked-border-color, checked-background),
 
   // Icon
   icon-checked-color: utils.module-ref(checkbox, icon-checked-color, icon-color),
@@ -52,6 +52,7 @@ $tokens: (
   state-layer-shape: utils.module-val(checkbox, state-layer-shape, shape.variable(full)),
 
   // Dense
+  dense-gap: utils.module-val(checkbox, dense-gap, 8px),
   state-layer-dense-width: utils.module-ref(checkbox, state-layer-dense-width, state-layer-dense-size),
   state-layer-dense-height: utils.module-ref(checkbox, state-layer-dense-height, state-layer-dense-size),
 

package/styles/core/styles/tokens/chip-field/_tokens.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../spacing';
+@use '../../utils';
+
+$tokens: (
+  member-spacing: utils.module-val(chip-field, member-spacing, spacing.variable(xsmall)),
+  content-spacing: utils.module-val(chip-field, content-spacing, spacing.variable(xxsmall))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../elevation';
+@use '../../spacing';
+@use '../backdrop/tokens' as backdrop;
+
+$tokens: (
+  // Base
+  background: utils.module-val(dialog, background, theme.variable(surface-bright)),
+  shape: utils.module-val(dialog, shape, shape.variable(medium)),
+  elevation: utils.module-val(dialog, elevation, elevation.value(24)),
+  spacing: utils.module-val(dialog, spacing, auto),
+  block-start-spacing: utils.module-ref(dialog, block-start-spacing, spacing),
+  block-end-spacing: utils.module-ref(dialog, block-end-spacing, spacing),
+  inline-start-spacing: utils.module-ref(dialog, inline-start-spacing, spacing),
+  inline-end-spacing: utils.module-ref(dialog, inline-end-spacing, spacing),
+  padding: utils.module-val(dialog, padding, 0),
+  width: utils.module-val(dialog, width, fit-content),
+  height: utils.module-val(dialog, height, fit-content),
+  min-width: utils.module-val(dialog, min-width, 0),
+  max-width: utils.module-val(dialog, max-width, calc(100% - #{spacing.variable(xxlarge)})),
+  min-height: utils.module-val(dialog, min-height, 0),
+  max-height: utils.module-val(dialog, max-height, calc(100% - #{spacing.variable(xxlarge)})),
+  z-index: utils.module-val(dialog, z-index, elevation.z-index-variable(dialog)),
+
+  // Move handle
+  move-handle-color: utils.module-val(dialog, move-handle-color, currentColor),
+  move-handle-size: utils.module-val(dialog, move-handle-size, 24px),
+  move-handle-hover-cursor: utils.module-val(dialog, move-handle-hover-cursor, grab),
+  move-handle-active-cursor: utils.module-val(dialog, move-handle-active-cursor, grabbing),
+  move-handle-spacing: utils.module-val(dialog, move-handle-spacing, calc(spacing.variable(xxsmall) * -1) 0 0),
+  move-transition-duration: utils.module-val(dialog, move-transition-duration, animation.variable(duration-short4)),
+  move-transition-easing: utils.module-val(dialog, move-transition-easing, animation.variable(easing-standard)),
+  moving-opacity: utils.module-val(dialog, moving-opacity, theme.emphasis(medium)),
+
+  // Animation
+  enter-animation-duration: utils.module-val(dialog, enter-animation-duration, animation.variable(duration-medium1)),
+  enter-animation-easing: utils.module-val(dialog, enter-animation-easing, animation.variable(easing-standard)),
+  exit-animation-duration: utils.module-val(dialog, exit-animation-duration, animation.variable(duration-short2)),
+  exit-animation-easing: utils.module-val(dialog, exit-animation-easing, animation.variable(easing-emphasized-accelerate)),
+
+  // Zoom animation
+  zoom-opacity: utils.module-val(dialog, zoom-opacity, 0),
+  zoom-scale: utils.module-val(dialog, zoom-scale, 0.8),
+
+  // Fade animation
+  fade-opacity: utils.module-val(dialog, fade-opacity, 0),
+
+  // Slide animation
+  slide-opacity: utils.module-val(dialog, slide-opacity, 0),
+  slide-translate: utils.module-val(dialog, slide-translate, 0 -30%),
+
+  // Backdrop
+  backdrop-opacity: utils.module-val(dialog, backdrop-opacity, backdrop.get(opacity)),
+
+  // Non modal
+  nonmodal-elevation: utils.module-val(dialog, nonmodal-elevation, elevation.value(4)),
+
+  // Fullscreen
+  fullscreen-enter-animation-duration: utils.module-val(dialog, fullscreen-enter-animation-duration, animation.variable(duration-medium1)),
+  fullscreen-exit-animation-duration: utils.module-val(dialog, fullscreen-exit-animation-duration, animation.variable(duration-short2)),
+
+  // Custom position
+  position-x: utils.module-val(dialog, position-x, 0),
+  position-y: utils.module-val(dialog, position-y, 0),
+
+  // Preset
+  preset-sheet-enter-animation-duration: utils.module-val(dialog, preset-sheet-enter-animation-duration, animation.variable(duration-medium1)),
+  preset-sheet-exit-animation-duration: utils.module-val(dialog, preset-sheet-exit-animation-duration, animation.variable(duration-short3)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/expansion-panel/_tokens.scss

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../utils';
+
+$tokens: (
+  animation-duration: utils.module-val(expansion-panel, animation-duration, animation.variable(duration-medium4)),
+  animation-easing: utils.module-val(expansion-panel, animation-easing, animation.variable(easing-standard)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -24,6 +24,8 @@ $tokens: (
   container-padding-inline: utils.module-val(field, container-padding-inline, 12px),
   container-padding-inline-start: utils.module-ref(field, container-padding-inline-start, container-padding-inline),
   container-padding-inline-end: utils.module-ref(field, container-padding-inline-end, container-padding-inline),
+  container-extra-small-padding-inline-start: utils.module-val(field, container-extra-small-padding-inline-start, 8px),
+  container-extra-small-padding-inline-end: utils.module-val(field, container-extra-small-padding-inline-end, 4px),
   container-gap: utils.module-val(field, container-gap, 8px),
   start-padding-inline-end: utils.module-ref(field, start-padding-inline-end, container-gap),
   end-padding-inline-start: utils.module-ref(field, end-padding-inline-start, container-gap),
@@ -123,7 +125,7 @@ $tokens: (
   multiline-resize: utils.module-val(field, multiline-resize, vertical),
   multiline-min-inline-size: utils.module-val(field, multiline-min-inline-size, initial),
   multiline-max-inline-size: utils.module-val(field, multiline-max-inline-size, initial),
-  multiline-min-block-size: utils.module-val(field, multiline-min-block-size, initial),
+  multiline-min-block-size: utils.module-ref(field, multiline-min-block-size, height),
   multiline-max-block-size: utils.module-val(field, multiline-max-block-size, initial),
 
   // Disabled

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../typography';
+@use '../../utils';
+
+$tokens: (
+  color: utils.module-val(icon, color, currentColor),
+  size: utils.module-val(icon, size, 1em),
+  width: utils.module-ref(icon, width, size),
+  height: utils.module-ref(icon, height, size),
+  font-size: utils.module-val(icon, font-size, typography.font-size-relative('1500'))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/label-value/_tokens.scss

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../spacing';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  align: utils.module-val(label-value, align, start),
+
+  // Label
+  label-spacing: utils.module-val(label-value, label-spacing, spacing.variable(xxsmall)),
+  label-block-start-spacing: utils.module-ref(label-value, label-block-start-spacing, label-spacing),
+  label-block-end-spacing: utils.module-ref(label-value, label-block-end-spacing, label-spacing),
+  label-color: utils.module-val(label-value, label-color, theme.variable(text-medium)),
+
+  // Icon
+  icon-spacing: utils.module-val(label-value, icon-spacing, spacing.variable(xxsmall)),
+
+  // Inline label
+  inline-label-spacing: utils.module-val(label-value, inline-label-spacing, spacing.variable(xsmall)),
+
+  // Empty
+  empty-color: utils.module-val(label-value, empty-color, theme.variable(text-medium)),
+  empty-style: utils.module-val(label-value, empty-style, italic),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -6,9 +6,8 @@
 @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),
+  spacing: utils.module-val(list, spacing, 0),
+  container-color: utils.module-val(list, container-color, transparent)
 ) !default;
 
 @function get($key) {

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

@@ -14,7 +14,7 @@ $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, spacing.variable(xsmall) spacing.variable(medium)),
+  padding: utils.module-val(list-item, padding, 0 spacing.variable(medium)),
   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),
@@ -30,13 +30,13 @@ $tokens: (
 
   // 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-opacity: utils.module-val(list-item, selected-opacity, theme.emphasis(lowest)),
   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-opacity: utils.module-val(list-item, disabled-opacity, theme.emphasis(medium-low)),
   disabled-cursor: utils.module-val(list-item, disabled-cursor, not-allowed),
 
   // Line variants
@@ -50,7 +50,7 @@ $tokens: (
   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, spacing.variable(xxlarge)),
-  dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(medium)),
+  dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(xsmall)),
 
   // Leading
   leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
@@ -63,6 +63,9 @@ $tokens: (
   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-size: utils.module-val(list-item, avatar-size, 40px),
+
+  // Wrap
+  wrap-padding: utils.module-val(list-item, wrap-padding, spacing.variable(xsmall) spacing.variable(medium)),
 ) !default;
 
 @function get($key) {

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

@@ -9,16 +9,24 @@
 @use '../../theme';
 @use '../../shape';
 @use '../../border';
+@use '../../spacing';
 @use '../../animation';
 
 $tokens: (
   // Base
+  width: utils.module-val(popover, width, auto),
+  height: utils.module-val(popover, height, auto),
+  min-width: utils.module-val(popover, min-width, none),
+  max-width: utils.module-val(popover, max-width, none),
+  min-height: utils.module-val(popover, min-height, none),
+  max-height: utils.module-val(popover, max-height, none),
   background: utils.module-val(popover, background, theme.variable(surface-bright)),
   border-radius: utils.module-val(popover, border-radius, shape.variable(medium)),
   box-shadow: utils.module-val(popover, box-shadow, theme.variable(popup-elevation)),
   border-width: utils.module-val(popover, border-width, 0),
   border-style: utils.module-val(popover, border-style, solid),
   border-color: utils.module-val(popover, border-color, theme.variable(outline)),
+  overflow: utils.module-val(popover, overflow, initial),
 
   // Arrow
   arrow-size: utils.module-val(popover, arrow-size, 12px),
@@ -32,23 +40,37 @@ $tokens: (
   arrow-border-width: utils.module-val(popover, arrow-border-width, border.variable(thin)),
 
   // Animation
-  animation-timing: utils.module-val(popover, animation-timing, animation.variable(easing-decelerate)),
+  animation-enter-duration: utils.module-val(popover, animation-enter-duration, animation.variable(duration-short3)),
+  animation-enter-timing: utils.module-val(popover, animation-enter-timing, animation.variable(easing-decelerate)),
+  animation-exit-duration: utils.module-val(popover, animation-exit-duration, animation.variable(duration-short2)),
+  animation-exit-timing: utils.module-val(popover, animation-exit-timing, animation.variable(easing-accelerate)),
 
-  zoom-duration: utils.module-val(popover, zoom-duration, animation.variable(duration-short3)),
-  zoom-timing: utils.module-ref(popover, zoom-timing, animating-timing),
+  zoom-enter-duration: utils.module-ref(popover, zoom-enter-duration, animation-enter-duration),
+  zoom-enter-timing: utils.module-ref(popover, zoom-enter-timing, animation-enter-timing),
+  zoom-exit-duration: utils.module-ref(popover, zoom-exit-duration, animation-exit-duration),
+  zoom-exit-timing: utils.module-ref(popover, zoom-exit-timing, animation-exit-timing),
 
-  slide-duration: utils.module-val(popover, slide-duration, animation.variable(duration-short3)),
-  slide-timing: utils.module-ref(popover, slide-timing, animating-timing),
+  slide-enter-duration: utils.module-ref(popover, slide-enter-duration, animation-enter-duration),
+  slide-enter-timing: utils.module-ref(popover, slide-enter-timing, animation-enter-timing),
+  slide-exit-duration: utils.module-ref(popover, slide-exit-duration, animation-exit-duration),
+  slide-exit-timing: utils.module-ref(popover, slide-exit-timing, animation-exit-timing),
   slide-offset: utils.module-val(popover, slide-offset, 24px),
 
-  fade-duration: utils.module-val(popover, fade-duration, animation.variable(duration-medium2)),
-  fade-timing: utils.module-ref(popover, fade-timing, animating-timing),
+  fade-enter-duration: utils.module-val(popover, fade-enter-duration, animation.variable(duration-medium2)),
+  fade-enter-timing: utils.module-ref(popover, fade-enter-timing, animation-enter-timing),
+  fade-exit-duration: utils.module-ref(popover, fade-exit-duration, animation-exit-duration),
+  fade-exit-timing: utils.module-ref(popover, fade-exit-timing, animation-exit-timing),
 
   // No anchor
   position-inline-start: utils.module-val(popover, position-inline-start, auto),
   position-inline-end: utils.module-val(popover, position-inline-end, auto),
   position-block-start: utils.module-val(popover, position-block-start, auto),
   position-block-end: utils.module-val(popover, position-block-end, auto),
+
+  // Preset - Dropdown
+  preset-dropdown-max-height: utils.module-val(popover, preset-dropdown-max-height, 256px),
+  preset-dropdown-overflow: utils.module-val(popover, preset-dropdown-overflow, auto visible),
+  preset-dropdown-padding-block: utils.module-val(popover, preset-dropdown-padding-block, spacing.variable(xsmall)),
 ) !default;
 
 @function get($key) {

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+
+$tokens: (
+  height: utils.module-val(scaffold, height, 100%),
+  width: utils.module-val(scaffold, width, 100%),
+  overflow: utils.module-val(scaffold, overflow, hidden),
+  body-position: utils.module-val(scaffold, body-position, relative),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../typography';
+
+$tokens: (
+  placeholder-color: utils.module-val(select, placeholder-color, theme.variable(text-low)),
+  dense-font-size: utils.module-val(select, dense-font-size, typography.font-size-relative('0875')),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/stepper/step/_tokens.scss

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../shape';
+@use '../../../theme';
+@use '../../../typography';
+@use '../../../utils';
+@use '../../../animation';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(step, primary-color, theme.variable(primary)),
+  text-color: utils.module-val(step, text-color, theme.variable(on-primary)),
+
+  // Base
+  border-radius: utils.module-val(step, border-radius, shape.variable(extra-large)),
+
+  // Vertical
+  border-radius-vertical: utils.module-val(step, border-radius-vertical, shape.variable(medium)),
+
+  // Disabled
+  disabled-text-color: utils.module-val(step, disabled-text-color, theme.variable(text-low)),
+  disabled-color: utils.module-val(step, disabled-color, theme.variable(surface-container-minimum)),
+
+  // Icon
+  icon-fill: utils.module-val(step, icon-fill, unset),
+  icon-fill-active: utils.module-ref(step, icon-fill-active, primary-color),
+  icon-text-color: utils.module-val(step, icon-text-color, theme.variable(primary)),
+  icon-text-color-active: utils.module-val(step, icon-text-color-active, theme.variable(on-primary)),
+  icon-content-size: utils.module-val(step, icon-content-size, 24px),
+  icon-size: utils.module-val(step, icon-size, typography.font-size-relative('0875')),
+  icon-transition-duration: utils.module-val(step, icon-transition-duration, animation.variable(duration-medium4)),
+  icon-transition-easing: utils.module-val(step, icon-transition-easing, animation.variable(easing-standard)),
+  
+  // Line
+  line-color: utils.module-val(step, line-color, theme.variable(outline)),
+  line-min-width: utils.module-val(step, line-min-width, 10px),
+  line-min-width-clustered: utils.module-val(step, line-min-width-clustered, 25px),
+
+  // Label
+  label-color: utils.module-val(step, label-color, theme.variable(text-high)),
+  sub-label-color: utils.module-val(step, sub-label-color, theme.variable(text-medium)),
+
+  // Error
+  error-color: utils.module-val(step, error-color, theme.variable(error)),
+  error-text-color: utils.module-val(step, error-text-color, theme.variable(on-error)),
+
+  // Expansion
+  expansion-panel-border-left-width: utils.module-val(step, expansion-panel-border-left-width, 1px),
+  expansion-panel-margin-bottom: utils.module-val(step, expansion-panel-margin-bottom, 4px),
+  expansion-panel-margin-left: utils.module-val(step, expansion-panel-margin-left, 60px),
+  expansion-panel-margin-top: utils.module-val(step, expansion-panel-margin-top, 4px),
+  expansion-panel-icon-color: utils.module-val(step, expansion-panel-icon-color, theme.variable(text-medium)),
+
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../spacing';
+@use '../../shape';
+@use '../../elevation';
+@use '../../animation';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(toast, background, theme.variable(surface-inverse)),
+  color: utils.module-val(toast, color, theme.variable(on-surface-inverse)),
+  offset: utils.module-val(toast, offset, spacing.variable(medium)),
+  shape: utils.module-val(toast, shape, shape.variable(medium)),
+  elevation: utils.module-val(toast, elevation, elevation.value(6)),
+  action-color: utils.module-val(toast, action-color, theme.variable(secondary)),
+  min-width: utils.module-val(toast, min-width, 344px),
+  max-width: utils.module-val(toast, max-width, 672px),
+  min-height: utils.module-val(toast, min-height, 48px),
+  inline-padding: utils.module-val(toast, inline-padding, spacing.variable(medium)),
+  spacing: utils.module-val(toast, spacing, spacing.variable(xsmall)),
+  message-padding: utils.module-val(toast, message-padding, spacing.variable(xsmall)),
+
+  // Animation
+  enter-duration: utils.module-val(toast, enter-duration, animation.variable(duration-medium1)),
+  enter-timing: utils.module-val(toast, enter-timing, animation.variable(easing-decelerate)),
+  exit-duration: utils.module-val(toast, exit-duration, animation.variable(duration-short4)),
+  exit-timing: utils.module-val(toast, exit-timing, animation.variable(easing-emphasized-accelerate)),
+  slide-origin: utils.module-val(toast, slide-origin, 100%)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}