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

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

@@ -4,70 +4,233 @@
  * License: Apache-2.0
  */
 @use 'sass:map';
+@use 'sass:list';
+@use '../../core/config';
 @use '../../theme';
+@use '../../utils';
 
+/// Base typography style values
 $font-family: 'Roboto', sans-serif !default;
+$font-size: 1rem !default; // 16px
 
+/// The Forge typography scale system
+$font-scale: (
+  12: 0.75,
+  14: 0.875,
+  16: 1,
+  18: 1.125,
+  20: 1.25,
+  22: 1.375,
+  24: 1.5,
+  28: 1.75,
+  32: 2,
+  34: 2.125,
+  36: 2.25,
+  40: 2.5,
+  42: 2.625,
+  44: 2.75,
+  48: 3,
+  56: 3.5,
+  64: 4,
+) !default;
+
+/// Available font weights for Forge typography styles
+$font-weight: (
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700
+) !default;
+
+/// The base typography styles that other styles inherit from.
 $base: (
-  font-family: $font-family,
-  font-size: 16px,
-  font-weight: 400,
+  font-family: var(--#{config.$prefix}-typography-font-family, #{$font-family}),
+  font-size: var(--#{config.$prefix}-typography-font-size, #{$font-size}),
+  font-weight: map.get($font-weight, regular),
   line-height: normal,
   letter-spacing: normal,
-  text-transform: none,
-  text-decoration: none,
+  text-transform: inherit,
+  text-decoration: inherit,
   color: theme.variable(text-primary)
 ) !default;
 
-$title: (
-  font-family: map.get($base, font-family),
-  // font-size: typography.font-size(title) var(--forge-typography-title-font-size, calc(var(--forge-typography-root-font-size, 16px) * 1.5)),
-  font-weight: map.get($base, font-weight),
-  line-height: 24px,
+///
+/// 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) {
+  @return calc(#{map.get($base, font-size)} * var(--#{config.$prefix}-typography-#{$style}-#{$property}-scale, #{$scale}));
+}
+
+/// Heading
+$heading-01: utils.inherit-map($base, (
+  font-size: _font-size-relative(heading-01, font-size, map.get($font-scale, 14)),
+  font-weight: map.get($font-weight, medium),
+  line-height: _font-size-relative(heading-01, line-height, map.get($font-scale, 20)),
+  letter-spacing: 0.0071428571em
+)) !default;
+
+$heading-02: utils.inherit-map($heading-01, (
+  font-size: _font-size-relative(heading-02, font-size, map.get($font-scale, 16)),
+  line-height: _font-size-relative(heading-02, line-height, map.get($font-scale, 20)),
+  letter-spacing: 0.009375em
+)) !default;
+
+$heading-03: utils.inherit-map($heading-02, (
+  font-size: _font-size-relative(heading-03, font-size, map.get($font-scale, 18)),
+  line-height: _font-size-relative(heading-03, line-height, map.get($font-scale, 24)),
+  letter-spacing: 0.0125em
+)) !default;
+
+$heading-04: utils.inherit-map($heading-03, (
+  font-size: _font-size-relative(heading-04, font-size, map.get($font-scale, 20)),
+  line-height: _font-size-relative(heading-04, line-height, map.get($font-scale, 28)),
+  letter-spacing: normal
+)) !default;
+
+$heading-05: utils.inherit-map($heading-04, (
+  font-size: _font-size-relative(heading-05, font-size, map.get($font-scale, 24)),
+  line-height: _font-size-relative(heading-05, line-height, map.get($font-scale, 32)),
+)) !default;
+
+$heading-06: utils.inherit-map($heading-05, (
+  font-size: _font-size-relative(heading-06, font-size, map.get($font-scale, 28)),
+  line-height: _font-size-relative(heading-06, line-height, map.get($font-scale, 36)),
+)) !default;
+
+/// Display
+$display-01: utils.inherit-map($base, (
+  font-size: _font-size-relative(display-01, font-size, map.get($font-scale, 24)),
+  font-weight: map.get($font-weight, light),
+  line-height: _font-size-relative(display-01, line-height, map.get($font-scale, 30)),
+)) !default;
+
+$display-02: utils.inherit-map($display-01, (
+  font-size: _font-size-relative(display-02, font-size, map.get($font-scale, 28)),
+  line-height: _font-size-relative(display-02, line-height, map.get($font-scale, 34)),
+)) !default;
+
+$display-03: utils.inherit-map($display-02, (
+  font-size: _font-size-relative(display-03, font-size, map.get($font-scale, 32)),
+  line-height: _font-size-relative(display-03, line-height, map.get($font-scale, 40)),
+)) !default;
+
+$display-04: utils.inherit-map($display-03, (
+  font-size: _font-size-relative(display-04, font-size, map.get($font-scale, 36)),
+  line-height: _font-size-relative(display-04, line-height, map.get($font-scale, 44)),
+)) !default;
+
+$display-05: utils.inherit-map($display-04, (
+  font-size: _font-size-relative(display-05, font-size, map.get($font-scale, 40)),
+  line-height: _font-size-relative(display-05, line-height, map.get($font-scale, 48)),
+)) !default;
+
+$display-06: utils.inherit-map($display-05, (
+  font-size: _font-size-relative(display-06, font-size, map.get($font-scale, 48)),
+  line-height: _font-size-relative(display-06, line-height, map.get($font-scale, 64)),
+)) !default;
+
+/// Title
+$title: utils.inherit-map($heading-03, (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(title, font-size, map.get($font-scale, 20)),
+  font-weight: map.get($font-weight, regular),
+  line-height: _font-size-relative(title, line-height, map.get($font-scale, 24)),
   letter-spacing: 0.0125em,
+)) !default;
+
+/// Subtitle
+$subtitle: (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(subtitle, font-size, map.get($font-scale, 16)),
+  font-weight: map.get($base, font-weight),
+  line-height: _font-size-relative(subtitle, line-height, map.get($font-scale, 28)),
+  letter-spacing: 0.009375em,
   text-transform: inherit,
   text-decoration: inherit,
-  color: map.get($base, color)
+  color: theme.variable(text-secondary)
 ) !default;
 
+$body-01: utils.inherit-map($base, (
+  font-size: _font-size-relative(body, font-size, map.get($font-scale, 14)),
+  line-height: _font-size-relative(body, line-height, map.get($font-scale, 20)),
+  letter-spacing: 0.0178571429em
+)) !default;
+
+$body-02: utils.inherit-map($base, (
+  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
+  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
+  letter-spacing: 0.03125em
+)) !default;
+
+$body: utils.inherit-map($body-01, (
+  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
+  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
+)) !default;
+
+/// Label
 $label: (
-  font-family: map.get($base, font-family),
-  font-size: 12px,
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(label, font-size, 0.75), // 12px
   font-weight: map.get($base, font-weight),
-  line-height: 20px,
+  line-height: _font-size-relative(label, line-height, 1.25), // 20px
   letter-spacing: 0.0333333333em,
   text-transform: inherit,
   text-decoration: inherit,
   color: map.get($base, color)
 ) !default;
 
-// $caption: (
-//   ...$label,
-//   font-size: 10px,
-// ) !default;
+/// Button
+$button: (
+  font-family: #{map.get($base, font-family)},
+  font-size: _font-size-relative(button, font-size, 0.875), // 14px
+  font-weight: 500,
+  line-height: _font-size-relative(button, line-height, 2.25), // 36px
+  letter-spacing: 0.0892857143em,
+  text-transform: inherit,
+  text-decoration: inherit,
+  color: map.get($base, color)
+) !default;
 
 $tokens: (
+  heading-01: $heading-01,
+  heading-02: $heading-02,
+  heading-03: $heading-03,
+  heading-04: $heading-04,
+  heading-05: $heading-05,
+  heading-06: $heading-06,
+  display-01: $display-01,
+  display-02: $display-02,
+  display-03: $display-03,
+  display-04: $display-04,
+  display-05: $display-05,
+  display-06: $display-06,
   title: $title,
+  subtitle: $subtitle,
+  body-01: $body-01,
+  body-02: $body-02,
+  body: $body,
   label: $label,
-  helper-text: $label
+  button: $button
 ) !default;
 
+///
+/// Returns a typography style token value.
+/// 
+@function get($style, $token) {
+  $style-tokens: map.get($tokens, $style);
 
-// @mixin typography($style) {
-//   $typography-tokens: map.get($tokens, $style);
-
-//   @if not $typography-tokens {
-//     @error 'Invalid typography style: "#{$style}"';
-//   }
+  @if not $style-tokens {
+    @error 'Invalid typography style: "#{$style}"';
+  }
 
-//   /// Use the `font` style instead??
+  @if not map.get($style-tokens, $token) {
+    @error 'Invalid typography token for style "#{$style}" using token "#{$token}"';
+  }
 
-//   font-family: var(--forge-typography-#{$style}-font-family, map.get($typography-tokens, font-family));
-//   font-size: var(--forge-typography-#{$style}-font-size, map.get($typography-tokens, font-size));
-//   font-weight: var(--forge-typography-#{$style}-font-weight, map.get($typography-tokens, font-weight));
-//   line-height: var(--forge-typography-#{$style}-line-height, map.get($typography-tokens, line-height));
-//   letter-spacing: var(--forge-typography-#{$style}-letter-spacing, map.get($typography-tokens, letter-spacing));
-//   text-transform: var(--forge-typography-#{$style}-text-transform, map.get($typography-tokens, text-transform));
-//   text-decoration: var(--forge-typography-#{$style}-text-decoration, map.get($typography-tokens, text-decoration));
-//   color: var(--forge-typography-#{$style}-color, map.get($typography-tokens, color));
-// }
+  @return map.get($style-tokens, $token);
+}

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

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/config';
+@use '../tokens/typography/tokens';
+
+@forward '../tokens/typography/tokens';
+
+///
+/// Emits the typography styles for the given style.
+/// 
+/// Example:
+/// ```scss
+/// @include style(title);
+/// ```
+/// 
+/// Allows for providing an optional list of tokens to exclude from the output:
+/// ```scss
+/// @include style(title, [font-family font-size]);
+/// ```
+/// 
+@mixin style($style, $exclude: null) {
+  $styles: (
+    font-family: _get-style-value($style, font-family),
+    font-size: _get-style-value($style, font-size),
+    font-weight: _get-style-value($style, font-weight),
+    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)
+  );
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  @each $key, $value in $styles {
+    @if not $exclude or not list.index($exclude, $key) {
+      #{$key}: #{$value};
+    }
+  }
+}
+
+///
+/// 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);
+}
+
+///
+/// Generates helper classes for each typography style/role.
+/// 
+@mixin classes {
+  @each $style, $tokens in tokens.$tokens {
+    .#{config.$prefix}-typography--#{$style} {
+      @include style($style);
+    }
+  }
+}
+
+///
+/// Provides override CSS custom property declarations for the given style overrides.
+/// 
+/// Example:
+/// ```
+/// .my-class {
+///   @include provide(title, (font-family: Arial, font-size: 20px));
+/// }
+/// ```
+/// 
+/// This will output:
+/// ```
+/// .my-class {
+///   --forge-typography-title-font-family: Arial;
+///   --forge-typography-title-font-size: 20px;
+/// }
+/// ```
+/// 
+@mixin provide($style, $overrides) {
+  $style-tokens: map.get(tokens.$tokens, $style);
+  @each $key, $value in $overrides {
+    @if not map.get($style-tokens, $key) {
+      @error 'Invalid token "#{$key}" for style "#{$style}"';
+    }
+    --#{config.$prefix}-typography-#{$key}: #{$value};
+  }
+}
+
+///
+/// Creates a calculated style value that will scale relative to the root font size.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   padding: typography.font-size-relative(2);
+/// }
+/// 
+/// // Outputs
+/// .my-class {
+///   padding: calc(var(--forge-typography-font-size, 1rem) * 2);
+/// }
+/// 
+/// ```
+/// 
+@function font-size-relative($scale) {
+  @return calc(#{map.get(tokens.$base, font-size)} * #{$scale});
+}
+
+@function _get-style-value($style, $token) {
+  @return var(--#{config.$prefix}-typography-#{$style}-#{$token}, #{tokens.get($style, $token)});
+}

package/styles/focus-indicator/_core.scss

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/utils';
+@use '../core/styles/utils';
 @use '../core/styles/tokens/focus-indicator/tokens';
 
 @mixin provide-theme($theme) {

package/styles/linear-progress/_core.scss

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use '../core/styles/tokens/utils';
+@use '../core/styles/utils';
 @use '../core/styles/tokens/linear-progress/tokens';
 @use '../theme';
 

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

@@ -77,10 +77,17 @@
       ::slotted(.forge-list-item__title) {
         @include mdc-typography.typography(body2);
       }
+
+      &.forge-list-item--two-line {
+        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-two-line-height);
+      }
+
+      &.forge-list-item--three-line {
+        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-three-line-height);
+      }
     }
   
     &--wrap {
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
       @include theme.css-custom-property(height, --forge-list-item-height, auto);
 
       ::slotted([slot=title]),
@@ -348,14 +355,17 @@
 }
 
 @mixin two-line() {
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height);
 }
 
 @mixin three-line() {
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height);
 }
 
 @mixin dense() {
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-single-line-height);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$dense-height);
 }
 

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

