@tylertech/forge 3.0.0-next.22 → 3.0.0-next.24

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

@@ -4,46 +4,92 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../utils';
-@use './token-utils';
-@use './tokens.surface' as surface;
 @use '../color-palette';
 
-///
-/// Computes the status theme colors.
-/// 
-/// @param {Map} $colors - The status colors map.
-/// @param {Map} $surface-theme - The base surface theme
-/// @return {Map} - The computed status theme
-///
-@function get-status-theme($colors, $surface-theme) {
-  $surface: map.get($surface-theme, surface);
-
-  $success-theme: token-utils.get-color-theme('success', map.get($colors, success), $surface);
-  $error-theme: token-utils.get-color-theme('error', map.get($colors, error), $surface);
-  $warning-theme: token-utils.get-color-theme('warning', map.get($colors, warning), $surface);
-  $info-theme: token-utils.get-color-theme('info', map.get($colors, info), $surface);
-
-  @return utils.flatten(
-    $success-theme,
-    $error-theme,
-    $warning-theme,
-    $info-theme
-  );
-}
-
 // Light
-$tokens: get-status-theme((
+$tokens: (
   success: color-palette.$green-800,
+  success-container-minimum: #f7faf7,
+  success-container-low: #e6efe6,
+  success-container: #cde0ce,
+  success-container-high: #b0ceb1,
+  on-success: color-palette.$white,
+  on-success-container-minimum: #19441b,
+  on-success-container-low: #19441b,
+  on-success-container: #19441b,
+  on-success-container-high: color-palette.$black,
   error: color-palette.$crimson-900,
+  error-container-minimum: #fcf5f6,
+  error-container-low: #f6e0e4,
+  error-container: #ecc2c9,
+  error-container-high: #e19eaa,
+  on-error: color-palette.$white,
+  on-error-container-minimum: #5f0011,
+  on-error-container-low: #5f0011,
+  on-error-container: #5f0011,
+  on-error-container-high: color-palette.$black,
   warning: color-palette.$burnt-orange-800,
-  info: color-palette.$blue-800
-), surface.$tokens);
+  warning-container-minimum: #fdf8f5,
+  warning-container-low: #f9e9e0,
+  warning-container: #f4d3c2,
+  warning-container-high: #eeba9e,
+  on-warning: color-palette.$white,
+  on-warning-container-minimum: #712700,
+  on-warning-container-low: #712700,
+  on-warning-container: #712700,
+  on-warning-container-high: color-palette.$black,
+  info: color-palette.$blue-800,
+  info-container-minimum: #f6f9fc,
+  info-container-low: #e3edf7,
+  info-container: #c7daf0,
+  info-container-high: #a6c4e7,
+  on-info: color-palette.$white,
+  on-info-container-minimum: #0b3768,
+  on-info-container-low: #0b3768,
+  on-info-container: #0b3768,
+  on-info-container-high: color-palette.$black,
+);
 
 // Dark
-$tokens-dark: get-status-theme((
+$tokens-dark: (
   success: color-palette.$dollar-bill-600,
-  error: color-palette.$ruddy-pink-200,
+  success-container-minimum: #30312e,
+  success-container-low: #373c32,
+  success-container: #424c38,
+  success-container-high: #4e5f40,
+  on-success: color-palette.$black,
+  on-success-container-minimum: #bed5a9,
+  on-success-container-low: #bed5a9,
+  on-success-container: #bed5a9,
+  on-success-container-high: color-palette.$white,
+  error: color-palette.$ruddy-pink-500,
+  error-container-minimum: #342f30,
+  error-container-low: #433639,
+  error-container: #5a4145,
+  error-container-high: #754d54,
+  on-error: color-palette.$black,
+  on-error-container-minimum: #f5bcc6,
+  on-error-container-low: #f5bcc6,
+  on-error-container: #f5bcc6,
+  on-error-container-high: color-palette.$white,
   warning: color-palette.$apricot-200,
+  warning-container-minimum: #34312f,
+  warning-container-low: #443c36,
+  warning-container: #5d4c3f,
+  warning-container-high: #7a5f4a,
+  on-warning: color-palette.$black,
+  on-warning-container-minimum: #fbd5b8,
+  on-warning-container-low: #fbd5b8,
+  on-warning-container: #fbd5b8,
+  on-warning-container-high: color-palette.$white,
   info: color-palette.$blue-800,
-), surface.$tokens-dark);
+  info-container-minimum: #2b2e32,
+  info-container-low: #29333e,
+  info-container: #263a50,
+  info-container-high: #234264,
+  on-info: color-palette.$white,
+  on-info-container-minimum: #81acdd,
+  on-info-container-low: #81acdd,
+  on-info-container: #81acdd,
+  on-info-container-high: color-palette.$white,
+);

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

