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

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

@@ -0,0 +1,156 @@
+/**
+ * @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-high: rgba(white, color-emphasis.value(highest)),
+    text-medium: rgba(white, color-emphasis.value(medium)),
+    text-low: rgba(white, color-emphasis.value(medium-low))
+  ));
+}
+
+//
+// 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;
+
+    &:not(:last-child):not(:first-child) {
+      @include core.section-center;
+    }
+
+    &: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;
+}
+
+//
+// Slotted - Search
+//
+
+::slotted(forge-app-bar-search[slot=center]) {
+  width: 100%;
+}
+
+//
+// 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/app-bar/search/_configuration.scss

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin configuration {
+  @include tokens;
+}

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

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: #{token(gap)};
+
+  height: #{token(height)};
+  width: 100%;
+  padding-inline: #{token(padding)};
+  box-sizing: border-box;
+
+  border-radius: #{token(shape)};
+
+  &:hover {
+    &::after {
+      opacity: #{token(border-hover-opacity)};
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-color: #{token(background-color)};
+    opacity: #{token(background-color-opacity)};
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: #{token(border-opacity)};
+    border-radius: #{token(shape)};
+    outline: 1px solid #{token(border-color)};
+    transition-property: opacity;
+    transition-duration: #{token(transition-duration)};
+    transition-timing-function: #{token(transition-timing-function)};
+  }
+}
+
+@mixin input {
+  @include typography.style(body2);
+
+  display: block;
+  overflow: hidden;
+  background: none;
+  color: currentColor;
+  border: none;
+  width: 100%;
+  margin: 0;
+  outline: none;
+  
+  &::placeholder {
+    color: currentColor;
+    opacity: #{token(input-placeholder-opacity)};
+  }
+}

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

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

@@ -3,14 +3,61 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
-
-@include mixins.core-styles;
+@use './configuration' as *;
+@use './core';
+@use '../../focus-indicator';
 
 :host {
-  @include mixins.host;
+  @include core.host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-app-bar-search {
+  @include configuration;
+}
+
+.forge-app-bar-search {
+  @include core.base;
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  cursor: not-allowed;
+
+  .forge-app-bar-search {
+    pointer-events: none;
+    opacity: 38%;
+  }
+
+  ::slotted(input) {
+    pointer-events: none;
+  }
+}
+
+//
+// Focus indicator
+//
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: currentColor,
+    outward-offset: 0px // Required unit
+  ));
+}
+
+//
+// Slotted input
+//
+
+::slotted(input) {
+  @include core.input;
+}

package/styles/app-bar/search/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 {
@@ -131,6 +132,15 @@ forge-focus-indicator {
   }
 }
 
+//
+// Full width
+//
+
+:host([full-width]) {
+  width: 100%;
+}
+
+
 //
 // Dense
 //
@@ -206,3 +216,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/app-bar/search/_tokens.scss

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../utils';
+@use '../../../theme';
+@use '../../../shape';
+@use '../../../animation';
+
+$tokens: (
+  color: utils.module-val(app-bar-search, color, currentColor),
+  height: utils.module-val(app-bar-search, height, 36px),
+  padding: utils.module-val(app-bar-search, padding, 8px),
+  shape: utils.module-val(app-bar-search, shape, shape.variable(small)),
+  gap: utils.module-val(app-bar-search, gap, 4px),
+
+  input-placeholder-color: utils.module-ref(app-bar-search, input-placeholder-color, color),
+  input-placeholder-opacity: utils.module-val(app-bar-search, input-placeholder-opacity, theme.emphasis(medium-low)),
+  
+  background-color: utils.module-ref(app-bar-search, background-color, color),
+  background-color-opacity: utils.module-val(app-bar-search, background-color-opacity, theme.emphasis(lowest)),
+
+  border-color: utils.module-ref(app-bar-search, border-color, color),
+  border-opacity: utils.module-val(app-bar-search, border-opacity, theme.emphasis(medium)),
+  border-hover-opacity: utils.module-val(app-bar-search, border-hover-opacity, theme.emphasis(highest)),
+
+  transition-duration: utils.module-val(app-bar-search, transition-duration, animation.variable(duration-short3)),
+  transition-timing-function: utils.module-val(app-bar-search, transition-timing-function, 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);
+}