@tylertech/forge 3.0.0-next.15 → 3.0.0-next.17

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

@@ -17,7 +17,7 @@ $tokens: (
   // Shared
   primary-color: utils.module-val(button, primary-color, theme.variable(primary)),
   text-color: utils.module-ref(button, text-color, primary-color),
-  disabled-color: utils.module-val(button, disabled, theme.variable(surface-container)),
+  disabled-color: utils.module-val(button, disabled-color, theme.variable(surface-container)),
   padding: utils.module-val(button, padding, 8px),
   display: utils.module-val(button, display, inline-flex),
   justify: utils.module-val(button, justify, center),
@@ -58,7 +58,7 @@ $tokens: (
   // Tonal
   tonal-background: utils.module-val(button, tonal-background, theme.variable(primary-container)),
   tonal-disabled-background: utils.module-ref(button, tonal-disabled-background, disabled-color),
-  tonal-color: utils.module-val(button, flat-color, theme.variable(on-primary-container)),
+  tonal-color: utils.module-val(button, tonal-color, theme.variable(on-primary-container)),
   tonal-disabled-color: utils.module-ref(button, tonal-disabled-color, disabled-text-color),
 
   // Filled
@@ -101,8 +101,8 @@ $tokens: (
 
   // Focus indicator
   focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 4px),
-  text-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 0px),
-  link-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 2px),
+  text-focus-indicator-offset: utils.module-val(button, text-focus-indicator-offset, 0px),
+  link-focus-indicator-offset: utils.module-val(button, link-focus-indicator-offset, 2px),
 
   // Popover icon
   popover-icon-transition-duration: utils.module-val(button, popover-icon-transition-duration, animation.variable(duration-short3)),

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../animation';
+@use '../../../border';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../theme';
+@use '../../../utils';
+@use '../../button/tokens' as button;
+
+$tokens: (
+  // Base
+  display: utils.module-val(button-toggle, display, inline-flex),
+  min-width: utils.module-val(button-toggle, min-width, auto),
+  spacing: utils.module-val(button-toggle, spacing, spacing.variable(xsmall)),
+  padding-block: utils.module-val(button-toggle, padding-block, 2px),
+  padding-inline: utils.module-val(button-toggle, padding-inline, 8px),
+  icon-size: utils.module-val(button-toggle, icon-size, button.get(icon-size)),
+  
+  // Theme
+  color: utils.module-val(button-toggle, color, theme.variable(text-medium)),
+  background: utils.module-val(button-toggle, background, transparent),
+  hover-background: utils.module-ref(button-toggle, hover-background, background),
+  active-background: utils.module-ref(button-toggle, active-background, background),
+  cursor: utils.module-val(button-toggle, cursor, pointer),
+
+  // Border
+  border-width: utils.module-val(button-toggle, border-width, medium),
+  border-style: utils.module-val(button-toggle, border-style, none),
+  border-color: utils.module-val(button-toggle, border-color, theme.variable(outline-medium)),
+
+  // Shape
+  shape: utils.module-val(button-toggle, shape, shape.variable(small)),
+  shape-start-start: utils.module-ref(button-toggle, shape-start-start, shape),
+  shape-start-end: utils.module-ref(button-toggle, shape-start-end, shape),
+  shape-end-start: utils.module-ref(button-toggle, shape-end-start, shape),
+  shape-end-end: utils.module-ref(button-toggle, shape-end-end, shape),
+
+  // Selected
+  selected-background: utils.module-val(button-toggle, selected-background, theme.variable(tertiary-container)),
+  selected-color: utils.module-val(button-toggle, selected-color, theme.variable(on-tertiary-container)),
+  selected-disabled-background: utils.module-val(button-toggle, selected-disabled-background, theme.variable(surface-container)),
+
+  // Dense
+  dense-height: utils.module-val(button-toggle, dense-height, 24px),
+
+  // Disabled
+  disabled-opacity: utils.module-val(button-toggle, disabled-opacity, theme.emphasis(medium-low)),
+  disabled-cursor: utils.module-val(button-toggle, disabled-cursor, not-allowed),
+  disabled-color: utils.module-val(button-toggle, disabled-color, theme.variable(text-low)),
+  disabled-background: utils.module-val(button-toggle, disabled-background, transparent),
+
+  // Animation
+  transition-duration: utils.module-val(button-toggle, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(button-toggle, transition-timing, animation.variable(easing-standard)),
+
+  // Focus indicator
+  focus-indicator-color: utils.module-val(button-toggle, focus-indicator-color, theme.variable(primary)),
+  focus-indicator-offset: utils.module-val(button-toggle, focus-indicator-offset, 0px) // Requires unit
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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/inline-message/_tokens.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../../spacing';
+@use '../../border';
+@use '../../utils';
+
+$tokens: (
+  background: utils.module-val(inline-message, background, theme.variable(info-container-low)),
+  color: utils.module-val(inline-message, color, theme.variable(text-high)),
+  shape: utils.module-val(inline-message, shape, shape.variable(medium)),
+  padding: utils.module-val(inline-message, padding, spacing.variable(small)),
+  padding-inline: utils.module-ref(inline-message, padding-inline, padding),
+  padding-block: utils.module-ref(inline-message, padding-block, padding),
+  border-width: utils.module-val(inline-message, border-width, border.variable(thin)),
+  border-style: utils.module-val(inline-message, border-style, none),
+  border-color: utils.module-val(inline-message, border-color, theme.variable(info-container)),
+  gap: utils.module-val(inline-message, gap, spacing.variable(small)),
+  icon-gap: utils.module-ref(inline-message, icon-gap, gap),
+  content-gap: utils.module-ref(inline-message, content-gap, gap),
+  icon-color: utils.module-val(inline-message, icon-color, theme.variable(on-info-container-low))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -44,7 +44,7 @@ $tokens: (
   // 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(state-layer, state-layer-unchecked-color, color),
+  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),
 

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

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/core/styles/typography/index.scss

@@ -97,7 +97,7 @@
 @mixin anchor {
   a:not([forge-ignore]),
   .forge-typography--link {
-    text-decoration: underline;
+    text-decoration: var(--forge-typography-link-text-decoration, underline);
     color: theme.variable(primary);
     cursor: pointer;