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

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

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../elevation';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(checkbox, primary-color, theme.variable(tertiary)),
+  size: utils.module-val(checkbox, size, 16px),
+  border-width: utils.module-val(checkbox, border-width, border.variable(medium)),
+  icon-color: utils.module-val(checkbox, icon-color, theme.variable(on-tertiary)),
+  state-layer-size: utils.module-val(checkbox, state-layer-size, 40px),
+  state-layer-dense-size: utils.module-val(checkbox, state-layer-size, 24px),
+
+  // Checkbox
+  background-color: utils.module-val(checkbox, background-color, theme.variable(surface)),
+  width: utils.module-ref(checkbox, width, size),
+  height: utils.module-ref(checkbox, height, size),
+  unchecked-border-width: utils.module-ref(checkbox, unchecked-border-width, border-width),
+  unchecked-border-color: utils.module-val(checkbox, unchecked-border-color, theme.variable(surface-container-high)),
+  shape: utils.module-val(checkbox, shape, shape.variable(small)),
+  elevation: utils.module-val(checkbox, elevation, elevation.value(0)),
+  
+  // Checkbox checked
+  checked-background-color: utils.module-ref(checkbox, checked-background-color, primary-color),
+  checked-border-width: utils.module-ref(checkbox, checked-border-width, border-width),
+  checked-border-color: utils.module-ref(checkbox, checked-border-color, checked-background-color),
+
+  // Icon
+  icon-checked-color: utils.module-ref(checkbox, icon-checked-color, icon-color),
+  icon-indeterminate-color: utils.module-ref(checkbox, icon-indeterminate-color, icon-color),
+  icon-stroke-width: utils.module-val(checkbox, icon-stroke-width, 4px),
+
+  // Label
+  gap: utils.module-val(checkbox, gap, 0),
+  justify: utils.module-val(switch, justify, space-between),
+  direction: utils.module-val(switch, direction, initial),
+
+  // State layer
+  state-layer-width: utils.module-ref(checkbox, state-layer-width, state-layer-size),
+  state-layer-height: utils.module-ref(checkbox, state-layer-height, state-layer-size),
+  state-layer-checked-color: utils.module-ref(checkbox, state-layer-checked-color, primary-color),
+  state-layer-unchecked-color: utils.module-ref(state-layer, state-layer-unchecked-color, color),
+  state-layer-shape: utils.module-val(checkbox, state-layer-shape, shape.variable(full)),
+
+  // Dense
+  state-layer-dense-width: utils.module-ref(checkbox, state-layer-dense-width, state-layer-dense-size),
+  state-layer-dense-height: utils.module-ref(checkbox, state-layer-dense-height, state-layer-dense-size),
+
+  // Disabled
+  disabled-opacity: utils.module-val(checkbox, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Animation
+  animation-duration: utils.module-val(checkbox, animation-duration, animation.variable(duration-short2)),
+  background-animation-timing: utils.module-val(checkbox, animation-duration, animation.variable(easing-standard)),
+  icon-animation-timing: utils.module-val(checkbox, animation-duration, animation.variable(easing-emphasized-accelerate))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -5,15 +5,25 @@
  */
 @use 'sass:map';
 @use '../../theme';
+@use '../../animation';
 @use '../../utils';
 
 $tokens: (
+  // Dimensions
   size: utils.module-val(circular-progress, size, 48px),
   padding: utils.module-val(circular-progress, padding, 0),
+
+  // Track
   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(surface-container)),
-  arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms)
+  track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary-container)),
+
+  // Indicator
+  indicator-color: utils.module-val(circular-progress, indicator-color, theme.variable(tertiary)),
+
+  // Animation
+  arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms),
+  theme-transition-duration: utils.module-val(circular-progress, theme-transition-duration, animation.variable(duration-short3)),
+  theme-transition-timing: utils.module-val(circular-progress, theme-transition-timing, animation.variable(easing-standard)),
 ) !default;
 
 @function get($key) {

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

@@ -11,20 +11,23 @@
 @use '../../spacing';
 @use '../../utils';
 
-/* stylelint-disable length-zero-no-unit */
 $tokens: (
+  width: utils.module-val(focus-indicator, width, border.variable(medium)),
   active-width: utils.module-val(focus-indicator, active-width, 6px),
+
   color: utils.module-val(focus-indicator, color, theme.variable(primary)),
+  shape: utils.module-val(focus-indicator, shape, shape.variable(extra-small)), // Requires unit
+  
   duration: utils.module-val(focus-indicator, duration, animation.variable(duration-long4)),
-  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable('025')),
-  inward-offset: utils.module-val(focus-indicator, inward-offset, 0px), // 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),
+  
+  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable(xxsmall)),
+  inward-offset: utils.module-val(focus-indicator, inward-offset, 0px), // Requires unit
   offset-block: utils.module-val(focus-indicator, offset-block, 0),
   offset-inline: utils.module-val(focus-indicator, offset-inline, 0)
 ) !default;

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

