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

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

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(radio, primary-color, theme.variable(tertiary)),
+  inactive-color: utils.module-val(radio, inactive-color, theme.variable(surface-container-high)),
+  size: utils.module-val(radio, size, 20px),
+  mark-size: utils.module-val(radio, mark-size, 12px),
+  state-layer-size: utils.module-val(radio, state-layer-size, 40px),
+  state-layer-dense-size: utils.module-val(radio, state-layer-dense-size, 24px),
+
+  // Radio
+  width: utils.module-ref(radio, width, size),
+  height: utils.module-ref(radio, height, size),
+  border-width: utils.module-val(radio, border-width, border.variable(medium)),
+  unchecked-border-color: utils.module-ref(radio, unchecked-border-color, inactive-color),
+  checked-border-color: utils.module-ref(radio, checked-border-color, primary-color),
+  background: utils.module-val(radio, background, transparent),
+  shape: utils.module-val(radio, shape, shape.variable(round)),
+
+  // Mark
+  mark-width: utils.module-ref(radio, mark-width, mark-size),
+  mark-height: utils.module-ref(radio, mark-height, mark-size),
+  mark-unchecked-color: utils.module-ref(radio, mark-unchecked-color, inactive-color),
+  mark-checked-color: utils.module-ref(radio, mark-checked-color, primary-color),
+  mark-unchecked-background: utils.module-val(radio, mark-unchecked-background, transparent),
+  mark-checked-background: utils.module-val(radio, mark-checked-background, transparent),
+
+  // Label
+  gap: utils.module-val(radio, gap, 0),
+  justify: utils.module-val(radio, justify, space-between),
+  direction: utils.module-val(radio, direction, initial),
+
+  // State layer
+  state-layer-width: utils.module-ref(radio, state-layer-width, state-layer-size),
+  state-layer-height: utils.module-ref(radio, state-layer-height, state-layer-size),
+  state-layer-unchecked-color: utils.module-ref(state-layer, state-layer-unchecked-color, color),
+  state-layer-checked-color: utils.module-ref(radio, state-layer-checked-color, primary-color),
+  state-layer-shape: utils.module-ref(radio, state-layer-shape, shape),
+
+  // Dense
+  state-layer-dense-width: utils.module-ref(radio, state-layer-dense-width, state-layer-dense-size),
+  state-layer-dense-height: utils.module-ref(radio, state-layer-dense-height, state-layer-dense-size),
+  
+  // Disabled
+  disabled-opacity: utils.module-val(radio, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Animation
+  animation-duration: utils.module-val(radio, animation-duration, animation.variable(duration-short4)),
+  animation-timing-function: utils.module-val(radio, animation-timing-function, animation.variable(easing-decelerate)),
+  animation-delay: utils.module-val(radio, animation-delay, 0ms),
+) !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);
+}

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

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use '../core/styles/shape';
+@use './token-utils' as *;
+
+@mixin host {
+  display: #{token(display)};
+  position: relative;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin base {
+  @include typography.style(button);
+
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: #{token(gap)};
+  z-index: 0;
+  
+  background: #{token(background)};
+  color: #{token(color)};
+  cursor: pointer;
+  box-shadow: #{token(shadow)};
+  
+  box-sizing: border-box;
+  height: #{token(density-medium-size)};
+  min-width: #{token(density-medium-size)};
+  padding-inline: #{token(padding)};
+  border-width: medium;
+  border-style: none;
+  border-color: currentColor;
+  border-top-left-radius: #{token(shape-start-start)};
+  border-top-right-radius: #{token(shape-start-end)};
+  border-bottom-left-radius: #{token(shape-end-start)};
+  border-bottom-right-radius: #{token(shape-end-end)};
+  
+  user-select: none;
+  white-space: nowrap;
+
+  transition-property: box-shadow, background, color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+
+  &:hover {
+    @include override(shadow, hover-shadow);
+  }
+
+  &:active {
+    @include override(shadow, active-shadow);
+  }
+}
+
+@mixin extended {
+  padding-inline: #{token(extended-padding)};
+  min-width: #{token(extended-min-width)};
+}
+
+@mixin lowered {
+  @include override(shadow, lowered-shadow);
+
+  &:hover {
+    @include override(shadow, lowered-hover-shadow);
+  }
+
+  &:active {
+    @include override(shadow, lowered-active-shadow);
+  }
+}
+
+@mixin anchor-base {
+  position: absolute;
+  inset: 0;
+  text-decoration: none;
+}
+
+@mixin density-small {
+  @include override(size, density-small-size);
+}
+
+@mixin density-large {
+  @include override(size, density-large-size);
+  @include override(shape, shape.variable(extra-large), value);
+}
+
+@mixin host-disabled {
+  cursor: #{token(disabled-cursor)};
+}
+
+@mixin disabled {
+  @include override(background, disabled-background);
+  @include override(color, disabled-color);
+
+  pointer-events: none;
+  opacity: #{token(disabled-opacity)};
+}
+

package/styles/floating-action-button/_token-utils.scss

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

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './configuration' as *;
+@use './core';
+@use '../core/styles/theme';
+@use '../state-layer' as state-layer;
+@use '../focus-indicator' as focus-indicator;
+@use './token-utils' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host-configuration;
+}
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-fab {
+  @include configuration;
+}
+
+.forge-fab {
+  @include core.base;
+
+  &--extended {
+    @include core.extended;
+  }
+}
+
+a {
+  @include core.anchor-base;
+}
+
+//
+// Focus indicator
+//
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(background)},
+    shape-start-start: #{token(shape-start-start)},
+    shape-start-end: #{token(shape-start-end)},
+    shape-end-start: #{token(shape-end-start)},
+    shape-end-end: #{token(shape-end-end)}
+  ));
+}
+
+//
+// State layer 
+//
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(color)}
+  ));
+}
+
+//
+// Density (only when not "extended")
+//
+
+:host(:is([dense],[density=small])) {
+  .forge-fab {
+    @include core.density-small;
+  }
+}
+
+:host([density=large]) {
+  .forge-fab {
+    @include core.density-large;
+  }
+}
+
+//
+// Elevation
+//
+
+:host([elevation=lowered]) {
+  .forge-fab {
+    @include core.lowered;
+  }
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include core.host-disabled;
+
+  .forge-fab {
+    @include core.disabled;
+  }
+}
+
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]:not([disabled])) {
+    .forge-fab {
+      @include override(background, theme.variable($theme), value);
+      @include override(color, theme.variable(on-#{$theme}), value);
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(tertiary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);

package/styles/floating-action-button/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/focus-indicator/focus-indicator.scss

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 @use './animations';
-@use './configuration';
+@use './configuration' as *;
 @use './core';
 
 //
@@ -12,52 +12,35 @@
 //
 
 :host {
-  display: contents;
+  @include configuration;
 }
 
-:host([hidden]) {
-  display: none;
-}
-
-//
-// Base
-//
-
-.forge-focus-indicator {
-  @include configuration.configuration;
-}
-
-.forge-focus-indicator {
+:host {
   @include core.base;
 }
 
+:host([hidden]) {
+  display: none;
+}
 
 //
 // States
 //
 
 :host([active]) {
-  .forge-focus-indicator {
-    @include core.active;
-  }
+  @include core.active;
 }
 
 :host(:not([inward])) {
-  .forge-focus-indicator {
-    @include core.outward;
-  }
+  @include core.outward;
 }
 
 :host([inward]) {
-  .forge-focus-indicator {
-    @include core.inward;
-  }
+  @include core.inward;
 }
 
 :host([circular]) {
-  .forge-focus-indicator {
-    @include core.circular;
-  }
+  @include core.circular;
 }
 
 //
@@ -71,7 +54,7 @@
 //
 
 @media (prefers-reduced-motion) {
-  .forge-focus-indicator {
+  :host {
     animation: none;
   }
 }

package/styles/forge.scss

@@ -10,7 +10,6 @@
 @use './typography/forge-typography';
 
 // Required global component styles
-@use './floating-action-button/forge-floating-action-button';
 @use './table/forge-table';
 @use './tooltip/forge-tooltip';
 @use './ripple/forge-ripple';

package/styles/icon-button/_core.scss

@@ -116,10 +116,6 @@
   @include override(icon-color, toggle-on-icon-color);
 }
 
-@mixin toggle-outlined {
-  // @include override(icon-color, outlined-toggle-icon-color);
-}
-
 @mixin toggle-on-outlined {
   @include override(background-color, outlined-toggle-on-background-color);
   @include override(icon-color, outlined-toggle-on-icon-color);

package/styles/icon-button/icon-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-icon-button {
-  @include configuration.configuration;
+  @include configuration;
 }
 
 .forge-icon-button {
@@ -136,12 +137,6 @@ forge-state-layer {
   }
 }
 
-:host([toggle]:not([on])[variant=outlined]) {
-  .forge-icon-button {
-    @include core.toggle-outlined;
-  }
-}
-
 :host([toggle][on][variant=outlined]) {
   .forge-icon-button {
     @include core.toggle-on-outlined;
@@ -172,6 +167,45 @@ forge-state-layer {
   }
 }
 
+//
+// Badge
+//
+
+::slotted([slot=badge]) {
+  position: absolute;
+  top: 0;
+  left: 60%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+::slotted(forge-badge[slot=badge][dot]) {
+  top: 8px;
+}
+
+:host(:is([dense],[density=small],[density=medium])) {
+  ::slotted(forge-badge[slot=badge]:not([dot])) {
+    top: -25%;
+  }
+
+  ::slotted(forge-badge[slot=badge][dot]) {
+    top: 0;
+  }
+}
+
+
+//
+// Circular progress
+//
+
+::slotted(forge-circular-progress) {
+  @include circular-progress.provide-theme((
+    indicator-color: #{token(icon-color)},
+    track-color: transparent,
+    size: 1em
+  ));
+}
+
 //
 // Density
 //

package/styles/label/_core.scss

@@ -6,12 +6,9 @@
 @use '../core/styles/typography';
 
 @mixin host {
-  display: inline-block;
-}
-
-@mixin label {
+  /* Typography styles are set on the host to make it easier to override them via a class */
   @include typography.style(label);
 
-  display: contents;
+  display: inline-block;
   cursor: default;
 }

package/styles/label/label.scss

@@ -11,8 +11,4 @@
 
 :host([hidden]) {
   display: none;
-}
-
-.forge-label {
-  @include core.label;
-}
+}

package/styles/list/list-item/list-item.scss

@@ -207,6 +207,8 @@ slot[name=tertiary-title] {
 }
 
 forge-focus-indicator {
+  z-index: 1; // Fixes an animation artifact in Safari
+
   @include focus-indicator.provide-theme((
     shape: shape.variable(medium) // TODO: use list-item token?
   ));

package/styles/profile-card/_configuration.scss

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