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

package/styles/core/styles/tokens/_color-palette.scss

@@ -0,0 +1,299 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+//
+// Copyright 2017 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+$red-50: #ffebee;
+$red-100: #ffcdd2;
+$red-200: #ef9a9a;
+$red-300: #e57373;
+$red-400: #ef5350;
+$red-500: #f44336;
+$red-600: #e53935;
+$red-700: #d32f2f;
+$red-800: #c62828;
+$red-900: #b71c1c;
+$red-a100: #ff8a80;
+$red-a200: #ff5252;
+$red-a400: #ff1744;
+$red-a700: #d50000;
+
+$pink-50: #fce4ec;
+$pink-100: #f8bbd0;
+$pink-200: #f48fb1;
+$pink-300: #f06292;
+$pink-400: #ec407a;
+$pink-500: #e91e63;
+$pink-600: #d81b60;
+$pink-700: #c2185b;
+$pink-800: #ad1457;
+$pink-900: #880e4f;
+$pink-a100: #ff80ab;
+$pink-a200: #ff4081;
+$pink-a400: #f50057;
+$pink-a700: #c51162;
+
+$purple-50: #f3e5f5;
+$purple-100: #e1bee7;
+$purple-200: #ce93d8;
+$purple-300: #ba68c8;
+$purple-400: #ab47bc;
+$purple-500: #9c27b0;
+$purple-600: #8e24aa;
+$purple-700: #7b1fa2;
+$purple-800: #6a1b9a;
+$purple-900: #4a148c;
+$purple-a100: #ea80fc;
+$purple-a200: #e040fb;
+$purple-a400: #d500f9;
+$purple-a700: #a0f;
+
+$deep-purple-50: #ede7f6;
+$deep-purple-100: #d1c4e9;
+$deep-purple-200: #b39ddb;
+$deep-purple-300: #9575cd;
+$deep-purple-400: #7e57c2;
+$deep-purple-500: #673ab7;
+$deep-purple-600: #5e35b1;
+$deep-purple-700: #512da8;
+$deep-purple-800: #4527a0;
+$deep-purple-900: #311b92;
+$deep-purple-a100: #b388ff;
+$deep-purple-a200: #7c4dff;
+$deep-purple-a400: #651fff;
+$deep-purple-a700: #6200ea;
+
+$indigo-50: #e8eaf6;
+$indigo-100: #c5cae9;
+$indigo-200: #9fa8da;
+$indigo-300: #7986cb;
+$indigo-400: #5c6bc0;
+$indigo-500: #3f51b5;
+$indigo-600: #3949ab;
+$indigo-700: #303f9f;
+$indigo-800: #283593;
+$indigo-900: #1a237e;
+$indigo-a100: #8c9eff;
+$indigo-a200: #536dfe;
+$indigo-a400: #3d5afe;
+$indigo-a700: #304ffe;
+
+$blue-50: #e3f2fd;
+$blue-100: #bbdefb;
+$blue-200: #90caf9;
+$blue-300: #64b5f6;
+$blue-400: #42a5f5;
+$blue-500: #2196f3;
+$blue-600: #1e88e5;
+$blue-700: #1976d2;
+$blue-800: #1565c0;
+$blue-900: #0d47a1;
+$blue-a100: #82b1ff;
+$blue-a200: #448aff;
+$blue-a400: #2979ff;
+$blue-a700: #2962ff;
+
+$light-blue-50: #e1f5fe;
+$light-blue-100: #b3e5fc;
+$light-blue-200: #81d4fa;
+$light-blue-300: #4fc3f7;
+$light-blue-400: #29b6f6;
+$light-blue-500: #03a9f4;
+$light-blue-600: #039be5;
+$light-blue-700: #0288d1;
+$light-blue-800: #0277bd;
+$light-blue-900: #01579b;
+$light-blue-a100: #80d8ff;
+$light-blue-a200: #40c4ff;
+$light-blue-a400: #00b0ff;
+$light-blue-a700: #0091ea;
+
+$cyan-50: #e0f7fa;
+$cyan-100: #b2ebf2;
+$cyan-200: #80deea;
+$cyan-300: #4dd0e1;
+$cyan-400: #26c6da;
+$cyan-500: #00bcd4;
+$cyan-600: #00acc1;
+$cyan-700: #0097a7;
+$cyan-800: #00838f;
+$cyan-900: #006064;
+$cyan-a100: #84ffff;
+$cyan-a200: #18ffff;
+$cyan-a400: #00e5ff;
+$cyan-a700: #00b8d4;
+
+$teal-50: #e0f2f1;
+$teal-100: #b2dfdb;
+$teal-200: #80cbc4;
+$teal-300: #4db6ac;
+$teal-400: #26a69a;
+$teal-500: #009688;
+$teal-600: #00897b;
+$teal-700: #00796b;
+$teal-800: #00695c;
+$teal-900: #004d40;
+$teal-a100: #a7ffeb;
+$teal-a200: #64ffda;
+$teal-a400: #1de9b6;
+$teal-a700: #00bfa5;
+
+$green-50: #e8f5e9;
+$green-100: #c8e6c9;
+$green-200: #a5d6a7;
+$green-300: #81c784;
+$green-400: #66bb6a;
+$green-500: #4caf50;
+$green-600: #43a047;
+$green-700: #388e3c;
+$green-800: #2e7d32;
+$green-900: #1b5e20;
+$green-a100: #b9f6ca;
+$green-a200: #69f0ae;
+$green-a400: #00e676;
+$green-a700: #00c853;
+
+$light-green-50: #f1f8e9;
+$light-green-100: #dcedc8;
+$light-green-200: #c5e1a5;
+$light-green-300: #aed581;
+$light-green-400: #9ccc65;
+$light-green-500: #8bc34a;
+$light-green-600: #7cb342;
+$light-green-700: #689f38;
+$light-green-800: #558b2f;
+$light-green-900: #33691e;
+$light-green-a100: #ccff90;
+$light-green-a200: #b2ff59;
+$light-green-a400: #76ff03;
+$light-green-a700: #64dd17;
+
+$lime-50: #f9fbe7;
+$lime-100: #f0f4c3;
+$lime-200: #e6ee9c;
+$lime-300: #dce775;
+$lime-400: #d4e157;
+$lime-500: #cddc39;
+$lime-600: #c0ca33;
+$lime-700: #afb42b;
+$lime-800: #9e9d24;
+$lime-900: #827717;
+$lime-a100: #f4ff81;
+$lime-a200: #eeff41;
+$lime-a400: #c6ff00;
+$lime-a700: #aeea00;
+
+$yellow-50: #fffde7;
+$yellow-100: #fff9c4;
+$yellow-200: #fff59d;
+$yellow-300: #fff176;
+$yellow-400: #ffee58;
+$yellow-500: #ffeb3b;
+$yellow-600: #fdd835;
+$yellow-700: #fbc02d;
+$yellow-800: #f9a825;
+$yellow-900: #f57f17;
+$yellow-a100: #ffff8d;
+$yellow-a200: #ff0;
+$yellow-a400: #ffea00;
+$yellow-a700: #ffd600;
+
+$amber-50: #fff8e1;
+$amber-100: #ffecb3;
+$amber-200: #ffe082;
+$amber-300: #ffd54f;
+$amber-400: #ffca28;
+$amber-500: #ffc107;
+$amber-600: #ffb300;
+$amber-700: #ffa000;
+$amber-800: #ff8f00;
+$amber-900: #ff6f00;
+$amber-a100: #ffe57f;
+$amber-a200: #ffd740;
+$amber-a400: #ffc400;
+$amber-a700: #ffab00;
+
+$orange-50: #fff3e0;
+$orange-100: #ffe0b2;
+$orange-200: #ffcc80;
+$orange-300: #ffb74d;
+$orange-400: #ffa726;
+$orange-500: #ff9800;
+$orange-600: #fb8c00;
+$orange-700: #f57c00;
+$orange-800: #ef6c00;
+$orange-900: #e65100;
+$orange-a100: #ffd180;
+$orange-a200: #ffab40;
+$orange-a400: #ff9100;
+$orange-a700: #ff6d00;
+
+$deep-orange-50: #fbe9e7;
+$deep-orange-100: #ffccbc;
+$deep-orange-200: #ffab91;
+$deep-orange-300: #ff8a65;
+$deep-orange-400: #ff7043;
+$deep-orange-500: #ff5722;
+$deep-orange-600: #f4511e;
+$deep-orange-700: #e64a19;
+$deep-orange-800: #d84315;
+$deep-orange-900: #bf360c;
+$deep-orange-a100: #ff9e80;
+$deep-orange-a200: #ff6e40;
+$deep-orange-a400: #ff3d00;
+$deep-orange-a700: #dd2c00;
+
+$brown-50: #efebe9;
+$brown-100: #d7ccc8;
+$brown-200: #bcaaa4;
+$brown-300: #a1887f;
+$brown-400: #8d6e63;
+$brown-500: #795548;
+$brown-600: #6d4c41;
+$brown-700: #5d4037;
+$brown-800: #4e342e;
+$brown-900: #3e2723;
+
+$grey-50: #fafafa;
+$grey-100: #f5f5f5;
+$grey-200: #eee;
+$grey-300: #e0e0e0;
+$grey-400: #bdbdbd;
+$grey-500: #9e9e9e;
+$grey-600: #757575;
+$grey-700: #616161;
+$grey-800: #424242;
+$grey-900: #212121;
+
+$blue-grey-50: #eceff1;
+$blue-grey-100: #cfd8dc;
+$blue-grey-200: #b0bec5;
+$blue-grey-300: #90a4ae;
+$blue-grey-400: #78909c;
+$blue-grey-500: #607d8b;
+$blue-grey-600: #546e7a;
+$blue-grey-700: #455a64;
+$blue-grey-800: #37474f;
+$blue-grey-900: #263238;

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

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../theme/tokens';
+
+$tokens: (
+  size: 48px,
+  padding: 0,
+  track-width: 12,
+  track-color: tokens.variable(tertiary),
+  track-background: tokens.variable(track-color)
+) !default;

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

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../theme/tokens';
+
+/* stylelint-disable length-zero-no-unit */
+$tokens: (
+  active-width: 6px,
+  color: tokens.variable(primary),
+  duration: 600ms,
+  outward-offset: 4px,
+  inward-offset: 0px,
+  shape: 1px,
+  width: 2px,
+  easing: cubic-bezier(0.2, 0, 0, 1),
+  shape-start-start: var(--_shape),
+  shape-start-end: var(--_shape),
+  shape-end-end: var(--_shape),
+  shape-end-start: var(--_shape),
+  offset-block: 0,
+  offset-inline: 0
+) !default;

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

@@ -3,29 +3,20 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:list';
-@use '../theme/theme-values';
-@use './variables';
+@use '../core/styles/tokens';
 
 @mixin provide-theme($theme) {
-  @each $key, $value in $theme {
-    @if list.index(variables.$supported-theme-properties, $key) == null {
-      @error 'Invalid theme property: #{$key}';
-    }
-    @if $value {
-      --forge-focus-indicator-#{$key}: #{$value};
-    }
-  }
+  @include tokens.provide('focus-indicator', $theme);
 }
 
 @mixin configuration {
   --_active-width: var(--forge-focus-indicator-active-width, 6px);
-  --_color: var(--forge-focus-indicator-color, var(--mdc-theme-primary, #{theme-values.$primary}));
+  --_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, 3px);
+  --_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));

package/styles/focus-indicator/_variables.scss

@@ -3,18 +3,3 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$supported-theme-properties: (
-  'active-width',
-  'color',
-  'duration',
-  'outward-offset',
-  'inward-offset',
-  'shape',
-  'width',
-  'shape-start-start',
-  'shape-start-end',
-  'shape-end-end',
-  'shape-end-start',
-  'offset-block',
-  'offset-inline'
-);