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

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

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

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  size: utils.module-val(circular-progress, size, 48px),
+  padding: utils.module-val(circular-progress, padding, 0),
+  track-width: utils.module-val(circular-progress, track-width, 12),
+  track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary)),
+  track-background: utils.module-val(circular-progress, track-background, theme.variable(track-color)),
+  arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/// Layering values to define z-index ranges for common groups of UI elements
+/// to ensure floating elements overlay correctly.
+$z-index-map: (
+  surface: 1,
+  header: 4,
+  backdrop: 7,
+  dialog: 8,
+  notification: 9,
+  popup: 10,
+  tooltip: 11
+) !default;
+
+$baseline-color: black !default;
+$umbra-opacity: 0.2 !default;
+$penumbra-opacity: 0.14 !default;
+$ambient-opacity: 0.12 !default;
+
+$umbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 2px 1px -1px',
+  2: '0px 3px 1px -2px',
+  3: '0px 3px 3px -2px',
+  4: '0px 2px 4px -1px',
+  5: '0px 3px 5px -1px',
+  6: '0px 3px 5px -1px',
+  7: '0px 4px 5px -2px',
+  8: '0px 5px 5px -3px',
+  9: '0px 5px 6px -3px',
+  10: '0px 6px 6px -3px',
+  11: '0px 6px 7px -4px',
+  12: '0px 7px 8px -4px',
+  13: '0px 7px 8px -4px',
+  14: '0px 7px 9px -4px',
+  15: '0px 8px 9px -5px',
+  16: '0px 8px 10px -5px',
+  17: '0px 8px 11px -5px',
+  18: '0px 9px 11px -5px',
+  19: '0px 9px 12px -6px',
+  20: '0px 10px 13px -6px',
+  21: '0px 10px 13px -6px',
+  22: '0px 10px 14px -6px',
+  23: '0px 11px 14px -7px',
+  24: '0px 11px 15px -7px',
+) !default;
+
+$penumbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 1px 0px',
+  2: '0px 2px 2px 0px',
+  3: '0px 3px 4px 0px',
+  4: '0px 4px 5px 0px',
+  5: '0px 5px 8px 0px',
+  6: '0px 6px 10px 0px',
+  7: '0px 7px 10px 1px',
+  8: '0px 8px 10px 1px',
+  9: '0px 9px 12px 1px',
+  10: '0px 10px 14px 1px',
+  11: '0px 11px 15px 1px',
+  12: '0px 12px 17px 2px',
+  13: '0px 13px 19px 2px',
+  14: '0px 14px 21px 2px',
+  15: '0px 15px 22px 2px',
+  16: '0px 16px 24px 2px',
+  17: '0px 17px 26px 2px',
+  18: '0px 18px 28px 2px',
+  19: '0px 19px 29px 2px',
+  20: '0px 20px 31px 3px',
+  21: '0px 21px 33px 3px',
+  22: '0px 22px 35px 3px',
+  23: '0px 23px 36px 3px',
+  24: '0px 24px 38px 3px',
+) !default;
+
+$ambient-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 3px 0px',
+  2: '0px 1px 5px 0px',
+  3: '0px 1px 8px 0px',
+  4: '0px 1px 10px 0px',
+  5: '0px 1px 14px 0px',
+  6: '0px 1px 18px 0px',
+  7: '0px 2px 16px 1px',
+  8: '0px 3px 14px 2px',
+  9: '0px 3px 16px 2px',
+  10: '0px 4px 18px 3px',
+  11: '0px 4px 20px 3px',
+  12: '0px 5px 22px 4px',
+  13: '0px 5px 24px 4px',
+  14: '0px 5px 26px 4px',
+  15: '0px 6px 28px 5px',
+  16: '0px 6px 30px 5px',
+  17: '0px 6px 32px 5px',
+  18: '0px 7px 34px 6px',
+  19: '0px 7px 36px 6px',
+  20: '0px 8px 38px 7px',
+  21: '0px 8px 40px 7px',
+  22: '0px 8px 42px 7px',
+  23: '0px 9px 44px 8px',
+  24: '0px 9px 46px 8px',
+) !default;

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

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../../border';
+@use '../../animation';
+@use '../../spacing';
+@use '../../utils';
+
+/* stylelint-disable length-zero-no-unit */
+$tokens: (
+  active-width: utils.module-val(focus-indicator, active-width, 6px),
+  color: utils.module-val(focus-indicator, color, theme.variable(primary)),
+  duration: utils.module-val(focus-indicator, duration, 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),
+  offset-block: utils.module-val(focus-indicator, offset-block, 0),
+  offset-inline: utils.module-val(focus-indicator, offset-inline, 0)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+
+@forward './theme/tokens';
+// @forward './typography/tokens';

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../utils';
+
+$tokens: (
+  track-height: utils.module-val(linear-progress, track-height, 4px),
+  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-track-color)),
+  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),
+  determinate-duration: utils.module-val(linear-progress, determinate-duration, animation.variable(duration-medium1)),
+  indeterminate-duration: utils.module-val(linear-progress, indeterminate-duration, 2s),
+  determinate-easing: utils.module-val(linear-progress, determinate-easing, cubic-bezier(0.4, 0, 0.6, 1)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

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

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

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../color-palette';
+@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, 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),
+  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-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)),
+  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-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-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-inactive-container-color: utils.module-val(slider, with-tick-marks-inactive-container-color, theme.variable(primary))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$base: 8px !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
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}
+

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@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,
+  pressed-color: utils.module-ref(state-layer, pressed-color, color),
+  pressed-opacity: 0.12,
+  hover-duration: 15ms,
+  pressed-duration: 105ms,
+  animation-duration: 375ms
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../theme';
+@use '../../../utils';
+
+$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)),
+  height: utils.module-val(tab, height, 48px),
+  stacked-height: utils.module-val(tab, stacked-height, 64px),
+
+  // Disabled
+  disabled-opacity: utils.module-val(tab, disabled-opacity, 0.38),
+
+  // Indicator
+  indicator-color: utils.module-ref(tab, indicator-color, active-color),
+  indicator-height: utils.module-val(tab, indicator-height, 3px),
+  indicator-shape: utils.module-val(tab, indicator-shape, 3px 3px 0 0),
+
+  // Indicator (vertical)
+  vertical-indicator-shape: utils.module-val(tab, indicator-shape, 3px 0 0 3px),
+
+  // Indicator (secondary)
+  secondary-indicator-height: utils.module-val(tab, indicator-height, 2px),
+  secondary-indicator-shape: utils.module-val(tab, indicator-shape, 0),
+
+  // Indicator (inverted)
+  inverted-indicator-shape: utils.module-val(tab, indicator-shape, 0 0 3px 3px),
+  vertical-inverted-indicator-shape: utils.module-val(tab, indicator-shape, 0 3px 3px 0),
+
+  // Container
+  container-color: utils.module-val(tab, container-color, transparent),
+  container-height: utils.module-ref(tab, container-height, height),
+  container-shape: utils.module-val(tab, container-shape, 0),
+  
+  // Content
+  content-height: utils.module-ref(tab, content-height, height),
+
+  // Icon
+  active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),
+  active-hover-icon-color: utils.module-ref(tab, active-hover-icon-color, active-color),
+  active-icon-color: utils.module-ref(tab, active-icon-color, active-color),
+  active-pressed-icon-color: utils.module-ref(tab, active-pressed-icon-color, active-color),
+  icon-size: utils.module-val(tab, icon-size, 24px),
+  focus-icon-color: utils.module-ref(tab, focus-icon-color, inactive-color),
+  hover-icon-color: utils.module-ref(tab, hover-icon-color, inactive-color),
+  icon-color: utils.module-ref(tab, icon-color, inactive-color),
+  pressed-icon-color: utils.module-ref(tab, pressed-icon-color, inactive-color),
+
+  // Label
+  active-focus-label-text-color: utils.module-ref(tab, active-focus-label-text-color, active-color),
+  active-hover-label-text-color: utils.module-ref(tab, active-hover-label-text-color, active-color),
+  active-label-text-color: utils.module-ref(tab, active-label-text-color, active-color),
+  active-pressed-label-text-color: utils.module-ref(tab, active-pressed-label-text-color, active-color),
+  focus-label-text-color: utils.module-ref(tab, focus-label-text-color, inactive-color),
+  hover-label-text-color: utils.module-ref(tab, hover-label-text-color, inactive-color),
+  label-text-color: utils.module-ref(tab, label-text-color, inactive-color),
+  pressed-label-text-color: utils.module-ref(tab, pressed-label-text-color, inactive-color)
+) !default;
+
+///
+/// Gets a token from the token map.
+/// 
+@function get($name) {
+  @return map.get($tokens, $name);
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../theme';
+@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-thickness: utils.module-val(tab-bar, divider-thickness, 1px)
+);
+
+@function get($name) {
+  @return map.get($tokens, $name);
+}

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

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../core/config';
+@use '../color-palette' as color-palette;
+@use '../../elevation';
+
+/// 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,
+
+  // 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;
+
+///
+/// Temporary tokens to map the MDC theme to 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)),
+);