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

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)
+    );
+}

package/styles/linear-progress/_core.scss

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:list';
+@use '../core/styles/tokens/utils';
+@use '../core/styles/tokens/linear-progress/tokens';
+@use '../theme';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, linear-progress);
+}
+
+@mixin container {
+  display: block;
+  position: relative;
+  min-inline-size: 80px;
+  block-size: #{tokens.get(track-height)};
+  content-visibility: auto;
+  contain: strict;
+}
+
+@mixin progress {
+  inset: 0;
+  outline: transparent solid 1px;
+  border-radius: var(--_track-shape);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@mixin bar {
+  animation: none;
+  inline-size: 100%;
+  block-size: var(--_active-indicator-height);
+  transform-origin: left center;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+}
+
+@mixin secondary-bar {
+  display: none;
+}
+
+@mixin bar-inner {
+  inset: 0;
+  animation: none;
+  background: var(--_active-indicator-color);
+}
+
+@mixin buffer-bar {
+  background: var(--_track-color);
+  inset: 0;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+  transform-origin: left center;
+}
+
+@mixin track {
+  inset: 0;
+  will-change: transform;
+  animation: linear infinite var(--_determinate-duration);
+  animation-name: buffering;
+  background: var(--_track-background);
+}
+
+@mixin indeterminate-bar {
+  transition: none;
+}
+
+@mixin indeterminate-primary-bar {
+  inset-inline-start: -145.167%;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: primary-indeterminate-translate;
+}
+
+@mixin indeterminate-secondary-bar {
+  inset-inline-start: -54.8889%;
+  display: block;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: secondary-indeterminate-translate;
+}
+
+@mixin indeterminate-track {
+  display: none;
+}
+
+@mixin indeterminate-primary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;
+}
+
+@mixin indeterminate-secondary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;
+}

package/styles/linear-progress/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/linear-progress.scss

@@ -3,38 +3,121 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/linear-progress/mdc-linear-progress';
-@use '@material/linear-progress/mixins' as mdc-linear-progress-mixins;
-@use '../theme';
-@use './variables';
+@use './animations';
+@use './configuration';
+@use './core';
 
