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

package/styles/state-layer/_core.scss

@@ -3,13 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/utils';
-@use '../core/styles/tokens/state-layer/tokens';
 @use './configuration';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, state-layer);
-}
+@use './token-utils' as *;
 
 @mixin host {
   @include container;
@@ -49,13 +44,13 @@
 }
 
 @mixin hovered {
-  background-color: var(--_hover-color);
-  opacity: var(--_hover-opacity);
+  background-color: #{token(hover-color)};
+  opacity: #{token(hover-opacity)};
 }
 
 @mixin pressed {
-  opacity: var(--_pressed-opacity);
-  transition-duration: var(--_pressed-duration);
+  opacity: #{token(pressed-opacity)};
+  transition-duration: #{token(pressed-duration)};
 }
 
 @mixin layer-base {
@@ -64,20 +59,20 @@
 }
 
 @mixin hover-base {
-  background-color: var(--_hover-color);
+  background-color: #{token(hover-color)};
   inset: 0;
-  transition: opacity var(--_hover-duration) linear,
-              background-color var(--_hover-duration) linear;
+  transition: opacity #{token(hover-duration)} linear,
+              background-color #{token(hover-duration)} linear;
 }
 
 @mixin ripple-base {
   background: radial-gradient(
     closest-side,
-    var(--_pressed-color) max(calc(100% - 70px), 65%),
+    #{token(pressed-color)} max(calc(100% - 70px), 65%),
     transparent 100%
   );
   transform-origin: center center;
-  transition: opacity var(--_animation-duration) linear;
+  transition: opacity #{token(animation-duration)} linear;
 }
 
 ///
@@ -113,7 +108,7 @@
 
   &:active {
     .forge-state-layer::before {
-      opacity: var(--_pressed-opacity);
+      opacity: #{token(pressed-opacity)};
     }
   }
 }

package/styles/state-layer/_token-utils.scss

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

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

package/styles/state-layer/state-layer.scss

@@ -6,6 +6,10 @@
 @use './core';
 @use './configuration';
 
+//
+// Host
+//
+
 :host {
   @include core.host;
 }
