@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

package/styles/tabs/tab/_configuration.scss

@@ -3,62 +3,25 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/tabs/tab/tokens' as tab-tokens;
+@use './token-utils' as *;
 
 @mixin configuration {
-  // Shared
-  --_active-color: #{tab-tokens.get(active-color)};
-  --_inactive-color: #{tab-tokens.get(inactive-color)};
-  --_height: #{tab-tokens.get(height)};
-
-  // Indicator
-  --_active-indicator-color: #{tab-tokens.get(indicator-color)};
-  --_active-indicator-height: #{tab-tokens.get(indicator-height)};
-  --_active-indicator-shape: #{tab-tokens.get(indicator-shape)};
-
-  // Container
-  --_container-color: #{tab-tokens.get(container-color)};
-  --_container-height: #{tab-tokens.get(container-height)};
-  --_container-shape: #{tab-tokens.get(container-shape)};
-  
-  // Content
-  --_content-height: #{tab-tokens.get(content-height)};
-
-  // Icon
-  --_active-focus-icon-color: #{tab-tokens.get(active-focus-icon-color)};
-  --_active-hover-icon-color: #{tab-tokens.get(active-hover-icon-color)};
-  --_active-icon-color: #{tab-tokens.get(active-icon-color)};
-  --_active-pressed-icon-color: #{tab-tokens.get(active-pressed-icon-color)};
-  --_icon-size: #{tab-tokens.get(icon-size)};
-  --_focus-icon-color: #{tab-tokens.get(focus-icon-color)};
-  --_hover-icon-color: #{tab-tokens.get(hover-icon-color)};
-  --_icon-color: #{tab-tokens.get(icon-color)};
-  --_pressed-icon-color: #{tab-tokens.get(pressed-icon-color)};
-
-  // Label
-  --_active-focus-label-text-color: #{tab-tokens.get(active-focus-label-text-color)};
-  --_active-hover-label-text-color: #{tab-tokens.get(active-hover-label-text-color)};
-  --_active-label-text-color: #{tab-tokens.get(active-label-text-color)};
-  --_active-pressed-label-text-color: #{tab-tokens.get(active-pressed-label-text-color)};
-  --_focus-label-text-color: #{tab-tokens.get(focus-label-text-color)};
-  --_hover-label-text-color: #{tab-tokens.get(hover-label-text-color)};
-  --_label-text-color: #{tab-tokens.get(label-text-color)};
-  --_pressed-label-text-color: #{tab-tokens.get(pressed-label-text-color)};
+  @include tokens;
 }
 
 @mixin vertical-primary-configuration {
-  --_active-indicator-shape: #{tab-tokens.get(vertical-indicator-shape)};
+  @include override(indicator-shape, vertical-indicator-shape);
 }
 
 @mixin configuration-secondary {
-  --_active-indicator-height: #{tab-tokens.get(secondary-indicator-height)};
-  --_active-indicator-shape: #{tab-tokens.get(secondary-indicator-shape)};
+  @include override(indicator-height, secondary-indicator-height);
+  @include override(indicator-shape, secondary-indicator-shape);
 }
 
 @mixin configuration-inverted {
-  --_active-indicator-shape: #{tab-tokens.get(inverted-indicator-shape)};
+  @include override(indicator-shape, inverted-indicator-shape);
 }
 
 @mixin configuration-vertical-inverted {
-  --_active-indicator-shape: #{tab-tokens.get(vertical-inverted-indicator-shape)};
+  @include override(indicator-shape, vertical-inverted-indicator-shape);
 }

package/styles/tabs/tab/_core.scss

