@tylertech/forge 3.0.0-next.7 → 3.0.0-next.9

package/styles/core/styles/tokens/index.scss

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+
+@forward './theme/tokens';
+
+// Theme tokens
+@use './theme/tokens' as theme-tokens;
+
+// Component tokens
+@use './circular-progress/tokens' as circular-progress-tokens;
+@use './focus-indicator/tokens' as focus-indicator-tokens;
+@use './state-layer/tokens' as state-layer-tokens;
+
+///
+/// This is a map of all tokens across all modules.
+/// 
+$all-tokens: (
+  theme: theme-tokens.$tokens,
+  circular-progress: circular-progress-tokens.$tokens,
+  focus-indicator: focus-indicator-tokens.$tokens,
+  state-layer: state-layer-tokens.$tokens
+);
+
+///
+/// Emits CSS custom property declarations for tokens on a per-module basis,
+/// using the provided token map.
+/// 
+/// The key is the module name, and the value is a map of token names to values.
+/// 
+@mixin provide($key, $tokens) {
+  $module-tokens: map.get($all-tokens, $key);
+
+  @if not $module-tokens {
+    @error 'Invalid token module key: "#{$key}"';
+  }
+  
+  @each $token-name, $token-value in $tokens {
+    @if not map.get($module-tokens, $token-name) {
+      @error 'Invalid token "#{$token-name}" for module "#{$key}"';
+    }
+    --#{config.$prefix}-#{$key}-#{$token-name}: #{$token-value};
+  }
+}
+
+///
+/// Emits CSS custom property declarations for all in the provided module.
+/// 
+@mixin configuration($module, $prefix: config.$prefix) {
+  $module-tokens: map.get($all-tokens, $module);
+  @each $token, $value in $module-tokens {
+    --_#{$token}: var(--#{$prefix}-#{$token}, #{$value});
+  }
+}

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

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../theme/tokens';
+
+$tokens: (
+  color: tokens.variable(on-surface),
+  hover-color: var(--_color),
+  hover-opacity: 0.08,
+  pressed-color: var(--_color),
+  pressed-opacity: 0.12,
+  hover-duration: 15ms,
+  pressed-duration: 105ms,
+  animation-duration: 375ms
+) !default;

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

