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

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

@@ -16,8 +16,8 @@ $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, 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
+  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, 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)),

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

@@ -11,7 +11,7 @@
 
 $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, shape.variable(full)),
   active-indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),

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;
 

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

@@ -3,18 +3,18 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$base: 8px !default; // The Forge spacing system scales in multiples of 8
+$base: 16px !default; // The Forge spacing system scales in multiples of 8
 
 $tokens: (
-  '025': $base * 0.25, // 2px
-  '050': $base * 0.5,  // 4px
-  '100': $base,        // 8px
-  '150': $base * 1.5,  // 12px
-  '200': $base * 2,    // 16px
-  '300': $base * 3,    // 24px
-  '400': $base * 4,    // 32px
-  '600': $base * 6,    // 48px
-  '700': $base * 7,    // 56px
+  '0125': $base * 0.125, // 2px
+  '025': $base * 0.25,   // 4px
+  '050': $base * 0.5,    // 8px
+  '075': $base * 0.75,   // 12px
+  '100': $base,          // 16px
+  '150': $base * 1.5,    // 24px
+  '200': $base * 2,      // 32px
+  '300': $base * 3,      // 48px
+  '350': $base * 3.5,    // 56px
 ) !default;
 
 @function get($key) {

package/styles/core/styles/tokens/state-layer/_tokens.scss

@@ -10,12 +10,12 @@
 $tokens: (
   color: utils.module-val(state-layer, color, theme.variable(on-surface)),
   hover-color: utils.module-ref(state-layer, hover-color, color),
-  hover-opacity: 0.08,
+  hover-opacity: utils.module-val(state-layer, hover-opacity, 0.08),
   pressed-color: utils.module-ref(state-layer, pressed-color, color),
-  pressed-opacity: 0.12,
-  hover-duration: 15ms,
-  pressed-duration: 105ms,
-  animation-duration: 375ms
+  pressed-opacity: utils.module-val(state-layer, pressed-opacity, 0.12),
+  hover-duration: utils.module-val(state-layer, hover-duration, 15ms),
+  pressed-duration: utils.module-val(state-layer, pressed-duration, 105ms),
+  animation-duration: utils.module-val(state-layer, animation-duration, 375ms)
 ) !default;
 
 @function get($key) {

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

@@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../color-palette';
+@use '../../animation';
+@use '../../elevation';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  handle-size: utils.module-val(switch, handle-size, 20px),
+  handle-scale: utils.module-val(switch, handle-scale, 1),
+  handle-elevation: utils.module-val(switch, handle-elevation, elevation.value(1)),
+
+  track-border-width: utils.module-val(switch, track-border-width, 0),
+  track-border-color: utils.module-val(switch, track-border-color, transparent),
+
+  icon-color: utils.module-val(switch, icon-color, theme.variable(on-tertiary)),
+  icon-scale: utils.module-val(switch, icon-scale, 1),
+
+  state-layer-size: utils.module-val(switch, state-layer-size, 40px),
+  state-layer-dense-size: utils.module-val(switch, handle-dense-size, 28px),
+
+  // Handle
+  handle-on-color: utils.module-val(switch, handle-on-color, theme.variable(tertiary)),
+  handle-off-color: utils.module-val(switch, handle-off-color, theme.variable(surface-container-high)),
+  handle-width: utils.module-ref(switch, handle-width, handle-size),
+  handle-height: utils.module-ref(switch, handle-height, handle-size),
+  handle-on-scale: utils.module-ref(switch, handle-on-scale, handle-scale),
+  handle-off-scale: utils.module-ref(switch, handle-off-scale, handle-scale),
+  handle-shape: utils.module-val(switch, handle-shape, shape.variable(round)),
+  handle-on-elevation: utils.module-ref(switch, handle-on-elevation, handle-elevation),
+  handle-off-elevation: utils.module-ref(switch, handle-off-elevation, handle-elevation),
+
+  // Track
+  track-on-color: utils.module-val(switch, track-on-color, theme.variable(tertiary-container)),
+  track-off-color: utils.module-val(switch, track-off-color, theme.variable(surface-container)),
+  track-width: utils.module-val(switch, track-width, 36px),
+  track-height: utils.module-val(switch, track-height, 14px),
+  track-shape: utils.module-val(switch, track-shape, shape.variable(full)),
+  track-on-border-width: utils.module-ref(switch, track-on-border-width, track-border-width),
+  track-off-border-width: utils.module-ref(switch, track-off-border-width, track-border-width),
+  track-on-border-color: utils.module-ref(switch, track-on-border-color, track-border-color),
+  track-off-border-color: utils.module-ref(switch, track-off-border-color, track-border-color),
+
+  // Icon
+  icon-on-color: utils.module-ref(switch, icon-on-color, icon-color),
+  icon-off-color: utils.module-ref(switch, icon-off-color, icon-color),
+  icon-on-size: utils.module-ref(switch, icon-on-size, handle-size),
+  icon-off-size: utils.module-ref(switch, icon-off-size, handle-size),
+  icon-on-scale: utils.module-ref(switch, icon-on-scale, icon-scale),
+  icon-off-scale: utils.module-ref(switch, icon-off-scale, icon-scale),
+
+  // Label
+  gap: utils.module-val(switch, 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(switch, state-layer-width, state-layer-size),
+  state-layer-height: utils.module-ref(switch, state-layer-height, state-layer-size),
+  state-layer-on-color: utils.module-ref(switch, state-layer-on-color, handle-on-color),
+  state-layer-off-color: utils.module-ref(state-layer, state-layer-off-color, color),
+
+  // Dense
+  state-layer-dense-width: utils.module-ref(switch, state-layer-dense-width, state-layer-dense-size),
+  state-layer-dense-height: utils.module-ref(switch, state-layer-dense-height, state-layer-dense-size),
+
+  // Disabled
+  disabled-opacity: utils.module-val(switch, disabled-opacity, 0.38),
+
+  // Active
+  handle-active-on-color: utils.module-ref(switch, handle-active-on-color, handle-on-color),
+  handle-active-off-color: utils.module-ref(switch, handle-active-off-color, handle-off-color),
+  handle-active-scale: utils.module-val(switch, handle-active-scale, 1.2),
+  handle-active-on-scale: utils.module-ref(switch, handle-active-on-scale, handle-active-scale),
+  handle-active-off-scale: utils.module-ref(switch, handle-active-off-scale, handle-active-scale),
+  handle-active-elevation: utils.module-ref(switch, handle-active-elevation, handle-elevation),
+  handle-active-on-elevation: utils.module-ref(switch, handle-active-on-elevation, handle-active-elevation),
+  handle-active-off-elevation: utils.module-ref(switch, handle-active-on-elevation, handle-active-elevation),
+  track-active-on-color: utils.module-ref(switch, track-active-on-color, track-on-color),
+  track-active-off-color: utils.module-ref(switch, track-active-off-color, track-off-color),
+  track-active-on-border-width: utils.module-ref(switch, track-active-on-border-width, track-on-border-width),
+  track-active-off-border-width: utils.module-ref(switch, track-active-off-border-width, track-off-border-width),
+  track-active-on-border-color: utils.module-ref(switch, track-active-on-border-color, track-on-border-color),
+  track-active-off-border-color: utils.module-ref(switch, track-active-off-border-color, track-off-border-color),
+  icon-active-on-color: utils.module-ref(switch, icon-active-on-color, icon-on-color),
+  icon-active-off-color: utils.module-ref(switch, icon-active-off-color, icon-off-color),
+  icon-active-on-scale: utils.module-ref(switch, icon-active-on-scale, icon-on-scale),
+  icon-active-off-scale: utils.module-ref(switch, icon-active-off-scale, icon-off-scale),
+
+  // Animation
+  animation-duration: utils.module-val(switch, animation-duration, animation.variable(duration-short2)),
+  animation-timing: utils.module-val(switch, animation-timing, animation.variable(easing-standard)),
+  active-animation-timing: utils.module-val(switch, active-animation-timing, animation.variable(easing-linear))
+) !default;
+
+///
+/// Gets a token from the token map.
+///
+@function get($name) {
+  @return map.get($tokens, $name);
+}

package/styles/core/styles/tokens/tabs/tab/_tokens.scss

@@ -6,11 +6,12 @@
 @use 'sass:map';
 @use '../../../theme';
 @use '../../../utils';
+@use '../../../spacing';
 
 $tokens: (
   // Shared
   active-color: utils.module-val(tab, active-color, theme.variable(primary)),
-  inactive-color: utils.module-val(tab, inactive-color, theme.variable(text-secondary)),
+  inactive-color: utils.module-val(tab, inactive-color, theme.variable(text-medium)),
   height: utils.module-val(tab, height, 48px),
   stacked-height: utils.module-val(tab, stacked-height, 64px),
 
@@ -40,6 +41,7 @@ $tokens: (
   
   // Content
   content-height: utils.module-ref(tab, content-height, height),
+  content-padding: utils.module-val(tab, content-padding, spacing.variable('025')),
 
   // Icon
   active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),

package/styles/core/styles/tokens/tabs/tab-bar/_tokens.scss

@@ -10,7 +10,7 @@
 $tokens: (
   container-justify: utils.module-val(tab-bar, justify, space-between),
   tab-flex: utils.module-val(tab-bar, stretch, 1),
-  divider-color: utils.module-val(tab-bar, divider-color, theme.variable(border-color)),
+  divider-color: utils.module-val(tab-bar, divider-color, theme.variable(outline)),
   divider-thickness: utils.module-val(tab-bar, divider-thickness, 1px)
 );
 

package/styles/core/styles/tokens/theme/_color-emphasis.scss

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+
+$color-emphasis-scale: (
+  '004': 4%,
+  '008': 8%,
+  '012': 12%,
+  '024': 24%,
+  '038': 38%,
+  '054': 54%,
+  '060': 60%,
+  '065': 65%,
+  '070': 70%,
+  '080': 80%,
+  '087': 87%
+);
+
+$color-emphasis: (
+  highest: map.get($color-emphasis-scale, '087'),
+  inverse: map.get($color-emphasis-scale, '080'),
+  higher: map.get($color-emphasis-scale, '070'),
+  high: map.get($color-emphasis-scale, '065'),
+  medium-high: map.get($color-emphasis-scale, '060'),
+  medium: map.get($color-emphasis-scale, '054'),
+  medium-low: map.get($color-emphasis-scale, '038'),
+  low: map.get($color-emphasis-scale, '024'),
+  lower: map.get($color-emphasis-scale, '012'),
+  lowest: map.get($color-emphasis-scale, '008'),
+  minimum: map.get($color-emphasis-scale, '004'),
+);
+
+@function value($emphasis) {
+  @return map.get($color-emphasis, $emphasis);
+}

package/styles/core/styles/tokens/theme/_token-utils.scss

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme/utils' as theme-utils;
+@use '../../theme/color-utils';
+@use './color-emphasis';
+
+///
+/// Computes the dependent theme colors from the provided theme color value.
+/// 
+/// @param {String} $name - The name of the theme color
+/// @param {Color} $color - The theme color
+/// @param {Color} $surface - The base surface color
+/// @return {Map} - The computed theme map
+/// 
+@function get-color-theme($name, $color, $surface) {
+  @if not theme-utils.is-color($color) {
+    @error 'The value for "#{$name}" must be a color type.';
+  }
+
+  $surface-tone: color-utils.tone($surface);
+
+  // The container colors are the provided color mixed with the surface color at lower emphasis levels
+  $container: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
+  // $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
+
+  // The on-color is the contrast color against the provided color
+  $on-color: theme-utils.contrast($color);
+
+  // The on-container colors are the contrast color for the provided color mixed with the
+  // container color at a lower emphasis to let the contrast color bleed through for
+  // increased contrast against the lower emphasis container color 
+  $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(low));
+  // $on-container-high: theme-utils.contrast($container-high);
+
+  @return (
+    #{$name}: $color,
+    #{$name}-container: $container,
+    // #{$name}-container-high: $container-high,
+    on-#{$name}: $on-color,
+    on-#{$name}-container: $on-container,
+    // on-#{$name}-container-high: $on-container-high
+  );
+}

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

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use './token-utils';
+@use './tokens.surface' as surface;
+@use '../color-palette';
+
+///
+/// Computes the status theme colors.
+/// 
+/// @param {Map} $colors - The status colors map.
+/// @param {Map} $surface-theme - The base surface theme
+/// @return {Map} - The computed status theme
+/// 
+@function get-status-theme($colors, $surface-theme) {
+  $surface: map.get($surface-theme, surface);
+
+  $primary-theme: token-utils.get-color-theme('primary', map.get($colors, primary), $surface);
+  $secondary-theme: token-utils.get-color-theme('secondary', map.get($colors, secondary), $surface);
+  $tertiary-theme: token-utils.get-color-theme('tertiary', map.get($colors, tertiary), $surface);
+
+  @return utils.flatten(
+    $primary-theme,
+    $secondary-theme,
+    $tertiary-theme
+  );
+}
+
+// Light
+$tokens: get-status-theme((
+  primary: color-palette.$indigo-500,
+  secondary: color-palette.$amber-500,
+  tertiary: color-palette.$indigo-a400
+), surface.$tokens);
+
+// Dark
+$tokens-dark: get-status-theme((
+  primary: color-palette.$indigo-a100,
+  secondary: color-palette.$amber-200,
+  tertiary: color-palette.$amber-200
+), surface.$tokens-dark);