@@ -12,6 +12,15 @@ $drawer-inline-padding: #{math.div($inline-padding, 2)};
 /// The default height for a single line list item.
 $single-line-height: #{48px - $block-padding * 2} !default;
 
+/// The default height for a single line list item.
+$dense-single-line-height: #{32px - $block-padding * 2} !default;
+
+/// The default height for a two line list item.
+$dense-two-line-height: #{56px - $block-padding * 2} !default;
+
+/// The default height for a three line list item.
+$dense-three-line-height: #{72px - $block-padding * 2} !default;
+
 /// The default min-height for a single line list item in a drawer context.
 $drawer-single-line-height: 40px !default;
 

package/styles/slider/_configuration.scss

@@ -45,9 +45,10 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
   --_inactive-track-color: #{tokens.get(inactive-track-color)};
   --_inactive-track-height: #{tokens.get(inactive-track-height)};
   --_inactive-track-shape: #{tokens.get(inactive-track-shape)};
+  --_label-container-shape: #{tokens.get(label-container-shape)};
   --_label-container-color: #{tokens.get(label-container-color)};
   --_label-container-height: #{tokens.get(label-container-height)};
-  --_label-label-text-color: #{tokens.get(label-label-text-color)};
+  --_label-text-color: #{tokens.get(label-text-color)};
   --_pressed-handle-color: #{tokens.get(pressed-handle-color)};
   --_state-layer-size: #{tokens.get(state-layer-size)};
   --_with-overlap-handle-outline-color: #{tokens.get(with-overlap-handle-outline-color)};

