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

package/styles/checkbox/_core.scss

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+@mixin host {
+  display: inline-block;
+}
+
+@mixin checkbox {
+  position: relative;
+  flex-direction: #{token(direction)};
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: #{token(justify)};
+  gap: #{token(gap)};
+
+  display: flex;
+}
+
+@mixin checkbox-disabled {
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin container {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  border-radius: #{token(state-layer-shape)};
+  inline-size: #{token(state-layer-width)};
+  block-size: #{token(state-layer-height)};
+
+  cursor: pointer;
+}
+
+@mixin container-dense {
+  inline-size: #{token(state-layer-dense-width)};
+  block-size: #{token(state-layer-dense-height)};
+}
+
+@mixin container-disabled {
+  cursor: not-allowed;
+}
+
+@mixin input {
+  position: absolute;
+  z-index: 1;
+
+  appearance: none;
+
+  outline: none;
+  margin: 0;
+  inline-size: 100%;
+  block-size: 100%;
+
+  cursor: unset;
+}
+
+@mixin background {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  transition-property: background-color, border-width, border-color;
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(background-animation-timing)};
+
+  box-shadow: #{token(elevation)};
+  border-style: solid;
+  border-width: #{token(unchecked-border-width)};
+  border-color: #{token(unchecked-border-color)};
+  border-radius: #{token(shape)};
+  box-sizing: border-box;
+  block-size: #{token(height)};
+  inline-size: #{token(width)};
+
+  background-color: #{token(background-color)};
+}
+
+@mixin background-checked {
+  border-style: solid;
+  border-width: #{token(checked-border-width)};
+  border-color: #{token(checked-border-color)};
+
+  background-color: #{token(checked-background-color)};
+}
+
+@mixin icon {
+  position: absolute;
+
+  transition-property: stroke-dashoffset;
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(icon-animation-timing)};
+
+  fill: none;
+  stroke-width: #{token(icon-stroke-width)};
+}
+
+@mixin icon-checked {
+  stroke: #{token(icon-checked-color)};
+  stroke-dasharray: 30;
+}
+
+@mixin icon-checked-hidden {
+  transition-delay: 0s;
+  
+  stroke-dashoffset: 30;
+}
+
+@mixin icon-checked-visible {
+  transition-delay: #{token(animation-duration)};
+
+  stroke-dashoffset: 0;
+
+  // Animate from right to left in RTL
+  &:dir(rtl) {
+    stroke-dashoffset: 60;
+  }
+}
+
+@mixin icon-indeterminate {
+  stroke: #{token(icon-indeterminate-color)};
+  stroke-dasharray: 20;
+}
+
+@mixin icon-indeterminate-hidden {
+  transition-delay: 0s;
+  
+  stroke-dashoffset: 20;
+}
+
+@mixin icon-indeterminate-visible {
+  transition-delay: #{token(animation-duration)};
+
+  stroke-dashoffset: 0;
+
+  // Animate from right to left in RTL
+  &:dir(rtl) {
+    stroke-dashoffset: 40;
+  }
+}
+
+@mixin label {
+  @include typography.style(label);
+
+  &:empty {
+    display: none;
+  }
+}

package/styles/checkbox/_token-utils.scss

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

@@ -3,17 +3,153 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './checkbox.mixins' as mixins;
-@use '../form-field/mixins' as form-field-mixins;
-
-@include mixins.core-styles;
-@include form-field-mixins.shadow-styles;
+@use './core';
+@use './configuration';
+@use '../focus-indicator';
+@use '../state-layer';
+@use './token-utils' as *;
 
 :host {
-  display: inline-block;
+  @include core.host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+// Unchecked
+.forge-checkbox {
+  @include configuration.configuration;
+}
+
+.forge-checkbox {
+  @include core.checkbox;
+
+  .container {
+    @include core.container;
+  }
+
+  .input {
+    @include core.input;
+  }
+
+  .background {
+    @include core.background;
+  }
+
+  .icon {
+    @include core.icon;
+
+    &--checked {
+      @include core.icon-checked;
+      @include core.icon-checked-hidden;
+    }
+
+    &--indeterminate {
+      @include core.icon-indeterminate;
+      @include core.icon-indeterminate-hidden;
+    }
+  }
+
+  .label {
+    @include core.label;
+  }
+
+  ::slotted([slot=input]) {
+    @include core.input;
+  }
+}
+
+// Checked
+:host([checked]) {
+  .background {
+    @include core.background-checked;
+  }
+
+  .icon {
+    &--checked {
+      @include core.icon-checked-visible;
+    }
+
+    &--indeterminate {
+      @include core.icon-indeterminate-hidden;
+    }
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(state-layer-checked-color)}
+    ));
+  }
+}
+
+// Indeterminate
+:host([indeterminate]) {
+  .background {
+    @include core.background-checked;
+  }
+
+  .icon {
+    &--checked {
+      @include core.icon-checked-hidden;
+    }
+
+    &--indeterminate {
+      @include core.icon-indeterminate-visible;
+    }
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(state-layer-checked-color)}
+    ));
+  }
+}
+
+// Dense
+:host([dense]) {
+  .forge-checkbox {
+    .container {
+      @include core.container-dense;
+    }
+  }
+}
+
+:host([disabled]) {
+  .forge-checkbox {
+    @include core.checkbox-disabled;
+
+    .container {
+      @include core.container-disabled;
+    }
+  }
+}
+
+// Readonly
+:host([readonly]) {
+  .forge-checkbox {
+    .container {
+      @include core.container-disabled;
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion) {
+  .forge-checkbox {
+    @include override(animation-duration, 0s, value);
+  }
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(state-layer-unchecked-color)}
+  ));
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    shape: 0px, // Requires unit
+    outward-offset: 8px
+  ));
+}