@@ -3,14 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/utils';
-@use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../core/styles/typography';
-@use '../../core/styles/spacing';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, tab);
-}
+@use './token-utils' as *;
 
 @mixin host {
   display: inline-flex;
@@ -21,7 +15,10 @@
 
 @mixin host-disabled {
   cursor: not-allowed;
-  opacity: #{tokens.get(disabled-opacity)};
+}
+
+@mixin disabled {
+  opacity: #{token(disabled-opacity)};
 }
 
 @mixin tab {
@@ -43,9 +40,9 @@
   padding: 0;
   margin: 0;
   z-index: 0; // Ensure this is a stacking context so the indicator displays
-  background-color: var(--_container-color);
-  color: var(--_label-text-color);
-  min-height: var(--_container-height);
+  background-color: #{token(container-color)};
+  color: #{token(label-text-color)};
+  min-height: #{token(container-height)};
 
   &::-moz-focus-inner {
     padding: 0;
@@ -58,59 +55,59 @@
     position: relative;
     writing-mode: horizontal-tb;
     fill: currentColor;
-    color: var(--_icon-color);
-    font-size: var(--_icon-size);
-    width: var(--_icon-size);
-    height: var(--_icon-size);
+    color: #{token(icon-color)};
+    font-size: #{token(icon-size)};
+    width: #{token(icon-size)};
+    height: #{token(icon-size)};
   }
 
   &:hover {
-    color: var(--_hover-label-text-color);
+    color: #{token(hover-label-text-color)};
     cursor: pointer;
   }
 
   &:hover {
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
-      color: var(--_hover-icon-color);
+      color: #{token(hover-icon-color)};
     }
   }
 }
 
 @mixin focus {
-  color: var(--_focus-label-text-color);
+  color: #{token(focus-label-text-color)};
 
   ::slotted([slot=leading]),
   ::slotted([slot=trailing]) {
-    color: var(--_focus-icon-color);
+    color:#{token(focus-icon-color)};
   }
 }
 
 @mixin selected-focus {
-  color: var(--_active-focus-label-text-color);
+  color: #{token(active-focus-label-text-color)};
 
   ::slotted([slot=leading]),
   ::slotted([slot=trailing]) {
-    color: var(--_active-focus-icon-color);
+    color: #{token(active-focus-icon-color)};
   }
 }
 
 @mixin pressed {
-  color: var(--_pressed-label-text-color);
+  color: #{token(pressed-label-text-color)};
   outline: none;
 
   ::slotted([slot=leading]),
   ::slotted([slot=trailing]) {
-    color: var(--_pressed-icon-color);
+    color: #{token(pressed-icon-color)};
   }
 }
 
 @mixin selected-pressed {
-  color: var(--_active-pressed-label-text-color);
+  color: #{token(active-pressed-label-text-color)};
 
   ::slotted([slot=leading]),
   ::slotted([slot=trailing]) {
-    color: var(--_active-pressed-icon-color);
+    color: #{token(active-pressed-icon-color)};
   }
 }
 
@@ -123,12 +120,10 @@
   justify-content: center;
   white-space: nowrap;
   transition: 150ms color linear;
-
-  $_content-padding: spacing.variable('100');
-  max-height: calc(var(--_content-height) + 2 * $_content-padding);
-  min-height: var(--_content-height);
-  padding: $_content-padding calc(2 * $_content-padding);
-  gap: spacing.variable('050');
+  max-height: calc(#{token(content-height)} + 2 * #{token(content-padding)});
+  min-height: #{token(content-height)};
+  padding: #{token(content-padding)} calc(2 * #{token(content-padding)});
+  gap: #{token(content-padding)};
 }
 
 @mixin label {
@@ -141,9 +136,9 @@
   box-sizing: border-box;
   z-index: -1;
   transform-origin: bottom left;
-  background: var(--_active-indicator-color);
-  border-radius: var(--_active-indicator-shape);
-  height: var(--_active-indicator-height);
+  background: #{token(indicator-color)};
+  border-radius: #{token(indicator-shape)};
+  height: #{token(indicator-height)};
   inset: auto 0 0;
   opacity: 0;
 }
@@ -172,7 +167,7 @@
 
 @mixin vertical-indicator {
   height: 100%;
-  min-width: var(--_active-indicator-height);
+  min-width: #{token(indicator-height)};
   inset: 0 0 0 auto;
 }
 

package/styles/tabs/tab/_token-utils.scss

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

@@ -5,3 +5,4 @@
  */
 @forward './configuration';
 @forward './core';
+@forward './token-utils' show provide-theme;

package/styles/tabs/tab/tab.scss

@@ -5,9 +5,13 @@
  */
 @use './core';
 @use './configuration';
-@use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../focus-indicator';
 @use '../../state-layer';
+@use './token-utils' as *;
+
+//
+// Host
+//
 
 :host {
   @include core.host;
@@ -17,6 +21,51 @@
   display: none;
 }
 
+//
+// Base
+//
+
+.forge-tab {
+  @include configuration.configuration;
+}
+
+.forge-tab {
+  @include core.tab;
+
+  .content {
+    @include core.content;
+
+    .label {
+      @include core.label;
+    }
+  }
+
+  .indicator {
+    @include core.indicator;
+  }
+}
+
+:host, ::slotted(*) {
+  white-space: nowrap;
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(active-color)},
+    shape: 8px
+  ));
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(inactive-color)}
+  ));
+}
+
+//
+// States
+//
+
 :host(:focus) {
   .forge-tab {
     @include core.focus;
@@ -29,31 +78,41 @@
   }
 }
 
+//
+// Disabled
+//
+
 :host([disabled]) {
   @include core.host-disabled;
 
   .forge-tab {
+    @include core.disabled;
+
     pointer-events: none;
   }
 }
 
+//
+// Selected
+//
+
 :host([selected]) {
   .forge-tab {
-    color: var(--_active-label-text-color);
+    color: #{token(active-label-text-color)};
 
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
-      color: var(--_active-icon-color);
+      color: #{token(active-icon-color)};
     }
 
     &:hover {
-      color: var(--_active-hover-label-text-color);
+      color: #{token(active-hover-label-text-color)};
     }
 
     &:hover {
       ::slotted([slot=leading]),
       ::slotted([slot=trailing]) {
-        color: var(--_active-hover-icon-color);
+        color: #{token(active-hover-icon-color)};
       }
     }
   
@@ -61,12 +120,18 @@
       opacity: 1;
     }
   }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(active-color)}
