@tylertech/forge 3.0.0-next.13 → 3.0.0-next.14

package/styles/app-bar/app-bar/_core.scss

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  background: #{token(background)};
+  color: #{token(foreground)};
+
+  position: relative;
+  z-index: #{token(z-index)};
+  
+  display: grid;
+  grid-template-rows: 1fr auto;
+  
+  transition-property: box-shadow, background-color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+  
+  box-sizing: border-box;
+  width: 100%;
+}
+
+@mixin row {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  height: #{token(height)};
+  padding-inline: #{token(row-padding)};
+}
+
+@mixin row-no-center {
+  grid-template-columns: 1fr auto;
+}
+
+@mixin section {
+  display: inline-flex;
+  flex: 1 1 auto;
+  align-items: center;
+
+  box-sizing: border-box;
+  min-width: 0;
+  height: 100%;
+}
+
+@mixin section-end {
+  justify-self: end;
+}
+
+@mixin title {
+  @include typography.style(heading4);
+
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin anchor-base {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+
+  box-sizing: border-box;
+  height: 100%;
+}
+
+@mixin logo-title-container {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  gap: #{token(logo-gap)};
+
+  min-width: 0;
+  padding-inline: #{token(title-padding)};
+}
+
+@mixin logo {
+  font-size: #{token(logo-font-size)};
+  height: 1em;
+  width: 1em;
+}
+
+@mixin elevation-raised {
+  box-shadow: #{token(elevation)};
+}

package/styles/app-bar/app-bar/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/app-bar/app-bar/tokens';
+@use '../../core/styles/tokens/token-utils';
+
+$_module: app-bar;
+$_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/styles/app-bar/app-bar/app-bar.scss

@@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use './configuration' as *;
+@use './token-utils' as *;
+@use './core';
+@use '../../focus-indicator';
+@use '../../state-layer';
+@use '../../tabs/tab-bar';
+@use '../../tabs/tab';
+@use '../../core/styles/theme';
+@use '../../core/styles/tokens/theme/color-emphasis';
+
+//
+// Host
+//
+
+:host {
+  @include host-configuration;
+}
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Default theme
+//
+
+:host(:not(theme)) {
+  @include theme.provide((
+    primary: #{token(foreground)},
+    on-primary: rgba(black, color-emphasis.value(highest)),
+    text-medium: rgba(white, color-emphasis.value(medium))
+  ));
+}
+
+//
+// Base
+//
+
+.forge-app-bar {
+  @include configuration;
+}
+
+.forge-app-bar {
+  @include core.base;
+
+  .row {
+    @include core.row;
+  }
+
+  &.no-center {
+    .row {
+      @include core.row-no-center;
+    }
+  }
+
+  .section {
+    @include core.section;
+
+    &:last-child {
+      @include core.section-end;
+    }
+  }
+
+  h1 {
+    @include core.title;
+  }
+
+  a {
+    @include core.anchor-base;
+
+    forge-state-layer {
+      @include state-layer.provide-theme((
+        color: #{token(foreground)}
+      ));
+    }
+
+    forge-focus-indicator {
+      @include focus-indicator.provide-theme((
+        color: #{token(foreground)},
+        shape: 4px,
+        offset-block: 4px
+      ));
+    }
+  }
+
+  .logo-title-container {
+    @include core.logo-title-container;
+  }
+}
+
+//
+// Elevation
+//
+
+:host(:is(:not([elevation]),[elevation=raised])) {
+  .forge-app-bar {
+    @include core.elevation-raised;
+  }
+}
+
+//
+// Slotted - Tab bar
+//
+
+::slotted(forge-tab-bar) {
+  @include tab-bar.provide-theme(( divider-thickness: 0 ));
+}
+
+//
+// Slotted - Logo
+//
+
+::slotted([slot=logo]) {
+  @include core.logo;
+}
+
+//
+// White theme
+//
+
+:host([theme=white]) {
+  @include theme.provide((
+    primary: black,
+    on-primary: rgba(white, color-emphasis.value(highest)),
+    text-medium: rgba(black, color-emphasis.value(medium))
+  ));
+
+  .forge-app-bar {
+    @include override(background, white, value);
+    @include override(foreground, black, value);
+  }
+}

package/styles/app-bar/app-bar/index.scss

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

package/styles/button/button.scss

@@ -3,11 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
+@use './configuration' as *;
 @use './core';
 @use '../core/styles/theme';
-@use '../state-layer' as state-layer;
-@use '../focus-indicator' as focus-indicator;
+@use '../state-layer';
+@use '../focus-indicator';
+@use '../circular-progress';
 @use './token-utils' as *;
 
 //
@@ -15,7 +16,7 @@
 //
 
 :host {
-  @include configuration.host-configuration;
+  @include host-configuration;
 }
 
 :host {
@@ -31,7 +32,7 @@
 //
 
 .forge-button {
-  @include configuration.configuration;
+  @include configuration;
 }
 
 .forge-button {
@@ -206,3 +207,15 @@ forge-focus-indicator {
     @include core.popover-icon-open;
   }
 }
+
+//
+// Slotted - circular progress
+//
+
+::slotted(forge-circular-progress) {
+  @include circular-progress.provide-theme((
+    indicator-color: #{token(color)},
+    track-color: transparent,
+    size: 1em
+  ));
+}

package/styles/circular-progress/_core.scss

@@ -18,6 +18,8 @@ $_cycle-duration: calc(4 * #{token(arc-duration)});
   align-items: center;
   justify-content: center;
 
+  transition: background-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+
   // `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;

package/styles/circular-progress/circular-progress.scss

@@ -126,9 +126,9 @@ svg {
 @include theme(warning);
 @include theme(info);
 
-:host([no-track]) {
+:host([track]) {
   .forge-circular-progress {
-    @include override(track-color, transparent, value);
+    @include override(track-color, track-fill-color);
   }
 }
 

package/styles/core/styles/elevation/index.scss

@@ -8,6 +8,7 @@
 @use 'sass:meta';
 @use '../core/config';
 @use '../tokens/elevation/tokens';
+@use '../utils';
 
 ///
 /// Generates a `box-shadow` style value for the provided elevation z-value.
@@ -59,3 +60,12 @@
   $value: map.get(tokens.$z-index-map, $level);
   z-index: var(--#{config.$prefix}-z-index-#{$level}, #{$value});
 }
+
+///
+/// Returns a global z-index CSS custom property reference (with the fallback value) specified by the provided level.
+/// 
+/// @param {Number} $level - The z-index level to return.
+///
+@function z-index-variable($level) {
+  @return utils.variable(z-index, tokens.$z-index-map, $level);
+}

package/styles/core/styles/spacing/index.scss

@@ -21,7 +21,7 @@
 /// Example:
 /// ```scss
 /// .my-class {
-///   margin: spacing.variable('100'); // => margin: var(--forge-spacing-standard, 16px);
+///   margin: spacing.variable(medium); // => margin: var(--forge-spacing-medium, 16px);
 /// }
 /// ```
 /// 

package/styles/core/styles/theme/index.scss

@@ -10,6 +10,8 @@
 @use '../tokens/theme/color-emphasis';
 @use '../utils';
 
+@forward './utils';
+
 ///
 /// Emits custom property declarations for all default theme tokens.
 /// 

package/styles/core/styles/tokens/app-bar/app-bar/_tokens.scss

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../utils';
+@use '../../../theme';
+@use '../../../elevation';
+@use '../../../animation';
+@use '../../../typography';
+@use '../../../spacing';
+
+$tokens: (
+  background: utils.module-val(app-bar, background, theme.variable(brand)),
+  foreground: utils.module-val(app-bar, foreground, theme.variable(on-brand)),
+
+  z-index: utils.module-val(app-bar, z-index, elevation.z-index-variable(header)),
+  elevation: utils.module-val(app-bar, elevation, elevation.value(4)),
+
+  height: utils.module-val(app-bar, height, 56px),
+  row-padding: utils.module-val(app-bar, row-padding, spacing.variable(xxsmall)),
+
+  logo-gap: utils.module-val(app-bar, logo-gap, spacing.variable(medium)),
+  logo-font-size: utils.module-val(app-bar, logo-font-size, typography.font-size-relative('2500')),
+
+  title-padding: utils.module-val(app-bar, title-padding, spacing.variable(xsmall)),
+
+  transition-duration: utils.module-val(app-bar, transition-duration, animation.variable(duration-short4)),
+  transition-timing: utils.module-val(app-bar, transition-timing, animation.variable(easing-standard)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -15,7 +15,8 @@ $tokens: (
 
   // Track
   track-width: utils.module-val(circular-progress, track-width, 12),
-  track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary-container)),
+  track-color: utils.module-val(circular-progress, track-color, transparent),
+  track-fill-color: utils.module-val(circular-progress, track-fill-color, theme.variable(tertiary-container)),
 
   // Indicator
   indicator-color: utils.module-val(circular-progress, indicator-color, theme.variable(tertiary)),

package/styles/core/styles/tokens/floating-action-button/_tokens.scss

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../spacing';
+@use '../../elevation';
+
+$tokens: (
+  // General
+  display: utils.module-val(fab, display, inline-flex),
+  gap: utils.module-val(fab, spacing, spacing.variable(xsmall)),
+  background: utils.module-val(fab, background, theme.variable(secondary)),
+  color: utils.module-val(fab, color, theme.variable(on-secondary)),
+  size: utils.module-val(fab, size, 56px),
+  padding: utils.module-val(fab, padding, spacing.variable(xsmall)),
+
+  // Elevation - raised
+  shadow: utils.module-val(fab, shadow, elevation.value(3)),
+  hover-shadow: utils.module-val(fab, hover-shadow, elevation.value(4)),
+  active-shadow: utils.module-val(fab, active-shadow, elevation.value(3)),
+
+  // Elevation - lowered
+  lowered-shadow: utils.module-val(fab, lowered-shadow, elevation.value(1)),
+  lowered-hover-shadow: utils.module-val(fab, lowered-hover-shadow, elevation.value(2)),
+  lowered-active-shadow: utils.module-val(fab, lowered-active-shadow, elevation.value(1)),
+
+  // Animation
+  transition-duration: utils.module-val(fab, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(fab, transition-timing, animation.variable(easing-standard)),
+
+  // Shape
+  shape: utils.module-val(fab, shape, shape.variable(full)),
+  shape-start-start: utils.module-ref(fab, shape-start-start, shape),
+  shape-start-end: utils.module-ref(fab, shape-start-end, shape),
+  shape-end-start: utils.module-ref(fab, shape-end-start, shape),
+  shape-end-end: utils.module-ref(fab, shape-end-end, shape),
+
+  // Extended
+  extended-padding: utils.module-val(fab, extended-padding, spacing.variable(medium-large)),
+  extended-min-width: utils.module-val(fab, extended-min-width, 96px),
+
+  // Density - small
+  density-small-size: utils.module-val(fab, density-small-size, 40px),
+
+  // Density - medium (default)
+  density-medium-size: utils.module-ref(fab, density-medium-size, size),
+
+  // Density - large
+  density-large-size: utils.module-val(fab, density-large-size, 96px),
+
+  // Disabled
+  disabled-cursor: utils.module-val(fab, disabled-cursor, not-allowed),
+  disabled-background: utils.module-val(fab, disabled-background, theme.variable(surface-container)),
+  disabled-color: utils.module-val(fab, disabled-color, theme.variable(on-surface-container)),
+  disabled-opacity: utils.module-val(fab, disabled-opacity, theme.emphasis(medium-low)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/icon-button/_tokens.scss

@@ -17,7 +17,7 @@ $tokens: (
   display: utils.module-val(icon-button, display, inline-flex),
   size: utils.module-val(icon-button, size, 48px),
   gap: utils.module-val(icon-button, spacing, 0),
-  icon-color: utils.module-val(icon-button, icon-color, inherit),
+  icon-color: utils.module-val(icon-button, icon-color, currentColor),
   background-color: utils.module-val(icon-button, background-color, none),
   icon-size: utils.module-val(icon-button, icon-size, typography.font-size-relative('1500')),
   cursor: utils.module-val(icon-button, cursor, pointer),

package/styles/core/styles/tokens/profile-card/_tokens.scss

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../../utils';
+
+$tokens: (
+  min-width: utils.module-val(profile-card, min-width, 360px),
+  shape: utils.module-val(profile-card, border-radius, shape.variable(medium)),
+  avatar-size: utils.module-val(profile-card, avatar-size, 56px)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -11,6 +11,7 @@ $extra-small: math.div($base, 4) !default; // 1px
 $small: math.div($base, 2) !default;       // 2px
 $medium: $base !default;                   // 4px
 $large: $base * 2 !default;                // 8px
+$extra-large: $base * 4 !default;          // 16px
 
 $tokens: (
   extra-small: $extra-small,
@@ -33,6 +34,11 @@ $tokens: (
   large-block-end: 0 0 $large $large,
   large-inline-start: $large 0 0 $large,
   large-inline-end: 0 $large $large 0,
+  extra-large: $extra-large,
+  extra-large-block-start: $extra-large $extra-large 0 0,
+  extra-large-block-end: 0 0 $extra-large $extra-large,
+  extra-large-inline-start: $extra-large 0 0 $extra-large,
+  extra-large-inline-end: 0 $extra-large $extra-large 0,
   full: 9999px, // Pill shaped
   round: 50%
 ) !default;

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

@@ -13,6 +13,7 @@ $values: (
   '050': $base * 0.5,    // 8px
   '075': $base * 0.75,   // 12px
   '100': $base,          // 16px
+  '125': $base * 1.25,   // 20px
   '150': $base * 1.5,    // 24px
   '200': $base * 2,      // 32px
   '300': $base * 3,      // 48px
@@ -25,6 +26,7 @@ $tokens: (
   xsmall: map.get($values, '050'),
   small: map.get($values, '075'),
   medium: map.get($values, '100'),
+  medium-large: map.get($values, '125'),
   large: map.get($values, '150'),
   xlarge: map.get($values, '200'),
   xxlarge: map.get($values, '300'),

package/styles/core/styles/tokens/theme/_token-utils.scss

@@ -33,8 +33,8 @@
   // The on-container colors are the contrast color for the provided color mixed with the
   // container color at a lower emphasis to let the contrast color bleed through for
   // increased contrast against the lower emphasis container color 
-  $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium-low));
-  $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(low));
+  $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium));
+  $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium));
   $on-container-high: theme-utils.contrast($container-high);
 
   @return (

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use './token-utils';
+@use './tokens.surface' as surface;
+@use '../color-palette';
+
+// Light
+$tokens: (
+  brand: color-palette.$indigo-800,
+  on-brand: color-palette.$white
+);
+
+// Dark
+$tokens-dark: (
+  brand: color-palette.$grey-900,
+  on-brand: color-palette.$white
+);

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

@@ -6,6 +6,7 @@
 @use 'sass:map';
 @use '../../utils';
 @use '../../theme/utils' as theme-utils;
+@use './tokens.brand' as brand;
 @use './tokens.core' as core;
 @use './tokens.surface' as surface;
 @use './tokens.text' as text;
@@ -14,6 +15,7 @@
 
 // Forge default (light) theme
 $tokens: utils.flatten(
+  brand.$tokens,
   core.$tokens,
   surface.$tokens,
   text.$tokens,
@@ -36,6 +38,7 @@ $tokens: utils.flatten(
 
 // Forge dark theme
 $tokens-dark: utils.flatten(
+  brand.$tokens-dark,
   core.$tokens-dark,
   surface.$tokens-dark,
   text.$tokens-dark,

package/styles/floating-action-button/_configuration.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+$host-tokens: [display disabled-cursor];
+
+@mixin host-configuration {
+  @include tokens($includes: $host-tokens);
+}
+
+@mixin configuration {
+  @include tokens($excludes: $host-tokens);
+}