package/styles/slider/_core.scss

@@ -3,10 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/utils';
+@use '../core/styles/utils';
 @use '../core/styles/tokens/slider/tokens';
 @use '../core/styles/elevation';
-@use '../typography';
+@use '../core/styles/typography';
+@use '../core/styles/animation';
 
 @mixin provide-theme($theme) {
   @include utils.provide(tokens.$tokens, $theme, slider);
@@ -204,22 +205,22 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handle-label {
-  @include typography.typography(caption);
+  @include typography.style(label, [color font-weight]);
 
   position: absolute;
   box-sizing: border-box;
   display: grid;
   padding: 4px;
   place-items: center;
-  border-radius: 9999px;
-  color: var(--_label-label-text-color);
+  border-radius: var(--_label-container-shape);
+  color: var(--_label-text-color);
   font-weight: 500;
   white-space: nowrap;
   inset-block-end: 100%;
   min-inline-size: var(--_label-container-height);
   min-block-size: var(--_label-container-height);
   background: var(--_label-container-color);
-  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
+  transition: transform animation.variable(duration-short2) animation.variable(easing-standard);
   transform-origin: center bottom;
   transform: scale(0);
 }

package/styles/state-layer/_core.scss

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/utils';
+@use '../core/styles/utils';
 @use '../core/styles/tokens/state-layer/tokens';
 @use './configuration';
 

package/styles/table/_mixins.scss

@@ -394,7 +394,7 @@
 @mixin head-cell-text-sorted() {
   @include mdc-theme.property(color, text-primary-on-background);
 
-  font-weight: 600 !important;
+  font-weight: 700 !important;
 }
 
 /// Creates styles for the sort icon within the table head cells.
@@ -407,7 +407,7 @@
   margin-left: 5px;
   transition: transform 250ms;
   display: none !important;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 /// The active sort icon styles.

package/styles/tabs/tab/_core.scss

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/utils';
+@use '../../core/styles/utils';
 @use '../../core/styles/tokens/tabs/tab/tokens';
-@use '../../typography';
+@use '../../core/styles/typography';
+@use '../../core/styles/spacing';
 
 @mixin provide-theme($theme) {
   @include utils.provide(tokens.$tokens, $theme, tab);
@@ -24,7 +25,7 @@
 }
 
 @mixin tab {
-  @include typography.typography(button);
+  @include typography.style(button);
 
   display: inline-flex;
   align-items: center;
@@ -123,11 +124,11 @@
   white-space: nowrap;
   transition: 150ms color linear;
 
-  $_content-padding: 8px;
+  $_content-padding: spacing.variable('100');
   max-height: calc(var(--_content-height) + 2 * $_content-padding);
   min-height: var(--_content-height);
   padding: $_content-padding calc(2 * $_content-padding);
-  gap: 4px;
+  gap: spacing.variable('050');
 }
 
 @mixin label {

package/styles/tabs/tab/tab.scss

@@ -63,6 +63,14 @@
   }
 }
 
