@tylertech/forge 3.0.0-next.14 → 3.0.0-next.16

package/styles/core/styles/tokens/button-toggle/button-toggle-group/_tokens.scss

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../animation';
+@use '../../../theme';
+@use '../../../border';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../utils';
+@use '../../button/tokens' as button;
+@use '../button-toggle/tokens' as button-toggle;
+
+$tokens: (
+  // Base
+  display: utils.module-val(button-toggle-group, display, inline-flex),
+  gap: utils.module-val(button-toggle-group, gap, 4px),
+  padding: utils.module-val(button-toggle-group, padding, 4px),
+  padding-block: utils.module-ref(button-toggle-group, padding-block, padding),
+  padding-inline: utils.module-ref(button-toggle-group, padding-inline, padding),
+  height: utils.module-val(button-toggle-group, height, button.get(height)),
+
+  // Density - dense
+  dense-height: utils.module-val(button-toggle-group, dense-height, button.get(dense-height)),
+
+  // Outline
+  outline-width: utils.module-val(button-toggle-group, outline-width, border.variable(thin)),
+  outline-style: utils.module-val(button-toggle-group, outline-style, solid),
+  outline-color: utils.module-val(button-toggle-group, outline-color, theme.variable(outline-low)),
+  outline-color-active: utils.module-val(button-toggle-group, outline-color-active, theme.variable(outline-medium)),
+
+  // Shape
+  shape: utils.module-val(button-toggle-group, shape, shape.variable(medium)),
+  shape-start-start: utils.module-ref(button-toggle-group, shape-start-start, shape),
+  shape-start-end: utils.module-ref(button-toggle-group, shape-start-end, shape),
+  shape-end-start: utils.module-ref(button-toggle-group, shape-end-start, shape),
+  shape-end-end: utils.module-ref(button-toggle-group, shape-end-end, shape),
+
+  // Animation
+  transition-duration: utils.module-val(button-toggle-group, transition-duration, button-toggle.get(transition-duration)),
+  transition-timing: utils.module-val(button-toggle-group, transition-timing, button-toggle.get(transition-timing))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -18,7 +18,7 @@ $tokens: (
   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),
+  state-layer-dense-size: utils.module-val(checkbox, state-layer-dense-size, 24px),
 
   // Checkbox
   background-color: utils.module-val(checkbox, background-color, theme.variable(surface)),
@@ -41,14 +41,14 @@ $tokens: (
 
   // Label
   gap: utils.module-val(checkbox, gap, 0),
-  justify: utils.module-val(switch, justify, space-between),
-  direction: utils.module-val(switch, direction, initial),
+  justify: utils.module-val(checkbox, justify, space-between),
+  direction: utils.module-val(checkbox, 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-unchecked-color: utils.module-ref(checkbox, state-layer-unchecked-color, color),
   state-layer-shape: utils.module-val(checkbox, state-layer-shape, shape.variable(full)),
 
   // Dense
@@ -60,8 +60,8 @@ $tokens: (
 
   // 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))
+  background-animation-timing: utils.module-val(checkbox, background-animation-timing, animation.variable(easing-standard)),
+  icon-animation-timing: utils.module-val(checkbox, icon-animation-timing, animation.variable(easing-emphasized-accelerate))
 ) !default;
 
 @function get($key) {

package/styles/core/styles/tokens/floating-action-button/_tokens.scss

@@ -14,7 +14,7 @@
 $tokens: (
   // General
   display: utils.module-val(fab, display, inline-flex),
-  gap: utils.module-val(fab, spacing, spacing.variable(xsmall)),
+  gap: utils.module-val(fab, gap, spacing.variable(xsmall)),
   background: utils.module-val(fab, background, theme.variable(secondary)),
   color: utils.module-val(fab, color, theme.variable(on-secondary)),
   size: utils.module-val(fab, size, 56px),

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

@@ -16,7 +16,7 @@ $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),
+  gap: utils.module-val(icon-button, gap, 0),
   icon-color: utils.module-val(icon-button, icon-color, currentColor),
   background-color: utils.module-val(icon-button, background-color, none),
   icon-size: utils.module-val(icon-button, icon-size, typography.font-size-relative('1500')),
@@ -72,7 +72,7 @@ $tokens: (
   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-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container)),
   outlined-toggle-on-icon-color: utils.module-val(icon-button, outlined-toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle tonal
@@ -84,7 +84,7 @@ $tokens: (
 
   // 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)),
+  filled-toggle-icon-color: utils.module-val(icon-button, filled-toggle-icon-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)),

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../elevation';
+
+$tokens: (
+  position: utils.module-val(overlay, position, fixed),
+  z-index: utils.module-val(overlay, z-index, elevation.z-index-variable(popup)),
+  height: utils.module-val(overlay, height, fit-content),
+  width: utils.module-val(overlay, width, fit-content),
+  position-inline-start: utils.module-val(overlay, position-inline-start, auto),
+  position-inline-end: utils.module-val(overlay, position-inline-end, auto),
+  position-block-start: utils.module-val(overlay, position-block-start, auto),
+  position-block-end: utils.module-val(overlay, position-block-end, auto)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../elevation';
+@use '../../theme';
+@use '../../shape';
+@use '../../border';
+@use '../../animation';
+
+$tokens: (
+  // Base
+  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)),
+  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)),
+
+  // Arrow
+  arrow-size: utils.module-val(popover, arrow-size, 12px),
+  arrow-height: utils.module-ref(popover, arrow-height, arrow-size),
+  arrow-width: utils.module-ref(popover, arrow-width, arrow-size),
+  arrow-background-color: utils.module-ref(popover, arrow-background-color, background),
+  arrow-top-rotation: utils.module-val(popover, arrow-top-rotation, 135deg),
+  arrow-right-rotation: utils.module-val(popover, arrow-right-rotation, 225deg),
+  arrow-bottom-rotation: utils.module-val(popover, arrow-bottom-rotation, 315deg),
+  arrow-left-rotation: utils.module-val(popover, arrow-left-rotation, 45deg),
+  arrow-border-width: utils.module-val(popover, arrow-border-width, border.variable(thin)),
+
+  // Animation
+  animation-timing: utils.module-val(popover, animation-timing, animation.variable(easing-decelerate)),
+
+  zoom-duration: utils.module-val(popover, zoom-duration, animation.variable(duration-short3)),
+  zoom-timing: utils.module-ref(popover, zoom-timing, animating-timing),
+
+  slide-duration: utils.module-val(popover, slide-duration, animation.variable(duration-short3)),
+  slide-timing: utils.module-ref(popover, slide-timing, animating-timing),
+  slide-offset: utils.module-val(popover, slide-offset, 24px),
+
+  fade-duration: utils.module-val(popover, fade-duration, animation.variable(duration-medium2)),
+  fade-timing: utils.module-ref(popover, fade-timing, animating-timing),
+
+  // No anchor
+  position-inline-start: utils.module-val(popover, position-inline-start, auto),
+  position-inline-end: utils.module-val(popover, position-inline-end, auto),
+  position-block-start: utils.module-val(popover, position-block-start, auto),
+  position-block-end: utils.module-val(popover, position-block-end, auto),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/profile-card/_tokens.scss

@@ -10,7 +10,7 @@
 
 $tokens: (
   min-width: utils.module-val(profile-card, min-width, 360px),
-  shape: utils.module-val(profile-card, border-radius, shape.variable(medium)),
+  shape: utils.module-val(profile-card, shape, shape.variable(medium)),
   avatar-size: utils.module-val(profile-card, avatar-size, 56px)
 ) !default;
 

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(radio, primary-color, theme.variable(tertiary)),
+  inactive-color: utils.module-val(radio, inactive-color, theme.variable(surface-container-high)),
+  size: utils.module-val(radio, size, 20px),
+  mark-size: utils.module-val(radio, mark-size, 12px),
+  state-layer-size: utils.module-val(radio, state-layer-size, 40px),
+  state-layer-dense-size: utils.module-val(radio, state-layer-dense-size, 24px),
+
+  // Radio
+  width: utils.module-ref(radio, width, size),
+  height: utils.module-ref(radio, height, size),
+  border-width: utils.module-val(radio, border-width, border.variable(medium)),
+  unchecked-border-color: utils.module-ref(radio, unchecked-border-color, inactive-color),
+  checked-border-color: utils.module-ref(radio, checked-border-color, primary-color),
+  background: utils.module-val(radio, background, transparent),
+  shape: utils.module-val(radio, shape, shape.variable(round)),
+
+  // Mark
+  mark-width: utils.module-ref(radio, mark-width, mark-size),
+  mark-height: utils.module-ref(radio, mark-height, mark-size),
+  mark-unchecked-color: utils.module-ref(radio, mark-unchecked-color, inactive-color),
+  mark-checked-color: utils.module-ref(radio, mark-checked-color, primary-color),
+  mark-unchecked-background: utils.module-val(radio, mark-unchecked-background, transparent),
+  mark-checked-background: utils.module-val(radio, mark-checked-background, transparent),
+
+  // Label
+  gap: utils.module-val(radio, gap, 0),
+  justify: utils.module-val(radio, justify, space-between),
+  direction: utils.module-val(radio, direction, initial),
+
+  // State layer
+  state-layer-width: utils.module-ref(radio, state-layer-width, state-layer-size),
+  state-layer-height: utils.module-ref(radio, state-layer-height, state-layer-size),
+  state-layer-unchecked-color: utils.module-ref(radio, state-layer-unchecked-color, color),
+  state-layer-checked-color: utils.module-ref(radio, state-layer-checked-color, primary-color),
+  state-layer-shape: utils.module-ref(radio, state-layer-shape, shape),
+
+  // Dense
+  state-layer-dense-width: utils.module-ref(radio, state-layer-dense-width, state-layer-dense-size),
+  state-layer-dense-height: utils.module-ref(radio, state-layer-dense-height, state-layer-dense-size),
+  
+  // Disabled
+  disabled-opacity: utils.module-val(radio, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Animation
+  animation-duration: utils.module-val(radio, animation-duration, animation.variable(duration-short4)),
+  animation-timing-function: utils.module-val(radio, animation-timing-function, animation.variable(easing-decelerate)),
+  animation-delay: utils.module-val(radio, animation-delay, 0ms),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -24,7 +24,7 @@ $tokens: (
   icon-scale: utils.module-val(switch, icon-scale, 1),
 
   state-layer-size: utils.module-val(switch, state-layer-size, 40px),
-  state-layer-dense-size: utils.module-val(switch, handle-dense-size, 28px),
+  state-layer-dense-size: utils.module-val(switch, state-layer-dense-size, 28px),
 
   // Handle
   handle-on-color: utils.module-val(switch, handle-on-color, theme.variable(tertiary)),
@@ -65,7 +65,7 @@ $tokens: (
   state-layer-width: utils.module-ref(switch, state-layer-width, state-layer-size),
   state-layer-height: utils.module-ref(switch, state-layer-height, state-layer-size),
   state-layer-on-color: utils.module-ref(switch, state-layer-on-color, handle-on-color),
-  state-layer-off-color: utils.module-ref(state-layer, state-layer-off-color, color),
+  state-layer-off-color: utils.module-ref(switch, state-layer-off-color, color),
 
   // Dense
   state-layer-dense-width: utils.module-ref(switch, state-layer-dense-width, state-layer-dense-size),
@@ -82,7 +82,7 @@ $tokens: (
   handle-active-off-scale: utils.module-ref(switch, handle-active-off-scale, handle-active-scale),
   handle-active-elevation: utils.module-ref(switch, handle-active-elevation, handle-elevation),
   handle-active-on-elevation: utils.module-ref(switch, handle-active-on-elevation, handle-active-elevation),
-  handle-active-off-elevation: utils.module-ref(switch, handle-active-on-elevation, handle-active-elevation),
+  handle-active-off-elevation: utils.module-ref(switch, handle-active-off-elevation, handle-active-elevation),
   track-active-on-color: utils.module-ref(switch, track-active-on-color, track-on-color),
   track-active-off-color: utils.module-ref(switch, track-active-off-color, track-off-color),
   track-active-on-border-width: utils.module-ref(switch, track-active-on-border-width, track-on-border-width),

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

@@ -24,15 +24,15 @@ $tokens: (
   indicator-shape: utils.module-val(tab, indicator-shape, 3px 3px 0 0),
 
   // Indicator (vertical)
-  vertical-indicator-shape: utils.module-val(tab, indicator-shape, 3px 0 0 3px),
+  vertical-indicator-shape: utils.module-val(tab, vertical-indicator-shape, 3px 0 0 3px),
 
   // Indicator (secondary)
-  secondary-indicator-height: utils.module-val(tab, indicator-height, 2px),
-  secondary-indicator-shape: utils.module-val(tab, indicator-shape, 0),
+  secondary-indicator-height: utils.module-val(tab, secondary-indicator-height, 2px),
+  secondary-indicator-shape: utils.module-val(tab, secondary-indicator-shape, 0),
 
   // Indicator (inverted)
-  inverted-indicator-shape: utils.module-val(tab, indicator-shape, 0 0 3px 3px),
-  vertical-inverted-indicator-shape: utils.module-val(tab, indicator-shape, 0 3px 3px 0),
+  inverted-indicator-shape: utils.module-val(tab, inverted-indicator-shape, 0 0 3px 3px),
+  vertical-inverted-indicator-shape: utils.module-val(tab, vertical-inverted-indicator-shape, 0 3px 3px 0),
 
   // Container
   container-color: utils.module-val(tab, container-color, transparent),

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

@@ -23,28 +23,29 @@
   $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: theme-utils.hexify($color, $surface, color-emphasis.value(low));
 
   // The on-color is the contrast color against the provided color
   $on-color: theme-utils.contrast($color);
 
   // 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));
+  // increased contrast against the lower emphasis container color
   $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium));
-  $on-container-high: theme-utils.contrast($container-high);
+
+  // Compute contrast ratio for foreground colors against their corresponding background
+  $minimum-ratio: 4.5;
+  @if color-utils.contrast-ratio($color, $on-color) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}" and "on-#{$name}" is less than 4.5:1.';
+  }
+  @if color-utils.contrast-ratio($container, $on-container) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container" and "on-#{$name}-container" is less than 4.5:1.';
+  }
 
   @return (
     #{$name}: $color,
-    #{$name}-container-low: $container-low,
     #{$name}-container: $container,
-    #{$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: $on-container
   );
 }

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

@@ -23,6 +23,7 @@
   $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)));
