@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/styles/core/styles/tokens/list/list-item/_tokens.scss

@@ -14,7 +14,7 @@ $tokens: (
   // Base
   background-color: utils.module-val(list-item, background-color, transparent),
   shape: utils.module-val(list-item, shape, 0),
-  padding: utils.module-val(list-item, padding, spacing.variable(xsmall) spacing.variable(medium)),
+  padding: utils.module-val(list-item, padding, 0 spacing.variable(medium)),
   margin: utils.module-val(list-item, margin, 0),
   height: utils.module-val(list-item, height, 48px),
   dense-height: utils.module-val(list-item, dense-height, 32px),
@@ -30,13 +30,13 @@ $tokens: (
 
   // Selected
   selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)),
-  selected-opacity: utils.module-val(list-item, selected-opacity, 0.08),
+  selected-opacity: utils.module-val(list-item, selected-opacity, theme.emphasis(lowest)),
   selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color),
   selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color),
   selected-supporting-text-color: utils.module-val(list-item, selected-supporting-text-color, theme.variable(text-medium)),
 
   // Disabled
-  disabled-opacity: utils.module-val(list-item, disabled-opacity, 0.38),
+  disabled-opacity: utils.module-val(list-item, disabled-opacity, theme.emphasis(medium-low)),
   disabled-cursor: utils.module-val(list-item, disabled-cursor, not-allowed),
 
   // Line variants
@@ -50,7 +50,7 @@ $tokens: (
   dense-three-line-height: utils.module-val(list-item, dense-three-line-height, utils.module-ref(list-item, dense-height, 72px, value)),
   dense-font-size: utils.module-val(list-item, dense-font-size, 0.875rem),
   dense-indent: utils.module-val(list-item, dense-indent, spacing.variable(xxlarge)),
-  dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(medium)),
+  dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(xsmall)),
 
   // Leading
   leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
@@ -63,6 +63,9 @@ $tokens: (
   avatar-color: utils.module-val(list-item, avatar-color, theme.variable(on-primary)),
   avatar-shape: utils.module-val(list-item, avatar-shape, shape.variable(round)),
   avatar-size: utils.module-val(list-item, avatar-size, 40px),
+
+  // Wrap
+  wrap-padding: utils.module-val(list-item, wrap-padding, spacing.variable(xsmall) spacing.variable(medium)),
 ) !default;
 
 @function get($key) {

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

@@ -9,16 +9,24 @@
 @use '../../theme';
 @use '../../shape';
 @use '../../border';
+@use '../../spacing';
 @use '../../animation';
 
 $tokens: (
   // Base
+  width: utils.module-val(popover, width, auto),
+  height: utils.module-val(popover, height, auto),
+  min-width: utils.module-val(popover, min-width, none),
+  max-width: utils.module-val(popover, max-width, none),
+  min-height: utils.module-val(popover, min-height, none),
+  max-height: utils.module-val(popover, max-height, none),
   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)),
+  overflow: utils.module-val(popover, overflow, initial),
 
   // Arrow
   arrow-size: utils.module-val(popover, arrow-size, 12px),
@@ -32,23 +40,37 @@ $tokens: (
   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)),
+  animation-enter-duration: utils.module-val(popover, animation-enter-duration, animation.variable(duration-short3)),
+  animation-enter-timing: utils.module-val(popover, animation-enter-timing, animation.variable(easing-decelerate)),
+  animation-exit-duration: utils.module-val(popover, animation-exit-duration, animation.variable(duration-short2)),
+  animation-exit-timing: utils.module-val(popover, animation-exit-timing, animation.variable(easing-accelerate)),
 
-  zoom-duration: utils.module-val(popover, zoom-duration, animation.variable(duration-short3)),
-  zoom-timing: utils.module-ref(popover, zoom-timing, animating-timing),
+  zoom-enter-duration: utils.module-ref(popover, zoom-enter-duration, animation-enter-duration),
+  zoom-enter-timing: utils.module-ref(popover, zoom-enter-timing, animation-enter-timing),
+  zoom-exit-duration: utils.module-ref(popover, zoom-exit-duration, animation-exit-duration),
+  zoom-exit-timing: utils.module-ref(popover, zoom-exit-timing, animation-exit-timing),
 
