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

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,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);

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

@@ -4,19 +4,18 @@
  * License: Apache-2.0
  */
 @use './animations';
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 
 //
 // Host
 //
 
 :host {
-  @include configuration;
+  @include tokens;
 }
 
 :host {
-  @include core.base;
+  @include base;
 }
 
 :host([hidden]) {
@@ -28,19 +27,19 @@
 //
 
 :host([active]) {
-  @include core.active;
+  @include active;
 }
 
 :host(:not([inward])) {
-  @include core.outward;
+  @include outward;
 }
 
 :host([inward]) {
-  @include core.inward;
+  @include inward;
 }
 
 :host([circular]) {
-  @include core.circular;
+  @include circular;
 }
 
 //

package/styles/focus-indicator/index.scss

@@ -4,6 +4,4 @@
  * License: Apache-2.0
  */
 @forward './animations';
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/forge.scss

@@ -11,7 +11,6 @@
 
 // Required global component styles
 @use './table/forge-table';
-@use './tooltip/forge-tooltip';
 @use './ripple/forge-ripple';
 @use './quantity-field/forge-quantity-field';
 

package/styles/icon-button/_core.scss

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

package/styles/icon-button/icon-button.scss

@@ -3,24 +3,25 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 @use '../core/styles/theme';
 @use '../state-layer';
 @use '../focus-indicator';
 @use '../circular-progress';
-@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]) {
@@ -32,19 +33,19 @@
 //
 
 .forge-icon-button {
-  @include configuration;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-icon-button {
-  @include core.base;
+  @include base;
   
   ::slotted(:is([slot=start],[slot=end])) {
-    @include core.slotted-start-end;
+    @include slotted-start-end;
   }
 }
 
 a {
-  @include core.anchor-base;
+  @include anchor-base;
 }
 
 //
@@ -93,25 +94,25 @@ forge-state-layer {
 
 :host([variant=outlined]) {
   .forge-icon-button {
-    @include core.outlined;
+    @include outlined;
   }
 }
 
 :host([variant=tonal]) {
   .forge-icon-button {
-    @include core.tonal;
+    @include tonal;
   }
 }
 
 :host(:is([variant=filled],[variant=raised])) {
   .forge-icon-button {
-    @include core.filled;
+    @include filled;
   }
 }
 
 :host([variant=raised]) {
   .forge-icon-button {
-    @include core.raised;
+    @include raised;
   }
 }
 
@@ -133,37 +134,37 @@ forge-state-layer {
 
 :host([toggle][on]:is(:not([variant]),[variant=icon])) {
   .forge-icon-button {
-    @include core.toggle-on-icon;
+    @include toggle-on-icon;
   }
 }
 
 :host([toggle][on][variant=outlined]) {
   .forge-icon-button {
-    @include core.toggle-on-outlined;
+    @include toggle-on-outlined;
   }
 }
 
 :host([toggle]:not([on])[variant=tonal]) {
   .forge-icon-button {
-    @include core.toggle-tonal;
+    @include toggle-tonal;
   }
 }
 
 :host([toggle][on][variant=tonal]) {
   .forge-icon-button {
-    @include core.toggle-on-tonal;
+    @include toggle-on-tonal;
   }
 }
 
 :host([toggle]:not([on]):is([variant=filled],[variant=raised])) {
   .forge-icon-button {
-    @include core.toggle-filled;
+    @include toggle-filled;
   }
 }
 
 :host([toggle][on]:is([variant=filled],[variant=raised])) {
   .forge-icon-button {
-    @include core.toggle-on-filled;
+    @include toggle-on-filled;
   }
 }
 
@@ -212,17 +213,17 @@ forge-state-layer {
 
 :host(:is([dense],[density=small])) {
   .forge-icon-button {
-    @include core.density-small;
+    @include density-small;
   }
 
   ::slotted(*) {
-    @include core.density-small-slotted;
+    @include density-small-slotted;
   }
 }
 
 :host([density=medium]) {
   .forge-icon-button {
-    @include core.density-medium;
+    @include density-medium;
   }
 }
 
@@ -241,16 +242,16 @@ forge-state-layer {
 //
 
 :host([disabled]) {
-  @include core.host-disabled;
+  @include host-disabled;
 
   .forge-icon-button {
-    @include core.disabled;
+    @include disabled;
   }
 }
 
 :host([disabled][variant=raised]) {
   .forge-icon-button {
-    @include core.raised-disabled;
+    @include raised-disabled;
   }
 }
 
@@ -277,7 +278,7 @@ forge-state-layer {
   :host([toggle][theme=#{$theme}][variant=outlined]) {
     .forge-icon-button {
       @include override(icon-color, theme.variable($theme), value);
-      @include override(outlined-toggle-on-background-color, theme.variable(#{$theme}-container-low), value);
+      @include override(outlined-toggle-on-background-color, theme.variable(#{$theme}-container), value);
       @include override(outlined-toggle-on-icon-color, theme.variable($theme), value);
     }
   }
@@ -295,7 +296,7 @@ forge-state-layer {
     // Toggle + tonal variant
     :host([toggle]:not([on])[theme=#{$theme}][variant=tonal]) {
       .forge-icon-button {
-        @include override(background-color, theme.variable(#{$theme}-container-low), value);
+        @include override(background-color, theme.variable(#{$theme}-container), value);
       }
     }
 
@@ -319,7 +320,7 @@ forge-state-layer {
     :host([toggle]:not([on])[theme=#{$theme}]:is([variant=filled],[variant=raised])) {
       .forge-icon-button {
         @include override(icon-color, theme.variable($theme), value);
-        @include override(background-color, theme.variable(#{$theme}-container-low), value);
+        @include override(background-color, theme.variable(#{$theme}-container), value);
       }
     }
 

package/styles/icon-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/label/label.scss

@@ -3,10 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {

package/styles/linear-progress/_core.scss

@@ -7,6 +7,8 @@
 @use '../theme';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin container {
   display: block;
   position: relative;

package/styles/linear-progress/index.scss

@@ -4,6 +4,4 @@
  * License: Apache-2.0
  */
 @forward './animations';
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;