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

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

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../elevation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../theme';
+@use '../../typography';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(button, primary-color, theme.variable(primary)),
+  text-color: utils.module-ref(button, text-color, primary-color),
+  disabled-color: utils.module-val(button, disabled, theme.variable(surface-container)),
+  padding: utils.module-val(button, padding, 8px),
+  display: utils.module-val(button, display, inline-flex),
+  justify: utils.module-val(button, justify, center),
+  shape: utils.module-val(button, shape, shape.variable(medium)),
+
+  // Base
+  height: utils.module-val(button, height, 36px),
+  min-width: utils.module-val(button, min-width, 64px),
+  spacing: utils.module-val(button, spacing, spacing.variable(xsmall)),
+  border-width: utils.module-val(button, border-width, medium),
+  border-style: utils.module-val(button, border-style, none),
+  border-color: utils.module-val(button, border-color, currentColor),
+  shape-start-start-radius: utils.module-ref(button, shape-start-start-radius, shape),
+  shape-start-end-radius: utils.module-ref(button, shape-start-end-radius, shape),
+  shape-end-start-radius: utils.module-ref(button, shape-end-start-radius, shape),
+  shape-end-end-radius: utils.module-ref(button, shape-end-end-radius, shape),
+  padding-block: utils.module-ref(button, padding-block, padding),
+  padding-inline: utils.module-ref(button, padding-inline, padding),
+  background: utils.module-val(button, background, transparent),
+  hover-background: utils.module-ref(button, hover-background, background),
+  active-background: utils.module-ref(button, active-background, background),
+  color: utils.module-ref(button, color, text-color),
+  icon-size: utils.module-val(button, icon-size, typography.font-size-relative('1125')),
+  shadow: utils.module-val(button, shadow, none),
+  hover-shadow: utils.module-val(button, hover-shadow, none),
+  active-shadow: utils.module-val(button, active-shadow, none),
+  cursor: utils.module-val(button, cursor, pointer),
+  transition-duration: utils.module-val(button, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(button, transition-timing, animation.variable(easing-standard)),
+
+  // Outlined
+  outlined-background: utils.module-ref(button, outlined-background, background),
+  outlined-color: utils.module-ref(button, outlined-color, primary-color),
+  outlined-border-width: utils.module-val(button, outlined-border-width, border.variable(thin)),
+  outlined-border-style: utils.module-val(button, outlined-border-style, solid),
+  outlined-border-color: utils.module-ref(button, outlined-border-color, primary-color),
+
+  // Tonal
+  tonal-background: utils.module-val(button, tonal-background, theme.variable(primary-container)),
+  tonal-disabled-background: utils.module-ref(button, tonal-disabled-background, disabled-color),
+  tonal-color: utils.module-val(button, flat-color, theme.variable(on-primary-container)),
+  tonal-disabled-color: utils.module-ref(button, tonal-disabled-color, disabled-text-color),
+
+  // Filled
+  filled-background: utils.module-ref(button, filled-background, primary-color),
+  filled-disabled-background: utils.module-ref(button, filled-disabled-background, disabled-color),
+  filled-color: utils.module-val(button, filled-color, theme.variable(on-primary)),
+  filled-disabled-color: utils.module-ref(button, filled-disabled-color, disabled-text-color),
+
+  // Raised
+  raised-shadow: utils.module-val(button, raised-shadow, elevation.value(2)),
+  raised-hover-shadow: utils.module-val(button, raised-hover-shadow, elevation.value(4)),
+  raised-active-shadow: utils.module-val(button, raised-active-shadow, elevation.value(8)),
+  raised-disabled-shadow: utils.module-val(button, raised-disabled-shadow, none),
+
+  // Link
+  link-color: utils.module-ref(button, link-color, primary-color),
+  link-text-decoration: utils.module-val(button, link-text-decoration, underline),
+  link-height: utils.module-val(button, link-height, auto),
+  link-padding: utils.module-val(button, link-padding, 0),
+  link-line-height: utils.module-val(button, link-line-height, normal),
+  link-width: utils.module-val(button, link-width, auto),
+  link-hover-text-decoration: utils.module-val(button, link-hover-text-decoration, none),
+  link-active-opacity: utils.module-val(button, link-active-opacity, theme.emphasis(high)),
+  link-transition-duration: utils.module-val(button, link-transition-duration, animation.variable(duration-short3)),
+  link-transition-timing: utils.module-val(button, link-transition-timing, animation.variable(easing-standard)),
+
+  // Disabled
+  disabled-cursor: utils.module-val(button, disabled-cursor, not-allowed),
+  disabled-text-color: utils.module-val(button, disabled-text-color, theme.variable(text-low)),
+  disabled-background: utils.module-val(button, disabled-background, transparent),
+  disabled-border-color: utils.module-ref(button, disabled-border-color, disabled-color),
+  disabled-shadow: utils.module-val(button, disabled-shadow, none),
+
+  // Dense
+  dense-height: utils.module-val(button, dense-height, 24px),
+
+  // Pill
+  pill-shape: utils.module-val(button, pill-shape, shape.variable(full)),
+  pill-padding-inline: utils.module-val(button, pill-padding-inline, spacing.variable(small)),
+
+  // Focus indicator
+  focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 4px),
+  text-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 0px),
+  link-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 2px),
+
+  // Popover icon
+  popover-icon-transition-duration: utils.module-val(button, popover-icon-transition-duration, animation.variable(duration-short3)),
+  popover-icon-transition-timing: utils.module-val(button, popover-icon-transition-timing, animation.variable(easing-standard)),
+  popover-icon-open-rotation: utils.module-val(button, popover-icon-open-rotation, 180deg)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../elevation';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(checkbox, primary-color, theme.variable(tertiary)),
+  size: utils.module-val(checkbox, size, 16px),
+  border-width: utils.module-val(checkbox, border-width, border.variable(medium)),
+  icon-color: utils.module-val(checkbox, icon-color, theme.variable(on-tertiary)),
+  state-layer-size: utils.module-val(checkbox, state-layer-size, 40px),
+  state-layer-dense-size: utils.module-val(checkbox, state-layer-size, 24px),
+
+  // Checkbox
+  background-color: utils.module-val(checkbox, background-color, 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),
+  unchecked-border-color: utils.module-val(checkbox, unchecked-border-color, theme.variable(surface-container-high)),
+  shape: utils.module-val(checkbox, shape, shape.variable(small)),
+  elevation: utils.module-val(checkbox, elevation, elevation.value(0)),
+  
+  // Checkbox checked
+  checked-background-color: utils.module-ref(checkbox, checked-background-color, 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),
+
+  // Icon
+  icon-checked-color: utils.module-ref(checkbox, icon-checked-color, icon-color),
+  icon-indeterminate-color: utils.module-ref(checkbox, icon-indeterminate-color, icon-color),
+  icon-stroke-width: utils.module-val(checkbox, icon-stroke-width, 4px),
+
+  // Label
+  gap: utils.module-val(checkbox, gap, 0),
+  justify: utils.module-val(switch, justify, space-between),
+  direction: utils.module-val(switch, direction, initial),
+
+  // State layer
+  state-layer-width: utils.module-ref(checkbox, state-layer-width, state-layer-size),
+  state-layer-height: utils.module-ref(checkbox, state-layer-height, state-layer-size),
+  state-layer-checked-color: utils.module-ref(checkbox, state-layer-checked-color, primary-color),
+  state-layer-unchecked-color: utils.module-ref(state-layer, state-layer-unchecked-color, color),
+  state-layer-shape: utils.module-val(checkbox, state-layer-shape, shape.variable(full)),
+
+  // Dense
+  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),
+
+  // Disabled
+  disabled-opacity: utils.module-val(checkbox, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Animation
+  animation-duration: utils.module-val(checkbox, animation-duration, animation.variable(duration-short2)),
+  background-animation-timing: utils.module-val(checkbox, animation-duration, animation.variable(easing-standard)),
+  icon-animation-timing: utils.module-val(checkbox, animation-duration, animation.variable(easing-emphasized-accelerate))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -5,15 +5,25 @@
  */
 @use 'sass:map';
 @use '../../theme';
+@use '../../animation';
 @use '../../utils';
 
 $tokens: (
+  // Dimensions
   size: utils.module-val(circular-progress, size, 48px),
   padding: utils.module-val(circular-progress, padding, 0),
+
+  // Track
   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)),
