@tylertech/forge 3.0.0-next.15 → 3.0.0-next.17

package/styles/avatar/avatar.scss

@@ -3,14 +3,32 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-@include mixins.core-styles;
+//
+// Base
+//
+
+.forge-avatar {
+  @include tokens;
+}
+
+.forge-avatar {
+  @include base;
+
+  &--image {
+    @include base-with-image;
+  }
+}

package/styles/badge/_core.scss

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+
+@forward './token-utils';
+
+@mixin host {
+  display: flex;
+  box-sizing: border-box;
+}
+
+@mixin base {
+  @include typography.style(label);
+
+  background: #{token(background)};
+  color: #{token(color)};
+
+  height: #{token(height)};
+  min-width: #{token(min-width)};
+  max-width: #{token(max-width)};
+
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+
+  display: inline-flex;
+  align-items: center;
+  gap: #{token(gap)};
+  border-radius: #{token(shape)};
+  padding-inline: #{token(padding-inline)};
+  padding-block: #{token(padding-block)};
+  overflow: hidden;
+  box-sizing: border-box;
+  
+  pointer-events: none;
+  
+  transition: transform #{token(transition-duration)} #{token(transition-easing)};
+  
+  font-weight: #{token(font-weight)};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin dot {
+  @include override(height, dot-height);
+  @include override(min-width, auto, value);
+
+  padding: #{token(dot-padding)};
+  width: #{token(dot-width)};
+}
+
+@mixin hide {
+  transform: scale(0);
+}

package/styles/badge/_token-utils.scss

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