@@ -4,65 +4,47 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme/utils' as theme-utils;
-@use '../../theme/color-utils';
 @use '../../elevation';
-@use './color-emphasis';
 @use '../color-palette';
 
-///
-/// Computes the surface theme colors.
-/// 
-/// @param {Map} $theme - The surface theme map.
-/// @return {Map} - The computed surface theme map
-/// 
-@function get-surface-theme($theme) {
-  $surface: map.get($theme, surface);
-  $on-surface: theme-utils.contrast($surface);
-  $surface-tone: color-utils.tone($surface);
-  $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)));
-
-  @return (
-    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,
-    surface-dim: map.get($theme, surface-dim),
-    surface-bright: map.get($theme, surface-bright),
-    surface-bright-shadow: map.get($theme, surface-bright-shadow),
-    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)
-  );
-}
-
 // Light
-$tokens: get-surface-theme((
+$tokens: (
   surface: color-palette.$neutral-50,
+  surface-inverse: #333333,
+  surface-container: color-palette.$grey-300,
+  surface-container-minimum: color-palette.$grey-100,
+  surface-container-low: #ebebeb,
+  surface-container-medium: #c2c2c2,
+  surface-container-high: color-palette.$grey-500,
+  surface-dim: color-palette.$grey-50,
   surface-bright: color-palette.$neutral-50,
   surface-bright-shadow: elevation.value(2),
-  surface-dim: color-palette.$grey-50
-));
+  on-surface: color-palette.$black,
+  on-surface-inverse: color-palette.$white,
+  on-surface-container: color-palette.$black,
+  on-surface-container-minimum: color-palette.$black,
+  on-surface-container-low: color-palette.$black,
+  on-surface-container-medium: color-palette.$black,
+  on-surface-container-high: color-palette.$black
+);
 
 // Dark
-$surface-dark: color-palette.$neutral-900;
-$on-surface-dark: theme-utils.contrast($surface-dark);
-$tokens-dark: get-surface-theme((
+$tokens-dark: (
   surface: color-palette.$neutral-900,
-  surface-bright: theme-utils.hexify($on-surface-dark, $surface-dark, color-emphasis.value(minimum)),
+  surface-inverse: #d5d5d5,
+  surface-container: #454545,
+  surface-container-minimum: #343434,
+  surface-container-low: #3d3d3d,
+  surface-container-medium: #7c7c7c,
+  surface-container-high: color-palette.$grey-500,
+  surface-dim: color-palette.$grey-900,
+  surface-bright: #343434,
   surface-bright-shadow: elevation.value(16),
-  surface-dim: color-palette.$grey-900
-));
+  on-surface: color-palette.$white,
+  on-surface-inverse: color-palette.$black,
+  on-surface-container: color-palette.$white,
+  on-surface-container-minimum: color-palette.$white,
+  on-surface-container-low: color-palette.$white,
+  on-surface-container-medium: color-palette.$white,
+  on-surface-container-high: color-palette.$black
+);

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

@@ -4,35 +4,29 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme/utils' as theme-utils;
 @use './color-emphasis';
 @use './tokens.surface' as surface;
 