@@ -31,6 +32,7 @@
     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,
@@ -40,6 +42,7 @@
     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)

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

@@ -22,12 +22,12 @@
   @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)),
-    text-medium-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium)),
+    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(lowest)),
-    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lowest)),
+    text-lowest: theme-utils.emphasized($text, color-emphasis.value(lower)),
+    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lower)),
   );
 }
 

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

@@ -19,6 +19,9 @@
   $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))
   );
 }

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

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../shape';
+@use '../../spacing';
+@use '../../animation';
+
+$tokens: (
+  // Base
+  background: utils.module-val(tooltip, background, theme.variable(surface-inverse)),
+  color: utils.module-val(tooltip, color, theme.variable(on-surface-inverse)),
+  shape: utils.module-val(tooltip, shape, shape.variable(medium)),
+  padding: utils.module-val(tooltip, padding, spacing.variable(xsmall)),
+  padding-block: utils.module-ref(tooltip, padding-block, padding),
+  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)),
+  content-align: utils.module-val(tooltip, content-align, center),
+
+  // Border
+  border-width: utils.module-val(tooltip, border-width, 0),
+  border-style: utils.module-val(tooltip, border-style, solid),
+  border-color: utils.module-val(tooltip, border-color, theme.variable(outline)),
+
+  // Animation
+  animation-timing: utils.module-val(tooltip, animation-timing, animation.variable(easing-decelerate)),
+  animation-duration: utils.module-val(tooltip, animation-duration, animation.variable(duration-short3)),
+  animation-offset: utils.module-val(tooltip, animation-offset, 24px),
+
+  // Arrow
+  arrow-size: utils.module-val(tooltip, arrow-size, 8px),
+  arrow-height: utils.module-ref(tooltip, arrow-height, arrow-size),
+  arrow-width: utils.module-ref(tooltip, arrow-width, arrow-size),
+  arrow-shape: utils.module-val(tooltip, arrow-shape, shape.variable(small)),
+  arrow-rotation: utils.module-val(tooltip, arrow-rotation, 0deg),
+  arrow-top-rotation: utils.module-val(tooltip, arrow-top-rotation, 315deg),
+  arrow-right-rotation: utils.module-val(tooltip, arrow-right-rotation, 45deg),
+  arrow-bottom-rotation: utils.module-val(tooltip, arrow-bottom-rotation, 135deg),
+  arrow-left-rotation: utils.module-val(tooltip, arrow-left-rotation, 225deg),
+) !default;
+
+///
+/// Gets a token from the token map.
+///
+@function get($name) {
+  @return map.get($tokens, $name);
+}