@@ -3,38 +3,124 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './mixins';
+@use './core' as *;
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([positioned]) {
-  @include mixins.host-positioned;
+//
+// Base
+//
+
+.forge-badge {
+  @include tokens;
+}
+
+.forge-badge {
+  @include base;
+}
+
+//
+// Start/End slots
+//
+
+::slotted(:is([slot=start],[slot=end])) {
+  font-size: inherit;
 }
 
+//
+// Hide
+//
+
+:host([hide]) {
+  .forge-badge {
+    @include hide;
+  }
+}
+
+//
+// Dot
+//
+
 :host([dot]) {
-  top: 0.5rem;
+  .forge-badge {
+    @include dot;
+  }
   
   .forge-badge > slot {
     display: none;
   }
 }
 
-:host([static]) {
-  @include mixins.static;
+//
+// Themes
+//
+
+// General theme overrides
+@each $theme in [primary secondary tertiary success warning] {
+  :host([theme=#{$theme}]) {
+    .forge-badge {
+      @include override(background, theme.variable(#{$theme}-container), value);
+      @include override(color, theme.variable(on-#{$theme}-container), value);
+    }
+  }
+  
+  :host([strong][theme=#{$theme}]) {
+    .forge-badge {
+      @include override(background, theme.variable($theme), value);
+      @include override(color, theme.variable(on-#{$theme}), value);
+    }
+  }
+}
+
+// Map both "error" and "danger" for backwards compatibility with legacy "danger" theme
+:host(:not([strong]):is([theme=error],[theme=danger])) {
+  .forge-badge {
+    @include override(background, theme.variable(error-container), value);
+    @include override(color, theme.variable(error), value);
+  }
+}
+:host([strong]:is([theme=error],[theme=danger])) {
+  .forge-badge {
+    @include override(background, theme.variable(error), value);
+    @include override(color, theme.variable(on-error), value);
+  }
 }
 
-@include mixins.default-theme();
-@include mixins.theme('danger');
-@include mixins.theme('warning');
-@include mixins.theme('success');
-@include mixins.theme('info-primary');
-@include mixins.theme('info-secondary');
+// Map both "info" and "info-primary" for backwards compatibility with "info" theme
+:host(:not([strong]):is([theme=info],[theme=info-primary])) {
+  .forge-badge {
+    @include override(background, theme.variable(info-container), value);
+    @include override(color, theme.variable(on-info-container), value);
+  }
+}
+:host([strong]:is([theme=info],[theme=info-primary])) {
+  .forge-badge {
+    @include override(background, theme.variable(info), value);
+    @include override(color, theme.variable(on-info), value);
+  }
+}
+
+// Support "info-secondary" separately since it is not a core theme
+:host(:not([strong])[theme=info-secondary]) {
+  .forge-badge {
+    @include override(background, theme.variable(surface-container-low), value);
+    @include override(color, theme.variable(on-surface-container-low), value);
+  }
+}
+:host([strong][theme=info-secondary]) {
+  .forge-badge {
+    @include override(background, theme.variable(surface-inverse), value);
+    @include override(color, theme.variable(on-surface-inverse), value);
+  }
+}

package/styles/{focus-indicator/_configuration.scss → badge/index.scss}

@@ -3,8 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './token-utils' as *;
-
-@mixin configuration {
-  @include tokens;
-}
+@forward './core';

package/styles/button/_core.scss

@@ -6,6 +6,8 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: #{token(display)};
   position: relative;

package/styles/button/button.scss

@@ -3,24 +3,24 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 @use '../core/styles/theme';
 @use '../state-layer';
 @use '../focus-indicator';
 @use '../circular-progress';
-@use './token-utils' as *;
 
 //
 // Host
 //
 
+$host-tokens: [display disabled-cursor];
+
 :host {
-  @include host-configuration;
+  @include tokens($includes: $host-tokens);;
 }
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -32,19 +32,19 @@
 //
 
 .forge-button {
-  @include configuration;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-button {
-  @include core.base;
+  @include base;
   
   ::slotted(:is([slot=start],[slot=end])) {
-    @include core.slotted-start-end;
+    @include slotted-start-end;
   }
 }
 
 a {
-  @include core.anchor-base;
+  @include anchor-base;
 }
 
 forge-state-layer {
@@ -68,6 +68,12 @@ forge-focus-indicator {
       @include override(primary-color, theme.variable($theme), value);
     }
   }
+
+  :host([theme=#{$theme}]:is([variant=filled],[variant=raised])) {
+    .forge-button {
+      @include override(filled-color, theme.variable(on-#{$theme}), value);
+    }
+  }
   
   :host([theme=#{$theme}][variant=tonal]) {
     .forge-button {
@@ -90,13 +96,13 @@ forge-focus-indicator {
 
 :host(:is(:not([variant], [variant=text]))) {
   .forge-button {
-    @include core.text;
+    @include text;
   }
 }
 
 :host(:is([variant=filled],[variant=raised])) {
   .forge-button {
-    @include core.filled;
+    @include filled;
   }
 
   forge-state-layer {
@@ -106,13 +112,13 @@ forge-focus-indicator {
 
 :host([variant=raised]) {
   .forge-button {
-    @include core.raised;
+    @include raised;
   }
 }
 
 :host([variant=tonal]) {
   .forge-button {
-    @include core.tonal;
+    @include tonal;
   }
 
   forge-state-layer {
@@ -122,13 +128,13 @@ forge-focus-indicator {
 
 :host([variant=outlined]) {
   .forge-button {
-    @include core.outlined;
+    @include outlined;
   }
 }
 
 :host([variant=link]) {
   .forge-button {
-    @include core.link;
+    @include link;
   }
 }
 
@@ -147,7 +153,7 @@ forge-focus-indicator {
 
 :host([dense]) {
   .forge-button {
-    @include core.dense;
+    @include dense;
   }
 }
 
@@ -157,7 +163,7 @@ forge-focus-indicator {
 
 :host([pill]) {
   .forge-button {
-    @include core.pill;
+    @include pill;
   }
 
   forge-focus-indicator {
@@ -170,34 +176,34 @@ forge-focus-indicator {
 //
 
 :host(:not([anchor])[disabled]) {
-  @include core.host-disabled;
+  @include host-disabled;
 
   .forge-button {
-    @include core.disabled;
+    @include disabled;
   }
 }
 
 :host(:not([anchor])[variant=outlined][disabled]) {
   .forge-button {
-    @include core.outlined-disabled;
+    @include outlined-disabled;
   }
 }
 
 :host(:not([anchor])[variant=tonal][disabled]) {
   .forge-button {
-    @include core.tonal-disabled;
+    @include tonal-disabled;
   }
 }
 
 :host(:not([anchor]):is([variant=filled],[variant=raised])[disabled]) {
   .forge-button {
-    @include core.filled-disabled;
+    @include filled-disabled;
   }
 }
 
 :host(:not([anchor])[variant=raised][disabled]) {
   .forge-button {
-    @include core.raised-disabled;
+    @include raised-disabled;
   }
 }
 
@@ -207,13 +213,13 @@ forge-focus-indicator {
 
 :host([popover-icon]) {
   .forge-button__popover-icon {
-    @include core.popover-icon;
+    @include popover-icon;
   }
 }
 
 :host([popover-icon][aria-expanded=true]) {
   .forge-button__popover-icon {
-    @include core.popover-icon-open;
+    @include popover-icon-open;
   }
 }
 

package/styles/button/index.scss

@@ -3,6 +3,4 @@
  * 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/_core.scss

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: #{token(display)};
+  position: relative;
+  outline: none;
+  height: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin base {
+  @include typography.style(button);
+  
+  position: relative;
+  display: #{token(display)};
+  align-items: center;
+  justify-content: center;
+  gap: #{token(spacing)};
+  z-index: 0;
+
+  box-sizing: border-box;
+  min-inline-size: #{token(min-width)};
+  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)};
+  border-start-end-radius: #{token(shape-start-end)};
+  border-end-start-radius: #{token(shape-end-start)};
+  border-end-end-radius: #{token(shape-end-end)};
+  padding-block: #{token(padding-block)};
+  padding-inline: #{token(padding-inline)};
+
+  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: color, background-color, border-color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin selected {
+  @include override(background, selected-background);
+  @include override(color, selected-color);
+  @include override(border-color, background);
+}
+
+@mixin host-disabled {
+  @include override(cursor, disabled-cursor);
+}
+
+@mixin disabled {
+  @include override(background, disabled-background);
+  @include override(color, disabled-color);
+
+  opacity: #{token(disabled-opacity)};
+  pointer-events: none;
+}
+
+@mixin selected-disabled {
+  @include override(background, selected-disabled-background);
+}

package/styles/button-toggle/button-toggle/_token-utils.scss

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

@@ -3,33 +3,87 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
-@use '../../ripple/forge-ripple';
+@use './core' as *;
+@use '../../state-layer';
+@use '../../focus-indicator';
 
-@include mixins.core-styles;
+//
+// Host
+//
+
+$_host-tokens: [display];
 
 :host {
-  @include mixins.host;
+  @include tokens($includes: $_host-tokens);
+}
+
+:host {
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([stretch]) {
-  width: 100%;
-  flex: 1;
+//
+// Base
+//
+
+.forge-button-toggle {
+  @include tokens($excludes: $_host-tokens);
+}
+
+.forge-button-toggle {
+  @include base;
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(color)}
+    ));
+  }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      outward-offset: #{token(focus-indicator-offset)},
+      color: #{token(focus-indicator-color)},
+      shape: #{token(shape)},
+      shape-start-start: #{token(shape-start-start)},
+      shape-start-end: #{token(shape-start-end)},
+      shape-end-start: #{token(shape-end-start)},
+      shape-end-end: #{token(shape-end-end)},
+    ));
+  }
+}
+
+::slotted(:is([slot=start],[slot=end])) {
+  font-size: #{token(icon-size)};
 }
 
-:host([selected-adjacent]) {
+//
+// Selected
+//
+
+:host([selected]) {
   .forge-button-toggle {
-    border-left-color: var(--mdc-theme-text-primary-on-dark);
+    @include selected;
   }
 }
 
-:host([selected-adjacent-vertical]) {
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include host-disabled;
+  cursor: not-allowed;
+  
   .forge-button-toggle {
-    border-top-color: var(--mdc-theme-text-primary-on-dark);
+    @include disabled;
   }
 }
 
+:host([disabled][selected]) {
+  .forge-button-toggle {
+    @include selected-disabled;
+  }
+}

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

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