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

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/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,22 +5,21 @@
  */
 @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;
 
+  transition: background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+
   // `contain` and `content-visibility` are performance optimizations important here because progress indicators
   // are often used when a CPU=intensive task is underway so it's especially important to minimize their CPU consumption.
   contain: strict;
@@ -30,13 +29,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 +56,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 +80,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 +99,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([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

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

package/styles/color-picker/color-picker.scss

@@ -6,9 +6,6 @@
 @use '../theme';
 @use './mixins';
 
-// Required component styles
-@use '../icon-button/forge-icon-button';
-
 @include mixins.styles;
 
 :host {

package/styles/core/styles/_utils.scss

@@ -31,15 +31,23 @@
 /// ```
 /// 
 @function module-ref($module, $token, $value, $type: ref, $prefix: config.$prefix) {
-  $fallback: if($type == ref, module-var($value), $value);
+  $fallback: if($type == ref, module-var($module, $value), $value);
   @return create-var($module, $token, $fallback, $prefix);
 }
 
 ///
-/// Gets a module token CSS variable.
+/// Creates an internal token reference variable for a module.
+///
+/// Example:
+/// ```sass
+/// color: #{module-var(color)}; // => color: var(--_component-name-color);
+/// ```
 /// 
-@function module-var($token, $prefix: config.$prefix) {
-  @return var(--_#{$token});
+/// @param {String} $module - The module name.
+/// @param {String} $token - The token name.
+///
+@function module-var($module, $token, $prefix: config.$prefix) {
+  @return var(#{create-module-var($module, $token)});
 }
 
 ///
@@ -93,6 +101,47 @@
   }
 }
 
+///
+/// Creates a token CSS custom property definition to point one token to another.
+/// 
+/// If `$new-token` is not a valid token then the provided value will be used verbatim.
+/// 
+/// Example:
+/// ```sass
+/// #{override(component-name, tokens, color, new-color)}; // => --_component-name-color: var(--_component-name-new-color);
+/// #{override(component-name, tokens, color, red)}; // => --_component-name-color: red;
+/// ```
+/// 
+/// @param {String} $module - The module name.
+/// @param {String} $module-tokens - The available tokens.
+/// @param {String} $token - The token name to override.
+/// @param {String} $token-or-value - The token name (if exists) or value to point to.
+/// @param {Boolean} $type - The type of token this is. Valid values are `token` and `value`.
+/// 
+@mixin override($module, $module-tokens, $token, $token-or-value, $type: token) {
+  @if $type == 'token' {
+    @if not map.get($module-tokens, $token) {
+      @error 'Invalid token "#{$token}" for module "#{$module}"';
+    }
+    @if not map.get($module-tokens, $token-or-value) {
+      @error 'Invalid override token "#{$token-or-value}" for module "#{$module}"';
+    }
+  }
+
+  // When the "token" type is specified, we output a module-level CSS custom property override
+  // that points to the provided token. This ensures that the module is taking ownership of the
+  // token value (which breaks the global cascading of internal tokens) and the module can choose
+  // to provide its own token specific to that override.
+  //
+  // When the "value" type is specified, we output a global-level CSS custom property override
+  // that points to the provided value. This keeps the global cascading of internal tokens intact
+  // instead of just overriding the token to a specific unchangeable value.
+  $value: if($type == 'token' and map.has-key($module-tokens, $token-or-value),
+              module-var($module, $token-or-value),
+              create-var($module, $token, $token-or-value));
+  #{create-module-var($module, $token)}: #{$value};
+}
+
 ///
 /// Creates a new map by inheriting from a base map and overriding/adding values.
 ///
@@ -125,6 +174,20 @@
   --#{$prefix}-#{$module}-#{$name}: #{$value};
 }
 
+///
+/// Declares an internal token reference variable for a module.
+/// 
+/// Example:
+/// ```sass
+/// #{create-module-var(color)}: red; // => --_component-name-color: red;
+/// ```
+/// 
+/// @param {String} $token - The token name.
+/// 
+@function create-module-var($module, $token) {
+  @return --_#{$module}-#{$token};
+}
+
 ///
 /// Flattens multiple maps into a single map. 
 ///

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

@@ -8,6 +8,7 @@
 @use 'sass:meta';
 @use '../core/config';
 @use '../tokens/elevation/tokens';
+@use '../utils';
 
 ///
 /// Generates a `box-shadow` style value for the provided elevation z-value.
@@ -59,3 +60,12 @@
   $value: map.get(tokens.$z-index-map, $level);
   z-index: var(--#{config.$prefix}-z-index-#{$level}, #{$value});
 }
+
+///
+/// Returns a global z-index CSS custom property reference (with the fallback value) specified by the provided level.
+/// 
+/// @param {Number} $level - The z-index level to return.
+///
+@function z-index-variable($level) {
+  @return utils.variable(z-index, tokens.$z-index-map, $level);
+}

package/styles/core/styles/spacing/index.scss

@@ -8,13 +8,20 @@
 @use '../tokens/spacing/tokens';
 @use '../utils';
 
+///
+/// Gets a spacing token value.
+/// 
+@function value($key) {
+  @return tokens.get($key);
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific spacing token with its token value as the fallback value.
 /// 
 /// Example:
 /// ```scss
 /// .my-class {
-///   margin: spacing.variable('100'); // => margin: var(--forge-spacing-standard, 16px);
+///   margin: spacing.variable(medium); // => margin: var(--forge-spacing-medium, 16px);
 /// }
 /// ```
 /// 

package/styles/core/styles/theme/index.scss

@@ -10,6 +10,8 @@
 @use '../tokens/theme/color-emphasis';
 @use '../utils';
 
+@forward './utils';
+
 ///
 /// Emits custom property declarations for all default theme tokens.
 ///