@tylertech/forge 3.0.0-next.8 → 3.0.0-next.9

package/styles/core/{style-layer → styles}/slider/_core.scss

@@ -9,8 +9,6 @@
 ///
 
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../../theme';
 @use '../../../typography';
 @use './functions';
@@ -45,7 +43,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 
   // External state variables
   --_track-height: var(--#{variables.$prefix}-track-height, #{variables.$track-height});
-  --_active-track-color: var(--#{variables.$prefix}-active-track-color, var(--mdc-theme-primary, #{theme.$primary}));
+  --_active-track-color: var(--#{variables.$prefix}-active-track-color, var(--forge-theme-primary, #{theme.$primary}));
   --_active-track-height: var(--#{variables.$prefix}-active-track-height, var(--_track-height));
   --_active-track-shape: var(--#{variables.$prefix}-active-track-shape, 9999px);
   --_disabled-active-track-color: var(--#{variables.$prefix}-disabled-active-track-color, #{theme.$disabled-color});
@@ -53,33 +51,31 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
   --_disabled-handle-color: var(--#{variables.$prefix}-disabled-handle-color, #{theme.$disabled-color});
   --_disabled-inactive-track-color: var(--#{variables.$prefix}-disabled-inactive-track-color, #{theme.$disabled-color});
   --_disabled-inactive-track-opacity: var(--#{variables.$prefix}-disabled-inactive-track-opacity, #{variables.$disabled-inactive-track-opacity});
-  --_focus-handle-color: var(--#{variables.$prefix}-focus-handle-color, var(--mdc-theme-primary, #{theme.$primary}));
-  --_handle-color: var(--#{variables.$prefix}-handle-color, var(--mdc-theme-primary, #{theme.$primary}));
+  --_focus-handle-color: var(--#{variables.$prefix}-focus-handle-color, var(--forge-theme-primary, #{theme.$primary}));
+  --_handle-color: var(--#{variables.$prefix}-handle-color, var(--forge-theme-primary, #{theme.$primary}));
   --_handle-height: var(--#{variables.$prefix}-handle-height, #{variables.$handle-height});
   --_handle-shape: var(--#{variables.$prefix}-handle-shape, 9999px);
   --_handle-width: var(--#{variables.$prefix}-handle-width, #{variables.$handle-width});
-  --_hover-handle-color: var(--#{variables.$prefix}-hover-handle-color, var(--mdc-theme-primary, #{theme.$primary}));
+  --_hover-handle-color: var(--#{variables.$prefix}-hover-handle-color, var(--forge-theme-primary, #{theme.$primary}));
   --_inactive-track-color-fallback: var(--#{variables.$prefix}-inactive-track-color, #d5d8ee); // TODO: remove this when we're confident that color-mix is more widely supported
-  --_inactive-track-color: var(--#{variables.$prefix}-inactive-track-color, color-mix(in srgb, var(--mdc-theme-primary, #{theme.$primary}) 24%, transparent));
+  --_inactive-track-color: var(--#{variables.$prefix}-inactive-track-color, color-mix(in srgb, var(--forge-theme-primary, #{theme.$primary}) 24%, transparent));
   --_inactive-track-height: var(--#{variables.$prefix}-inactive-track-height, var(--_track-height));
   --_inactive-track-shape: var(--#{variables.$prefix}-inactive-track-shape, 9999px);
-  --_label-container-color: var(--#{variables.$prefix}-label-container-color, var(--mdc-theme-primary, #{theme.$primary}));
+  --_label-container-color: var(--#{variables.$prefix}-label-container-color, var(--forge-theme-primary, #{theme.$primary}));
   --_label-container-height: var(--#{variables.$prefix}-label-container-height, #{variables.$label-container-height});
-  --_label-label-text-color: var(--#{variables.$prefix}-label-label-text-color, var(--mdc-theme-on-primary, #{theme.$on-primary}));
-  --_pressed-handle-color: var(--#{variables.$prefix}-pressed-handle-color, var(--mdc-theme-primary, #{theme.$primary}));
+  --_label-label-text-color: var(--#{variables.$prefix}-label-label-text-color, var(--forge-theme-on-primary, #{theme.$on-primary}));
+  --_pressed-handle-color: var(--#{variables.$prefix}-pressed-handle-color, var(--forge-theme-primary, #{theme.$primary}));
   --_state-layer-size: var(--#{variables.$prefix}-state-layer-size, #{variables.$state-layer-size});
-  --_with-overlap-handle-outline-color: var(--#{variables.$prefix}-with-overlap-handle-outline-color, var(--mdc-theme-on-primary, #{theme.$on-primary}));
+  --_with-overlap-handle-outline-color: var(--#{variables.$prefix}-with-overlap-handle-outline-color, var(--forge-theme-on-primary, #{theme.$on-primary}));
   --_with-overlap-handle-outline-width: var(--#{variables.$prefix}-with-overlap-handle-outline-width, #{variables.$handle-outline-width});
-  --_with-tick-marks-active-container-color: var(--#{variables.$prefix}-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #{theme.$on-primary}));
+  --_with-tick-marks-active-container-color: var(--#{variables.$prefix}-with-tick-marks-active-container-color, var(--forge-theme-on-primary, #{theme.$on-primary}));
   --_with-tick-marks-container-size: var(--#{variables.$prefix}-with-tick-marks-container-size, #{variables.$tickmarks-container-size});
-  --_with-tick-marks-disabled-active-container-color: var(--#{variables.$prefix}-with-tick-marks-disabled-active-container-color, var(--mdc-theme-text-primary-on-background, #{theme.$text-primary-color}));
-  --_with-tick-marks-disabled-inactive-container-color: var(--#{variables.$prefix}-with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, var(--mdc-theme-on-primary, #{theme.$on-primary}) 50%, transparent));
-  --_with-tick-marks-inactive-container-color: var(--#{variables.$prefix}-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #{theme.$primary}));
+  --_with-tick-marks-disabled-active-container-color: var(--#{variables.$prefix}-with-tick-marks-disabled-active-container-color, var(--forge-theme-text-primary, #{theme.$text-primary-color}));
+  --_with-tick-marks-disabled-inactive-container-color: var(--#{variables.$prefix}-with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, var(--forge-theme-on-primary, #{theme.$on-primary}) 50%, transparent));
+  --_with-tick-marks-inactive-container-color: var(--#{variables.$prefix}-with-tick-marks-inactive-container-color, var(--forge-theme-primary, #{theme.$primary}));
 }
 
 @mixin styles {
-  @include mdc-ripple.common;
-
   .#{variables.$prefix} {
     @include configuration;
     @include slider;
@@ -169,10 +165,6 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
     }
   }
 
-  .handle-ripple {
-    @include handle-ripple-surface;
-  }
-
   .handle-container.hover .handle-thumb {
     @include handle-thumb-hover;
   }
@@ -451,16 +443,6 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
   z-index: 1;
 }
 
-@mixin handle-ripple-surface {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-unbounded;
-  @include mdc-ripple-theme.states($color: primary);
-
-  box-sizing: content-box;
-  width: 100%;
-  height: 100%;
-}
-
 @mixin handle-label-base {
   position: absolute;
   display: block;

package/styles/core/styles/state-layer/_core.scss

@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../tokens';
+@use './variables';
+
+@mixin configuration($prefix: variables.$prefix) {
+  @include tokens.configuration('state-layer', $prefix);
+}
+
+@mixin styles {
+  .#{variables.$prefix} {
+    @include configuration;
+    @include surface;
+
+    &--hovered::before {
+      @include hovered;
+    }
+
+    &--pressed::after {
+      @include pressed;
+    }
+  }
+
+  @media screen and (forced-colors: active) {
+    :host {
+      display: none;
+    }
+  }
+}
+
+@mixin host {
+  @include container;
+  
+  display: flex;
+  margin: auto;
+  pointer-events: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin surface {
+  &::before,
+  &::after {
+    content: '';
+
+    @include layer-base;
+  }
+
+  &::before {
+    @include hover-base;
+  }
+
+  &::after {
+    @include ripple-base;
+  }
+}
+
+@mixin container {
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+@mixin disabled {
+  display: none;
+}
+
+@mixin hovered {
+  background-color: var(--_hover-color);
+  opacity: var(--_hover-opacity);
+}
+
+@mixin pressed {
+  opacity: var(--_pressed-opacity);
+  transition-duration: var(--_pressed-duration);
+}
+
+@mixin layer-base {
+  opacity: 0;
+  position: absolute;
+}
+
+@mixin hover-base {
+  background-color: var(--_hover-color);
+  inset: 0;
+  transition: opacity var(--_hover-duration) linear,
+              background-color var(--_hover-duration) linear;
+}
+
+@mixin ripple-base {
+  background: radial-gradient(
+    closest-side,
+    var(--_pressed-color) max(calc(100% - 70px), 65%),
+    transparent 100%
+  );
+  transform-origin: center center;
+  transition: opacity var(--_animation-duration) linear;
+}
+
+///
+/// Creates the styles for a visual-only state layer without the use of JavaScript.
+/// 
+/// This adds hover and pressed states to the element it is applied to, but does not
+/// provide any "ripple" styles because that requires the use of JavaScript.
+/// 
+@mixin states($selector: variables.$prefix) {
+  @include states-target;
+  
+  .#{$selector} {
+    @include configuration;
+
+    pointer-events: none;
+
+    &::before {
+      content: '';
+
+      @include layer-base;
+    }
+
+    &::before {
+      @include hover-base;
+    }
+  }
+
+  &:hover {
+    .#{$selector}::before {
+      @include hovered;
+    }
+  }
+
+  &:active {
+    .#{$selector}::before {
+      opacity: var(--_pressed-opacity);
+    }
+  }
+}
+
+@mixin states-target {
+  position: relative;
+  overflow: hidden;
+}

package/styles/core/styles/state-layer/_variables.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/config';
+
+$prefix: #{config.$prefix}-state-layer !default;

package/styles/core/{style-layer/tabs/tab → styles/state-layer}/index.scss

@@ -7,7 +7,3 @@
 
 @forward './core';
 @forward './variables';
-
-@mixin styles {
-  @include core.styles;
-}

package/styles/core/{style-layer → styles}/tabs/tab/_core.scss

@@ -3,20 +3,24 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '../../../../theme/theme-values';
+@use '../../../../focus-indicator/mixins' as focus-indicator;
+@use '../../../../state-layer/mixins' as state-layer;
 @use '../../../../typography';
 @use './variables';
 
 @mixin configuration {
+  // Shared
+  --_active-color: var(--#{variables.$prefix}-active-color, var(--forge-theme-primary, #{theme-values.$primary}));
+  --_inactive-color: var(--#{variables.$prefix}-inactive-color, var(--forge-theme-text-secondary, #{theme-values.$text-secondary-color}));
+
   // Indicator
-  --_active-indicator-color: var(--#{variables.$prefix}-indicator-color, var(--mdc-theme-primary, #{theme-values.$primary}));
+  --_active-indicator-color: var(--#{variables.$prefix}-indicator-color, var(--_active-color));
   --_active-indicator-height: var(--#{variables.$prefix}-indicator-height, #{variables.$indicator-height});
   --_active-indicator-shape: var(--#{variables.$prefix}-indicator-shape, #{variables.$indicator-shape});
 
   // Container
-  --_container-color: var(--#{variables.$prefix}-container-color, var(--mdc-theme-surface, #{theme-values.$surface}));
+  --_container-color: var(--#{variables.$prefix}-container-color, transparent);
   --_container-height: var(--#{variables.$prefix}-container-height, #{variables.$height});
   --_container-shape: var(--#{variables.$prefix}-shape, 0);
   
@@ -24,25 +28,25 @@
   --_content-height: var(--#{variables.$prefix}-height, #{variables.$content-height});
 
   // Icon
-  --_active-focus-icon-color: var(--#{variables.$prefix}-active-focus-icon-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_active-hover-icon-color: var(--#{variables.$prefix}-active-hover-icon-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_active-icon-color: var(--#{variables.$prefix}-active-icon-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_active-pressed-icon-color: var(--#{variables.$prefix}-active-pressed-icon-color, var(--mdc-theme-primary, #{theme-values.$primary}));
+  --_active-focus-icon-color: var(--#{variables.$prefix}-active-focus-icon-color, var(--_active-color));
+  --_active-hover-icon-color: var(--#{variables.$prefix}-active-hover-icon-color, var(--_active-color));
+  --_active-icon-color: var(--#{variables.$prefix}-active-icon-color, var(--_active-color));
+  --_active-pressed-icon-color: var(--#{variables.$prefix}-active-pressed-icon-color, var(--_active-color));
   --_icon-size: var(--#{variables.$prefix}-icon-size, #{variables.$icon-size});
-  --_focus-icon-color: var(--#{variables.$prefix}-focus-icon-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
-  --_hover-icon-color: var(--#{variables.$prefix}-hover-icon-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
-  --_icon-color: var(--#{variables.$prefix}-icon-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
-  --_pressed-icon-color: var(--#{variables.$prefix}-pressed-icon-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
+  --_focus-icon-color: var(--#{variables.$prefix}-focus-icon-color, var(--_inactive-color));
+  --_hover-icon-color: var(--#{variables.$prefix}-hover-icon-color, var(--_inactive-color));
+  --_icon-color: var(--#{variables.$prefix}-icon-color, var(--_inactive-color));
+  --_pressed-icon-color: var(--#{variables.$prefix}-pressed-icon-color, var(--_inactive-color));
 
   // Label
-  --_active-focus-label-text-color: var(--#{variables.$prefix}-active-focus-label-text-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_active-hover-label-text-color: var(--#{variables.$prefix}-active-hover-label-text-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_active-label-text-color: var(--#{variables.$prefix}-active-label-text-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_active-pressed-label-text-color: var(--#{variables.$prefix}-active-pressed-label-text-color, var(--mdc-theme-primary, #{theme-values.$primary}));
-  --_focus-label-text-color: var(--#{variables.$prefix}-focus-label-text-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
-  --_hover-label-text-color: var(--#{variables.$prefix}-hover-label-text-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
-  --_label-text-color: var(--#{variables.$prefix}-label-text-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
-  --_pressed-label-text-color: var(--#{variables.$prefix}-pressed-label-text-color, var(--mdc-theme-text-secondary-on-background, #{theme-values.$text-secondary-color}));
+  --_active-focus-label-text-color: var(--#{variables.$prefix}-active-focus-label-text-color, var(--_active-color));
+  --_active-hover-label-text-color: var(--#{variables.$prefix}-active-hover-label-text-color, var(--_active-color));
+  --_active-label-text-color: var(--#{variables.$prefix}-active-label-text-color, var(--_active-color));
+  --_active-pressed-label-text-color: var(--#{variables.$prefix}-active-pressed-label-text-color, var(--_active-color));
+  --_focus-label-text-color: var(--#{variables.$prefix}-focus-label-text-color, var(--_inactive-color));
+  --_hover-label-text-color: var(--#{variables.$prefix}-hover-label-text-color, var(--_inactive-color));
+  --_label-text-color: var(--#{variables.$prefix}-label-text-color, var(--_inactive-color));
+  --_pressed-label-text-color: var(--#{variables.$prefix}-pressed-label-text-color, var(--_inactive-color));
 }
 
 @mixin vertical-primary-configuration {
@@ -63,8 +67,6 @@
 }
 
 @mixin styles {
-  @include mdc-ripple.common;
-
   .#{variables.$prefix} {
     @include configuration;
     @include tab;
@@ -80,16 +82,24 @@
     .indicator {
       @include indicator;
     }
-
-    .ripple-surface {
-      @include ripple-surface;
-    }
   }
 
   host,
   ::slotted(*) {
     white-space: nowrap;
   }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: var(--_active-color)
+    ));
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: var(--_active-color)
+    ));
+  }
 }
 
 @mixin focus-styles {
@@ -363,20 +373,6 @@
   opacity: 0;
 }
 
-@mixin ripple-surface {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-bounded;
-  @include mdc-ripple-theme.states($color: primary);
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: var(--_container-shape);
-}
-
 @mixin content-secondary {
   width: 100%;
 }

package/styles/core/{style-layer → styles}/tabs/tab-bar/_core.scss

@@ -9,8 +9,8 @@
 @mixin configuration {
   --_container-justify: var(--#{variables.$prefix}-justify, space-between);
   --_tab-flex: var(--#{variables.$prefix}-stretch, 1);
-  --_divider-color: var(--#{variables.$prefix}-underline-color, var(--forge-theme-border-color, #{theme-values.$border-color}));
-  --_divider-thickness: var(--#{variables.$prefix}-underline-thickness, #{variables.$underline-thickness});
+  --_divider-color: var(--#{variables.$prefix}-divider-color, var(--forge-theme-border-color, #{theme-values.$border-color}));
+  --_divider-thickness: var(--#{variables.$prefix}-divider-thickness, #{variables.$divider-thickness});
 }
 
 @mixin styles {

package/styles/core/{style-layer → styles}/tabs/tab-bar/_variables.scss

@@ -6,4 +6,4 @@
 @use '../../core/config';
 
 $prefix: #{config.$prefix}-tab-bar !default;
-$underline-thickness: 1px !default;
+$divider-thickness: 1px !default;

package/styles/core/styles/tabs/tab-bar/index.scss

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