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

package/styles/focus-indicator/_mixins.scss

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:list';
+@use '../theme/theme-values';
+@use './variables';
+
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
+    }
+    @if $value {
+      --forge-focus-indicator-#{$key}: #{$value};
+    }
+  }
+}
+
+@mixin configuration {
+  --_active-width: var(--forge-focus-indicator-active-width, 6px);
+  --_color: var(--forge-focus-indicator-color, var(--mdc-theme-primary, #{theme-values.$primary}));
+  --_duration: var(--forge-focus-indicator-duration, 600ms);
+  --_outward-offset: var(--forge-focus-indicator-outward-offset, 4px);
+  --_inward-offset: var(--forge-focus-indicator-inward-offset, 0px); // stylelint-disable-line length-zero-no-unit
+  --_shape: var(--forge-focus-indicator-shape, 1px);
+  --_width: var(--forge-focus-indicator-width, 3px);
+  --_easing: var(--forge-focus-indicator-easing, cubic-bezier(0.2, 0, 0, 1));
+  --_shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_shape));
+  --_shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_shape));
+  --_shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_shape));
+  --_shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_shape));
+  --_margin-block: var(--forge-focus-indicator-offset-block, 0);
+  --_margin-inline: var(--forge-focus-indicator-offset-inline, 0);
+}
+
+@mixin core-styles {
+  .forge-focus-indicator {
+    @include configuration;
+    @include base;
+  }
+
+  @include reduced-motion-styles;
+  @include keyframes;
+}
+
+@mixin outward-styles {
+  .forge-focus-indicator {
+    @include outward;
+  }
+}
+
+@mixin inward-styles {
+  .forge-focus-indicator {
+    @include inward;
+  }
+}
+
+@mixin active-styles {
+  .forge-focus-indicator {
+    @include active;
+  }
+}
+
+@mixin circular-styles {
+  .forge-focus-indicator {
+    --_shape: 50%;
+  }
+}
+
+@mixin reduced-motion-styles {
+  @media (prefers-reduced-motion) {
+    .forge-focus-indicator {
+      animation: none;
+    }
+  }
+}
+
+@mixin base {
+  animation-delay: 0s, calc(var(--_duration) * 0.25);
+  animation-duration: calc(var(--_duration) * 0.25), calc(var(--_duration) * 0.75);
+  animation-timing-function: var(--_easing);
+  box-sizing: border-box;
+  color: var(--_color);
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  margin-block: var(--_margin-block);
+  margin-inline: var(--_margin-inline);
+}
+
+@mixin active {
+  display: flex;
+}
+
+@mixin outward {
+  animation-name: outward-grow, outward-shrink;
+  border-end-end-radius: calc(var(--_shape-end-end) + var(--_outward-offset));
+  border-end-start-radius: calc(var(--_shape-end-start) + var(--_outward-offset));
+  border-start-end-radius: calc(var(--_shape-start-end) + var(--_outward-offset));
+  border-start-start-radius: calc(var(--_shape-start-start) + var(--_outward-offset));
+  inset: calc(-1 * var(--_outward-offset));
+  outline: var(--_width) solid currentColor;
+}
+
+@mixin inward {
+  animation-name: inward-grow, inward-shrink;
+  border-end-end-radius: calc(var(--_shape-end-end) - var(--_inward-offset));
+  border-end-start-radius: calc(var(--_shape-end-start) - var(--_inward-offset));
+  border-start-end-radius: calc(var(--_shape-start-end) - var(--_inward-offset));
+  border-start-start-radius: calc(var(--_shape-start-start) - var(--_inward-offset));
+  border: var(--_width) solid currentColor;
+  inset: var(--_inward-offset);
+}
+
+@mixin keyframes {
+  @keyframes outward-grow {
+    from {
+      outline-width: 0;
+    }
+    to {
+      outline-width: var(--_active-width);
+    }
+  }
+
+  @keyframes outward-shrink {
+    from {
+      outline-width: var(--_active-width);
+    }
+  }
+
+  @keyframes inward-grow {
+    from {
+      border-width: 0;
+    }
+    to {
+      border-width: var(--_active-width);
+    }
+  }
+
+  @keyframes inward-shrink {
+    from {
+      border-width: var(--_active-width);
+    }
+  }
+}

package/styles/focus-indicator/_variables.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$supported-theme-properties: (
+  'active-width',
+  'color',
+  'duration',
+  'outward-offset',
+  'inward-offset',
+  'shape',
+  'width',
+  'shape-start-start',
+  'shape-start-end',
+  'shape-end-end',
+  'shape-end-start',
+  'offset-block',
+  'offset-inline'
+);

package/styles/focus-indicator/focus-indicator.scss

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([active]) {
+  @include mixins.active-styles;
+}
+
+:host(:not([inward])) {
+  @include mixins.outward-styles;
+}
+
+:host([inward]) {
+  @include mixins.inward-styles;
+}
+
+:host([circular]) {
+  @include mixins.circular-styles;
+}

package/styles/slider/_mixins.scss

@@ -5,6 +5,7 @@
  */
 @use 'sass:list';
 @use '../core/style-layer/slider';
