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

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/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
 );

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

@@ -4,46 +4,92 @@
  * 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((
+$tokens: (
   success: color-palette.$green-800,
+  success-container-minimum: #f7faf7,
+  success-container-low: #e6efe6,
+  success-container: #cde0ce,
+  success-container-high: #b0ceb1,
+  on-success: color-palette.$white,
+  on-success-container-minimum: #19441b,
+  on-success-container-low: #19441b,
+  on-success-container: #19441b,
+  on-success-container-high: color-palette.$black,
   error: color-palette.$crimson-900,
+  error-container-minimum: #fcf5f6,
+  error-container-low: #f6e0e4,
+  error-container: #ecc2c9,
+  error-container-high: #e19eaa,
+  on-error: color-palette.$white,
+  on-error-container-minimum: #5f0011,
+  on-error-container-low: #5f0011,
+  on-error-container: #5f0011,
+  on-error-container-high: color-palette.$black,
   warning: color-palette.$burnt-orange-800,
-  info: color-palette.$blue-800
-), surface.$tokens);
+  warning-container-minimum: #fdf8f5,
+  warning-container-low: #f9e9e0,
+  warning-container: #f4d3c2,
+  warning-container-high: #eeba9e,
+  on-warning: color-palette.$white,
+  on-warning-container-minimum: #712700,
+  on-warning-container-low: #712700,
+  on-warning-container: #712700,
+  on-warning-container-high: color-palette.$black,
+  info: color-palette.$blue-800,
+  info-container-minimum: #f6f9fc,
+  info-container-low: #e3edf7,
+  info-container: #c7daf0,
+  info-container-high: #a6c4e7,
+  on-info: color-palette.$white,
+  on-info-container-minimum: #0b3768,
+  on-info-container-low: #0b3768,
+  on-info-container: #0b3768,
+  on-info-container-high: color-palette.$black,
+);
 
 // Dark
-$tokens-dark: get-status-theme((
+$tokens-dark: (
   success: color-palette.$dollar-bill-600,
-  error: color-palette.$ruddy-pink-200,
+  success-container-minimum: #30312e,
+  success-container-low: #373c32,
+  success-container: #424c38,
+  success-container-high: #4e5f40,
+  on-success: color-palette.$black,
+  on-success-container-minimum: #bed5a9,
+  on-success-container-low: #bed5a9,
+  on-success-container: #bed5a9,
+  on-success-container-high: color-palette.$white,
+  error: color-palette.$ruddy-pink-500,
+  error-container-minimum: #342f30,
+  error-container-low: #433639,
+  error-container: #5a4145,
+  error-container-high: #754d54,
+  on-error: color-palette.$black,
+  on-error-container-minimum: #f5bcc6,
+  on-error-container-low: #f5bcc6,
+  on-error-container: #f5bcc6,
+  on-error-container-high: color-palette.$white,
   warning: color-palette.$apricot-200,
+  warning-container-minimum: #34312f,
+  warning-container-low: #443c36,
+  warning-container: #5d4c3f,
+  warning-container-high: #7a5f4a,
+  on-warning: color-palette.$black,
+  on-warning-container-minimum: #fbd5b8,
+  on-warning-container-low: #fbd5b8,
+  on-warning-container: #fbd5b8,
+  on-warning-container-high: color-palette.$white,
   info: color-palette.$blue-800,
-), surface.$tokens-dark);
+  info-container-minimum: #2b2e32,
+  info-container-low: #29333e,
+  info-container: #263a50,
+  info-container-high: #234264,
+  on-info: color-palette.$white,
+  on-info-container-minimum: #81acdd,
+  on-info-container-low: #81acdd,
+  on-info-container: #81acdd,
+  on-info-container-high: color-palette.$white,
+);

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

@@ -4,65 +4,47 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme/utils' as theme-utils;
-@use '../../theme/color-utils';
 @use '../../elevation';
-@use './color-emphasis';
 @use '../color-palette';
 
