@tylertech/forge 3.0.0-next.22 → 3.0.0-next.24

package/styles/forge-tokens.scss

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core/styles/animation';
+@use './core/styles/border';
+@use './core/styles/elevation';
+@use './core/styles/shape';
+@use './core/styles/spacing';
+
+// Animation
+:root {
+  @include animation.properties;
+}
+
+// Border
+:root {
+  @include border.properties;
+}
+
+// Elevation
+:root {
+  @include elevation.properties;
+}
+
+// z-index layering
+:root {
+  @include elevation.z-index-properties;
+}
+
+// Shape
+:root {
+  @include shape.properties;
+}
+
+// Spacing
+:root {
+  @include spacing.properties;
+}

package/styles/forge.scss

@@ -3,15 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-// Theme styles
+@use './forge-tokens';
 @use './theme/forge-theme';
-
-// Typography styles
 @use './typography/forge-typography';
-
-// Required global component styles
-@use './table/forge-table';
-@use './quantity-field/forge-quantity-field';
-
-// Supplemental global component styles
-@use './busy-indicator/forge-busy-indicator';

package/styles/linear-progress/_core.scss

@@ -4,7 +4,6 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use '../theme';
 @use './token-utils' as *;
 
 @forward './token-utils';

package/styles/list/list/list.scss

@@ -10,6 +10,20 @@
 // Host
 //
 
+$_host-tokens: [
+  navlist-spacing
+  navlist-margin
+  navlist-height
+  navlist-padding
+  navlist-shape
+  navlist-font-size
+  navlist-font-weight
+];
+
+:host {
+  @include tokens($includes: $_host-tokens);
+}
+
 :host {
   display: block;
 }
@@ -19,13 +33,15 @@
 }
 
 :host([navlist]) {
+  margin-block: #{token(navlist-spacing)};
+
   @include list-item.provide-theme((
-    height: 40px,
-    margin: 4px 8px,
-    padding: 0 8px,
-    shape: 4px,
-    supporting-text-font-size: 0.875rem,
-    supporting-text-font-weight: 500
+    height: #{token(navlist-height)},
+    margin: #{token(navlist-margin)},
+    padding: #{token(navlist-padding)},
+    shape: #{token(navlist-shape)},
+    text-font-size: #{token(navlist-font-size)},
+    text-font-weight: #{token(navlist-font-weight)},
   ));
 }
 
@@ -34,7 +50,7 @@
 //
 
 .forge-list {
-  @include tokens;
+  @include tokens($excludes: $_host-tokens);
 }
 
 .forge-list {

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

@@ -21,7 +21,7 @@
   box-sizing: border-box;
   outline: none;
   text-decoration: none;
-  background-color: #{token(background-color)};
+  background-color: #{token(background)};
   border-radius: #{token(shape)};
   -webkit-tap-highlight-color: transparent;
   height: #{token(height)};
@@ -40,9 +40,9 @@
   @include typography.ellipse;
 
   box-sizing: border-box;
-  font-size: #{token(supporting-text-font-size)};
-  font-weight: #{token(supporting-text-font-weight)};
-  line-height: #{token(supporting-text-line-height)};
+  font-size: #{token(text-font-size)};
+  font-weight: #{token(text-font-weight)};
+  line-height: #{token(text-line-height)};
   flex: 1;
 }
 
@@ -75,16 +75,16 @@
   color: #{token(selected-color)};
 }
 
