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

package/styles/core/styles/{tokens/_utils.scss → _utils.scss}

@@ -4,7 +4,18 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../core/config';
+@use './core/config';
+
+///
+/// Gets a CSS custom property declaration for a specific theme variable, with its token value as the fallback value
+/// 
+@function variable($module, $tokens, $key, $prefix: config.$prefix) {
+  $value: map.get($tokens, $key);
+  @if not $value {
+    @error 'Invalid #{$module} token: #{$key}';
+  }
+  @return _create-var($module, $key, $value, $prefix);
+}
 
 ///
 /// Creates a CSS custom property declaration for a token in the provided module
@@ -35,9 +46,18 @@
   }
 }
 
+///
+/// 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.
 /// 
 @function _create-var($module, $token, $value, $prefix: config.$prefix) {
   @return var(--#{$prefix}-#{$module}-#{$token}, $value);
 }
+

package/styles/core/styles/animation/index.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/config';
+@use '../utils';
+@use '../tokens/animation/tokens';
+
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(animation, tokens.$tokens, $key, $prefix);
+}
+
+@function provide($tokens, $prefix: config.$prefix) {
+  @return utils.provide(tokens.$tokens, $tokens, animation, $prefix);
+}

package/styles/core/styles/border/index.scss

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+@use '../tokens/border/tokens';
+@use '../theme';
+@use '../utils';
+
+///
+/// Gets a CSS custom property declaration for a specific border token with its token value as the fallback value.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   @include border.style(standard); // => border: var(--forge-border-standard, 1px solid var(--forge-theme-border-color));
+/// }
+/// ```
+/// 
+@mixin style($type, $style: solid, $prefix: config.$prefix) {
+  border: value($type, $style, $prefix);
+}
+
+///
+/// Gets a CSS custom property declaration for a specific border token with its token value as the fallback value.
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(border, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided spacing tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, border, $prefix);
+}

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

@@ -7,7 +7,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use '../core/config';
-@use '../tokens/theme/elevation';
+@use '../tokens/elevation/tokens';
 
 ///
 /// Generates a `box-shadow` style value for the provided elevation z-value.
@@ -21,13 +21,13 @@
     @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
   }
 
-  $umbra-z-value: map.get(elevation.$umbra-map, $z-value);
-  $penumbra-z-value: map.get(elevation.$penumbra-map, $z-value);
-  $ambient-z-value: map.get(elevation.$ambient-map, $z-value);
+  $umbra-z-value: map.get(tokens.$umbra-map, $z-value);
+  $penumbra-z-value: map.get(tokens.$penumbra-map, $z-value);
+  $ambient-z-value: map.get(tokens.$ambient-map, $z-value);
 
