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

package/styles/button/_core.scss

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+@mixin host {
+  display: #{token(display)};
+  position: relative;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin base {
+  @include typography.style(button);
+  
+  position: relative;
+  display: #{token(display)};
+  align-items: center;
+  justify-content: #{token(justify)};
+  gap: #{token(spacing)};
+  z-index: 0;
+
+  box-sizing: border-box;
+  min-inline-size: #{token(min-width)};
+  height: #{token(height)};
+  inline-size: 100%;
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+  border-start-start-radius: #{token(shape-start-start-radius)};
+  border-start-end-radius: #{token(shape-start-end-radius)};
+  border-end-start-radius: #{token(shape-end-start-radius)};
+  border-end-end-radius: #{token(shape-end-end-radius)};
+  padding-block: #{token(padding-block)};
+  padding-inline: #{token(padding-inline)};
+  box-shadow: #{token(shadow)};
+
+  outline: none;
+  user-select: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+  text-decoration: none;
+  white-space: nowrap;
+
+  background: #{token(background)};
+  color: #{token(color)};
+  cursor: #{token(cursor)};
+
+  transition-property: box-shadow, background;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  &:hover {
+    @include override(shadow, hover-shadow);
+
+    background: #{token(hover-background)};
+  }
+
+  &:active {
+    @include override(shadow, active-shadow);
+
+    background: #{token(active-background)};
+  }
+}
+
+@mixin slotted-start-end {
+  font-size: #{token(icon-size)};
+}
+
+@mixin anchor-base {
+  position: absolute;
+  inset: 0;
+  text-decoration: none;
+}
+
+@mixin text {
+  @include override(focus-indicator-offset, text-focus-indicator-offset);
+}
+
+@mixin filled {
+  @include override(background, filled-background);
+  @include override(color, filled-color);
+}
+
+@mixin raised {
+  @include override(shadow, raised-shadow);
+
+  &:hover {
+    @include override(shadow, raised-hover-shadow);
+  }
+
+  &:active {
+    @include override(shadow, raised-active-shadow);
+  }
+}
+
+@mixin tonal {
+  @include override(background, tonal-background);
+  @include override(color, tonal-color);
+}
+
+@mixin outlined {
+  @include override(background, outlined-background);
+  @include override(color, outlined-color);
+  @include override(border-width, outlined-border-width);
+  @include override(border-style, outlined-border-style);
+  @include override(border-color, outlined-border-color);
+}
+
+@mixin link {
+  @include override(color, link-color);
+  @include override(height, link-height);
+  @include override(padding, link-padding);
+  @include override(focus-indicator-offset, link-focus-indicator-offset);
+
+  text-decoration: #{token(link-text-decoration)};
+  line-height: #{token(link-line-height)};
+  transition: opacity #{token(link-transition-duration)} #{token(link-transition-timing)};
+  inline-size: #{token(link-width)};
+
+  &:hover {
+    text-decoration: #{token(link-hover-text-decoration)};
+  }
+
+  &:active {
+    opacity: #{token(link-active-opacity)};
+  }
+}
+
+@mixin host-disabled {
+  cursor: #{token(disabled-cursor)};
+}
+
+@mixin disabled {
+  @include override(background, disabled-background);
+  @include override(color, disabled-text-color);
+  @include override(shadow, disabled-shadow);
+
+  pointer-events: none;
+}
+
+@mixin filled-disabled {
+  @include override(background, filled-disabled-background);
+  @include override(color, filled-disabled-color);
+}
+
+@mixin raised-disabled {
+  @include override(shadow, raised-disabled-shadow);
+}
+
+@mixin tonal-disabled {
+  @include override(background, tonal-disabled-background);
+  @include override(color, tonal-disabled-color);
+}
+
+@mixin outlined-disabled {
+  @include override(border-color, disabled-border-color);
+}
+
+@mixin dense {
+  @include override(height, dense-height);
+}
+
+@mixin pill {
+  @include override(shape, pill-shape);
+  @include override(padding-inline, pill-padding-inline);
+}
+
+@mixin popover-icon {
+  transition: rotate #{token(popover-icon-transition-duration)} #{token(popover-icon-transition-timing)};
+}
+
+@mixin popover-icon-open {
+  rotate: #{token(popover-icon-open-rotation)};
+}

package/styles/button/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/button/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: button;
+$_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/button/button.scss

@@ -0,0 +1,221 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './configuration' as *;
+@use './core';
+@use '../core/styles/theme';
+@use '../state-layer';
+@use '../focus-indicator';
+@use '../circular-progress';
+@use './token-utils' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host-configuration;
+}
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-button {
+  @include 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;
+  }
+}
+
+//
+// Slotted - circular progress
+//
+
+::slotted(forge-circular-progress) {
+  @include circular-progress.provide-theme((
+    indicator-color: #{token(color)},
+    track-color: transparent,
+    size: 1em
+  ));
+}

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);
+}