-  slide-duration: utils.module-val(popover, slide-duration, animation.variable(duration-short3)),
-  slide-timing: utils.module-ref(popover, slide-timing, animating-timing),
+  slide-enter-duration: utils.module-ref(popover, slide-enter-duration, animation-enter-duration),
+  slide-enter-timing: utils.module-ref(popover, slide-enter-timing, animation-enter-timing),
+  slide-exit-duration: utils.module-ref(popover, slide-exit-duration, animation-exit-duration),
+  slide-exit-timing: utils.module-ref(popover, slide-exit-timing, animation-exit-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),
+  fade-enter-duration: utils.module-val(popover, fade-enter-duration, animation.variable(duration-medium2)),
+  fade-enter-timing: utils.module-ref(popover, fade-enter-timing, animation-enter-timing),
+  fade-exit-duration: utils.module-ref(popover, fade-exit-duration, animation-exit-duration),
+  fade-exit-timing: utils.module-ref(popover, fade-exit-timing, animation-exit-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),
+
+  // Preset - Dropdown
+  preset-dropdown-max-height: utils.module-val(popover, preset-dropdown-max-height, 256px),
+  preset-dropdown-overflow: utils.module-val(popover, preset-dropdown-overflow, auto visible),
+  preset-dropdown-padding-block: utils.module-val(popover, preset-dropdown-padding-block, spacing.variable(xsmall)),
 ) !default;
 
 @function get($key) {

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

@@ -38,7 +38,7 @@ $tokens: (
 
   // Label
   gap: utils.module-val(radio, gap, 0),
-  justify: utils.module-val(radio, justify, space-between),
+  justify: utils.module-val(radio, justify, start),
   direction: utils.module-val(radio, direction, initial),
 
   // State layer

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+
+$tokens: (
+  height: utils.module-val(scaffold, height, 100%),
+  width: utils.module-val(scaffold, width, 100%),
+  overflow: utils.module-val(scaffold, overflow, hidden),
+  body-position: utils.module-val(scaffold, body-position, relative),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../typography';
+
+$tokens: (
+  placeholder-color: utils.module-val(select, placeholder-color, theme.variable(text-low)),
+  dense-font-size: utils.module-val(select, dense-font-size, typography.font-size-relative('0875')),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/stepper/step/_tokens.scss

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../shape';
+@use '../../../theme';
+@use '../../../typography';
+@use '../../../utils';
+@use '../../../animation';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(step, primary-color, theme.variable(primary)),
+  text-color: utils.module-val(step, text-color, theme.variable(on-primary)),
+
+  // Base
+  border-radius: utils.module-val(step, border-radius, shape.variable(extra-large)),
+
+  // Vertical
+  border-radius-vertical: utils.module-val(step, border-radius-vertical, shape.variable(medium)),
+
+  // Disabled
+  disabled-text-color: utils.module-val(step, disabled-text-color, theme.variable(text-low)),
+  disabled-color: utils.module-val(step, disabled-color, theme.variable(surface-container-minimum)),
+
+  // Icon
+  icon-fill: utils.module-val(step, icon-fill, unset),
+  icon-fill-active: utils.module-ref(step, icon-fill-active, primary-color),
+  icon-text-color: utils.module-val(step, icon-text-color, theme.variable(primary)),
+  icon-text-color-active: utils.module-val(step, icon-text-color-active, theme.variable(on-primary)),
+  icon-content-size: utils.module-val(step, icon-content-size, 24px),
+  icon-size: utils.module-val(step, icon-size, typography.font-size-relative('0875')),
+  icon-transition-duration: utils.module-val(step, icon-transition-duration, animation.variable(duration-medium4)),
+  icon-transition-easing: utils.module-val(step, icon-transition-easing, animation.variable(easing-standard)),
+  
+  // Line
+  line-color: utils.module-val(step, line-color, theme.variable(outline)),
+  line-min-width: utils.module-val(step, line-min-width, 10px),
+  line-min-width-clustered: utils.module-val(step, line-min-width-clustered, 25px),
+
+  // Label
+  label-color: utils.module-val(step, label-color, theme.variable(text-high)),
+  sub-label-color: utils.module-val(step, sub-label-color, theme.variable(text-medium)),
+
+  // Error
+  error-color: utils.module-val(step, error-color, theme.variable(error)),
+  error-text-color: utils.module-val(step, error-text-color, theme.variable(on-error)),
+
+  // Expansion
+  expansion-panel-border-left-width: utils.module-val(step, expansion-panel-border-left-width, 1px),
+  expansion-panel-margin-bottom: utils.module-val(step, expansion-panel-margin-bottom, 4px),
+  expansion-panel-margin-left: utils.module-val(step, expansion-panel-margin-left, 60px),
+  expansion-panel-margin-top: utils.module-val(step, expansion-panel-margin-top, 4px),
+  expansion-panel-icon-color: utils.module-val(step, expansion-panel-icon-color, theme.variable(text-medium)),
+
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -58,7 +58,7 @@ $tokens: (
 
   // Label
   gap: utils.module-val(switch, gap, 0),
-  justify: utils.module-val(switch, justify, space-between),
+  justify: utils.module-val(switch, justify, start),
   direction: utils.module-val(switch, direction, initial),
 
   // State layer

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../spacing';
+@use '../../shape';
+@use '../../elevation';
+@use '../../animation';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(toast, background, theme.variable(surface-inverse)),
+  color: utils.module-val(toast, color, theme.variable(on-surface-inverse)),
+  offset: utils.module-val(toast, offset, spacing.variable(medium)),
+  shape: utils.module-val(toast, shape, shape.variable(medium)),
+  elevation: utils.module-val(toast, elevation, elevation.value(6)),
+  action-color: utils.module-val(toast, action-color, theme.variable(secondary)),
+  min-width: utils.module-val(toast, min-width, 344px),
+  max-width: utils.module-val(toast, max-width, 672px),
+  min-height: utils.module-val(toast, min-height, 48px),
+  inline-padding: utils.module-val(toast, inline-padding, spacing.variable(medium)),
+  spacing: utils.module-val(toast, spacing, spacing.variable(xsmall)),
+  message-padding: utils.module-val(toast, message-padding, spacing.variable(xsmall)),
+
+  // Animation
+  enter-duration: utils.module-val(toast, enter-duration, animation.variable(duration-medium1)),
+  enter-timing: utils.module-val(toast, enter-timing, animation.variable(easing-decelerate)),
+  exit-duration: utils.module-val(toast, exit-duration, animation.variable(duration-short4)),
+  exit-timing: utils.module-val(toast, exit-timing, animation.variable(easing-emphasized-accelerate)),
+  slide-origin: utils.module-val(toast, slide-origin, 100%)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/dialog/_animations.scss

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as * ;
+
+//
+// Zoom (default)
+//
+
+@keyframes zoom-in {
+  from {
+    opacity: #{token(zoom-opacity)};
+    scale: #{token(zoom-scale)};
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: #{token(zoom-opacity)};
+    scale: #{token(zoom-scale)};
+  }
+}
+
+//
+// Fade
+//
+
+@keyframes fade-in {
+  from {
+    opacity: #{token(fade-opacity)};
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: #{token(fade-opacity)};
+  }
+}
+
+//
+// Slide
+//
+
+@keyframes slide-in {
+  from {
+    opacity: #{token(slide-opacity)};
+    translate: #{token(slide-translate)};
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  to {
+    opacity: #{token(slide-opacity)};
+    translate: #{token(slide-translate)};
+  }
+}

package/styles/dialog/_core.scss

@@ -0,0 +1,310 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+//
+// Host
+//
+
+@mixin host {
+  display: none;
+}
+
+@mixin host-open {
+  display: initial;
+}
+
+//
+// Host
+//
+
+@mixin dialog-base {
+  position: fixed;
+  inset: 0;
+  z-index: #{token(z-index)};
+
+  background-color: transparent;
+  color: inherit;
+  
+  border: none;
+
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+}
+
+@mixin container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+}
+
+@mixin surface {
+  position: absolute;
+  inset: 0;
+  
+  background: #{token(background)};
+  box-shadow: #{token(elevation)};
+  z-index: #{token(z-index)};
+  overflow: hidden;
+  
+  border-radius: #{token(shape)};
+  
+  margin-block-start: #{token(block-start-spacing)};
+  margin-block-end: #{token(block-end-spacing)};
+  margin-inline-start: #{token(inline-start-spacing)};
+  margin-inline-end: #{token(inline-end-spacing)};
+  padding: #{token(padding)};
+  width: #{token(width)};
+  height: #{token(height)};
+  min-width: #{token(min-width)};
+  max-width: #{token(max-width)};
+  min-height: #{token(min-height)};
+  max-height: #{token(max-height)};
+  box-sizing: border-box;
+}
+
+//
+// Non-modal
+//
+
+@mixin nonmodal-dialog-base {
+  pointer-events: none;
+}
+
+@mixin nonmodal-surface {
+  @include override(elevation, nonmodal-elevation);
+
+  pointer-events: all;
+}
+
+//
+// Fullscreen
+//
+
+@mixin fullscreen-dialog-base {
+  @include override(enter-animation-duration, fullscreen-enter-animation-duration);
+  @include override(exit-animation-duration, fullscreen-exit-animation-duration);
+}
+
+@mixin fullscreen-surface {
+  height: 100%;
+  width: 100%;
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+//
+// Moveable
+//
+
+@mixin surface-moveable {
+  user-select: none;
+
+  transition-property: opacity;
+  transition-duration: #{token(move-transition-duration)};
+  transition-timing-function: #{token(move-transition-easing)};
+}
+
+@mixin surface-moved {
+  margin: 0;
+}
+
+@mixin surface-moving {
+  opacity: #{token(moving-opacity)};
+}
+
+@mixin move-handle-container {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+@mixin move-handle {
+  fill: #{token(move-handle-color)};
+
+  height: #{token(move-handle-size)};
+  width: #{token(move-handle-size)};
+  margin: #{token(move-handle-spacing)};
+
+  touch-action: none;
+
+  &:hover {
+    cursor: #{token(move-handle-hover-cursor)};
+  }
+
+  &:active {
+    cursor: #{token(move-handle-active-cursor)};
+  }
+}
+
+//
+// Animation
+//
+
+@mixin enter {
+  animation-duration: #{token(enter-animation-duration)};
+  animation-timing-function: #{token(enter-animation-easing)};
+}
+
+@mixin exit {
+  animation-duration: #{token(exit-animation-duration)};
+  animation-timing-function: #{token(exit-animation-easing)};
+}
+
+//
+// Placement
+//
+
+@mixin placement($placement) {
+  @if $placement == top {
+    @include placement-top;
+  } @else if $placement == top-right {
+    @include placement-top-right;
+  } @else if $placement == top-left {
+    @include placement-top-left;
+  } @else if $placement == bottom {
+    @include placement-bottom;
+  } @else if $placement == bottom-right {
+    @include placement-bottom-right;
+  } @else if $placement == bottom-left {
+    @include placement-bottom-left;
+  } @else if $placement == left {
+    @include placement-left;
+  } @else if $placement == right {
+    @include placement-right;
+  } @else if $placement == custom {
+    @include placement-custom;
+  }
+}
+
+@mixin placement-custom {
+  margin: 0;
+  top: #{token(position-x)};
+  left: #{token(position-y)};
+}
+
+@mixin placement-top {
+  @include override(block-start-spacing, 0, value);
+
+  top: 0;
+  bottom: auto;
+}
+
+@mixin placement-top-right {
+  @include override(spacing, 0, value);
+
+  top: 0;
+  left: auto;
+  right: 0;
+  bottom: auto;
+}
+
+@mixin placement-top-left {
+  @include override(spacing, 0, value);
+  
+  top: 0;
+  left: 0;
+  right: auto;
+  bottom: auto;
+}
+
+@mixin placement-bottom {
+  @include override(block-end-spacing, 0, value);
+
+  top: auto;
+  bottom: 0;
+}
+
+@mixin placement-bottom-right {
+  @include override(spacing, 0, value);
+
+  top: auto;
+  left: auto;
+  right: 0;
+  bottom: 0;
+}
+
+@mixin placement-bottom-left {
+  @include override(spacing, 0, value);
+
+  top: auto;
+  left: 0;
+  right: auto;
+  bottom: 0;
+}
+
+//
+// Preset
+//
+
+@mixin preset-sheet-dialog-base {
+  @include override(enter-animation-duration, preset-sheet-enter-animation-duration);
+  @include override(exit-animation-duration, preset-sheet-exit-animation-duration);
+}
+
+@mixin preset-sheet-surface-base {
+  @include override(max-width, none, value);
+  @include override(max-height, none, value);
+
+  inset: auto;
+}
+
+@mixin preset-left-sheet-surface {
+  left: 0;
+  bottom: 0;
+  top: 0;
+
+  height: 100%;
+
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@mixin preset-right-sheet-surface {
+  right: 0;
+  bottom: 0;
+  top: 0;
+
+  height: 100%;
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@mixin preset-top-sheet-surface {
+  top: 0;
+  left: 0;
+  right: 0;
+
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+@mixin preset-bottom-sheet-surface {
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

package/styles/dialog/_token-utils.scss

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