-///
-/// Computes the surface theme colors.
-/// 
-/// @param {Map} $theme - The surface theme map.
-/// @return {Map} - The computed surface theme map
-/// 
-@function get-surface-theme($theme) {
-  $surface: map.get($theme, surface);
-  $on-surface: theme-utils.contrast($surface);
-  $surface-tone: color-utils.tone($surface);
-  $surface-inverse: theme-utils.hexify($on-surface, $surface, color-emphasis.value(inverse));
-
-  $surface-container: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower));
-  $surface-container-minimum: theme-utils.hexify($on-surface, $surface, color-emphasis.value(minimum));
-  $surface-container-low: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lowest));
-  $surface-container-medium: theme-utils.hexify($on-surface, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
-  $surface-container-high: theme-utils.hexify($on-surface, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
-
-  @return (
-    surface: $surface,
-    surface-inverse: $surface-inverse,
-    surface-container: $surface-container,
-    surface-container-minimum: $surface-container-minimum,
-    surface-container-low: $surface-container-low,
-    surface-container-medium: $surface-container-medium,
-    surface-container-high: $surface-container-high,
-    surface-dim: map.get($theme, surface-dim),
-    surface-bright: map.get($theme, surface-bright),
-    surface-bright-shadow: map.get($theme, surface-bright-shadow),
-    on-surface: $on-surface,
-    on-surface-inverse: theme-utils.contrast($surface-inverse),
-    on-surface-container: theme-utils.contrast($surface-container),
-    on-surface-container-minimum: theme-utils.contrast($surface-container-minimum),
-    on-surface-container-low: theme-utils.contrast($surface-container-low),
-    on-surface-container-medium: theme-utils.contrast($surface-container-medium),
-    on-surface-container-high: theme-utils.contrast($surface-container-high)
-  );
-}
-
 // Light
-$tokens: get-surface-theme((
+$tokens: (
   surface: color-palette.$neutral-50,
+  surface-inverse: #333333,
+  surface-container: color-palette.$grey-300,
+  surface-container-minimum: color-palette.$grey-100,
+  surface-container-low: #ebebeb,
+  surface-container-medium: #c2c2c2,
+  surface-container-high: color-palette.$grey-500,
+  surface-dim: color-palette.$grey-50,
   surface-bright: color-palette.$neutral-50,
   surface-bright-shadow: elevation.value(2),
-  surface-dim: color-palette.$grey-50
-));
+  on-surface: color-palette.$black,
+  on-surface-inverse: color-palette.$white,
+  on-surface-container: color-palette.$black,
+  on-surface-container-minimum: color-palette.$black,
+  on-surface-container-low: color-palette.$black,
+  on-surface-container-medium: color-palette.$black,
+  on-surface-container-high: color-palette.$black
+);
 
 // Dark
-$surface-dark: color-palette.$neutral-900;
-$on-surface-dark: theme-utils.contrast($surface-dark);
-$tokens-dark: get-surface-theme((
+$tokens-dark: (
   surface: color-palette.$neutral-900,
-  surface-bright: theme-utils.hexify($on-surface-dark, $surface-dark, color-emphasis.value(minimum)),
+  surface-inverse: #d5d5d5,
+  surface-container: #454545,
+  surface-container-minimum: #343434,
+  surface-container-low: #3d3d3d,
+  surface-container-medium: #7c7c7c,
+  surface-container-high: color-palette.$grey-500,
+  surface-dim: color-palette.$grey-900,
+  surface-bright: #343434,
   surface-bright-shadow: elevation.value(16),
-  surface-dim: color-palette.$grey-900
-));
+  on-surface: color-palette.$white,
+  on-surface-inverse: color-palette.$black,
+  on-surface-container: color-palette.$white,
+  on-surface-container-minimum: color-palette.$white,
+  on-surface-container-low: color-palette.$white,
+  on-surface-container-medium: color-palette.$white,
+  on-surface-container-high: color-palette.$black
+);

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

@@ -4,35 +4,29 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme/utils' as theme-utils;
 @use './color-emphasis';
 @use './tokens.surface' as surface;
 
-///
-/// Computes the text theme colors.
-/// 
-/// @param {Color} $surface-theme - The base surface theme
-/// @return {Map} - The computed text theme
-/// 
-@function get-text-theme($surface-theme) {
-  $surface: map.get($surface-theme, surface);
-  $text: theme-utils.contrast($surface);
-  $text-inverse: theme-utils.contrast($text);
-
-  @return (
-    text-high: theme-utils.emphasized($text, color-emphasis.value(highest)),
-    text-high-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(highest)),
-    text-medium: theme-utils.emphasized($text, color-emphasis.value(medium-high)),
-    text-medium-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium-high)),
-    text-low: theme-utils.emphasized($text, color-emphasis.value(medium-low)),
-    text-low-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium-low)),
-    text-lowest: theme-utils.emphasized($text, color-emphasis.value(lower)),
-    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lower)),
-  );
-}
-
 // Light