+@use '../focus-indicator/mixins' as focus-indicator;
 @use './variables';
 
 @mixin provide-theme($theme) {
@@ -24,4 +25,12 @@
 
 @mixin core-styles {
   @include slider.styles;
+
+  forge-focus-indicator {
+    /* stylelint-disable length-zero-no-unit */
+    @include focus-indicator.provide-theme((
+      shape: 50%,
+      outward-offset: 0px
+    ));
+  }
 }

package/styles/tabs/tab/_mixins.scss

@@ -3,163 +3,92 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '../../typography/mixins' as typography-mixins;
+@use '../../core/style-layer/tabs/tab';
+@use '../../focus-indicator/mixins' as focus-indicator;
 @use './variables';
 
-@mixin core-styles() {
-  .forge-tab {
-    @include base;
-
-    &:disabled {
-      @include disabled;
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
     }
-
-    // Firefox still draws a dotted border around focused buttons unless specifically overridden
-    &::-moz-focus-inner {
-      padding: 0;
-      border: 0;
+    @if $value {
+      --#{tab.$prefix}-#{$key}: #{$value};
     }
+  }
+}
 
-    ::slotted([slot=top]) {
-      @include top;
-    }
+@mixin core-styles {
+  @include tab.styles;
 
-    ::slotted([slot=top]),
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      @include icon-base;
-    }
-
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      padding: 0 8px;
-    }
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme(( shape: 8px ));
+  }
+}
 
-    &__content {
-      @include content;
-    }
+@mixin focus-styles {
+  @include tab.focus-styles;
+}
 
-    &__text {
-      @include text;
-    }
-  
-    &--active {
-      @include active;
-
-      ::slotted([slot=top]),
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        transition-delay: 100ms;
-      }
-    }
+@mixin focus-selected-styles {
+  @include tab.focus-selected-styles;
+}
 
-    &__ripple {
-      @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;
-    }
-  }
+@mixin pressed-styles {
+  @include tab.pressed-styles;
 }
 
-@mixin host() {
-  display: inline-block;
+@mixin pressed-selected-styles {
+  @include tab.pressed-selected-styles;
 }
 
-@mixin host-stretch() {
-  flex: 1;
+@mixin disabled-styles {
+  @include tab.disabled-styles;
 }
 
-@mixin base() {
-  @include mdc-typography.typography(button);
-  @include mdc-theme.property(color, text-secondary-on-light);
+@mixin selected-styles {
+  @include tab.selected-styles;
+  @include tab.forced-colors-styles;
 
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 auto;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin: 0; // To override safari default margin for button elements
-  padding-top: 0;
-  padding-bottom: 0;
-  border: none;
-  outline: none;
-  background: none;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-appearance: none;
-  z-index: 1;
-  padding-right: variables.$horizontal-padding;
-  padding-left: variables.$horizontal-padding;
-  height: 100%;
-  width: 100%;
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      'offset-block': 0 calc(var(--_active-indicator-height) + 1px)
+    ));
+  }
 }
 
