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

package/styles/list/list/_core.scss

@@ -3,18 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/utils';
-@use '../../core/styles/tokens/list/list/tokens';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, list);
-}
+@use './token-utils' as *;
 
 @mixin base {
   display: block;
   outline: none;
-  background-color: var(--_container-color);
-  padding: var(--_block-padding) var(--_inline-padding);
+  background-color: #{token(container-color)};
+  padding: #{token(block-padding)} #{token(inline-padding)};
   margin: 0;
   border-radius: inherit;
   min-width: inherit;

package/styles/list/list/_token-utils.scss

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

@@ -5,3 +5,4 @@
  */
 @forward './configuration';
 @forward './core';
+@forward './token-utils' show provide-theme;

package/styles/list/list/list.scss

@@ -7,6 +7,10 @@
 @use './core';
 @use '../list-item';
 
+//
+// Host
+//
+
 :host {
   display: block;
 }
@@ -25,7 +29,14 @@
   ));
 }
 
+//
+// Base
+//
+
 .forge-list {
   @include configuration.configuration;
+}
+
+.forge-list {
   @include core.base;
 }

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

@@ -3,70 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/list/list-item/tokens';
+@use './token-utils' as *;
+
+$_host-tokens: [indent dense-indent];
 
 @mixin host {
-  --_indent: #{tokens.get(indent)};
-  --_dense-indent: #{tokens.get(dense-indent)};
+  @include tokens($includes: $_host-tokens);
 }
 
 @mixin configuration {
-  // Base
-  --_background-color: #{tokens.get(background-color)};
-  --_shape: #{tokens.get(shape)};
-  --_padding: #{tokens.get(padding)};
-  --_margin: #{tokens.get(margin)};
-  --_height: #{tokens.get(height)};
-  --_dense-height: #{tokens.get(dense-height)};
-  --_cursor: #{tokens.get(cursor)};
-
-  // Supporting text
-  --_supporting-text-color: #{tokens.get(supporting-text-color)};
-  --_supporting-text-font-size: #{tokens.get(supporting-text-font-size)};
-  --_supporting-text-font-weight: #{tokens.get(supporting-text-font-weight)};
-  --_supporting-text-line-height: #{tokens.get(supporting-text-line-height)};
-
-  // Selected
-  --_selected-color: #{tokens.get(selected-color)};
-  --_selected-opacity: #{tokens.get(selected-opacity)};
-  --_selected-leading-color: #{tokens.get(selected-leading-color)};
-  --_selected-trailing-color: #{tokens.get(selected-trailing-color)};
-  --_selected-supporting-text-color: #{tokens.get(selected-supporting-text-color)};
-
-  // Disabled
-  --_disabled-opacity: #{tokens.get(disabled-opacity)};
-  --_disabled-cursor: #{tokens.get(disabled-cursor)};
-
-  // Line variants
-  --_one-line-height: #{tokens.get(one-line-height)};
-  --_two-line-height: #{tokens.get(two-line-height)};
-  --_three-line-height: #{tokens.get(three-line-height)};
-
-  // Dense
-  --_dense-one-line-height: #{tokens.get(dense-one-line-height)};
-  --_dense-two-line-height: #{tokens.get(dense-two-line-height)};
-  --_dense-three-line-height: #{tokens.get(dense-three-line-height)};
-  --_dense-font-size: #{tokens.get(dense-font-size)};
-
-  // Dense leading/trailing
-  --_dense-leading-margin-end: #{tokens.get(dense-leading-margin-end)};
-  --_dense-trailing-margin-start: #{tokens.get(dense-trailing-margin-start)};
-
-  // Leading
-  --_leading-margin-start: #{tokens.get(leading-margin-start)};
-  --_leading-margin-end: #{tokens.get(leading-margin-end)};
-  --_leading-selected-color: #{tokens.get(leading-selected-color)};
-
-  // Trailing
-  --_trailing-margin-start: #{tokens.get(trailing-margin-start)};
-  --_trailing-margin-end: #{tokens.get(trailing-margin-end)};
-  --_trailing-selected-color: #{tokens.get(trailing-selected-color)};
-
-  // Avatar
-  --_avatar-background-color: #{tokens.get(avatar-background-color)};
-  --_avatar-color: #{tokens.get(avatar-color)};
-  --_avatar-shape: #{tokens.get(avatar-shape)};
-  --_avatar-margin-start: #{tokens.get(avatar-margin-start)};
-  --_avatar-margin-end: #{tokens.get(avatar-margin-end)};
-  --_avatar-size: #{tokens.get(avatar-size)};
+  @include tokens($excludes: $_host-tokens);
 }

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

@@ -3,13 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/utils';
 @use '../../core/styles/typography';