package/styles/dialog/_mixins.scss

@@ -114,13 +114,13 @@
   @include theme.css-custom-property(max-width, --forge-dialog-max-width, 100%);
   @include theme.css-custom-property(max-height, --forge-dialog-max-height, 100%);
   @include theme.css-custom-property(border-radius, --forge-dialog-border-radius, shape.resolve-radius(medium));
+  @include theme.css-custom-property(overflow, --forge-dialog-overflow, visible);
   
   display: inline-flex;
   flex-direction: column;
   box-sizing: border-box;
   transform: variables.$surface-transform;
   opacity: 0;
-  overflow: hidden;
   z-index: inherit;
 }
 

package/styles/drawer/mini-drawer/_mixins.scss

@@ -48,8 +48,6 @@
   @include theme.css-custom-property(width, --forge-drawer-mini-width, variables.$width);
   @include theme.z-index(surface);
 
-  transform: translateX(0);
-  transition-property: transform, width;
   transition: width 200ms mdc-animation.$standard-curve-timing-function;
 }
 

package/styles/floating-action-button/_core.scss

@@ -7,6 +7,8 @@
 @use '../core/styles/shape';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: #{token(display)};
   position: relative;

package/styles/floating-action-button/floating-action-button.scss

@@ -3,23 +3,23 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 @use '../core/styles/theme';
 @use '../state-layer' as state-layer;
 @use '../focus-indicator' as focus-indicator;