-@mixin disabled() {
-  @include mdc-theme.property(color, text-disabled-on-background);
-
-  cursor: not-allowed;
-  pointer-events: none;
+@mixin stacked-styles {
+  @include tab.stacked-styles;
 }
 
-@mixin top() {
-  padding-top: variables.$stacked-padding;
+@mixin secondary-styles {
+  @include tab.secondary-styles;
 }
 
-@mixin icon-base() {
-  transition: 150ms color linear;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
-  z-index: 2;
+@mixin vertical-styles {
+  @include tab.vertical-styles;
 }
 
-@mixin content() {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: inherit;
-  pointer-events: none;
+@mixin vertical-primary-styles {
+  @include tab.vertical-primary-styles;
 }
 
-@mixin text() {
-  transition: 150ms color linear;
-  display: inline-block;
-  line-height: 1;
-  z-index: 2;
+@mixin vertical-secondary-styles {
+  @include tab.vertical-secondary-styles;
 }
 
-@mixin active() {
-  @include mdc-theme.property(color, primary);
+@mixin vertical-inverted-styles {
+  @include tab.vertical-inverted-styles;
 }
 
-@mixin host-theme($theme, $properties) {
-  :host([theme=#{$theme}]) {
-    @include theme($theme, $properties);
-  }
+@mixin inverted-styles {
+  @include tab.inverted-styles;
 }
 
-@mixin theme($theme, $properties) {
-  $defaultValue: map-get($properties, $theme);
-  --mdc-theme-primary: var(--mdc-theme-#{$theme}, $defaultValue);
+@mixin host {
+  @include tab.host;
+}
 
-  // IE support
-  .forge-tab.forge-tab--active {
-    color: $defaultValue;
-  }
+@mixin host-disabled {
+  @include tab.host-disabled;
 }

package/styles/tabs/tab/_variables.scss

@@ -3,7 +3,29 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$horizontal-padding: 24px !default;
-$height: 48px !default;
-$height-stacked: 72px !default;
-$stacked-padding: 8px !default;
+$supported-theme-properties: (
+  'indicator-color',
+  'indicator-height',
+  'indicator-shape',
+  'container-color',
+  'container-height',
+  'shape',
+  'height',
+  'active-focus-icon-color',
+  'active-hover-icon-color',
+  'active-icon-color',
+  'active-pressed-icon-color',
+  'icon-size',
+  'focus-icon-color',
+  'hover-icon-color',
+  'icon-color',
+  'pressed-icon-color',
+  'active-focus-label-text-color',
+  'active-hover-label-text-color',
+  'active-label-text-color',
+  'active-pressed-label-text-color',
+  'focus-label-text-color',
+  'hover-label-text-color',
+  'label-text-color',
+  'pressed-label-text-color'
+);

package/styles/tabs/tab/tab.scss

@@ -3,10 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme/theme-values';
 @use './mixins';
-@use '../../ripple/forge-ripple';
-@use '@material/tab-indicator/mdc-tab-indicator';
 
 @include mixins.core-styles;
 
@@ -18,13 +15,55 @@
   display: none;
 }
 
-:host([stretch]) {
-  @include mixins.host-stretch;
+:host(:focus) {
+  @include mixins.focus-styles;
 }
 
-@include mixins.host-theme(primary, theme-values.$mdc-property-values);
-@include mixins.host-theme(secondary, theme-values.$mdc-property-values);
-@include mixins.host-theme(warning, theme-values.$property-values);
-@include mixins.host-theme(success, theme-values.$property-values);
-@include mixins.host-theme(danger, theme-values.$property-values);
-@include mixins.host-theme(info, theme-values.$property-values);
+:host(:active) {
+  @include mixins.pressed-styles;
+}
+
+:host([disabled]) {
+  @include mixins.host-disabled;
+  @include mixins.disabled-styles;
+}
+
+:host([selected]) {
+  @include mixins.selected-styles;
+}
+
+:host([selected]:focus) {
+  @include mixins.focus-selected-styles;
+}
+
+:host([selected]:active) {
+  @include mixins.pressed-selected-styles;
+}
+
+:host([stacked]) {
+  @include mixins.stacked-styles;
+}
+
+:host([secondary]) {
+  @include mixins.secondary-styles;
+}
+
+:host([vertical]) {
+  @include mixins.vertical-styles;
+}
+
+:host([vertical][secondary]) {
+  @include mixins.vertical-secondary-styles;
+}
+
+:host([vertical]:not([secondary])) {
+  @include mixins.vertical-primary-styles;
+}
+
+:host([inverted]) {
+  @include mixins.inverted-styles;
+}
+
+:host([inverted][vertical]) {
+  @include mixins.vertical-inverted-styles;
+}

package/styles/tabs/tab-bar/_mixins.scss

@@ -3,76 +3,36 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme';
-@use '../tab/variables';
+@use '../../core/style-layer/tabs/tab-bar';
+@use './variables';
 
-@mixin core-styles() {
-  .forge-tab-bar {
-    @include base;
-
-    &--underlined {
-      &::after {
-        @include theme.property(border-bottom-color, border-color);
-  
-        content: '';
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-        box-sizing: border-box;
-        width: 100%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-    }
-
-    &--align-center {
-      .mdc-tab-scroller__scroll-content {
-        justify-content: center;
-      }
+@mixin provide-theme($theme) {
+  @each $key, $value in $theme {
+    @if list.index(variables.$supported-theme-properties, $key) == null {
+      @error 'Invalid theme property: #{$key}';
     }
-
-    &--align-end {
-      .mdc-tab-scroller__scroll-content {
-        justify-content: flex-end;
-      }
-    }
-
-    &--stacked {
-      @include stacked;
-
-      .mdc-tab-scroller {
-        height: 100%;
-      }
-    }
-  }
-
-  .mdc-tab-scroller {
-    z-index: 1;
-    width: 100%;
-
-    &__scroll-area {
-      height: 100%;
-      overflow-x: auto;
-      scrollbar-width: none; // Hide scrollbar in Firefox
+    @if $value {
+      --#{tab-bar.$prefix}-#{$key}: #{$value};
     }
   }
 }
 
-@mixin host() {
-  display: block;
-  overflow: hidden;
+@mixin host {
+  @include tab-bar.host;
 }
 
-@mixin base() {
-  @include theme.css-custom-property(height, --forge-tab-bar-height, variables.$height);
+@mixin core-styles {
+  @include tab-bar.styles;
+}
 
-  display: flex;
-  position: relative;
+@mixin vertical-styles {
+  @include tab-bar.vertical-styles;
 }
 
-@mixin stacked() {
-  @include theme.css-custom-property(height, --forge-tab-bar-height, variables.$height-stacked);
+@mixin inverted-styles {
+  @include tab-bar.inverted-styles;
+}
 
-  align-items: center;
+@mixin inverted-vertical-styles {
+  @include tab-bar.inverted-vertical-styles;
 }

package/styles/tabs/tab-bar/_variables.scss

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$supported-theme-properties: (
+  'justify',
+  'stretch',
+  'underline-color',
+  'underline-thickness'
+);