-  arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms)
+  track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary-container)),
+
+  // Indicator
+  indicator-color: utils.module-val(circular-progress, indicator-color, theme.variable(tertiary)),
+
+  // Animation
+  arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms),
+  theme-transition-duration: utils.module-val(circular-progress, theme-transition-duration, animation.variable(duration-short3)),
+  theme-transition-timing: utils.module-val(circular-progress, theme-transition-timing, animation.variable(easing-standard)),
 ) !default;
 
 @function get($key) {

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

@@ -11,20 +11,23 @@
 @use '../../spacing';
 @use '../../utils';
 
-/* stylelint-disable length-zero-no-unit */
 $tokens: (
+  width: utils.module-val(focus-indicator, width, border.variable(medium)),
   active-width: utils.module-val(focus-indicator, active-width, 6px),
+
   color: utils.module-val(focus-indicator, color, theme.variable(primary)),
+  shape: utils.module-val(focus-indicator, shape, shape.variable(extra-small)), // Requires unit
+  
   duration: utils.module-val(focus-indicator, duration, animation.variable(duration-long4)),
-  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable('050')),
-  inward-offset: utils.module-val(focus-indicator, inward-offset, 0), // Requires unit
-  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),
   shape-end-start: utils.module-ref(focus-indicator, shape-end-start, shape),