@@ -20,6 +24,9 @@
 
 .forge-state-layer {
   @include configuration.configuration;
+}
+
+.forge-state-layer {
   @include core.surface;
 
   &--hovered::before {

package/styles/switch/_configuration.scss

@@ -3,93 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/switch/tokens' as switch-tokens;
+@use './token-utils' as *;
 
 @mixin configuration {
-  // Shared
-  --_handle-size: #{switch-tokens.get(handle-size)};
-  --_handle-scale: #{switch-tokens.get(handle-scale)};
-  --_handle-elevation: #{switch-tokens.get(handle-elevation)};
-  --_track-border-width: #{switch-tokens.get(track-border-width)};
-  --_track-border-color: #{switch-tokens.get(track-border-color)};
-  --_icon-color: #{switch-tokens.get(icon-color)};
-  --_icon-scale: #{switch-tokens.get(icon-scale)};
-  --_state-layer-size: #{switch-tokens.get(state-layer-size)};
-  --_state-layer-dense-size: #{switch-tokens.get(state-layer-dense-size)};
-
-  // Handle
-  --_handle-on-color: #{switch-tokens.get(handle-on-color)};
-  --_handle-off-color: #{switch-tokens.get(handle-off-color)};
-  --_handle-width: #{switch-tokens.get(handle-width)};
-  --_handle-height: #{switch-tokens.get(handle-height)};
-  --_handle-on-scale: #{switch-tokens.get(handle-on-scale)};
-  --_handle-off-scale: #{switch-tokens.get(handle-off-scale)};
-  --_handle-shape: #{switch-tokens.get(handle-shape)};
-  --_handle-on-elevation: #{switch-tokens.get(handle-on-elevation)};
-  --_handle-off-elevation: #{switch-tokens.get(handle-off-elevation)};
-
-  // Track
-  --_track-on-color: #{switch-tokens.get(track-on-color)};
-  --_track-off-color: #{switch-tokens.get(track-off-color)};
-  --_track-width: #{switch-tokens.get(track-width)};
-  --_track-height: #{switch-tokens.get(track-height)};
-  --_track-shape: #{switch-tokens.get(track-shape)};
-  --_track-on-border-width: #{switch-tokens.get(track-on-border-width)};
-  --_track-off-border-width: #{switch-tokens.get(track-off-border-width)};
-  --_track-on-border-color: #{switch-tokens.get(track-on-border-color)};
-  --_track-off-border-color: #{switch-tokens.get(track-off-border-color)};
-
-  // Icon
-  --_icon-on-color: #{switch-tokens.get(icon-on-color)};
-  --_icon-off-color: #{switch-tokens.get(icon-off-color)};
-  --_icon-on-size: #{switch-tokens.get(icon-on-size)};
-  --_icon-off-size: #{switch-tokens.get(icon-off-size)};
-  --_icon-on-scale: #{switch-tokens.get(icon-on-scale)};
-  --_icon-off-scale: #{switch-tokens.get(icon-off-scale)};
-
-  // Label
-  --_gap: #{switch-tokens.get(gap)};
-  --_justify: #{switch-tokens.get(justify)};
-  --_direction: #{switch-tokens.get(direction)};
-
-  // State layer
-  --_state-layer-width: #{switch-tokens.get(state-layer-width)};
-  --_state-layer-height: #{switch-tokens.get(state-layer-height)};
-  --_state-layer-on-color: #{switch-tokens.get(state-layer-on-color)};
-  --_state-layer-off-color: #{switch-tokens.get(state-layer-off-color)};
-
-  // Dense
-  --_state-layer-dense-width: #{switch-tokens.get(state-layer-dense-width)};
-  --_state-layer-dense-height: #{switch-tokens.get(state-layer-dense-height)};
-
-  // Disabled
-  --_disabled-opacity: #{switch-tokens.get(disabled-opacity)};
-
-  // Active
-  --_handle-active-on-color: #{switch-tokens.get(handle-active-on-color)};
-  --_handle-active-off-color: #{switch-tokens.get(handle-active-off-color)};
-  --_handle-active-scale: #{switch-tokens.get(handle-active-scale)};
-  --_handle-active-on-scale: #{switch-tokens.get(handle-active-on-scale)};
-  --_handle-active-off-scale: #{switch-tokens.get(handle-active-off-scale)};
-  --_handle-active-elevation: #{switch-tokens.get(handle-active-elevation)};
-  --_handle-active-on-elevation: #{switch-tokens.get(handle-active-on-elevation)};
-  --_handle-active-off-elevation: #{switch-tokens.get(handle-active-off-elevation)};
-
-  --_track-active-on-color: #{switch-tokens.get(track-active-on-color)};
-  --_track-active-off-color: #{switch-tokens.get(track-active-off-color)};
-  --_track-active-on-border-width: #{switch-tokens.get(track-active-on-border-width)};
-  --_track-active-off-border-width: #{switch-tokens.get(track-active-off-border-width)};
-  --_track-active-on-border-color: #{switch-tokens.get(track-active-on-border-color)};
-  --_track-active-off-border-color: #{switch-tokens.get(track-active-off-border-color)};
-
-  --_icon-active-on-color: #{switch-tokens.get(icon-active-on-color)};
-  --_icon-active-off-color: #{switch-tokens.get(icon-active-off-color)};
-  --_icon-active-scale: #{switch-tokens.get(icon-active-scale)};
-  --_icon-active-on-scale: #{switch-tokens.get(icon-active-on-scale)};
-  --_icon-active-off-scale: #{switch-tokens.get(icon-active-off-scale)};
-
-  // Animation
-  --_animation-duration: #{switch-tokens.get(animation-duration)};
-  --_animation-timing: #{switch-tokens.get(animation-timing)};
-  --_active-animation-timing: #{switch-tokens.get(active-animation-timing)};
+  @include tokens;
 }

package/styles/switch/_core.scss

@@ -4,53 +4,42 @@
  * License: Apache-2.0
  */
 @use '../core/styles/typography';
-@use '../core/styles/utils';
-@use '../core/styles/tokens/switch/tokens';
+@use './token-utils' as *;
 
 // The tallest element may be absolutely positioned so the container needs to
 // be manually sized to match.
-$_container-block-size: max(var(--_handle-height), var(--_track-height), var(--_current-state-layer-height));
+$_container-block-size: max(#{token(handle-height)}, #{token(track-height)}, #{token(current-state-layer-height, custom)});
 
 // The effective track border radius, for use in other calculations.
-$_track-border-radius: calc(var(--_track-height) / 2);
+$_track-border-radius: calc(#{token(track-height)} / 2);
 
 // Returns the wider of the handle width and state layer width.
-$_max-handle-inline-size: max(var(--_handle-width), var(--_current-state-layer-width));
+$_max-handle-inline-size: max(#{token(handle-width)}, #{token(current-state-layer-width, custom)});
 
 // Offsets the track to place the center of its border caps at the center of
 // the handle's off and on positions.
 $_track-margin-inline: calc(#{$_max-handle-inline-size} / 2 - #{$_track-border-radius});
 
 // The x translation of the handle in its on state.
-$_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, switch);
-}
+$_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2);
 
 @mixin host {
   display: inline-block;
-
-  cursor: pointer;
-}
-
-@mixin host-disabled {
-  opacity: var(--_disabled-opacity);
-
-  cursor: not-allowed;
 }
 
 @mixin switch {
   position: relative;
-  flex-direction: var(--_direction);
+  flex-direction: #{token(direction)};
   flex-shrink: 0;
   align-items: center;
-  justify-content: var(--_justify);
-  gap: var(--_gap);
+  justify-content: #{token(justify)};
+  gap: #{token(gap)};
 
   display: flex;
+}
 
-  cursor: unset;
+@mixin switch-disabled {
+  opacity: #{token(disabled-opacity)};
 }
 
 @mixin input {
@@ -74,44 +63,50 @@ $_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
   display: flex;
 
   block-size: #{$_container-block-size};
+
+  cursor: pointer;
+}
+
+@mixin container-disabled {
+  cursor: not-allowed;
 }
 
 @mixin track {
   transition-property: background-color, border-color, border-width;
-  transition-duration: var(--_animation-duration);
-  transition-timing-function: var(--_animation-timing);
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(animation-timing)};
 
   box-sizing: border-box;
   margin-inline: #{$_track-margin-inline};
-  border-width: var(--_track-off-border-width);
-  border-color: var(--_track-off-border-color);
+  border-width: #{token(track-off-border-width)};
+  border-color: #{token(track-off-border-color)};
   border-style: solid;
-  border-radius: var(--_track-shape);
-  inline-size: var(--_track-width);
-  block-size: var(--_track-height);
+  border-radius: #{token(track-shape)};
+  inline-size: #{token(track-width)};
+  block-size: #{token(track-height)};
 
-  background-color: var(--_track-off-color);
+  background-color: #{token(track-off-color)};
 }
 
 @mixin track-on {
-  border-width: var(--_track-on-border-width);
-  border-color: var(--_track-on-border-color);
+  border-width: #{token(track-on-border-width)};
+  border-color: #{token(track-on-border-color)};
 
-  background-color: var(--_track-on-color);
+  background-color: #{token(track-on-color)};
 }
 
 @mixin track-active {
-  border-width: var(--_track-active-off-border-width);
-  border-color: var(--_track-active-off-border-color);
+  border-width: #{token(track-active-off-border-width)};
+  border-color: #{token(track-active-off-border-color)};
 
-  background-color: var(--_track-active-off-color);
+  background-color: #{token(track-active-off-color)};
 }
 
 @mixin track-active-on {
-  border-width: var(--_track-active-on-border-width);
-  border-color: var(--_track-active-on-border-color);
+  border-width: #{token(track-active-on-border-width)};
+  border-color: #{token(track-active-on-border-color)};
 
-  background-color: var(--_track-active-on-color);
+  background-color: #{token(track-active-on-color)};
 }
 
 @mixin handle {
@@ -122,12 +117,12 @@ $_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
   display: flex;
 
   transition-property: translate;
-  transition-duration: var(--_animation-duration);
-  transition-timing-function: var(--_animation-timing);
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(animation-timing)};
 
-  border-radius: var(--_handle-shape);
-  inline-size: var(--_current-state-layer-width);
-  block-size: var(--_current-state-layer-height);
+  border-radius: #{token(handle-shape)};
+  inline-size: #{token(current-state-layer-width, custom)};
+  block-size: #{token(current-state-layer-height, custom)};
 
   &::before {
     content: '';
@@ -135,19 +130,19 @@ $_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
     position: relative;
 
     display: block;
-    scale: var(--_handle-off-scale);
+    scale: #{token(handle-off-scale)};
 
     transition:
-      background-color var(--_animation-duration) var(--_animation-timing),
-      box-shadow var(--_animation-duration) var(--_animation-timing),
-      scale var(--_animation-duration) var(--_active-animation-timing);
+      background-color #{token(animation-duration)} #{token(animation-timing)},
+      box-shadow #{token(animation-duration)} #{token(animation-timing)},
+      scale #{token(animation-duration)} #{token(active-animation-timing)};
 
-    box-shadow: var(--_handle-off-elevation);
-    border-radius: var(--_handle-shape);
-    inline-size: var(--_handle-width);
-    block-size: var(--_handle-height);
+    box-shadow: #{token(handle-off-elevation)};
+    border-radius: #{token(handle-shape)};
+    inline-size: #{token(handle-width)};
+    block-size: #{token(handle-height)};
 
-    background-color: var(--_handle-off-color);
+    background-color: #{token(handle-off-color)};
   }
 }
 
@@ -155,37 +150,41 @@ $_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
   translate: #{$_handle-on-translate};
 
   &::before {
-    scale: var(--_handle-on-scale);
+    scale: #{token(handle-on-scale)};
 
-    box-shadow: var(--_handle-on-elevation);
+    box-shadow: #{token(handle-on-elevation)};
 
-    background-color: var(--_handle-on-color);
+    background-color: #{token(handle-on-color)};
   }
 }
 
 @mixin handle-active {
   &::before {
-    scale: var(--_handle-active-off-scale);
+    scale: #{token(handle-active-off-scale)};
 
-    box-shadow: var(--_handle-active-off-elevation);
+    box-shadow: #{token(handle-active-off-elevation)};
 
-    background-color: var(--_handle-active-off-color);
+    background-color: #{token(handle-active-off-color)};
   }
 }
 
 @mixin handle-active-on {
   &::before {
-    scale: var(--_handle-active-on-scale);
+    scale: #{token(handle-active-on-scale)};
 
-    box-shadow: var(--_handle-active-on-elevation);
+    box-shadow: #{token(handle-active-on-elevation)};
 
-    background-color: var(--_handle-active-on-color);
+    background-color: #{token(handle-active-on-color)};
   }
 }
 
