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

package/styles/banner/_token-utils.scss

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

@@ -3,21 +3,121 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../button';
+@use '../icon-button';
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  display: block;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-@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');
+//
+// Base
+//
+
+.forge-banner {
+  @include tokens;
+}
+
+.forge-banner {
+  @include base;
+
+  .inner {
+    @include inner;
+  }
+
+  .container {
+    @include container;
+  }
+
+  forge-icon-button {
+    @include icon-button.provide-theme((
+      focus-indicator-color: #{token(color)}
+    ));
+  }
+}
+
+//
+// Slotted - button
+//
+
+::slotted(forge-button[slot=button]) {
+  @include button.provide-theme((
+    primary-color: #{token(color)}
+  ));
+}
+
+//
+// Dismissed
+//
+
+:host([dismissed]) {
+  .forge-banner {
+    @include dismissed;
+  }
+}
+
+//
+// Theme
+//
+
+@each $theme in [primary secondary tertiary success error warning] {
+  :host([theme=#{$theme}]) {
+    .forge-banner {
+      @include override(background, theme.variable(#{$theme}-container), value);
+    }
+  }
+}
+
+// Backwards compatibility with the new error theme
+:host([theme=danger]) {
+  .forge-banner {
+    @include override(background, theme.variable(error-container), value);
+  }
+}
+
+// Use surface theme for info-secondary
+:host([theme=info-secondary]) {
+  .forge-banner {
+    @include override(background, theme.variable(surface-container), value);
+  }
+}
+
+//
+// Responsive
+//
+
+@container (max-width: 600px) {
+  .forge-banner {
+    .container {
+      display: grid;
+      grid-template-rows: [content] 1fr [button] auto;
+      grid-template-columns: [content] 1fr;
+      place-items: normal;
+    }
+
+    &.has-icon {
+      .container {
+        grid-template-columns: [icon] auto [content] 1fr;
+      }
+    }
+
+    .inner {
+      place-items: normal;
+    }
+
+    .button-container {
+      grid-row: button;
+      grid-column: content;
+    }
+  }
+}

package/styles/banner/index.scss

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

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../shape';
+@use '../../theme';
+@use '../../utils';
+
+$tokens: (
+  size: utils.module-val(avatar, size, 40px),
+  background: utils.module-val(avatar, background, theme.variable(tertiary)),
+  color: utils.module-val(avatar, color, theme.variable(on-tertiary)),
+  transition-duration: utils.module-val(avatar, transition-duration, animation.variable(duration-short4)),
+  transition-timing: utils.module-val(avatar, transition-timing, animation.variable(easing-standard)),
+  shape: utils.module-val(avatar, shape, shape.variable(round))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,42 @@
+/**
+ * @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: (
+  background: utils.module-val(badge, background, theme.variable(secondary)),
+  color: utils.module-val(badge, color, theme.variable(on-secondary)),
+  shape: utils.module-val(badge, shape, shape.variable(full)),
+  height: utils.module-val(badge, height, 20px),
+  min-width: utils.module-val(badge, min-width, 0),
+  max-width: utils.module-val(badge, max-width, auto),
+  padding-inline: utils.module-val(badge, padding-inline, spacing.variable(xsmall)),
+  padding-block: utils.module-val(badge, padding-block, 0),
+  border-width: utils.module-val(badge, border-width, border.variable(thin)),
+  border-style: utils.module-val(badge, border-style, none),
+  border-color: utils.module-ref(badge, border-color, color),
+  gap: utils.module-val(badge, gap, spacing.variable(xsmall)),
+  font-weight: utils.module-val(badge, font-weight, bold),
+
+  // Dot
+  dot-size: utils.module-val(badge, dot-size, 8px),
+  dot-height: utils.module-ref(badge, dot-height, dot-size),
+  dot-width: utils.module-ref(badge, dot-width, dot-size),
+  dot-padding: utils.module-val(badge, dot-padding, 0),
+
+  // Transition
+  transition-duration: utils.module-val(badge, transition-duration, animation.variable(duration-short4)),
+  transition-easing: utils.module-val(badge, transition-easing, animation.variable(easing-decelerate)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../spacing';
+@use '../../theme';
+@use '../../border';
+@use '../../utils';
+
+$tokens: (
+  background: utils.module-val(banner, background, theme.variable(info-container)),
+  color: utils.module-val(banner, color, theme.variable(text-high)),
+  gap: utils.module-val(banner, gap, spacing.variable(small)),
+  padding-inline: utils.module-val(banner, padding-inline, spacing.variable(large)),
+  padding-block: utils.module-val(banner, padding-block, spacing.variable(small)),
+  transition-duration: utils.module-val(banner, transition-duration, animation.variable(duration-short4)),
+  transition-easing: utils.module-val(banner, transition-easing, animation.variable(easing-standard))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/inline-message/_tokens.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../shape';
+@use '../../spacing';
+@use '../../border';
+@use '../../utils';
+
+$tokens: (
+  background: utils.module-val(inline-message, background, theme.variable(info-container-low)),
+  color: utils.module-val(inline-message, color, theme.variable(text-high)),
+  shape: utils.module-val(inline-message, shape, shape.variable(medium)),
+  padding: utils.module-val(inline-message, padding, spacing.variable(small)),
+  padding-inline: utils.module-ref(inline-message, padding-inline, padding),
+  padding-block: utils.module-ref(inline-message, padding-block, padding),
+  border-width: utils.module-val(inline-message, border-width, border.variable(thin)),
+  border-style: utils.module-val(inline-message, border-style, none),
+  border-color: utils.module-val(inline-message, border-color, theme.variable(info-container)),
+  gap: utils.module-val(inline-message, gap, spacing.variable(small)),
+  icon-gap: utils.module-ref(inline-message, icon-gap, gap),
+  content-gap: utils.module-ref(inline-message, content-gap, gap),
+  icon-color: utils.module-val(inline-message, icon-color, theme.variable(on-info-container-low))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -23,7 +23,10 @@
   $surface-tone: color-utils.tone($surface);
 
   // The container colors are the provided color mixed with the surface color at lower emphasis levels
+  $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(medium-low));
   $container: theme-utils.hexify($color, $surface, color-emphasis.value(low));
+  $container-low: theme-utils.hexify($color, $surface, color-emphasis.value(lower));
+  $container-minimum: theme-utils.hexify($color, $surface, color-emphasis.value(minimum));
 
   // The on-color is the contrast color against the provided color
   $on-color: theme-utils.contrast($color);
@@ -31,7 +34,10 @@
   // The on-container colors are the contrast color for the provided color mixed with the
   // container color at a lower emphasis to let the contrast color bleed through for
   // increased contrast against the lower emphasis container color
+  $on-container-high: theme-utils.contrast($container-high);
   $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(medium));
+  $on-container-low: theme-utils.hexify($color, theme-utils.contrast($container-low), color-emphasis.value(medium));
+  $on-container-minimum: theme-utils.hexify($color, theme-utils.contrast($container-minimum), color-emphasis.value(medium));
 
   // Compute contrast ratio for foreground colors against their corresponding background
   $minimum-ratio: 4.5;
@@ -41,11 +47,26 @@
   @if color-utils.contrast-ratio($container, $on-container) < $minimum-ratio {
     @warn 'The contrast ratio  between "#{$name}-container" and "on-#{$name}-container" is less than 4.5:1.';
   }
+  @if color-utils.contrast-ratio($container-high, $on-container-high) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container-high" and "on-#{$name}-container-high" is less than 4.5:1.';
+  }
+  @if color-utils.contrast-ratio($container-low, $on-container-low) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container-low" and "on-#{$name}-container-low" is less than 4.5:1.';
+  }
+  @if color-utils.contrast-ratio($container-minimum, $on-container-minimum) < $minimum-ratio {
+    @warn 'The contrast ratio  between "#{$name}-container-minimum" and "on-#{$name}-container-minimum" is less than 4.5:1.';
+  }
 
   @return (
     #{$name}: $color,
+    #{$name}-container-minimum: $container-minimum,
+    #{$name}-container-low: $container-low,
     #{$name}-container: $container,
+    #{$name}-container-high: $container-high,
     on-#{$name}: $on-color,
-    on-#{$name}-container: $on-container
+    on-#{$name}-container-minimum: $on-container-minimum,
+    on-#{$name}-container-low: $on-container-low,
+    on-#{$name}-container: $on-container,
+    on-#{$name}-container-high: $on-container-high
   );
 }

package/styles/core/styles/typography/index.scss

@@ -97,7 +97,7 @@
 @mixin anchor {
   a:not([forge-ignore]),
   .forge-typography--link {
-    text-decoration: underline;
+    text-decoration: var(--forge-typography-link-text-decoration, underline);
     color: theme.variable(primary);
     cursor: pointer;
 

package/styles/deprecated/button/deprecated-button.scss

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../button/core' as *;
+@use '../../state-layer';
+@use '../../focus-indicator';
+
+//
+// Host
+//
+
+:host {
+  @include tokens;
+}
+
+:host {
+  @include host;
+
+  border-radius: #{token(shape)};
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+::slotted(:is(button,a)) {
+  @include base;
+
+  --forge-icon-font-size: 1.25em;
+}
+
+::slotted(a) {
+  text-decoration: none;
+  --forge-typography-link-text-decoration: none;
+}
+
+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)}
+  ));
+}
+
+//
+// Types
+//
+
+:host(:is(:not([type],[type*=text]))) {
+  ::slotted(:is(button,a)) {
+    @include text;
+  }
+}
+
+:host(:is([type*=unelevated],[type*=raised])) {
+  ::slotted(:is(button,a)) {
+    @include filled;
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme(( color: #{token(filled-color)} ));
+  }
+}
+
+:host([type*=raised]) {
+  ::slotted(:is(button,a)) {
+    @include raised;
+  }
+}
+
+:host([type*=outlined]) {
+  ::slotted(:is(button,a)) {
+    @include outlined;
+  }
+}
+
+//
+// Full width
+//
+
+:host([full-width]) {
+  width: 100%;
+}
+
+
+//
+// Dense
+//
+
+:host(:is([dense],[type*=dense])) {
+  ::slotted(:is(button,a)) {
+    @include dense;
+  }
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include host-disabled;
+
+  ::slotted(button[disabled]) {
+    @include disabled;
+  }
+}
+
+:host([type*=outlined][disabled]) {
+  ::slotted(button[disabled]) {
+    @include outlined-disabled;
+  }
+}
+
+:host(:is([type*=unelevated],[type*=raised])[disabled]) {
+  ::slotted(button[disabled]) {
+    @include filled-disabled;
+  }
+}
+
+:host([type*=raised][disabled]) {
+  ::slotted(button[disabled]) {
+    @include raised-disabled;
+  }
+}

package/styles/inline-message/_core.scss

@@ -0,0 +1,45 @@
+/**
+ * @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;
+}
+
+@mixin base {
+  @include typography.style(body1);
+
+  background: #{token(background)};
+  color: #{token(color)};
+  
+  border-radius: #{token(shape)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+
+  display: flex;
+  gap: #{token(icon-gap)};
+  box-sizing: border-box;
+  padding-inline: #{token(padding-inline)};
+  padding-block: #{token(padding-block)};
+}
+
+@mixin container {
+  display: flex;
+  flex-direction: column;
+  gap: #{token(content-gap)};
+}
+
+@mixin title {
+  @include typography.style(heading1);
+}
+
+@mixin icon {
+  color: #{token(icon-color)};
+}

package/styles/inline-message/_token-utils.scss

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

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

package/styles/inline-message/inline-message.scss

@@ -3,20 +3,86 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
-@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');
+//
+// Host
+//
 
 :host {
-  display: block;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-inline-message {
+  @include tokens;
+}
+
+.forge-inline-message {
+  @include base;
+
+  .container {
+    @include container;
+  }
+}
+
+//
+// Title
+//
+
+::slotted([slot=title]) {
+  @include title;
+}
+
+//
+// Icon
+//
+
+::slotted([slot=icon]) {
+  @include icon;
+}
+
+//
+// Theme
+//
+
+@each $theme in [primary secondary tertiary success warning] {
+  :host([theme=#{$theme}]) {
+    .forge-inline-message {
+      @if $theme == 'secondary' {
+        @include override(background, theme.variable(secondary-container), value);
+        @include override(icon-color, theme.variable(on-secondary-container), value);
+        @include override(border-color, theme.variable(secondary), value);
+      } @else {
+        @include override(background, theme.variable(#{$theme}-container-low), value);
+        @include override(icon-color, theme.variable(on-#{$theme}-container-low), value);
+        @include override(border-color, theme.variable(#{$theme}-container), value);
+      }
+    }
+  }
+}
+
+// Map both "error" and "danger" for backwards compatibility with "danger" theme
+:host(:is([theme=error],[theme=danger])) {
+  .forge-inline-message {
+    @include override(background, theme.variable(error-container-low), value);
+    @include override(icon-color, theme.variable(on-error-container-low), value);
+    @include override(border-color, theme.variable(error-container), value);
+  }
+}
+
+:host([theme=info-secondary]) {
+  .forge-inline-message {
+    @include override(background, theme.variable(surface-container-low), value);
+    @include override(icon-color, theme.variable(on-surface-container-low), value);
+    @include override(border-color, theme.variable(surface-container), value);
+  }
+}