+  
+  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable(xxsmall)),
+  inward-offset: utils.module-val(focus-indicator, inward-offset, 0px), // Requires unit
   offset-block: utils.module-val(focus-indicator, offset-block, 0),
   offset-inline: utils.module-val(focus-indicator, offset-inline, 0)
 ) !default;

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../animation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../elevation';
+@use '../../typography';
+@use '../../theme';
+
+$tokens: (
+  // General
+  display: utils.module-val(icon-button, display, inline-flex),
+  size: utils.module-val(icon-button, size, 48px),
+  gap: utils.module-val(icon-button, spacing, 0),
+  icon-color: utils.module-val(icon-button, icon-color, inherit),
+  background-color: utils.module-val(icon-button, background-color, none),
+  icon-size: utils.module-val(icon-button, icon-size, typography.font-size-relative('1500')),
+  cursor: utils.module-val(icon-button, cursor, pointer),
+  padding: utils.module-val(icon-button, padding, spacing.variable(xxsmall)),
+  border: utils.module-val(icon-button, border, none),
+  shadow: utils.module-val(icon-button, shadow, none),
+
+  // Animation
+  transition-duration: utils.module-val(icon-button, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(icon-button, transition-timing, animation.variable(easing-standard)),
+  
+  // Shape
+  shape: utils.module-val(icon-button, shape, shape.variable(full)),
+  shape-start-start: utils.module-ref(icon-button, shape-start-start, shape),
+  shape-start-end: utils.module-ref(icon-button, shape-start-end, shape),
+  shape-end-start: utils.module-ref(icon-button, shape-end-start, shape),
+  shape-end-end: utils.module-ref(icon-button, shape-end-end, shape),
+  shape-squared: utils.module-val(icon-button, shape-squared, shape.variable(medium)),
+
+  // Outlined
+  outlined-border-width: utils.module-val(icon-button, outlined-border-width, 1px),
+  outlined-border-style: utils.module-val(icon-button, outlined-border-style, solid),
+  outlined-border-color: utils.module-ref(icon-button, outlined-border-color, icon-color),
+
+  // Tonal
+  tonal-icon-color: utils.module-val(icon-button, tonal-icon-color, theme.variable(on-primary-container)),
+  tonal-background-color: utils.module-val(icon-button, tonal-background-color, theme.variable(primary-container)),
+
+  // Filled
+  filled-icon-color: utils.module-val(icon-button, filled-icon-color, theme.variable(on-primary)),
+  filled-background-color: utils.module-val(icon-button, filled-background-color, theme.variable(primary)),
+
+  // Raised
+  raised-shadow: utils.module-val(icon-button, raised-shadow, elevation.value(2)),
+  raised-hover-shadow: utils.module-val(icon-button, raised-hover-shadow, elevation.value(4)),
+  raised-active-shadow: utils.module-val(icon-button, raised-active-shadow, elevation.value(8)),
+  raised-disabled-shadow: utils.module-val(icon-button, raised-disabled-shadow, none),
+
+  // Density - small
+  density-small-size: utils.module-val(icon-button, density-small-size, 24px),
+  density-small-padding: utils.module-val(icon-button, density-small-padding, spacing.variable(xxxsmall)),
+  density-small-icon-size: utils.module-val(icon-button, density-small-icon-size, typography.font-size-relative('1125')),
+
+  // Density - medium
+  density-medium-size: utils.module-val(icon-button, density-medium-size, 36px),
+  density-medium-padding: utils.module-val(icon-button, density-medium-padding, spacing.variable(xxsmall)),
+
+  // Density - large (default)
+  density-large-size: utils.module-ref(icon-button, density-large-size, size),
+
+  // Toggle (on)
+  toggle-on-icon-color: utils.module-val(icon-button, toggle-on-icon-color, theme.variable(primary)),
+
+  // Toggle (on) outlined
+  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container-low)),
+  outlined-toggle-on-icon-color: utils.module-val(icon-button, outlined-toggle-on-icon-color, theme.variable(primary)),
+
+  // Toggle tonal
+  tonal-toggle-background-color: utils.module-val(icon-button, tonal-toggle-background-color, theme.variable(surface-container-low)),
+
+  // Toggle (on) tonal
+  tonal-toggle-on-background-color: utils.module-val(icon-button, tonal-toggle-on-background-color, theme.variable(primary-container)),
+  tonal-toggle-on-icon-color: utils.module-val(icon-button, tonal-toggle-on-icon-color, theme.variable(primary)),
+
+  // Toggle filled
+  filled-toggle-background-color: utils.module-val(icon-button, filled-toggle-background-color, theme.variable(surface-container-low)),
+  filled-toggle-icon-color: utils.module-val(icon-button, filled-toggle-background-color, theme.variable(primary)),
+
+  // Toggle (on) filled
+  filled-toggle-on-background-color: utils.module-val(icon-button, filled-toggle-on-background-color, theme.variable(primary)),
+  filled-toggle-on-icon-color: utils.module-val(icon-button, filled-toggle-on-icon-color, theme.variable(on-primary)),
+
+  // Disabled
+  disabled-cursor: utils.module-val(icon-button, disabled-cursor, not-allowed),
+  disabled-opacity: utils.module-val(icon-button, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Popover icon
+  popover-icon-padding: utils.module-val(icon-button, popover-icon-padding, spacing.variable(xsmall)),
+
+  // Focus indicator
+  focus-indicator-color: utils.module-val(icon-button, focus-indicator-color, theme.variable(primary))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/index.scss

@@ -7,4 +7,3 @@
 @use '../core/config';
 
 @forward './theme/tokens';
-// @forward './typography/tokens';

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

@@ -10,14 +10,25 @@
 @use '../../utils';
 
 $tokens: (
+  // Track
   track-height: utils.module-val(linear-progress, track-height, 4px),
-  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-track-color)),
-  active-indicator-color: utils.module-val(linear-progress, indicator-color, theme.variable(tertiary)),
+  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-container)),
   track-shape: utils.module-val(linear-progress, track-shape, shape.variable(full)),
