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

package/styles/split-button/index.scss

@@ -3,5 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './token-utils' show provide-theme;

package/styles/split-button/split-button.scss

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
 @use './token-utils' as *;
 @use '../button';
 @use '../icon-button';
@@ -14,7 +13,9 @@
 //
 
 :host {
-  @include configuration.configuration;
+  @include tokens;
+
+  #{declare(focus-indicator-offset-adjusted)}: calc(#{token(focus-indicator-offset)} + #{token(focus-indicator-divider-offset)} * 2);
 }
 
 :host {

package/styles/state-layer/_core.scss

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   @include container;
   
@@ -85,7 +86,7 @@
   @include states-target;
   
   .forge-state-layer {
-    @include configuration.configuration;
+    @include tokens;
 
     pointer-events: none;
 

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

@@ -3,15 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
-@use './configuration';
+@use './core' as *;
 
 //
 // Host
 //
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -19,22 +18,22 @@
 }
 
 :host([disabled]) {
-  @include core.disabled;
+  @include disabled;
 }
 
 .forge-state-layer {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-state-layer {
-  @include core.surface;
+  @include surface;
 
   &--hovered::before {
-    @include core.hovered;
+    @include hovered;
   }
 
   &--pressed::after {
-    @include core.pressed;
+    @include pressed;
   }
 }
 

package/styles/switch/_core.scss

@@ -6,6 +6,8 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 // The tallest element may be absolutely positioned so the container needs to
 // be manually sized to match.
 $_container-block-size: max(#{token(handle-height)}, #{token(track-height)}, #{token(current-state-layer-height, custom)});
@@ -25,6 +27,7 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
 
 @mixin host {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @mixin switch {

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

@@ -3,14 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
-@use './configuration';
+@use './core' as *;
 @use '../focus-indicator';
 @use '../state-layer';
-@use './token-utils' as *;
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -18,34 +16,34 @@
 }
 
 .forge-switch {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 // Off
 .forge-switch {
-  @include core.switch;
+  @include switch;
 
   #{declare(current-state-layer-width)}: #{token(state-layer-width)};
   #{declare(current-state-layer-height)}: #{token(state-layer-height)};
 
   .container {
-    @include core.container;
+    @include container;
   }
 
   .input {
-    @include core.input;
+    @include input;
   }
 
   .track {
-    @include core.track;
+    @include track;
   }
 
   .handle {
-    @include core.handle;
+    @include handle;
   }
 
   .icon {
-    @include core.icon;
+    @include icon;
 
     // TODO: Use when icon supports tokens
     // @include icon.provide-theme((
@@ -60,17 +58,17 @@
       // ));
       --forge-icon-font-size: #{token(icon-on-size)};
 
-      @include core.icon-on;
-      @include core.icon-hidden;
+      @include icon-on;
+      @include icon-hidden;
     }
 
     &__off {
-      @include core.icon-off-shown;
+      @include icon-off-shown;
     }
   }
 
   .label {
-    @include core.label;
+    @include label;
   }
 
   .hidden {
@@ -78,26 +76,26 @@
   }
 
   ::slotted([slot=input]) {
-    @include core.input;
+    @include input;
   }
 }
 
 // On
 :host([on]) {
   .track {
-    @include core.track-on;
+    @include track-on;
   }
 
   .handle {
-    @include core.handle-on;
+    @include handle-on;
 
     .icon {
       &__on {
-        @include core.icon-on-shown;
+        @include icon-on-shown;
       }
 
       &__off {
-        @include core.icon-hidden;
+        @include icon-hidden;
       }
 
     }
@@ -115,14 +113,14 @@
   .forge-switch {
     .container:active {
       .track {
-        @include core.track-active;
+        @include track-active;
       }
   
       .handle {
-        @include core.handle-active;
+        @include handle-active;
   
         .icon {
-          @include core.icon-active;
+          @include icon-active;
         }
       }
     }
@@ -132,14 +130,14 @@
   .forge-switch {
     .container:active {
       .track {
-        @include core.track-active-on;
+        @include track-active-on;
       }
   
       .handle {
-        @include core.handle-active-on;
+        @include handle-active-on;
   
         .icon {
-          @include core.icon-active-on;
+          @include icon-active-on;
         }
       }
     }
@@ -158,14 +156,14 @@
 // Disabled
 :host([disabled]) {
   .forge-switch {
-    @include core.switch-disabled;
+    @include switch-disabled;
 
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
 
     .handle {
-      @include core.handle-disabled;
+      @include handle-disabled;
     }
   }
 }
@@ -174,7 +172,7 @@
 :host([readonly]) {
   .forge-switch {
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }

package/styles/tabs/tab/_core.scss

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

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

@@ -3,18 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
-@use './configuration';
+@use './core' as *;
 @use '../../focus-indicator';
 @use '../../state-layer';
-@use './token-utils' as *;
 
 //
 // Host
 //
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -26,22 +24,22 @@
 //
 
 .forge-tab {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-tab {
-  @include core.tab;
+  @include tab;
 
   .content {
-    @include core.content;
+    @include content;
 
     .label {
-      @include core.label;
+      @include label;
     }
   }
 
   .indicator {
-    @include core.indicator;
+    @include indicator;
   }
 }
 
@@ -68,13 +66,13 @@ forge-state-layer {
 
 :host(:focus) {
   .forge-tab {
-    @include core.focus;
+    @include focus;
   }
 }
 
 :host(:active) {
   .forge-tab {
-    @include core.pressed;
+    @include pressed;
   }
 }
 
@@ -83,10 +81,10 @@ forge-state-layer {
 //
 
 :host([disabled]) {
-  @include core.host-disabled;
+  @include host-disabled;
 
   .forge-tab {
-    @include core.disabled;
+    @include disabled;
 
     pointer-events: none;
   }
@@ -138,13 +136,13 @@ forge-state-layer {
 
 :host([selected]:focus) {
   .forge-tab {
-    @include core.selected-focus;
+    @include selected-focus;
   }
 }
 
 :host([selected]:active) {
   .forge-tab {
-    @include core.selected-pressed;
+    @include selected-pressed;
   }
 }
 
@@ -157,7 +155,7 @@ forge-state-layer {
     @include override(height, stacked-height);
 
     .content {
-      @include core.content-stacked;
+      @include content-stacked;
     }
   }
 }
@@ -168,15 +166,16 @@ forge-state-layer {
 
 :host([secondary]) {
   .forge-tab {
-    @include configuration.configuration-secondary;
+    @include override(indicator-height, secondary-indicator-height);
+    @include override(indicator-shape, secondary-indicator-shape);
   }
 
   .content {
-    @include core.content-secondary;
+    @include content-secondary;
   }
 
   .indicator {
-    @include core.indicator-secondary;
+    @include indicator-secondary;
   }
 }
 
@@ -186,14 +185,14 @@ forge-state-layer {
 
 :host([vertical]) {
   .forge-tab {
-    @include core.vertical;
+    @include vertical;
   
     .content {
-      @include core.vertical-content;
+      @include vertical-content;
     }
   
     .indicator {
-      @include core.vertical-indicator;
+      @include vertical-indicator;
     }
   }
 
@@ -206,13 +205,13 @@ forge-state-layer {
 
 :host([vertical][secondary]) {
   .content {
-    @include core.vertical-secondary-content;
+    @include vertical-secondary-content;
   }
 }
 
 :host([vertical]:not([secondary])) {
   .forge-tab {
-    @include configuration.vertical-primary-configuration;
+    @include override(indicator-shape, vertical-indicator-shape);
   }
 }
 
@@ -222,20 +221,20 @@ forge-state-layer {
 
 :host([inverted]) {
   .forge-tab {
-    @include configuration.configuration-inverted;
+    @include override(indicator-shape, inverted-indicator-shape);
   }
 
   .indicator {
-    @include core.inverted-indicator;
+    @include inverted-indicator;
   }
 }
 
 :host([inverted][vertical]) {
   .forge-tab {
-    @include configuration.configuration-vertical-inverted;
+    @include override(indicator-shape, vertical-inverted-indicator-shape);
   }
 
   .indicator {
-    @include core.vertical-inverted-indicator;
+    @include vertical-inverted-indicator;
   }
 }

package/styles/tabs/tab-bar/_core.scss

@@ -5,6 +5,8 @@
  */
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   position: relative;
   display: block;

package/styles/tabs/tab-bar/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/tabs/tab-bar/tab-bar.scss

@@ -3,17 +3,15 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 @use '../../icon-button';
-@use './configuration';
-@use './token-utils' as *;
 
 //
 // Host
 //
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -24,24 +22,24 @@
 // Base styles
 //
 
-.container {
-  @include configuration.configuration;
+.forge-tab-bar {
+  @include tokens;
 }
 
-.container {
-  @include core.container;
+.forge-tab-bar {
+  @include container;
 }
 
 .scroll-container {
-  @include core.base;
+  @include base;
 }
 
 ::slotted(*) {
-  @include core.slotted-base;
+  @include slotted-base;
 }
 
 ::slotted([selected]) {
-  @include core.slotted-selected;
+  @include slotted-selected;
 }
 
 forge-icon-button {
@@ -55,16 +53,16 @@ forge-icon-button {
 //
 
 :host([vertical]) {
-  .container {
-    @include core.container-vertical;
+  .forge-tab-bar {
+    @include container-vertical;
   }
 
   .scroll-container {
-    @include core.vertical;
+    @include vertical;
   }
 
   .scroll-button {
-    @include core.vertical-scroll-button;
+    @include vertical-scroll-button;
   }
 }
 
@@ -73,14 +71,14 @@ forge-icon-button {
 // 
 
 :host([inverted]:not([vertical])) {
-  .container {
-    @include core.inverted;
+  .forge-tab-bar {
+    @include inverted;
   }
 }
 
 :host([inverted][vertical]) {
-  .container {
-    @include core.vertical-inverted;
+  .forge-tab-bar {
+    @include vertical-inverted;
   }
 }
 
@@ -89,26 +87,26 @@ forge-icon-button {
 // 
 
 :host([clustered]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, flex-start, value);
     @include override(stretch, 0, value);
   }
 }
 
 :host([clustered=start]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, flex-start, value);
   }
 }
 
 :host([clustered=center]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, center, value);
   }
 }
 
 :host([clustered=end]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, flex-end, value);
   }
 }

package/styles/theme/_theme-dark.scss

@@ -3,12 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/theme' as theme;
+@use '../core/styles/theme';
+@use '../core/styles/border';
+
+@use '../popover';
+@use '../tooltip';
+
 @use '../backdrop/mixins' as backdrop-mixins;
 @use '../backdrop/variables' as backdrop-variables;
 @use '../skeleton/mixins' as skeleton-mixins;
 @use '../skeleton/variables' as skeleton-variables;
-@use '../tooltip/mixins' as tooltip-mixins;
 @use '../toast/mixins' as toast-mixins;
 @use '../toast/variables' as toast-variables;
 @use '../badge/mixins' as badge-mixins;
@@ -28,6 +32,14 @@
   @include theme.properties-dark;
 
   /// Component-specific Forge theme properties
+  @include popover.provide-theme((
+    border-width: border.variable(thin) // Popovers use thin borders in dark theme to increase contrast
+  ));
+  @include tooltip.provide-theme((
+    background: theme.variable(surface-bright),
+    color: theme.variable(text-high),
+    border-width: border.variable(thin) // Tooltips use thin borders in dark theme to increase contrast
+  ));
   @include backdrop-mixins.provide-theme(backdrop-variables.$theme-values-dark);
   @include skeleton-mixins.provide-theme(skeleton-variables.$theme-values-dark);
   @include toast-mixins.provide-theme(toast-variables.$theme-values-dark);

package/styles/theme/_theme-values.scss

@@ -78,6 +78,7 @@ $z-index-backdrop: 7 !default;
 $z-index-dialog: 8 !default;
 $z-index-notification: 9 !default;
 $z-index-popup: 10 !default;
+$z-index-overlay: 10 !default;
 $z-index-tooltip: 11 !default;
 
 $z-index-values: (
@@ -87,6 +88,7 @@ $z-index-values: (
   dialog: $z-index-dialog,
   notification: $z-index-notification,
   popup: $z-index-popup,
+  overlay: $z-index-overlay,
   tooltip: $z-index-tooltip
 ) !default;
 

package/styles/toolbar/_mixins.scss

@@ -17,7 +17,8 @@
   @include theme.css-custom-property(border-bottom-left-radius, --forge-toolbar-border-bottom-left-radius, 0);
   @include theme.css-custom-property(border-bottom-right-radius, --forge-toolbar-border-bottom-right-radius, 0);
   @include theme.property(border-color, border-color);
-
+  
+  background-color: var(--forge-theme-surface);
   display: grid;
   grid-template-columns: auto 1fr auto;
   box-sizing: border-box;