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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.11",
+  "version": "3.0.0-next.12",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,12 +30,7 @@
     "@material/rtl": "^14.0.0",
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
-    "@material/slider": "^14.0.0",
-    "@material/switch": "^14.0.0",
-    "@material/tab-indicator": "^14.0.0",
-    "@material/tab-scroller": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/tokens": "^14.0.0",
     "@material/top-app-bar": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",

package/styles/button-area/_mixins.scss

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/ripple/ripple' as mdc-ripple;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../utils/mixins' as utils;
+@use '../ripple/forge-ripple';
+
+@mixin core-styles() {
+  .forge-button-area {
+    @include base;
+
+    &:not(.forge-button-area--disabled) {
+      &.forge-button-area {
+        @include enabled;
+      }
+    }
+
+    &__button {
+      @include button;
+    }
+  }
+}
+
+@mixin host() {
+  display: block;
+}
+
+@mixin base() {
+  overflow: hidden;
+}
+
+@mixin enabled() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states(primary);
+  @include mdc-ripple-theme.states-activated(primary);
+  @include mdc-ripple-theme.states-selected(primary);
+
+  cursor: pointer;
+}
+
+@mixin button() {
+  @include utils.visually-hidden;
+}

package/styles/button-area/button-area.scss

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

package/styles/calendar/calendar-menu/_mixins.scss

@@ -5,10 +5,10 @@
  */
 @use '@material/ripple/ripple' as mdc-ripple;
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/theme/theme' as mdc-theme;
 @use '@material/typography/typography' as mdc-typography;
 @use '../../theme';
 @use '../../theme/theme-values';
-@use '../../list/list-item/mixins' as list-item;
 @use './variables';
 
 @mixin core-styles() {
@@ -230,7 +230,7 @@
 }
 
 @mixin list-item() {
-  @include list-item.interactable;
+  @include _deprecated-interactable;
 
   display: flex;
   align-items: center;
@@ -417,3 +417,49 @@
     }
   }
 }
+
+@mixin _deprecated-interactable() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states(on-surface);
+  @include mdc-ripple-theme.states-activated(primary);
+  @include mdc-ripple-theme.states-selected(primary);
+
+  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
+    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
+      mdc-ripple-theme.states-opacity(primary, hover);
+  }
+
+  &:focus,
+  &--active {
+    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
+      &::before {
+        opacity: mdc-ripple-theme.states-opacity(primary, focus);
+      }
+      &:hover {
+        &::before {
+          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
+        }
+      }
+
+      &::before,
+      &::after {
+        @include mdc-theme.property(background-color, on-surface);
+      }
+    }
+  }
+
+  &--active:focus {
+    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
+      &::before {
+        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
+      }
+      &:hover {
+        &::before {
+          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
+            mdc-ripple-theme.states-opacity(primary, activated);
+        }
+      }
+    }
+  }
+}

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/core/styles/_utils.scss

@@ -4,6 +4,7 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
+@use 'sass:math';
 @use './core/config';
 
 ///
@@ -14,23 +15,69 @@
   @if not $value {
     @error 'Invalid #{$module} token: #{$key}';
   }
-  @return _create-var($module, $key, $value, $prefix);
+  @return create-var($module, $key, $value, $prefix);
 }
 
 ///
-/// Creates a CSS custom property declaration for a token in the provided module
+/// Creates a CSS custom property reference for a token in the provided module
 /// referencing an existing module token variable as the fallback.
 /// 