@@ -0,0 +1,185 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../core/config';
+@use '../color-palette' as color-palette;
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
+
+/// Layering tokens to define z-index ranges for common UI elements
+$z-index-tokens: (
+  surface: 1,
+  header: 4,
+  backdrop: 7,
+  dialog: 8,
+  notification: 9,
+  popup: 10,
+  tooltip: 11
+) !default;
+
+/// All semantic tokens for the Forge default (light) theme
+$tokens: (
+  // General theme colors
+  primary: color-palette.$indigo-500,
+  on-primary: #ffffff,
+  secondary: color-palette.$amber-500,
+  on-secondary: #000000,
+  tertiary: color-palette.$indigo-a400,
+  on-tertiary: #ffffff,
+  background: color-palette.$grey-50,
+  surface: #ffffff,
+  on-surface: #000000,
+
+  // Status colors
+  success: color-palette.$green-800,
+  on-success: #ffffff,
+  error: #b00020,
+  on-error: #ffffff,
+  warning: #d14900,
+  on-warning: #ffffff,
+
+  // Text colors
+  text-primary: rgba(0, 0, 0, 0.87),
+  text-secondary: rgba(0, 0, 0, 0.54),
+  text-disabled: rgba(0, 0, 0, 0.12),
+  text-hint: rgba(0, 0, 0, 0.38),
+  text-icon: rgba(0, 0, 0, 0.38),
+  text-primary-on-light: rgba(0, 0, 0, 0.87),
+  text-secondary-on-light: rgba(0, 0, 0, 0.54),
+  text-disabled-on-light: rgba(0, 0, 0, 0.38),
+  text-primary-on-dark: rgba(255, 255, 255, 0.87),
+  text-secondary-on-dark: rgba(255, 255, 255, 0.7),
+
+  // Utility semantic colors
+  track-color: rgba(0, 0, 0, 0.12),
+  border-color: color-palette.$grey-300,
+  icon-color: color-palette.$grey-600,
+  form-field-label-on-background: rgba(0, 0, 0, 0.65),
+  form-field-icon-disabled-on-background: rgba(0, 0, 0, 0.26),
+  form-field-text-disabled-on-background: rgba(0, 0, 0, 0.6),
+  form-field-disabled-on-background: color-palette.$grey-100,
+  label-disabled-on-background: rgba(0, 0, 0, 0.38),
+  elevated-surface: #ffffff,
+  on-elevated-surface: rgba(0, 0, 0, 0.87),
+  popup-elevation: mdc-elevation-theme.elevation-box-shadow(2),
+  scrollbar-thumb: color-palette.$grey-400,
+  scrollbar-thumb-hover: color-palette.$grey-500,
+  scrollbar-track: #f0f0f0,
+  scrollbar-track-hover: #ececec
+) !default;
+
+/// All tokens for the Forge dark theme
+$tokens-dark: (
+  // General theme colors
+  primary: color-palette.$indigo-a100,
+  on-primary: #000000,
+  secondary: color-palette.$amber-200,
+  on-secondary: #000000,
+  tertiary: var(--forge-theme-secondary, color-palette.$amber-200),
+  on-tertiary: #ffffff,
+  background: color-palette.$grey-900,
+  surface: #2c2c2c,
+  on-surface: #ffffff,
+
+  // Status colors
+  text-primary: rgba(255, 255, 255, 0.87),
+  text-secondary: rgba(255, 255, 255, 0.54),
+  text-disabled: rgba(255, 255, 255, 0.12),
+  text-hint: rgba(255, 255, 255, 0.38),
+  text-icon: rgba(255, 255, 255, 0.38),
+  text-disabled-on-background: rgba(255, 255, 255, 0.12),
+  text-disabled-on-light: rgba(255, 255, 255, 0.38),
+  text-secondary-on-light: rgba(255, 255, 255, 0.54),
+  text-primary-on-dark: #000000,
+
+  // Utility semantic colors
+  track-color: rgba(255, 255, 255, 0.12),
+  border-color: #464646,
+  form-field-icon-disabled-on-background: rgba(78, 45, 45, 0.26),
+  form-field-disabled-on-background: #353535,
+  form-field-text-disabled-on-background: rgba(255, 255, 255, 0.6),
+  form-field-label-on-background: rgba(255, 255, 255, 0.65),
+  label-disabled-on-background: rgba(255, 255, 255, 0.38),
+  scrollbar-thumb: color-palette.$grey-600,
+  scrollbar-thumb-hover: color-palette.$grey-500,
+  scrollbar-track: #3a3a3a,
+  scrollbar-track-hover: color-palette.$grey-800,
+  elevated-surface: #363636,
+  on-elevated-surface: rgba(255, 255, 255, 0.87),
+  popup-elevation: mdc-elevation-theme.elevation-box-shadow(16)
+) !default;
+
+///
+/// Temporary tokens to map the MDC theme to Forge theme
+///
+/// TODO: Remove this once MDC dependency is removed
+/// 
+$mdc-remap: (
+  primary: var(--forge-theme-primary, map.get($tokens, primary)),
+  on-primary: var(--forge-theme-on-primary, map.get($tokens, on-primary)),
+  secondary: var(--forge-theme-secondary, map.get($tokens, secondary)),
+  on-secondary: var(--forge-theme-on-secondary, map.get($tokens, on-secondary)),
+  background: var(--forge-theme-background, map.get($tokens, background)),
+  surface: var(--forge-theme-surface, map.get($tokens, surface)),
+  on-surface: var(--forge-theme-on-surface, map.get($tokens, on-surface)),
+  error: var(--forge-theme-error, map.get($tokens, error)),
+  on-error: var(--forge-theme-on-error, map.get($tokens, on-error)),
+  text-primary-on-background: var(--forge-theme-text-primary, map.get($tokens, text-primary)),
+  text-secondary-on-background: var(--forge-theme-text-secondary, map.get($tokens, text-secondary)),
+  text-disabled-on-background: var(--forge-theme-text-disabled, map.get($tokens, text-disabled)),
+  text-hint-on-background: var(--forge-theme-text-hint, map.get($tokens, text-hint)),
+  text-icon-on-background: var(--forge-theme-text-icon, map.get($tokens, text-icon)),
+  text-primary-on-light: var(--forge-theme-text-primary-on-light, map.get($tokens, text-primary-on-light)),
+  text-secondary-on-light: var(--forge-theme-text-secondary-on-light, map.get($tokens, text-secondary-on-light)),
+  text-disabled-on-light: var(--forge-theme-text-disabled-on-light, map.get($tokens, text-disabled-on-light)),
+  text-primary-on-dark: var(--forge-theme-text-primary-on-dark, map.get($tokens, text-primary-on-dark)),
+);
+
+///
+/// Emits custom property declarations for all default theme tokens.
+/// 
+@mixin theme-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 $mdc-remap {
+      --mdc-theme-#{$token-name}: #{$token-value};
+    }
+  }
+
+  // Forge theme tokens
+  :root {
+    @each $token-name, $token-value in $tokens {
+      --forge-theme-#{$token-name}: #{$token-value};
+    }
+  }
+}
+
+///
+/// Emits custom property declarations for all dark theme tokens.
+/// 
+@mixin theme-properties-dark {
+  @each $token-name, $token-value in $tokens-dark {
+    --forge-theme-#{$token-name}: #{$token-value};
+  }
+}
+
+///
+/// Emits a style declaration for a specific style property that references a theme variable.
+/// 
+@mixin property($style, $key) {
+  #{$style}: #{variable($key, $fallback)};
+}
+
+///
+/// Gets a CSS custom property declaration for a specific theme variable, with its token value as the fallback value
+/// 
+@function variable($key, $prefix: '#{config.$prefix}-theme') {
+  @if not map.get($tokens, $key) {
+    @error 'Invalid theme property: #{$key}';
+  }
+  $value: map.get($tokens, $key);
+  @return var(--#{$prefix}-#{$key}, $value);
+}

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../tokens';
+
+$font-family: 'Roboto', sans-serif !default;
+
+$base: (
+  font-family: $font-family,
+  font-size: 16px,
+  font-weight: 400,
+  line-height: normal,
+  letter-spacing: normal,
+  text-transform: none,
+  text-decoration: none,
+  color: tokens.variable(text-primary)
+) !default;
+
+$title: (
+  font-family: map.get($base, font-family)
+  font-size: 20px,
+  font-weight: map.get($base, font-weight),
+  line-height: 24px,
+  letter-spacing: 0.0125em,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: map.get($base, color)
+) !default;
+
+$label: (
+  font-family: map.get($base, font-family),
+  font-size: 12px,
+  font-weight: map.get($base, font-weight),
+  line-height: 20px,
+  letter-spacing: 0.0333333333em,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: map.get($base, color)
+) !default;
+
+$tokens: (
+  title: $title,
+  label: $label
+) !default;

package/styles/core/styles/utils/_elevation.scss

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */

package/styles/focus-indicator/_mixins.scss

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens';
+
+@mixin provide-theme($theme) {
+  @include tokens.provide('focus-indicator', $theme);
+}
+
+@mixin configuration {
+  --_active-width: var(--forge-focus-indicator-active-width, 6px);
+  --_color: var(--forge-focus-indicator-color, #{tokens.variable(primary)});
+  --_duration: var(--forge-focus-indicator-duration, 600ms);
+  --_outward-offset: var(--forge-focus-indicator-outward-offset, 4px);
+  --_inward-offset: var(--forge-focus-indicator-inward-offset, 0px); // stylelint-disable-line length-zero-no-unit
+  --_shape: var(--forge-focus-indicator-shape, 1px);
+  --_width: var(--forge-focus-indicator-width, 2px);
+  --_easing: var(--forge-focus-indicator-easing, cubic-bezier(0.2, 0, 0, 1));
+  --_shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_shape));
+  --_shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_shape));
+  --_shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_shape));
+  --_shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_shape));
+  --_margin-block: var(--forge-focus-indicator-offset-block, 0);
+  --_margin-inline: var(--forge-focus-indicator-offset-inline, 0);
+}
+
+@mixin core-styles {
+  .forge-focus-indicator {
+    @include configuration;
+    @include base;
+  }
+
+  @include reduced-motion-styles;
+  @include keyframes;
+}
+
+@mixin outward-styles {
+  .forge-focus-indicator {
+    @include outward;
+  }
+}
+
+@mixin inward-styles {
+  .forge-focus-indicator {
+    @include inward;
+  }
+}
+
+@mixin active-styles {
+  .forge-focus-indicator {
+    @include active;
+  }
+}
+
+@mixin circular-styles {
+  .forge-focus-indicator {
+    --_shape: 50%;
+  }
+}
+
+@mixin reduced-motion-styles {
+  @media (prefers-reduced-motion) {
+    .forge-focus-indicator {
+      animation: none;
+    }
+  }
+}
+
+@mixin base {
+  animation-delay: 0s, calc(var(--_duration) * 0.25);
+  animation-duration: calc(var(--_duration) * 0.25), calc(var(--_duration) * 0.75);
+  animation-timing-function: var(--_easing);
+  box-sizing: border-box;
+  color: var(--_color);
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin-block: var(--_margin-block);
+  margin-inline: var(--_margin-inline);
+}
+
+@mixin active {
+  display: flex;
+}
+
+@mixin outward {
+  animation-name: outward-grow, outward-shrink;
+  border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
+  border-end-start-radius: calc(var(--_shape-end-start) + var(--_outward-offset));
+  border-start-end-radius: calc(var(--_shape-start-end) + var(--_outward-offset));
+  border-start-start-radius: calc(var(--_shape-start-start) + var(--_outward-offset));
+  inset: calc(-1 * var(--_outward-offset));
+  outline: var(--_width) solid currentColor;
+}
+
+@mixin inward {
+  animation-name: inward-grow, inward-shrink;
+  border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
+  border-end-start-radius: calc(var(--_shape-end-start) - var(--_inward-offset));
+  border-start-end-radius: calc(var(--_shape-start-end) - var(--_inward-offset));
+  border-start-start-radius: calc(var(--_shape-start-start) - var(--_inward-offset));
+  border: var(--_width) solid currentColor;
+  inset: var(--_inward-offset);
+}
+
+@mixin keyframes {
+  @keyframes outward-grow {
+    from {
+      outline-width: 0;
+    }
+    to {
+      outline-width: var(--_active-width);
+    }
+  }
+
+  @keyframes outward-shrink {
+    from {
+      outline-width: var(--_active-width);
+    }
+  }
+
+  @keyframes inward-grow {
+    from {
+      border-width: 0;
+    }
+    to {
+      border-width: var(--_active-width);
+    }
+  }
+
+  @keyframes inward-shrink {
+    from {
+      border-width: var(--_active-width);
+    }
+  }
+}

