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

package/styles/calendar/calendar-menu/_mixins.scss

@@ -3,13 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '../../theme';
-@use '../../theme/theme-values';
+@use '../../core/styles/typography';
+@use '../../core/styles/theme';
+@use '../../core/styles/scrollbar';
 @use './variables';
+@use '../../focus-indicator';
 
 @mixin core-styles() {
   .forge-calendar-menu {
@@ -64,7 +62,7 @@
         }
       }
 
-      &--focused, &:focus, .mdc-ripple-upgraded--background-focused {
+      &--focused, &:focus {
         @include item-focused;
       }
     }
@@ -135,8 +133,7 @@
 }
 
 @mixin base() {
-  @include theme.property(background-color, surface);
-
+  background-color: #{theme.variable(surface)};
   position: relative;
   height: 100%;
   width: 100%;
@@ -144,7 +141,7 @@
 }
 
 @mixin popup-context-base() {
-  @include theme.property(background-color, elevated-surface);
+  background-color: #{theme.variable(surface-bright)};
 }
 
 @mixin view() {
@@ -157,8 +154,7 @@
 }
 
 @mixin grid() {
-  @include theme.css-custom-property(max-height, --forge-calendar-menu-max-height, variables.$max-height);
-
+  max-height: var(--forge-calendar-menu-max-height, variables.$max-height);
   display: grid;
   gap: 16px;
   justify-items: center;
@@ -176,7 +172,7 @@
 }
 
 @mixin grid-item() {
-  @include mdc-typography.typography(body2);
+  @include typography.style(body1);
 
   display: flex;
   justify-content: center;
@@ -191,28 +187,22 @@
 }
 
 @mixin grid-item-enabled {
-  @include mdc-ripple.surface($include-will-change: false);
-  @include mdc-ripple.radius-bounded();
-  @include mdc-ripple-theme.states($color: primary);
-
-  border: theme-values.$border;
+  border: 1px solid #{theme.variable(outline)};
   cursor: pointer;
 }
 
 @mixin grid-item-disabled() {
-  @include theme.property(color, text-disabled-on-background);
+  color: #{theme.variable(text-low)};
 }
 
 @mixin grid-item-selected() {
-  @include theme.property(color, on-primary);
-  @include theme.property(background-color, primary);
+  background-color: #{theme.variable(primary)};
+  color: #{theme.variable(on-primary)};
 
-  &:hover {
-    opacity: 0.87;
-  }
-
-  &:focus, &.mdc-ripple-upgraded--background-focused {
-    opacity: 0.54;
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: #{theme.variable(primary-container)}
+    ));
   }
 }
 
@@ -222,7 +212,7 @@
 }
 
 @mixin list-wrapper() {
-  @include theme.scrollbar;
+  @include scrollbar.base;
 
   position: relative;
   height: 100%;
@@ -230,8 +220,6 @@
 }
 
 @mixin list-item() {
-  @include _deprecated-interactable;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -242,18 +230,17 @@
   overflow: hidden;
   text-align: center;
   cursor: pointer;
+  position: relative;
 }
 
 @mixin list-item-selected() {
-  @include theme.property(background-color, primary);
-  @include theme.property(color, on-primary);
+  background-color: #{theme.variable(primary)};
+  color: #{theme.variable(on-primary)};
 
-  &:hover {
-    opacity: 0.87;
-  }
-
-  &:focus, &.mdc-ripple-upgraded--background-focused {
-    opacity: 0.54;
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: var(--forge-theme-primary-container)
+    ));
   }
 }
 
@@ -417,49 +404,3 @@
     }
   }
 }
-
-@mixin _deprecated-interactable() {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-bounded;
-  @include mdc-ripple-theme.states(on-surface);
-  @include mdc-ripple-theme.states-activated(primary);
-  @include mdc-ripple-theme.states-selected(primary);
-
-  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
-    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
-      mdc-ripple-theme.states-opacity(primary, hover);
-  }
-
-  &:focus,
-  &--active {
-    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
-        }
-      }
-
-      &::before,
-      &::after {
-        @include mdc-theme.property(background-color, on-surface);
-      }
-    }
-  }
-
-  &--active:focus {
-    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
-            mdc-ripple-theme.states-opacity(primary, activated);
-        }
-      }
-    }
-  }
-}

