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

package/styles/core/styles/tokens/typography/_tokens.subheading.scss

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../utils';
+@use './scale';
+@use './weight';
+@use './type-utils';
+@use './tokens.core' as core;
+
+$subheading1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(subheading1, font-size, '0875'),
+  font-weight: weight.value(regular),
+  line-height: type-utils.font-size-relative(subheading1, line-height, '1125')
+)) !default;
+
+$subheading2: utils.inherit-map($subheading1, (
+  font-size: type-utils.font-size-relative(subheading2, font-size, '1000'),
+  line-height: type-utils.font-size-relative(subheading2, line-height, '1250')
+)) !default;
+
+$subheading3: utils.inherit-map($subheading2, (
+  font-size: type-utils.font-size-relative(subheading3, font-size, '1125'),
+  line-height: type-utils.font-size-relative(subheading3, line-height, '1375')
+)) !default;
+
+$subheading4: utils.inherit-map($subheading3, (
+  font-size: type-utils.font-size-relative(subheading4, font-size, '1250'),
+  line-height: type-utils.font-size-relative(subheading4, line-height, '1500')
+)) !default;
+
+$subheading5: utils.inherit-map($subheading4, (
+  font-size: type-utils.font-size-relative(subheading5, font-size, '1500'),
+  line-height: type-utils.font-size-relative(subheading5, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1500'))
+)) !default;
+
+$subheading6: utils.inherit-map($subheading5, (
+  font-size: type-utils.font-size-relative(subheading6, font-size, '1750'),
+  line-height: type-utils.font-size-relative(subheading6, line-height, '2125'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1750'))
+)) !default;
+
+$subheading7: utils.inherit-map($subheading6, (
+  font-size: type-utils.font-size-relative(subheading7, font-size, '2000'),
+  line-height: type-utils.font-size-relative(subheading7, line-height, '2500'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.05, scale.value('2000'))
+)) !default;
+
+$subheading8: utils.inherit-map($subheading7, (
+  font-size: type-utils.font-size-relative(subheading8, font-size, '2250'),
+  line-height: type-utils.font-size-relative(subheading8, line-height, '2625'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.1, scale.value('2250'))
+)) !default;
+
+$tokens: (
+  subheading1: $subheading1,
+  subheading2: $subheading2,
+  subheading3: $subheading3,
+  subheading4: $subheading4,
+  subheading5: $subheading5,
+  subheading6: $subheading6,
+  subheading7: $subheading7,
+  subheading8: $subheading8
+) !default;

package/styles/core/styles/tokens/typography/_type-utils.scss

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:math';
+@use '../../core/config';
+@use './tokens.core' as core;
+@use './scale';
+
+$module: 'typography' !default;
+$token: 'scale' !default;
+
+///
+/// Creates a style value that is relative to the base font size for the given property.
+/// 
+/// This allows for typography styles to be scaled relative to the root font size, or
+/// relative to a specific CSS custom property if optionally applied. This is useful
+/// when embedding Forge in an application that adjusts the root `font-size` to something
+/// other than `16px` (browser default).
+///
+@function font-size-relative($style, $property, $scale) {
+  $scale-value: scale.value($scale);
+  $var-name: '--#{config.$prefix}-#{$module}-#{$style}-#{$property}-#{$token}';
+  @return calc(#{core.get(font-size)} * var(#{$var-name}, #{$scale-value}));
+}
+
+///
+/// Calculates the letter spacing value for the given tracking and font size.
+/// 
+/// @param {Number} $tracking - The tracking value.
+/// @param {Number} $font-size - The font size value.
+/// @return {String} - The letter spacing value.
+/// 
+@function calc-letter-spacing($tracking, $font-size) {
+  @return math.div($tracking, $font-size * 16) * 1em;
+}

package/styles/core/styles/tokens/typography/_weight.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+
+$font-weight: (
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700
+) !default;
+
+@function value($weight) {
+  @if not map.has-key($font-weight, $weight) {
+    @error 'Invalid font weight: "#{$weight}"';
+  }
+  @return map.get($font-weight, $weight);
+}

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

@@ -6,7 +6,11 @@
 @use 'sass:map';
 @use 'sass:list';
 @use '../core/config';
+@use '../utils';
+@use '../theme';
 @use '../tokens/typography/tokens';
+@use '../tokens/typography/scale';
+@use '../tokens/typography/tokens.core' as core;
 
 @forward '../tokens/typography/tokens';
 
@@ -20,7 +24,7 @@
 /// 
 /// Allows for providing an optional list of tokens to exclude from the output:
 /// ```scss
-/// @include style(title, [font-family font-size]);
+/// @include style(title, $exclude: [font-family font-size]);
 /// ```
 /// 
 @mixin style($style, $exclude: null) {
@@ -31,8 +35,7 @@
     line-height: _get-style-value($style, line-height),
     letter-spacing: _get-style-value($style, letter-spacing),
     text-transform: _get-style-value($style, text-transform),
-    text-decoration: _get-style-value($style, text-decoration),
-    color: _get-style-value($style, color)
+    text-decoration: _get-style-value($style, text-decoration)
   );
 
   -moz-osx-font-smoothing: grayscale;
@@ -45,14 +48,36 @@
   }
 }
 
+///
+/// Gets a CSS custom property declaration for a specific typography style token, with its token value as the fallback value.
+/// 
+@function variable($style, $token, $prefix: config.$prefix) {
+  @return _get-style-value($style, $token);
+}
+
+///
+/// Gets the value of a typography scale token.
+/// 
+@function scale($scale) {
+  @return #{scale.value($scale)}rem;
+}
+
+@mixin ellipse {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ///
 /// Sets base typography styles.
 /// 
 @mixin base {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-family: map.get(tokens.$base, font-family);
-  color: map.get(tokens.$base, color);
+  font-family: core.get(font-family);
+  color: theme.variable(text-high);
+
+  @include style(body2);
 }
 
 ///
@@ -66,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.
 /// 
@@ -111,7 +160,8 @@
 /// ```
 /// 
 @function font-size-relative($scale) {
-  @return calc(#{map.get(tokens.$base, 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/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;
 }

package/styles/focus-indicator/_core.scss

@@ -3,24 +3,19 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/utils';
-@use '../core/styles/tokens/focus-indicator/tokens';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, focus-indicator);
-}
+@use './token-utils' as *;
 
 @mixin base {
-  animation-delay: 0s, calc(var(--_duration) * 0.25);
-  animation-duration: calc(var(--_duration) * 0.25), calc(var(--_duration) * 0.75);
-  animation-timing-function: var(--_easing);
+  animation-delay: 0s, calc(#{token(duration)} * 0.25);
+  animation-duration: calc(#{token(duration)} * 0.25), calc(#{token(duration)} * 0.75);
+  animation-timing-function: #{token(easing)};
   box-sizing: border-box;
-  color: var(--_color);
+  color: #{token(color)};
   display: none;
   pointer-events: none;
   position: absolute;
-  margin-block: var(--_margin-block);
-  margin-inline: var(--_margin-inline);
+  margin-block: #{token(offset-block)};
+  margin-inline: #{token(offset-inline)};
 }
 
 @mixin active {
@@ -28,25 +23,25 @@
 }
 
 @mixin circular {
-  --_shape: 50%;
+  @include override(shape, 50%, value);
 }
 
 @mixin outward {
   animation-name: outward-grow, outward-shrink;
-  border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
-  border-end-start-radius: calc(var(--_shape-end-start) + var(--_outward-offset));
-  border-start-end-radius: calc(var(--_shape-start-end) + var(--_outward-offset));
-  border-start-start-radius: calc(var(--_shape-start-start) + var(--_outward-offset));
-  inset: calc(-1 * var(--_outward-offset));
-  outline: var(--_width) solid currentColor;
+  border-end-end-radius: calc(#{token(shape-end-end)} + #{token(outward-offset)});
+  border-end-start-radius: calc(#{token(shape-end-start)} + #{token(outward-offset)});
+  border-start-end-radius: calc(#{token(shape-start-end)} + #{token(outward-offset)});
+  border-start-start-radius: calc(#{token(shape-start-start)} + #{token(outward-offset)});
+  inset: calc(-1 * #{token(outward-offset)});
+  outline: #{token(width)} solid currentColor;
 }
 
 @mixin inward {
   animation-name: inward-grow, inward-shrink;
-  border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
-  border-end-start-radius: calc(var(--_shape-end-start) - var(--_inward-offset));
-  border-start-end-radius: calc(var(--_shape-start-end) - var(--_inward-offset));
-  border-start-start-radius: calc(var(--_shape-start-start) - var(--_inward-offset));
-  border: var(--_width) solid currentColor;
-  inset: var(--_inward-offset);
+  border-end-end-radius: calc(#{token(shape-end-end)} - #{token(inward-offset)});
+  border-end-start-radius: calc(#{token(shape-end-start)} - #{token(inward-offset)});
+  border-start-end-radius: calc(#{token(shape-start-end)} - #{token(inward-offset)});
+  border-start-start-radius: calc(#{token(shape-start-start)} - #{token(inward-offset)});
+  border: #{token(width)} solid currentColor;
+  inset: #{token(inward-offset)};
 }

package/styles/focus-indicator/_token-utils.scss

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

@@ -7,7 +7,10 @@
 @use './configuration';
 @use './core';
 
-/// Host styles
+//
+// Host
+//
+
 :host {
   display: contents;
 }
@@ -16,6 +19,23 @@
   display: none;
 }
 
+//
+// Base
+//
+
+.forge-focus-indicator {
+  @include configuration.configuration;
+}
+
+.forge-focus-indicator {
+  @include core.base;
+}
+
+
+//
+// States
+//
+
 :host([active]) {
   .forge-focus-indicator {
     @include core.active;
@@ -40,14 +60,16 @@
   }
 }
 
-/// Base styles
-.forge-focus-indicator {
-  @include configuration.configuration;
-  @include core.base;
-}
+//
+// Animations
+//
 
 @include animations.keyframes;
 
+//
+// Media Queries
+//
+
 @media (prefers-reduced-motion) {
   .forge-focus-indicator {
     animation: none;

package/styles/focus-indicator/index.scss

@@ -6,3 +6,4 @@
 @forward './animations';
 @forward './configuration';
 @forward './core';
+@forward './token-utils' show provide-theme;

package/styles/forge.scss

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

package/styles/icon-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/icon-button/_core.scss

@@ -0,0 +1,145 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin host {
+  display: #{token(display)};
+  position: relative;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin base {
+  position: relative;
+  z-index: 0;
+  
+  display: #{token(display)};
+  align-items: center;
+  justify-content: center;
+  gap: #{token(gap)};
+
+  box-sizing: border-box;
+  height: #{token(density-large-size)};
+  min-width: #{token(density-large-size)};
+  border: #{token(border)};
+  border-start-start-radius: #{token(shape-start-start)};
+  border-start-end-radius: #{token(shape-start-end)};
+  border-end-start-radius: #{token(shape-end-start)};
+  border-end-end-radius: #{token(shape-end-end)};
+  padding: #{token(padding)};
+  box-shadow: #{token(shadow)};
+
+  color: #{token(icon-color)};
+  background: #{token(background-color)};
+  font-size: #{token(icon-size)};
+  cursor: #{token(cursor)};
+  user-select: none;
+
+  transition-property: box-shadow, background;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin slotted-start-end {
+  font-size: #{token(icon-size)};
+  height: #{token(icon-size)};
+  width: #{token(icon-size)};
+  font-weight: inherit;
+}
+
+@mixin anchor-base {
+  position: absolute;
+  inset: 0;
+  text-decoration: none;
+}
+
+@mixin host-disabled {
+  cursor: #{token(disabled-cursor)};
+}
+
+@mixin disabled {
+  pointer-events: none;
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin outlined {
+  border-width: #{token(outlined-border-width)};
+  border-style: #{token(outlined-border-style)};
+  border-color: #{token(outlined-border-color)};
+}
+
+@mixin tonal {
+  @include override(icon-color, tonal-icon-color);
+  @include override(background-color, tonal-background-color);
+}
+
+@mixin filled {
+  @include override(icon-color, filled-icon-color);
+  @include override(background-color, filled-background-color);
+}
+
+@mixin raised {
+  @include override(shadow, raised-shadow);
+
+  &:hover {
+    @include override(raised-shadow, raised-hover-shadow);
+  }
+
+  &:active {
+    @include override(raised-shadow, raised-active-shadow);
+  }
+}
+
+@mixin raised-disabled {
+  @include override(raised-shadow, raised-disabled-shadow);
+}
+
+@mixin density-small {
+  @include override(size, density-small-size);
+  @include override(icon-size, density-small-icon-size);
+  @include override(padding, density-small-padding);
+}
+
+@mixin density-small-slotted {
+  font-size: #{token(density-small-icon-size)};
+}
+
+@mixin density-medium {
+  @include override(size, density-medium-size);
+  @include override(padding, density-medium-padding);
+}
+
+@mixin toggle-on-icon {
+  @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);
+}
+
+@mixin toggle-tonal {
+  @include override(background-color, tonal-toggle-background-color);
+}
+
+@mixin toggle-on-tonal {
+  @include override(icon-color, tonal-toggle-on-icon-color);
+  @include override(background-color, tonal-toggle-on-background-color);
+}
+
+@mixin toggle-filled {
+  @include override(icon-color, filled-toggle-icon-color);
+  @include override(background-color, filled-toggle-background-color);
+}
+
+@mixin toggle-on-filled {
+  @include override(icon-color, filled-toggle-on-icon-color);
+  @include override(background-color, filled-toggle-on-background-color);
+}

package/styles/icon-button/_token-utils.scss

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