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

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

@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@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';
+
+///
+/// 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, $exclude: [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)
+  );
+
+  -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};
+    }
+  }
+}
+
+///
+/// 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: core.get(font-family);
+  color: theme.variable(text-high);
+
+  @include style(body2);
+}
+
+///
+/// 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(#{core.get(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/_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)};
+}

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

@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/utils';
+@use '../../core/styles/typography';
+@use '../../core/styles/tokens/list/list-item/tokens';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, list-item);
+}
+
+@mixin container {
+  display: block;
+  outline: none;
+}
+
+@mixin base {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: none;
+  text-decoration: none;
+  background-color: var(--_background-color);
+  border-radius: var(--_shape);
+  -webkit-tap-highlight-color: transparent;
+  height: var(--_height);
+  min-height: var(--_height);
+  padding: var(--_padding);
+  margin: var(--_margin);
+  cursor: var(--_cursor);
+}
+
+@mixin anchor-link {
+  color: inherit;
+}
+
+@mixin text-container {
+  @include typography.style(body2, $exclude: [font-size font-weight line-height]);
+  @include typography.ellipse;
+
+  box-sizing: border-box;
+  font-size: var(--_supporting-text-font-size);
+  font-weight: var(--_supporting-text-font-weight);
+  line-height: var(--_supporting-text-line-height);
+  flex: 1;
+}
+
+@mixin selected {
+  color: var(--_selected-color);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: var(--_selected-opacity);
+    background-color: var(--_selected-color);
+  }
+}
+
+@mixin leading-selected {
+  color: var(--_leading-selected-color);
+}
+
+@mixin trailing-selected {
+  color: var(--_trailing-selected-color);
+}
+
+@mixin text-container-selected {
+  color: var(--_selected-color);
+}
+
+@mixin leading-trailing-selected {
+  color: var(--_selected-color);
+}
+
+@mixin supporting-text {
+  @include typography.style(body1);
+  @include typography.ellipse;
+
+  color: var(--_supporting-text-color);
+  display: block;
+}
+
+@mixin supporting-text-selected {
+  color: var(--_selected-supporting-text-color);
+}
+
+@mixin two-line {
+  height: var(--_two-line-height);
+  min-height: var(--_two-line-height);
+}
+
+@mixin three-line {
+  height: var(--_three-line-height);
+  min-height: var(--_three-line-height);
+}
+
+@mixin dense {
+  height: var(--_dense-one-line-height);
+  min-height: var(--_dense-one-line-height);
+}
+
+@mixin dense-text {
+  font-size: var(--_dense-font-size);
+}
+
+@mixin dense-two-line {
+  height: var(--_dense-two-line-height);
+  min-height: var(--_dense-two-line-height);
+}
+
+@mixin dense-three-line {
+  height: var(--_dense-three-line-height);
+  min-height: var(--_dense-three-line-height);
+}
+
+@mixin indented {
+  margin-inline-start: var(--_indent);
+}
+
+@mixin dense-indented {
+  margin-inline-start: var(--_dense-indent);
+}
+
+@mixin avatar {
+  background-color: var(--_avatar-background-color);
+  color: var(--_avatar-color);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  fill: currentColor;
+  margin-inline-start: var(--_avatar-margin-start);
+  margin-inline-end: var(--_avatar-margin-end);
+  min-width: var(--_avatar-size);
+  min-height: var(--_avatar-size);
+  border-radius: var(--_avatar-shape);
+}
+
+@mixin leading-trailing-base {
+  color: var(--_supporting-text-color);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  fill: currentColor;
+}
+
+@mixin leading {
+  margin-inline-start: var(--_leading-margin-start);
+  margin-inline-end: var(--_leading-margin-end);
+}
+
+@mixin leading-selected {
+  color: var(--_leading-selected-color);
+}
+
+@mixin leading-dense {
+  margin-inline-end: var(--_dense-leading-margin-end);
+}
+
+@mixin trailing {
+  margin-inline-start: var(--_trailing-margin-start);
+  margin-inline-end: var(--_trailing-margin-end);
+}
+
+@mixin trailing-selected {
+  color: var(--_trailing-selected-color);
+}
+
+@mixin trailing-dense {
+  margin-inline-start: var(--_dense-trailing-margin-start);
+}
+
+@mixin wrap {
+  height: auto;
+}
+
+@mixin text-container-wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+@mixin supporting-text-wrap {
+  @include text-container-wrap;
+}
+
+@mixin non-interactive {
+  cursor: initial;
+}
+
+@mixin disabled {
+  cursor: var(--_disabled-cursor);
+  opacity: var(--_disabled-opacity);
+}

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

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