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

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

@@ -6,12 +6,9 @@
 @use '../core/styles/typography';
 
 @mixin host {
-  display: inline-block;
-}
-
-@mixin label {
+  /* Typography styles are set on the host to make it easier to override them via a class */
   @include typography.style(label);
 
-  display: contents;
+  display: inline-block;
   cursor: default;
 }

package/styles/label/label.scss

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

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;

package/styles/linear-progress/linear-progress.scss

@@ -5,20 +5,20 @@
  */
 @use '../core/styles/theme';
 @use './animations';
-@use './configuration';
-@use './core';
-@use './token-utils' as *;
+@use './core' as *;
 
 //
 // Host styles
 //
 
+$_host-tokens: [track-height];
+
 :host {
-  @include configuration.host-configuration;
+  @include tokens($includes: $_host-tokens);
 }
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
@@ -30,11 +30,22 @@
 //
 
 .forge-linear-progress {
-  @include configuration.configuration;
+  @include tokens($excludes: $_host-tokens);
+
+  // State vars
+  #{declare(track-dot-size)}: calc(#{token(track-height)} / 2);
+  #{declare(track-background-width)}: calc(#{token(track-dot-size, custom)} * 5);
+  #{declare(track-background)}: 0 / #{token(track-background-width, custom)} 100%
+    radial-gradient(
+      circle at calc(#{token(track-dot-size, custom)} * 2),
+      #{token(track-color)} 0,
+      #{token(track-color)} #{token(track-dot-size, custom)},
+      transparent #{token(track-dot-size, custom)}
+    );
 }
 
 .forge-linear-progress {
-  @include core.progress;
+  @include progress;
 }
 
 .forge-linear-progress,
@@ -46,49 +57,49 @@
 }
 
 .bar {
-  @include core.bar;
+  @include bar;
 }
 
 .secondary-bar {
-  @include core.secondary-bar;
+  @include secondary-bar;
 }
 
 .bar-inner {
-  @include core.bar-inner;
+  @include bar-inner;
 }
 
 .buffer-bar {
-  @include core.buffer-bar;
+  @include buffer-bar;
 }
 
 .track {
-  @include core.track;
+  @include track;
 }
 
 /// Indeterminate styles
 .forge-linear-progress--indeterminate {
   .bar {
-    @include core.indeterminate-bar;
+    @include indeterminate-bar;
   }
 
   .primary-bar {
-    @include core.indeterminate-primary-bar;
+    @include indeterminate-primary-bar;
   }
 
   .secondary-bar {
-    @include core.indeterminate-secondary-bar;
+    @include indeterminate-secondary-bar;
   }
 
   .track {
-    @include core.indeterminate-track;
+    @include indeterminate-track;
   }
 
   .primary-bar > .bar-inner {
-    @include core.indeterminate-primary-bar-inner;
+    @include indeterminate-primary-bar-inner;
   }
 
   .secondary-bar > .bar-inner {
-    @include core.indeterminate-secondary-bar-inner;
+    @include indeterminate-secondary-bar-inner;
   }
 }
 

package/styles/list/list/_core.scss

@@ -5,6 +5,8 @@
  */
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin base {
   display: block;
   outline: none;

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

@@ -3,8 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
-@use './core';
+@use './core' as *;
 @use '../list-item';
 
 //
@@ -23,6 +22,7 @@
   @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
@@ -34,9 +34,9 @@
 //
 
 .forge-list {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-list {
-  @include core.base;
+  @include base;
 }

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

@@ -6,6 +6,8 @@
 @use '../../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin container {
   display: block;
   outline: none;

package/styles/list/list-item/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;