@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../animation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../elevation';
+@use '../../typography';
+@use '../../theme';
+
+$tokens: (
+  // General
+  display: utils.module-val(icon-button, display, inline-flex),
+  size: utils.module-val(icon-button, size, 48px),
+  gap: utils.module-val(icon-button, spacing, 0),
+  icon-color: utils.module-val(icon-button, icon-color, inherit),
+  background-color: utils.module-val(icon-button, background-color, none),
+  icon-size: utils.module-val(icon-button, icon-size, typography.font-size-relative('1500')),
+  cursor: utils.module-val(icon-button, cursor, pointer),
+  padding: utils.module-val(icon-button, padding, spacing.variable(xxsmall)),
+  border: utils.module-val(icon-button, border, none),
+  shadow: utils.module-val(icon-button, shadow, none),
+
+  // Animation
+  transition-duration: utils.module-val(icon-button, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(icon-button, transition-timing, animation.variable(easing-standard)),
+  
+  // Shape
+  shape: utils.module-val(icon-button, shape, shape.variable(full)),
+  shape-start-start: utils.module-ref(icon-button, shape-start-start, shape),
+  shape-start-end: utils.module-ref(icon-button, shape-start-end, shape),
+  shape-end-start: utils.module-ref(icon-button, shape-end-start, shape),
+  shape-end-end: utils.module-ref(icon-button, shape-end-end, shape),
+  shape-squared: utils.module-val(icon-button, shape-squared, shape.variable(medium)),
+
+  // Outlined
+  outlined-border-width: utils.module-val(icon-button, outlined-border-width, 1px),
+  outlined-border-style: utils.module-val(icon-button, outlined-border-style, solid),
+  outlined-border-color: utils.module-ref(icon-button, outlined-border-color, icon-color),
+
+  // Tonal
+  tonal-icon-color: utils.module-val(icon-button, tonal-icon-color, theme.variable(on-primary-container)),
+  tonal-background-color: utils.module-val(icon-button, tonal-background-color, theme.variable(primary-container)),
+
+  // Filled
+  filled-icon-color: utils.module-val(icon-button, filled-icon-color, theme.variable(on-primary)),
+  filled-background-color: utils.module-val(icon-button, filled-background-color, theme.variable(primary)),
+
+  // Raised
+  raised-shadow: utils.module-val(icon-button, raised-shadow, elevation.value(2)),
+  raised-hover-shadow: utils.module-val(icon-button, raised-hover-shadow, elevation.value(4)),
+  raised-active-shadow: utils.module-val(icon-button, raised-active-shadow, elevation.value(8)),
+  raised-disabled-shadow: utils.module-val(icon-button, raised-disabled-shadow, none),
+
+  // Density - small
+  density-small-size: utils.module-val(icon-button, density-small-size, 24px),
+  density-small-padding: utils.module-val(icon-button, density-small-padding, spacing.variable(xxxsmall)),
+  density-small-icon-size: utils.module-val(icon-button, density-small-icon-size, typography.font-size-relative('1125')),
+
+  // Density - medium
+  density-medium-size: utils.module-val(icon-button, density-medium-size, 36px),
+  density-medium-padding: utils.module-val(icon-button, density-medium-padding, spacing.variable(xxsmall)),
+
+  // Density - large (default)
+  density-large-size: utils.module-ref(icon-button, density-large-size, size),
+
+  // Toggle (on)
+  toggle-on-icon-color: utils.module-val(icon-button, toggle-on-icon-color, theme.variable(primary)),
+
+  // Toggle (on) outlined
+  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container-low)),
+  outlined-toggle-on-icon-color: utils.module-val(icon-button, outlined-toggle-on-icon-color, theme.variable(primary)),
+
+  // Toggle tonal
+  tonal-toggle-background-color: utils.module-val(icon-button, tonal-toggle-background-color, theme.variable(surface-container-low)),
+
+  // Toggle (on) tonal
+  tonal-toggle-on-background-color: utils.module-val(icon-button, tonal-toggle-on-background-color, theme.variable(primary-container)),
+  tonal-toggle-on-icon-color: utils.module-val(icon-button, tonal-toggle-on-icon-color, theme.variable(primary)),
+
+  // Toggle filled
+  filled-toggle-background-color: utils.module-val(icon-button, filled-toggle-background-color, theme.variable(surface-container-low)),
+  filled-toggle-icon-color: utils.module-val(icon-button, filled-toggle-background-color, theme.variable(primary)),
+
+  // Toggle (on) filled
+  filled-toggle-on-background-color: utils.module-val(icon-button, filled-toggle-on-background-color, theme.variable(primary)),
+  filled-toggle-on-icon-color: utils.module-val(icon-button, filled-toggle-on-icon-color, theme.variable(on-primary)),
+
+  // Disabled
+  disabled-cursor: utils.module-val(icon-button, disabled-cursor, not-allowed),
+  disabled-opacity: utils.module-val(icon-button, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Popover icon
+  popover-icon-padding: utils.module-val(icon-button, popover-icon-padding, spacing.variable(xsmall)),
+
+  // Focus indicator
+  focus-indicator-color: utils.module-val(icon-button, focus-indicator-color, theme.variable(primary))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -7,4 +7,3 @@
 @use '../core/config';
 
 @forward './theme/tokens';
-// @forward './typography/tokens';

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

@@ -10,14 +10,25 @@
 @use '../../utils';
 
 $tokens: (
+  // Track
   track-height: utils.module-val(linear-progress, track-height, 4px),
   track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-container)),
