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

package/styles/list/list/_token-utils.scss

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

@@ -3,14 +3,40 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './configuration';
+@use './core';
+@use '../list-item';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :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
+  ));
+}
+
+//
+// Base
+//
+
+.forge-list {
+  @include configuration.configuration;
+}
+
+.forge-list {
+  @include core.base;
+}

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

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+$_host-tokens: [indent dense-indent];
+
+@mixin host {
+  @include tokens($includes: $_host-tokens);
+}
+
+@mixin configuration {
+  @include tokens($excludes: $_host-tokens);
+}

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

@@ -0,0 +1,195 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@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: #{token(background-color)};
+  border-radius: #{token(shape)};
+  -webkit-tap-highlight-color: transparent;
+  height: #{token(height)};
+  min-height: #{token(height)};
+  padding: #{token(padding)};
+  margin: #{token(margin)};
+  cursor: #{token(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: #{token(supporting-text-font-size)};
+  font-weight: #{token(supporting-text-font-weight)};
+  line-height: #{token(supporting-text-line-height)};
+  flex: 1;
+}
+
+@mixin selected {
+  color: #{token(selected-color)};
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: #{token(selected-opacity)};
+    background-color: #{token(selected-color)};
+  }
+}
+
+@mixin leading-selected {
+  color: #{token(leading-selected-color)};
+}
+
+@mixin trailing-selected {
+  color: #{token(trailing-selected-color)};
+}
+
+@mixin text-container-selected {
+  color: #{token(selected-color)};
+}
+
+@mixin leading-trailing-selected {
+  color: #{token(selected-color)};
+}
+
+@mixin supporting-text {
+  @include typography.style(body1);
+  @include typography.ellipse;
+
+  color: #{token(supporting-text-color)};
+  display: block;
+}
+
+@mixin supporting-text-selected {
+  color: #{token(selected-supporting-text-color)};
+}
+
+@mixin two-line {
+  height: #{token(two-line-height)};
+  min-height: #{token(two-line-height)};
+}
+
+@mixin three-line {
+  height: #{token(three-line-height)};
+  min-height: #{token(three-line-height)};
+}
+
+@mixin dense {
+  height: #{token(dense-one-line-height)};
+  min-height: #{token(dense-one-line-height)};
+}
+
+@mixin dense-text {
+  font-size: #{token(dense-font-size)};
+}
+
+@mixin dense-two-line {
+  height: #{token(dense-two-line-height)};
+  min-height: #{token(dense-two-line-height)};
+}
+
+@mixin dense-three-line {
+  height: #{token(dense-three-line-height)};
+  min-height: #{token(dense-three-line-height)};
+}
+
+@mixin indented {
+  margin-inline-start: #{token(indent)};
+}
+
+@mixin dense-indented {
+  margin-inline-start: #{token(dense-indent)};
+}
+
+@mixin avatar {
+  background-color: #{token(avatar-background-color)};
+  color: #{token(avatar-color)};
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  fill: currentColor;
+  margin-inline-start: #{token(avatar-margin-start)};
+  margin-inline-end: #{token(avatar-margin-end)};
+  min-width: #{token(avatar-size)};
+  min-height: #{token(avatar-size)};
+  border-radius: #{token(avatar-shape)};
+}
+
+@mixin leading-trailing-base {
+  color: #{token(supporting-text-color)};
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  fill: currentColor;
+}
+
+@mixin leading {
+  margin-inline-start: #{token(leading-margin-start)};
+  margin-inline-end: #{token(leading-margin-end)};
+}
+
+@mixin leading-selected {
+  color: #{token(leading-selected-color)};
+}
+
+@mixin leading-dense {
+  margin-inline-end: #{token(dense-leading-margin-end)};
+}
+
+@mixin trailing {
+  margin-inline-start: #{token(trailing-margin-start)};
+  margin-inline-end: #{token(trailing-margin-end)};
+}
+
+@mixin trailing-selected {
+  color: #{token(trailing-selected-color)};
+}
+
+@mixin trailing-dense {
+  margin-inline-start: #{token(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: #{token(disabled-cursor)};
+  opacity: #{token(disabled-opacity)};
+}

