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

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

@@ -4,222 +4,27 @@
  * 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: 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: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-primary)
+@use './tokens.body' as body;
+@use './tokens.display' as display;
+@use './tokens.heading' as heading;
+@use './tokens.label' as label;
+@use './tokens.subheading' as subheading;
+
+$tokens: utils.flatten(
+  display.$tokens,
+  heading.$tokens,
+  subheading.$tokens,
+  body.$tokens,
+  label.$tokens
 ) !default;
 
 ///
-/// Creates a style value that is relative to the base font size for the given property.
+/// Retrieves a typography style token value.
 /// 
-/// 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: 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: _font-size-relative(label, font-size, 0.75), // 12px
-  font-weight: map.get($base, font-weight),
-  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;
-
-/// 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,
-  button: $button
-) !default;
-
-///
-/// Returns a typography style token value.
+/// @param {String} $style - The typography style.
+/// @param {String} $token - The token within the provided style.
+/// @return {String} - The value of the style token.
 /// 
 @function get($style, $token) {
   $style-tokens: map.get($tokens, $style);

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);
 }
 
 ///
@@ -111,7 +136,7 @@
 /// ```
 /// 
 @function font-size-relative($scale) {
-  @return calc(#{map.get(tokens.$base, font-size)} * #{$scale});
+  @return calc(#{core.get(font-size)} * #{$scale});
 }
 
 @function _get-style-value($style, $token) {

package/styles/list/list/_configuration.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/list/list/tokens';
+
+@mixin configuration {
+  --_container-color: #{tokens.get(container-color)};
+  --_block-padding: #{tokens.get(block-padding)};
+  --_inline-padding: #{tokens.get(inline-padding)};
+}

package/styles/list/list/_core.scss

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/utils';
+@use '../../core/styles/tokens/list/list/tokens';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, list);
+}
+
+@mixin base {
+  display: block;
+  outline: none;
+  background-color: var(--_container-color);
+  padding: var(--_block-padding) var(--_inline-padding);
+  margin: 0;
+  border-radius: inherit;
+  min-width: inherit;
+}

package/styles/list/list/index.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './configuration';
+@forward './core';

package/styles/list/list/list.scss

@@ -3,14 +3,29 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
-
-@include mixins.core-styles;
+@use './configuration';
+@use './core';
+@use '../list-item';
 
 :host {
-  @include mixins.host;
+  display: block;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+:host([navlist]) {
+  @include list-item.provide-theme((
+    height: 40px,
+    margin: 4px 8px,
+    shape: 4px,
+    supporting-text-font-size: 0.875rem,
+    supporting-text-font-weight: 500
+  ));
+}
+
+.forge-list {
+  @include configuration.configuration;
+  @include core.base;
+}

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

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/list/list-item/tokens';
+
+@mixin host {
+  --_indent: #{tokens.get(indent)};
+  --_dense-indent: #{tokens.get(dense-indent)};
+}
+
+@mixin configuration {
+  // Base
+  --_background-color: #{tokens.get(background-color)};
+  --_shape: #{tokens.get(shape)};
+  --_padding: #{tokens.get(padding)};
+  --_margin: #{tokens.get(margin)};
+  --_height: #{tokens.get(height)};
+  --_dense-height: #{tokens.get(dense-height)};
+  --_cursor: #{tokens.get(cursor)};
+
+  // Supporting text
+  --_supporting-text-color: #{tokens.get(supporting-text-color)};
+  --_supporting-text-font-size: #{tokens.get(supporting-text-font-size)};
+  --_supporting-text-font-weight: #{tokens.get(supporting-text-font-weight)};
+  --_supporting-text-line-height: #{tokens.get(supporting-text-line-height)};
+
+  // Selected
+  --_selected-color: #{tokens.get(selected-color)};
+  --_selected-opacity: #{tokens.get(selected-opacity)};
+  --_selected-leading-color: #{tokens.get(selected-leading-color)};
+  --_selected-trailing-color: #{tokens.get(selected-trailing-color)};
+  --_selected-supporting-text-color: #{tokens.get(selected-supporting-text-color)};
+
+  // Disabled
+  --_disabled-opacity: #{tokens.get(disabled-opacity)};
+  --_disabled-cursor: #{tokens.get(disabled-cursor)};
+
+  // Line variants
+  --_one-line-height: #{tokens.get(one-line-height)};
+  --_two-line-height: #{tokens.get(two-line-height)};
+  --_three-line-height: #{tokens.get(three-line-height)};
+
+  // Dense
+  --_dense-one-line-height: #{tokens.get(dense-one-line-height)};
+  --_dense-two-line-height: #{tokens.get(dense-two-line-height)};
+  --_dense-three-line-height: #{tokens.get(dense-three-line-height)};
+  --_dense-font-size: #{tokens.get(dense-font-size)};
+
+  // Dense leading/trailing
+  --_dense-leading-margin-end: #{tokens.get(dense-leading-margin-end)};
+  --_dense-trailing-margin-start: #{tokens.get(dense-trailing-margin-start)};
+
+  // Leading
+  --_leading-margin-start: #{tokens.get(leading-margin-start)};
+  --_leading-margin-end: #{tokens.get(leading-margin-end)};
+  --_leading-selected-color: #{tokens.get(leading-selected-color)};
+
+  // Trailing
+  --_trailing-margin-start: #{tokens.get(trailing-margin-start)};
+  --_trailing-margin-end: #{tokens.get(trailing-margin-end)};
+  --_trailing-selected-color: #{tokens.get(trailing-selected-color)};
+
+  // Avatar
+  --_avatar-background-color: #{tokens.get(avatar-background-color)};
+  --_avatar-color: #{tokens.get(avatar-color)};
+  --_avatar-shape: #{tokens.get(avatar-shape)};
+  --_avatar-margin-start: #{tokens.get(avatar-margin-start)};
+  --_avatar-margin-end: #{tokens.get(avatar-margin-end)};
+  --_avatar-size: #{tokens.get(avatar-size)};
+}