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

package/styles/icon-button/icon-button.scss

@@ -0,0 +1,349 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './configuration' as *;
+@use './core';
+@use '../core/styles/theme';
+@use '../state-layer';
+@use '../focus-indicator';
+@use '../circular-progress';
+@use './token-utils' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host-configuration;
+}
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-icon-button {
+  @include configuration;
+}
+
+.forge-icon-button {
+  @include core.base;
+  
+  ::slotted(:is([slot=start],[slot=end])) {
+    @include core.slotted-start-end;
+  }
+}
+
+a {
+  @include core.anchor-base;
+}
+
+//
+// Focus indicator
+//
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(focus-indicator-color)},
+    shape-start-start: #{token(shape-start-start)},
+    shape-start-end: #{token(shape-start-end)},
+    shape-end-start: #{token(shape-end-start)},
+    shape-end-end: #{token(shape-end-end)}
+  ));
+}
+
+:host(:is([variant=icon],:not([variant]))) {
+  @include focus-indicator.provide-theme((
+    outward-offset: 0px // Requires unit
+  ));
+}
+
+//
+// State layer 
+//
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(icon-color)}
+  ));
+}
+
+//
+// Popover icon
+//
+
+:host([popover-icon]) {
+  .forge-icon-button {
+    @include override(padding, popover-icon-padding);
+  }
+}
+
+//
+// Variants
+//
+
+:host([variant=outlined]) {
+  .forge-icon-button {
+    @include core.outlined;
+  }
+}
+
+:host([variant=tonal]) {
+  .forge-icon-button {
+    @include core.tonal;
+  }
+}
+
+:host(:is([variant=filled],[variant=raised])) {
+  .forge-icon-button {
+    @include core.filled;
+  }
+}
+
+:host([variant=raised]) {
+  .forge-icon-button {
+    @include core.raised;
+  }
+}
+
+//
+// Toggle
+//
+
+:host(:is(:not([toggle]),[toggle]:not([on]))) {
+  slot[name=on] {
+    display: none;
+  }
+}
+
+:host([toggle][on]) {
+  slot:not([name]) {
+    display: none;
+  }
+}
+
+:host([toggle][on]:is(:not([variant]),[variant=icon])) {
+  .forge-icon-button {
+    @include core.toggle-on-icon;
+  }
+}
+
+:host([toggle][on][variant=outlined]) {
+  .forge-icon-button {
+    @include core.toggle-on-outlined;
+  }
+}
+
+:host([toggle]:not([on])[variant=tonal]) {
+  .forge-icon-button {
+    @include core.toggle-tonal;
+  }
+}
+
+:host([toggle][on][variant=tonal]) {
+  .forge-icon-button {
+    @include core.toggle-on-tonal;
+  }
+}
+
+:host([toggle]:not([on]):is([variant=filled],[variant=raised])) {
+  .forge-icon-button {
+    @include core.toggle-filled;
+  }
+}
+
+:host([toggle][on]:is([variant=filled],[variant=raised])) {
+  .forge-icon-button {
+    @include core.toggle-on-filled;
+  }
+}
+
+//
+// Badge
+//
+
+::slotted([slot=badge]) {
+  position: absolute;
+  top: 0;
+  left: 60%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+::slotted(forge-badge[slot=badge][dot]) {
+  top: 8px;
+}
+
+:host(:is([dense],[density=small],[density=medium])) {
+  ::slotted(forge-badge[slot=badge]:not([dot])) {
+    top: -25%;
+  }
+
+  ::slotted(forge-badge[slot=badge][dot]) {
+    top: 0;
+  }
+}
+
+
+//
+// Circular progress
+//
+
+::slotted(forge-circular-progress) {
+  @include circular-progress.provide-theme((
+    indicator-color: #{token(icon-color)},
+    track-color: transparent,
+    size: 1em
+  ));
+}
+
+//
+// Density
+//
+
+:host(:is([dense],[density=small])) {
+  .forge-icon-button {
+    @include core.density-small;
+  }
+
+  ::slotted(*) {
+    @include core.density-small-slotted;
+  }
+}
+
+:host([density=medium]) {
+  .forge-icon-button {
+    @include core.density-medium;
+  }
+}
+
+//
+// Shape
+//
+
+:host([shape=squared]) {
+  .forge-icon-button {
+    @include override(shape, shape-squared);
+  }
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include core.host-disabled;
+
+  .forge-icon-button {
+    @include core.disabled;
+  }
+}
+
+:host([disabled][variant=raised]) {
+  .forge-icon-button {
+    @include core.raised-disabled;
+  }
+}
+
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  // Non-toggle + icon (default) & outlined variants
+  :host(:not([toggle])[theme=#{$theme}]:is(:not([variant]),[variant=icon],[variant=outlined])) {
+    .forge-icon-button {
+      @include override(icon-color, theme.variable($theme), value);
+    }
+  }
+
+  // Toggle + icon (default)
+  :host([toggle][theme=#{$theme}]:is(:not([variant]),[variant=icon])) {
+    .forge-icon-button {
+      @include override(toggle-on-icon-color, theme.variable($theme), value);
+    }
+  }
+
+  // Toggle + outlined
+  :host([toggle][theme=#{$theme}][variant=outlined]) {
+    .forge-icon-button {
+      @include override(icon-color, theme.variable($theme), value);
+      @include override(outlined-toggle-on-background-color, theme.variable(#{$theme}-container-low), value);
+      @include override(outlined-toggle-on-icon-color, theme.variable($theme), value);
+    }
+  }
+
+  // Primary theme is the default for filled and tonal variants
+  @if ($theme != 'primary') {
+    // Non-toggle + tonal variant
+    :host(:not([toggle])[theme=#{$theme}][variant=tonal]) {
+      .forge-icon-button {
+        @include override(icon-color, theme.variable(on-#{$theme}-container), value);
+        @include override(background-color, theme.variable(#{$theme}-container), value);
+      }
+    }
+
+    // Toggle + tonal variant
+    :host([toggle]:not([on])[theme=#{$theme}][variant=tonal]) {
+      .forge-icon-button {
+        @include override(background-color, theme.variable(#{$theme}-container-low), value);
+      }
+    }
+
+    // Toggle (on) + tonal variant
+    :host([toggle][theme=#{$theme}][variant=tonal]) {
+      .forge-icon-button {
+        @include override(tonal-toggle-on-background-color, theme.variable(#{$theme}-container), value);
+        @include override(tonal-toggle-on-icon-color, theme.variable(on-#{$theme}-container), value);
+      }
+    }
+
+    // Non-toggle + filled & raised variants
+    :host(:not([toggle])[theme=#{$theme}]:is([variant=filled],[variant=raised])) {
+      .forge-icon-button {
+        @include override(icon-color, theme.variable(on-#{$theme}), value);
+        @include override(background-color, theme.variable($theme), value);
+      }
+    }
+
+    // Toggle + filled & raised variants
+    :host([toggle]:not([on])[theme=#{$theme}]:is([variant=filled],[variant=raised])) {
+      .forge-icon-button {
+        @include override(icon-color, theme.variable($theme), value);
+        @include override(background-color, theme.variable(#{$theme}-container-low), value);
+      }
+    }
+
+    // Toggle (on) + filled & raised variants
+    :host([toggle][theme=#{$theme}]:is([variant=filled],[variant=raised])) {
+      .forge-icon-button {
+        @include override(filled-toggle-on-background-color, theme.variable($theme), value);
+        @include override(filled-toggle-on-icon-color, theme.variable(on-#{$theme}), value);
+      }
+    }
+  }
+
+  // Focus indicator
+  :host([theme=#{$theme}]) {
+    .forge-icon-button {
+      @include override(focus-indicator-color, theme.variable($theme), value);
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(secondary);
+@include theme(tertiary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);

package/styles/icon-button/index.scss

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

package/styles/label/_core.scss

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+
+@mixin host {
+  display: inline-block;
+}
+
+@mixin label {
+  @include typography.style(label);
+
+  display: contents;
+  cursor: default;
+}

package/styles/label/index.scss

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './core';

package/styles/label/label.scss

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core';
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.forge-label {
+  @include core.label;
+}

package/styles/linear-progress/_animations.scss

@@ -8,6 +8,8 @@
 /// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/linearprogress/lib/_linear-progress.scss)
 ///
 
+@use './token-utils' as *;
+
 @mixin keyframes {
   @include _directional-keyframes('ltr');
   @include _directional-keyframes('rtl');
@@ -77,7 +79,7 @@
 
   @keyframes buffering#{$suffix} {
     0% {
-      transform: translateX(calc(#{$sign} * var(--_track-background-width)));
+      transform: translateX(calc(#{$sign} * #{token(track-background-width, custom)}));
     }
   }
 

package/styles/linear-progress/_configuration.scss

@@ -3,27 +3,26 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/linear-progress/tokens';
+@use './token-utils' as *;
+
+$_host-tokens: [track-height];
+
+@mixin host-configuration {
+  @include tokens($includes: $_host-tokens);
+}
 
 @mixin configuration {
   // Token vars
-  --_track-height: #{tokens.get(track-height)};
-  --_track-color: #{tokens.get(track-color)};
-  --_active-indicator-color: #{tokens.get(active-indicator-color)};
-  --_track-shape: #{tokens.get(track-shape)};
-  --_active-indicator-height: #{tokens.get(active-indicator-height)};
-  --_determinate-duration: #{tokens.get(determinate-duration)};
-  --_indeterminate-duration: #{tokens.get(indeterminate-duration)};
-  --_determinate-easing: #{tokens.get(determinate-easing)};
+  @include tokens($excludes: $_host-tokens);
 
   // State vars
-  --_track-dot-size: calc(var(--_track-height) / 2);
-  --_track-background-width: calc(var(--_track-dot-size) * 5);
-  --_track-background: 0 / var(--_track-background-width) 100%
+  #{declare(track-dot-size)}: calc(#{token(track-height)} / 2);
+  #{declare(track-background-width)}: calc(#{token(track-dot-size, custom)} * 5);
+  #{declare(track-background)}: 0 / #{token(track-background-width, custom)} 100%
     radial-gradient(
-      circle at calc(var(--_track-dot-size) * 2),
-      var(--_track-color) 0,
-      var(--_track-color) var(--_track-dot-size),
-      transparent var(--_track-dot-size)
+      circle at calc(#{token(track-dot-size, custom)} * 2),
+      #{token(track-color)} 0,
+      #{token(track-color)} #{token(track-dot-size, custom)},
+      transparent #{token(track-dot-size, custom)}
     );
 }

package/styles/linear-progress/_core.scss

@@ -4,19 +4,14 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use '../core/styles/utils';
-@use '../core/styles/tokens/linear-progress/tokens';
 @use '../theme';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, linear-progress);
-}
+@use './token-utils' as *;
 
 @mixin container {
   display: block;
   position: relative;
   min-inline-size: 80px;
-  block-size: #{tokens.get(track-height)};
+  block-size: #{token(track-height)};
   content-visibility: auto;
   contain: strict;
 }
@@ -24,7 +19,7 @@
 @mixin progress {
   inset: 0;
   outline: transparent solid 1px;
-  border-radius: var(--_track-shape);
+  border-radius: #{token(track-shape)};
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -33,10 +28,10 @@
 @mixin bar {
   animation: none;
   inline-size: 100%;
-  block-size: var(--_active-indicator-height);
+  block-size: #{token(indicator-height)};
   transform-origin: left center;
   will-change: transform;
-  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+  transition: transform #{token(determinate-duration)} #{token(determinate-easing)};
 }
 
 @mixin secondary-bar {
@@ -46,23 +41,26 @@
 @mixin bar-inner {
   inset: 0;
   animation: none;
-  background: var(--_active-indicator-color);
+  transition: background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  background: #{token(indicator-color)};
 }
 
 @mixin buffer-bar {
-  background: var(--_track-color);
+  background: #{token(track-color)};
   inset: 0;
   will-change: transform;
-  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+  transition: transform #{token(determinate-duration)} #{token(determinate-easing)},
+              background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
   transform-origin: left center;
 }
 
 @mixin track {
   inset: 0;
   will-change: transform;
-  animation: linear infinite var(--_determinate-duration);
+  animation: linear infinite #{token(determinate-duration)};
   animation-name: buffering;
-  background: var(--_track-background);
+  background: #{token(track-color, custom)};
+  transition: background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
 }
 
 @mixin indeterminate-bar {
@@ -72,7 +70,7 @@
 @mixin indeterminate-primary-bar {
   inset-inline-start: -145.167%;
   will-change: transform;
-  animation: linear infinite var(--_indeterminate-duration);
+  animation: linear infinite #{token(indeterminate-duration)};
   animation-name: primary-indeterminate-translate;
 }
 
@@ -80,7 +78,7 @@
   inset-inline-start: -54.8889%;
   display: block;
   will-change: transform;
-  animation: linear infinite var(--_indeterminate-duration);
+  animation: linear infinite #{token(indeterminate-duration)};
   animation-name: secondary-indeterminate-translate;
 }
 
@@ -90,10 +88,10 @@
 
 @mixin indeterminate-primary-bar-inner {
   will-change: transform;
-  animation: linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;
+  animation: linear infinite #{token(indeterminate-duration)} primary-indeterminate-scale;
 }
 
 @mixin indeterminate-secondary-bar-inner {
   will-change: transform;
-  animation: linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;
+  animation: linear infinite #{token(indeterminate-duration)} secondary-indeterminate-scale;
 }

package/styles/linear-progress/_token-utils.scss

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

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

package/styles/linear-progress/linear-progress.scss

@@ -3,11 +3,20 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use '../core/styles/theme';
 @use './animations';
 @use './configuration';
 @use './core';
+@use './token-utils' as *;
+
+//
+// Host styles
+//
+
+:host {
+  @include configuration.host-configuration;
+}
 
-/// Host styles
 :host {
   @include core.container;
 }
@@ -16,9 +25,15 @@
   display: none;
 }
 
-/// Base styles
+//
+// Base
+//
+
 .forge-linear-progress {
   @include configuration.configuration;
+}
+
+.forge-linear-progress {
   @include core.progress;
 }
 
@@ -108,14 +123,35 @@ $rtl-selectors: (
   }
 }
 
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    .forge-linear-progress {
+      @include override(indicator-color, theme.variable($theme), value);
+      @include override(track-color, theme.variable(#{$theme}-container), value);
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(secondary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);
+
 @media screen and (forced-colors: active) {
   .forge-linear-progress {
-    --_active-indicator-color: canvastext;
-    --_track-color: graytext;
-    border: 1px solid canvastext;
+    @include override(indicator-color, CanvasText, value);
+    @include override(track-color, GrayText, value);
+
+    border: 1px solid CanvasText;
 
     &.forge-linear-progress--indeterminate {
-      --_track-color: canvas;
+      @include override(track-color, Canvas, value);
     }
   }
 }

package/styles/list/list/_configuration.scss

@@ -3,10 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/list/list/tokens';
+@use './token-utils' as *;
 
 @mixin configuration {
-  --_container-color: #{tokens.get(container-color)};
-  --_block-padding: #{tokens.get(block-padding)};
-  --_inline-padding: #{tokens.get(inline-padding)};
+  @include tokens;
 }