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

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

package/styles/switch/switch.scss

@@ -3,78 +3,164 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:map';
-@use '../form-field/mixins' as form-field-mixins;
-@use '@material/dom/dom' as mdc-dom;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '../theme';
-@use '../theme/theme-values';
-@use './switch-theme';
-@use './switch-mixins' as switch;
-
-@include switch.static-styles();
-
-.mdc-switch {
-  @include switch-theme.theme-styles(switch-theme.$light-theme);
+@use './core';
+@use './configuration';
+@use '../core/styles/tokens/switch/tokens';
+@use '../focus-indicator';
+@use '../state-layer';
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
 }
 
-@include mdc-dom.forced-colors-mode {
-  .mdc-switch {
-    @include switch-theme.theme-styles(switch-theme.$forced-colors-theme);
+:host([disabled]) {
+  @include core.host-disabled;
+
+  .forge-switch {
+    pointer-events: none;
+  }
+
+  .handle::before {
+    box-shadow: none;
   }
 }
 
-@include form-field-mixins.core-styles;
+/// Base styles (defaults to off)
+.forge-switch {
+  @include configuration.configuration;
+  @include core.switch;
+
+  --_current-state-layer-width: var(--_state-layer-width);
+  --_current-state-layer-height: var(--_state-layer-height);
+
+  .container {
+    @include core.container;
+  }
+
+  .input {
+    @include core.input;
+
+    /// On styles
+    &:checked ~ {
+      .track {
+        @include core.track-on;
+      }
+  
+      .handle {
+        @include core.handle-on;
+
+        .icon {
+          &__on {
+            @include core.icon-on-shown;
+          }
+    
+          &__off {
+            @include core.icon-hidden;
+          }
+        }
+
+        forge-state-layer {
+          @include state-layer.provide-theme((
+            color: var(--_state-layer-on-color)
+          ));
+        }
+      }
+    }
+
+    /// Active styles
+    &:active {
+      ~ {
+        .track {
+          @include core.track-active;
+        }
+
+        .handle {
+          @include core.handle-active;
 
-.forge-switch__container {
-  display: flex;
-  align-items: center;
+          .icon {
+            @include core.icon-active;
+          }
+        }
+      }
 
-  &.forge-switch--label-position-start {
-    flex-flow: row-reverse;
+      /// Active on styles
+      &:checked ~ {
+        .track {
+          @include core.track-active-on;
+        }
 
-    .forge-switch__label {
-      margin-left: auto;
-      padding-right: 8px;
+        .handle {
+          @include core.handle-active-on;
+
+          .icon {
+            @include core.icon-active-on;
+          }
+        }
+      }
     }
   }
-}
 
-:host {
-  display: inline-block;
+  .track {
+    @include core.track;
+  }
 
-  * {
-    cursor: pointer;
+  .handle {
+    @include core.handle;
   }
-  
-  .forge-switch__label {
-    @include mdc-typography.typography(caption);
 
-    padding-left: 8px;
+  .icon {
+    @include core.icon;
+
+    &__on {
+      @include core.icon-on;
+      @include core.icon-hidden;
+    }
+
+    &__off {
+      @include core.icon-off-shown;
+    }
   }
-}
 
-:host([hidden]) {
-  display: none;
+  .label {
+    @include core.label;
+  }
+
+  .hidden {
+    display: none;
+  }
 }
 
+/// Dense styles
 :host([dense]) {
-  .mdc-switch__ripple {
-    $density: switch-theme.density(minimum);
-    $size: map.get($density, state-layer-size);
-
-    @include mdc-theme.property(height, $size);
-    @include mdc-theme.property(width, $size);
+  .forge-switch {
+    // Set the state layer width and height for use in calculations of other properties
+    --_current-state-layer-width: var(--_state-layer-dense-width);
+    --_current-state-layer-height: var(--_state-layer-dense-height);
   }
 }
 
-:host([disabled]) {
-  * {
-    cursor: not-allowed;
+/// Reduced motion styles
+@media (prefers-reduced-motion) {
+  .switch {
+    --_animation-duration: 0s;
   }
+}
 
-  .forge-switch__label {
-    @include theme.property(color, label-disabled-on-background);
-  }
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: var(--_state-layer-off-color)
+  ));
+}
+
+/* stylelint-disable length-zero-no-unit */
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    shape: var(--_track-shape),
+    outward-offset: 0px
+  ));
 }
+/* stylelint-enable length-zero-no-unit */

package/styles/tabs/tab/_configuration.scss

@@ -10,6 +10,10 @@
   --_active-color: #{tab-tokens.get(active-color)};
   --_inactive-color: #{tab-tokens.get(inactive-color)};
   --_height: #{tab-tokens.get(height)};
+  --_stacked-height: #{tab-tokens.get(stacked-height)};
+
+  // Disabled
+  --_disabled-opacity: #{tab-tokens.get(disabled-opacity)};
 
   // Indicator
   --_active-indicator-color: #{tab-tokens.get(indicator-color)};
@@ -23,6 +27,7 @@
   
   // Content
   --_content-height: #{tab-tokens.get(content-height)};
+  --_content-padding: #{tab-tokens.get(content-padding)};
 
   // Icon
   --_active-focus-icon-color: #{tab-tokens.get(active-focus-icon-color)};

package/styles/tabs/tab/_core.scss

@@ -6,7 +6,6 @@
 @use '../../core/styles/utils';
 @use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../core/styles/typography';
-@use '../../core/styles/spacing';
 
 @mixin provide-theme($theme) {
   @include utils.provide(tokens.$tokens, $theme, tab);
@@ -21,7 +20,10 @@
 
 @mixin host-disabled {
   cursor: not-allowed;
-  opacity: #{tokens.get(disabled-opacity)};
+}
+
+@mixin disabled {
+  opacity: var(--_disabled-opacity);
 }
 
 @mixin tab {
@@ -123,12 +125,10 @@
   justify-content: center;
   white-space: nowrap;
   transition: 150ms color linear;
-
-  $_content-padding: spacing.variable('100');
-  max-height: calc(var(--_content-height) + 2 * $_content-padding);
+  max-height: calc(var(--_content-height) + 2 * var(--_content-padding));
   min-height: var(--_content-height);
-  padding: $_content-padding calc(2 * $_content-padding);
-  gap: spacing.variable('050');
+  padding: var(--_content-padding) calc(2 * var(--_content-padding));
+  gap: var(--_content-padding);
 }
 
 @mixin label {

package/styles/tabs/tab/tab.scss

@@ -5,7 +5,6 @@
  */
 @use './core';
 @use './configuration';
-@use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../focus-indicator';
 @use '../../state-layer';
 
@@ -33,6 +32,8 @@
   @include core.host-disabled;
 
   .forge-tab {
+    @include core.disabled;
+
     pointer-events: none;
   }
 }
@@ -85,7 +86,7 @@
 
 :host([stacked]) {
   .forge-tab {
-    --_height: #{tokens.get(stacked-height)};
+    --_height: var(--_stacked-height);
 
     .content {
       @include core.content-stacked;

package/styles/theme/_theme-dark.scss

@@ -21,7 +21,6 @@
 @use '../inline-message/variables' as inline-message-variables;
 @use '../table/mixins' as table-mixins;
 @use '../table/variables' as table-variables;
-@use '../switch/switch-theme' as switch-theme;
 
 ///
 /// Provides the CSS custom property definitions for the default Forge dark theme.
@@ -39,5 +38,4 @@
   @include badge-mixins.provide-theme(badge-variables.$theme-values-dark);
   @include banner-mixins.provide-theme(banner-variables.$theme-values-dark);
   @include inline-message-mixins.provide-theme(inline-message-variables.$theme-values-dark);
-  @include switch-theme.dark-theme-properties;
 }

package/styles/theme/_theme.scss

@@ -14,12 +14,7 @@
 @use './keys';
 @use './theme-values';
 @use './theme-utils';
-@use '../core/styles/theme';
-
-@mixin theme-styles($prefix: forge) {
-  @include theme.properties;
-  @include theme-utils.core-styles;
-}
+@use '../core/styles/scrollbar';
 
 @function text-emphasis($emphasis) {
   @return map.get(theme-values.$text-emphasis, $emphasis);
@@ -161,45 +156,8 @@
   ), $important: $important);
 }
 
-@mixin scrollbar() {
-  &::-webkit-scrollbar {
-    @include css-custom-property(width, --forge-scrollbar-width, theme-values.$scrollbar-width);
-    @include css-custom-property(height, --forge-scrollbar-height, theme-values.$scrollbar-height);
-  }
-  
-  &::-webkit-scrollbar-corner {
-    @include property(background-color, scrollbar-track);
-  }
-
-  &::-webkit-scrollbar-track {
-    @include property(background-color, scrollbar-track);
-    
-    &:hover {
-      @include property(background-color, scrollbar-track-hover);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @include property(background-color, scrollbar-thumb);
-    @include css-custom-property(height, --forge-scrollbar-min-height, theme-values.$scrollbar-thumb-min-height);
-    @include css-custom-property(width, --forge-scrollbar-min-width, theme-values.$scrollbar-thumb-min-width);
-    @include css-custom-property(border-radius, --forge-scrollbar-border-radius, 10px);
-    @include css-custom-property(border-width, --forge-scrollbar-border-width, 3px);
-
-    border-style: solid;
-    border-color: transparent;
-    background-clip: content-box;
-
-    &:hover {
-      @include property(background-color, scrollbar-thumb-hover);
-    }
-  }
-}
-
-@mixin scrollbar-theme-styles() {
-  * {
-    @include scrollbar;
-  }
+@mixin scrollbar {
+  @include scrollbar.base;
 }
 
 @function elevation($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {

package/styles/theme/forge-theme.scss

@@ -3,7 +3,25 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './theme';
+@use '../core/styles/theme';
+@use '../core/styles/scrollbar';
 
-@include theme.theme-styles;
-@include theme.scrollbar-theme-styles;
+// Temporary theme properties for compatibility with MDC theme tokens
+//
+// TODO: remove this once MDC dependency is removed
+:root {
+  @include theme.properties-compat;
+}
+
+// Root theme properties
+:root {
+  @include theme.properties;
+}
+
+// Custom scrollbar styles
+* {
+  @include scrollbar.base;
+}
+
+// Utility classes for all theme tokens
+@include theme.classes;

package/styles/typography/_mixins.scss

@@ -14,26 +14,6 @@
 @use '../theme/custom-properties';
 
 @mixin core-styles() {
-  .forge-typography {
-    @include mdc-typography.base;
-    @include theme.css-custom-property(color, --mdc-theme-text-primary-on-background, mdc-theme-color.prop-value(text-primary-on-background));
-  }
-
-  // Create custom classes for built-in MDC typography styles
-  @each $style in map.keys(mdc-typography.$styles) {
-    .forge-typography--#{$style} {
-      @include mdc-typography.typography($style);
-      @include apply-additional-styles(variables.$mdc-typography-additional-styles, $style);
-    }
-  }
-  
-  // Create classes for forge-specific typography styles
-  @each $style in map.keys(variables.$styles) {
-    .forge-typography--#{$style} {
-      @include typography($style);
-    }
-  }
-  
   :root {
     // forge-specific MDC typography overrides
     @each $style, $properties in variables.$mdc-typography-overrides {