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

package/styles/core/styles/elevation/index.scss

@@ -6,49 +6,42 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:string';
 @use '../utils';
 @use '../core/config';
 @use '../tokens/elevation/tokens';
 
 ///
-/// Generates a `box-shadow` style value for the provided elevation z-value.
+/// Emits custom property declarations for all default theme tokens.
 /// 
-@function _calc-box-shadow($z-value, $color, $opacity-boost) {
-  @if meta.type-of($z-value) != number or not math.is-unitless($z-value) {
-    @error "$z-value must be a unitless number, but received '#{$z-value}'";
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(elevation, $token-name, $token-value);
   }
+}
 
-  @if $z-value < 0 or $z-value > 24 {
-    @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
+///
+/// Emits custom property declarations for all z-index theme tokens.
+/// 
+@mixin z-index-properties {
+  @each $token-name, $token-value in tokens.$z-index-tokens {
+    @include utils.declare-var(z-index, $token-name, $token-value);
   }
-
-  $umbra-z-value: map.get(tokens.$umbra-map, $z-value);
-  $penumbra-z-value: map.get(tokens.$penumbra-map, $z-value);
-  $ambient-z-value: map.get(tokens.$ambient-map, $z-value);
-
-  $umbra-color: rgba($color, tokens.$umbra-opacity + $opacity-boost);
-  $penumbra-color: rgba($color, tokens.$penumbra-opacity + $opacity-boost);
-  $ambient-color: rgba($color, tokens.$ambient-opacity + $opacity-boost);
-
-  @return (
-    #{'#{$umbra-z-value} #{$umbra-color}'},
-    #{'#{$penumbra-z-value} #{$penumbra-color}'},
-    #{$ambient-z-value} $ambient-color
-  );
 }
 
+
 ///
 /// Returns a an elevation value specified by the provided elevation z-value.
 /// 
-@function value($z-value, $color: tokens.$baseline-color, $opacity-boost: 0) {
-  @return _calc-box-shadow($z-value, $color, $opacity-boost);
+@function value($level) {
+  @return string.unquote(tokens.get($level));
 }
 
 ///
 /// Sets a `box-shadow` style specified by the provided elevation z-value.
 /// 
-@mixin box-shadow($z-value, $color: tokens.$baseline-color, $opacity-boost: 0) {
-  box-shadow: #{_calc-box-shadow($z-value, $color, $opacity-boost)};
+@mixin box-shadow($level) {
+  box-shadow: #{value($level)};
 }
 
 ///
@@ -57,7 +50,7 @@
 /// All z-index values are set as CSS custom properties, so they can be overridden globally.
 /// 
 @mixin z-index($level) {
-  $value: map.get(tokens.$z-index-map, $level);
+  $value: map.get(tokens.$z-index-tokens, $level);
   z-index: var(--#{config.$prefix}-z-index-#{$level}, #{$value});
 }
 
@@ -67,5 +60,5 @@
 /// @param {Number} $level - The z-index level to return.
 ///
 @function z-index-variable($level) {
-  @return utils.variable(z-index, tokens.$z-index-map, $level);
+  @return utils.variable(z-index, tokens.$z-index-tokens, $level);
 }

package/styles/core/styles/shape/index.scss

@@ -8,6 +8,15 @@
 @use '../tokens/shape/tokens';
 @use '../utils';
 
+///
+/// Emits custom property declarations for all shape theme tokens.
+/// 
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(shape, $token-name, $token-value);
+  }
+}
+
 ///
 /// Creates a `border-radius` style using the provided radius token.
 /// 

package/styles/core/styles/spacing/index.scss

@@ -8,6 +8,15 @@
 @use '../tokens/spacing/tokens';
 @use '../utils';
 
+///
+/// Emits custom property declarations for all spacing theme tokens.
+/// 
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(spacing, $token-name, $token-value);
+  }
+}
+
 ///
 /// Gets a spacing token value.
 /// 