-@use '../../core/styles/tokens/list/list-item/tokens';
-
-@mixin provide-theme($theme) {
-  @include utils.provide(tokens.$tokens, $theme, list-item);
-}
+@use './token-utils' as *;
 
 @mixin container {
   display: block;
@@ -23,14 +18,14 @@
   box-sizing: border-box;
   outline: none;
   text-decoration: none;
-  background-color: var(--_background-color);
-  border-radius: var(--_shape);
+  background-color: #{token(background-color)};
+  border-radius: #{token(shape)};
   -webkit-tap-highlight-color: transparent;
-  height: var(--_height);
-  min-height: var(--_height);
-  padding: var(--_padding);
-  margin: var(--_margin);
-  cursor: var(--_cursor);
+  height: #{token(height)};
+  min-height: #{token(height)};
+  padding: #{token(padding)};
+  margin: #{token(margin)};
+  cursor: #{token(cursor)};
 }
 
 @mixin anchor-link {
@@ -42,107 +37,107 @@
   @include typography.ellipse;
 
   box-sizing: border-box;
-  font-size: var(--_supporting-text-font-size);
-  font-weight: var(--_supporting-text-font-weight);
-  line-height: var(--_supporting-text-line-height);
+  font-size: #{token(supporting-text-font-size)};
+  font-weight: #{token(supporting-text-font-weight)};
+  line-height: #{token(supporting-text-line-height)};
   flex: 1;
 }
 
 @mixin selected {
-  color: var(--_selected-color);
+  color: #{token(selected-color)};
 
   &::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    opacity: var(--_selected-opacity);
-    background-color: var(--_selected-color);
+    opacity: #{token(selected-opacity)};
+    background-color: #{token(selected-color)};
   }
 }
 
 @mixin leading-selected {
-  color: var(--_leading-selected-color);
+  color: #{token(leading-selected-color)};
 }
 
 @mixin trailing-selected {
-  color: var(--_trailing-selected-color);
+  color: #{token(trailing-selected-color)};
 }
 
 @mixin text-container-selected {
-  color: var(--_selected-color);
+  color: #{token(selected-color)};
 }
 
 @mixin leading-trailing-selected {
-  color: var(--_selected-color);
+  color: #{token(selected-color)};
 }
 
 @mixin supporting-text {
   @include typography.style(body1);
   @include typography.ellipse;
 
-  color: var(--_supporting-text-color);
+  color: #{token(supporting-text-color)};
   display: block;
 }
 
 @mixin supporting-text-selected {
-  color: var(--_selected-supporting-text-color);
+  color: #{token(selected-supporting-text-color)};
 }
 
 @mixin two-line {
-  height: var(--_two-line-height);
-  min-height: var(--_two-line-height);
+  height: #{token(two-line-height)};
+  min-height: #{token(two-line-height)};
 }
 
 @mixin three-line {
-  height: var(--_three-line-height);
-  min-height: var(--_three-line-height);
+  height: #{token(three-line-height)};
+  min-height: #{token(three-line-height)};
 }
 
 @mixin dense {
-  height: var(--_dense-one-line-height);
-  min-height: var(--_dense-one-line-height);
+  height: #{token(dense-one-line-height)};
+  min-height: #{token(dense-one-line-height)};
 }
 
 @mixin dense-text {
-  font-size: var(--_dense-font-size);
+  font-size: #{token(dense-font-size)};
 }
 
 @mixin dense-two-line {
-  height: var(--_dense-two-line-height);
-  min-height: var(--_dense-two-line-height);
+  height: #{token(dense-two-line-height)};
+  min-height: #{token(dense-two-line-height)};
 }
 
 @mixin dense-three-line {
-  height: var(--_dense-three-line-height);
-  min-height: var(--_dense-three-line-height);
+  height: #{token(dense-three-line-height)};
+  min-height: #{token(dense-three-line-height)};
 }
 
 @mixin indented {
-  margin-inline-start: var(--_indent);
+  margin-inline-start: #{token(indent)};
 }
 
 @mixin dense-indented {
-  margin-inline-start: var(--_dense-indent);
+  margin-inline-start: #{token(dense-indent)};
 }
 
 @mixin avatar {
-  background-color: var(--_avatar-background-color);
-  color: var(--_avatar-color);
+  background-color: #{token(avatar-background-color)};
+  color: #{token(avatar-color)};
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   fill: currentColor;
-  margin-inline-start: var(--_avatar-margin-start);
-  margin-inline-end: var(--_avatar-margin-end);
-  min-width: var(--_avatar-size);
-  min-height: var(--_avatar-size);
-  border-radius: var(--_avatar-shape);
+  margin-inline-start: #{token(avatar-margin-start)};
+  margin-inline-end: #{token(avatar-margin-end)};
+  min-width: #{token(avatar-size)};
+  min-height: #{token(avatar-size)};
+  border-radius: #{token(avatar-shape)};
 }
 
 @mixin leading-trailing-base {
-  color: var(--_supporting-text-color);
+  color: #{token(supporting-text-color)};
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -151,29 +146,29 @@
 }
 
 @mixin leading {
-  margin-inline-start: var(--_leading-margin-start);
-  margin-inline-end: var(--_leading-margin-end);
+  margin-inline-start: #{token(leading-margin-start)};
+  margin-inline-end: #{token(leading-margin-end)};
 }
 
 @mixin leading-selected {
-  color: var(--_leading-selected-color);
+  color: #{token(leading-selected-color)};
 }
 
 @mixin leading-dense {
-  margin-inline-end: var(--_dense-leading-margin-end);
+  margin-inline-end: #{token(dense-leading-margin-end)};
 }
 
 @mixin trailing {
-  margin-inline-start: var(--_trailing-margin-start);
-  margin-inline-end: var(--_trailing-margin-end);
+  margin-inline-start: #{token(trailing-margin-start)};
+  margin-inline-end: #{token(trailing-margin-end)};
 }
 
 @mixin trailing-selected {
-  color: var(--_trailing-selected-color);
+  color: #{token(trailing-selected-color)};
 }
 
 @mixin trailing-dense {
-  margin-inline-start: var(--_dense-trailing-margin-start);
+  margin-inline-start: #{token(dense-trailing-margin-start)};
 }
 
 @mixin wrap {
@@ -195,6 +190,6 @@
 }
 
 @mixin disabled {
-  cursor: var(--_disabled-cursor);
-  opacity: var(--_disabled-opacity);
+  cursor: #{token(disabled-cursor)};
+  opacity: #{token(disabled-opacity)};
 }

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

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