-  $umbra-color: rgba($color, elevation.$umbra-opacity + $opacity-boost);
-  $penumbra-color: rgba($color, elevation.$penumbra-opacity + $opacity-boost);
-  $ambient-color: rgba($color, elevation.$ambient-opacity + $opacity-boost);
+  $umbra-color: rgba($color, tokens.$umbra-opacity + $opacity-boost);
+  $penumbra-color: rgba($color, tokens.$penumbra-opacity + $opacity-boost);
+  $ambient-color: rgba($color, tokens.$ambient-opacity + $opacity-boost);
 
   @return (
     #{'#{$umbra-z-value} #{$umbra-color}'},
@@ -39,14 +39,14 @@
 ///
 /// Returns a an elevation value specified by the provided elevation z-value.
 /// 
-@function value($z-value, $color: elevation.$baseline-color, $opacity-boost: 0) {
+@function value($z-value, $color: tokens.$baseline-color, $opacity-boost: 0) {
   @return _calc-box-shadow($z-value, $color, $opacity-boost);
 }
 
 ///
 /// Sets a `box-shadow` style specified by the provided elevation z-value.
 /// 
-@mixin box-shadow($z-value, $color: elevation.$baseline-color, $opacity-boost: 0) {
+@mixin box-shadow($z-value, $color: tokens.$baseline-color, $opacity-boost: 0) {
   box-shadow: #{_calc-box-shadow($z-value, $color, $opacity-boost)};
 }
 
@@ -56,6 +56,6 @@
 /// All z-index values are set as CSS custom properties, so they can be overridden globally.
 /// 
 @mixin z-index($level) {
-  $value: map.get(elevation.$z-index-map, $level);
+  $value: map.get(tokens.$z-index-map, $level);
   z-index: var(--#{config.$prefix}-z-index-#{$level}, #{$value});
 }

package/styles/core/styles/shape/index.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+@use '../tokens/shape/tokens';
+@use '../utils';
+
+///
+/// Creates a `border-radius` style using the provided radius token.
+/// 
+@mixin radius($radius) {
+  border-radius: variable($radius);
+}
+
+///
+/// Gets a CSS custom property declaration for a specific shape token, with its token value as the fallback value.
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(shape, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided shape tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, shape, $prefix);
+}
+

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

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+@use '../tokens/spacing/tokens';
+@use '../utils';
+
+///
+/// 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('200'); // => margin: var(--forge-spacing-standard, 16px);
+/// }
+/// ```
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(spacing, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided spacing tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, spacing, $prefix);
+}

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

@@ -5,7 +5,8 @@
  */
 @use 'sass:map';
 @use '../core/config';
-@use '../tokens/theme/tokens' as theme-tokens;
+@use '../tokens/theme/tokens';
+@use '../utils';
 
 ///
 /// Emits custom property declarations for all default theme tokens.
@@ -14,14 +15,14 @@
   /// 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 theme-tokens.$mdc-remap {
+    @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 theme-tokens.$tokens {
+    @each $token-name, $token-value in tokens.$tokens {
       --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
     }
   }
@@ -31,18 +32,21 @@
 /// Emits custom property declarations for all dark theme tokens.
 /// 
 @mixin properties-dark {
-  @each $token-name, $token-value in theme-tokens.$tokens-dark {
+  @each $token-name, $token-value in tokens.$tokens-dark {
     --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
   }
 }
 
 ///
-/// Gets a CSS custom property declaration for a specific theme variable, with its token value as the fallback value
+/// Gets a CSS custom property declaration for a specific theme token, with its token value as the fallback value
 /// 
-@function variable($key, $prefix: '#{config.$prefix}-theme') {
-  @if not map.get(theme-tokens.$tokens, $key) {
-    @error 'Invalid theme property: #{$key}';
-  }
-  $value: map.get(theme-tokens.$tokens, $key);
-  @return var(--#{$prefix}-#{$key}, $value);
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(theme, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided theme tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, theme, $prefix);
 }

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

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$tokens: (
+  duration-short1: 50ms,
+  duration-short2: 100ms,
+  duration-short3: 150ms,
+  duration-short4: 200ms,
+
+  duration-medium1: 250ms,
+  duration-medium2: 300ms,
+  duration-medium3: 350ms,
+  duration-medium4: 400ms,
+
+  duration-long1: 450ms,
+  duration-long2: 500ms,
+  duration-long3: 550ms,
+  duration-long4: 600ms,
+
+  duration-extra-long1: 700ms,
+  duration-extra-long2: 800ms,
+  duration-extra-long3: 900ms,
+  duration-extra-long4: 1000ms,
+
+  easing-linear: cubic-bezier(0, 0, 1, 1),
+  easing-standard: cubic-bezier(0.2, 0, 0, 1),
+  easing-accelerate: cubic-bezier(0.3, 0, 1, 1),
+  easing-decelerate: cubic-bezier(0, 0, 0, 1),
+  easing-emphasized: cubic-bezier(0.2, 0, 0, 1),
+  easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15),
+  easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  thin: 1px,
+  medium: 2px,
+  thick: 4px
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -5,7 +5,7 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../utils';
 
 $tokens: (
   size: utils.module-val(circular-progress, size, 48px),

package/styles/core/styles/tokens/focus-indicator/_tokens.scss

@@ -5,18 +5,22 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../shape';
+@use '../../border';
+@use '../../animation';
+@use '../../spacing';
+@use '../../utils';
 
 /* stylelint-disable length-zero-no-unit */
 $tokens: (
   active-width: utils.module-val(focus-indicator, active-width, 6px),
   color: utils.module-val(focus-indicator, color, theme.variable(primary)),
-  duration: utils.module-val(focus-indicator, duration, 600ms),
-  outward-offset: utils.module-val(focus-indicator, outward-offset, 4px),
-  inward-offset: utils.module-val(focus-indicator, inward-offset, 0px), // Requires unit
-  shape: utils.module-val(focus-indicator, shape, 1px),
-  width: utils.module-val(focus-indicator, width, 2px),
-  easing: utils.module-val(focus-indicator, easing, cubic-bezier(0.2, 0, 0, 1)),
+  duration: utils.module-val(focus-indicator, duration, animation.variable(duration-long4)),
+  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable('050')),
+  inward-offset: utils.module-val(focus-indicator, inward-offset, 0), // Requires unit
+  shape: utils.module-val(focus-indicator, shape, shape.variable(extra-small)),
+  width: utils.module-val(focus-indicator, width, border.variable(medium)),
+  easing: utils.module-val(focus-indicator, easing, animation.variable(easing-emphasized)),
   shape-start-start: utils.module-ref(focus-indicator, shape-start-start, shape),
   shape-start-end: utils.module-ref(focus-indicator, shape-start-end, shape),
   shape-end-end: utils.module-ref(focus-indicator, shape-end-end, shape),

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

@@ -5,15 +5,17 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../animation';
+@use '../../shape';
+@use '../../utils';
 
 $tokens: (
   track-height: utils.module-val(linear-progress, track-height, 4px),
   track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-track-color)),
   active-indicator-color: utils.module-val(linear-progress, indicator-color, theme.variable(tertiary)),
-  track-shape: utils.module-val(linear-progress, track-shape, 0),
+  track-shape: utils.module-val(linear-progress, track-shape, shape.variable(full)),
   active-indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),
-  determinate-duration: utils.module-val(linear-progress, determinate-duration, 250ms),
+  determinate-duration: utils.module-val(linear-progress, determinate-duration, animation.variable(duration-medium1)),
   indeterminate-duration: utils.module-val(linear-progress, indeterminate-duration, 2s),
   determinate-easing: utils.module-val(linear-progress, determinate-easing, cubic-bezier(0.4, 0, 0.6, 1)),
 ) !default;

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

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:math';
+@use 'sass:map';
+
+$base: 4px !default;
+$extra-small: math.div($base, 4) !default; // 1px
+$small: math.div($base, 2) !default;       // 2px
+$medium: $base !default;                   // 4px
+$large: $base * 2 !default;                // 8px
+
+$tokens: (
+  extra-small: $extra-small,
+  extra-small-block-start: $extra-small $extra-small 0 0,
+  extra-small-block-end: 0 0 $extra-small $extra-small,
+  extra-small-inline-start: $extra-small 0 0 $extra-small,
+  extra-small-inline-end: 0 $extra-small $extra-small 0,
+  small: $small,
+  small-block-start: $small $small 0 0,
+  small-block-end: 0 0 $small $small,
+  small-inline-start: $small 0 0 $small,
+  small-inline-end: 0 $small $small 0,
+  medium: $medium,
+  medium-block-start: $medium $medium 0 0,
+  medium-block-end: 0 0 $medium $medium,
+  medium-inline-start: $medium 0 0 $medium,
+  medium-inline-end: 0 $medium $medium 0,
+  large: $large,
+  large-block-start: $large $large 0 0,
+  large-block-end: 0 0 $large $large,
+  large-inline-start: $large 0 0 $large,
+  large-inline-end: 0 $large $large 0,
+  full: 9999px, // Pill shaped
+  round: 50%
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -5,14 +5,15 @@
  */
 @use 'sass:map';
 @use '../../theme';
+@use '../../shape';
 @use '../color-palette';
-@use '../utils';
+@use '../../utils';
 
 $tokens: (
   track-height: utils.module-val(slider, track-height, 4px),
   active-track-color: utils.module-val(slider, active-track-color, theme.variable(primary)),
   active-track-height: utils.module-ref(slider, active-track-height, track-height),
-  active-track-shape: utils.module-val(slider, active-track-shape, 9999px),
+  active-track-shape: utils.module-val(slider, active-track-shape, shape.variable(full)),
   disabled-active-track-color: utils.module-val(slider, disabled-active-track-color, color-palette.$grey-500),
   disabled-active-track-opacity: utils.module-val(slider, disabled-active-track-opacity, 0.38),
   disabled-handle-color: utils.module-val(slider, disabled-handle-color, color-palette.$grey-500),
@@ -21,16 +22,17 @@ $tokens: (
   focus-handle-color: utils.module-val(slider, focus-handle-color, theme.variable(primary)),
   handle-color: utils.module-val(slider, handle-color, theme.variable(primary)),
   handle-height: utils.module-val(slider, handle-height, 20px),
-  handle-shape: utils.module-val(slider, handle-shape, 9999px),
+  handle-shape: utils.module-val(slider, handle-shape, shape.variable(round)),
   handle-width: utils.module-val(slider, handle-width, 20px),
   hover-handle-color: utils.module-val(slider, hover-handle-color, theme.variable(primary)),
   inactive-track-color-fallback: utils.module-val(slider, inactive-track-color, #d5d8ee), // TODO: remove this when we're confident that color-mix is more widely supported
   inactive-track-color: utils.module-val(slider, inactive-track-color, color-mix(in srgb, theme.variable(primary) 24%, transparent)),
   inactive-track-height: utils.module-ref(slider, inactive-track-height, track-height),
-  inactive-track-shape: utils.module-val(slider, inactive-track-shape, 9999px),
+  inactive-track-shape: utils.module-val(slider, inactive-track-shape, shape.variable(full)),
+  label-container-shape: utils.module-val(slider, label-container-shape, shape.variable(full)),
   label-container-color: utils.module-val(slider, label-container-color, theme.variable(primary)),
   label-container-height: utils.module-val(slider, label-container-height, 28px),
-  label-label-text-color: utils.module-val(slider, label-label-text-color, theme.variable(on-primary)),
+  label-text-color: utils.module-val(slider, label-text-color, theme.variable(on-primary)),
   pressed-handle-color: utils.module-val(slider, pressed-handle-color, theme.variable(primary)),
   state-layer-size: utils.module-val(slider, state-layer-size, 40px),
   with-overlap-handle-outline-color: utils.module-val(slider, with-overlap-handle-outline-color, theme.variable(on-primary)),

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$base: 8px !default; // The Forge spacing system scales in multiples of 8
+
+$tokens: (
+  '025': $base * 0.25, // 2px
+  '050': $base * 0.5,  // 4px
+  '100': $base,        // 8px
+  '150': $base * 1.5,  // 12px
+  '200': $base * 2,    // 16px
+  '300': $base * 3,    // 24px
+  '400': $base * 4,    // 32px
+  '600': $base * 6,    // 48px
+  '700': $base * 7,    // 56px
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}
+

package/styles/core/styles/tokens/state-layer/_tokens.scss

@@ -5,7 +5,7 @@
  */
 @use 'sass:map';
 @use '../../theme';
-@use '../utils';
+@use '../../utils';
 
 $tokens: (
   color: utils.module-val(state-layer, color, theme.variable(on-surface)),

package/styles/core/styles/tokens/tabs/tab/_tokens.scss

@@ -5,7 +5,7 @@
  */
 @use 'sass:map';
 @use '../../../theme';
-@use '../../utils';
+@use '../../../utils';
 
 $tokens: (
   // Shared

package/styles/core/styles/tokens/tabs/tab-bar/_tokens.scss

@@ -5,7 +5,7 @@
  */
 @use 'sass:map';
 @use '../../../theme';
-@use '../../utils';
+@use '../../../utils';
 
 $tokens: (
   container-justify: utils.module-val(tab-bar, justify, space-between),