-  active-indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),
+
+  // Indicator
+  indicator-color: utils.module-val(linear-progress, indicator-color, theme.variable(tertiary)),
+  indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),
+
+  // Determinate
   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)),
+
+  // Indeterminate
+  indeterminate-duration: utils.module-val(linear-progress, indeterminate-duration, 2s),
+
+  // Theme
+  theme-transition-duration: utils.module-val(linear-progress, theme-transition-duration, animation.variable(duration-short3)),
+  theme-transition-timing: utils.module-val(linear-progress, theme-transition-timing, animation.variable(easing-standard)),
 ) !default;
 
 @function get($key) {

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/slider/_tokens.scss

@@ -6,7 +6,6 @@
 @use 'sass:map';
 @use '../../theme';
 @use '../../shape';
-@use '../color-palette';
 @use '../../utils';
 
 $tokens: (
@@ -14,19 +13,18 @@ $tokens: (
   active-track-color: utils.module-val(slider, active-track-color, theme.variable(primary)),
   active-track-height: utils.module-ref(slider, active-track-height, track-height),
   active-track-shape: utils.module-val(slider, active-track-shape, shape.variable(full)),
-  disabled-active-track-color: utils.module-val(slider, disabled-active-track-color, color-palette.$grey-500),
-  disabled-active-track-opacity: utils.module-val(slider, disabled-active-track-opacity, 0.38),
-  disabled-handle-color: utils.module-val(slider, disabled-handle-color, color-palette.$grey-500),
-  disabled-inactive-track-color: utils.module-val(slider, disabled-inactive-track-color, color-palette.$grey-500),
-  disabled-inactive-track-opacity: utils.module-val(slider, disabled-inactive-track-opacity, 0.12),
+  disabled-active-track-color: utils.module-val(slider, disabled-active-track-color, theme.variable(surface-container-high)),
+  disabled-active-track-opacity: utils.module-val(slider, disabled-active-track-opacity, theme.emphasis(medium-low)),
+  disabled-handle-color: utils.module-val(slider, disabled-handle-color, theme.variable(surface-container-high)),
+  disabled-inactive-track-color: utils.module-val(slider, disabled-inactive-track-color, theme.variable(surface-container-high)),
+  disabled-inactive-track-opacity: utils.module-val(slider, disabled-inactive-track-opacity, theme.emphasis(lower)),
   focus-handle-color: utils.module-val(slider, focus-handle-color, theme.variable(primary)),
   handle-color: utils.module-val(slider, handle-color, theme.variable(primary)),
   handle-height: utils.module-val(slider, handle-height, 20px),
   handle-shape: utils.module-val(slider, handle-shape, shape.variable(round)),
   handle-width: utils.module-val(slider, handle-width, 20px),
   hover-handle-color: utils.module-val(slider, hover-handle-color, theme.variable(primary)),
-  inactive-track-color-fallback: utils.module-val(slider, inactive-track-color, #d5d8ee), // TODO: remove this when we're confident that color-mix is more widely supported
-  inactive-track-color: utils.module-val(slider, inactive-track-color, color-mix(in srgb, theme.variable(primary) 24%, transparent)),
+  inactive-track-color: utils.module-val(slider, inactive-track-color, theme.variable(primary-container)),
   inactive-track-height: utils.module-ref(slider, inactive-track-height, track-height),
   inactive-track-shape: utils.module-val(slider, inactive-track-shape, shape.variable(full)),
   label-container-shape: utils.module-val(slider, label-container-shape, shape.variable(full)),
@@ -37,10 +35,10 @@ $tokens: (
   state-layer-size: utils.module-val(slider, state-layer-size, 40px),
   with-overlap-handle-outline-color: utils.module-val(slider, with-overlap-handle-outline-color, theme.variable(on-primary)),
   with-overlap-handle-outline-width: utils.module-val(slider, with-overlap-handle-outline-width, 1px),
-  with-tick-marks-active-container-color: utils.module-val(slider, with-tick-marks-active-container-color, theme.variable(primary)),
+  with-tick-marks-active-container-color: utils.module-val(slider, with-tick-marks-active-container-color, theme.variable(on-primary)),
   with-tick-marks-container-size: utils.module-val(slider, with-tick-marks-container-size, 2px),
-  with-tick-marks-disabled-active-container-color: utils.module-val(slider, with-tick-marks-disabled-active-container-color, theme.variable(text-primary)),
-  with-tick-marks-disabled-inactive-container-color: utils.module-val(slider, with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, theme.variable(on-primary) 50%, transparent)),
+  with-tick-marks-disabled-active-container-color: utils.module-val(slider, with-tick-marks-disabled-active-container-color, theme.variable(on-surface-container-high)),
+  with-tick-marks-disabled-inactive-container-color: utils.module-val(slider, with-tick-marks-disabled-inactive-container-color, theme.variable(on-surface-container-high)),
   with-tick-marks-inactive-container-color: utils.module-val(slider, with-tick-marks-inactive-container-color, theme.variable(primary))
 ) !default;