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

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/_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);
@@ -102,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 {
@@ -204,22 +199,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, $exclude: [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/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/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/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)};
+}

package/styles/switch/_core.scss

@@ -0,0 +1,255 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use '../core/styles/utils';
+@use '../core/styles/tokens/switch/tokens';
+
+// The tallest element may be absolutely positioned so the container needs to
+// be manually sized to match.
+$_container-block-size: max(var(--_handle-height), var(--_track-height), var(--_current-state-layer-height));
+
+// The effective track border radius, for use in other calculations.
+$_track-border-radius: calc(var(--_track-height) / 2);
+
+// Returns the wider of the handle width and state layer width.
+$_max-handle-inline-size: max(var(--_handle-width), var(--_current-state-layer-width));
+
+// Offsets the track to place the center of its border caps at the center of
+// the handle's off and on positions.
+$_track-margin-inline: calc(#{$_max-handle-inline-size} / 2 - #{$_track-border-radius});
+
+// The x translation of the handle in its on state.
+$_handle-on-translate: calc(var(--_track-width) - #{$_track-border-radius} * 2);
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, switch);
+}
+
+@mixin host {
+  display: inline-block;
+
+  cursor: pointer;
+}
+
+@mixin host-disabled {
+  opacity: var(--_disabled-opacity);
+
+  cursor: not-allowed;
+}
+
+@mixin switch {
+  position: relative;
+  flex-direction: var(--_direction);
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: var(--_justify);
+  gap: var(--_gap);
+
+  display: flex;
+
+  cursor: unset;
+}
+
+@mixin input {
+  position: absolute;
+  z-index: 1;
+
+  appearance: none;
+
+  outline: none;
+  margin: 0;
+  inline-size: 100%;
+  block-size: 100%;
+
+  cursor: unset;
+}
+
+@mixin container {
+  position: relative;
+  align-items: center;
+
+  display: flex;
+
+  block-size: #{$_container-block-size};
+}
+
+@mixin track {
+  transition-property: background-color, border-color, border-width;
+  transition-duration: var(--_animation-duration);
+  transition-timing-function: var(--_animation-timing);
+
+  box-sizing: border-box;
+  margin-inline: #{$_track-margin-inline};
+  border-width: var(--_track-off-border-width);
+  border-color: var(--_track-off-border-color);
+  border-style: solid;
+  border-radius: var(--_track-shape);
+  inline-size: var(--_track-width);
+  block-size: var(--_track-height);
+
+  background-color: var(--_track-off-color);
+}
+
+@mixin track-on {
+  border-width: var(--_track-on-border-width);
+  border-color: var(--_track-on-border-color);
+
+  background-color: var(--_track-on-color);
+}
+
+@mixin track-active {
+  border-width: var(--_track-active-off-border-width);
+  border-color: var(--_track-active-off-border-color);
+
+  background-color: var(--_track-active-off-color);
+}
+
+@mixin track-active-on {
+  border-width: var(--_track-active-on-border-width);
+  border-color: var(--_track-active-on-border-color);
+
+  background-color: var(--_track-active-on-color);
+}
+
+@mixin handle {
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+
+  display: flex;
+
+  transition-property: translate;
+  transition-duration: var(--_animation-duration);
+  transition-timing-function: var(--_animation-timing);
+
+  border-radius: var(--_handle-shape);
+  inline-size: var(--_current-state-layer-width);
+  block-size: var(--_current-state-layer-height);
+
+  &::before {
+    content: '';
+
+    position: relative;
+
+    display: block;
+    scale: var(--_handle-off-scale);
+
+    transition:
+      background-color var(--_animation-duration) var(--_animation-timing),
+      box-shadow var(--_animation-duration) var(--_animation-timing),
+      scale var(--_animation-duration) var(--_active-animation-timing);
+
+    box-shadow: var(--_handle-off-elevation);
+    border-radius: var(--_handle-shape);
+    inline-size: var(--_handle-width);
+    block-size: var(--_handle-height);
+
+    background-color: var(--_handle-off-color);
+  }
+}
+
+@mixin handle-on {
+  translate: #{$_handle-on-translate};
+
+  &::before {
+    scale: var(--_handle-on-scale);
+
+    box-shadow: var(--_handle-on-elevation);
+
+    background-color: var(--_handle-on-color);
+  }
+}
+
+@mixin handle-active {
+  &::before {
+    scale: var(--_handle-active-off-scale);
+
+    box-shadow: var(--_handle-active-off-elevation);
+
+    background-color: var(--_handle-active-off-color);
+  }
+}
+
+@mixin handle-active-on {
+  &::before {
+    scale: var(--_handle-active-on-scale);
+
+    box-shadow: var(--_handle-active-on-elevation);
+
+    background-color: var(--_handle-active-on-color);
+  }
+}
+
+@mixin icon {
+  --forge-icon-font-size: var(--_icon-off-size);
+
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  transition-property: opacity, scale;
+  transition-duration: var(--_animation-duration);
+  transition-timing-function: var(--_animation-timing);
+
+  inline-size: var(--_icon-off-size);
+  block-size: var(--_icon-off-size);
+
+  color: var(--_icon-off-color);
+  fill: var(--_icon-off-color);
+
+  font-size: var(--_icon-off-size);
+}
+
+@mixin icon-on {
+  --forge-icon-font-size: var(--_icon-on-size);
+
+  inline-size: var(--_icon-on-size);
+  block-size: var(--_icon-on-size);
+
+  color: var(--_icon-on-color);
+  fill: var(--_icon-on-color);
+
+  font-size: var(--_icon-on-size);
+}
+
+@mixin icon-active {
+  scale: var(--_icon-active-off-scale);
+
+  color: var(--_icon-active-off-color);
+  fill: var(--_icon-active-off-color);
+}
+
+@mixin icon-active-on {
+  scale: var(--_icon-active-on-scale);
+
+  color: var(--_icon-active-on-color);
+  fill: var(--_icon-active-on-color);
+}
+
+@mixin icon-on-shown {
+  opacity: 1;
+  scale: var(--_icon-on-scale);
+}
+
+@mixin icon-off-shown {
+  opacity: 1;
+  scale: var(--_icon-off-scale);
+}
+
+@mixin icon-hidden {
+  opacity: 0;
+  scale: 0.4;
+}
+
+@mixin label {
+  @include typography.style(label);
+
+  &:empty {
+    display: none;
+  }
+}

package/styles/switch/index.scss

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