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

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

@@ -5,40 +5,40 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../color-palette';
-@use '../utils';
+@use '../../shape';
+@use '../../utils';
 
 $tokens: (
   track-height: utils.module-val(slider, track-height, 4px),
   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, 9999px),
-  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),
+  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, 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, 9999px),
+  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, 9999px),
+  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)),
   label-container-color: utils.module-val(slider, label-container-color, theme.variable(primary)),
   label-container-height: utils.module-val(slider, label-container-height, 28px),
-  label-label-text-color: utils.module-val(slider, label-label-text-color, theme.variable(on-primary)),
+  label-text-color: utils.module-val(slider, label-text-color, theme.variable(on-primary)),
   pressed-handle-color: utils.module-val(slider, pressed-handle-color, theme.variable(primary)),
   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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$base: 16px !default; // The Forge spacing system scales in multiples of 8
+
+$tokens: (
+  '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) {
+  @return map.get($tokens, $key);
+}
+

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

@@ -5,17 +5,17 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../utils';
 
 $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

@@ -5,12 +5,13 @@
  */
 @use 'sass:map';
 @use '../../../theme';
-@use '../../utils';
+@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

@@ -5,12 +5,12 @@
  */
 @use 'sass:map';
 @use '../../../theme';
-@use '../../utils';
+@use '../../../utils';
 
 $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);

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

@@ -4,130 +4,75 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../core/config';
-@use '../color-palette' as color-palette;
-@use '../../elevation';
+@use '../../utils';
+@use '../../theme/utils' as theme-utils;
+@use './tokens.core' as core;
+@use './tokens.surface' as surface;
+@use './tokens.text' as text;
+@use './tokens.status' as status;
+@use './tokens.utilities' as utilities;
 
-/// All semantic tokens for the Forge default (light) theme
-$tokens: (
-  // General theme colors
-  primary: color-palette.$indigo-500,
-  on-primary: #ffffff,
-  secondary: color-palette.$amber-500,
-  on-secondary: #000000,
-  tertiary: color-palette.$indigo-a400,
-  on-tertiary: #ffffff,
-  background: color-palette.$grey-50,
-  surface: #ffffff,
-  on-surface: #000000,
-
-  // Status colors
-  success: color-palette.$green-800,
-  on-success: #ffffff,
-  error: #b00020,
-  on-error: #ffffff,
-  warning: #d14900,
-  on-warning: #ffffff,
-
-  // Text colors
-  text-primary: rgba(0, 0, 0, 0.87),
-  text-secondary: rgba(0, 0, 0, 0.54),
-  text-disabled: rgba(0, 0, 0, 0.12),
-  text-hint: rgba(0, 0, 0, 0.38),
-  text-icon: rgba(0, 0, 0, 0.38),
-  text-primary-on-light: rgba(0, 0, 0, 0.87),
-  text-secondary-on-light: rgba(0, 0, 0, 0.54),
-  text-disabled-on-light: rgba(0, 0, 0, 0.38),
-  text-primary-on-dark: rgba(255, 255, 255, 0.87),
-  text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-
-  // Utility semantic colors
-  track-color: rgba(0, 0, 0, 0.12),
-  primary-track-color: #d0d4ef,
-  secondary-track-color: #fff0c3,
-  tertiary-track-color: #d0d7ff,
-  border-color: color-palette.$grey-300,
-  icon-color: color-palette.$grey-600,
-  form-field-label-on-background: rgba(0, 0, 0, 0.65),
-  form-field-icon-disabled-on-background: rgba(0, 0, 0, 0.26),
-  form-field-text-disabled-on-background: rgba(0, 0, 0, 0.6),
-  form-field-disabled-on-background: color-palette.$grey-100,
-  label-disabled-on-background: rgba(0, 0, 0, 0.38),
-  elevated-surface: #ffffff,
-  on-elevated-surface: rgba(0, 0, 0, 0.87),
-  popup-elevation: elevation.value(2),
-  scrollbar-thumb: color-palette.$grey-400,
-  scrollbar-thumb-hover: color-palette.$grey-500,
-  scrollbar-track: #f0f0f0,
-  scrollbar-track-hover: #ececec
-) !default;
-
-/// All tokens for the Forge dark theme
-$tokens-dark: (
-  // General theme colors
-  primary: color-palette.$indigo-a100,
-  on-primary: #000000,
-  secondary: color-palette.$amber-200,
-  on-secondary: #000000,
-  tertiary: var(--forge-theme-secondary, color-palette.$amber-200),
-  on-tertiary: #ffffff,
-  background: color-palette.$grey-900,
-  surface: #2c2c2c,
-  on-surface: #ffffff,
+// Forge default (light) theme
+$tokens: utils.flatten(
+  core.$tokens,
+  surface.$tokens,
+  text.$tokens,
+  status.$tokens,
+  utilities.$tokens,
+  (
+    // Temporary Forge-specific compatibility tokens (TODO: remove this when form field & popup are refactored)
+    border-color: utils.variable-ref(theme, outline),
+    elevated-surface: utils.variable-ref(theme, surface-bright),
+    on-elevated-surface: utils.variable-ref(theme, on-surface),
+    popup-elevation: utils.variable-ref(theme, surface-bright-shadow),
+    form-field-label-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 65%),
+    form-field-icon-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 26%),
+    form-field-text-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 60%),
+    form-field-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 4%),
+    label-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 38%)
+  )
+);
 
