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

package/styles/slider/_core.scss

@@ -3,30 +3,25 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/utils';
-@use '../core/styles/tokens/slider/tokens';
 @use '../core/styles/elevation';
 @use '../core/styles/typography';
 @use '../core/styles/animation';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, slider);
-}
+@use './token-utils' as *;
 
 // The max clip is reduced by 1 full tick display which is 2x the container
 // size to account for always showing the active track on the outside
 // edge of the last tick.
-$_active-track-max-clip: calc(100% - var(--_with-tick-marks-container-size) * 2);
+$_active-track-max-clip: calc(100% - #{token(with-tick-marks-container-size)} * 2);
 
 // When the start fraction is !0, add clipping by the tick container size
-$_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
-$_active-track-start-offset: calc(var(--_with-tick-marks-container-size) * $_start-fraction-not-zero);
-$_active-track-start-clip: calc($_active-track-start-offset + $_active-track-max-clip * var(--_start-fraction));
+$_start-fraction-not-zero: min(#{token(start-fraction, custom)} * 1e9, 1);
+$_active-track-start-offset: calc(#{token(with-tick-marks-container-size)} * #{$_start-fraction-not-zero});
+$_active-track-start-clip: calc(#{$_active-track-start-offset} + #{$_active-track-max-clip} * #{token(start-fraction, custom)});
 
 // When the end fraction is !1, add clipping by the tick container size
-$_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
-$_active-track-end-offset: calc(var(--_with-tick-marks-container-size) * $_end-fraction-not-one);
-$_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-clip * (1 - var(--_end-fraction)));
+$_end-fraction-not-one: min((1 - #{token(end-fraction, custom)}) * 1e9, 1);
+$_active-track-end-offset: calc(#{token(with-tick-marks-container-size)} * #{$_end-fraction-not-one});
+$_active-track-end-clip: calc(#{$_active-track-end-offset} + #{$_active-track-max-clip} * (1 - #{token(end-fraction, custom)}));
 
 @mixin container {
   display: inline-flex;
@@ -39,7 +34,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
   display: flex;
   align-items: center;
   position: relative;
-  block-size: var(--_state-layer-size);
+  block-size: #{token(state-layer-size)};
   pointer-events: none;
   touch-action: none;
 }
@@ -48,8 +43,8 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
   // Clip the inputs to the space left/right of the center point between the
   // values so the right input gets pointer events.
   $_clip-to-start: calc(
-    var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
-    (var(--_start-fraction) + ((var(--_end-fraction) - var(--_start-fraction)) / 2))
+    #{token(state-layer-size)} / 2 + (100% - #{token(state-layer-size)}) *
+    (#{token(start-fraction, custom)} + ((#{token(end-fraction, custom)} - #{token(start-fraction, custom)}) / 2))
   );
 
   $_clip-to-end: calc(100% - $_clip-to-start);
@@ -85,40 +80,34 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin track-dimensions {
-  $_track-padding: calc((var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size));
+  $_track-padding: calc((#{token(state-layer-size)} / 2) - #{token(with-tick-marks-container-size)});
 
   position: absolute;
   inset-inline-start: $_track-padding;
   inset-inline-end: $_track-padding;
-  background-size: calc((100% - var(--_with-tick-marks-container-size) * 2) / var(--_tick-count)) 100%;
+  background-size: calc((100% - #{token(with-tick-marks-container-size)} * 2) / #{token(tick-count, custom)}) 100%;
 }
 
 @mixin track-active {
-  block-size: var(--_active-track-height);
-  border-radius: var(--_active-track-shape);
+  block-size: #{token(active-track-height)};
+  border-radius: #{token(active-track-shape)};
   clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
-  background-color: var(--_active-track-color);
+  background-color: #{token(active-track-color)};
 }
 
 @mixin track-inactive {
-  block-size: var(--_inactive-track-height);
-  border-radius: var(--_inactive-track-shape);
-
-  // TODO: remove this and the @supports check below when we're confident that color-mix is more widely supported
-  background-color: var(--_inactive-track-color-fallback);
-
-  @supports (background-color: color-mix(in srgb, red 50%, transparent)) {
-    background-color: var(--_inactive-track-color);
-  }
+  block-size: #{token(inactive-track-height)};
+  border-radius: #{token(inactive-track-shape)};
+  background-color: #{token(inactive-track-color)};
 }
 
 @mixin track-active-disabled {
-  background-color: var(--_disabled-active-track-color);
+  background-color: #{token(disabled-active-track-color)};
 }
 
 @mixin track-inactive-disabled {
-  opacity: calc((1 / var(--_disabled-active-track-opacity)) * var(--_disabled-inactive-track-opacity));
-  background-color: var(--_disabled-inactive-track-color);
+  opacity: calc((1 / #{token(disabled-active-track-opacity)}) * #{token(disabled-inactive-track-opacity)});
+  background-color: #{token(disabled-inactive-track-color)};
 }
 
 @mixin rtl-track-clipping {
@@ -126,19 +115,19 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin tickmarks-inactive {
-  background-image: get-tick-image('var(--_with-tick-marks-inactive-container-color)');
+  background-image: get-tick-image(#{token(with-tick-marks-inactive-container-color)});
 }
 
 @mixin tickmarks-active {
-  background-image: get-tick-image('var(--_with-tick-marks-active-container-color)');
+  background-image: get-tick-image(#{token(with-tick-marks-active-container-color)});
 }
 
 @mixin tickmarks-active-disabled {
-  background-image: get-tick-image('var(--_with-tick-marks-disabled-active-container-color)');
+  background-image: get-tick-image(#{token(with-tick-marks-disabled-active-container-color)});
 }
 
 @mixin tickmarks-inactive-disabled {
-  background-image: get-tick-image('var(--_with-tick-marks-disabled-inactive-container-color)');
+  background-image: get-tick-image(#{token(with-tick-marks-disabled-inactive-container-color)});
 }
 
 @mixin handle-container-dimensions {
@@ -148,85 +137,85 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handle-container-padded {
-  padding-inline: calc(var(--_state-layer-size) / 2);
+  padding-inline: calc(#{token(state-layer-size)} / 2);
 }
 
 @mixin handle-container {
   position: absolute;
   inset-block-start: 0;
   inset-block-end: 0;
-  inset-inline-start: calc(100% * var(--_start-fraction));
-  inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)));
+  inset-inline-start: calc(100% * #{token(start-fraction, custom)});
+  inline-size: calc(100% * (#{token(end-fraction, custom)} - #{token(start-fraction, custom)}));
 }
 
 @mixin handle {
   position: absolute;
-  block-size: var(--_state-layer-size);
-  inline-size: var(--_state-layer-size);
-  border-radius: var(--_handle-shape);
+  block-size: #{token(state-layer-size)};
+  inline-size: #{token(state-layer-size)};
+  border-radius: #{token(handle-shape)};
   display: grid;
   place-items: center;
 }
 
 @mixin handle-start {
-  inset-inline-start: calc(0px - var(--_state-layer-size) / 2);
+  inset-inline-start: calc(0px - #{token(state-layer-size)} / 2);
 }
 
 @mixin handle-end {
-  inset-inline-end: calc(0px - var(--_state-layer-size) / 2);
+  inset-inline-end: calc(0px - #{token(state-layer-size)} / 2);
 }
 
 @mixin handle-thumb {
   @include elevation.box-shadow(1);
 
   position: absolute;
-  height: var(--_handle-height);
-  width: var(--_handle-width);
-  border-radius: var(--_handle-shape);
-  background: var(--_handle-color);
+  height: #{token(handle-height)};
+  width: #{token(handle-width)};
+  border-radius: #{token(handle-shape)};
+  background: #{token(handle-color)};
 }
 
 @mixin handle-thumb-hover {
-  background: var(--_hover-handle-color);
+  background: #{token(hover-handle-color)};
 }
 
 @mixin handle-thumb-pressed {
-  background: var(--_pressed-handle-color);
+  background: #{token(pressed-handle-color)};
 }
 
 @mixin handle-thumb-focused {
-  background: var(--_focus-handle-color);
+  background: #{token(focus-handle-color)};
 }
 
 @mixin handle-thumb-disabled {
   @include elevation.box-shadow(0);
 
-  background: var(--_disabled-handle-color);
+  background: #{token(disabled-handle-color)};
 }
 
 @mixin handle-label {
-  @include typography.style(label, [color font-weight]);
+  @include typography.style(label, $exclude: [font-weight]);
 
   position: absolute;
   box-sizing: border-box;
   display: grid;
   padding: 4px;
   place-items: center;
-  border-radius: var(--_label-container-shape);
-  color: var(--_label-text-color);
+  border-radius: #{token(label-container-shape)};
+  color: #{token(label-text-color)};
   font-weight: 500;
   white-space: nowrap;
   inset-block-end: 100%;
-  min-inline-size: var(--_label-container-height);
-  min-block-size: var(--_label-container-height);
-  background: var(--_label-container-color);
+  min-inline-size: #{token(label-container-height)};
+  min-block-size: #{token(label-container-height)};
+  background: #{token(label-container-color)};
   transition: transform animation.variable(duration-short2) animation.variable(easing-standard);
   transform-origin: center bottom;
   transform: scale(0);
 }
 
 @mixin handle-label-disabled {
-  background: var(--_disabled-handle-color);
+  background: #{token(disabled-handle-color)};
 }
 
 @mixin handle-label-content {
@@ -245,10 +234,10 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handle-label-bottom {
-  $_triangle-size: calc(var(--_label-container-height) / 2);
+  $_triangle-size: calc(#{token(label-container-height)} / 2);
   inline-size: $_triangle-size;
   block-size: $_triangle-size;
-  bottom: calc(var(--_label-container-height) / -10);
+  bottom: calc(#{token(label-container-height)} / -10);
   transform: rotate(45deg);
 }
 
@@ -261,7 +250,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handles-overlapping {
-  border: var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width);
+  border: #{token(with-overlap-handle-outline-color)} solid #{token(with-overlap-handle-outline-width)};
 }
 
 @mixin on-top {
@@ -296,8 +285,8 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    block-size: var(--_state-layer-size);
-    inline-size: var(--_state-layer-size);
+    block-size: #{token(state-layer-size)};
+    inline-size: #{token(state-layer-size)};
     transform: scaleX(0);
     opacity: 0;
     z-index: 2;
@@ -305,8 +294,8 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 
   &::-moz-range-thumb {
     appearance: none;
-    block-size: var(--_state-layer-size);
-    inline-size: var(--_state-layer-size);
+    block-size: #{token(state-layer-size)};
+    inline-size: #{token(state-layer-size)};
     transform: scaleX(0);
     opacity: 0;
     z-index: 2;
@@ -321,10 +310,10 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 // Returns a background-image with sized circular ticks of the given color.
 @function get-tick-image($color) {
   @return radial-gradient(
-    circle at var(--_with-tick-marks-container-size) center,
+    circle at #{token(with-tick-marks-container-size)} center,
     #{$color} 0,
-    #{$color} calc(var(--_with-tick-marks-container-size) / 2),
-    transparent calc(var(--_with-tick-marks-container-size) / 2)
+    #{$color} calc(#{token(with-tick-marks-container-size)} / 2),
+    transparent calc(#{token(with-tick-marks-container-size)} / 2)
   );
 }
 

package/styles/slider/_token-utils.scss

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

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

package/styles/slider/slider.scss

@@ -7,6 +7,11 @@
 @use './configuration';
 @use '../focus-indicator';
 @use '../state-layer';
+@use './token-utils' as *;
+
+//
+// Host
+//
 
 :host {
   @include core.container;
@@ -16,8 +21,15 @@
   display: none;
 }
 
+//
+// Base
+//
+
 .forge-slider {
   @include configuration.configuration;
+}
+
+.forge-slider {
   @include core.slider;
 
   &.range {
@@ -25,6 +37,10 @@
   }
 }
 
+//
+// Track
+//
+
 .track {
   @include core.track;
 
@@ -54,6 +70,10 @@
   }
 }
 
+//
+// Handle
+//
+
 .handle-container-padded,
 .handle-container-block {
   @include core.handle-container-dimensions;
@@ -116,6 +136,10 @@
   }
 }
 
+//
+// Disabled
+//
+
 :host([disabled]) {
   .handle-thumb {
     @include core.handle-thumb-disabled;
@@ -136,11 +160,11 @@
 
     &.tickmarks {
       &::before {
-        @include core.tickmarks-active-disabled;
+        @include core.tickmarks-inactive-disabled;
       }
 
       &::after {
-        @include core.tickmarks-inactive-disabled;
+        @include core.tickmarks-active-disabled;
       }
     }
   }
@@ -191,15 +215,14 @@ input[type=range] {
 }
 
 forge-focus-indicator {
-  /* stylelint-disable length-zero-no-unit */
   @include focus-indicator.provide-theme((
     shape: 50%,
-    outward-offset: 0px
+    outward-offset: 0px // Requires unit
   ));
 }
 
 forge-state-layer {
   @include state-layer.provide-theme((
-    color: var(--_handle-color)
+    color: #{token(handle-color)}
   ));
 }

package/styles/split-button/_configuration.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin configuration {
+  @include tokens;
+
+  #{declare(focus-indicator-offset-adjusted)}: calc(#{token(focus-indicator-offset)} + #{token(focus-indicator-divider-offset)} * 2);
+}

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

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

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './configuration';
+@forward './token-utils' show provide-theme;

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

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './configuration';
+@use './token-utils' as *;
+@use '../button';
+@use '../icon-button';
+@use '../focus-indicator';
+
+//
+// Host
+//
+
+:host {
+  @include configuration.configuration;
+}
+
+:host {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Button overrides
+//
+
+::slotted(*) {
+  @include button.provide-theme((
+    min-width: #{token(min-width)},
+    focus-indicator-offset: #{token(focus-indicator-offset)}
+  ));
+}
+
+::slotted(:first-child) {
+  @include button.provide-theme((
+    shape-start-end-radius: 0,
+    shape-end-end-radius: 0
+  ));
+
+  @include focus-indicator.provide-theme((
+    shape-start-end: 0,
+    shape-end-end: 0,
+    offset-inline: 0 #{token(focus-indicator-offset-adjusted, custom)}
+  ));
+}
+
+::slotted(:not(:first-child):not(:last-child)) {
+  @include button.provide-theme(( shape: 0 ));
+
+  @include focus-indicator.provide-theme((
+    shape: 0,
+    offset-inline: #{token(focus-indicator-offset-adjusted, custom)}
+  ));
+}
+
+::slotted(:last-child) {
+  @include button.provide-theme((
+    shape-start-start-radius: 0,
+    shape-end-start-radius: 0
+  ));
+
+  @include focus-indicator.provide-theme((
+    shape-start-start: 0,
+    shape-end-start: 0,
+    offset-inline: #{token(focus-indicator-offset-adjusted, custom)} 0
+  ));
+}
+
+
+//
+// Outlined
+//
+
+:host([variant=outlined]) {
+  ::slotted(:not(:first-child)) {
+    margin-inline-start: calc(-1 * #{token(gap)});
+  }
+
+  @include override(focus-indicator-divider-offset, 0px, value); // Required unit
+}
+
+//
+// Tonal, Filled, and Raised
+//
+
+:host(:is([variant=tonal],[variant=filled],[variant=raised],:not([variant]))) {
+  ::slotted(:not(:last-child)) {
+    margin-inline-end: #{token(gap)};
+  }
+}

package/styles/state-layer/_configuration.scss

@@ -3,15 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/state-layer/tokens';
+@use './token-utils' as *; 
 
 @mixin configuration {
-  --_color: #{tokens.get(color)};
-  --_hover-color: #{tokens.get(hover-color)};
-  --_hover-opacity: #{tokens.get(hover-opacity)};
-  --_pressed-color: #{tokens.get(pressed-color)};
-  --_pressed-opacity: #{tokens.get(pressed-opacity)};
-  --_hover-duration: #{tokens.get(hover-duration)};
-  --_pressed-duration: #{tokens.get(pressed-duration)};
-  --_animation-duration: #{tokens.get(animation-duration)};
+  @include tokens;
 }

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)};
     }
   }
 }