package/styles/focus-indicator/_variables.scss

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */

package/styles/focus-indicator/focus-indicator.scss

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

package/styles/linear-progress/_mixins.scss

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use '../core/style-layer/linear-progress';
+@use '../core/styles/linear-progress';
 @use '../theme';
 @use './variables';
 

package/styles/linear-progress/_variables.scss

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/style-layer/linear-progress/variables';
+@use '../core/styles/linear-progress/variables';
 
 $supported-theme-properties: (
   'height',

package/styles/slider/_mixins.scss

@@ -4,7 +4,9 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use '../core/style-layer/slider';
+@use '../core/styles/slider';
+@use '../focus-indicator/mixins' as focus-indicator;
+@use '../state-layer/mixins' as state-layer;
 @use './variables';
 
 @mixin provide-theme($theme) {
@@ -24,4 +26,18 @@
 
 @mixin core-styles {
   @include slider.styles;
+
+  forge-focus-indicator {
+    /* stylelint-disable length-zero-no-unit */
+    @include focus-indicator.provide-theme((
+      shape: 50%,
+      outward-offset: 0px
+    ));
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: var(--_handle-color)
+    ));
+  }
 }

package/styles/state-layer/_mixins.scss

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/state-layer';
+@use '../core/styles/tokens';
+
+@mixin provide-theme($theme) {
+  @include tokens.provide('state-layer', $theme);
+}
+
+@mixin core-styles {
+  @include state-layer.styles;
+}
+
+@mixin host {
+  @include state-layer.host;
+}
+
+@mixin disabled {
+  @include state-layer.disabled;
+}