package/styles/color-picker/_mixins.scss

@@ -3,12 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '../theme';
-@use '../theme/theme-values';
-@use './variables';
+@use '../core/styles/theme';
+@use '../core/styles/typography';
+@use '../core/styles/animation';
 
 @mixin styles() {
   * {
@@ -95,18 +92,17 @@
       flex: 1;
 
       label {
-        @include mdc-typography.typography(caption);
-        @include mdc-theme.property(color, text-secondary-on-light);
+        @include typography.style(label2);
+        color: #{theme.variable(text-medium)};
       }
 
       input {
-        @include mdc-typography.typography(caption);
+        @include typography.style(label2);
 
         &[type=number],
         &[type=text] {
-          @include mdc-theme.property(color, on-surface);
-          @include theme.property(border-color, border-color);
-
+          border-color: #{theme.variable(outline)};
+          color: #{theme.variable(on-surface)};
           background-color: transparent;
           padding: 4px 8px;
           border-width: 1px;
@@ -114,18 +110,17 @@
           border-radius: 4px;
           box-sizing: border-box;
           outline: none;
-          transition: mdc-animation.enter(box-shadow, 200ms),
-                      mdc-animation.enter(border-color, 200ms);
+          transition-property: box-shadow, border-colo;
+          transition-duration: #{animation.variable(duration-short4)};
+          transition-timing-function: #{animation.variable(easing-standard)};
 
           &:hover {
-            @include mdc-theme.property(border-color, text-primary-on-background);
+            border-color: #{theme.variable(text-high)};
           }
 
           &:focus {
-            @include mdc-theme.property(border-color, primary);
-
-            box-shadow: 0 0 0 1px inset theme-values.$primary;
-            box-shadow: 0 0 0 1px inset var(--mdc-theme-primary, theme-values.$primary);
+            border-color: #{theme.variable(primary)};
+            box-shadow: 0 0 0 1px inset #{theme.variable(primary)};
           }
         }
 
@@ -190,8 +185,7 @@
 }
 
 @mixin base() {
-  @include theme.css-custom-property(width, --forge-color-picker-width, variables.$width);
-
+  width: var(--forge-color-picker-width, 272px);
   position: relative;
   display: inline-block;
   overflow: hidden;

package/styles/color-picker/color-picker.scss

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
 @use './mixins';
 
 @include mixins.styles;

package/styles/core/styles/animation/index.scss

@@ -7,10 +7,32 @@
 @use '../utils';
 @use '../tokens/animation/tokens';
 
+///
+/// Emits custom property declarations for all animation theme tokens.
+/// 
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(animation, $token-name, $token-value);
+  }
+}
+
+///
+/// Gets a CSS custom property declaration for a specific animation token with its token value as the fallback value.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   animation-duration: #{animation.variable(duration-short4)}; // => animation-duration: var(--forge-animation-duration-short4, 200ms);
+/// }
+/// ```
+/// 
 @function variable($key, $prefix: config.$prefix) {
   @return utils.variable(animation, tokens.$tokens, $key, $prefix);
 }
 
+///
+/// Generates CSS custom property declarations for the provided animation tokens.
+/// 
 @function provide($tokens, $prefix: config.$prefix) {
   @return utils.provide(tokens.$tokens, $tokens, animation, $prefix);
 }

package/styles/core/styles/border/index.scss

@@ -9,13 +9,22 @@
 @use '../theme';
 @use '../utils';
 
+///
+/// Emits custom property declarations for all border theme tokens.
+/// 
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(border, $token-name, $token-value);
+  }
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific border token with its token value as the fallback value.
 /// 
 /// Example:
 /// ```scss
 /// .my-class {
-///   @include border.style(standard); // => border: var(--forge-border-standard, 1px solid var(--forge-theme-border-color));
+///   @include border.style(standard); // => border: var(--forge-border-standard, 1px solid var(--forge-theme-outline));
 /// }
 /// ```
 /// 

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