-///
-/// Computes the text theme colors.
-/// 
-/// @param {Color} $surface-theme - The base surface theme
-/// @return {Map} - The computed text theme
-/// 
-@function get-text-theme($surface-theme) {
-  $surface: map.get($surface-theme, surface);
-  $text: theme-utils.contrast($surface);
-  $text-inverse: theme-utils.contrast($text);
-
-  @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-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(lower)),
-    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lower)),
-  );
-}
-
 // Light
-$tokens: get-text-theme(surface.$tokens);
+$tokens: (
+  text-high: rgba(#000, color-emphasis.value(highest)),
+  text-high-inverse: rgba(#fff, color-emphasis.value(highest)),
+  text-medium: rgba(#000, color-emphasis.value(medium-high)),
+  text-medium-inverse: rgba(#fff, color-emphasis.value(medium-high)),
+  text-low: rgba(#000, color-emphasis.value(medium-low)),
+  text-low-inverse: rgba(#fff, color-emphasis.value(medium-low)),
+  text-lowest: rgba(#000, color-emphasis.value(lower)),
+  text-lowest-inverse: rgba(#fff, color-emphasis.value(lower)),
+);
 
 // Dark
-$tokens-dark: get-text-theme(surface.$tokens-dark);
+$tokens-dark: (
+  text-high: rgba(#fff, color-emphasis.value(highest)),
+  text-high-inverse: rgba(#000, color-emphasis.value(highest)),
+  text-medium: rgba(#fff, color-emphasis.value(medium-high)),
+  text-medium-inverse: rgba(#000, color-emphasis.value(medium-high)),
+  text-low: rgba(#fff, color-emphasis.value(medium-low)),
+  text-low-inverse: rgba(#000, color-emphasis.value(medium-low)),
+  text-lowest: rgba(#fff, color-emphasis.value(lower)),
+  text-lowest-inverse: rgba(#000, color-emphasis.value(lower)),
+);

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

@@ -4,30 +4,20 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../../theme/utils' as theme-utils;
-@use './color-emphasis';
-@use './tokens.surface' as surface;
-
-///
-/// Computes the utilities theme colors.
-/// 
-/// @param {Color} $surface-theme - The base surface theme
-/// @return {Map} - The computed utilities theme 
-///
-@function get-utilities-theme($surface-theme) {
-  $surface: map.get($surface-theme, surface);
-  $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))
-  );
-}
+@use '../color-palette';
 
 // Light
-$tokens: get-utilities-theme(surface.$tokens);
+$tokens: (
+  outline-high: color-palette.$grey-900,
+  outline-medium: color-palette.$grey-600,
+  outline-low: color-palette.$grey-500,
+  outline: color-palette.$grey-300
+);
 
 // Dark
-$tokens-dark: get-utilities-theme(surface.$tokens-dark);
+$tokens-dark: (
+  outline-high: #e4e4e4,
+  outline-medium: color-palette.$grey-500,
+  outline-low: color-palette.$grey-600,
+  outline: color-palette.$grey-800
+);

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

@@ -20,7 +20,7 @@ $tokens: (
   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)),
+  elevation: utils.module-val(tooltip, elevation, theme.variable(surface-bright-shadow)),
   content-align: utils.module-val(tooltip, content-align, center),
 
   // Border

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

@@ -0,0 +1,114 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../icon-button/core' as *;
+@use '../../state-layer';
+@use '../../focus-indicator';
+@use '../../icon';
+@use '../../core/styles/theme';
+
+//
+// Host
+//
+
+:host {
+  @include tokens;
+}
+
+:host {
+  @include host;
+
+  border-start-start-radius: #{token(shape-start-start)};
+  border-start-end-radius: #{token(shape-start-end)};
+  border-end-start-radius: #{token(shape-end-start)};
+  border-end-end-radius: #{token(shape-end-end)};
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Slotted
+//
+
+::slotted(:is(button,a)) {
+  @include base;
+
+  font-size: #{token(icon-size)};
+  height: #{token(size)};
+  width: #{token(size)};
+}
+
+::slotted(a) {
+  text-decoration: none;
+  color: #{token(icon-color)} !important;
+}
+
+//
+// State layer
+//
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(icon-color)}
+  ));
+}
+
+//
+// Focus indicator
+//
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    outward-offset: 0px, // Requires unit
+    color: #{token(focus-indicator-color)},
+    shape-start-start: #{token(shape-start-start)},
+    shape-start-end: #{token(shape-start-end)},
+    shape-end-start: #{token(shape-end-start)},
+    shape-end-end: #{token(shape-end-end)}
+  ));
+}
+
+//
+// Dense
+//
+
+:host(:is([dense],[density=large]):not(:is([density=medium],[density-level]))) {
+  @include density-small;
+
+  @include icon.provide-theme((
+    font-size: #{token(icon-size)}
+  ));
+}
+
+//
+// Density level
+//
+
+:host([dense]:not([density=large]):not([density=small]):is([density=medium],[density-level])) {
+  @include density-medium;
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include host-disabled;
+
+  ::slotted(button[disabled]) {
+    @include disabled;
+  }
+}
+
+//
+// Toggle
+//
+
+:host([toggle]:is([on],[is-on]):not([is-on=false])) {
+  @include toggle-on-icon;
+  @include override(background-color, theme.variable(primary-container-low), value);
+}

package/styles/dialog/_core.scss

@@ -16,7 +16,7 @@
 }
 
 @mixin host-open {
-  display: initial;
+  display: contents;
 }
 
 //
@@ -267,6 +267,8 @@
   @include override(max-height, none, value);
 
   inset: auto;
+
+  display: inline-flex;
 }
 
 @mixin preset-left-sheet-surface {

package/styles/dialog/dialog.scss

@@ -83,7 +83,7 @@ $can-animate: '[visible]:not([animation-type=none])';
     }
   }
 
-  :host([moveable]:not([fullscreen]):not([preset])) {
+  :host([moveable]:not([fullscreen])) {
     .surface {
       @include surface-moveable;
 

package/styles/drawer/base/_mixins.scss

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/animation/variables' as mdc-animation-variables;
-@use '../../theme';
+@use '../../core/styles/theme';
+@use '../../core/styles/animation';
+@use '../../core/styles/scrollbar';
+@use '../../core/styles/elevation';
 @use './variables';
 
 @mixin core-styles() {
@@ -63,10 +64,10 @@
 }
 
 @mixin base() {
-  @include theme.css-custom-property(width, --forge-drawer-width, variables.$width);
-  @include theme.property(border-color, border-color);
-  @include mdc-theme.property(background-color, surface);
-
+  
+  width: var(--forge-drawer-width, variables.$width);
+  background-color: #{theme.variable(surface)};
+  border-color: #{theme.variable(outline)};
   height: 100%;
   box-sizing: border-box;
   display: grid;
@@ -75,7 +76,7 @@
   overflow: hidden;
   transition-property: transform;
   transition-duration: variables.$transition-duration;
-  transition-timing-function: mdc-animation-variables.$standard-curve-timing-function;
+  transition-timing-function: #{animation.variable(easing-standard)};
 }
 
 @mixin header() {
@@ -83,7 +84,7 @@
 }
 
 @mixin content() {
-  @include theme.scrollbar;
+  @include scrollbar.base;
 
   overflow-x: auto;
   -webkit-overflow-scrolling: 'touch';
@@ -116,8 +117,8 @@
 
 @mixin closing($direction: left) {
   @include closed-direction($direction);
-  @include theme.z-index(surface);
 
+  z-index: #{elevation.z-index-variable(surface)};
   position: absolute;
   top: 0;
   right: 0;

package/styles/drawer/base/_variables.scss

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/drawer/variables' as mdc-drawer-variables;
+@use '../../core/styles/border';
+@use '../../core/styles/animation';
 
-$border-width: 1px !default;
-$width: mdc-drawer-variables.$width !default;
-$transition-duration: 250ms !default;
-$transition-duration-close: 200ms !default;
+$border-width: #{border.variable(thin)} !default;
+$width: 256px !default;
+$transition-duration: #{animation.variable(duration-medium1)} !default;
+$transition-duration-close: #{animation.variable(duration-short4)} !default;

package/styles/drawer/drawer/_variables.scss

@@ -3,10 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/drawer/variables' as mdc-drawer-variables;
+@use '../../core/styles/border';
+@use '../../core/styles/animation';
 
-$border-width: 1px !default;
-$width: mdc-drawer-variables.$width !default;
+$border-width: #{border.variable(thin)} !default;
+$width: 256px !default;
 $mini-width: 56px !default;
-$mini-transition-delay: 300ms !default;
-$transition-duration: 300ms !default;
+$mini-transition-delay: #{animation.variable(duration-medium2)} !default;
+$transition-duration: #{animation.variable(duration-medium2)} !default;

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

@@ -3,11 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/animation/animation' as mdc-animation;
+@use '../../core/styles/animation';
+@use '../../core/styles/theme';
+@use '../../core/styles/elevation';
 @use './variables';
 @use '../base/mixins' as base-mixins;
 @use '../base/variables' as base-variables;
-@use '../../theme';
 
 @mixin core-styles() {
   @include base-mixins.core-styles;
@@ -33,32 +34,28 @@
 
 @mixin host() {
   @include base-mixins.host;
-  @include theme.css-custom-property(width, --forge-drawer-mini-width, variables.$width);
 
+  width: var(--forge-drawer-mini-width, variables.$width);
   overflow: visible !important;
 }
 
 @mixin host-right {
-  @include theme.css-custom-property(min-width, --forge-drawer-mini-width, variables.$width);
-  
+  min-width: var(--forge-drawer-mini-width, variables.$width);
   width: auto;
 }
 
 @mixin base() {
-  @include theme.css-custom-property(width, --forge-drawer-mini-width, variables.$width);
-  @include theme.z-index(surface);
-
-  transition: width 200ms mdc-animation.$standard-curve-timing-function;
+  width: var(--forge-drawer-mini-width, variables.$width);
+  z-index: #{elevation.z-index-variable(surface)};
+  transition: width #{animation.variable(duration-short4)} #{animation.variable(easing-standard)};
 }
 
 @mixin root() {
-  @include theme.z-index(surface);
-
+  z-index: #{elevation.z-index-variable(surface)};
   height: 100%;
 }
 
 @mixin hover() {
-  @include theme.css-custom-property(width, --forge-drawer-width, base-variables.$width, true);
-
-  transition: width 300ms mdc-animation.$standard-curve-timing-function variables.$transition-delay;
+  width: var(--forge-drawer-width, base-variables.$width) !important;
+  transition: width #{animation.variable(duration-medium2)} #{animation.variable(easing-standard)} variables.$transition-delay;
 }

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

@@ -3,11 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/drawer/mixins' as mdc-drawer-mixins;
-@use '@material/drawer/variables' as mdc-drawer-variables;
+@use '../../core/styles/elevation';
 @use '../base/mixins' as base-mixins;
-@use '../../theme';
 
 @mixin core-styles() {
   @include base-mixins.core-styles;
@@ -47,10 +44,8 @@
 }
 
 @mixin base() {
-  @include mdc-drawer-mixins.scrim-fill-color(mdc-drawer-variables.$modal-scrim-color);
-  @include mdc-elevation-theme.elevation(24);
-  @include theme.z-index(dialog);
-
+  z-index: #{elevation.z-index-variable(dialog)};
+  box-shadow: #{elevation.value(24)};
   position: absolute;
   top: 0;
   max-width: 80%;
@@ -65,5 +60,5 @@
 }
 
 @mixin scrim() {
-  @include theme.z-index(dialog);
+  z-index: #{elevation.z-index-variable(dialog)};
 }

package/styles/field/_core.variant.scss

@@ -107,7 +107,6 @@
 @mixin container-background-outlined($theme: default) {
   outline-style: #{token(border-style)};
   outline-width: #{token(border-width)};
-  outline-offset: calc(#{token(border-width)} * -1);
 
   @if $theme == default {
     outline-color: #{token(border-color)};