@tylertech/forge 3.4.1 → 3.5.0

package/sass/key/key-item/_core.scss

@@ -0,0 +1,69 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/theme';
+@use '../../core/styles/typography';
+@use '../../icon';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline;
+}
+
+@mixin base {
+  @include typography.style(label1);
+
+  box-sizing: border-box;
+  display: grid;
+  grid-template:
+    'icon label'
+    'icon value';
+  column-gap: #{token(gap)};
+  inline-size: fit-content;
+  line-height: normal;
+}
+
+@mixin icon {
+  @include icon.provide-theme(
+    (
+      size: #{token(icon-size)}
+    )
+  );
+
+  grid-area: icon;
+  color: #{token(icon-color)};
+}
+
+@mixin label {
+  grid-area: label;
+  color: #{token(label-color)};
+}
+
+@mixin value {
+  grid-area: value;
+  color: #{token(value-color)};
+}
+
+@mixin default-icon {
+  // Subtract a pixel from the default icon's size to better match the size of a slotted icon
+  block-size: calc(#{token(icon-size)} - 1px);
+  inline-size: calc(#{token(icon-size)} - 1px);
+  border-radius: 50%;
+  background: currentColor;
+}
+
+@mixin inline {
+  grid-template: 'icon label value';
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  inline-size: auto;
+}
+
+@mixin no-value {
+  grid-template: 'icon label';
+  align-items: center;
+}

package/sass/key/key-item/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/key/key-item/tokens';
+@use '../../core/styles/tokens/token-utils';
+
+$_module: key-item;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/sass/key/key-item/index.scss

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

package/sass/key/key-item/key-item.scss

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core';
+
+//
+// Host
+//
+
+:host {
+  @include core.host;
+}
+
+//
+// Base
+//
+
+.forge-key-item {
+  @include core.tokens;
+}
+
+.forge-key-item {
+  @include core.base;
+
+  &.inline {
+    @include core.inline;
+  }
+
+  &.no-value {
+    @include core.no-value;
+
+    .value {
+      display: none;
+    }
+  }
+
+  &:not(.inline, .no-value) {
+    .label {
+      padding-block-start: 1px;
+    }
+  }
+}
+
+.icon {
+  @include core.icon;
+}
+
+.label {
+  @include core.label;
+}
+
+.value {
+  @include core.value;
+}
+
+.default-icon {
+  @include core.default-icon;
+}

package/sass/label-value/_core.scss

@@ -42,6 +42,7 @@
 
   line-height: normal;
   text-align: #{token(align)};
+  overflow-wrap: anywhere;
 
   color: #{token(label-color)};
 }
@@ -56,6 +57,7 @@
 
   line-height: normal;
   text-align: #{token(align)};
+  overflow-wrap: anywhere;
 }
 
 @mixin value-empty {

package/sass/linear-progress/_core.scss

@@ -13,8 +13,11 @@
   position: relative;
   min-inline-size: 80px;
   block-size: #{token(track-height)};
-  content-visibility: auto;
+
+  // `contain` and `content-visibility` are performance optimizations important here because progress indicators
+  // are often used when a CPU=intensive task is underway so it's especially important to minimize their CPU consumption.
   contain: strict;
+  content-visibility: auto;
 }
 
 @mixin progress {

package/sass/meter/meter/_core.scss

@@ -0,0 +1,206 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/spacing';
+@use '../../core/styles/theme';
+@use '../../core/styles/typography';
+@use '../meter-group/token-utils' as meter-group;
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline;
+}
+
+@mixin vertical-host {
+  display: block;
+}
+
+@mixin base {
+  box-sizing: border-box;
+}
+
+@mixin vertical-base {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: end;
+  width: fit-content;
+  height: 100%;
+  max-width: 100%;
+}
+
+@mixin heading {
+  @include typography.style(label1);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: normal;
+}
+
+@mixin vertical-heading {
+  flex-direction: column;
+  align-items: start;
+}
+
+@mixin heading-with-content {
+  margin-bottom: #{spacing.variable(xxsmall)};
+}
+
+@mixin vertical-heading-with-content {
+  margin-bottom: 0;
+  margin-left: #{spacing.variable(xsmall)};
+}
+
+@mixin label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin value {
+  color: #{theme.variable(text-medium)};
+}
+
+@mixin track {
+  position: relative;
+  block-size: #{token(height)};
+  border-radius: #{token(shape)};
+  overflow: hidden;
+  background: #{token(background)};
+}
+
+@mixin vertical-track {
+  width: #{token(height)};
+  height: 100%;
+}
+
+@mixin bar {
+  position: absolute;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  border-radius: #{token(inner-shape)};
+  box-shadow: #{token(inner-elevation)};
+  background: #{token(color)};
+  translate: #{token(percentage, custom)} 0;
+}
+
+@mixin vertical-bar {
+  left: initial;
+  top: 100%;
+  translate: 0 calc(-1 * #{token(percentage, custom)});
+}
+
+@mixin theme($theme, $muted: false) {
+  $background: "#{$theme}-container-#{if($muted, 'minimum', 'low')}";
+  $color: "#{$theme}#{if($muted, '-container-high', '')}";
+
+  @include override(background, #{theme.variable($background)}, value);
+  @include override(color, #{theme.variable($color)}, value);
+}
+
+@mixin lowest {
+  @include override(inner-elevation, 0, value);
+}
+
+@function tickmarks-background($count, $color, $secondary-color: null, $vertical: false) {
+  $transparent-start: if($secondary-color, 2px, 1px);
+  @return repeating-linear-gradient(
+    if($vertical, 0, 90deg),
+    $color 0px,
+    $color 1px,
+    if($secondary-color, #{$secondary-color} + ' 1px,', null) if($secondary-color, #{$secondary-color} + ' 2px,', null) transparent $transparent-start,
+    transparent calc(100% / ($count + 1) + 0px)
+  );
+}
+
+@mixin tickmarks {
+  // We add an inline margin and offset the background to hide tickmarks right at the edge of the meter
+  $background-offset: 2px;
+
+  content: '';
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin-left: $background-offset;
+  background: tickmarks-background(token(tickmarks), token(color), token(background));
+  background-position-x: -$background-offset;
+  opacity: #{token(tickmark-opacity)};
+  pointer-events: none;
+}
+
+@mixin vertical-tickmarks {
+  // Use a background offset same as the horizontal mixin but in the block direction
+  $background-offset: 2px;
+
+  margin-top: -$background-offset;
+  margin-left: 0;
+  background: tickmarks-background(token(tickmarks), token(color), token(background), true);
+  background-position-x: 0;
+  background-position-y: $background-offset;
+}
+
+@mixin bar-animation {
+  transition-property: translate, box-shadow;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin segmented-animation {
+  transition-property: background;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin segmented-bar-animation {
+  transition-property: translate, box-shadow, background;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin tickmarks-animation {
+  transition-property: background;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+/* stylelint-disable custom-property-pattern */
+// Manually reference the height of the meter group to avoid a circular dependency. Use half the
+// meter group's height to extend the meter behind the radius of the preceding meter.
+$leading: calc(#{meter-group.token(height)} * 0.5);
+/* stylelint-enable custom-property-pattern */
+
+@mixin grouped {
+  display: block;
+  position: absolute;
+  z-index: #{token(z-index, custom)};
+  top: 0;
+  left: #{token(inset, custom)};
+  width: calc(#{token(percentage, custom)} + $leading);
+  height: 100%;
+  border-radius: #{token(inner-shape)};
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: calc(-1 * $leading);
+  background: #{token(color)};
+  box-shadow: #{token(inner-elevation)};
+}
+
+@mixin vertical-grouped {
+  display: block;
+  top: calc(100% - #{token(percentage, custom)} - #{token(inset, custom)});
+  left: 0;
+  width: 100%;
+  height: calc(#{token(percentage, custom)} + $leading);
+  max-width: initial;
+  border-radius: #{token(inner-shape)};
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-left: 0;
+  margin-bottom: calc(-1 * $leading);
+}

package/sass/meter/meter/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/meter/meter/tokens';
+@use '../../core/styles/tokens/token-utils';
+
+$_module: meter;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/sass/meter/meter/index.scss

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

package/sass/meter/meter/meter.scss

@@ -0,0 +1,218 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/shape';
+@use '../../core/styles/spacing';
+@use '../../core/styles/theme';
+@use './core';
+
+//
+// Host
+//
+
+:host {
+  @include core.host;
+}
+
+//
+// Base
+//
+
+.forge-meter {
+  @include core.tokens;
+}
+
+.forge-meter {
+  @include core.base;
+
+  .heading {
+    @include core.heading;
+
+    &.not-empty {
+      @include core.heading-with-content;
+    }
+  }
+
+  .label {
+    @include core.label;
+  }
+
+  .value {
+    @include core.value;
+  }
+
+  .track {
+    @include core.track;
+
+    &.segmented {
+      @include core.theme(warning);
+      @include core.segmented-animation;
+
+      &.least-optimal {
+        @include core.theme(error);
+      }
+
+      &.optimal {
+        @include core.theme(success);
+      }
+
+      .bar {
+        @include core.segmented-bar-animation;
+      }
+    }
+
+    &.lowest {
+      @include core.lowest;
+    }
+
+    &.tickmarks::after {
+      @include core.tickmarks;
+      @include core.tickmarks-animation;
+    }
+  }
+
+  .bar {
+    @include core.bar;
+    @include core.bar-animation;
+  }
+
+  &.grouped {
+    @include core.grouped;
+
+    &.muted {
+      @include core.override(color, #{theme.variable(tertiary-container-high)}, value);
+    }
+  }
+
+  @each $key, $value in ('small': 'xsmall', 'medium': 'medium', 'large': 'large') {
+    &.density--#{$key} {
+      @include core.override(height, spacing.variable($value), value);
+    }
+  }
+
+  @each $key, $value in ('default': shape.variable(medium), 'rounded': shape.variable(full), 'squared': 0) {
+    &.shape--#{$key} {
+      @include core.override(shape, $value, value);
+    }
+  }
+
+  &.inner-shape--inherit {
+    @include core.override(inner-shape, shape);
+  }
+
+  &.muted {
+    .track {
+      @include core.theme(tertiary, $muted: true);
+
+      &.segmented {
+        @include core.theme(warning, $muted: true);
+
+        &.least-optimal {
+          @include core.theme(error, $muted: true);
+        }
+
+        &.optimal {
+          @include core.theme(success, $muted: true);
+        }
+      }
+    }
+  }
+}
+
+//
+// Vertical
+//
+
+:host(:is(:state(vertical), :--vertical)) {
+  @include core.vertical-host;
+
+  .forge-meter {
+    @include core.vertical-base;
+
+    .heading {
+      @include core.vertical-heading;
+
+      &.not-empty {
+        @include core.vertical-heading-with-content;
+      }
+    }
+
+    .track {
+      @include core.vertical-track;
+
+      &.tickmarks::after {
+        @include core.vertical-tickmarks;
+      }
+    }
+
+    .bar {
+      @include core.vertical-bar;
+    }
+
+    &.grouped {
+      @include core.vertical-grouped;
+    }
+  }
+}
+
+//
+// Theme
+//
+
+@each $value in ('primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'info') {
+  .theme--#{$value} {
+    &:not(.muted) {
+      .track:not(.segmented) {
+        @include core.theme($value);
+      }
+
+      &.grouped {
+        @include core.theme($value);
+      }
+    }
+
+    &.muted {
+      .track:not(.segmented) {
+        @include core.theme($value, $muted: true);
+      }
+
+      .grouped {
+        @include core.theme($value, $muted: true);
+      }
+    }
+  }
+}
+
+//
+// Media
+//
+
+@media (prefers-reduced-motion: reduce) {
+  .track {
+    @include core.override(transition-duration, 0, value);
+  }
+}
+
+@media (forced-colors: active) {
+  .track {
+    border: 1px solid CanvasText;
+
+    .bar {
+      background: CanvasText;
+    }
+  }
+
+  .grouped {
+    border-inline-end: 1px solid Canvas !important;
+    background: CanvasText !important;
+  }
+
+  :host(:is(:state(vertical), :--vertical)) {
+    .grouped {
+      border-block-start: 1px solid CanvasText !important;
+      border-inline-end: initial !important;
+    }
+  }
+}