-@use './token-utils' as *;
 
 //
 // Host
 //
 
+$host-tokens: [display disabled-cursor];
+
 :host {
-  @include host-configuration;
+  @include tokens($includes: $host-tokens);
 }
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -31,19 +31,19 @@
 //
 
 .forge-fab {
-  @include configuration;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-fab {
-  @include core.base;
+  @include base;
 
   &--extended {
-    @include core.extended;
+    @include extended;
   }
 }
 
 a {
-  @include core.anchor-base;
+  @include anchor-base;
 }
 
 //
@@ -76,13 +76,13 @@ forge-state-layer {
 
 :host(:is([dense],[density=small])) {
   .forge-fab {
-    @include core.density-small;
+    @include density-small;
   }
 }
 
 :host([density=large]) {
   .forge-fab {
-    @include core.density-large;
+    @include density-large;
   }
 }
 
@@ -92,7 +92,7 @@ forge-state-layer {
 
 :host([elevation=lowered]) {
   .forge-fab {
-    @include core.lowered;
+    @include lowered;
   }
 }
 
@@ -101,10 +101,10 @@ forge-state-layer {
 //
 
 :host([disabled]) {
-  @include core.host-disabled;
+  @include host-disabled;
 
   .forge-fab {
-    @include core.disabled;
+    @include disabled;
   }
 }
 

package/styles/floating-action-button/index.scss

@@ -3,6 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/focus-indicator/_core.scss

@@ -5,6 +5,8 @@
  */
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin base {
   animation-delay: 0s, calc(#{token(duration)} * 0.25);
   animation-duration: calc(#{token(duration)} * 0.25), calc(#{token(duration)} * 0.75);