-  // Status colors
-  text-primary: rgba(255, 255, 255, 0.87),
-  text-secondary: rgba(255, 255, 255, 0.54),
-  text-disabled: rgba(255, 255, 255, 0.12),
-  text-hint: rgba(255, 255, 255, 0.38),
-  text-icon: rgba(255, 255, 255, 0.38),
-  text-disabled-on-background: rgba(255, 255, 255, 0.12),
-  text-disabled-on-light: rgba(255, 255, 255, 0.38),
-  text-secondary-on-light: rgba(255, 255, 255, 0.54),
-  text-primary-on-dark: #000000,
 
-  // Utility semantic colors
-  track-color: rgba(255, 255, 255, 0.12),
-  primary-track-color: #e3e8ff,
-  secondary-track-color: #7c704c,
-  tertiary-track-color: var(--forge-theme-secondary-track-color, #7c704c),
-  border-color: #464646,
-  form-field-icon-disabled-on-background: rgba(78, 45, 45, 0.26),
-  form-field-disabled-on-background: #353535,
-  form-field-text-disabled-on-background: rgba(255, 255, 255, 0.6),
-  form-field-label-on-background: rgba(255, 255, 255, 0.65),
-  label-disabled-on-background: rgba(255, 255, 255, 0.38),
-  scrollbar-thumb: color-palette.$grey-600,
-  scrollbar-thumb-hover: color-palette.$grey-500,
-  scrollbar-track: #3a3a3a,
-  scrollbar-track-hover: color-palette.$grey-800,
-  elevated-surface: #363636,
-  on-elevated-surface: rgba(255, 255, 255, 0.87),
-  popup-elevation: elevation.value(16)
-) !default;
+// Forge dark theme
+$tokens-dark: utils.flatten(
+  core.$tokens-dark,
+  surface.$tokens-dark,
+  text.$tokens-dark,
+  status.$tokens-dark,
+  utilities.$tokens-dark,
+  (
+    // Temporary Forge-specific compatibility tokens (TODO: remove this when form field is refactored)
+    form-field-label-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 65%),
+    form-field-icon-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 26%),
+    form-field-text-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 60%),
+    form-field-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 4%),
+    label-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 38%)
+  )
+);
 
 ///