-$tokens: get-text-theme(surface.$tokens);
+$tokens: (
+  text-high: rgba(#000, color-emphasis.value(highest)),
+  text-high-inverse: rgba(#fff, color-emphasis.value(highest)),
+  text-medium: rgba(#000, color-emphasis.value(medium-high)),
+  text-medium-inverse: rgba(#fff, color-emphasis.value(medium-high)),
+  text-low: rgba(#000, color-emphasis.value(medium-low)),
+  text-low-inverse: rgba(#fff, color-emphasis.value(medium-low)),
+  text-lowest: rgba(#000, color-emphasis.value(lower)),
+  text-lowest-inverse: rgba(#fff, color-emphasis.value(lower)),
+);
 
 // Dark
-$tokens-dark: get-text-theme(surface.$tokens-dark);
+$tokens-dark: (
+  text-high: rgba(#fff, color-emphasis.value(highest)),
+  text-high-inverse: rgba(#000, color-emphasis.value(highest)),
+  text-medium: rgba(#fff, color-emphasis.value(medium-high)),
+  text-medium-inverse: rgba(#000, color-emphasis.value(medium-high)),
+  text-low: rgba(#fff, color-emphasis.value(medium-low)),
+  text-low-inverse: rgba(#000, color-emphasis.value(medium-low)),
+  text-lowest: rgba(#fff, color-emphasis.value(lower)),
+  text-lowest-inverse: rgba(#000, color-emphasis.value(lower)),
+);

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

@@ -4,30 +4,20 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme/utils' as theme-utils;
-@use './color-emphasis';
-@use './tokens.surface' as surface;
-
-///
-/// Computes the utilities theme colors.
-/// 
-/// @param {Color} $surface-theme - The base surface theme
-/// @return {Map} - The computed utilities theme 
-///
-@function get-utilities-theme($surface-theme) {
-  $surface: map.get($surface-theme, surface);
-  $on-surface: map.get($surface-theme, on-surface);
-
-  @return (
-    outline-high: theme-utils.hexify($on-surface, $surface, color-emphasis.value(highest)),
-    outline-medium: theme-utils.hexify($on-surface, $surface, color-emphasis.value(medium)),
-    outline-low: theme-utils.hexify($on-surface, $surface, color-emphasis.value(medium-low)),
-    outline: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower))
-  );
-}
+@use '../color-palette';
 
 // Light
-$tokens: get-utilities-theme(surface.$tokens);
+$tokens: (
+  outline-high: color-palette.$grey-900,
+  outline-medium: color-palette.$grey-600,
+  outline-low: color-palette.$grey-500,
+  outline: color-palette.$grey-300
+);
 
 // Dark
-$tokens-dark: get-utilities-theme(surface.$tokens-dark);
+$tokens-dark: (
+  outline-high: #e4e4e4,
+  outline-medium: color-palette.$grey-500,
+  outline-low: color-palette.$grey-600,
+  outline: color-palette.$grey-800
+);

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

@@ -20,7 +20,7 @@ $tokens: (
   padding-inline: utils.module-ref(tooltip, padding-inline, padding),
   width: utils.module-val(tooltip, width, max-content),
   max-width: utils.module-val(tooltip, max-width, 320px),
-  elevation: utils.module-val(tooltip, elevation, theme.variable(popup-elevation)),
+  elevation: utils.module-val(tooltip, elevation, theme.variable(surface-bright-shadow)),
   content-align: utils.module-val(tooltip, content-align, center),
 
   // Border