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

package/styles/app-bar/search/app-bar-search.scss

@@ -3,14 +3,60 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
-
-@include mixins.core-styles;
+@use './core' as *;
+@use '../../focus-indicator';
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-app-bar-search {
+  @include tokens;
+}
+
+.forge-app-bar-search {
+  @include base;
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  cursor: not-allowed;
+
+  .forge-app-bar-search {
+    pointer-events: none;
+    opacity: 38%;
+  }
+
+  ::slotted(input) {
+    pointer-events: none;
+  }
+}
+
+//
+// Focus indicator
+//
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: currentColor,
+    outward-offset: 0px // Required unit
+  ));
+}
+
+//
+// Slotted input
+//
+
+::slotted(input) {
+  @include input;
+}

package/styles/{switch/_configuration.scss → app-bar/search/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,23 +128,32 @@ forge-focus-indicator {
 
 :host([variant=outlined]) {
   .forge-button {
-    @include core.outlined;
+    @include outlined;
   }
 }
 
 :host([variant=link]) {
   .forge-button {
-    @include core.link;
+    @include link;
   }
 }
 
+//
+// Full width
+//
+
+:host([full-width]) {
+  width: 100%;
+}
+
+
 //
 // Dense
 //
 
 :host([dense]) {
   .forge-button {
-    @include core.dense;
+    @include dense;
   }
 }
 
@@ -148,7 +163,7 @@ forge-focus-indicator {
 
 :host([pill]) {
   .forge-button {
-    @include core.pill;
+    @include pill;
   }
 
   forge-focus-indicator {
@@ -161,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;
   }
 }
 
@@ -198,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';

package/styles/button-toggle/button-toggle-group/_core.scss

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: #{token(display)};
+}
+
+@mixin base {
+  display: flex;
+  align-items: center;
+  gap: #{token(gap)};
+
+  box-sizing: border-box;
+  height: #{token(height)};
+
+  border-width: #{token(outline-width)};
+  border-style: #{token(outline-style)};
+  border-color: #{token(outline-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)};
+
+  transition-property: border-color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+}
+
+@mixin active {
+  @include override(outline-color, outline-color-active);
+}
+
+@mixin no-outline {
+  @include override(padding, 0, value);
+  @include override(outline-style, none, value);
+}
+
+@mixin vertical {
+  height: auto;
+  flex-direction: column;
+}
+
+@mixin host-stretch {
+  display: block;
+}
+
+@mixin stretch {
+  width: 100%;
+}
+
+@mixin dense {
+  @include override(padding, 0, value);
+  @include override(height, dense-height);
+}

package/styles/button-toggle/button-toggle-group/_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-group/tokens';
+@use '../../core/styles/tokens/token-utils';
+
+$_module: button-toggle-group;
+$_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);
+}