-@mixin supporting-text {
+@mixin text {
   @include typography.style(body1);
   @include typography.ellipse;
 
-  color: #{token(supporting-text-color)};
+  color: #{token(text-color)};
   display: block;
 }
 
-@mixin supporting-text-selected {
-  color: #{token(selected-supporting-text-color)};
+@mixin text-selected {
+  color: #{token(selected-text-color)};
 }
 
 @mixin two-line {
@@ -141,7 +141,7 @@
 }
 
 @mixin leading-trailing-base {
-  color: #{token(supporting-text-color)};
+  color: #{token(text-color)};
   display: inline-flex;
   flex-shrink: 0;
   align-items: center;
@@ -170,7 +170,7 @@
   line-height: normal;
 }
 
-@mixin supporting-text-wrap {
+@mixin text-wrap {
   @include text-container-wrap;
 }
 

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

@@ -141,17 +141,17 @@ a.forge-list-item {
   @include text-container;
 }
 
-// Supporting text slotted elements
+// Text slotted elements
 slot[name=secondary-text],
 slot[name=subtitle],
 slot[name=tertiary-text],
 slot[name=tertiary-title] {
   &::slotted(*) {
-    @include supporting-text;
+    @include text;
   }
 
   :host([selected]) &::slotted(*) {
-    @include supporting-text-selected;
+    @include text-selected;
   }
 }
 
@@ -195,7 +195,7 @@ slot[name=tertiary-title] {
   slot[name=tertiary-text],
   slot[name=tertiary-title] {
     &::slotted(*) {
-      @include supporting-text-wrap;
+      @include text-wrap;
     }
   }
 }

package/styles/open-icon/_core.scss

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-flex;
+}
+
+@mixin base {
+  height: #{token(height)};
+  width: #{token(width)};
+
+  color: #{token(color)};
+  rotate: #{token(initial-rotation)};
+
+  transition: rotate #{token(animation-duration)} #{token(animation-timing)};
+}
+
+@mixin open {
+  rotate: #{token(open-rotation)};
+}

package/styles/open-icon/_token-utils.scss

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

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$margin-right: 32px !default;
+@forward './core';

package/styles/open-icon/open-icon.scss

@@ -3,14 +3,86 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../icon';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-open-icon {
+  @include tokens;
+}
+
+.forge-open-icon {
+  @include base;
+}
+
+::slotted(forge-icon),
+forge-icon {
+  @include icon.provide-theme((
+    size: #{token(size)}
+  ));
+}
+
+//
+// Open
+//
+
+:host([open]) {
+  .forge-open-icon {
+    @include open;
+  }
+}
+
+//
+// Orientation
+//
+
+:host([orientation=horizontal]) {
+  .forge-open-icon {
+    @include override(initial-rotation, -90deg, value);
+    @include override(open-rotation, 90deg, value);
+  }
+}
+
+//
+// Rotation
+//
+
+:host([rotation=half]) {
+  .forge-open-icon {
+    @include override(open-rotation, -90deg, value);
+    @include override(animation-duration, half-animation-duration);
+  }
+}
+
+:host([orientation=horizontal][rotation=half]) {
+  .forge-open-icon {
+    @include override(initial-rotation, -90deg, value);
+    @include override(open-rotation, 0, value);
+    @include override(animation-duration, half-animation-duration);
+  }
+}
+
+//
+// Media
+//
+
+@media prefers-reduced-motion {
+  .forge-open-icon {
+    transition: none;
+  }
+}

package/styles/paginator/_core.scss

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use '../core/styles/spacing';
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  display: flex;
+  gap: #{spacing.variable(xsmall)};
+}
+
+@mixin container {
+  display: flex;
+  gap: #{spacing.variable(medium)};
+  align-items: center;
+}
+
+@mixin actions {
+  display: flex;
+  align-items: center;
+}
+
+@mixin label-base {
+  @include typography.style(label1);
+}
+
+@mixin alternative-range-label {
+  @include typography.style(body1);
+
+  display: inline-block;
+}
+
+@mixin alternative-actions {
+  width: 100%;
+  justify-content: var(--forge-paginator-alternative-alignment, start);
+}

package/styles/{typography/_index.scss → paginator/index.scss}

@@ -3,5 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './mixins';
-@forward './variables';
+@forward './core';

package/styles/paginator/paginator.scss