package/styles/list/list-item/_token-utils.scss

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

@@ -3,28 +3,215 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/typography' as mdc-typography;
-@use '../../theme';
-@use './mixins';
-@use '../../ripple/forge-ripple';
-@use '../../typography/mixins' as typography-mixins;
-@use './variables';
+@use './configuration';
+@use './core';
+@use '../../focus-indicator';
+@use '../../state-layer';
+@use '../../core/styles/shape';
+@use './token-utils' as *;
 
-@include mixins.core-styles;
+// Host
+:host {
+  @include configuration.host;
+}
 
 :host {
-  @include mixins.host;
+  @include core.container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-// This is here until Firefox supports :host-context()...
-:host([forge-drawer-context=true]) {
-  @include mixins.drawer-context-styles;
+// Non-interactive
+:host([non-interactive]) {
+  .forge-list-item {
+    @include core.non-interactive;
+  }
+}
+
+// Disabled
+:host([disabled]) {
+  .forge-list-item {
+    @include core.disabled;
+  }
+}
+
+// Two-line
+:host([two-line]) {
+  .forge-list-item {
+    @include core.two-line;
+  }
+}
+
+// Three-line
+:host([three-line]) {
+  .forge-list-item {
+    @include core.three-line;
+  }
 }
 
+// Dense
 :host([dense]) {
-  @include mdc-typography.typography(body2);
+  .forge-list-item {
+    @include core.dense;
+  }
+
+  .text-container {
+    @include core.dense-text;
+  }
+}
+
+// Dense indented
+:host([dense][indented]) {
+  @include core.dense-indented;
+}
+
+// Dense two-line
+:host([dense][two-line]) {
+  .forge-list-item {
+    @include core.dense-two-line;
+  }
+}
+
+// Dense three-line
+:host([dense][three-line]) {
+  .forge-list-item {
+    @include core.dense-three-line;
+  }
+}
+
+// Dense leading/trailing
+:host([selected]) {
+  .forge-list-item {
+    @include core.selected;
+
+    ::slotted([slot=leading]),
+    ::slotted([slot=trailing]) {
+      @include core.leading-trailing-selected;
+    }
+
+    ::slotted([slot=leading]) {
+      @include core.leading-selected;
+    }
+
+    ::slotted([slot=trailing]) {
+      @include core.trailing-selected;
+    }
+  }
+
+  .text-container {
+    @include core.text-container-selected;
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(selected-color)}
+    ));
+  }
+}
+
+// Indented
+:host([indented]) {
+  @include core.indented;
+}
+
+// Base
+.forge-list-item {
+  @include configuration.configuration;
+}
+
+.forge-list-item {
+  @include core.base;
+}
+
+// Anchor base
+a.forge-list-item {
+  @include core.anchor-link;
+}
+
+// Text container base
+.text-container {
+  @include core.text-container;
+}
+
+// Supporting text slotted elements
+slot[name=secondary-text],
+slot[name=subtitle],
+slot[name=tertiary-text],
+slot[name=tertiary-title] {
+  &::slotted(*) {
+    @include core.supporting-text;
+  }
+
+  :host([selected]) &::slotted(*) {
+    @include core.supporting-text-selected;
+  }
+}
+
+// Avatar slotted elements
+::slotted([slot=avatar]) {
+  @include core.avatar;
+}
+
+// Leading/trailing slotted elements
+::slotted([slot=leading]),
+::slotted([slot=trailing]) {
+  @include core.leading-trailing-base;
+}
+
+// Leading slotted elements
+::slotted([slot=leading]) {
+  @include core.leading;
+
+  :host([selected]) & {
+    @include core.leading-selected;
+  }
+
+  :host([dense]) & {
+    @include core.leading-dense;
+  }
+}
+
+// Trailing slotted elements
+::slotted([slot=trailing]) {
+  @include core.trailing;
+
+  :host([selected]) & {
+    @include core.trailing-selected;
+  }
+
+  :host([dense]) & {
+    @include core.trailing-dense;
+  }
+}
+
+// Wrap styles
+:host([wrap]) {
+  .forge-list-item {
+    @include core.wrap;
+  }
+
+  .text-container {
+    @include core.text-container-wrap;
+  }
+
+  slot[name=secondary-text],
+  slot[name=subtitle],
+  slot[name=tertiary-text],
+  slot[name=tertiary-title] {
+    &::slotted(*) {
+      @include core.supporting-text-wrap;
+    }
+  }
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    shape: shape.variable(medium) // TODO: use list-item token?
+  ));
+}
+
+forge-state-layer {
+  border-radius: inherit;
 }