+    ));
+  }
 }
 
 :host([selected]:not([vertical])) {
   forge-focus-indicator {
     @include focus-indicator.provide-theme((
-      offset-block: 0 calc(var(--_active-indicator-height) + 1px)
+      offset-block: 0 calc(#{token(indicator-height)} + 1px)
     ));
   }
 }
@@ -83,9 +148,13 @@
   }
 }
 
+//
+// Stacked
+//
+
 :host([stacked]) {
   .forge-tab {
-    --_height: #{tokens.get(stacked-height)};
+    @include override(height, stacked-height);
 
     .content {
       @include core.content-stacked;
@@ -93,6 +162,10 @@
   }
 }
 
+//
+// Secondary
+//
+
 :host([secondary]) {
   .forge-tab {
     @include configuration.configuration-secondary;
@@ -107,6 +180,10 @@
   }
 }
 
+//
+// Vertical
+//
+
 :host([vertical]) {
   .forge-tab {
     @include core.vertical;
@@ -122,7 +199,7 @@
 
   forge-focus-indicator {
     @include focus-indicator.provide-theme((
-      offset-inline: 0 calc(var(--_active-indicator-height) + 1px)
+      offset-inline: 0 calc(#{token(indicator-height)} + 1px)
     ));
   }
 }
@@ -139,6 +216,10 @@
   }
 }
 
+//
+// Inverted
+//
+
 :host([inverted]) {
   .forge-tab {
     @include configuration.configuration-inverted;
@@ -158,40 +239,3 @@
     @include core.vertical-inverted-indicator;
   }
 }
-
-/// Base styles
-.forge-tab {
-  @include configuration.configuration;
-  @include core.tab;
-
-  .content {
-    @include core.content;
-
-    .label {
-      @include core.label;
-    }
-  }
-
-  .indicator {
-    @include core.indicator;
-  }
-}
-
-host,
-::slotted(*) {
-  white-space: nowrap;
-}
-
-
-forge-focus-indicator {
-  @include focus-indicator.provide-theme((
-    color: var(--_active-color),
-    shape: 8px
-  ));
-}
-
-forge-state-layer {
-  @include state-layer.provide-theme((
-    color: var(--_inactive-color)
-  ));
-}

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

@@ -3,11 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/tabs/tab-bar/tokens';
+@use './token-utils' as *;
 
 @mixin configuration {
-  --_container-justify: #{tokens.get(container-justify)};
-  --_tab-flex: #{tokens.get(tab-flex)};
-  --_divider-color: #{tokens.get(divider-color)};
-  --_divider-thickness: #{tokens.get(divider-thickness)};
+  @include tokens;
 }

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

@@ -3,12 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/utils';
-@use '../../core/styles/tokens/tabs/tab-bar/tokens';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, tab-bar);
-}
+@use './token-utils' as *;
 
 @mixin host {
   position: relative;
@@ -18,7 +13,7 @@
 @mixin base {
   position: relative;
   display: flex;
-  justify-content: var(--_container-justify);
+  justify-content: #{token(justify)};
   align-items: flex-end;
   box-sizing: border-box;
   overflow: auto;
@@ -31,6 +26,14 @@
   }
 }
 
+@mixin slotted-base {
+  flex: #{token(stretch)};
+}
+
+@mixin slotted-selected {
+  z-index: 1;
+}
+
 @mixin container {
   position: relative;
   display: grid;
@@ -38,7 +41,7 @@
   max-width: 100%;
   max-height: 100%;
   align-items: center;
-  border-bottom: var(--_divider-thickness) solid var(--_divider-color);
+  border-bottom: #{token(divider-thickness)} solid #{token(divider-color)};
 }
 
 @mixin container-vertical {
@@ -46,7 +49,7 @@
   grid-template-rows: auto 1fr auto;
   align-items: initial;
   border-bottom: none;
-  border-right: var(--_divider-thickness) solid var(--_divider-color);
+  border-right: #{token(divider-thickness)} solid #{token(divider-color)};
   height: 100%;
 }
 
@@ -58,3 +61,17 @@
   grid-column: auto;
   grid-row: 2;
 }
+
+@mixin vertical-scroll-button {
+  justify-self: center;
+}
+
+@mixin inverted {
+  border-bottom: none;
+  border-top: #{variale(divider-thickness)} solid #{token(divider-color)};
+}
+
+@mixin vertical-inverted {
+  border-bottom: none;
+  border-top: #{token(divider-thickness)} solid #{token(divider-color)};
+}

package/styles/tabs/tab-bar/_token-utils.scss

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

@@ -4,4 +4,5 @@
  * License: Apache-2.0
  */
 @forward './configuration';
-@forward './core';
+@forward './core';
+@forward './token-utils' show provide-theme;