package/styles/checkbox/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/chip-field/_base.scss

@@ -225,6 +225,7 @@
 @mixin leading-core {
   @include _grid-leading;
   align-self: flex-start;
+  display: flex;
 }
 
 // Trailing

package/styles/chip-field/_selector.scss

@@ -165,7 +165,7 @@
 
 @mixin leading {
   // Core
-  ::slotted([slot='leading']) {
+  &--leading .forge-field__leading-container {
     @include base.leading-core;
   }
   // Margin
@@ -176,7 +176,7 @@
 
 @mixin trailing {
   // Core
-  ::slotted([slot='trailing']) {
+  &--trailing .forge-field__trailing-container {
     @include base.trailing-core;
   }
   // Margin

package/styles/chips/chip/_mixins.scss

@@ -3,12 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/chips/chip-theme' as mdc-chip-theme;
+@use '@material/ripple/ripple' as mdc-ripple;
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/animation/animation' as mdc-animation;
 @use '@material/theme/theme' as mdc-theme;
-@use '../../button/mixins' as button-mixins;
+@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
+@use '@material/button/button-base' as mdc-button-base;
+@use '@material/button/button-shared-theme' as mdc-button-shared-theme;
+@use '@material/button/button-outlined' as mdc-button-outlined;
+@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
 @use '@material/checkbox/checkbox' as mdc-checkbox;
 @use '../../theme';
 @use './variables';
@@ -18,8 +22,6 @@
     @include base;
 
     &.forge-chip--disabled {
-      @include button-mixins.outlined-disabled;
-
       @include theme.property(border-color, border-color);
       @include mdc-theme.property(color, text-disabled-on-light);
       cursor: default;
@@ -198,15 +200,27 @@
 }
 
 @mixin base() {
-  @include button-mixins.base;
-  @include button-mixins.outlined;
+  @include mdc-ripple.surface();
+  @include mdc-ripple.radius-bounded();
+  @include mdc-ripple-theme.states(primary, false);
+  @include mdc-button-base.base(mdc-feature-targeting.all());
+  @include mdc-button-shared-theme.shape-radius(small);
+  @include mdc-button-shared-theme.container-fill-color(transparent);
+  @include mdc-button-shared-theme.ink-color(primary);
+  @include mdc-button-shared-theme.density(0);
+  @include mdc-button-outlined.outlined(mdc-feature-targeting.all());
+  @include mdc-button-outlined-theme.outline-width(mdc-button-outlined-theme.$outlined-border-width);
+  @include mdc-button-outlined-theme.outline-color(primary);
+
   @include mdc-chip-theme.shape-radius(50%);
   @include theme.css-custom-property(width, --forge-chip-width, auto);
   @include theme.css-custom-property(height, --forge-chip-height, auto);
   @include theme.css-custom-property(min-height, --forge-chip-min-height, variables.$min-height);
-
+  
   box-sizing: border-box;
   transition: mdc-animation.enter(background-color, 150ms);
+  text-transform: none;
+  overflow: hidden;
 }
 
 @mixin invalid() {

package/styles/circular-progress/_configuration.scss

@@ -3,21 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/circular-progress/tokens';
+@use './token-utils' as *;
 
-///
-/// Initializes private configuration state CSS variables
-/// 
-@mixin configuration {
-  // Tokens
-  --_size: #{tokens.get(size)};
-  --_spacing: #{tokens.get(padding)};
-  --_track-width: #{tokens.get(track-width)};
-  --_track-color: #{tokens.get(track-color)};
-  --_track-background: #{tokens.get(track-background)};
-  --_arc-duration: #{tokens.get(arc-duration)};
+$_host-tokens: [size];
+
+@mixin host-configuration {
+  @include tokens($includes: $_host-tokens);
+}
 
-  // Duration variables
-  --_cycle-duration: calc(4 * var(--_arc-duration));
-  --_linear-duration: calc(var(--_arc-duration) * 360 / 306);
+@mixin configuration {
+  @include tokens($excludes: $_host-tokens);
 }

package/styles/circular-progress/_core.scss

@@ -5,18 +5,15 @@
  */
 @use 'sass:list';
 @use './animation';
-@use '../core/styles/utils';
-@use '../core/styles/tokens/circular-progress/tokens';
+@use './token-utils' as *;
 
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, circular-progress);
-}
+$_cycle-duration: calc(4 * #{token(arc-duration)});
 
 @mixin container {
   display: inline-flex;
   vertical-align: middle;
-  min-block-size: #{tokens.get(size)};
-  min-inline-size: #{tokens.get(size)};
+  min-block-size: #{token(size)};
+  min-inline-size: #{token(size)};
   position: relative;
   align-items: center;
   justify-content: center;
@@ -30,13 +27,13 @@
 @mixin progress {
   flex: 1;
   align-self: stretch;
-  margin: var(--_spacing);
+  margin: #{token(padding)};
 }
 
 @mixin indeterminate {
   will-change: transform;
   animation: #{animation.$indeterminate-animation};
-  animation-duration: var(--_linear-duration);
+  animation-duration: calc(#{token(arc-duration)} * 360 / 306);
 }
 
 @mixin indeterminate-left {
@@ -57,20 +54,21 @@
 @mixin indeterminate-circle {
   box-sizing: border-box;
   border-radius: 50%;
-  border: solid calc(var(--_size) * var(--_track-width) / 100);
-  border-color: var(--_track-color) var(--_track-color) transparent transparent;
+  border: solid calc(#{token(size)} * #{token(track-width)} / 100);
+  border-color: #{token(indicator-color)} #{token(indicator-color)} transparent transparent;
+  transition: border-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
   will-change: transform;
   animation: #{animation.$indeterminate-circle-animation};
   animation-iteration-count: infinite;
   animation-fill-mode: both;
-  animation-duration: var(--_arc-duration), var(--_cycle-duration);
+  animation-duration: #{token(arc-duration)}, #{$_cycle-duration};
   animation-timing-function: #{animation.$indeterminate-easing};
 }
 
 @mixin indeterminate-right-circle {
   rotate: 100deg;
   inset: 0 0 0 -100%;
-  animation-delay: calc(-0.5 * var(--_arc-duration)), 0ms;
+  animation-delay: calc(-0.5 * #{token(arc-duration)}), 0ms;
 }
 
 @mixin determinate-svg {
@@ -80,17 +78,18 @@
 @mixin determinate-svg-circle {
   cx: 50%;
   cy: 50%;
-  r: calc(50% * (1 - var(--_track-width) / 100));
+  r: calc(50% * (1 - #{token(track-width)} / 100));
   // match size to indeterminate border width
-  stroke-width: calc(var(--_track-width) * 1%);
+  stroke-width: calc(#{token(track-width)} * 1%);
   // note, pathLength is set so this can be normalized
   stroke-dasharray: 100;
   fill: transparent;
 }
 
 @mixin determinate-progress {
-  transition: stroke-dashoffset 500ms #{animation.$determinate-easing};
-  stroke: var(--_track-color);
+  transition: stroke-dashoffset 500ms #{animation.$determinate-easing},
+              stroke #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  stroke: #{token(indicator-color)};
 }
 
 @mixin determinate-track {
@@ -98,13 +97,14 @@
 }
 
 @mixin determinate-track-background {
-  stroke: var(--_track-background);
+  transition: stroke #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  stroke: #{token(track-color)};
 }
 
 @mixin determinate-spinner {
   will-change: transform;
   animation: #{animation.$determinate-animation};
-  animation-duration: var(--_cycle-duration);
+  animation-duration: #{$_cycle-duration};
   animation-timing-function: #{animation.$indeterminate-easing};
 }
 

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

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

@@ -6,8 +6,17 @@
 @use './core';
 @use './animation';
 @use './configuration';
+@use '../core/styles/theme';
+@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 styles
+//
+
 .forge-circular-progress {
   @include configuration.configuration;
+}
+
+.forge-circular-progress {
   @include core.progress;
 
   &--indeterminate {
@@ -39,7 +54,10 @@ svg {
   @include core.center-content;
 }
 
-/// Indeterminate styles
+//
+// Indeterminate styles
+//
+
 .left {
   @include core.indeterminate-left;
 
@@ -60,7 +78,10 @@ svg {
   @include core.indeterminate-circle;
 }
 
-/// Determinate styles
+//
+// Determinate styles
+//
+
 svg {
   @include core.determinate-svg;
 
@@ -85,6 +106,32 @@ svg {
   @include core.determinate-spinner;
 }
 
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    .forge-circular-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);
+
+:host([no-track]) {
+  .forge-circular-progress {
+    @include override(track-color, transparent, value);
+  }
+}
+
 @media screen and (forced-colors: active) {
   .progress {
     stroke: CanvasText;

package/styles/circular-progress/index.scss

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