@tylertech/forge 3.0.0-next.15 → 3.0.0-next.17

package/styles/button-toggle/button-toggle-group/_core.scss

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: #{token(display)};
+}
+
+@mixin base {
+  display: flex;
+  align-items: center;
+  gap: #{token(gap)};
+
+  box-sizing: border-box;
+  height: #{token(height)};
+
+  border-width: #{token(outline-width)};
+  border-style: #{token(outline-style)};
+  border-color: #{token(outline-color)};
+  border-start-start-radius: #{token(shape-start-start)};
+  border-start-end-radius: #{token(shape-start-end)};
+  border-end-start-radius: #{token(shape-end-start)};
+  border-end-end-radius: #{token(shape-end-end)};
+  padding-block: #{token(padding-block)};
+  padding-inline: #{token(padding-inline)};
+
+  transition-property: border-color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin active {
+  @include override(outline-color, outline-color-active);
+}
+
+@mixin no-outline {
+  @include override(padding, 0, value);
+  @include override(outline-style, none, value);
+}
+
+@mixin vertical {
+  height: auto;
+  flex-direction: column;
+}
+
+@mixin host-stretch {
+  display: block;
+}
+
+@mixin stretch {
+  width: 100%;
+}
+
+@mixin dense {
+  @include override(padding, 0, value);
+  @include override(height, dense-height);
+}

package/styles/button-toggle/button-toggle-group/_token-utils.scss

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

@@ -3,14 +3,134 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../../core/styles/theme';
+@use '../button-toggle';
 
-@include mixins.core-styles;
+//
+// Host
+//
+
+$_host-tokens: [display];
 
 :host {
-  @include mixins.host;
+  @include tokens($includes: $_host-tokens);
+}
+
+:host {
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-button-toggle-group {
+  @include tokens($excludes: $_host-tokens);
+}
+
+.forge-button-toggle-group {
+  @include base;
+}
+
+:host(:not([disabled]):not([no-outline])) {
+  .forge-button-toggle-group {
+    &:hover,
+    &:focus-within {
+      @include active;
+    }
+  }
+}
+
+//
+// No outline
+//
+
+:host([no-outline]) {
+  .forge-button-toggle-group {
+    @include no-outline;
+  }
+}
+
+//
+// Density - Dense
+//
+
+:host(:is([dense],[density=dense])) {
+  .forge-button-toggle-group {
+    @include dense;
+  }
+}
+
+//
+// Vertical
+//
+
+:host([vertical]) {
+  .forge-button-toggle-group {
+    @include vertical;
+  }
+
+  ::slotted(forge-button-toggle) {
+    height: #{token(height)};
+    width: 100%;
+  }
+
+  ::slotted(forge-divider:not([vertical])) {
+    margin-inline: 4px;
+    width: 100%;
+  }
+}
+
+//
+// Slotted - Divider
+//
+
+::slotted(forge-divider[vertical]) {
+  margin-block: 4px;
+}
+
+//
+// Stretch
+//
+
+:host([stretch]) {
+  @include host-stretch;
+
+  .forge-button-toggle-group {
+    @include stretch;
+  }
+}
+
+:host(:not([vertical])[stretch]) {
+  ::slotted(forge-button-toggle) {
+    flex: 1;
+  }
+}
+
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    ::slotted(forge-button-toggle) {
+      @include button-toggle.provide-theme((
+        selected-background: #{theme.variable(#{$theme}-container)},
+        selected-color: #{theme.variable(on-#{$theme}-container)},
+        focus-indicator-color: #{theme.variable($theme)}
+      ));
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(secondary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);

package/styles/button-toggle/button-toggle-group/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/checkbox/_core.scss

@@ -6,8 +6,11 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @mixin checkbox {

package/styles/checkbox/checkbox.scss

@@ -3,14 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
-@use './configuration';
+@use './core' as *;
 @use '../focus-indicator';
 @use '../state-layer';
-@use './token-utils' as *;
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -19,60 +17,60 @@
 
 // Unchecked
 .forge-checkbox {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-checkbox {
-  @include core.checkbox;
+  @include checkbox;
 
   .container {
-    @include core.container;
+    @include container;
   }
 
   .input {
-    @include core.input;
+    @include input;
   }
 
   .background {
-    @include core.background;
+    @include background;
   }
 
   .icon {
-    @include core.icon;
+    @include icon;
 
     &--checked {
-      @include core.icon-checked;
-      @include core.icon-checked-hidden;
+      @include icon-checked;
+      @include icon-checked-hidden;
     }
 
     &--indeterminate {
-      @include core.icon-indeterminate;
-      @include core.icon-indeterminate-hidden;
+      @include icon-indeterminate;
+      @include icon-indeterminate-hidden;
     }
   }
 
   .label {
-    @include core.label;
+    @include label;
   }
 
   ::slotted([slot=input]) {
-    @include core.input;
+    @include input;
   }
 }
 
 // Checked
 :host([checked]) {
   .background {
-    @include core.background-checked;
+    @include background-checked;
   }
 
   .icon {
     &--checked {
-      @include core.icon-checked-visible;
+      @include icon-checked-visible;
     }
 
     &--indeterminate {
-      @include core.icon-indeterminate-hidden;
+      @include icon-indeterminate-hidden;
     }
   }
 
@@ -86,16 +84,16 @@
 // Indeterminate
 :host([indeterminate]) {
   .background {
-    @include core.background-checked;
+    @include background-checked;
   }
 
   .icon {
     &--checked {
-      @include core.icon-checked-hidden;
+      @include icon-checked-hidden;
     }
 
     &--indeterminate {
-      @include core.icon-indeterminate-visible;
+      @include icon-indeterminate-visible;
     }
   }
 
@@ -110,17 +108,17 @@
 :host([dense]) {
   .forge-checkbox {
     .container {
-      @include core.container-dense;
+      @include container-dense;
     }
   }
 }
 
 :host([disabled]) {
   .forge-checkbox {
-    @include core.checkbox-disabled;
+    @include checkbox-disabled;
 
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }
@@ -129,7 +127,7 @@
 :host([readonly]) {
   .forge-checkbox {
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }

package/styles/checkbox/index.scss

@@ -3,6 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/circular-progress/_core.scss

@@ -7,6 +7,8 @@
 @use './animation';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 $_cycle-duration: calc(4 * #{token(arc-duration)});
 
 @mixin container {

package/styles/circular-progress/circular-progress.scss

@@ -3,22 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 @use './animation';
-@use './configuration';
 @use '../core/styles/theme';
-@use './token-utils' as *;
 
 //
 // Host styles
 //
 
+$_host-tokens: [size];
+
 :host {
-  @include configuration.host-configuration;
+  @include tokens($includes: $_host-tokens);
 }
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
@@ -30,14 +30,14 @@
 //
 
 .forge-circular-progress {
-  @include configuration.configuration;
+  @include tokens($excludes: $_host-tokens);
 }
 
 .forge-circular-progress {
-  @include core.progress;
+  @include progress;
 
   &--indeterminate {
-    @include core.indeterminate;
+    @include indeterminate;
   }
 }
 
@@ -47,11 +47,11 @@
 .right,
 .circle,
 svg {
-  @include core.positioned;
+  @include positioned;
 }
 
 .center-content {
-  @include core.center-content;
+  @include center-content;
 }
 
 //
@@ -59,23 +59,23 @@ svg {
 //
 
 .left {
-  @include core.indeterminate-left;
+  @include indeterminate-left;
 
   .circle {
-    @include core.indeterminate-left-circle;
+    @include indeterminate-left-circle;
   }
 }
     
 .right {
-  @include core.indeterminate-right;
+  @include indeterminate-right;
 
   .circle {
-    @include core.indeterminate-right-circle;
+    @include indeterminate-right-circle;
   }
 }
 
 .circle {
-  @include core.indeterminate-circle;
+  @include indeterminate-circle;
 }
 
 //
@@ -83,27 +83,37 @@ svg {
 //
 
 svg {
-  @include core.determinate-svg;
+  @include determinate-svg;
 
   circle {
-    @include core.determinate-svg-circle;
+    @include determinate-svg-circle;
   }
 }
 
 .progress {
-  @include core.determinate-progress;
+  @include determinate-progress;
 }
 
 .track {
-  @include core.determinate-track;
+  @include determinate-track;
 
   &-background {
-    @include core.determinate-track-background;
+    @include determinate-track-background;
   }
 }
 
 .spinner {
-  @include core.determinate-spinner;
+  @include determinate-spinner;
+}
+
+//
+// Track
+//
+
+:host(:is([track],[determinate])) {
+  .forge-circular-progress {
+    @include override(track-color, track-fill-color);
+  }
 }
 
 //
@@ -114,6 +124,11 @@ svg {
   :host([theme=#{$theme}]) {
     .forge-circular-progress {
       @include override(indicator-color, theme.variable($theme), value);
+    }
+  }
+
+  :host([theme=#{$theme}]:is([track],[determinate])) {
+    .forge-circular-progress {
       @include override(track-color, theme.variable(#{$theme}-container), value);
     }
   }
@@ -126,12 +141,6 @@ svg {
 @include theme(warning);
 @include theme(info);
 
-:host([track]) {
-  .forge-circular-progress {
-    @include override(track-color, track-fill-color);
-  }
-}
-
 @media screen and (forced-colors: active) {
   .progress {
     stroke: CanvasText;

package/styles/circular-progress/index.scss

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

package/styles/core/styles/elevation/index.scss

@@ -6,9 +6,9 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use '../utils';
 @use '../core/config';
 @use '../tokens/elevation/tokens';
-@use '../utils';
 
 ///
 /// Generates a `box-shadow` style value for the provided elevation z-value.

package/styles/core/styles/tokens/_token-utils.scss

@@ -3,10 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:meta';
 @use 'sass:map';
-@use 'sass:list';
+@use 'sass:string';
 @use '../utils';
+@use '../core/config';
 
 ///
 /// Mixin for providing theme tokens to the module using external names.
@@ -91,13 +91,22 @@
 /// @param {List} $excludes - An optional list of token names to exclude from `$tokens`
 /// 
 @mixin tokens($module, $tokens, $includes: null, $excludes: null) {
+  // Validate that all tokens are generated with matching keys
+  @each $key, $var in $tokens {
+    // The token value is always expected to start with this string per our naming convention: `var(--<prefix>-<module>-<key>, <value>)`
+    $expected: 'var(--#{config.$prefix}-#{$module}-#{$key},';
+    @if string.index($var, $expected) != 1 {
+      @error 'Mismatching token key "#{$key}" found for module "#{$module}" with value "#{$var}"';
+    }
+  }
+
   @if ($includes) {
     // We are including only specific tokens
-    @each $token in $includes {
-      @if (not map.has-key($tokens, $token)) {
+    @each $token-name in $includes {
+      @if (not map.has-key($tokens, $token-name)) {
         @error 'Invalid include token "#{$token}" for module "#{$module}"';
       }
-      #{declare($module, $token)}: #{map.get($tokens, $token)};
+      #{declare($module, $token-name)}: #{map.get($tokens, $token-name)};
     }
   } @else {
     // We are including all tokens, but first we need to check if any excluded tokens were provided

package/styles/core/styles/tokens/avatar/_tokens.scss

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  size: utils.module-val(avatar, size, 40px),
+  background: utils.module-val(avatar, background, theme.variable(tertiary)),
+  color: utils.module-val(avatar, color, theme.variable(on-tertiary)),
+  transition-duration: utils.module-val(avatar, transition-duration, animation.variable(duration-short4)),
+  transition-timing: utils.module-val(avatar, transition-timing, animation.variable(easing-standard)),
+  shape: utils.module-val(avatar, shape, shape.variable(round))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/badge/_tokens.scss

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../../spacing';
+@use '../../border';
+@use '../../animation';
+@use '../../utils';
+
+$tokens: (
+  background: utils.module-val(badge, background, theme.variable(secondary)),
+  color: utils.module-val(badge, color, theme.variable(on-secondary)),
+  shape: utils.module-val(badge, shape, shape.variable(full)),
+  height: utils.module-val(badge, height, 20px),
+  min-width: utils.module-val(badge, min-width, 0),
+  max-width: utils.module-val(badge, max-width, auto),
+  padding-inline: utils.module-val(badge, padding-inline, spacing.variable(xsmall)),
+  padding-block: utils.module-val(badge, padding-block, 0),
+  border-width: utils.module-val(badge, border-width, border.variable(thin)),
+  border-style: utils.module-val(badge, border-style, none),
+  border-color: utils.module-ref(badge, border-color, color),
+  gap: utils.module-val(badge, gap, spacing.variable(xsmall)),
+  font-weight: utils.module-val(badge, font-weight, bold),
+
+  // Dot
+  dot-size: utils.module-val(badge, dot-size, 8px),
+  dot-height: utils.module-ref(badge, dot-height, dot-size),
+  dot-width: utils.module-ref(badge, dot-width, dot-size),
+  dot-padding: utils.module-val(badge, dot-padding, 0),
+
+  // Transition
+  transition-duration: utils.module-val(badge, transition-duration, animation.variable(duration-short4)),
+  transition-easing: utils.module-val(badge, transition-easing, animation.variable(easing-decelerate)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}