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

package/styles/button/button.scss

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './configuration';
+@use './core';
+@use '../core/styles/theme';
+@use '../state-layer' as state-layer;
+@use '../focus-indicator' as focus-indicator;
+@use './token-utils' as *;
+
+//
+// Host
+//
+
+:host {
+  @include configuration.host-configuration;
+}
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-button {
+  @include configuration.configuration;
+}
+
+.forge-button {
+  @include core.base;
+  
+  ::slotted(:is([slot=start],[slot=end])) {
+    @include core.slotted-start-end;
+  }
+}
+
+a {
+  @include core.anchor-base;
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme(( color: #{token(color)} ));
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(primary-color)},
+    outward-offset: #{token(focus-indicator-offset)}
+  ));
+}
+
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    .forge-button {
+      @include override(primary-color, theme.variable($theme), value);
+    }
+  }
+  
+  :host([theme=#{$theme}][variant=tonal]) {
+    .forge-button {
+      @include override(tonal-background, theme.variable(#{$theme}-container), value);
+      @include override(tonal-color, theme.variable(on-#{$theme}-container), value);
+    }
+  }
+}
+
+@include theme(secondary);
+@include theme(tertiary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);
+
+//
+// Variants
+//
+
+:host(:is(:not([variant], [variant=text]))) {
+  .forge-button {
+    @include core.text;
+  }
+}
+
+:host(:is([variant=filled],[variant=raised])) {
+  .forge-button {
+    @include core.filled;
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme(( color: #{token(filled-color)} ));
+  }
+}
+
+:host([variant=raised]) {
+  .forge-button {
+    @include core.raised;
+  }
+}
+
+:host([variant=tonal]) {
+  .forge-button {
+    @include core.tonal;
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme(( color: #{token(tonal-color)} ));
+  }
+}
+
+:host([variant=outlined]) {
+  .forge-button {
+    @include core.outlined;
+  }
+}
+
+:host([variant=link]) {
+  .forge-button {
+    @include core.link;
+  }
+}
+
+//
+// Dense
+//
+
+:host([dense]) {
+  .forge-button {
+    @include core.dense;
+  }
+}
+
+//
+// Pill
+//
+
+:host([pill]) {
+  .forge-button {
+    @include core.pill;
+  }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme(( shape: #{token(pill-shape)} ));
+  }
+}
+
+//
+// Disabled
+//
+
+:host(:not([anchor])[disabled]) {
+  @include core.host-disabled;
+
+  .forge-button {
+    @include core.disabled;
+  }
+}
+
+:host(:not([anchor])[variant=outlined][disabled]) {
+  .forge-button {
+    @include core.outlined-disabled;
+  }
+}
+
+:host(:not([anchor])[variant=tonal][disabled]) {
+  .forge-button {
+    @include core.tonal-disabled;
+  }
+}
+
+:host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) {
+  .forge-button {
+    @include core.filled-disabled;
+  }
+}
+
+:host(:not([anchor])[variant=raised][disabled]) {
+  .forge-button {
+    @include core.raised-disabled;
+  }
+}
+
+//
+// Popover icon
+//
+
+:host([popover-icon]) {
+  .forge-button__popover-icon {
+    @include core.popover-icon;
+  }
+}
+
+:host([popover-icon][aria-expanded=true]) {
+  .forge-button__popover-icon {
+    @include core.popover-icon-open;
+  }
+}

package/styles/button/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './configuration';
+@forward './core';
+@forward './token-utils' show provide-theme;

package/styles/button-toggle/button-toggle/_mixins.scss

@@ -3,10 +3,16 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/animation/functions' as mdc-animation;
-@use '../../button/mixins' as button-mixins;
+@use '@material/ripple/ripple' as mdc-ripple;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
+@use '@material/button/button-base' as mdc-button-base;
+@use '@material/button/button-shared-theme' as mdc-button-shared-theme;
+@use '@material/button/button-outlined' as mdc-button-outlined;
+@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
+@use '../../theme';
 
 @mixin host() {
   display: inline-block;
@@ -17,7 +23,8 @@
     @include base;
 
     &:disabled {
-      @include button-mixins.outlined-disabled;
+      @include theme.property(border-color, border-color);
+      @include mdc-theme.property(color, text-disabled-on-light);
     }
 
     &__selected:not(:disabled) {
@@ -56,9 +63,20 @@
 }
 
 @mixin base() {
-  @include button-mixins.base;
-  @include button-mixins.outlined;
-
+  @include mdc-ripple.surface();
+  @include mdc-ripple.radius-bounded();
+  @include mdc-ripple-theme.states(primary, false);
+  @include mdc-button-base.base(mdc-feature-targeting.all());
+  @include mdc-button-shared-theme.shape-radius(small);
+  @include mdc-button-shared-theme.container-fill-color(transparent);
+  @include mdc-button-shared-theme.ink-color(primary);
+  @include mdc-button-shared-theme.density(0);
+  @include mdc-button-outlined.outlined(mdc-feature-targeting.all());
+  @include mdc-button-outlined-theme.outline-width(mdc-button-outlined-theme.$outlined-border-width);
+  @include mdc-button-outlined-theme.outline-color(primary);
+
+  text-transform: none;
+  overflow: hidden;
   width: 100%;
   box-sizing: border-box;
   transition: mdc-animation.enter(background-color, 150ms);
@@ -78,8 +96,9 @@
 }
 
 @mixin dense() {
-  @include button-mixins.dense;
+  @include mdc-button-shared-theme.density(-3);
 
+  height: 1.5rem;
   font-size: 0.75rem;
 }
 

package/styles/calendar/calendar.scss

@@ -6,10 +6,6 @@
 @use './mixins';
 @use './variables';
 
-// Sub-component styles
-@use '../button/forge-button';
-@use '../icon-button/forge-icon-button';
-
 @include mixins.core-styles;
 
 :host {

package/styles/{button/forge-button.scss → checkbox/_configuration.scss}

@@ -3,7 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './button.mixins' as mixins;
+@use './token-utils' as *;
 
-@include mixins.styles;
+@mixin configuration {
+  @include tokens;
+}

package/styles/checkbox/_core.scss

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+@mixin host {
+  display: inline-block;
+}
+
+@mixin checkbox {
+  position: relative;
+  flex-direction: #{token(direction)};
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: #{token(justify)};
+  gap: #{token(gap)};
+
+  display: flex;
+}
+
+@mixin checkbox-disabled {
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin container {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  border-radius: #{token(state-layer-shape)};
+  inline-size: #{token(state-layer-width)};
+  block-size: #{token(state-layer-height)};
+
+  cursor: pointer;
+}
+
+@mixin container-dense {
+  inline-size: #{token(state-layer-dense-width)};
+  block-size: #{token(state-layer-dense-height)};
+}
+
+@mixin container-disabled {
+  cursor: not-allowed;
+}
+
+@mixin input {
+  position: absolute;
+  z-index: 1;
+
+  appearance: none;
+
+  outline: none;
+  margin: 0;
+  inline-size: 100%;
+  block-size: 100%;
+
+  cursor: unset;
+}
+
+@mixin background {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  transition-property: background-color, border-width, border-color;
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(background-animation-timing)};
+
+  box-shadow: #{token(elevation)};
+  border-style: solid;
+  border-width: #{token(unchecked-border-width)};
+  border-color: #{token(unchecked-border-color)};
+  border-radius: #{token(shape)};
+  box-sizing: border-box;
+  block-size: #{token(height)};
+  inline-size: #{token(width)};
+
+  background-color: #{token(background-color)};
+}
+
+@mixin background-checked {
+  border-style: solid;
+  border-width: #{token(checked-border-width)};
+  border-color: #{token(checked-border-color)};
+
+  background-color: #{token(checked-background-color)};
+}
+
+@mixin icon {
+  position: absolute;
+
+  transition-property: stroke-dashoffset;
+  transition-duration: #{token(animation-duration)};
+  transition-timing-function: #{token(icon-animation-timing)};
+
+  fill: none;
+  stroke-width: #{token(icon-stroke-width)};
+}
+
+@mixin icon-checked {
+  stroke: #{token(icon-checked-color)};
+  stroke-dasharray: 30;
+}
+
+@mixin icon-checked-hidden {
+  transition-delay: 0s;
+  
+  stroke-dashoffset: 30;
+}
+
+@mixin icon-checked-visible {
+  transition-delay: #{token(animation-duration)};
+
+  stroke-dashoffset: 0;
+
+  // Animate from right to left in RTL
+  &:dir(rtl) {
+    stroke-dashoffset: 60;
+  }
+}
+
+@mixin icon-indeterminate {
+  stroke: #{token(icon-indeterminate-color)};
+  stroke-dasharray: 20;
+}
+
+@mixin icon-indeterminate-hidden {
+  transition-delay: 0s;
+  
+  stroke-dashoffset: 20;
+}
+
+@mixin icon-indeterminate-visible {
+  transition-delay: #{token(animation-duration)};
+
+  stroke-dashoffset: 0;
+
+  // Animate from right to left in RTL
+  &:dir(rtl) {
+    stroke-dashoffset: 40;
+  }
+}
+
+@mixin label {
+  @include typography.style(label);
+
+  &:empty {
+    display: none;
+  }
+}

package/styles/checkbox/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/checkbox/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: checkbox;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/styles/checkbox/checkbox.scss

@@ -3,17 +3,153 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './checkbox.mixins' as mixins;
-@use '../form-field/mixins' as form-field-mixins;
-
-@include mixins.core-styles;
-@include form-field-mixins.shadow-styles;
+@use './core';
+@use './configuration';
+@use '../focus-indicator';
+@use '../state-layer';
+@use './token-utils' as *;
 
 :host {
-  display: inline-block;
+  @include core.host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+// Unchecked
+.forge-checkbox {
+  @include configuration.configuration;
+}
+
+.forge-checkbox {
+  @include core.checkbox;
+
+  .container {
+    @include core.container;
+  }
+
+  .input {
+    @include core.input;
+  }
+
+  .background {
+    @include core.background;
+  }
+
+  .icon {
+    @include core.icon;
+
+    &--checked {
+      @include core.icon-checked;
+      @include core.icon-checked-hidden;
+    }
+
+    &--indeterminate {
+      @include core.icon-indeterminate;
+      @include core.icon-indeterminate-hidden;
+    }
+  }
+
+  .label {
+    @include core.label;
+  }
+
+  ::slotted([slot=input]) {
+    @include core.input;
+  }
+}
+
+// Checked
+:host([checked]) {
+  .background {
+    @include core.background-checked;
+  }
+
+  .icon {
+    &--checked {
+      @include core.icon-checked-visible;
+    }
+
+    &--indeterminate {
+      @include core.icon-indeterminate-hidden;
+    }
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(state-layer-checked-color)}
+    ));
+  }
+}
+
+// Indeterminate
+:host([indeterminate]) {
+  .background {
+    @include core.background-checked;
+  }
+
+  .icon {
+    &--checked {
+      @include core.icon-checked-hidden;
+    }
+
+    &--indeterminate {
+      @include core.icon-indeterminate-visible;
+    }
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(state-layer-checked-color)}
+    ));
+  }
+}
+
+// Dense
+:host([dense]) {
+  .forge-checkbox {
+    .container {
+      @include core.container-dense;
+    }
+  }
+}
+
+:host([disabled]) {
+  .forge-checkbox {
+    @include core.checkbox-disabled;
+
+    .container {
+      @include core.container-disabled;
+    }
+  }
+}
+
+// Readonly
+:host([readonly]) {
+  .forge-checkbox {
+    .container {
+      @include core.container-disabled;
+    }
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion) {
+  .forge-checkbox {
+    @include override(animation-duration, 0s, value);
+  }
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(state-layer-unchecked-color)}
+  ));
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    shape: 0px, // Requires unit
+    outward-offset: 8px
+  ));
+}

package/styles/checkbox/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './configuration';
+@forward './core';
+@forward './token-utils' show provide-theme;