+:host([selected]:not([vertical])) {
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      offset-block: 0 calc(var(--_active-indicator-height) + 1px)
+    ));
+  }
+}
+
 :host([selected]:focus) {
   .forge-tab {
     @include core.selected-focus;
@@ -111,6 +119,12 @@
       @include core.vertical-indicator;
     }
   }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      offset-inline: 0 calc(var(--_active-indicator-height) + 1px)
+    ));
+  }
 }
 
 :host([vertical][secondary]) {

package/styles/tabs/tab-bar/_core.scss

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/utils';
+@use '../../core/styles/utils';
 @use '../../core/styles/tokens/tabs/tab-bar/tokens';
 
 @mixin provide-theme($theme) {

package/styles/{core/styles/tokens/theme/_shape.scss → typography/forge-typography-legacy.scss}

@@ -3,11 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$shapes: (
-  small: 4px,
-  medium: 8px,
-  large: 0,
-  round: 50%
-);
-
+@use './mixins';
 
+@include mixins.core-styles;

package/styles/typography/forge-typography.scss

@@ -3,7 +3,15 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './mixins';
+@use '../core/styles/typography';
 
-@include mixins.core-styles;
+// TODO: remove when Forge has been fully converted to use the 3.0 typography system
+@use './forge-typography-legacy';
+
+/// Apply base typography styles to the body element by default
+body {
+  @include typography.base;
+}
+
+/// Create helper classes for each Forge typography style/role
+@include typography.classes;

package/styles/utils/_mixins-core.scss

@@ -10,7 +10,7 @@
   width: 100%;
 }
 
-@mixin body-base() {
+@mixin body-base {
   @include mdc-theme.property(background-color, background);
 
   margin: 0;