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

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

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+@use '../utils';
+
+///
+/// Mixin for providing theme tokens to the module using external names.
+/// 
+/// Example:
+/// ```sass
+/// provide-theme(( color: red )); // => --forge-component-name-color: red;
+/// ```
+/// 
+/// @param {String} $module - The module name.
+/// @param {Map} $tokens - The tokens for this module.
+/// @param {Map} $theme - The theme tokens. 
+///
+@mixin provide-theme($module, $tokens, $theme) {
+  @include utils.provide($tokens, $theme, $module);
+}
+
+///
+/// Creates an internal token reference variable for the module.
+///
+/// This function requires that the token exists in the module.
+/// 
+/// Example:
+/// ```sass
+/// color: #{token(color)}; // => color: var(--_component-name-color);
+/// color: #{token(my-color, custom)}; // => color: var(--_component-name-my-color);
+/// ```
+/// 
+/// @param {String} $module - The module name. 
+/// @param {String} $tokens - The tokens for this module.
+/// @param {String} $token - The token name.
+/// @param {String} $type - The type of token this is. Valid values are `token` and `custom`. Using `custom` will not check if the token exists.
+///
+@function token($module, $tokens, $token, $type: token) {
+  @if ($type == 'token' and not map.has-key($tokens, $token)) {
+    @error 'Invalid token "#{$token}" for module "#{$module}"';
+  }
+  @return utils.module-var($module, $token);
+}
+
+///
+/// Declares an internal token reference variable for the module.
+/// 
+/// Example:
+/// ```sass
+/// #{declare(color)}: red; // => --_component-name-color: red;
+/// ```
+/// 
+/// @param {String} $module - The module name. 
+/// @param {String} $token - The token name.
+/// 
+@function declare($module, $token) {
+  @return utils.create-module-var($module, $token);
+}
+
+///
+/// Creates a token CSS custom property definition to point one token to another.
+/// 
+/// If `$new-token` is not a valid token then the provided value will be used verbatim.
+/// 
+/// Example:
+/// ```sass
+/// #{override(color, new-color)}; // => --_component-name-color: var(--_component-name-new-color);
+/// ```
+///
+/// @param {String} $module - The module name.
+/// @param {String} $tokens - The tokens for this module.
+/// @param {String} $token - The token name to override.
+/// @param {String} $token-or-value - The token name (if exists) or value to point to.
+/// @param {Boolean} $type - The type of token this is. Valid values are `token` and `value`.
+/// 
+@mixin override($module, $tokens, $token, $token-or-value, $type: token) {
+  @include utils.override($module, $tokens, $token, $token-or-value, $type);
+}
+
+///
+/// Generates CSS custom property declarations for all provided module-level tokens.
+///
+/// @param {String} $module - The module name.
+/// @param {String} $tokens - The tokens for this module.
+/// @param {List} $includes - An optional list of token names to include from `$tokens`
+/// @param {List} $excludes - An optional list of token names to exclude from `$tokens`
+/// 
+@mixin tokens($module, $tokens, $includes: null, $excludes: null) {
+  @if ($includes) {
+    // We are including only specific tokens
+    @each $token in $includes {
+      @if (not map.has-key($tokens, $token)) {
+        @error 'Invalid include token "#{$token}" for module "#{$module}"';
+      }
+      #{declare($module, $token)}: #{map.get($tokens, $token)};
+    }
+  } @else {
+    // We are including all tokens, but first we need to check if any excluded tokens were provided
+    @if ($excludes) {
+      @each $token in $excludes {
+        @if (not map.has-key($tokens, $token)) {
+          @error 'Invalid exclude token "#{$token}" for module "#{$module}"';
+        }
+        $tokens: map.remove($tokens, $token);
+      }
+    }
+
+    @each $token-name, $token-value in $tokens {
+      #{declare($module, $token-name)}: #{$token-value};
+    }
+  }
+}
+

