@tylertech/forge 3.8.0-dev.2 → 3.8.0-dev.4

package/esm/tabs/tab-bar/tab-bar.js

@@ -17,7 +17,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { setDefaultAria } from '../../constants';
 const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
-const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
+const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}:host([theme=app-bar]){--forge-tab-active-color:var(--_app-bar-theme-foreground);--forge-tab-inactive-color:var(--_app-bar-theme-foreground-muted)}:host([theme=app-bar]) forge-icon-button{--forge-icon-button-icon-color:var(--_app-bar-theme-foreground)}';
 /**
  * @tag forge-tab-bar
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.8.0-dev.2",
+  "version": "3.8.0-dev.4",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/sass/app-bar/app-bar/_core.scss

@@ -93,7 +93,6 @@
 @mixin logo {
   font-size: #{token(logo-font-size)};
   height: 1em;
-  width: 1em;
 }
 
 @mixin elevation-raised {

package/sass/app-bar/app-bar/app-bar.scss

@@ -16,7 +16,7 @@
 // Host
 //
 
-$host-tokens: [background foreground];
+$host-tokens: (background, foreground);
 
 :host {
   @include tokens($includes: $host-tokens);
@@ -34,7 +34,7 @@ $host-tokens: [background foreground];
 // Default theme
 //
 
-:host(:not([theme])) {
+:host(:not([theme]):not([theme-mode='scoped'])) {
   @include theme.provide(
     (
       primary: #{token(foreground)},
@@ -49,6 +49,25 @@ $host-tokens: [background foreground];
   );
 }
 
+:host([theme-mode='scoped']) {
+  .forge-app-bar {
+    color: inherit;
+
+    .logo-title-container {
+      color: #{token(foreground)};
+    }
+  }
+}
+
+:host {
+  @include provide-theme(
+    (
+      theme-foreground: #{token(foreground)},
+      theme-foreground-muted: rgba(white, color-emphasis.value(medium))
+    )
+  );
+}
+
 //
 // Base
 //
@@ -123,6 +142,25 @@ $host-tokens: [background foreground];
   }
 }
 
+//
+// Slotted (scoped theme mode)
+//
+// Attempt to auto-theme any specific slotted elements directly
+//
+
+:host([theme-mode='scoped']) {
+  ::slotted(:where(forge-tab-bar, forge-icon-button, forge-button)) {
+    color: #{token(theme-foreground)};
+
+    @include tab.provide-theme(
+      (
+        active-color: #{token(theme-foreground)},
+        inactive-color: #{token(theme-foreground-muted)}
+      )
+    );
+  }
+}
+
 //
 // Slotted - Tab bar
 //
@@ -156,6 +194,17 @@ $host-tokens: [background foreground];
 //
 
 :host([theme='white']) {
+  @include override(background, white, value);
+  @include override(foreground, black, value);
+
+  @include provide-theme(
+    (
+      theme-foreground-muted: rgba(black, color-emphasis.value(medium))
+    )
+  );
+}
+
+:host([theme='white']:not([theme-mode='scoped'])) {
   @include theme.provide(
     (
       primary: black,
@@ -163,9 +212,4 @@ $host-tokens: [background foreground];
       text-medium: rgba(black, color-emphasis.value(medium))
     )
   );
-
-  .forge-app-bar {
-    @include override(background, white, value);
-    @include override(foreground, black, value);
-  }
 }

package/sass/app-bar/forge-app-bar.scss

@@ -15,18 +15,28 @@
 
 .forge-app-bar {
   @include core.tokens;
-  @include theme.provide(
+
+  @include core.provide-theme(
     (
-      primary: #{core.token(foreground)},
-      on-primary: rgba(black, color-emphasis.value(highest)),
-      text-high: rgba(white, color-emphasis.value(highest)),
-      text-medium: rgba(white, color-emphasis.value(medium)),
-      text-low: rgba(white, color-emphasis.value(medium-low)),
-      outline-high: rgba(white, color-emphasis.value(highest)),
-      outline-medium: rgba(white, color-emphasis.value(medium)),
-      outline-low: rgba(white, color-emphasis.value(medium-low))
+      theme-foreground: #{core.token(foreground)},
+      theme-foreground-muted: rgba(white, color-emphasis.value(medium))
     )
   );
+
+  &:not(.forge-app-bar--scoped) {
+    @include theme.provide(
+      (
+        primary: #{core.token(foreground)},
+        on-primary: rgba(black, color-emphasis.value(highest)),
+        text-high: rgba(white, color-emphasis.value(highest)),
+        text-medium: rgba(white, color-emphasis.value(medium)),
+        text-low: rgba(white, color-emphasis.value(medium-low)),
+        outline-high: rgba(white, color-emphasis.value(highest)),
+        outline-medium: rgba(white, color-emphasis.value(medium)),
+        outline-low: rgba(white, color-emphasis.value(medium-low))
+      )
+    );
+  }
 }
 
 .forge-app-bar {
@@ -48,6 +58,16 @@
     grid-template-areas: 'start end';
   }
 
+  &--scoped {
+    color: inherit;
+
+    .forge-app-bar__logo,
+    .forge-app-bar__title h1,
+    .forge-app-bar__logo-title-container {
+      color: #{core.token(foreground)};
+    }
+  }
+
   &--raised {
     @include core.elevation-raised;
   }
@@ -79,7 +99,7 @@
     @include focus-indicator.standalone($type: inward);
     @include focus-indicator.provide-theme(
       (
-        color: currentColor,
+        color: #{core.token(foreground)},
         offset-block: #{spacing.variable(xxsmall)},
         shape: #{shape.variable(medium)}
       )
@@ -96,7 +116,7 @@
       @include state-layer.standalone;
       @include state-layer.provide-theme(
         (
-          color: currentColor
+          color: #{core.token(foreground)}
         )
       );
     }
@@ -143,4 +163,14 @@
       justify-content: end;
     }
   }
+
+  .forge-app-bar-theme {
+    color: #{core.token(theme-foreground)};
+
+    @include focus-indicator.provide-theme(
+      (
+        color: #{core.token(theme-foreground)}
+      )
+    );
+  }
 }

package/sass/app-bar/search/app-bar-search.scss

@@ -5,9 +5,12 @@
  */
 @use './core' as *;
 @use '../../focus-indicator';
