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

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';

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

@@ -3,28 +3,208 @@
  * 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';
-
-@include mixins.core-styles;
+@use './configuration';
+@use './core';
+@use '../../focus-indicator';
+@use '../../state-layer';
+@use '../../core/styles/shape';
 
+// Host styles
 :host {
-  @include mixins.host;
+  @include configuration.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: var(--_selected-color)
+    ));
+  }
+}
+
+// Indented
+:host([indented]) {
+  @include core.indented;
+}
+
+// Base
+.forge-list-item {
+  @include configuration.configuration;
+  @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)
+  ));
+}
+
+forge-state-layer {
+  border-radius: inherit;
 }

package/styles/slider/_core.scss

@@ -103,13 +103,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 @mixin track-inactive {
   block-size: var(--_inactive-track-height);
   border-radius: var(--_inactive-track-shape);
-
-  // TODO: remove this and the @supports check below when we're confident that color-mix is more widely supported
-  background-color: var(--_inactive-track-color-fallback);
-
-  @supports (background-color: color-mix(in srgb, red 50%, transparent)) {
-    background-color: var(--_inactive-track-color);
-  }
+  background-color: var(--_inactive-track-color);
 }
 
 @mixin track-active-disabled {
@@ -205,7 +199,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handle-label {
-  @include typography.style(label, [color font-weight]);
+  @include typography.style(label, $exclude: [font-weight]);
 
   position: absolute;
   box-sizing: border-box;

package/styles/slider/slider.scss

@@ -136,11 +136,11 @@
 
     &.tickmarks {
       &::before {
-        @include core.tickmarks-active-disabled;
+        @include core.tickmarks-inactive-disabled;
       }
 
       &::after {
-        @include core.tickmarks-inactive-disabled;
+        @include core.tickmarks-active-disabled;
       }
     }
   }

package/styles/switch/_configuration.scss

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/switch/tokens' as switch-tokens;
+
+@mixin configuration {
+  // Shared
+  --_handle-size: #{switch-tokens.get(handle-size)};
+  --_handle-scale: #{switch-tokens.get(handle-scale)};
+  --_handle-elevation: #{switch-tokens.get(handle-elevation)};
+  --_track-border-width: #{switch-tokens.get(track-border-width)};
+  --_track-border-color: #{switch-tokens.get(track-border-color)};
+  --_icon-color: #{switch-tokens.get(icon-color)};
+  --_icon-scale: #{switch-tokens.get(icon-scale)};
+  --_state-layer-size: #{switch-tokens.get(state-layer-size)};
+  --_state-layer-dense-size: #{switch-tokens.get(state-layer-dense-size)};
+
+  // Handle
+  --_handle-on-color: #{switch-tokens.get(handle-on-color)};
+  --_handle-off-color: #{switch-tokens.get(handle-off-color)};
+  --_handle-width: #{switch-tokens.get(handle-width)};
+  --_handle-height: #{switch-tokens.get(handle-height)};
+  --_handle-on-scale: #{switch-tokens.get(handle-on-scale)};
+  --_handle-off-scale: #{switch-tokens.get(handle-off-scale)};
+  --_handle-shape: #{switch-tokens.get(handle-shape)};
+  --_handle-on-elevation: #{switch-tokens.get(handle-on-elevation)};
+  --_handle-off-elevation: #{switch-tokens.get(handle-off-elevation)};
+
+  // Track
+  --_track-on-color: #{switch-tokens.get(track-on-color)};
+  --_track-off-color: #{switch-tokens.get(track-off-color)};
+  --_track-width: #{switch-tokens.get(track-width)};
+  --_track-height: #{switch-tokens.get(track-height)};
+  --_track-shape: #{switch-tokens.get(track-shape)};
+  --_track-on-border-width: #{switch-tokens.get(track-on-border-width)};
+  --_track-off-border-width: #{switch-tokens.get(track-off-border-width)};
+  --_track-on-border-color: #{switch-tokens.get(track-on-border-color)};
+  --_track-off-border-color: #{switch-tokens.get(track-off-border-color)};
+
+  // Icon
+  --_icon-on-color: #{switch-tokens.get(icon-on-color)};
+  --_icon-off-color: #{switch-tokens.get(icon-off-color)};
+  --_icon-on-size: #{switch-tokens.get(icon-on-size)};
+  --_icon-off-size: #{switch-tokens.get(icon-off-size)};
+  --_icon-on-scale: #{switch-tokens.get(icon-on-scale)};
+  --_icon-off-scale: #{switch-tokens.get(icon-off-scale)};
+
+  // Label
+  --_gap: #{switch-tokens.get(gap)};
+  --_justify: #{switch-tokens.get(justify)};
+  --_direction: #{switch-tokens.get(direction)};
+
+  // State layer
+  --_state-layer-width: #{switch-tokens.get(state-layer-width)};
+  --_state-layer-height: #{switch-tokens.get(state-layer-height)};
+  --_state-layer-on-color: #{switch-tokens.get(state-layer-on-color)};
+  --_state-layer-off-color: #{switch-tokens.get(state-layer-off-color)};
+
+  // Dense
+  --_state-layer-dense-width: #{switch-tokens.get(state-layer-dense-width)};
+  --_state-layer-dense-height: #{switch-tokens.get(state-layer-dense-height)};
+
+  // Disabled
+  --_disabled-opacity: #{switch-tokens.get(disabled-opacity)};
+
+  // Active
+  --_handle-active-on-color: #{switch-tokens.get(handle-active-on-color)};
+  --_handle-active-off-color: #{switch-tokens.get(handle-active-off-color)};
+  --_handle-active-scale: #{switch-tokens.get(handle-active-scale)};
+  --_handle-active-on-scale: #{switch-tokens.get(handle-active-on-scale)};
+  --_handle-active-off-scale: #{switch-tokens.get(handle-active-off-scale)};
+  --_handle-active-elevation: #{switch-tokens.get(handle-active-elevation)};
+  --_handle-active-on-elevation: #{switch-tokens.get(handle-active-on-elevation)};
+  --_handle-active-off-elevation: #{switch-tokens.get(handle-active-off-elevation)};
+
+  --_track-active-on-color: #{switch-tokens.get(track-active-on-color)};
+  --_track-active-off-color: #{switch-tokens.get(track-active-off-color)};
+  --_track-active-on-border-width: #{switch-tokens.get(track-active-on-border-width)};
+  --_track-active-off-border-width: #{switch-tokens.get(track-active-off-border-width)};
+  --_track-active-on-border-color: #{switch-tokens.get(track-active-on-border-color)};
+  --_track-active-off-border-color: #{switch-tokens.get(track-active-off-border-color)};
+
+  --_icon-active-on-color: #{switch-tokens.get(icon-active-on-color)};
+  --_icon-active-off-color: #{switch-tokens.get(icon-active-off-color)};
+  --_icon-active-scale: #{switch-tokens.get(icon-active-scale)};
+  --_icon-active-on-scale: #{switch-tokens.get(icon-active-on-scale)};
+  --_icon-active-off-scale: #{switch-tokens.get(icon-active-off-scale)};
+
+  // Animation
+  --_animation-duration: #{switch-tokens.get(animation-duration)};
+  --_animation-timing: #{switch-tokens.get(animation-timing)};
+  --_active-animation-timing: #{switch-tokens.get(active-animation-timing)};
+}