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

package/styles/{product-icon/_variables.scss → field-next/index.scss}

@@ -3,5 +3,5 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$size: 64px !default;
-$font-size: 48px !default;
+@forward './core';
+@forward './token-utils' show provide-theme;

package/styles/file-picker/_core.scss

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+@use '../core/styles/theme';
+@forward './token-utils';
+
+@mixin host() {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+@mixin base() {
+  display: grid;
+  justify-content: center;
+  align-content: center;
+  gap: #{token(gap)};
+
+  box-sizing: border-box;
+  padding: #{token(padding)};
+  height: #{token(height)};
+  width: #{token(width)};
+  max-width: #{token(max-width)};
+  text-align: center;
+  background: #{token(background)};
+  cursor: pointer;
+
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+}
+
+@mixin base-disabled() {
+  opacity: #{token(disabled-opacity)};
+  cursor: unset;
+}
+
+@mixin base-compact() {
+  @include override(height, fit-content, value);
+  @include override(width, fit-content, value);
+  @include override(background-color, transparent, value);
+  @include override(padding, 0, value);
+
+  border: none;
+}
+
+@mixin base-borderless() {
+  @include override(width, 100%, value);
+  border: none;
+}
+
+@mixin base-highlight() {
+  @include override(border-color, highlight-border-color);
+  @include override(background, highlight-background);
+}
+
+@mixin primary() {
+  @include typography.style(body2);
+
+  color: #{theme.variable(text-high)};
+  max-width: #{token(max-width)};
+}
+
+@mixin button-compact() {
+  @include override(width, auto, value);
+
+  background-color: transparent;
+}
+
+@mixin secondary() {
+  @include typography.style(body1);
+
+  color: #{theme.variable(text-high)};
+  max-width: #{token(max-width)};
+}
+
+@mixin helper-text() {
+  @include typography.style(label1);
+
+  text-align: start;
+}

package/styles/file-picker/_token-utils.scss

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

@@ -3,14 +3,79 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
 
-@include mixins.styles;
+:host {
+  @include tokens;
+}
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+:host([compact]) {
+ display: inline-block;
+}
+
+.forge-file-picker {
+ @include tokens;
+}
+
+.forge-file-picker {
+ @include base;
+
+ &[disabled] {
+   @include base-disabled;
+ }
+
+ &:not(.compact).highlight {
+   @include base-highlight;
+ }
+}
+
+.primary {
+ @include primary;
+}
+
+.secondary {
+ @include secondary;
+}
+
+.input {
+ display: none;
+}
+
+.helper-text {
+ ::slotted([slot='helper-text']) {
+   @include helper-text;
+ }
+}
+
+.borderless {
+ @include base-borderless;
+
+ &:not(.compact).highlight {
+   border: none;
+ }
+
+ + .helper-text {
+   display: none;
+ }
+}
+
+.compact {
+ @include base-compact;
+
+ .primary,
+ .secondary {
+   display: none;
+ }
+
+ .button {
+   @include button-compact;
+ }
+}

package/styles/file-picker/index.scss

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

package/styles/label/_core.scss

@@ -7,7 +7,7 @@
 
 @mixin host {
   /* Typography styles are set on the host to make it easier to override them via a class */
-  @include typography.style(label);
+  @include typography.style(label1);
 
   display: inline-block;
   cursor: default;

package/styles/list/list-item/_core.scss

@@ -16,6 +16,7 @@
 @mixin base {
   position: relative;
   display: flex;
+  gap: #{token(gap)};
   align-items: center;
   box-sizing: border-box;
   outline: none;
@@ -97,6 +98,8 @@
 }
 
 @mixin dense {
+  @include override(gap, dense-gap);
+
   height: #{token(dense-one-line-height)};
   min-height: #{token(dense-one-line-height)};
 }
@@ -131,8 +134,7 @@
   align-items: center;
   justify-content: center;
   fill: currentColor;
-  margin-inline-start: #{token(avatar-margin-start)};
-  margin-inline-end: #{token(avatar-margin-end)};
+  margin-inline-end: calc((#{token(gap)} / 2) * -1);
   min-width: #{token(avatar-size)};
   min-height: #{token(avatar-size)};
   border-radius: #{token(avatar-shape)};
@@ -147,32 +149,14 @@
   fill: currentColor;
 }
 
-@mixin leading {
-  margin-inline-start: #{token(leading-margin-start)};
-  margin-inline-end: #{token(leading-margin-end)};
-}
-
 @mixin leading-selected {
   color: #{token(leading-selected-color)};
 }
 
-@mixin leading-dense {
-  margin-inline-end: #{token(dense-leading-margin-end)};
-}
-
-@mixin trailing {
-  margin-inline-start: #{token(trailing-margin-start)};
-  margin-inline-end: #{token(trailing-margin-end)};
-}
-
 @mixin trailing-selected {
   color: #{token(trailing-selected-color)};
 }
 
-@mixin trailing-dense {
-  margin-inline-start: #{token(dense-trailing-margin-start)};
-}
-
 @mixin wrap {
   height: auto;
 }

package/styles/list/list-item/list-item.scss

@@ -168,28 +168,16 @@ slot[name=tertiary-title] {
 
 // Leading slotted elements
 ::slotted([slot=leading]) {
-  @include leading;
-
   :host([selected]) & {
     @include leading-selected;
   }
-
-  :host([dense]) & {
-    @include leading-dense;
-  }
 }
 
 // Trailing slotted elements
 ::slotted([slot=trailing]) {
-  @include trailing;
-
   :host([selected]) & {
     @include trailing-selected;
   }
-
-  :host([dense]) & {
-    @include trailing-dense;
-  }
 }
 
 // Wrap styles

package/styles/page-state/_core.scss

@@ -0,0 +1,79 @@
+/**
+ * @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;
+  width: 100%;
+  justify-content: center;
+  container-type: inline-size;
+}
+
+@mixin base {
+  width: #{token(width)};
+  margin-block: #{token(spacing)};
+
+  text-align: center;
+}
+
+@mixin base-mobile {
+  @include override(width, mobile-width);
+}
+
+@mixin graphic-container {
+  @include override(height, graphic-height);
+  @include override(spacing, graphic-spacing);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+@mixin graphic {
+  height: 100%;
+  width: 100%;
+}
+
+@mixin graphic-container-mobile {
+  @include override(height, mobile-graphic-height);
+}
+
+@mixin title {
+  @include typography.style(heading8);
+
+  color: #{token(title-color)};
+  margin-block: #{token(title-spacing)};
+}
+
+@mixin title-mobile {
+  @include typography.style(heading5);
+}
+
+@mixin message {
+  @include typography.style(body4);
+
+  color: #{token(message-color)};
+  margin-block-end: #{token(message-spacing)};
+}
+
+@mixin message-mobile {
+  @include typography.style(body2);
+}
+
+@mixin actions {
+  display: grid;
+  justify-content: center;
+  grid-auto-flow: column;
+  gap: #{token(actions-spacing)};
+}
+
+@mixin actions-mobile {
+  grid-auto-flow: row;
+}

package/styles/page-state/_token-utils.scss

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

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

package/styles/page-state/page-state.scss

@@ -3,15 +3,63 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../utils/mixins-container' as *;
 
-@include mixins.core-styles;
+:host {
+  @include tokens;
+}
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+.forge-page-state {
+  @include base;
+
+  .graphic {
+    @include graphic-container;
+
+    ::slotted([slot='graphic']) {
+      @include graphic;
+    }
+  }
+
+  .title {
+    @include title;
+  }
+
+  .message {
+    @include message;
+  }
+
+  .actions {
+    @include actions;
+  }
+}
+
+@include phone-only {
+  .forge-page-state {
+    @include base-mobile;
+
+    .graphic {
+      @include graphic-container-mobile;
+    }
+
+    .title {
+      @include title-mobile;
+    }
+
+    .message {
+      @include message-mobile;
+    }
+
+    .actions {
+      @include actions-mobile;
+    }
+  }
+}

package/styles/profile-card/profile-card.scss

@@ -4,6 +4,9 @@
  * License: Apache-2.0
  */
 @use './core' as *;
+@use '../avatar';
+@use '../toolbar';
+@use '../core/styles/theme';
 
 //
 // Host
@@ -35,11 +38,9 @@
   .avatar {
     @include avatar;
 
-    // TODO: Update this to use provide-theme mixin when supported in avatar
-    --forge-avatar-size: #{token(avatar-size)};
-    // @include avatar.provide-theme((
-    //   size: #{token(avatar-size)}
-    // ));
+    @include avatar.provide-theme((
+      size: #{token(avatar-size)}
+    ));
   }
 
   .text {
@@ -56,11 +57,10 @@
 }
 
 #action-toolbar {
-  // TODO: Update this to use provide-theme mixin when supported in toolbar
-  --forge-toolbar-padding: 8px;
-  // @include toolbar.provide-theme((
-  //   padding: 8px
-  // ));
+  @include toolbar.provide-theme((
+    background: #{theme.variable(surface-bright)}, // TODO: remove when using <forge-popover>
+    padding: 8px
+  ));
 
   forge-button:not(:last-of-type) {
     margin-inline-end: 8px;

package/styles/radio/radio/_core.scss

@@ -116,7 +116,7 @@
 }
 
 @mixin label {
-  @include typography.style(label);
+  @include typography.style(label1);
 
   cursor: default;
 

package/styles/radio/radio-group/_core.scss

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */

package/styles/radio/radio-group/index.scss

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */

package/styles/radio/radio-group/radio-group.scss

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */

package/styles/skeleton/_animations.scss

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@keyframes loading {
+  25%, 100% {
+    transform: translateX(100%);
+  }
+}

package/styles/skeleton/_core.scss

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  height: #{token(height)};
+  width: #{token(width)};
+  margin: #{token(margin)};
+  border-radius: #{token(shape)};
+
+  background-color: #{token(background)};
+  
+  position: relative;
+
+  display: block;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+@mixin base {
+  display: block;
+}
+
+@mixin gradient {
+  position: absolute;
+
+  display: block;
+  width: 100%;
+  height: 100%;
+
+  transform: translateX(-100%);
+
+  background-repeat: no-repeat;
+  background-image: linear-gradient(90deg, transparent, #{token(gradient-color)}, transparent);
+
+  animation: loading #{token(animation-duration)} ease-in infinite;
+}
+
+@mixin avatar {
+  @include override(height, avatar-size);
+  @include override(width, avatar-size);
+  @include override(shape, avatar-shape);
+}
+
+@mixin button {
+  @include override(height, button-height);
+  @include override(width, button-width);
+}
+
+@mixin form-field {
+  @include override(height, form-field-height);
+  @include override(width, form-field-width);
+}
+
+@mixin chip {
+  @include override(height, chip-height);
+  @include override(width, chip-width);
+  @include override(shape, chip-shape);
+}
+
+@mixin list-item {
+  @include override(height, list-item-height);
+  @include override(margin, list-item-margin);
+}
+
+@mixin text {
+  @include override(height, text-height);
+}
+
+@mixin stretch {
+  height: 100%;
+  width: 100%;
+}

package/styles/skeleton/_token-utils.scss

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

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