-@mixin icon {
-  --forge-icon-font-size: var(--_icon-off-size);
+@mixin handle-disabled {
+  &::before {
+    box-shadow: none;
+  }
+}
 
+@mixin icon {
   position: absolute;
   align-items: center;
   justify-content: center;
@@ -193,52 +192,50 @@ $_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
   display: flex;
 
   transition-property: opacity, scale;
-  transition-duration: var(--_animation-duration);
-  transition-timing-function: var(--_animation-timing);
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(animation-timing)};
 
-  inline-size: var(--_icon-off-size);
-  block-size: var(--_icon-off-size);
+  inline-size: #{token(icon-off-size)};
+  block-size: #{token(icon-off-size)};
 
-  color: var(--_icon-off-color);
-  fill: var(--_icon-off-color);
+  color: #{token(icon-off-color)};
+  fill: #{token(icon-off-color)};
 
-  font-size: var(--_icon-off-size);
+  font-size: #{token(icon-off-size)};
 }
 
 @mixin icon-on {
-  --forge-icon-font-size: var(--_icon-on-size);
-
-  inline-size: var(--_icon-on-size);
-  block-size: var(--_icon-on-size);
+  inline-size: #{token(icon-on-size)};
+  block-size: #{token(icon-on-size)};
 
-  color: var(--_icon-on-color);
-  fill: var(--_icon-on-color);
+  color: #{token(icon-on-color)};
+  fill: #{token(icon-on-color)};
 
-  font-size: var(--_icon-on-size);
+  font-size: #{token(icon-on-size)};
 }
 
 @mixin icon-active {
-  scale: var(--_icon-active-off-scale);
+  scale: #{token(icon-active-off-scale)};
 
-  color: var(--_icon-active-off-color);
-  fill: var(--_icon-active-off-color);
+  color: #{token(icon-active-off-color)};
+  fill: #{token(icon-active-off-color)};
 }
 
 @mixin icon-active-on {
-  scale: var(--_icon-active-on-scale);
+  scale: #{token(icon-active-on-scale)};
 
-  color: var(--_icon-active-on-color);
-  fill: var(--_icon-active-on-color);
+  color: #{token(icon-active-on-color)};
+  fill: #{token(icon-active-on-color)};
 }
 
 @mixin icon-on-shown {
   opacity: 1;
-  scale: var(--_icon-on-scale);
+  scale: #{token(icon-on-scale)};
 }
 
 @mixin icon-off-shown {
   opacity: 1;
-  scale: var(--_icon-off-scale);
+  scale: #{token(icon-off-scale)};
 }
 
 @mixin icon-hidden {

package/styles/switch/_token-utils.scss

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

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