-/// Temporary tokens to map the MDC theme to Forge theme
+/// Temporary tokens to map the MDC theme to the Forge theme.
 ///
 /// TODO: Remove this once MDC dependency is removed
 /// 
 $mdc-remap: (
-  primary: var(--forge-theme-primary, map.get($tokens, primary)),
-  on-primary: var(--forge-theme-on-primary, map.get($tokens, on-primary)),
-  secondary: var(--forge-theme-secondary, map.get($tokens, secondary)),
-  on-secondary: var(--forge-theme-on-secondary, map.get($tokens, on-secondary)),
-  background: var(--forge-theme-background, map.get($tokens, background)),
-  surface: var(--forge-theme-surface, map.get($tokens, surface)),
-  on-surface: var(--forge-theme-on-surface, map.get($tokens, on-surface)),
-  error: var(--forge-theme-error, map.get($tokens, error)),
-  on-error: var(--forge-theme-on-error, map.get($tokens, on-error)),
-  text-primary-on-background: var(--forge-theme-text-primary, map.get($tokens, text-primary)),
-  text-secondary-on-background: var(--forge-theme-text-secondary, map.get($tokens, text-secondary)),
-  text-disabled-on-background: var(--forge-theme-text-disabled, map.get($tokens, text-disabled)),
-  text-hint-on-background: var(--forge-theme-text-hint, map.get($tokens, text-hint)),
-  text-icon-on-background: var(--forge-theme-text-icon, map.get($tokens, text-icon)),
-  text-primary-on-light: var(--forge-theme-text-primary-on-light, map.get($tokens, text-primary-on-light)),
-  text-secondary-on-light: var(--forge-theme-text-secondary-on-light, map.get($tokens, text-secondary-on-light)),
-  text-disabled-on-light: var(--forge-theme-text-disabled-on-light, map.get($tokens, text-disabled-on-light)),
-  text-primary-on-dark: var(--forge-theme-text-primary-on-dark, map.get($tokens, text-primary-on-dark)),
+  primary: utils.variable-ref(theme, primary),
+  on-primary: utils.variable-ref(theme, on-primary),
+  secondary: utils.variable-ref(theme, secondary),
+  on-secondary: utils.variable-ref(theme, on-secondary),
+  background: utils.variable-ref(theme, surface-dim),
+  surface: utils.variable-ref(theme, surface),
+  on-surface: utils.variable-ref(theme, on-surface),
+  error: utils.variable-ref(theme, error),
+  on-error: utils.variable-ref(theme, on-error),
+  text-primary-on-background: utils.variable-ref(theme, text-high),
+  text-secondary-on-background: utils.variable-ref(theme, text-medium),
+  text-disabled-on-background: utils.variable-ref(theme, text-lowest),
+  text-hint-on-background: utils.variable-ref(theme, text-low),
+  text-icon-on-background: utils.variable-ref(theme, text-medium),
+  text-primary-on-light: utils.variable-ref(theme, text-high),
+  text-secondary-on-light: utils.variable-ref(theme, text-medium),
+  text-disabled-on-light: utils.variable-ref(theme, text-low),
+  text-primary-on-dark: utils.variable-ref(theme, text-high-inverse),
 );

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

@@ -0,0 +1,49 @@
+/**
+ * @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);
+
+  $success-theme: token-utils.get-color-theme('success', map.get($colors, success), $surface);
+  $error-theme: token-utils.get-color-theme('error', map.get($colors, error), $surface);
+  $warning-theme: token-utils.get-color-theme('warning', map.get($colors, warning), $surface);
+  $info-theme: token-utils.get-color-theme('info', map.get($colors, info), $surface);
+
+  @return utils.flatten(
+    $success-theme,
+    $error-theme,
+    $warning-theme,
+    $info-theme
+  );
+}
+
+// Light
+$tokens: get-status-theme((
+  success: color-palette.$green-800,
+  error: color-palette.$crimson-900,
+  warning: color-palette.$burnt-orange-800,
+  info: color-palette.$blue-800
+), surface.$tokens);
+
+// Dark
+$tokens-dark: get-status-theme((
+  success: color-palette.$dollar-bill-600,
+  error: color-palette.$ruddy-pink-200,
+  warning: color-palette.$apricot-200,
+  info: color-palette.$blue-800,
+), surface.$tokens-dark);