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

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

@@ -0,0 +1,236 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use 'sass:list';
+@use '../../core/config';
+@use '../../theme';
+@use '../../utils';
+
+/// Base typography style values
+$font-family: 'Roboto', sans-serif !default;
+$font-size: 1rem !default; // 16px
+
+/// The Forge typography scale system
+$font-scale: (
+  12: 0.75,
+  14: 0.875,
+  16: 1,
+  18: 1.125,
+  20: 1.25,
+  22: 1.375,
+  24: 1.5,
+  28: 1.75,
+  32: 2,
+  34: 2.125,
+  36: 2.25,
+  40: 2.5,
+  42: 2.625,
+  44: 2.75,
+  48: 3,
+  56: 3.5,
+  64: 4,
+) !default;
+
+/// Available font weights for Forge typography styles
+$font-weight: (
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700
+) !default;
+
+/// The base typography styles that other styles inherit from.
+$base: (
+  font-family: var(--#{config.$prefix}-typography-font-family, #{$font-family}),
+  font-size: var(--#{config.$prefix}-typography-font-size, #{$font-size}),
+  font-weight: map.get($font-weight, regular),
+  line-height: normal,
+  letter-spacing: normal,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: theme.variable(text-primary)
+) !default;
+
+///
+/// Creates a style value that is relative to the base font size for the given property.
+/// 
+/// This allows for typography styles to be scaled relative to the root font size, or
+/// relative to a specific CSS custom property if optionally applied. This is useful
+/// when embedding Forge in an application that adjusts the root `font-size` to something
+/// other than `16px` (browser default).
+///
+@function _font-size-relative($style, $property, $scale) {
+  @return calc(#{map.get($base, font-size)} * var(--#{config.$prefix}-typography-#{$style}-#{$property}-scale, #{$scale}));
+}
+
+/// Heading
+$heading-01: utils.inherit-map($base, (
+  font-size: _font-size-relative(heading-01, font-size, map.get($font-scale, 14)),
+  font-weight: map.get($font-weight, medium),
+  line-height: _font-size-relative(heading-01, line-height, map.get($font-scale, 20)),
+  letter-spacing: 0.0071428571em
+)) !default;
+
+$heading-02: utils.inherit-map($heading-01, (
+  font-size: _font-size-relative(heading-02, font-size, map.get($font-scale, 16)),
+  line-height: _font-size-relative(heading-02, line-height, map.get($font-scale, 20)),
+  letter-spacing: 0.009375em
+)) !default;
+
+$heading-03: utils.inherit-map($heading-02, (
+  font-size: _font-size-relative(heading-03, font-size, map.get($font-scale, 18)),
+  line-height: _font-size-relative(heading-03, line-height, map.get($font-scale, 24)),
+  letter-spacing: 0.0125em
+)) !default;
+
+$heading-04: utils.inherit-map($heading-03, (
+  font-size: _font-size-relative(heading-04, font-size, map.get($font-scale, 20)),
+  line-height: _font-size-relative(heading-04, line-height, map.get($font-scale, 28)),
+  letter-spacing: normal
+)) !default;
+
+$heading-05: utils.inherit-map($heading-04, (
+  font-size: _font-size-relative(heading-05, font-size, map.get($font-scale, 24)),
+  line-height: _font-size-relative(heading-05, line-height, map.get($font-scale, 32)),
+)) !default;
+
+$heading-06: utils.inherit-map($heading-05, (
+  font-size: _font-size-relative(heading-06, font-size, map.get($font-scale, 28)),
+  line-height: _font-size-relative(heading-06, line-height, map.get($font-scale, 36)),
+)) !default;
+
+/// Display
+$display-01: utils.inherit-map($base, (
+  font-size: _font-size-relative(display-01, font-size, map.get($font-scale, 24)),
+  font-weight: map.get($font-weight, light),
+  line-height: _font-size-relative(display-01, line-height, map.get($font-scale, 30)),
+)) !default;
+
+$display-02: utils.inherit-map($display-01, (
+  font-size: _font-size-relative(display-02, font-size, map.get($font-scale, 28)),
+  line-height: _font-size-relative(display-02, line-height, map.get($font-scale, 34)),
+)) !default;
+
+$display-03: utils.inherit-map($display-02, (
+  font-size: _font-size-relative(display-03, font-size, map.get($font-scale, 32)),
+  line-height: _font-size-relative(display-03, line-height, map.get($font-scale, 40)),
+)) !default;
+
+$display-04: utils.inherit-map($display-03, (
+  font-size: _font-size-relative(display-04, font-size, map.get($font-scale, 36)),
+  line-height: _font-size-relative(display-04, line-height, map.get($font-scale, 44)),
+)) !default;
+
+$display-05: utils.inherit-map($display-04, (
+  font-size: _font-size-relative(display-05, font-size, map.get($font-scale, 40)),
+  line-height: _font-size-relative(display-05, line-height, map.get($font-scale, 48)),
+)) !default;
+
+$display-06: utils.inherit-map($display-05, (
+  font-size: _font-size-relative(display-06, font-size, map.get($font-scale, 48)),
+  line-height: _font-size-relative(display-06, line-height, map.get($font-scale, 64)),
+)) !default;
+
+/// Title
+$title: utils.inherit-map($heading-03, (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(title, font-size, map.get($font-scale, 20)),
+  font-weight: map.get($font-weight, regular),
+  line-height: _font-size-relative(title, line-height, map.get($font-scale, 24)),
+  letter-spacing: 0.0125em,
+)) !default;
+
+/// Subtitle
+$subtitle: (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(subtitle, font-size, map.get($font-scale, 16)),
+  font-weight: map.get($base, font-weight),
+  line-height: _font-size-relative(subtitle, line-height, map.get($font-scale, 28)),
+  letter-spacing: 0.009375em,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: theme.variable(text-secondary)
+) !default;
+
+$body-01: utils.inherit-map($base, (
+  font-size: _font-size-relative(body, font-size, map.get($font-scale, 14)),
+  line-height: _font-size-relative(body, line-height, map.get($font-scale, 20)),
+  letter-spacing: 0.0178571429em
+)) !default;
+
+$body-02: utils.inherit-map($base, (
+  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
+  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
+  letter-spacing: 0.03125em
+)) !default;
+
+$body: utils.inherit-map($body-01, (
+  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
+  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
+)) !default;
+
+/// Label
+$label: (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(label, font-size, 0.75), // 12px
+  font-weight: map.get($base, font-weight),
+  line-height: _font-size-relative(label, line-height, 1.25), // 20px
+  letter-spacing: 0.0333333333em,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: map.get($base, color)
+) !default;
+
+/// Button
+$button: (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(button, font-size, 0.875), // 14px
+  font-weight: 500,
+  line-height: _font-size-relative(button, line-height, 2.25), // 36px
+  letter-spacing: 0.0892857143em,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: map.get($base, color)
+) !default;
+
+$tokens: (
+  heading-01: $heading-01,
+  heading-02: $heading-02,
+  heading-03: $heading-03,
+  heading-04: $heading-04,
+  heading-05: $heading-05,
+  heading-06: $heading-06,
+  display-01: $display-01,
+  display-02: $display-02,
+  display-03: $display-03,
+  display-04: $display-04,
+  display-05: $display-05,
+  display-06: $display-06,
+  title: $title,
+  subtitle: $subtitle,
+  body-01: $body-01,
+  body-02: $body-02,
+  body: $body,
+  label: $label,
+  button: $button
+) !default;
+
+///
+/// Returns a typography style token value.
+/// 
+@function get($style, $token) {
+  $style-tokens: map.get($tokens, $style);
+
+  @if not $style-tokens {
+    @error 'Invalid typography style: "#{$style}"';
+  }
+
+  @if not map.get($style-tokens, $token) {
+    @error 'Invalid typography token for style "#{$style}" using token "#{$token}"';
+  }
+
+  @return map.get($style-tokens, $token);
+}

package/styles/core/styles/typography/index.scss

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/config';
+@use '../tokens/typography/tokens';
+
+@forward '../tokens/typography/tokens';
+
+///
+/// Emits the typography styles for the given style.
+/// 
+/// Example:
+/// ```scss
+/// @include style(title);
+/// ```
+/// 
+/// Allows for providing an optional list of tokens to exclude from the output:
+/// ```scss
+/// @include style(title, [font-family font-size]);
+/// ```
+/// 
+@mixin style($style, $exclude: null) {
+  $styles: (
+    font-family: _get-style-value($style, font-family),
+    font-size: _get-style-value($style, font-size),
+    font-weight: _get-style-value($style, font-weight),
+    line-height: _get-style-value($style, line-height),
+    letter-spacing: _get-style-value($style, letter-spacing),
+    text-transform: _get-style-value($style, text-transform),
+    text-decoration: _get-style-value($style, text-decoration),
+    color: _get-style-value($style, color)
+  );
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  @each $key, $value in $styles {
+    @if not $exclude or not list.index($exclude, $key) {
+      #{$key}: #{$value};
+    }
+  }
+}
+
+///
+/// Sets base typography styles.
+/// 
+@mixin base {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: map.get(tokens.$base, font-family);
+  color: map.get(tokens.$base, color);
+}
+
+///
+/// Generates helper classes for each typography style/role.
+/// 
+@mixin classes {
+  @each $style, $tokens in tokens.$tokens {
+    .#{config.$prefix}-typography--#{$style} {
+      @include style($style);
+    }
+  }
+}
+
+///
+/// Provides override CSS custom property declarations for the given style overrides.
+/// 
+/// Example:
+/// ```
+/// .my-class {
+///   @include provide(title, (font-family: Arial, font-size: 20px));
+/// }
+/// ```
+/// 
+/// This will output:
+/// ```
+/// .my-class {
+///   --forge-typography-title-font-family: Arial;
+///   --forge-typography-title-font-size: 20px;
+/// }
+/// ```
+/// 
+@mixin provide($style, $overrides) {
+  $style-tokens: map.get(tokens.$tokens, $style);
+  @each $key, $value in $overrides {
+    @if not map.get($style-tokens, $key) {
+      @error 'Invalid token "#{$key}" for style "#{$style}"';
+    }
+    --#{config.$prefix}-typography-#{$key}: #{$value};
+  }
+}
+
+///
+/// Creates a calculated style value that will scale relative to the root font size.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   padding: typography.font-size-relative(2);
+/// }
+/// 
+/// // Outputs
+/// .my-class {
+///   padding: calc(var(--forge-typography-font-size, 1rem) * 2);
+/// }
+/// 
+/// ```
+/// 
+@function font-size-relative($scale) {
+  @return calc(#{map.get(tokens.$base, font-size)} * #{$scale});
+}
+
+@function _get-style-value($style, $token) {
+  @return var(--#{config.$prefix}-typography-#{$style}-#{$token}, #{tokens.get($style, $token)});
+}

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/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';

package/styles/linear-progress/_animations.scss

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/linearprogress/lib/_linear-progress.scss)
+///
+
+@mixin keyframes {
+  @include _directional-keyframes('ltr');
+  @include _directional-keyframes('rtl');
+
+  @keyframes primary-indeterminate-scale {
+    0% {
+      transform: scaleX(0.08);
+    }
+  
+    36.65% {
+      animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
+      transform: scaleX(0.08);
+    }
+  
+    69.15% {
+      animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
+      transform: scaleX(0.661479);
+    }
+  
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+  
+  @keyframes secondary-indeterminate-scale {
+    0% {
+      animation-timing-function: cubic-bezier(
+        0.205028,
+        0.057051,
+        0.57661,
+        0.453971
+      );
+      transform: scaleX(0.08);
+    }
+  
+    19.15% {
+      animation-timing-function: cubic-bezier(
+        0.152313,
+        0.196432,
+        0.648374,
+        1.00432
+      );
+      transform: scaleX(0.457104);
+    }
+  
+    44.15% {
+      animation-timing-function: cubic-bezier(
+        0.257759,
+        -0.003163,
+        0.211762,
+        1.38179
+      );
+      transform: scaleX(0.72796);
+    }
+  
+    100% {
+      transform: scaleX(0.08);
+    }
+  }
+}
+
+// Generates keyframes for ltr and rtl.
+@mixin _directional-keyframes($dir) {
+  $is-rtl: $dir == 'rtl';
+  $sign: if($is-rtl, -1, 1);
+  $suffix: if($is-rtl, '-rtl', '');
+
+  @keyframes buffering#{$suffix} {
+    0% {
+      transform: translateX(calc(#{$sign} * var(--_track-background-width)));
+    }
+  }
+
+  @keyframes primary-indeterminate-translate#{$suffix} {
+    0% {
+      transform: translateX(0);
+    }
+
+    20% {
+      animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+      transform: translateX(0);
+    }
+
+    59.15% {
+      animation-timing-function: cubic-bezier(
+        0.302435,
+        0.381352,
+        0.55,
+        0.956352
+      );
+      transform: translateX(calc(#{$sign} * 83.6714%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 200.611%));
+    }
+  }
+
+  @keyframes secondary-indeterminate-translate#{$suffix} {
+    0% {
+      animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
+      transform: translateX(0);
+    }
+
+    25% {
+      animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
+      transform: translateX(calc(#{$sign} * 37.6519%));
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(calc(#{$sign} * 84.3862%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 160.278%));
+    }
+  }
+}

package/styles/linear-progress/_configuration.scss

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/linear-progress/tokens';
+
+@mixin configuration {
+  // Token vars
+  --_track-height: #{tokens.get(track-height)};
+  --_track-color: #{tokens.get(track-color)};
+  --_active-indicator-color: #{tokens.get(active-indicator-color)};
+  --_track-shape: #{tokens.get(track-shape)};
+  --_active-indicator-height: #{tokens.get(active-indicator-height)};
+  --_determinate-duration: #{tokens.get(determinate-duration)};
+  --_indeterminate-duration: #{tokens.get(indeterminate-duration)};
+  --_determinate-easing: #{tokens.get(determinate-easing)};
+
+  // State vars
+  --_track-dot-size: calc(var(--_track-height) / 2);
+  --_track-background-width: calc(var(--_track-dot-size) * 5);
+  --_track-background: 0 / var(--_track-background-width) 100%
+    radial-gradient(
+      circle at calc(var(--_track-dot-size) * 2),
+      var(--_track-color) 0,
+      var(--_track-color) var(--_track-dot-size),
+      transparent var(--_track-dot-size)
+    );
+}