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

package/styles/switch/switch.scss

@@ -5,9 +5,9 @@
  */
 @use './core';
 @use './configuration';
-@use '../core/styles/tokens/switch/tokens';
 @use '../focus-indicator';
 @use '../state-layer';
+@use './token-utils' as *;
 
 :host {
   @include core.host;
@@ -17,25 +17,16 @@
   display: none;
 }
 
-:host([disabled]) {
-  @include core.host-disabled;
-
-  .forge-switch {
-    pointer-events: none;
-  }
-
-  .handle::before {
-    box-shadow: none;
-  }
+.forge-switch {
+  @include configuration.configuration;
 }
 
-/// Base styles (defaults to off)
+// Off
 .forge-switch {
-  @include configuration.configuration;
   @include core.switch;
 
-  --_current-state-layer-width: var(--_state-layer-width);
-  --_current-state-layer-height: var(--_state-layer-height);
+  #{declare(current-state-layer-width)}: #{token(state-layer-width)};
+  #{declare(current-state-layer-height)}: #{token(state-layer-height)};
 
   .container {
     @include core.container;
@@ -43,65 +34,6 @@
 
   .input {
     @include core.input;
-
-    /// On styles
-    &:checked ~ {
-      .track {
-        @include core.track-on;
-      }
-  
-      .handle {
-        @include core.handle-on;
-
-        .icon {
-          &__on {
-            @include core.icon-on-shown;
-          }
-    
-          &__off {
-            @include core.icon-hidden;
-          }
-        }
-
-        forge-state-layer {
-          @include state-layer.provide-theme((
-            color: var(--_state-layer-on-color)
-          ));
-        }
-      }
-    }
-
-    /// Active styles
-    &:active {
-      ~ {
-        .track {
-          @include core.track-active;
-        }
-
-        .handle {
-          @include core.handle-active;
-
-          .icon {
-            @include core.icon-active;
-          }
-        }
-      }
-
-      /// Active on styles
-      &:checked ~ {
-        .track {
-          @include core.track-active-on;
-        }
-
-        .handle {
-          @include core.handle-active-on;
-
-          .icon {
-            @include core.icon-active-on;
-          }
-        }
-      }
-    }
   }
 
   .track {
@@ -115,7 +47,19 @@
   .icon {
     @include core.icon;
 
+    // TODO: Use when icon supports tokens
+    // @include icon.provide-theme((
+    //   font-size: #{token(icon-size)}
+    // ));
+    --forge-icon-font-size: #{token(icon-off-size)};
+
     &__on {
+      // TODO: Use when icon supports tokens
+      // @include icon.provide-theme((
+      //   font-size: #{token(icon-on-size)}
+      // ));
+      --forge-icon-font-size: #{token(icon-on-size)};
+
       @include core.icon-on;
       @include core.icon-hidden;
     }
@@ -132,35 +76,125 @@
   .hidden {
     display: none;
   }
+
+  ::slotted([slot=input]) {
+    @include core.input;
+  }
 }
 
-/// Dense styles
+// On
+:host([on]) {
+  .track {
+    @include core.track-on;
+  }
+
+  .handle {
+    @include core.handle-on;
+
+    .icon {
+      &__on {
+        @include core.icon-on-shown;
+      }
+
+      &__off {
+        @include core.icon-hidden;
+      }
+
+    }
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(state-layer-on-color)}
+    ));
+  }
+}
+
+// Active
+:host(:not([disabled]):not([readonly])) {
+  .forge-switch {
+    .container:active {
+      .track {
+        @include core.track-active;
+      }
+  
+      .handle {
+        @include core.handle-active;
+  
+        .icon {
+          @include core.icon-active;
+        }
+      }
+    }
+  }
+}
+:host(:not([disabled]):not([readonly])[on]) {
+  .forge-switch {
+    .container:active {
+      .track {
+        @include core.track-active-on;
+      }
+  
+      .handle {
+        @include core.handle-active-on;
+  
+        .icon {
+          @include core.icon-active-on;
+        }
+      }
+    }
+  }
+}
+
+// Dense
 :host([dense]) {
   .forge-switch {
     // Set the state layer width and height for use in calculations of other properties
-    --_current-state-layer-width: var(--_state-layer-dense-width);
-    --_current-state-layer-height: var(--_state-layer-dense-height);
+    #{declare(current-state-layer-width)}: #{token(state-layer-dense-width)};
+    #{declare(current-state-layer-height)}: #{token(state-layer-dense-height)};
+  }
+}
+
+// Disabled
+:host([disabled]) {
+  .forge-switch {
+    @include core.switch-disabled;
+
+    .container {
+      @include core.container-disabled;
+    }
+
+    .handle {
+      @include core.handle-disabled;
+    }
+  }
+}
+
+// Readonly
+:host([readonly]) {
+  .forge-switch {
+    .container {
+      @include core.container-disabled;
+    }
   }
 }
 
-/// Reduced motion styles
+// Reduced motion
 @media (prefers-reduced-motion) {
   .switch {
-    --_animation-duration: 0s;
+    @include override(animation-duration, 0s, value);
   }
 }
 
 forge-state-layer {
   @include state-layer.provide-theme((
-    color: var(--_state-layer-off-color)
+    color: #{token(state-layer-off-color)}
   ));
 }
 
-/* stylelint-disable length-zero-no-unit */
 forge-focus-indicator {
   @include focus-indicator.provide-theme((
-    shape: var(--_track-shape),
-    outward-offset: 0px
+    shape: #{token(track-shape)},
+    outward-offset: 0px // Requires unit
   ));
 }
-/* stylelint-enable length-zero-no-unit */

package/styles/table/_mixins.scss

@@ -113,10 +113,14 @@
             display: none;
           }
         }
-  
+
         &--sortable {
           @include head-cell-sortable(forge-table-head__cell-sort-icon, forge-table-head__cell__sort-order);
-  
+
+          button {
+            @include head-cell-sortable-button;
+          }
+
           &.forge-table-head__cell--sorted-ascending {
             .forge-table-head__cell-sort-icon {
               @include head-cell-sort-icon-ascending;
@@ -438,6 +442,20 @@
   }
 }
 
+@mixin head-cell-sortable-button {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  text-align: inherit;
+  margin: inherit;
+  padding-block: 4px;
+  padding-inline: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  outline-offset: 4px;
+}
+
 /// The base table body row styles for row interactions.
 @mixin body-row() {
   height: variables.$tbody-row-height;

package/styles/tabs/tab/_configuration.scss

@@ -3,67 +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)};
-  --_stacked-height: #{tab-tokens.get(stacked-height)};
-
-  // Disabled
-  --_disabled-opacity: #{tab-tokens.get(disabled-opacity)};
-
-  // 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)};
-  --_content-padding: #{tab-tokens.get(content-padding)};
-
-  // 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,13 +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';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, tab);
-}
+@use './token-utils' as *;
 
 @mixin host {
   display: inline-flex;
@@ -23,7 +18,7 @@
 }
 
 @mixin disabled {
-  opacity: var(--_disabled-opacity);
+  opacity: #{token(disabled-opacity)};
 }
 
 @mixin tab {
@@ -45,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;
@@ -60,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)};
   }
 }
 
@@ -125,10 +120,10 @@
   justify-content: center;
   white-space: nowrap;
   transition: 150ms color linear;
-  max-height: calc(var(--_content-height) + 2 * var(--_content-padding));
-  min-height: var(--_content-height);
-  padding: var(--_content-padding) calc(2 * var(--_content-padding));
-  gap: var(--_content-padding);
+  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;