@tylertech/forge 2.0.0

package/styles/theme/_theme-values.scss

@@ -0,0 +1,244 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '@material/theme/color-palette' as mdc-color-palette;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
+@use './keys';
+
+/// MDC theme variable overrides
+$primary: mdc-color-palette.$indigo-500 !default;
+$on-primary: #ffffff !default;
+$secondary: mdc-color-palette.$amber-500 !default;
+$on-secondary: #000000 !default;
+$accent: $secondary !default;
+$on-accent: $on-secondary !default;
+$background: mdc-color-palette.$grey-50 !default;
+$surface: #ffffff !default;
+$on-surface: #000000 !default;
+$error: #b00020 !default;
+$on-error: #ffffff !default;
+$text-disabled-on-background: rgba(0, 0, 0, 0.12) !default;
+
+// Tyler theme variables
+$success: #2e7d32 !default;
+$success-muted: #a5d6a7 !default;
+$success-text-muted: #1b5e20 !default;
+$warning: #d14900 !default;
+$warning-muted: #ffdba6 !default;
+$warning-text-muted: #a03a03 !default;
+$danger: $error !default;
+$danger-hover: #db8a98; //350 37 86
+$danger-muted: #ffcdd2 !default;
+$danger-text-muted: #a22d0e !default;
+$info-primary: #1a237e !default;
+$info-primary-muted: #bbdefb !default;
+$info-primary-text-muted: #1a237e !default;
+$info-secondary: #000000 !default;
+$info-secondary-muted: #e0e0e0 !default;
+$info-secondary-text-muted: #000000 !default;
+$info: mdc-color-palette.$grey-800 !default;
+$label-color: mdc-color-palette.$grey-700 !default;
+$icon-color: mdc-color-palette.$grey-600 !default;
+$disabled-color: mdc-color-palette.$grey-500 !default;
+$border-color: mdc-color-palette.$grey-300 !default;
+$disabled-background: #f0f0f0 !default;
+$border: 1px solid $border-color !default;
+$text-primary-color: rgba(0, 0, 0, 0.87) !default;
+$text-secondary-color: rgba(0, 0, 0, 0.54) !default;
+$tertiary: mdc-color-palette.$indigo-a400 !default;
+$on-tertiary: #ffffff !default;
+$danger: $theme-danger !default;
+$warning: $theme-warning !default;
+$success: $theme-success !default;
+$info: $theme-info !default;
+$form-field-icon-disabled-on-background: rgba(0, 0, 0, 0.26) !default;
+$form-field-text-disabled-on-background: rgba(0, 0, 0, 0.6) !default;
+$form-field-disabled-on-background: mdc-color-palette.$grey-100 !default;
+$form-field-label-on-background: rgba(0, 0, 0, 0.65) !default;
+$label-disabled-on-background: rgba(0, 0, 0, 0.38) !default;
+$elevated-surface: $surface !default;
+$on-elevated-surface: rgba(0, 0, 0, 0.87) !default;
+$popup-elevation: mdc-elevation-theme.elevation-box-shadow(2) !default;
+$scrollbar-width: 16px !default;
+$scrollbar-height: 16px !default;
+$scrollbar-thumb-min-height: 32px !default;
+$scrollbar-thumb-min-width: 32px !default;
+$scrollbar-thumb: mdc-color-palette.$grey-400 !default;
+$scrollbar-thumb-hover: mdc-color-palette.$grey-500 !default;
+$scrollbar-track: #f0f0f0 !default;
+$scrollbar-track-hover: #ececec !default;
+
+$z-index-surface: 1 !default;
+$z-index-header: 4 !default;
+$z-index-backdrop: 7 !default;
+$z-index-dialog: 8 !default;
+$z-index-notification: 9 !default;
+$z-index-popup: 10 !default;
+$z-index-tooltip: 11 !default;
+
+$z-index-values: (
+  surface: $z-index-surface,
+  header: $z-index-header,
+  backdrop: $z-index-backdrop,
+  dialog: $z-index-dialog,
+  notification: $z-index-notification,
+  popup: $z-index-popup,
+  tooltip: $z-index-tooltip
+) !default;
+
+/// Colors to display in light and dark contrast contexts
+$text-colors: (
+  dark: (
+    primary: rgba(0, 0, 0, 0.87),
+    secondary: rgba(0, 0, 0, 0.54),
+    hint: rgba(0, 0, 0, 0.38),
+    disabled: rgba(0, 0, 0, 0.38),
+    disabled-secondary: rgba(0, 0, 0, 0.12),
+    icon: rgba(0, 0, 0, 0.38)
+  ),
+  light: (
+    primary: rgba(255, 255, 255, 0.87),
+    secondary: rgba(255, 255, 255, 0.7),
+    secondary-alternative: rgba(255, 255, 255, 0.54),
+    hint: rgba(255, 255, 255, 0.5),
+    disabled: rgba(255, 255, 255, 0.5),
+    disabled-secondary: rgba(255, 255, 255, 0.12),
+    icon: rgba(255, 255, 255, 0.5)
+  ),
+) !default;
+
+/// A map of text emphasis opacities by name
+$text-emphasis: (
+  high: 0.87,
+  medium: 0.6,
+  disabled: 0.38,
+) !default;
+
+/// A map of background colors and their contrast color to use on that background
+$background-colors: (
+  primary: $primary,
+  danger: $danger,
+  warning: $warning,
+  success: $success,
+  info-primary: $info-primary,
+  info-secondary: $info-secondary,
+  contrast: (
+    primary: #ffffff,
+    danger: #ffffff,
+    warning: #ffffff,
+    success: #ffffff,
+    info-primary: #ffffff,
+    info-secondary: #ffffff
+  )
+);
+
+/// Returns the original property values map
+@function original-property-values() {
+  @return map.merge((), $_property-values-copy);
+}
+
+/// Calculare color contrast on specific fill colors
+@function color-on-background($text-style, $fill-color) {
+  $contrast-tone: mdc-theme-color.contrast-tone($fill-color);
+  @return map.get(map.get($text-colors, $contrast-tone), $text-style);
+}
+
+/// A map of theme/custom property names and corresponding values
+$property-values: (
+  tertiary: $tertiary,
+  on-tertiary: $on-tertiary,
+  border-color: $border-color,
+  danger: $danger,
+  error-hover: $danger-hover,
+  warning: $warning,
+  success: $success,
+  info: $info,
+  icon-color: $icon-color,
+  form-field-label-on-background: $form-field-label-on-background,
+  form-field-icon-disabled-on-background: $form-field-icon-disabled-on-background,
+  form-field-text-disabled-on-background: $form-field-text-disabled-on-background,
+  form-field-disabled-on-background: $form-field-disabled-on-background,
+  label-disabled-on-background: $label-disabled-on-background,
+  elevated-surface: $elevated-surface,
+  on-elevated-surface: $on-elevated-surface,
+  popup-elevation: $popup-elevation,
+  scrollbar-thumb: $scrollbar-thumb,
+  scrollbar-thumb-hover: $scrollbar-thumb-hover,
+  scrollbar-track: $scrollbar-track,
+  scrollbar-track-hover: $scrollbar-track-hover
+) !default;
+
+// Add our theme property values to the theme key store
+@include keys.set-values($property-values, $options: (custom-property-prefix: theme));
+
+/// Keep track of the original values for comparison in case they are customized later
+$_property-values-copy: $property-values;
+
+/// MDC theme property map
+$mdc-property-values: (
+  primary: $primary,
+  secondary: $secondary,
+  background: $background,
+  error: $error,
+  on-primary: $on-primary,
+  on-secondary: $on-secondary,
+  surface: $surface,
+  on-surface: $on-surface,
+  on-error: $on-error,
+  text-primary-on-background: color-on-background(primary, $background),
+  text-secondary-on-background: color-on-background(secondary, $background),
+  text-hint-on-background: color-on-background(hint, $background),
+  text-disabled-on-background: color-on-background(disabled-secondary, $background),
+  text-icon-on-background: color-on-background(icon, $background),
+  text-primary-on-light: color-on-background(primary, light),
+  text-secondary-on-light: color-on-background(secondary, light),
+  text-hint-on-light: color-on-background(hint, light),
+  text-disabled-on-light: color-on-background(disabled, light),
+  text-icon-on-light: color-on-background(icon, light),
+  text-primary-on-dark: color-on-background(primary, dark),
+  text-secondary-on-dark: color-on-background(secondary, dark),
+  text-hint-on-dark: color-on-background(hint, dark),
+  text-disabled-on-dark: color-on-background(disabled, dark),
+  text-icon-on-dark: color-on-background(icon, dark)
+) !default;
+
+$property-values-dark: (
+  // Core theme variables from MDC
+  primary: #{mdc-color-palette.$indigo-a100},
+  secondary: #{mdc-color-palette.$amber-200},
+  background: #{mdc-color-palette.$grey-900},
+  surface: #2c2c2c,
+  error: #cf6679,
+  on-primary: #000000,
+  on-secondary: #000000,
+  on-surface: #ffffff,
+  on-error: #000000,
+  text-primary-on-dark: #000000,
+  text-primary-on-background: rgba(255, 255, 255, 0.87),
+  text-secondary-on-background: rgba(255, 255, 255, 0.54),
+  text-hint-on-background: rgba(255, 255, 255, 0.38),
+  text-icon-on-background: 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),
+
+  // forge-specific theme properties
+  tertiary: #{mdc-color-palette.$amber-200},
+  border-color: rgba(255, 255, 255, 0.12),
+  form-field-icon-disabled-on-background: rgba(255, 255, 255, 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: #{mdc-color-palette.$grey-600},
+  scrollbar-thumb-hover: #{mdc-color-palette.$grey-500},
+  scrollbar-track: #3a3a3a,
+  scrollbar-track-hover: #{mdc-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;

package/styles/theme/_theme.scss

@@ -0,0 +1,353 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '@material/theme/css';
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/replace';
+@use '@material/theme/keys' as mdc-keys;
+@use './custom-properties';
+@use './keys';
+@use './theme-values';
+@use './theme-utils';
+@use 'sass:list';
+
+/// Overrides the MDC theme key store with our own values to ensure that the fallback
+/// values for the custom properties are using our theme
+@include mdc-keys.register-theme(theme-values.$mdc-property-values);
+
+@mixin theme-styles($prefix: forge) {
+  @include mdc-theme-properties;
+  @include forge-theme-properties($prefix);
+  @include forge-z-index-properties($prefix);
+  @include theme-utils.core-styles;
+}
+
+/// MDC theme property overrides
+@mixin mdc-theme-properties() {
+  :root {
+    @each $style in map.keys(theme-values.$mdc-property-values) {
+      --mdc-theme-#{$style}: #{map.get(theme-values.$mdc-property-values, $style)};
+    }
+  }
+}
+
+/// Tyler-specific theme properties
+@mixin forge-theme-properties($prefix: forge) {
+  :root {
+    @each $style in map.keys(theme-values.$property-values) {
+      --#{$prefix}-theme-#{$style}: #{map.get(theme-values.$property-values, $style)};
+    }
+  }
+}
+
+/// Tyler-specific z-index properties
+@mixin forge-z-index-properties($prefix: forge) {
+  :root {
+    @each $type in map.keys(theme-values.$z-index-values) {
+      --#{$prefix}-z-index-#{$type}: #{map.get(theme-values.$z-index-values, $type)};
+    }
+  }
+}
+
+@function text-emphasis($emphasis) {
+  @return map.get(theme-values.$text-emphasis, $emphasis);
+}
+
+@function is-theme-key($style) {
+  @return map.has-key(theme-values.$property-values, $style);
+}
+
+/// Applies a dynamic value to the specified property. This mixin should be used
+/// in theme style mixins when setting properties.
+@mixin _property($property, $value, $gss: (), $replace: null, $important: false) {
+  @if custom-properties.is-custom-prop($value) {
+    // $value is a custom property Map
+    @include custom-properties.declaration($property, $value, $gss: $gss, $important: $important);
+  } @else if keys.is-key($value) {
+    // $value is a key String
+    $custom-prop: keys.create-custom-property($value);
+
+    @if is-theme-key($value) {
+      // Determine if we need to use a compile-time updated value to support
+      // Angular.
+      $key: $value;
+      // (changed: Bool, value: *)
+      $result: deprecated-get-global-theme-key-value-if-changed($key);
+
+      @if map.get($result, changed) {
+        // $property-values was changed at compile time. Use the
+        // global value instead. Otherwise if it was not changed, continue
+        // using the key store normally.
+        $custom-prop: keys.create-custom-property($key);
+        $custom-prop: custom-properties.set-fallback($custom-prop, map.get($result, value));
+      }
+    }
+
+    @include custom-properties.declaration($property, $custom-prop, $gss: $gss, $important: $important);
+  } @else {
+    // $value is a standard CSS value
+    $fallback: null;
+    @if $replace {
+      // If any replacements are null, treat the entire value as null (do not
+      // emit anything).
+      @each $name, $replacement in $replace {
+        @if $replacement == null {
+          $value: null;
+        }
+      }
+    }
+
+    @if $replace and $value {
+      @if meta.type-of($replace) != 'map' {
+        @error 'forge-theme: Invalid replacement #{$replace}. Must be a Map.';
+      }
+
+      $replace-map-fallback: ();
+      $replace-map-value: ();
+      $needs-fallback: false;
+
+      @each $name, $replacement in $replace {
+        @if custom-properties.is-custom-prop($replacement) {
+          $replace-value: custom-properties.get-declaration-value($replacement);
+          $replace-fallback: custom-properties.get-declaration-fallback($replacement);
+
+          @if $replace-fallback {
+            $needs-fallback: true;
+          }
+
+          $replace-map-value: map.set($replace-map-value, $name, $replace-value);
+          $replace-map-fallback: map.set($replace-map-fallback, $name, $replace-fallback);
+        } @else {
+          $replace-map-value: map.set($replace-map-value, $name, $replacement);
+          $replace-map-fallback: map.set($replace-map-fallback, $name, $replacement);
+        }
+      }
+
+      @if meta.type-of($value) == 'string' {
+        @if $needs-fallback {
+          $fallback: replace.replace-string($value, $replace-map-fallback);
+        }
+        $value: replace.replace-string($value, $replace-map-value);
+      } @else if meta.type-of($value) == 'list' {
+        @if $needs-fallback {
+          $fallback: replace.replace-list($value, $replace-map-fallback);
+        }
+        $value: replace.replace-list($value, $replace-map-value);
+      } @else {
+        @error 'forge-theme: Invalid replacement value #{$value}. $replace may only be used with string or list values.';
+      }
+    }
+
+    @include css.declaration($property, $value, $fallback-value: $fallback, $gss: $gss, $important: $important);
+  }
+}
+
+/// Checks if the global $forge-theme-property-values was dynamically changed at
+/// compile time. Typically, $property-values is configured once, but a Sass
+/// hack allows the variable to be changed multiple times and effectively
+/// support dynamic values.
+@function deprecated-get-global-theme-key-value-if-changed($key) {
+  $current-global-value: map.get(theme-values.$property-values, $key);
+  $original-property-values: theme-values.original-property-values();
+  $configured-global-value: map.get($original-property-values, $key);
+  @if $current-global-value != $configured-global-value {
+    @return (value: $current-global-value, changed: true);
+  }
+  @return (changed: false);
+}
+
+/// Consolidates the MDC and Forge theming systems by conditionally checking for existing theme keys
+/// and fetching the value from either system based on existence.
+@mixin property($property, $value, $gss: (), $replace: null, $important: false) {
+  @if map.has-key(theme-values.$property-values, $value) {
+    @include _property($property, $value);
+  } @else {
+    @include mdc-theme.property($property, $value);
+  }
+}
+
+/// Creates a z-index style from a prefined z-index map using a CSS custom property (with a fallback value);
+@mixin z-index($type, $customPropName: null, $prefix: forge) {
+  @if not map.has-key(theme-values.$z-index-values, $type) {
+    @error "Invalid type: '#{$type}'. Choose one of: #{map.keys($z-index-values)}";
+  }
+
+  $value: map.get(theme-values.$z-index-values, $type);
+
+  @if $customPropName == null {
+    $customPropName: --#{$prefix}-z-index-#{$type};
+  }
+
+  @include css-custom-property(z-index, $customPropName, $value);
+}
+
+/// Allow for setting a custom css property with a fallback property value
+@mixin css-custom-property($property, $varname, $fallback-value: null, $important: false) {
+  @include custom-properties.declaration($property, (
+    varname: $varname,
+    fallback: $fallback-value
+  ), $important: $important);
+}
+
+@mixin scrollbar() {
+  &::-webkit-scrollbar {
+    @include css-custom-property(width, --forge-scrollbar-width, theme-values.$scrollbar-width);
+    @include css-custom-property(height, --forge-scrollbar-height, theme-values.$scrollbar-height);
+  }
+  
+  &::-webkit-scrollbar-corner {
+    @include property(background-color, scrollbar-track);
+  }
+
+  &::-webkit-scrollbar-track {
+    @include property(background-color, scrollbar-track);
+    
+    &:hover {
+      @include property(background-color, scrollbar-track-hover);
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @include property(background-color, scrollbar-thumb);
+    @include css-custom-property(height, --forge-scrollbar-min-height, theme-values.$scrollbar-thumb-min-height);
+    @include css-custom-property(width, --forge-scrollbar-min-width, theme-values.$scrollbar-thumb-min-width);
+    @include css-custom-property(border-radius, --forge-scrollbar-border-radius, 10px);
+    @include css-custom-property(border-width, --forge-scrollbar-border-width, 3px);
+
+    border-style: solid;
+    border-color: transparent;
+    background-clip: content-box;
+
+    &:hover {
+      @include property(background-color, scrollbar-thumb-hover);
+    }
+  }
+}
+
+@mixin scrollbar-theme-styles() {
+  * {
+    @include scrollbar;
+  }
+}
+
+@function elevation($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {
+  @if type-of($z-value) != number or not unitless($z-value) {
+    @error '$z-value must be a unitless number, but received "#{$z-value}"';
+  }
+
+  @if $z-value < 0 or $z-value > 24 {
+    @error '$z-value must be between 0 and 24, but received "#{$z-value}"';
+  }
+
+  $color: mdc-theme-color.prop-value($color);
+
+  $umbra-z-value: map.get(elevation-theme.$umbra-map, $z-value);
+  $penumbra-z-value: map.get(elevation-theme.$penumbra-map, $z-value);
+  $ambient-z-value: map.get(elevation-theme.$ambient-map, $z-value);
+
+  $umbra-color: rgba($color, elevation-theme.$umbra-opacity + $opacity-boost);
+  $penumbra-color: rgba($color, elevation-theme.$penumbra-opacity + $opacity-boost);
+  $ambient-color: rgba($color, elevation-theme.$ambient-opacity + $opacity-boost);
+
+  @return #{$umbra-z-value} #{$umbra-color}, #{$penumbra-z-value} #{$penumbra-color}, #{$ambient-z-value} #{$ambient-color};
+}
+
+@mixin shadow($z-value, $color: $mdc-elevation-baseline-color, $opacity-boost: 0) {
+  box-shadow: elevation($z-value, $color, $opacity-boost);
+}
+
+
+/// Validates keys in provided theme configuration by comparing with original
+/// theme configuration.
+/// Use this in component's `theme()` mixin implementation to validate if
+/// provided theme configuration has supported theme configuration keys.
+/// @param {Map} $origin-theme - Original theme configuration in Sass map format
+///     that has all supported keys.
+/// @param {Map} $custom-theme - Provided theme configuration in Sass map format
+///     that should be validated against `$origin-theme`.
+/// @examples
+///     @mixin theme($theme) {
+///       @include theme.validate-theme($light-theme, $theme);
+///
+///       // ...
+///     }
+@mixin validate-theme($origin-theme, $custom-theme, $test-only: false) {
+  $origin-keys: map.keys($origin-theme);
+  $unsupported-keys: ();
+  $unsupported-custom-prop-keys: ();
+
+  @each $key, $value in $custom-theme {
+    @if (not list.index($origin-keys, $key)) {
+      $unsupported-keys: list.append(
+        $unsupported-keys,
+        $key,
+        $separator: comma
+      );
+    }
+
+    $is-prop: custom-properties.is-custom-prop($value) or
+      custom-properties.is-custom-prop-string($value);
+    @if $is-prop {
+      $unsupported-custom-prop-keys: list.append(
+        $unsupported-custom-prop-keys,
+        $key,
+        $separator: comma
+      );
+    }
+  }
+
+  @if list.length($unsupported-keys) > 0 {
+    $error-message: 'Unsupported keys found: #{$unsupported-keys}. Expected one of: #{$origin-keys}.';
+
+    @if $test-only {
+      content: $error-message;
+    } @else {
+      @error $error-message;
+    }
+  }
+
+  @if list.length($unsupported-custom-prop-keys) > 0 {
+    $error-message: 'Custom properties are not supported for theme map keys: #{$unsupported-custom-prop-keys}';
+
+    @if $test-only {
+      content: $error-message;
+    } @else {
+      @error $error-message;
+    }
+  }
+}
+
+/// Generates CSS custom property definitions based on theme value overrides provided.
+/// @param {Map} $theme - Theme configuration in Sass map format that has all supported keys.
+/// @examples
+///     :root {
+///       @include theme.provide-theme((
+///         primary: #ff0000,
+///         secondary: #00ff00
+///       ));
+///     }
+@mixin provide-theme($theme, $auto: false, $prefix: forge) {
+  @each $style, $value in $theme {
+    @if map.has-key(theme-values.$mdc-property-values, $style) {
+      --mdc-theme-#{$style}: #{$value};
+    } @else if map.has-key(theme-values.$property-values, $style) {
+      --#{$prefix}-theme-#{$style}: #{$value};
+    } @else {
+      @error 'Invalid theme property provided: #{$style}';
+    }
+  }
+}
+
+@mixin theme-properties($component, $theme, $default-theme, $prefix: forge) {
+  @each $style, $value in $theme {
+    @if map.has-key($default-theme, $style) {
+      --#{$prefix}-#{$component}-theme-#{$style}: #{$value};
+    } @else {
+      @include provide-theme(($style: $value));
+    }
+  }
+}

package/styles/theme/forge-material-icons.scss

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './icon-mixins';
+
+.tyler-icons {
+  @include icon-mixins.icon;
+}
+
+.tyler-icons.tyler-icons--dense,
+.tyler-icons-ext.tyler-icons--dense {
+  font-size: 20px;
+}
+
+.tyler-icons-ext {
+  @include icon-mixins.icon-ext;
+}

package/styles/theme/forge-theme.scss

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './theme';
+
+@include theme.theme-styles;
+@include theme.scrollbar-theme-styles;

package/styles/time-picker/time-picker.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}