-@function module-ref($module, $token, $ref-token, $prefix: config.$prefix) {
-  @return _create-var($module, $token, var(--_#{$ref-token}), $prefix);
+/// To provide a module reference variable with a different fallback value, set the
+/// $type parameter to `value` and `$value` will be used verbatim.
+/// 
+/// Example:
+/// ```scss
+/// $my-token: module-ref(comp, color, primary-color); // => var(--forge-comp-color, var(--_primary-color));
+/// ```
+/// 
+@function module-ref($module, $token, $value, $type: ref, $prefix: config.$prefix) {
+  $fallback: if($type == ref, module-var($value), $value);
+  @return create-var($module, $token, $fallback, $prefix);
 }
 
 ///
-/// Creates a CSS custom property declaration for a module token using the
+/// Gets a module token CSS variable.
+/// 
+@function module-var($token, $prefix: config.$prefix) {
+  @return var(--_#{$token});
+}
+
+///
+/// Creates a CSS custom property reference for a module token using the
 /// provided value as the variable fallback.
 /// 
+/// Example:
+/// ```scss
+/// $my-token: module-val(comp, color, red); // => var(--forge-comp-color, red);
+/// $my-other-token: module-val(comp, color, theme.variable(primary)); // => var(--forge-comp-color, var(--forge-theme-primary));
+/// ```
+/// 
 @function module-val($module, $token, $value, $prefix: config.$prefix) {
-  @return _create-var($module, $token, $value, $prefix);
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property variable reference for a token in the provided module.
+/// 
+/// Example:
+/// ```scss
+/// $my-var: variable-ref(theme, color); // => var(--forge-theme-color);
+/// ```
+///
+@function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property variable reference for a token in the provided module.
+/// 
+/// Example:
+/// ```scss
+/// $my-var: variable-ref(theme, color); // => var(--forge-theme-color);
+/// ```
+///
+@function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
 }
 
 ///
@@ -42,22 +89,49 @@
     @if not map.get($module-tokens, $token-name) {
       @error 'Invalid token "#{$token-name}" for module "#{$module}"';
     }
-    --#{$prefix}-#{$module}-#{$token-name}: #{$token-value};
+    @include declare-var($module, $token-name, $token-value, $prefix);
   }
 }
 
 ///
 /// Creates a new map by inheriting from a base map and overriding/adding values.
-/// 
+///
 @function inherit-map($base, $overrides) {
   @return map.merge($base, $overrides);
 }
 
-
 ///
-/// Creates a CSS custom property declaration for a module token, using the provided fallback value.
+/// Creates a CSS custom property reference for a module token, using the provided fallback value.
 /// 
-@function _create-var($module, $token, $value, $prefix: config.$prefix) {
+@function create-var($module, $token, $value: null, $prefix: config.$prefix) {
+  @if $value == null {
+    @return var(--#{$prefix}-#{$module}-#{$token});
+  }
   @return var(--#{$prefix}-#{$module}-#{$token}, $value);
 }
 
+///
+/// Rounds a number to the specified number of decimal places.
+///
+@function round($value, $fractionDigits: 0) {
+  $power: math.pow(10, $fractionDigits);
+  @return math.div(math.round($power * $value), $power);
+}
+
+///
+/// Creates a CSS custom property declaration for a module token. 
+///
+@mixin declare-var($module, $name, $value, $prefix: config.$prefix) {
+  --#{$prefix}-#{$module}-#{$name}: #{$value};
+}
+
+///
+/// Flattens multiple maps into a single map. 
+///
+@function flatten($maps...) {
+  $merged: ();
+  @each $map in $maps {
+    $merged: map.merge($merged, $map);
+  }
+  @return $merged;
+}

package/styles/core/styles/scrollbar/index.scss

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../tokens/scrollbar/tokens';
+
+///
+/// Provides scrollbar styles.
+///
+@mixin base {
+  &::-webkit-scrollbar {
+    height: #{tokens.get(height)};
+    width: #{tokens.get(width)};
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #{tokens.get(track-container)};
+    
+    &:hover {
+      background-color: #{tokens.get(track-container-hover)};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: #{tokens.get(track-container)};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: #{tokens.get(thumb-min-height)};
+    width: #{tokens.get(thumb-min-width)};
+    
+    border-radius: #{tokens.get(border-radius)};
+    border-width: #{tokens.get(border-width)};
+    border-style: solid;
+    border-color: transparent;
+    
+    background-color: #{tokens.get(thumb-container)};
+    background-clip: content-box;
+
+    &:hover {
+      background-color: #{tokens.get(thumb-container-hover)};
+    }
+  }
+}

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

@@ -14,7 +14,7 @@
 /// Example:
 /// ```scss
 /// .my-class {
-///   margin: spacing.variable('200'); // => margin: var(--forge-spacing-standard, 16px);
+///   margin: spacing.variable('100'); // => margin: var(--forge-spacing-standard, 16px);
 /// }
 /// ```
 /// 

package/styles/core/styles/theme/_color-utils.scss

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:color';
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+  @if $normalized-channel-value < 0.03928 {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function contrast-ratio($back, $front) {
+  $backLum: luminance($back) + 0.05;
+  $foreLum: luminance($front) + 0.05;
+  @return math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum));
+}
+
+// Determine whether the color is 'light' or 'dark'.
+@function tone($color) {
+  @if $color == 'dark' or $color == 'light' {
+    @return $color;
+  }
+
+  @if meta.type-of($color) != 'color' {
+    @warn '#{$color} is not a color. Falling back to "dark" tone.';
+    @return 'dark';
+  }
+
+  $minimumContrast: 3.1;
+  $lightContrast: contrast-ratio($color, white);
+  $darkContrast: contrast-ratio($color, rgba(black, 0.87));
+
+  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
+    @return 'light';
+  } @else {
+    @return 'dark';
+  }
+}
+
+// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
+// Returns 'dark' if the given color is light and 'light' if the given color is dark.
+@function contrast-tone($color) {
+  @return if(tone($color) == 'dark', 'light', 'dark');
+}

package/styles/core/styles/theme/_utils.scss

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:color';
+@use '../utils';
+@use './color-utils';
+
+///
+/// Returns a new color with the same hue and saturation as the input color, but with a different lightness value.
+/// 
+/// Example:
+/// scale(#ff0000, 50%) => #ff6060
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Number} $lightness - The desired lightness percentage to scale `$color` by. Specified as a percentage number between 0 and 100.
+/// @return {Color} - The new color with the same hue and saturation as the input color, but with a different lightness value.
+///
+@function scale($color, $lightness) {
+  @return color.scale($color, $lightness: 100 - $lightness);
+}
+
+///
+/// Creates a new color by applying the specified emphasis to the input color via the alpha channel.
+/// 
+/// Example:
+/// emphasized(#ff0000, 50%) => rgba(255, 0, 0, 0.5)
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Number} $alpha - The desired opacity to apply to `$color`.
+/// @return {Color} - The input color, but with an alpha channel value in `rgba()` format.
+/// 
+@function emphasized($color, $emphasis) {
+  @return rgba($color, $emphasis);
+}
+
+///
+/// Computes the contrast color for the provided color.
+/// 
+/// Example:
+/// contrast(#ff0000) => #ffffff
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Color} $light - The light color to use for contrast. Default to `#ffffff`.
+/// @param {Color} $dark - The dark color to use for contrast. Default to `#000000`.
+/// @return {Color} - The contrast color for the provided color.
+/// 
+@function contrast($color, $alpha: null, $light: #ffffff, $dark: #000000) {
+  $contrast-color: if(color-utils.contrast-tone($color) == 'dark', $dark, $light);
+  @if $alpha != null {
+    @return emphasized($contrast-color, $alpha);
+  }
+  @return $contrast-color;
+}
+
+///
+/// Converts a color with an opacity value on top of a specific background color to an opaque hex color.
+/// 
+@function hexify($color, $background, $alpha: 100%) {
+  @return if($alpha == 100%, color.mix($background, $color, $alpha), color.mix($background, $color, 100 - $alpha));
+}
+
+///
+/// Determines if the provided value is a `color` type or not.
+/// 
+@function is-color($value) {
+  @return meta.type-of($value) == color;
+}
+
+///
+/// Computes the hue, saturation, lightness (and optionally alpha) values for the provided color and returns a string in HSL format.
+///
+@function hsl-values($color, $with-alpha: false) {
+  $value: utils.round(hue($color), 2) utils.round(saturation($color), 2) utils.round(lightness($color), 2);
+  @if ($with-alpha) {
+    $value: string.unquote($value + ' / ' + alpha($color));
+  }
+  @return $value;
+}

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

@@ -4,27 +4,18 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
+@use 'sass:math';
 @use '../core/config';
 @use '../tokens/theme/tokens';
+@use '../tokens/theme/color-emphasis';
 @use '../utils';
 
 ///
 /// Emits custom property declarations for all default theme tokens.
 /// 
 @mixin properties {
-  /// Temporary tokens to map the MDC theme to Forge theme
-  /// TODO: Remove this once MDC dependency is removed
-  :root {
-    @each $token-name, $token-value in tokens.$mdc-remap {
-      --mdc-theme-#{$token-name}: #{$token-value};
-    }
-  }
-
-  // Forge theme tokens
-  :root {
-    @each $token-name, $token-value in tokens.$tokens {
-      --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
-    }
+  @each $token-name, $token-value in tokens.$tokens {
+    --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
   }
 }
 
@@ -37,6 +28,31 @@
   }
 }
 