@@ -5,3 +5,4 @@
  */
 @forward './configuration';
 @forward './core';
+@forward './token-utils' show provide-theme;

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

@@ -8,10 +8,14 @@
 @use '../../focus-indicator';
 @use '../../state-layer';
 @use '../../core/styles/shape';
+@use './token-utils' as *;
 
-// Host styles
+// Host
 :host {
   @include configuration.host;
+}
+
+:host {
   @include core.container;
 }
 
@@ -102,7 +106,7 @@
 
   forge-state-layer {
     @include state-layer.provide-theme((
-      color: var(--_selected-color)
+      color: #{token(selected-color)}
     ));
   }
 }
@@ -115,6 +119,9 @@
 // Base
 .forge-list-item {
   @include configuration.configuration;
+}
+
+.forge-list-item {
   @include core.base;
 }
 
@@ -200,8 +207,10 @@ slot[name=tertiary-title] {
 }
 
 forge-focus-indicator {
+  z-index: 1; // Fixes an animation artifact in Safari
+
   @include focus-indicator.provide-theme((
-    shape: shape.variable(medium)
+    shape: shape.variable(medium) // TODO: use list-item token?
   ));
 }
 

package/styles/menu/menu.scss

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 :host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 :host([hidden]) {

package/styles/paginator/paginator.scss

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 @use './mixins';
-@use '../icon-button/forge-icon-button';
 
 @include mixins.core-styles;
 

package/styles/profile-card/_configuration.scss

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin configuration {
+  @include tokens;
+}

package/styles/profile-card/_core.scss

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+@use '../core/styles/theme';
+@use '../core/styles/spacing';
+@use '../utils/mixins-media';
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  min-width: #{token(min-width)};
+  border-radius: #{token(shape)};
+
+  @include mixins-media.phone-small-only {
+    width: 100vw;
+    min-width: unset;
+    overflow: auto;
+  }
+}
+
+
+@mixin info-container {
+  display: flex;
+  align-items: center;
+
+  padding-block: #{spacing.variable(xsmall)};
+  padding-inline: #{spacing.variable(medium)};
+}
+
+@mixin avatar {
+  display: flex;
+  align-items: center;
+
+  padding: #{spacing.variable(xsmall)};
+  margin-inline-end: #{spacing.variable(medium)};
+}
+
+@mixin text {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin full-name {
+  @include typography.style(heading2);
+}
+
+@mixin email {
+  @include typography.style(subheading1);
+  
+  color: #{theme.variable(text-medium)};
+}
+

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

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './configuration';
+@forward './core';
+@forward './token-utils' show provide-theme;

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

@@ -3,20 +3,68 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
-@use '../ripple/forge-ripple';
-@use '../button/forge-button';
+@use './token-utils' as *;
+@use './configuration' as *;
+@use './core';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  display: inline;
+  @include core.host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-forge-toolbar {
-  --mdc-theme-surface: var(--forge-theme-elevated-surface);
+//
+// Base
+//
+
+.forge-profile-card {
+  @include configuration;
+}
+
+.forge-profile-card {
+  @include core.base;
+
+  .info-container {
+    @include core.info-container;
+  }
+
+  .avatar {
+    @include core.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)}
+    // ));
+  }
+
+  .text {
+    @include core.text;
+  }
+
+  .full-name {
+    @include core.full-name;
+  }
+
+  .email {
+    @include core.email;
+  }
+}
+
+#action-toolbar {
+  // TODO: Update this to use provide-theme mixin when supported in toolbar
+  --forge-toolbar-padding: 8px;
+  // @include toolbar.provide-theme((
+  //   padding: 8px
+  // ));
+
+  forge-button:not(:last-of-type) {
+    margin-inline-end: 8px;
+  }
 }