-  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),
+
+  // Indicator
+  indicator-color: utils.module-val(linear-progress, indicator-color, theme.variable(tertiary)),
+  indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),
+
+  // Determinate
   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)),
+
+  // Indeterminate
+  indeterminate-duration: utils.module-val(linear-progress, indeterminate-duration, 2s),
+
+  // Theme
+  theme-transition-duration: utils.module-val(linear-progress, theme-transition-duration, animation.variable(duration-short3)),
+  theme-transition-timing: utils.module-val(linear-progress, theme-transition-timing, animation.variable(easing-standard)),
 ) !default;
 
 @function get($key) {

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

@@ -3,9 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:map';
+
 $base: 16px !default; // The Forge spacing system scales in multiples of 8
 
-$tokens: (
+$values: (
   '0125': $base * 0.125, // 2px
   '025': $base * 0.25,   // 4px
   '050': $base * 0.5,    // 8px
@@ -17,6 +19,18 @@ $tokens: (
   '350': $base * 3.5,    // 56px
 ) !default;
 
+$tokens: (
+  xxxsmall: map.get($values, '0125'),
+  xxsmall: map.get($values, '025'),
+  xsmall: map.get($values, '050'),
+  small: map.get($values, '075'),
+  medium: map.get($values, '100'),
+  large: map.get($values, '150'),
+  xlarge: map.get($values, '200'),
+  xxlarge: map.get($values, '300'),
+  xxxlarge: map.get($values, '350'),
+);
+
 @function get($key) {
   @return map.get($tokens, $key);
 }

package/styles/core/styles/tokens/split-button/_tokens.scss

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../border';
+@use '../button/tokens' as button;
+
+$tokens: (
+  min-width: utils.module-val(split-button, min-width, 0),
+  gap: utils.module-val(split-button, gap, border.variable(thin)),
+
+  focus-indicator-offset: utils.module-val(split-button, focus-indicator-offset, button.get(focus-indicator-offset)),
+  focus-indicator-divider-offset: utils.module-ref(split-button, focus-indicator-divider-offset, gap)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../color-palette';
 @use '../../animation';
 @use '../../elevation';
 @use '../../shape';
@@ -21,6 +20,7 @@ $tokens: (
   track-border-color: utils.module-val(switch, track-border-color, transparent),
 
   icon-color: utils.module-val(switch, icon-color, theme.variable(on-tertiary)),
+  icon-size: utils.module-val(switch, icon-size, 16px),
   icon-scale: utils.module-val(switch, icon-scale, 1),
 
   state-layer-size: utils.module-val(switch, state-layer-size, 40px),
@@ -51,8 +51,8 @@ $tokens: (
   // Icon
   icon-on-color: utils.module-ref(switch, icon-on-color, icon-color),
   icon-off-color: utils.module-ref(switch, icon-off-color, icon-color),
-  icon-on-size: utils.module-ref(switch, icon-on-size, handle-size),
-  icon-off-size: utils.module-ref(switch, icon-off-size, handle-size),
+  icon-on-size: utils.module-ref(switch, icon-on-size, icon-size),
+  icon-off-size: utils.module-ref(switch, icon-off-size, icon-size),
   icon-on-scale: utils.module-ref(switch, icon-on-scale, icon-scale),
   icon-off-scale: utils.module-ref(switch, icon-off-scale, icon-scale),
 
@@ -72,7 +72,7 @@ $tokens: (
   state-layer-dense-height: utils.module-ref(switch, state-layer-dense-height, state-layer-dense-size),
 
   // Disabled
-  disabled-opacity: utils.module-val(switch, disabled-opacity, 0.38),
+  disabled-opacity: utils.module-val(switch, disabled-opacity, theme.emphasis(medium-low)),
 
   // Active
   handle-active-on-color: utils.module-ref(switch, handle-active-on-color, handle-on-color),

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

@@ -41,7 +41,7 @@ $tokens: (
   
   // Content
   content-height: utils.module-ref(tab, content-height, height),
-  content-padding: utils.module-val(tab, content-padding, spacing.variable('025')),
+  content-padding: utils.module-val(tab, content-padding, spacing.variable(xxsmall)),
 
   // Icon
   active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),

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

@@ -8,8 +8,8 @@
 @use '../../../utils';
 
 $tokens: (
-  container-justify: utils.module-val(tab-bar, justify, space-between),
-  tab-flex: utils.module-val(tab-bar, stretch, 1),
+  justify: utils.module-val(tab-bar, justify, space-between),
+  stretch: utils.module-val(tab-bar, stretch, 1),
   divider-color: utils.module-val(tab-bar, divider-color, theme.variable(outline)),
   divider-thickness: utils.module-val(tab-bar, divider-thickness, 1px)
 );

package/styles/core/styles/tokens/theme/_token-utils.scss

@@ -23,8 +23,9 @@
   $surface-tone: color-utils.tone($surface);
 
   // The container colors are the provided color mixed with the surface color at lower emphasis levels
+  $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', lower, low)));
   $container: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
-  // $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
+  $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
 
   // The on-color is the contrast color against the provided color
   $on-color: theme-utils.contrast($color);
@@ -32,15 +33,18 @@
   // The on-container colors are the contrast color for the provided color mixed with the
   // container color at a lower emphasis to let the contrast color bleed through for
   // increased contrast against the lower emphasis container color 
+  $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium-low));
   $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(low));
-  // $on-container-high: theme-utils.contrast($container-high);
+  $on-container-high: theme-utils.contrast($container-high);
 
   @return (
     #{$name}: $color,
+    #{$name}-container-low: $container-low,
     #{$name}-container: $container,
-    // #{$name}-container-high: $container-high,
+    #{$name}-container-high: $container-high,
     on-#{$name}: $on-color,
+    on-#{$name}-container-low: $on-container-low,
     on-#{$name}-container: $on-container,
-    // on-#{$name}-container-high: $on-container-high
+    on-#{$name}-container-high: $on-container-high
   );
 }

package/styles/core/styles/tokens/typography/_tokens.label.scss

@@ -18,7 +18,6 @@ $label: utils.inherit-map(core.$base, (
 $button: utils.inherit-map(core.$base, (
   font-size: type-utils.font-size-relative(button, font-size, '0875'),
   font-weight: weight.value(medium),
-  line-height: type-utils.font-size-relative(button, line-height, '2250'),
   letter-spacing: type-utils.calc-letter-spacing(1, scale.value('0875'))
 )) !default;
 

package/styles/core/styles/typography/index.scss

@@ -91,6 +91,30 @@
   }
 }
 
+///
+/// Create a selector for default anchor link styles
+///
+@mixin anchor {
+  a:not([forge-ignore]),
+  .forge-typography--link {
+    text-decoration: underline;
+    color: theme.variable(primary);
+    cursor: pointer;
+
+    &:visited {
+      color: theme.variable(primary);
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active {
+      opacity: theme.emphasis(high);
+    }
+  }
+}
+
 ///
 /// Provides override CSS custom property declarations for the given style overrides.
 /// 
@@ -136,7 +160,8 @@
 /// ```
 /// 
 @function font-size-relative($scale) {
-  @return calc(#{core.get(font-size)} * #{$scale});
+  $scale-value: scale.value($scale);
+  @return calc(#{core.get(font-size)} * #{$scale-value});
 }
 
 @function _get-style-value($style, $token) {

package/styles/file-picker/_mixins.scss

@@ -48,7 +48,7 @@
         display: none;
       }
 
-      .forge-file-picker__button > button {
+      .forge-file-picker__button {
         @include button-compact;
       }
     }

package/styles/focus-indicator/_animations.scss

@@ -3,19 +3,21 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use './token-utils' as *;
+
 @mixin keyframes {
   @keyframes outward-grow {
     from {
       outline-width: 0;
     }
     to {
-      outline-width: var(--_active-width);
+      outline-width: #{token(active-width)};
     }
   }
 
   @keyframes outward-shrink {
     from {
-      outline-width: var(--_active-width);
+      outline-width: #{token(active-width)};
     }
   }
 
@@ -24,13 +26,13 @@
       border-width: 0;
     }
     to {
-      border-width: var(--_active-width);
+      border-width: #{token(active-width)};
     }
   }
 
   @keyframes inward-shrink {
     from {
-      border-width: var(--_active-width);
+      border-width: #{token(active-width)};
     }
   }
 }

package/styles/focus-indicator/_configuration.scss

@@ -3,21 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/focus-indicator/tokens';
+@use './token-utils' as *;
 
 @mixin configuration {
-  --_active-width: #{tokens.get(active-width)};
-  --_color: #{tokens.get(color)};
-  --_duration: #{tokens.get(duration)};
-  --_outward-offset:#{tokens.get(outward-offset)};
-  --_inward-offset: #{tokens.get(inward-offset)};
-  --_shape: #{tokens.get(shape)};
-  --_width: #{tokens.get(width)};
-  --_easing: #{tokens.get(easing)};
-  --_shape-start-start: #{tokens.get(shape-start-start)};
-  --_shape-start-end: #{tokens.get(shape-start-end)};
-  --_shape-end-start: #{tokens.get(shape-end-start)};
-  --_shape-end-end: #{tokens.get(shape-end-end)};
-  --_margin-block: #{tokens.get(offset-block)};
-  --_margin-inline: #{tokens.get(offset-inline)};
+  @include tokens;
 }

package/styles/focus-indicator/_core.scss

@@ -3,24 +3,19 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/utils';
-@use '../core/styles/tokens/focus-indicator/tokens';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, focus-indicator);
-}
+@use './token-utils' as *;
 
 @mixin base {
-  animation-delay: 0s, calc(var(--_duration) * 0.25);
-  animation-duration: calc(var(--_duration) * 0.25), calc(var(--_duration) * 0.75);
-  animation-timing-function: var(--_easing);
+  animation-delay: 0s, calc(#{token(duration)} * 0.25);
+  animation-duration: calc(#{token(duration)} * 0.25), calc(#{token(duration)} * 0.75);
+  animation-timing-function: #{token(easing)};
   box-sizing: border-box;
-  color: var(--_color);
+  color: #{token(color)};
   display: none;
   pointer-events: none;
   position: absolute;
-  margin-block: var(--_margin-block);
-  margin-inline: var(--_margin-inline);
+  margin-block: #{token(offset-block)};
+  margin-inline: #{token(offset-inline)};
 }
 
 @mixin active {
@@ -28,25 +23,25 @@
 }
 
 @mixin circular {
-  --_shape: 50%;
+  @include override(shape, 50%, value);
 }
 
 @mixin outward {
   animation-name: outward-grow, outward-shrink;
-  border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
-  border-end-start-radius: calc(var(--_shape-end-start) + var(--_outward-offset));
-  border-start-end-radius: calc(var(--_shape-start-end) + var(--_outward-offset));
-  border-start-start-radius: calc(var(--_shape-start-start) + var(--_outward-offset));
-  inset: calc(-1 * var(--_outward-offset));
-  outline: var(--_width) solid currentColor;
+  border-end-end-radius: calc(#{token(shape-end-end)} + #{token(outward-offset)});
+  border-end-start-radius: calc(#{token(shape-end-start)} + #{token(outward-offset)});
+  border-start-end-radius: calc(#{token(shape-start-end)} + #{token(outward-offset)});
+  border-start-start-radius: calc(#{token(shape-start-start)} + #{token(outward-offset)});
+  inset: calc(-1 * #{token(outward-offset)});
+  outline: #{token(width)} solid currentColor;
 }
 
 @mixin inward {
   animation-name: inward-grow, inward-shrink;
-  border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
-  border-end-start-radius: calc(var(--_shape-end-start) - var(--_inward-offset));
-  border-start-end-radius: calc(var(--_shape-start-end) - var(--_inward-offset));
-  border-start-start-radius: calc(var(--_shape-start-start) - var(--_inward-offset));
-  border: var(--_width) solid currentColor;
-  inset: var(--_inward-offset);
+  border-end-end-radius: calc(#{token(shape-end-end)} - #{token(inward-offset)});
+  border-end-start-radius: calc(#{token(shape-end-start)} - #{token(inward-offset)});
+  border-start-end-radius: calc(#{token(shape-start-end)} - #{token(inward-offset)});
+  border-start-start-radius: calc(#{token(shape-start-start)} - #{token(inward-offset)});
+  border: #{token(width)} solid currentColor;
+  inset: #{token(inward-offset)};
 }

package/styles/focus-indicator/_token-utils.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/utils';
+@use '../core/styles/tokens/focus-indicator/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: focus-indicator;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}