@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/styles/chips/chip/chip.scss

@@ -3,20 +3,272 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme';
-@use './mixins';
-@use '../../ripple/forge-ripple';
+@use './core' as *;
+@use '../../avatar';
+@use '../../icon-button';
+@use '../../focus-indicator';
+@use '../../state-layer';
+@use '../../core/styles/theme';
+@use '../../core/styles/typography';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([theme=error]) {
-  --mdc-theme-primary: var(--mdc-theme-error);
+//
+// Base
+//
+
+.forge-chip {
+  @include tokens;
+}
+
+.forge-chip {
+  @include base;
+}
+
+//
+// Trigger
+//
+
+.trigger {
+  @include trigger;
+}
+
+//
+// Remove button
+//
+
+.remove {
+  @include remove-button;
+  
+  @include icon-button.provide-theme((
+    focus-indicator-color: #{token(color)}
+  ));
+}
+
+//
+// Focus indicator
+//
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(color)},
+    shape: #{token(shape)}
+  ));
+}
+
+//
+// State layer
+//
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(color)}
+  ));
+}
+
+//
+// Dense
+//
+
+:host([dense]) {
+  .forge-chip {
+    @include dense;
+  }
+
+  .trigger {
+    @include typography.provide(button, (
+      font-size: #{token(dense-font-size)},
+      font-weight: #{token(dense-font-weight)}
+    ));
+  }
+
+  .remove {
+    @include override(remove-button-spacing, remove-button-spacing-dense);
+
+    @include icon-button.provide-theme((
+      density-small-size: #{token(remove-button-height-dense)},
+      density-small-icon-size: #{token(remove-button-icon-size-dense)}
+    ));
+  }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      outward-offset: #{token(dense-focus-indicator-offset)}
+    ));
+  }
+
+  ::slotted(forge-avatar) {
+    @include override(avatar-spacing, avatar-spacing-dense);
+
+    @include typography.provide(subheading2, (
+      font-size: #{token(avatar-font-size-dense)}
+    ));
+
+    @include avatar.provide-theme((
+      size: #{token(avatar-size-dense)}
+    ));
+  }
+
+  ::slotted(:is([slot=start],[slot=leading],[slot=end],[slot=trailing])) {
+    @include override(icon-font-size, dense-icon-font-size);
+  }
+}
+
+//
+// Selected
+//
+
+$selectable: ':is([type=filter],[type=choice],[type=input])';
+$selected: '#{$selectable}[selected]';
+
+:host(#{$selected}) {
+  .forge-chip {
+    @include selected;
+  }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: #{token(background)}
+    ));
+  }
+}
+
+//
+// Invalid
+//
+
+:host([invalid]) {
+  .forge-chip {
+    @include invalid;
+  }
+}
+
+:host([invalid]#{$selected}) {
+  .forge-chip {
+    @include invalid-selected;
+  }
+}
+
+//
+// Disabled
+//
+
+:host([disabled]:not([href])) {
+  .forge-chip {
+    @include disabled;
+  }
+
+  .trigger {
+    @include trigger-disabled;
+  }
+}
+
+//
+// Slotted non-avatar
+//
+
+::slotted(:not(forge-avatar):is([slot=start],[slot=leading],[slot=end],[slot=trailing])) {
+  font-size: #{token(icon-font-size)};
+}
+
+//
+// Slotted <forge-avatar>
+//
+
+::slotted(forge-avatar:is([slot=start],[slot=leading])) {
+  margin-inline-start: #{token(avatar-spacing)};
+}
+
+::slotted(forge-avatar:is([slot=end],[slot=trailing])) {
+  margin-inline-end: #{token(avatar-spacing)};
+}
+
+::slotted(forge-avatar) {
+  @include typography.provide(subheading2, (
+    font-size: #{token(avatar-font-size)}
+  ));
+
+  @include avatar.provide-theme((
+    size: #{token(avatar-size)}
+  ));
+}
+
+//
+// Filter checkmark
+//
+
+:host([type=filter]) {
+  .checkmark {
+    @include checkmark-base;
+  }
+}
+
+:host([type=filter][selected]) {
+  .checkmark {
+    @include checkmark-selected;
+  }
+}
+
+//
+// Type - Input
+//
+
+:host([type=input]) {
+  .trigger {
+    padding-inline: #{token(padding-inline) 0};
+  }
+}
+
+//
+// Type - Field
+//
+
+:host([type=field]) {
+  .forge-chip {
+    @include field;
+  }
+}
+
+//
+// Theme
+//
+
+@each $theme in [secondary tertiary success warning error info] {
+  :host([theme=#{$theme}]) {
+    @if $theme == secondary {
+      // Special case handling for secondary theme to increase contrast
+      .forge-chip {
+        @include override(color, theme.variable(text-high), value);
+        @include override(border-color, theme.variable($theme), value);
+      }
+    } @else {
+      .forge-chip {
+        @include override(color, theme.variable($theme), value);
+      }
+    }
+  }
+
+  :host([theme=#{$theme}]#{$selected}) {
+    .forge-chip {
+      @include override(background, theme.variable($theme), value);
+      @include override(color, theme.variable(on-#{$theme}), value);
+    }
+  }
+
+  :host([theme=#{$theme}][type=field]) {
+    .forge-chip {
+      @include override(background, theme.variable(#{$theme}-container-low), value);
+      @include override(color, theme.variable(on-#{$theme}-container-low), value);
+    }
+  }
 }

package/styles/chips/chip/index.scss

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

package/styles/chips/chip-set/_core.scss

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-block;
+}
+
+@mixin base {
+  display: flex;
+  flex-wrap: wrap;
+  gap: #{token(spacing)};
+}
+
+@mixin vertical {
+  flex-direction: column;
+}

package/styles/chips/chip-set/_token-utils.scss

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

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

package/styles/chips/chip-set/index.scss

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

package/styles/core/styles/tokens/_token-utils.scss

@@ -94,8 +94,9 @@
   // Validate that all tokens are generated with matching keys
   @each $key, $var in $tokens {
     // The token value is always expected to start with this string per our naming convention: `var(--<prefix>-<module>-<key>, <value>)`
-    $expected: 'var(--#{config.$prefix}-#{$module}-#{$key},';
-    @if string.index($var, $expected) != 1 {
+    $expected: 'var(--#{config.$prefix}-#{$module}-#{$key})';
+    $expected-variant: 'var(--#{config.$prefix}-#{$module}-#{$key},';
+    @if string.index($var, $expected) != 1 and string.index($var, $expected-variant) != 1 {
       @error 'Mismatching token key "#{$key}" found for module "#{$module}" with value "#{$var}"';
     }
   }

package/styles/core/styles/tokens/button-area/_tokens.scss

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../utils';
+@use '../../border';
+
+$tokens: (
+  // Shared
+  primary-color: utils.module-val(button-area, primary-color, theme.variable(primary)),
+
+  // Base
+  cursor: utils.module-val(button-area, cursor, pointer),
+
+  // Disabled
+  disabled-cursor: utils.module-val(button-area, disabled-cursor, not-allowed),
+
+  // Focus indicator
+  focus-indicator-color: utils.module-val(button-area, focus-indicator-color, theme.variable(primary)),
+  focus-indicator-offset: utils.module-val(button-area, focus-indicator-offset, 4px),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/chips/chip/_tokens.scss

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../theme';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../border';
+@use '../../../animation';
+@use '../../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(chip, background, transparent),
+  color: utils.module-val(chip, color, theme.variable(primary)),
+  shape: utils.module-val(chip, shape, shape.variable(full)),
+  spacing: utils.module-val(chip, spacing, spacing.variable(xsmall)),
+  height: utils.module-val(chip, height, 32px),
+  padding-inline: utils.module-val(chip, padding-inline, spacing.variable(small)),
+  padding-block: utils.module-val(chip, padding-block, 0),
+  cursor: utils.module-val(chip, cursor, pointer),
+  icon-font-size: utils.module-val(chip, icon-font-size, 1.5rem),
+
+  // Disabled
+  disabled-opacity: utils.module-val(chip, disabled-opacity, theme.emphasis(medium-low)),
+  disabled-cursor: utils.module-val(chip, disabled-cursor, not-allowed),
+
+  // Dense
+  dense-height: utils.module-val(chip, dense-height, 24px),
+  dense-padding-inline: utils.module-val(chip, dense-padding-inline, spacing.variable(xsmall)),
+  dense-spacing: utils.module-val(chip, dense-spacing, spacing.variable(xxsmall)),
+  dense-font-size: utils.module-val(chip, dense-font-size, 0.75rem),
+  dense-font-weight: utils.module-val(chip, dense-font-weight, normal),
+  dense-focus-indicator-offset: utils.module-val(chip, dense-focus-indicator-offset, spacing.variable(xxxsmall)),
+  dense-icon-font-size: utils.module-val(chip, dense-icon-font-size, 1.25rem),
+  
+  // Remove button
+  remove-button-spacing: utils.module-val(chip, remove-button-spacing, #{spacing.variable(xsmall) spacing.variable(xxsmall)}),
+  remove-button-height-dense: utils.module-val(chip, remove-button-height-dense, 18px),
+  remove-button-icon-size-dense: utils.module-val(chip, remove-button-icon-size-dense, 16px),
+  remove-button-spacing-dense: utils.module-val(chip, remove-button-spacing-dense, #{0 spacing.variable(xxxsmall)}),
+
+  // Selected
+  selected-background: utils.module-val(chip, selected-background, theme.variable(primary)),
+  selected-color: utils.module-val(chip, selected-color, theme.variable(on-primary)),
+
+  // Invalid
+  invalid-color: utils.module-val(chip, invalid-color, theme.variable(error)),
+  invalid-selected-background: utils.module-val(chip, invalid-selected-background, theme.variable(error)),
+  invalid-selected-color: utils.module-val(chip, invalid-selected-color, theme.variable(on-error)),
+
+  // Border
+  border-width: utils.module-val(chip, border-width, border.variable(thin)),
+  border-style: utils.module-val(chip, border-style, solid),
+  border-color: utils.module-ref(chip, border-color, color),
+
+  // Field type
+  field-background: utils.module-val(chip, field-background, theme.variable(surface-container-low)),
+  field-color: utils.module-val(chip, field-color, theme.variable(on-surface-container-low)),
+  field-shape: utils.module-val(chip, field-shape, shape.variable(medium)),
+  field-border-color: utils.module-val(chip, field-border-color, transparent),
+  field-cursor: utils.module-val(chip, field-cursor, default),
+
+  // Checkmark
+  checkmark-size: utils.module-val(chip, checkmark-size, 1.25em),
+  checkmark-color: utils.module-ref(chip, checkmark-color, color),
+  checkmark-spacing: utils.module-val(chip, checkmark-spacing, spacing.variable(xsmall)),
+
+  // Avatar
+  avatar-size: utils.module-val(chip, avatar-size, 24px),
+  avatar-size-dense: utils.module-val(chip, avatar-size-dense, 18px),
+  avatar-font-size: utils.module-val(chip, avatar-font-size, 0.75rem),
+  avatar-font-size-dense: utils.module-val(chip, avatar-font-size-dense, 0.5rem),
+  avatar-spacing: utils.module-val(chip, avatar-spacing, calc(#{spacing.variable(xsmall)} * -1)),
+  avatar-spacing-dense: utils.module-val(chip, avatar-spacing-dense, calc(#{spacing.variable(xxsmall)} * -1)),
+
+  // Animation
+  transition-duration: utils.module-val(chip, transition-duration, animation.variable(duration-short3)),
+  transition-easing: utils.module-val(chip, transition-easing, animation.variable(easing-standard)),
+  checkmark-transition-delay: utils.module-val(chip, checkmark-transition-delay, 50ms),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/chips/chip-set/_tokens.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../spacing';
+@use '../../../utils';
+
+$tokens: (
+  spacing: utils.module-val(chip-set, spacing, spacing.variable(xsmall))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/divider/_tokens.scss

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../utils';
+@use '../../border';
+
+$tokens: (
+  color: utils.module-val(divider, color, theme.variable(outline)),
+  width: utils.module-val(divider, width, border.variable(thin)),
+  border-style: utils.module-val(divider, border-style, solid),
+  margin: utils.module-val(divider, margin, 0),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}