+/// Host styles
 :host {
-  display: block;
+  @include core.container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+/// Base styles
+.forge-linear-progress {
+  @include configuration.configuration;
+  @include core.progress;
+}
+
+.forge-linear-progress,
+.track,
+.buffer-bar,
+.bar,
+.bar-inner {
+  position: absolute;
+}
+
+.bar {
+  @include core.bar;
+}
+
+.secondary-bar {
+  @include core.secondary-bar;
+}
+
+.bar-inner {
+  @include core.bar-inner;
+}
+
+.buffer-bar {
+  @include core.buffer-bar;
+}
+
+.track {
+  @include core.track;
+}
+
+/// Indeterminate styles
+.forge-linear-progress--indeterminate {
+  .bar {
+    @include core.indeterminate-bar;
+  }
 
-///
-/// Custom Tyler theming below
-///
+  .primary-bar {
+    @include core.indeterminate-primary-bar;
+  }
 
-@include mdc-linear-progress-mixins.buffer-color(variables.$buffer-color);
+  .secondary-bar {
+    @include core.indeterminate-secondary-bar;
+  }
 
-.mdc-linear-progress {
-  @include theme.css-custom-property(border-radius, --forge-linear-progress-border-radius, inherit);
-  
-  &__bar-inner {
-    @include theme.property(border-color, tertiary);
+  .track {
+    @include core.indeterminate-track;
   }
 
-  &__buffer-bar {
-    @include theme.css-custom-property(background-color, --forge-linear-progress-theme-buffer, variables.$buffer-color);
+  .primary-bar > .bar-inner {
+    @include core.indeterminate-primary-bar-inner;
   }
 
-  &__buffer-dots {
-    @include theme.css-custom-property(filter, --forge-linear-progress-theme-buffer-dots, variables.$buffer-dots-color);
+  .secondary-bar > .bar-inner {
+    @include core.indeterminate-secondary-bar-inner;
   }
 }
+
+/// RTL styles
+$rtl-selectors: (
+  ':host-context([dir="rtl"]) .forge-linear-progress',
+  ':host([dir="rtl"]) .forge-linear-progress',
+  '.forge-linear-progress:dir(rtl)'
+);
+
+@each $selector in $rtl-selectors {
+  #{$selector} {
+    .bar {
+      transform-origin: right center;
+    }
+
+    .buffer-bar {
+      transform-origin: right center;
+    }
+
+    .track {
+      animation-name: buffering-rtl;
+    }
+
+    &.forge-linear-progress--indeterminate .primary-bar {
+      animation-name: primary-indeterminate-translate-rtl;
+    }
+
+    &.forge-linear-progress--indeterminate .secondary-bar {
+      animation-name: secondary-indeterminate-translate-rtl;
+    }
+  }
+}
+
+@media screen and (forced-colors: active) {
+  .forge-linear-progress {
+    --_active-indicator-color: canvastext;
+    --_track-color: graytext;
+    border: 1px solid canvastext;
+
+    &.forge-linear-progress--indeterminate {
+      --_track-color: canvas;
+    }
+  }
+}
+
+@include animations.keyframes;

package/styles/slider/_configuration.scss

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/slider/tokens';
+
+// The max clip is reduced by 1 full tick display which is 2x the container
+// size to account for always showing the active track on the outside
+// edge of the last tick.
+$_active-track-max-clip: calc(100% - var(--_with-tick-marks-container-size) * 2);
+
+// When the start fraction is !0, add clipping by the tick container size
+$_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
+$_active-track-start-offset: calc(var(--_with-tick-marks-container-size) * $_start-fraction-not-zero);
+$_active-track-start-clip: calc($_active-track-start-offset + $_active-track-max-clip * var(--_start-fraction));
+
+// When the end fraction is !1, add clipping by the tick container size
+$_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
+$_active-track-end-offset: calc(var(--_with-tick-marks-container-size) * $_end-fraction-not-one);
+$_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-clip * (1 - var(--_end-fraction)));
+
+@mixin configuration {
+  // Internal state variables
+  --_start-fraction: 0;
+  --_end-fraction: 0;
+  --_tick-count: 100;
+
+  // External state variables
+  --_track-height: #{tokens.get(track-height)};
+  --_active-track-color: #{tokens.get(active-track-color)};
+  --_active-track-height: #{tokens.get(active-track-height)};
+  --_active-track-shape: #{tokens.get(active-track-shape)};
+  --_disabled-active-track-color: #{tokens.get(disabled-active-track-color)};
+  --_disabled-active-track-opacity: #{tokens.get(disabled-active-track-opacity)};
+  --_disabled-handle-color: #{tokens.get(disabled-handle-color)};
+  --_disabled-inactive-track-color: #{tokens.get(disabled-inactive-track-color)};
+  --_disabled-inactive-track-opacity: #{tokens.get(disabled-inactive-track-opacity)};
+  --_focus-handle-color: #{tokens.get(focus-handle-color)};
+  --_handle-color: #{tokens.get(handle-color)};
+  --_handle-height: #{tokens.get(handle-height)};
+  --_handle-shape: #{tokens.get(handle-shape)};
+  --_handle-width: #{tokens.get(handle-width)};
+  --_hover-handle-color: #{tokens.get(hover-handle-color)};
+  --_inactive-track-color: #{tokens.get(inactive-track-color)};
+  --_inactive-track-height: #{tokens.get(inactive-track-height)};
+  --_inactive-track-shape: #{tokens.get(inactive-track-shape)};
+  --_label-container-color: #{tokens.get(label-container-color)};
+  --_label-container-height: #{tokens.get(label-container-height)};
+  --_label-label-text-color: #{tokens.get(label-label-text-color)};
+  --_pressed-handle-color: #{tokens.get(pressed-handle-color)};
+  --_state-layer-size: #{tokens.get(state-layer-size)};
+  --_with-overlap-handle-outline-color: #{tokens.get(with-overlap-handle-outline-color)};
+  --_with-overlap-handle-outline-width: #{tokens.get(with-overlap-handle-outline-width)};
+  --_with-tick-marks-active-container-color: #{tokens.get(with-tick-marks-active-container-color)};
+  --_with-tick-marks-container-size: #{tokens.get(with-tick-marks-container-size)};
+  --_with-tick-marks-disabled-active-container-color: #{tokens.get(with-tick-marks-disabled-active-container-color)};
+  --_with-tick-marks-disabled-inactive-container-color: #{tokens.get(with-tick-marks-disabled-inactive-container-color)};
+  --_with-tick-marks-inactive-container-color: #{tokens.get(with-tick-marks-inactive-container-color)};
+}