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

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

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../button/core' as *;
+@use '../../state-layer';
+@use '../../focus-indicator';
+
+//
+// Host
+//
+
+:host {
+  @include tokens;
+}
+
+:host {
+  @include host;
+
+  border-radius: #{token(shape)};
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+::slotted(:is(button,a)) {
+  @include base;
+
+  --forge-icon-font-size: 1.25em;
+}
+
+::slotted(a) {
+  text-decoration: none;
+  --forge-typography-link-text-decoration: none;
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme(( color: #{token(color)} ));
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(primary-color)},
+    outward-offset: #{token(focus-indicator-offset)}
+  ));
+}
+
+//
+// Types
+//
+
+:host(:is(:not([type],[type*=text]))) {
+  ::slotted(:is(button,a)) {
+    @include text;
+  }
+}
+
+:host(:is([type*=unelevated],[type*=raised])) {
+  ::slotted(:is(button,a)) {
+    @include filled;
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme(( color: #{token(filled-color)} ));
+  }
+}
+
+:host([type*=raised]) {
+  ::slotted(:is(button,a)) {
+    @include raised;
+  }
+}
+
+:host([type*=outlined]) {
+  ::slotted(:is(button,a)) {
+    @include outlined;
+  }
+}
+
+//
+// Full width
+//
+
+:host([full-width]) {
+  width: 100%;
+}
+
+
+//
+// Dense
+//
+
+:host(:is([dense],[type*=dense])) {
+  ::slotted(:is(button,a)) {
+    @include dense;
+  }
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include host-disabled;
+
+  ::slotted(button[disabled]) {
+    @include disabled;
+  }
+}
+
+:host([type*=outlined][disabled]) {
+  ::slotted(button[disabled]) {
+    @include outlined-disabled;
+  }
+}
+
+:host(:is([type*=unelevated],[type*=raised])[disabled]) {
+  ::slotted(button[disabled]) {
+    @include filled-disabled;
+  }
+}
+
+:host([type*=raised][disabled]) {
+  ::slotted(button[disabled]) {
+    @include raised-disabled;
+  }
+}

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/inline-message/_core.scss

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+
+@forward './token-utils';
+
+@mixin host {
+  display: flex;
+}
+
+@mixin base {
+  @include typography.style(body1);
+
+  background: #{token(background)};
+  color: #{token(color)};
+  
+  border-radius: #{token(shape)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+
+  display: flex;
+  gap: #{token(icon-gap)};
+  box-sizing: border-box;
+  padding-inline: #{token(padding-inline)};
+  padding-block: #{token(padding-block)};
+}
+
+@mixin container {
+  display: flex;
+  flex-direction: column;
+  gap: #{token(content-gap)};
+}
+
+@mixin title {
+  @include typography.style(heading1);
+}
+
+@mixin icon {
+  color: #{token(icon-color)};
+}

package/styles/inline-message/_token-utils.scss

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

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './core';