package/styles/state-layer/state-layer.scss

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

package/styles/tabs/tab/_mixins.scss

@@ -3,7 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/style-layer/tabs/tab';
+@use 'sass:list';
+@use '../../core/styles/tabs/tab';
+@use '../../focus-indicator/mixins' as focus-indicator;
+@use '../../state-layer/mixins' as state-layer;
 @use './variables';
 
 @mixin provide-theme($theme) {
@@ -19,6 +22,10 @@
 
 @mixin core-styles {
   @include tab.styles;
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme(( shape: 8px ));
+  }
 }
 
 @mixin focus-styles {
@@ -44,6 +51,18 @@
 @mixin selected-styles {
   @include tab.selected-styles;
   @include tab.forced-colors-styles;
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      'offset-block': 0 calc(var(--_active-indicator-height) + 1px)
+    ));
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: var(--_active-indicator-color)
+    ));
+  }
 }
 
 @mixin stacked-styles {

package/styles/tabs/tab/_variables.scss

@@ -4,6 +4,8 @@
  * License: Apache-2.0
  */
 $supported-theme-properties: (
+  'inactive-color',
+  'active-color',
   'indicator-color',
   'indicator-height',
   'indicator-shape',

package/styles/tabs/tab-bar/_mixins.scss

@@ -3,7 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/style-layer/tabs/tab-bar';
+@use 'sass:list';
+@use '../../core/styles/tabs/tab-bar';
 @use './variables';
 
 @mixin provide-theme($theme) {

package/styles/tabs/tab-bar/_variables.scss

@@ -6,6 +6,6 @@
 $supported-theme-properties: (
   'justify',
   'stretch',
-  'underline-color',
-  'underline-thickness'
+  'divider-color',
+  'divider-thickness'
 );

package/styles/theme/_theme-dark.scss

@@ -26,12 +26,14 @@
 @use '../table/variables' as table-variables;
 @use '../switch/switch-theme' as switch-theme;
 
+@use '../core/styles/tokens/theme/tokens' as theme-tokens;
+
 ///
 /// Provides the CSS custom property definitions for the default Forge dark theme.
 ///
-@mixin theme-properties() {
-  /// Global MDC and Forge theme properties
-  @include theme.provide-theme(theme-values.$property-values-dark);
+@mixin theme-properties {
+  /// Global Forge theme properties
+  @include theme-tokens.theme-properties-dark;
 
   /// Component-specific Forge theme properties
   @include app-bar-mixins.provide-theme(app-bar-variables.$theme-values-dark);