package/styles/core/styles/tokens/app-bar/app-bar/_tokens.scss

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../utils';
+@use '../../../theme';
+@use '../../../elevation';
+@use '../../../animation';
+@use '../../../typography';
+@use '../../../spacing';
+
+$tokens: (
+  background: utils.module-val(app-bar, background, theme.variable(brand)),
+  foreground: utils.module-val(app-bar, foreground, theme.variable(on-brand)),
+
+  z-index: utils.module-val(app-bar, z-index, elevation.z-index-variable(header)),
+  elevation: utils.module-val(app-bar, elevation, elevation.value(4)),
+
+  height: utils.module-val(app-bar, height, 56px),
+  row-padding: utils.module-val(app-bar, row-padding, spacing.variable(xxsmall)),
+
+  logo-gap: utils.module-val(app-bar, logo-gap, spacing.variable(medium)),
+  logo-font-size: utils.module-val(app-bar, logo-font-size, typography.font-size-relative('2500')),
+
+  title-padding: utils.module-val(app-bar, title-padding, spacing.variable(xsmall)),
+
+  transition-duration: utils.module-val(app-bar, transition-duration, animation.variable(duration-short4)),
+  transition-timing: utils.module-val(app-bar, transition-timing, animation.variable(easing-standard)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,115 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../elevation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../theme';
+@use '../../typography';
+@use '../../utils';
+
+$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)),
+  padding: utils.module-val(button, padding, 8px),
+  display: utils.module-val(button, display, inline-flex),
+  justify: utils.module-val(button, justify, center),
+  shape: utils.module-val(button, shape, shape.variable(medium)),
+
+  // Base
+  height: utils.module-val(button, height, 36px),
+  min-width: utils.module-val(button, min-width, 64px),
+  spacing: utils.module-val(button, spacing, spacing.variable(xsmall)),
+  border-width: utils.module-val(button, border-width, medium),
+  border-style: utils.module-val(button, border-style, none),
+  border-color: utils.module-val(button, border-color, currentColor),
+  shape-start-start-radius: utils.module-ref(button, shape-start-start-radius, shape),
+  shape-start-end-radius: utils.module-ref(button, shape-start-end-radius, shape),
+  shape-end-start-radius: utils.module-ref(button, shape-end-start-radius, shape),
+  shape-end-end-radius: utils.module-ref(button, shape-end-end-radius, shape),
+  padding-block: utils.module-ref(button, padding-block, padding),
+  padding-inline: utils.module-ref(button, padding-inline, padding),
+  background: utils.module-val(button, background, transparent),
+  hover-background: utils.module-ref(button, hover-background, background),
+  active-background: utils.module-ref(button, active-background, background),
+  color: utils.module-ref(button, color, text-color),
+  icon-size: utils.module-val(button, icon-size, typography.font-size-relative('1125')),
+  shadow: utils.module-val(button, shadow, none),
+  hover-shadow: utils.module-val(button, hover-shadow, none),
+  active-shadow: utils.module-val(button, active-shadow, none),
+  cursor: utils.module-val(button, cursor, pointer),
+  transition-duration: utils.module-val(button, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(button, transition-timing, animation.variable(easing-standard)),
+
+  // Outlined
+  outlined-background: utils.module-ref(button, outlined-background, background),
+  outlined-color: utils.module-ref(button, outlined-color, primary-color),
+  outlined-border-width: utils.module-val(button, outlined-border-width, border.variable(thin)),
+  outlined-border-style: utils.module-val(button, outlined-border-style, solid),
+  outlined-border-color: utils.module-ref(button, outlined-border-color, primary-color),
+
+  // 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-disabled-color: utils.module-ref(button, tonal-disabled-color, disabled-text-color),
+
+  // Filled
+  filled-background: utils.module-ref(button, filled-background, primary-color),
+  filled-disabled-background: utils.module-ref(button, filled-disabled-background, disabled-color),
+  filled-color: utils.module-val(button, filled-color, theme.variable(on-primary)),
+  filled-disabled-color: utils.module-ref(button, filled-disabled-color, disabled-text-color),
+
+  // Raised
+  raised-shadow: utils.module-val(button, raised-shadow, elevation.value(2)),
+  raised-hover-shadow: utils.module-val(button, raised-hover-shadow, elevation.value(4)),
+  raised-active-shadow: utils.module-val(button, raised-active-shadow, elevation.value(8)),
+  raised-disabled-shadow: utils.module-val(button, raised-disabled-shadow, none),
+
+  // Link
+  link-color: utils.module-ref(button, link-color, primary-color),
+  link-text-decoration: utils.module-val(button, link-text-decoration, underline),
+  link-height: utils.module-val(button, link-height, auto),
+  link-padding: utils.module-val(button, link-padding, 0),
+  link-line-height: utils.module-val(button, link-line-height, normal),
+  link-width: utils.module-val(button, link-width, auto),
+  link-hover-text-decoration: utils.module-val(button, link-hover-text-decoration, none),
+  link-active-opacity: utils.module-val(button, link-active-opacity, theme.emphasis(high)),
+  link-transition-duration: utils.module-val(button, link-transition-duration, animation.variable(duration-short3)),
+  link-transition-timing: utils.module-val(button, link-transition-timing, animation.variable(easing-standard)),
+
+  // Disabled
+  disabled-cursor: utils.module-val(button, disabled-cursor, not-allowed),
+  disabled-text-color: utils.module-val(button, disabled-text-color, theme.variable(text-low)),
+  disabled-background: utils.module-val(button, disabled-background, transparent),
+  disabled-border-color: utils.module-ref(button, disabled-border-color, disabled-color),
+  disabled-shadow: utils.module-val(button, disabled-shadow, none),
+
+  // Dense
+  dense-height: utils.module-val(button, dense-height, 24px),
+
+  // Pill
+  pill-shape: utils.module-val(button, pill-shape, shape.variable(full)),
+  pill-padding-inline: utils.module-val(button, pill-padding-inline, spacing.variable(small)),
+
+  // 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),
+
+  // Popover icon
+  popover-icon-transition-duration: utils.module-val(button, popover-icon-transition-duration, animation.variable(duration-short3)),
+  popover-icon-transition-timing: utils.module-val(button, popover-icon-transition-timing, animation.variable(easing-standard)),
+  popover-icon-open-rotation: utils.module-val(button, popover-icon-open-rotation, 180deg)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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,26 @@
  */
 @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, transparent),
