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

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

package/styles/forge-tokens.scss

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core/styles/animation';
+@use './core/styles/border';
+@use './core/styles/elevation';
+@use './core/styles/shape';
+@use './core/styles/spacing';
+
+// Animation
+:root {
+  @include animation.properties;
+}
+
+// Border
+:root {
+  @include border.properties;
+}
+
+// Elevation
+:root {
+  @include elevation.properties;
+}
+
+// z-index layering
+:root {
+  @include elevation.z-index-properties;
+}
+
+// Shape
+:root {
+  @include shape.properties;
+}
+
+// Spacing
+:root {
+  @include spacing.properties;
+}

package/styles/forge.scss

@@ -3,15 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-// Theme styles
+@use './forge-tokens';
 @use './theme/forge-theme';
-
-// Typography styles
 @use './typography/forge-typography';
-
-// Required global component styles
-@use './table/forge-table';
-@use './quantity-field/forge-quantity-field';
-
-// Supplemental global component styles
-@use './busy-indicator/forge-busy-indicator';

package/styles/linear-progress/_core.scss

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use '../theme';
 @use './token-utils' as *;
 
 @forward './token-utils';

package/styles/list/list/list.scss

@@ -10,6 +10,20 @@
 // Host
 //
 
+$_host-tokens: [
+  navlist-spacing
+  navlist-margin
+  navlist-height
+  navlist-padding
+  navlist-shape
+  navlist-font-size
+  navlist-font-weight
+];
+
+:host {
+  @include tokens($includes: $_host-tokens);
+}
+
 :host {
   display: block;
 }
@@ -19,13 +33,15 @@
 }
 
 :host([navlist]) {
+  margin-block: #{token(navlist-spacing)};
+
   @include list-item.provide-theme((
-    height: 40px,
-    margin: 4px 8px,
-    padding: 0 8px,
-    shape: 4px,
-    supporting-text-font-size: 0.875rem,
-    supporting-text-font-weight: 500
+    height: #{token(navlist-height)},
+    margin: #{token(navlist-margin)},
+    padding: #{token(navlist-padding)},
+    shape: #{token(navlist-shape)},
+    text-font-size: #{token(navlist-font-size)},
+    text-font-weight: #{token(navlist-font-weight)},
   ));
 }
 
@@ -34,7 +50,7 @@
 //
 
 .forge-list {
-  @include tokens;
+  @include tokens($excludes: $_host-tokens);
 }
 
 .forge-list {

package/styles/list/list-item/_core.scss

@@ -21,7 +21,7 @@
   box-sizing: border-box;
   outline: none;
   text-decoration: none;
-  background-color: #{token(background-color)};
+  background-color: #{token(background)};
   border-radius: #{token(shape)};
   -webkit-tap-highlight-color: transparent;
   height: #{token(height)};
@@ -40,9 +40,9 @@
   @include typography.ellipse;
 
   box-sizing: border-box;
-  font-size: #{token(supporting-text-font-size)};
-  font-weight: #{token(supporting-text-font-weight)};
-  line-height: #{token(supporting-text-line-height)};
+  font-size: #{token(text-font-size)};
+  font-weight: #{token(text-font-weight)};
+  line-height: #{token(text-line-height)};
   flex: 1;
 }
 
@@ -75,16 +75,16 @@
   color: #{token(selected-color)};
 }
 
-@mixin supporting-text {
+@mixin text {
   @include typography.style(body1);
   @include typography.ellipse;
 
-  color: #{token(supporting-text-color)};
+  color: #{token(text-color)};
   display: block;
 }
 
-@mixin supporting-text-selected {
-  color: #{token(selected-supporting-text-color)};
+@mixin text-selected {
+  color: #{token(selected-text-color)};
 }
 
 @mixin two-line {
@@ -141,7 +141,7 @@
 }
 
 @mixin leading-trailing-base {
-  color: #{token(supporting-text-color)};
+  color: #{token(text-color)};
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -170,7 +170,7 @@
   line-height: normal;
 }
 
-@mixin supporting-text-wrap {
+@mixin text-wrap {
   @include text-container-wrap;
 }
 

package/styles/list/list-item/list-item.scss

@@ -141,17 +141,17 @@ a.forge-list-item {
   @include text-container;
 }
 
-// Supporting text slotted elements
+// Text slotted elements
 slot[name=secondary-text],
 slot[name=subtitle],
 slot[name=tertiary-text],
 slot[name=tertiary-title] {
   &::slotted(*) {
-    @include supporting-text;
+    @include text;
   }
 
   :host([selected]) &::slotted(*) {
-    @include supporting-text-selected;
+    @include text-selected;
   }
 }
 
@@ -195,7 +195,7 @@ slot[name=tertiary-title] {
   slot[name=tertiary-text],
   slot[name=tertiary-title] {
     &::slotted(*) {
-      @include supporting-text-wrap;
+      @include text-wrap;
     }
   }
 }

package/styles/open-icon/_core.scss

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-flex;
+}
+
+@mixin base {
+  height: #{token(height)};
+  width: #{token(width)};
+
+  color: #{token(color)};
+  rotate: #{token(initial-rotation)};
+
+  transition: rotate #{token(animation-duration)} #{token(animation-timing)};
+}
+
+@mixin open {
+  rotate: #{token(open-rotation)};
+}

package/styles/open-icon/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/open-icon/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: open-icon;
+$_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);
+}

package/styles/{paginator/_variables.scss → open-icon/index.scss}

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$margin-right: 32px !default;
+@forward './core';