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

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

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../color-palette';
+@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),
+  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),
+  disabled-inactive-track-color: utils.module-val(slider, disabled-inactive-track-color, color-palette.$grey-500),
+  disabled-inactive-track-opacity: utils.module-val(slider, disabled-inactive-track-opacity, 0.12),
+  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-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),
+  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)),
+  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)),
+  with-overlap-handle-outline-width: utils.module-val(slider, with-overlap-handle-outline-width, 1px),
+  with-tick-marks-active-container-color: utils.module-val(slider, with-tick-marks-active-container-color, theme.variable(primary)),
+  with-tick-marks-container-size: utils.module-val(slider, with-tick-marks-container-size, 2px),
+  with-tick-marks-disabled-active-container-color: utils.module-val(slider, with-tick-marks-disabled-active-container-color, theme.variable(text-primary)),
+  with-tick-marks-disabled-inactive-container-color: utils.module-val(slider, with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, theme.variable(on-primary) 50%, transparent)),
+  with-tick-marks-inactive-container-color: utils.module-val(slider, with-tick-marks-inactive-container-color, theme.variable(primary))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../utils';
+
+$tokens: (
+  color: utils.module-val(state-layer, color, theme.variable(on-surface)),
+  hover-color: utils.module-ref(state-layer, hover-color, color),
+  hover-opacity: 0.08,
+  pressed-color: utils.module-ref(state-layer, pressed-color, color),
+  pressed-opacity: 0.12,
+  hover-duration: 15ms,
+  pressed-duration: 105ms,
+  animation-duration: 375ms
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../theme';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  active-color: utils.module-val(tab, active-color, theme.variable(primary)),
+  inactive-color: utils.module-val(tab, inactive-color, theme.variable(text-secondary)),
+  height: utils.module-val(tab, height, 48px),
+  stacked-height: utils.module-val(tab, stacked-height, 64px),
+
+  // Disabled
+  disabled-opacity: utils.module-val(tab, disabled-opacity, 0.38),
+
+  // Indicator
+  indicator-color: utils.module-ref(tab, indicator-color, active-color),
+  indicator-height: utils.module-val(tab, indicator-height, 3px),
+  indicator-shape: utils.module-val(tab, indicator-shape, 3px 3px 0 0),
+
+  // Indicator (vertical)
+  vertical-indicator-shape: utils.module-val(tab, indicator-shape, 3px 0 0 3px),
+
+  // Indicator (secondary)
+  secondary-indicator-height: utils.module-val(tab, indicator-height, 2px),
+  secondary-indicator-shape: utils.module-val(tab, indicator-shape, 0),
+
+  // Indicator (inverted)
+  inverted-indicator-shape: utils.module-val(tab, indicator-shape, 0 0 3px 3px),
+  vertical-inverted-indicator-shape: utils.module-val(tab, indicator-shape, 0 3px 3px 0),
+
+  // Container
+  container-color: utils.module-val(tab, container-color, transparent),
+  container-height: utils.module-ref(tab, container-height, height),
+  container-shape: utils.module-val(tab, container-shape, 0),
+  
+  // Content
+  content-height: utils.module-ref(tab, content-height, height),
+
+  // Icon
+  active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),
+  active-hover-icon-color: utils.module-ref(tab, active-hover-icon-color, active-color),
+  active-icon-color: utils.module-ref(tab, active-icon-color, active-color),
+  active-pressed-icon-color: utils.module-ref(tab, active-pressed-icon-color, active-color),
+  icon-size: utils.module-val(tab, icon-size, 24px),
+  focus-icon-color: utils.module-ref(tab, focus-icon-color, inactive-color),
+  hover-icon-color: utils.module-ref(tab, hover-icon-color, inactive-color),
+  icon-color: utils.module-ref(tab, icon-color, inactive-color),
+  pressed-icon-color: utils.module-ref(tab, pressed-icon-color, inactive-color),
+
+  // Label
+  active-focus-label-text-color: utils.module-ref(tab, active-focus-label-text-color, active-color),
+  active-hover-label-text-color: utils.module-ref(tab, active-hover-label-text-color, active-color),
+  active-label-text-color: utils.module-ref(tab, active-label-text-color, active-color),
+  active-pressed-label-text-color: utils.module-ref(tab, active-pressed-label-text-color, active-color),
+  focus-label-text-color: utils.module-ref(tab, focus-label-text-color, inactive-color),
+  hover-label-text-color: utils.module-ref(tab, hover-label-text-color, inactive-color),
+  label-text-color: utils.module-ref(tab, label-text-color, inactive-color),
+  pressed-label-text-color: utils.module-ref(tab, pressed-label-text-color, inactive-color)
+) !default;
+
+///
+/// Gets a token from the token map.
+/// 
+@function get($name) {
+  @return map.get($tokens, $name);
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../theme';
+@use '../../utils';
+
+$tokens: (
+  container-justify: utils.module-val(tab-bar, justify, space-between),
+  tab-flex: utils.module-val(tab-bar, stretch, 1),
+  divider-color: utils.module-val(tab-bar, divider-color, theme.variable(border-color)),
+  divider-thickness: utils.module-val(tab-bar, divider-thickness, 1px)
+);
+
+@function get($name) {
+  @return map.get($tokens, $name);
+}

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

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/// Layering values to define z-index ranges for common groups of UI elements
+/// to ensure floating elements overlay correctly.
+$z-index-map: (
+  surface: 1,
+  header: 4,
+  backdrop: 7,
+  dialog: 8,
+  notification: 9,
+  popup: 10,
+  tooltip: 11
+) !default;
+
+$baseline-color: black !default;
+$umbra-opacity: 0.2 !default;
+$penumbra-opacity: 0.14 !default;
+$ambient-opacity: 0.12 !default;
+
+$umbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 2px 1px -1px',
+  2: '0px 3px 1px -2px',
+  3: '0px 3px 3px -2px',
+  4: '0px 2px 4px -1px',
+  5: '0px 3px 5px -1px',
+  6: '0px 3px 5px -1px',
+  7: '0px 4px 5px -2px',
+  8: '0px 5px 5px -3px',
+  9: '0px 5px 6px -3px',
+  10: '0px 6px 6px -3px',
+  11: '0px 6px 7px -4px',
+  12: '0px 7px 8px -4px',
+  13: '0px 7px 8px -4px',
+  14: '0px 7px 9px -4px',
+  15: '0px 8px 9px -5px',
+  16: '0px 8px 10px -5px',
+  17: '0px 8px 11px -5px',
+  18: '0px 9px 11px -5px',
+  19: '0px 9px 12px -6px',
+  20: '0px 10px 13px -6px',
+  21: '0px 10px 13px -6px',
+  22: '0px 10px 14px -6px',
+  23: '0px 11px 14px -7px',
+  24: '0px 11px 15px -7px',
+) !default;
+
+$penumbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 1px 0px',
+  2: '0px 2px 2px 0px',
+  3: '0px 3px 4px 0px',
+  4: '0px 4px 5px 0px',
+  5: '0px 5px 8px 0px',
+  6: '0px 6px 10px 0px',
+  7: '0px 7px 10px 1px',
+  8: '0px 8px 10px 1px',
+  9: '0px 9px 12px 1px',
+  10: '0px 10px 14px 1px',
+  11: '0px 11px 15px 1px',
+  12: '0px 12px 17px 2px',
+  13: '0px 13px 19px 2px',
+  14: '0px 14px 21px 2px',
+  15: '0px 15px 22px 2px',
+  16: '0px 16px 24px 2px',
+  17: '0px 17px 26px 2px',
+  18: '0px 18px 28px 2px',
+  19: '0px 19px 29px 2px',
+  20: '0px 20px 31px 3px',
+  21: '0px 21px 33px 3px',
+  22: '0px 22px 35px 3px',
+  23: '0px 23px 36px 3px',
+  24: '0px 24px 38px 3px',
+) !default;
+
+$ambient-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 3px 0px',
+  2: '0px 1px 5px 0px',
+  3: '0px 1px 8px 0px',
+  4: '0px 1px 10px 0px',
+  5: '0px 1px 14px 0px',
+  6: '0px 1px 18px 0px',
+  7: '0px 2px 16px 1px',
+  8: '0px 3px 14px 2px',
+  9: '0px 3px 16px 2px',
+  10: '0px 4px 18px 3px',
+  11: '0px 4px 20px 3px',
+  12: '0px 5px 22px 4px',
+  13: '0px 5px 24px 4px',
+  14: '0px 5px 26px 4px',
+  15: '0px 6px 28px 5px',
+  16: '0px 6px 30px 5px',
+  17: '0px 6px 32px 5px',
+  18: '0px 7px 34px 6px',
+  19: '0px 7px 36px 6px',
+  20: '0px 8px 38px 7px',
+  21: '0px 8px 40px 7px',
+  22: '0px 8px 42px 7px',
+  23: '0px 9px 44px 8px',
+  24: '0px 9px 46px 8px',
+) !default;

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

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$shapes: (
+  small: 4px,
+  medium: 8px,
+  large: 0,
+  round: 50%
+);
+
+

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

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../core/config';
+@use '../color-palette' as color-palette;
+@use '../../elevation';
+
+/// 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),
+  primary-track-color: #d0d4ef,
+  secondary-track-color: #fff0c3,
+  tertiary-track-color: #d0d7ff,
+  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: elevation.value(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),
+  primary-track-color: #e3e8ff,
+  secondary-track-color: #7c704c,
+  tertiary-track-color: var(--forge-theme-secondary-track-color, #7c704c),
+  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: elevation.value(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)),
+);

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+
+$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: theme.variable(text-primary)
+) !default;
+
+$title: (
+  font-family: map.get($base, font-family),
+  // font-size: typography.font-size(title) var(--forge-typography-title-font-size, calc(var(--forge-typography-root-font-size, 16px) * 1.5)),
+  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;
+
+// $caption: (
+//   ...$label,
+//   font-size: 10px,
+// ) !default;
+
+$tokens: (
+  title: $title,
+  label: $label,
+  helper-text: $label
+) !default;
+
+
+// @mixin typography($style) {
+//   $typography-tokens: map.get($tokens, $style);
+
+//   @if not $typography-tokens {
+//     @error 'Invalid typography style: "#{$style}"';
+//   }
+
+//   /// Use the `font` style instead??
+
+//   font-family: var(--forge-typography-#{$style}-font-family, map.get($typography-tokens, font-family));
+//   font-size: var(--forge-typography-#{$style}-font-size, map.get($typography-tokens, font-size));
+//   font-weight: var(--forge-typography-#{$style}-font-weight, map.get($typography-tokens, font-weight));
+//   line-height: var(--forge-typography-#{$style}-line-height, map.get($typography-tokens, line-height));
+//   letter-spacing: var(--forge-typography-#{$style}-letter-spacing, map.get($typography-tokens, letter-spacing));
+//   text-transform: var(--forge-typography-#{$style}-text-transform, map.get($typography-tokens, text-transform));
+//   text-decoration: var(--forge-typography-#{$style}-text-decoration, map.get($typography-tokens, text-decoration));
+//   color: var(--forge-typography-#{$style}-color, map.get($typography-tokens, color));
+// }

package/styles/focus-indicator/_animations.scss

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@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/_configuration.scss

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/focus-indicator/tokens';
+
+@mixin configuration {
+  --_active-width: #{tokens.get(active-width)};
+  --_color: #{tokens.get(color)};
+  --_duration: #{tokens.get(duration)};
+  --_outward-offset:#{tokens.get(outward-offset)};
+  --_inward-offset: #{tokens.get(inward-offset)};
+  --_shape: #{tokens.get(shape)};
+  --_width: #{tokens.get(width)};
+  --_easing: #{tokens.get(easing)};
+  --_shape-start-start: #{tokens.get(shape-start-start)};
+  --_shape-start-end: #{tokens.get(shape-start-end)};
+  --_shape-end-start: #{tokens.get(shape-end-start)};
+  --_shape-end-end: #{tokens.get(shape-end-end)};
+  --_margin-block: #{tokens.get(offset-block)};
+  --_margin-inline: #{tokens.get(offset-inline)};
+}

package/styles/focus-indicator/_core.scss

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/utils';
+@use '../core/styles/tokens/focus-indicator/tokens';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, focus-indicator);
+}
+
+@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 circular {
+  --_shape: 50%;
+}
+
+@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);
+}

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './animations';
+@use './configuration';
+@use './core';
+
+/// Host styles
+:host {
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([active]) {
+  .forge-focus-indicator {
+    @include core.active;
+  }
+}
+
+:host(:not([inward])) {
+  .forge-focus-indicator {
+    @include core.outward;
+  }
+}
+
+:host([inward]) {
+  .forge-focus-indicator {
+    @include core.inward;
+  }
+}
+
+:host([circular]) {
+  .forge-focus-indicator {
+    @include core.circular;
+  }
+}
+
+/// Base styles
+.forge-focus-indicator {
+  @include configuration.configuration;
+  @include core.base;
+}
+
+@include animations.keyframes;
+
+@media (prefers-reduced-motion) {
+  .forge-focus-indicator {
+    animation: none;
+  }
+}

package/styles/focus-indicator/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './animations';
+@forward './configuration';
+@forward './core';