package/styles/core/styles/theme/index.scss

@@ -17,7 +17,7 @@
 /// 
 @mixin properties {
   @each $token-name, $token-value in tokens.$tokens {
-    --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
+    @include utils.declare-var(theme, $token-name, $token-value);
   }
 }
 
@@ -26,18 +26,7 @@
 /// 
 @mixin properties-dark {
   @each $token-name, $token-value in tokens.$tokens-dark {
-    --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
-  }
-}
-
-///
-/// Temporary tokens to map the MDC theme to Forge theme
-/// 
-/// TODO: Remove this once MDC dependency is removed
-/// 
-@mixin properties-compat {
-  @each $token-name, $token-value in tokens.$mdc-remap {
-    --mdc-theme-#{$token-name}: #{$token-value};
+    @include utils.declare-var(theme, $token-name, $token-value);
   }
 }
 

package/styles/core/styles/tokens/bottom-sheet/_tokens.scss

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../animation';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  desktop-max-width: utils.module-val(bottom-sheet, desktop-max-width, 50%),
+  desktop-max-height: utils.module-val(bottom-sheet, desktop-max-height, 50%),
+  
+  // Animation
+  animation-duration: utils.module-val(bottom-sheet, animation-duration, animation.variable(duration-medium1)),
+  animation-timing: utils.module-val(bottom-sheet, animation-timing, animation.variable(easing-standard)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -41,7 +41,7 @@ $tokens: (
 
   // Label
   gap: utils.module-val(checkbox, gap, 0),
-  justify: utils.module-val(checkbox, justify, space-between),
+  justify: utils.module-val(checkbox, justify, start),
   direction: utils.module-val(checkbox, direction, initial),
 
   // State layer

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

@@ -3,9 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:map';
+
 /// Layering values to define z-index ranges for common groups of UI elements
 /// to ensure floating elements overlay correctly.
-$z-index-map: (
+$z-index-tokens: (
   surface: 1,
   header: 4,
   backdrop: 7,
@@ -16,90 +18,39 @@ $z-index-map: (
 ) !default;
 
 $baseline-color: black !default;
-$umbra-opacity: 0.2 !default;
-$penumbra-opacity: 0.14 !default;
-$ambient-opacity: 0.12 !default;
+$umbra-color: rgba($baseline-color, 0.2) !default;
+$penumbra-color: rgba($baseline-color, 0.14) !default;
+$ambient-color: rgba($baseline-color, 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',
+$tokens: (
+  0: '0px 0px 0px 0px #{$umbra-color}, 0px 0px 0px 0px #{$penumbra-color}, 0px 0px 0px 0px #{$ambient-color}',
+  1: '0px 2px 1px -1px #{$umbra-color}, 0px 1px 1px 0px #{$penumbra-color}, 0px 1px 3px 0px #{$ambient-color}',
+  2: '0px 3px 1px -2px #{$umbra-color}, 0px 2px 2px 0px #{$penumbra-color}, 0px 1px 5px 0px #{$ambient-color}',
+  3: '0px 3px 3px -2px #{$umbra-color}, 0px 3px 4px 0px #{$penumbra-color}, 0px 1px 8px 0px #{$ambient-color}',
+  4: '0px 2px 4px -1px #{$umbra-color}, 0px 4px 5px 0px #{$penumbra-color}, 0px 1px 10px 0px #{$ambient-color}',
+  5: '0px 3px 5px -1px #{$umbra-color}, 0px 5px 8px 0px #{$penumbra-color}, 0px 1px 14px 0px #{$ambient-color}',
+  6: '0px 3px 5px -1px #{$umbra-color}, 0px 6px 10px 0px #{$penumbra-color}, 0px 1px 18px 0px #{$ambient-color}',
+  7: '0px 4px 5px -2px #{$umbra-color}, 0px 7px 10px 1px #{$penumbra-color}, 0px 2px 16px 1px #{$ambient-color}',
+  8: '0px 5px 5px -3px #{$umbra-color}, 0px 8px 10px 1px #{$penumbra-color}, 0px 3px 14px 2px #{$ambient-color}',
+  9: '0px 5px 6px -3px #{$umbra-color}, 0px 9px 12px 1px #{$penumbra-color}, 0px 3px 16px 2px #{$ambient-color}',
+  10: '0px 6px 6px -3px #{$umbra-color}, 0px 10px 14px 1px #{$penumbra-color}, 0px 4px 18px 3px #{$ambient-color}',
+  11: '0px 6px 7px -4px #{$umbra-color}, 0px 11px 15px 1px #{$penumbra-color}, 0px 4px 20px 3px #{$ambient-color}',
+  12: '0px 7px 8px -4px #{$umbra-color}, 0px 12px 17px 2px #{$penumbra-color}, 0px 5px 22px 4px #{$ambient-color}',
+  13: '0px 7px 8px -4px #{$umbra-color}, 0px 13px 19px 2px #{$penumbra-color}, 0px 5px 24px 4px #{$ambient-color}',
+  14: '0px 7px 9px -4px #{$umbra-color}, 0px 14px 21px 2px #{$penumbra-color}, 0px 5px 26px 4px #{$ambient-color}',
+  15: '0px 8px 9px -5px #{$umbra-color}, 0px 15px 22px 2px #{$penumbra-color}, 0px 6px 28px 5px #{$ambient-color}',
+  16: '0px 8px 10px -5px #{$umbra-color}, 0px 16px 24px 2px #{$penumbra-color}, 0px 6px 30px 5px #{$ambient-color}',
+  17: '0px 8px 11px -5px #{$umbra-color}, 0px 17px 26px 2px #{$penumbra-color}, 0px 6px 32px 5px #{$ambient-color}',
+  18: '0px 9px 11px -5px #{$umbra-color}, 0px 18px 28px 2px #{$penumbra-color}, 0px 7px 34px 6px #{$ambient-color}',
+  19: '0px 9px 12px -6px #{$umbra-color}, 0px 19px 29px 2px #{$penumbra-color}, 0px 7px 36px 6px #{$ambient-color}',
+  20: '0px 10px 13px -6px #{$umbra-color}, 0px 20px 31px 3px #{$penumbra-color}, 0px 8px 38px 7px #{$ambient-color}',
+  21: '0px 10px 13px -6px #{$umbra-color}, 0px 21px 33px 3px #{$penumbra-color}, 0px 8px 40px 7px #{$ambient-color}',
+  22: '0px 10px 14px -6px #{$umbra-color}, 0px 22px 35px 3px #{$penumbra-color}, 0px 8px 42px 7px #{$ambient-color}',
+  23: '0px 11px 14px -7px #{$umbra-color}, 0px 23px 36px 3px #{$penumbra-color}, 0px 9px 44px 8px #{$ambient-color}',
+  24: '0px 11px 15px -7px #{$umbra-color}, 0px 24px 38px 3px #{$penumbra-color}, 0px 9px 46px 8px #{$ambient-color}',
 ) !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;
+@function get($key) {
+  @return map.get($tokens, $key);
+}
 
-$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/list/list/_tokens.scss

@@ -4,10 +4,23 @@
  * License: Apache-2.0
  */
 @use '../../../utils';
+@use '../../../spacing';
+@use '../../../shape';
+@use '../../../typography';
 
 $tokens: (
+  // Base
   spacing: utils.module-val(list, spacing, 0),
-  container-color: utils.module-val(list, container-color, transparent)
+  container-color: utils.module-val(list, container-color, transparent),
+
+  // Navlist
+  navlist-spacing: utils.module-val(list, navlist-spacing, spacing.variable(xxsmall)),
+  navlist-margin: utils.module-val(list, navlist-margin, spacing.variable(xxsmall) spacing.variable(xsmall)),
+  navlist-height: utils.module-val(list, navlist-height, 40px),
+  navlist-padding: utils.module-val(list, navlist-padding, 0 spacing.variable(xsmall)),
+  navlist-shape: utils.module-val(list, navlist-shape, shape.variable(medium)),
+  navlist-font-size: utils.module-val(list, navlist-font-size, typography.font-size-relative('0875')),
+  navlist-font-weight: utils.module-val(list, navlist-font-weight, 500),
 ) !default;
 
 @function get($key) {

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

@@ -12,7 +12,7 @@
 
 $tokens: (
   // Base
-  background-color: utils.module-val(list-item, background-color, transparent),
+  background: utils.module-val(list-item, background, transparent),
   shape: utils.module-val(list-item, shape, 0),
   padding: utils.module-val(list-item, padding, 0 spacing.variable(medium)),
   margin: utils.module-val(list-item, margin, 0),
@@ -23,17 +23,17 @@ $tokens: (
   gap: utils.module-val(list-item, gap, spacing.variable(xlarge)),
 
   // 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')),
+  text-color: utils.module-val(list-item, text-color, theme.variable(text-medium)),
+  text-font-size: utils.module-val(list-item, text-font-size, typography.variable(body2, font-size)),
+  text-font-weight: utils.module-val(list-item, text-font-weight, typography.variable(body2, font-weight)),
+  text-line-height: utils.module-val(list-item, 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, theme.emphasis(lowest)),
   selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color),
   selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color),
-  selected-supporting-text-color: utils.module-val(list-item, selected-supporting-text-color, theme.variable(text-medium)),
+  selected-text-color: utils.module-val(list-item, selected-text-color, theme.variable(text-medium)),
 
   // Disabled
   disabled-opacity: utils.module-val(list-item, disabled-opacity, theme.emphasis(medium-low)),

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../animation';
+@use '../../theme';
+
+$tokens: (
+  color: utils.module-val(open-icon, color, theme.variable(text-high)),
+  size: utils.module-val(open-icon, size, 24px),
+  height: utils.module-ref(open-icon, height, size),
+  width: utils.module-ref(open-icon, width, size),
+  initial-rotation: utils.module-val(open-icon, initial-rotation, 0),
+  open-rotation: utils.module-val(open-icon, open-rotation, 180deg),
+  animation-duration: utils.module-val(open-icon, animation-duration, animation.variable(duration-medium4)),
+  half-animation-duration: utils.module-val(open-icon, half-animation-duration, animation.variable(duration-short4)),
+  animation-timing: utils.module-val(open-icon, animation-timing, animation.variable(easing-standard)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -22,7 +22,7 @@ $tokens: (
   max-height: utils.module-val(popover, max-height, none),
   background: utils.module-val(popover, background, theme.variable(surface-bright)),
   border-radius: utils.module-val(popover, border-radius, shape.variable(medium)),
-  box-shadow: utils.module-val(popover, box-shadow, theme.variable(popup-elevation)),
+  box-shadow: utils.module-val(popover, box-shadow, theme.variable(surface-bright-shadow)),
   border-width: utils.module-val(popover, border-width, 0),
   border-style: utils.module-val(popover, border-style, solid),
   border-color: utils.module-val(popover, border-color, theme.variable(outline)),

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

@@ -38,7 +38,7 @@ $tokens: (
 
   // Label
   gap: utils.module-val(radio, gap, 0),
-  justify: utils.module-val(radio, justify, space-between),
+  justify: utils.module-val(radio, justify, start),
   direction: utils.module-val(radio, direction, initial),
 
   // State layer

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

@@ -58,7 +58,7 @@ $tokens: (
 
   // Label
   gap: utils.module-val(switch, gap, 0),
-  justify: utils.module-val(switch, justify, space-between),
+  justify: utils.module-val(switch, justify, start),
   direction: utils.module-val(switch, direction, initial),
 
   // State layer

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

@@ -4,42 +4,72 @@
  * 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((
+$tokens: (
   primary: color-palette.$indigo-500,
+  primary-container-minimum: #f7f8fc,
+  primary-container-low: color-palette.$indigo-50,
+  primary-container: #d1d5ed,
+  primary-container-high: #b6bde3,
+  on-primary: color-palette.$white,
+  on-primary-container-minimum: #222c62,
+  on-primary-container-low: #222c62,
+  on-primary-container: #222c62,
+  on-primary-container-high: color-palette.$black,
   secondary: color-palette.$amber-500,
-  tertiary: color-palette.$indigo-a400
-), surface.$tokens);
+  secondary-container-minimum: #fffdf5,
+  secondary-container-low: color-palette.$amber-50,
+  secondary-container: #fff0c3,
+  secondary-container-high: #ffe7a1,
+  on-secondary: color-palette.$black,
+  on-secondary-container-minimum: #8a6804,
+  on-secondary-container-low: #8a6804,
+  on-secondary-container: #8a6804,
+  on-secondary-container-high: color-palette.$black,
+  tertiary: color-palette.$indigo-a400,
+  tertiary-container-minimum: #f7f8ff,
+  tertiary-container-low: #e8ebff,
+  tertiary-container: #d0d7ff,
+  tertiary-container-high: #b5c0ff,
+  on-tertiary: color-palette.$white,
+  on-tertiary-container-minimum: #213189,
+  on-tertiary-container-low: #213189,
+  on-tertiary-container: #213189,
+  on-tertiary-container-high: color-palette.$black,
+);
 
 // Dark
-$tokens-dark: get-status-theme((
+$tokens-dark: (
   primary: color-palette.$indigo-a100,
+  primary-container-minimum: #303134,
+  primary-container-low: #383a45,
+  primary-container: #43475f,
+  primary-container-high: #50577c,
+  on-primary: color-palette.$black,
+  on-primary-container-minimum: #c1cbff,
+  on-primary-container-low: #c1cbff,
+  on-primary-container: #c1cbff,
+  on-primary-container-high: color-palette.$white,
   secondary: color-palette.$amber-200,
-  tertiary: color-palette.$amber-200
-), surface.$tokens-dark);
+  secondary-container-minimum: #34332f,
+  secondary-container-low: #454236,
+  secondary-container: #5f5741,
+  secondary-container-high: #7c704d,
+  on-secondary: color-palette.$black,
+  on-secondary-container-minimum: #ffeebc,
+  on-secondary-container-low: #ffeebc,
+  on-secondary-container: #ffeebc,
+  on-secondary-container-high: color-palette.$white,
+  tertiary: color-palette.$amber-200,
+  tertiary-container-minimum: #34332f,
+  tertiary-container-low: #454236,
+  tertiary-container: #5f5741,
+  tertiary-container-high: #7c704d,
+  on-tertiary: color-palette.$black,
+  on-tertiary-container-minimum: #ffeebc,
+  on-tertiary-container-low: #ffeebc,
+  on-tertiary-container: #ffeebc,
+  on-tertiary-container-high: color-palette.$white,
+);

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

@@ -5,7 +5,6 @@
  */
 @use 'sass:map';
 @use '../../utils';
-@use '../../theme/utils' as theme-utils;
 @use './tokens.brand' as brand;
 @use './tokens.core' as core;
 @use './tokens.surface' as surface;
@@ -21,18 +20,6 @@ $tokens: utils.flatten(
   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%)
-  )
 );
 
 
@@ -43,39 +30,5 @@ $tokens-dark: utils.flatten(
   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 the Forge theme.
-///
-/// TODO: Remove this once MDC dependency is removed
-/// 
-$mdc-remap: (
-  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),
+  utilities.$tokens-dark
 );