package/styles/menu/menu.scss

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 :host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 :host([hidden]) {

package/styles/paginator/paginator.scss

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 @use './mixins';
-@use '../icon-button/forge-icon-button';
 
 @include mixins.core-styles;
 

package/styles/profile-card/profile-card.scss

@@ -5,7 +5,6 @@
  */
 @use './mixins';
 @use '../ripple/forge-ripple';
-@use '../button/forge-button';
 
 @include mixins.core-styles;
 

package/styles/slider/_configuration.scss

@@ -3,59 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/tokens/slider/tokens';
-
-// The max clip is reduced by 1 full tick display which is 2x the container
-// size to account for always showing the active track on the outside
-// edge of the last tick.
-$_active-track-max-clip: calc(100% - var(--_with-tick-marks-container-size) * 2);
-
-// When the start fraction is !0, add clipping by the tick container size
-$_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
-$_active-track-start-offset: calc(var(--_with-tick-marks-container-size) * $_start-fraction-not-zero);
-$_active-track-start-clip: calc($_active-track-start-offset + $_active-track-max-clip * var(--_start-fraction));
-
-// When the end fraction is !1, add clipping by the tick container size
-$_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
-$_active-track-end-offset: calc(var(--_with-tick-marks-container-size) * $_end-fraction-not-one);
-$_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-clip * (1 - var(--_end-fraction)));
+@use './token-utils' as *;
 
 @mixin configuration {
   // Internal state variables
-  --_start-fraction: 0;
-  --_end-fraction: 0;
-  --_tick-count: 100;
+  #{declare(start-fraction)}: 0;
+  #{declare(end-fraction)}: 0;
+  #{declare(tick-count)}: 100;
 
   // External state variables
-  --_track-height: #{tokens.get(track-height)};
-  --_active-track-color: #{tokens.get(active-track-color)};
-  --_active-track-height: #{tokens.get(active-track-height)};
-  --_active-track-shape: #{tokens.get(active-track-shape)};
-  --_disabled-active-track-color: #{tokens.get(disabled-active-track-color)};
-  --_disabled-active-track-opacity: #{tokens.get(disabled-active-track-opacity)};
-  --_disabled-handle-color: #{tokens.get(disabled-handle-color)};
-  --_disabled-inactive-track-color: #{tokens.get(disabled-inactive-track-color)};
-  --_disabled-inactive-track-opacity: #{tokens.get(disabled-inactive-track-opacity)};
-  --_focus-handle-color: #{tokens.get(focus-handle-color)};
-  --_handle-color: #{tokens.get(handle-color)};
-  --_handle-height: #{tokens.get(handle-height)};
-  --_handle-shape: #{tokens.get(handle-shape)};
-  --_handle-width: #{tokens.get(handle-width)};
-  --_hover-handle-color: #{tokens.get(hover-handle-color)};
-  --_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-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)};
-  --_with-overlap-handle-outline-width: #{tokens.get(with-overlap-handle-outline-width)};
-  --_with-tick-marks-active-container-color: #{tokens.get(with-tick-marks-active-container-color)};
-  --_with-tick-marks-container-size: #{tokens.get(with-tick-marks-container-size)};
-  --_with-tick-marks-disabled-active-container-color: #{tokens.get(with-tick-marks-disabled-active-container-color)};
-  --_with-tick-marks-disabled-inactive-container-color: #{tokens.get(with-tick-marks-disabled-inactive-container-color)};
-  --_with-tick-marks-inactive-container-color: #{tokens.get(with-tick-marks-inactive-container-color)};
+  @include tokens;
 }