+///
+/// Temporary tokens to map the MDC theme to Forge theme
+/// 
+/// TODO: Remove this once MDC dependency is removed
+/// 
+@mixin properties-compat {
+  @each $token-name, $token-value in tokens.$mdc-remap {
+    --mdc-theme-#{$token-name}: #{$token-value};
+  }
+}
+
+///
+/// Generates utility classes for each theme token as both `color` and `background-color` styles separately.
+/// 
+@mixin classes {
+  @each $token, $value in tokens.$tokens {
+    .#{config.$prefix}-color--#{$token} {
+      color: #{variable($token)};
+    }
+    .#{config.$prefix}-background--#{$token} {
+      background-color: #{variable($token)};
+    }
+  }
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific theme token, with its token value as the fallback value
 /// 
@@ -50,3 +66,13 @@
 @mixin provide($tokens, $prefix: config.$prefix) {
   @include utils.provide(tokens.$tokens, $tokens, theme, $prefix);
 }
+
+///
+/// Gets a theme emphasis value by semantic name.
+/// 
+/// Valid names are `highest`, `higher`, `high`, `medium-high`, `medium`, `medium-low`, `low`, `lower`, and `lowest`.
+/// 
+@function emphasis($emphasis) {
+  @return math.div(color-emphasis.value($emphasis), 100%);
+}
+

package/styles/core/styles/tokens/circular-progress/_tokens.scss

@@ -12,7 +12,7 @@ $tokens: (
   padding: utils.module-val(circular-progress, padding, 0),
   track-width: utils.module-val(circular-progress, track-width, 12),
   track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary)),
-  track-background: utils.module-val(circular-progress, track-background, theme.variable(track-color)),
+  track-background: utils.module-val(circular-progress, track-background, theme.variable(surface-container)),
   arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms)
 ) !default;