+  track-fill-color: utils.module-val(circular-progress, track-fill-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/floating-action-button/_tokens.scss

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../elevation';
+
+$tokens: (
+  // General
+  display: utils.module-val(fab, display, inline-flex),
+  gap: utils.module-val(fab, spacing, 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),
+  padding: utils.module-val(fab, padding, spacing.variable(xsmall)),
+
+  // Elevation - raised
+  shadow: utils.module-val(fab, shadow, elevation.value(3)),
+  hover-shadow: utils.module-val(fab, hover-shadow, elevation.value(4)),
+  active-shadow: utils.module-val(fab, active-shadow, elevation.value(3)),
+
+  // Elevation - lowered
+  lowered-shadow: utils.module-val(fab, lowered-shadow, elevation.value(1)),
+  lowered-hover-shadow: utils.module-val(fab, lowered-hover-shadow, elevation.value(2)),
+  lowered-active-shadow: utils.module-val(fab, lowered-active-shadow, elevation.value(1)),
+
+  // Animation
+  transition-duration: utils.module-val(fab, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(fab, transition-timing, animation.variable(easing-standard)),
+
+  // Shape
+  shape: utils.module-val(fab, shape, shape.variable(full)),
+  shape-start-start: utils.module-ref(fab, shape-start-start, shape),
+  shape-start-end: utils.module-ref(fab, shape-start-end, shape),
+  shape-end-start: utils.module-ref(fab, shape-end-start, shape),
+  shape-end-end: utils.module-ref(fab, shape-end-end, shape),
+
+  // Extended
+  extended-padding: utils.module-val(fab, extended-padding, spacing.variable(medium-large)),
+  extended-min-width: utils.module-val(fab, extended-min-width, 96px),
+
+  // Density - small
+  density-small-size: utils.module-val(fab, density-small-size, 40px),
+
+  // Density - medium (default)
+  density-medium-size: utils.module-ref(fab, density-medium-size, size),
+
+  // Density - large
+  density-large-size: utils.module-val(fab, density-large-size, 96px),
+
+  // Disabled
+  disabled-cursor: utils.module-val(fab, disabled-cursor, not-allowed),
+  disabled-background: utils.module-val(fab, disabled-background, theme.variable(surface-container)),
+  disabled-color: utils.module-val(fab, disabled-color, theme.variable(on-surface-container)),
+  disabled-opacity: utils.module-val(fab, disabled-opacity, theme.emphasis(medium-low)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $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, 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')),
+  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/profile-card/_tokens.scss

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../../utils';
+
+$tokens: (
+  min-width: utils.module-val(profile-card, min-width, 360px),
+  shape: utils.module-val(profile-card, border-radius, shape.variable(medium)),
+  avatar-size: utils.module-val(profile-card, avatar-size, 56px)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -11,6 +11,7 @@ $extra-small: math.div($base, 4) !default; // 1px
 $small: math.div($base, 2) !default;       // 2px
 $medium: $base !default;                   // 4px
 $large: $base * 2 !default;                // 8px
+$extra-large: $base * 4 !default;          // 16px
 
 $tokens: (
   extra-small: $extra-small,
@@ -33,6 +34,11 @@ $tokens: (
   large-block-end: 0 0 $large $large,
   large-inline-start: $large 0 0 $large,
   large-inline-end: 0 $large $large 0,
+  extra-large: $extra-large,
+  extra-large-block-start: $extra-large $extra-large 0 0,
+  extra-large-block-end: 0 0 $extra-large $extra-large,
+  extra-large-inline-start: $extra-large 0 0 $extra-large,
+  extra-large-inline-end: 0 $extra-large $extra-large 0,
   full: 9999px, // Pill shaped
   round: 50%
 ) !default;