+@use '../app-bar';
 
 :host {
   @include host;
+
+  color: #{app-bar.token(theme-foreground)};
 }
 
 :host([hidden]) {

package/sass/button/button.scss

@@ -8,6 +8,7 @@
 @use '../state-layer';
 @use '../focus-indicator';
 @use '../circular-progress';
+@use '../app-bar/app-bar';
 @use '../icon';
 
 //
@@ -132,6 +133,29 @@ forge-focus-indicator {
 @include theme(warning);
 @include theme(info);
 
+//
+// App bar theme
+//
+
+:host([theme='app-bar']) {
+  @include provide-theme(
+    (
+      text-color: #{app-bar.token(theme-foreground)},
+      outlined-color: #{app-bar.token(theme-foreground)},
+      outlined-border-color: #{app-bar.token(theme-foreground)},
+      link-color: #{app-bar.token(theme-foreground)}
+    )
+  );
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme(
+      (
+        color: #{app-bar.token(theme-foreground)}
+      )
+    );
+  }
+}
+
 //
 // Variants
 //

package/sass/core/styles/scrollbar/index.scss

@@ -5,6 +5,20 @@
  */
 @use '../tokens/scrollbar/tokens';
 
+///
+/// Gets a CSS custom property declaration for a specific scrollbar token with its token value as the fallback value.
+///
+/// Example:
+/// ```scss
+/// .my-class {
+///   width: #{scrollbar.variable(width)}; // => width: var(--forge-scrollbar-width, 16px);
+/// }
+/// ```
+///
+@function variable($key) {
+  @return tokens.get($key);
+}
+
 ///
 /// Provides scrollbar styles.
 ///

package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss

@@ -23,7 +23,10 @@ $tokens: (
   title-padding: utils.module-val(app-bar, title-padding, spacing.variable(xsmall)),
   columns: utils.module-val(app-bar, columns, 1fr 1fr 1fr),
   transition-duration: utils.module-val(app-bar, transition-duration, animation.variable(duration-short4)),
-  transition-timing: utils.module-val(app-bar, transition-timing, animation.variable(easing-standard))
+  transition-timing: utils.module-val(app-bar, transition-timing, animation.variable(easing-standard)),
+  // Scoped theming tokens for app bar children to optionally inherit
+  theme-foreground: utils.module-ref(app-bar, theme-foreground, foreground),
+  theme-foreground-muted: utils.module-val(app-bar, theme-foreground-muted, rgba(white, theme.emphasis(medium)))
 ) !default;
 
 @function get($key) {

package/sass/icon-button/icon-button.scss

@@ -10,6 +10,7 @@
 @use '../focus-indicator';
 @use '../badge';
 @use '../circular-progress';
+@use '../app-bar/app-bar';
 
 //
 // Host
@@ -377,3 +378,16 @@ forge-state-layer {
 @include theme(error);
 @include theme(warning);
 @include theme(info);
+
+//
+// App Bar Theme
+//
+
+:host([theme='app-bar']) {
+  @include provide-theme(
+    (
+      icon-color: #{app-bar.token(theme-foreground)},
+      focus-indicator-color: #{app-bar.token(theme-foreground)}
+    )
+  );
+}

package/sass/table/_core.scss

@@ -18,7 +18,7 @@
 // The base styles for the `<table>` element.
 @mixin base {
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 // The base styles for the rows of the table.

package/sass/tabs/tab-bar/tab-bar.scss

@@ -4,7 +4,10 @@
  * License: Apache-2.0
  */
 @use './core' as *;
+@use '../../app-bar/app-bar';
 @use '../../icon-button';
+@use '../tab';
+@use '../../core/styles/theme';
 
 //
 // Host
@@ -112,3 +115,24 @@ forge-icon-button {
     @include override(justify, flex-end, value);
   }
 }
+
+//
+// App Bar Theme
+//
+
+:host([theme='app-bar']) {
+  @include tab.provide-theme(
+    (
+      active-color: #{app-bar.token(theme-foreground)},
+      inactive-color: #{app-bar.token(theme-foreground-muted)}
+    )
+  );
+
+  forge-icon-button {
+    @include icon-button.provide-theme(
+      (
+        icon-color: #{app-bar.token(theme-foreground)}
+      )
+    );
+  }
+}