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

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

@@ -3,20 +3,36 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use 'sass:map';
+
 $base: 16px !default; // The Forge spacing system scales in multiples of 8
 
-$tokens: (
+$values: (
   '0125': $base * 0.125, // 2px
   '025': $base * 0.25,   // 4px
   '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
   '350': $base * 3.5,    // 56px
 ) !default;
 
+$tokens: (
+  xxxsmall: map.get($values, '0125'),
+  xxsmall: map.get($values, '025'),
+  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'),
+  xxxlarge: map.get($values, '350'),
+);
+
 @function get($key) {
   @return map.get($tokens, $key);
 }

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../border';
+@use '../button/tokens' as button;
+
+$tokens: (
+  min-width: utils.module-val(split-button, min-width, 0),
+  gap: utils.module-val(split-button, gap, border.variable(thin)),
+
+  focus-indicator-offset: utils.module-val(split-button, focus-indicator-offset, button.get(focus-indicator-offset)),
+  focus-indicator-divider-offset: utils.module-ref(split-button, focus-indicator-divider-offset, gap)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
-@use '../color-palette';
 @use '../../animation';
 @use '../../elevation';
 @use '../../shape';
@@ -21,6 +20,7 @@ $tokens: (
   track-border-color: utils.module-val(switch, track-border-color, transparent),
 
   icon-color: utils.module-val(switch, icon-color, theme.variable(on-tertiary)),
+  icon-size: utils.module-val(switch, icon-size, 16px),
   icon-scale: utils.module-val(switch, icon-scale, 1),
 
   state-layer-size: utils.module-val(switch, state-layer-size, 40px),
@@ -51,8 +51,8 @@ $tokens: (
   // Icon
   icon-on-color: utils.module-ref(switch, icon-on-color, icon-color),
   icon-off-color: utils.module-ref(switch, icon-off-color, icon-color),
-  icon-on-size: utils.module-ref(switch, icon-on-size, handle-size),
-  icon-off-size: utils.module-ref(switch, icon-off-size, handle-size),
+  icon-on-size: utils.module-ref(switch, icon-on-size, icon-size),
+  icon-off-size: utils.module-ref(switch, icon-off-size, icon-size),
   icon-on-scale: utils.module-ref(switch, icon-on-scale, icon-scale),
   icon-off-scale: utils.module-ref(switch, icon-off-scale, icon-scale),
 
@@ -72,7 +72,7 @@ $tokens: (
   state-layer-dense-height: utils.module-ref(switch, state-layer-dense-height, state-layer-dense-size),
 
   // Disabled
-  disabled-opacity: utils.module-val(switch, disabled-opacity, 0.38),
+  disabled-opacity: utils.module-val(switch, disabled-opacity, theme.emphasis(medium-low)),
 
   // Active
   handle-active-on-color: utils.module-ref(switch, handle-active-on-color, handle-on-color),

package/styles/core/styles/tokens/tabs/tab/_tokens.scss

@@ -41,7 +41,7 @@ $tokens: (
   
   // Content
   content-height: utils.module-ref(tab, content-height, height),
-  content-padding: utils.module-val(tab, content-padding, spacing.variable('025')),
+  content-padding: utils.module-val(tab, content-padding, spacing.variable(xxsmall)),
 
   // Icon
   active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),

package/styles/core/styles/tokens/tabs/tab-bar/_tokens.scss

@@ -8,8 +8,8 @@
 @use '../../../utils';
 
 $tokens: (
-  container-justify: utils.module-val(tab-bar, justify, space-between),
-  tab-flex: utils.module-val(tab-bar, stretch, 1),
+  justify: utils.module-val(tab-bar, justify, space-between),
+  stretch: utils.module-val(tab-bar, stretch, 1),
   divider-color: utils.module-val(tab-bar, divider-color, theme.variable(outline)),
   divider-thickness: utils.module-val(tab-bar, divider-thickness, 1px)
 );

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

@@ -23,8 +23,9 @@
   $surface-tone: color-utils.tone($surface);
 
   // The container colors are the provided color mixed with the surface color at lower emphasis levels
+  $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', lower, low)));
   $container: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
-  // $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
+  $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
 
   // The on-color is the contrast color against the provided color
   $on-color: theme-utils.contrast($color);
@@ -32,15 +33,18 @@
   // 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: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(low));
-  // $on-container-high: theme-utils.contrast($container-high);
+  $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 (
     #{$name}: $color,
+    #{$name}-container-low: $container-low,
     #{$name}-container: $container,
-    // #{$name}-container-high: $container-high,
+    #{$name}-container-high: $container-high,
     on-#{$name}: $on-color,
+    on-#{$name}-container-low: $on-container-low,
     on-#{$name}-container: $on-container,
-    // on-#{$name}-container-high: $on-container-high
+    on-#{$name}-container-high: $on-container-high
   );
 }

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/core/styles/tokens/typography/_tokens.label.scss

@@ -18,7 +18,6 @@ $label: utils.inherit-map(core.$base, (
 $button: utils.inherit-map(core.$base, (
   font-size: type-utils.font-size-relative(button, font-size, '0875'),
   font-weight: weight.value(medium),
-  line-height: type-utils.font-size-relative(button, line-height, '2250'),
   letter-spacing: type-utils.calc-letter-spacing(1, scale.value('0875'))
 )) !default;
 

package/styles/core/styles/typography/index.scss

@@ -91,6 +91,30 @@
   }
 }
 
+///
+/// Create a selector for default anchor link styles
+///
+@mixin anchor {
+  a:not([forge-ignore]),
+  .forge-typography--link {
+    text-decoration: underline;
+    color: theme.variable(primary);
+    cursor: pointer;
+
+    &:visited {
+      color: theme.variable(primary);
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:active {
+      opacity: theme.emphasis(high);
+    }
+  }
+}
+
 ///
 /// Provides override CSS custom property declarations for the given style overrides.
 /// 
@@ -136,7 +160,8 @@
 /// ```
 /// 
 @function font-size-relative($scale) {
-  @return calc(#{core.get(font-size)} * #{$scale});
+  $scale-value: scale.value($scale);
+  @return calc(#{core.get(font-size)} * #{$scale-value});
 }
 
 @function _get-style-value($style, $token) {

package/styles/file-picker/_mixins.scss

@@ -48,7 +48,7 @@
         display: none;
       }
 
-      .forge-file-picker__button > button {
+      .forge-file-picker__button {
         @include button-compact;
       }
     }

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/_animations.scss

@@ -3,19 +3,21 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+@use './token-utils' as *;
+
 @mixin keyframes {
   @keyframes outward-grow {
     from {
       outline-width: 0;
     }
     to {
-      outline-width: var(--_active-width);
+      outline-width: #{token(active-width)};
     }
   }
 
   @keyframes outward-shrink {
     from {
-      outline-width: var(--_active-width);
+      outline-width: #{token(active-width)};
     }
   }
 
@@ -24,13 +26,13 @@
       border-width: 0;
     }
     to {
-      border-width: var(--_active-width);
+      border-width: #{token(active-width)};
     }
   }
 
   @keyframes inward-shrink {
     from {
-      border-width: var(--_active-width);
+      border-width: #{token(active-width)};
     }
   }
 }

package/styles/focus-indicator/_configuration.scss

@@ -3,21 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/focus-indicator/tokens';
+@use './token-utils' as *;
 
 @mixin configuration {
-  --_active-width: #{tokens.get(active-width)};
-  --_color: #{tokens.get(color)};
-  --_duration: #{tokens.get(duration)};
-  --_outward-offset:#{tokens.get(outward-offset)};
-  --_inward-offset: #{tokens.get(inward-offset)};
-  --_shape: #{tokens.get(shape)};
-  --_width: #{tokens.get(width)};
-  --_easing: #{tokens.get(easing)};
-  --_shape-start-start: #{tokens.get(shape-start-start)};
-  --_shape-start-end: #{tokens.get(shape-start-end)};
-  --_shape-end-start: #{tokens.get(shape-end-start)};
-  --_shape-end-end: #{tokens.get(shape-end-end)};
-  --_margin-block: #{tokens.get(offset-block)};
-  --_margin-inline: #{tokens.get(offset-inline)};
+  @include tokens;
 }