@@ -3,18 +3,62 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  display: inline-block;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+//
+// Base
+//
+
+.forge-paginator {
+  @include base;
+}
+
+.container {
+  @include container;
+}
+
+.label,
+.range-label,
+.alternative-range-label {
+  @include label-base;
+}
+
+.actions {
+  @include actions;
+}
+
+//
+// Alternative
+//
+
+.alternative-range-label {
+  display: none;
+}
+
 :host([alternative]) {
-  @include mixins.alternative-alignment;
-}
+  .alternative-range-label {
+    @include alternative-range-label;
+  }
+
+  .container {
+    display: none;
+  }
+
+  .actions {
+    @include alternative-actions;
+  }
+}
+
+

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

@@ -58,7 +58,6 @@
 
 #action-toolbar {
   @include toolbar.provide-theme((
-    background: #{theme.variable(surface-bright)}, // TODO: remove when using <forge-popover>
     padding: 8px
   ));
 

package/styles/split-view/split-view/_mixins.scss

@@ -3,8 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme/theme';
-
 @mixin core-styles() {
   .forge-split-view {
     @include base;

package/styles/split-view/split-view-panel/_mixins.scss

@@ -3,9 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/animation/variables' as mdc-animation-variables;
+@use '../../core/styles/animation';
+@use '../../core/styles/theme';
 @use './variables';
-@use '../../theme/theme';
 
 @mixin core-styles() {
   .forge-split-view-panel {
@@ -115,9 +115,7 @@
 }
 
 @mixin host() {
-  // There is no fallback value for the animating layer
-  @include theme.css-custom-property(z-index, --forge-split-view-animating-layer, $important: true);
-
+  z-index: var(--forge-split-view-animating-layer) !important;
   display: block;
   position: relative;
   height: 100%;
@@ -138,14 +136,14 @@
 }
 
 @mixin base-horizontal() {
-  @include theme.css-custom-property(min-width, --forge-split-view-handle-width, variables.$handle-width);
+  min-width: var(--forge-split-view-handle-width, variables.$handle-width);
 
   width: calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, variables.$handle-width));
   flex-direction: row;
 }
 
 @mixin base-vertical() {
-  @include theme.css-custom-property(min-height, --forge-split-view-handle-width, variables.$handle-width);
+  min-height: var(--forge-split-view-handle-width, variables.$handle-width);
 
   height: calc(var(--forge-split-view-panel-size, unset) + var(--forge-split-view-handle-width, variables.$handle-width));
   flex-direction: column;
@@ -159,9 +157,8 @@
 }
 
 @mixin handle() {
-  @include theme.property(color, text-secondary-on-light);
-  @include theme.property(background-color, border-color);
-
+  color: #{theme.variable(text-medium)};
+  background-color: #{theme.variable(outline)};
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -172,9 +169,9 @@
 
 @mixin handle-orientation($orientation: horizontal) {
   @if $orientation == horizontal {
-    @include theme.css-custom-property(width, --forge-split-view-handle-width, variables.$handle-width);
+    width: var(--forge-split-view-handle-width, variables.$handle-width);
   } @else {
-    @include theme.css-custom-property(height, --forge-split-view-handle-width, variables.$handle-width);
+    height: var(--forge-split-view-handle-width, variables.$handle-width);
   }
 }
 
@@ -196,8 +193,7 @@
 }
 
 @mixin cursor($orientation: horizontal) {
-  // There is no fallback value for the panel cursor
-  @include theme.css-custom-property(cursor, --forge-split-view-panel-cursor);
+  cursor: var(--forge-split-view-panel-cursor);
 }
 
 @mixin closed() {
@@ -220,8 +216,8 @@
   $animation-name: unique-id();
 
   animation-name: $animation-name;
-  animation-duration: variables.$animation-duration;
-  animation-timing-function: mdc-animation-variables.$standard-curve-timing-function;
+  animation-duration: #{animation.variable(duration-medium2)};
+  animation-timing-function: #{animation.variable(easing-standard)};
 
   @keyframes #{$animation-name} {
     from {

package/styles/split-view/split-view-panel/_variables.scss

@@ -3,5 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$animation-duration: 300ms;
 $handle-width: 8px;