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

package/styles/linear-progress/linear-progress.scss

@@ -5,20 +5,20 @@
  */
 @use '../core/styles/theme';
 @use './animations';
-@use './configuration';
-@use './core';
-@use './token-utils' as *;
+@use './core' as *;
 
 //
 // Host styles
 //
 
+$_host-tokens: [track-height];
+
 :host {
-  @include configuration.host-configuration;
+  @include tokens($includes: $_host-tokens);
 }
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
@@ -30,11 +30,22 @@
 //
 
 .forge-linear-progress {
-  @include configuration.configuration;
+  @include tokens($excludes: $_host-tokens);
+
+  // State vars
+  #{declare(track-dot-size)}: calc(#{token(track-height)} / 2);
+  #{declare(track-background-width)}: calc(#{token(track-dot-size, custom)} * 5);
+  #{declare(track-background)}: 0 / #{token(track-background-width, custom)} 100%
+    radial-gradient(
+      circle at calc(#{token(track-dot-size, custom)} * 2),
+      #{token(track-color)} 0,
+      #{token(track-color)} #{token(track-dot-size, custom)},
+      transparent #{token(track-dot-size, custom)}
+    );
 }
 
 .forge-linear-progress {
-  @include core.progress;
+  @include progress;
 }
 
 .forge-linear-progress,
@@ -46,49 +57,49 @@
 }
 
 .bar {
-  @include core.bar;
+  @include bar;
 }
 
 .secondary-bar {
-  @include core.secondary-bar;
+  @include secondary-bar;
 }
 
 .bar-inner {
-  @include core.bar-inner;
+  @include bar-inner;
 }
 
 .buffer-bar {
-  @include core.buffer-bar;
+  @include buffer-bar;
 }
 
 .track {
-  @include core.track;
+  @include track;
 }
 
 /// Indeterminate styles
 .forge-linear-progress--indeterminate {
   .bar {
-    @include core.indeterminate-bar;
+    @include indeterminate-bar;
   }
 
   .primary-bar {
-    @include core.indeterminate-primary-bar;
+    @include indeterminate-primary-bar;
   }
 
   .secondary-bar {
-    @include core.indeterminate-secondary-bar;
+    @include indeterminate-secondary-bar;
   }
 
   .track {
-    @include core.indeterminate-track;
+    @include indeterminate-track;
   }
 
   .primary-bar > .bar-inner {
-    @include core.indeterminate-primary-bar-inner;
+    @include indeterminate-primary-bar-inner;
   }
 
   .secondary-bar > .bar-inner {
-    @include core.indeterminate-secondary-bar-inner;
+    @include indeterminate-secondary-bar-inner;
   }
 }
 

package/styles/list/list/_core.scss

@@ -5,6 +5,8 @@
  */
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin base {
   display: block;
   outline: none;

package/styles/list/list/index.scss

@@ -3,6 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/list/list/list.scss

@@ -3,8 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
-@use './core';
+@use './core' as *;
 @use '../list-item';
 
 //
@@ -23,6 +22,7 @@
   @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
@@ -34,9 +34,9 @@
 //
 
 .forge-list {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-list {
-  @include core.base;
+  @include base;
 }

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

@@ -6,6 +6,8 @@
 @use '../../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin container {
   display: block;
   outline: none;

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

@@ -3,6 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

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

@@ -3,105 +3,120 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
-@use './core';
+@use './core' as *;
 @use '../../focus-indicator';
 @use '../../state-layer';
 @use '../../core/styles/shape';
-@use './token-utils' as *;
 
+//
 // Host
+//
+
+$_host-tokens: [indent dense-indent];
+
 :host {
-  @include configuration.host;
+  @include tokens($includes: $_host-tokens);
 }
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+//
+// Base
+//
+
+.forge-list-item {
+  @include tokens($excludes: $_host-tokens);
+}
+
+.forge-list-item {
+  @include base;
+}
+
 // Non-interactive
 :host([non-interactive]) {
   .forge-list-item {
-    @include core.non-interactive;
+    @include non-interactive;
   }
 }
 
 // Disabled
 :host([disabled]) {
   .forge-list-item {
-    @include core.disabled;
+    @include disabled;
   }
 }
 
 // Two-line
 :host([two-line]) {
   .forge-list-item {
-    @include core.two-line;
+    @include two-line;
   }
 }
 
 // Three-line
 :host([three-line]) {
   .forge-list-item {
-    @include core.three-line;
+    @include three-line;
   }
 }
 
 // Dense
 :host([dense]) {
   .forge-list-item {
-    @include core.dense;
+    @include dense;
   }
 
   .text-container {
-    @include core.dense-text;
+    @include dense-text;
   }
 }
 
 // Dense indented
 :host([dense][indented]) {
-  @include core.dense-indented;
+  @include dense-indented;
 }
 
 // Dense two-line
 :host([dense][two-line]) {
   .forge-list-item {
-    @include core.dense-two-line;
+    @include dense-two-line;
   }
 }
 
 // Dense three-line
 :host([dense][three-line]) {
   .forge-list-item {
-    @include core.dense-three-line;
+    @include dense-three-line;
   }
 }
 
 // Dense leading/trailing
 :host([selected]) {
   .forge-list-item {
-    @include core.selected;
+    @include selected;
 
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
-      @include core.leading-trailing-selected;
+      @include leading-trailing-selected;
     }
 
     ::slotted([slot=leading]) {
-      @include core.leading-selected;
+      @include leading-selected;
     }
 
     ::slotted([slot=trailing]) {
-      @include core.trailing-selected;
+      @include trailing-selected;
     }
   }
 
   .text-container {
-    @include core.text-container-selected;
+    @include text-container-selected;
   }
 
   forge-state-layer {
@@ -113,26 +128,17 @@
 
 // Indented
 :host([indented]) {
-  @include core.indented;
-}
-
-// Base
-.forge-list-item {
-  @include configuration.configuration;
-}
-
-.forge-list-item {
-  @include core.base;
+  @include indented;
 }
 
 // Anchor base
 a.forge-list-item {
-  @include core.anchor-link;
+  @include anchor-link;
 }
 
 // Text container base
 .text-container {
-  @include core.text-container;
+  @include text-container;
 }
 
 // Supporting text slotted elements
@@ -141,59 +147,59 @@ slot[name=subtitle],
 slot[name=tertiary-text],
 slot[name=tertiary-title] {
   &::slotted(*) {
-    @include core.supporting-text;
+    @include supporting-text;
   }
 
   :host([selected]) &::slotted(*) {
-    @include core.supporting-text-selected;
+    @include supporting-text-selected;
   }
 }
 
 // Avatar slotted elements
 ::slotted([slot=avatar]) {
-  @include core.avatar;
+  @include avatar;
 }
 
 // Leading/trailing slotted elements
 ::slotted([slot=leading]),
 ::slotted([slot=trailing]) {
-  @include core.leading-trailing-base;
+  @include leading-trailing-base;
 }
 
 // Leading slotted elements
 ::slotted([slot=leading]) {
-  @include core.leading;
+  @include leading;
 
   :host([selected]) & {
-    @include core.leading-selected;
+    @include leading-selected;
   }
 
   :host([dense]) & {
-    @include core.leading-dense;
+    @include leading-dense;
   }
 }
 
 // Trailing slotted elements
 ::slotted([slot=trailing]) {
-  @include core.trailing;
+  @include trailing;
 
   :host([selected]) & {
-    @include core.trailing-selected;
+    @include trailing-selected;
   }
 
   :host([dense]) & {
-    @include core.trailing-dense;
+    @include trailing-dense;
   }
 }
 
 // Wrap styles
 :host([wrap]) {
   .forge-list-item {
-    @include core.wrap;
+    @include wrap;
   }
 
   .text-container {
-    @include core.text-container-wrap;
+    @include text-container-wrap;
   }
 
   slot[name=secondary-text],
@@ -201,7 +207,7 @@ slot[name=tertiary-title] {
   slot[name=tertiary-text],
   slot[name=tertiary-title] {
     &::slotted(*) {
-      @include core.supporting-text-wrap;
+      @include supporting-text-wrap;
     }
   }
 }

package/styles/overlay/_core.scss

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin base {
+  display: none;
+  box-sizing: border-box;
+  height: #{token(height)};
+  width: #{token(width)};
+  border-radius: inherit;
+
+  position: #{token(position)};
+  top: 0;
+  left: 0;
+  z-index: #{token(z-index)};
+  
+  background: inherit;
+  color: inherit;
+}
+
+@mixin absolute {
+  @include override(position, absolute, value);
+}
+
+@mixin open {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow: visible;
+  inset: unset;
+}
+
+@mixin no-anchor {
+  inset: 0;
+  margin: auto;
+  margin-inline-start: #{token(position-inline-start)};
+  margin-inline-end: #{token(position-inline-end)};
+  margin-block-start: #{token(position-block-start)};
+  margin-block-end: #{token(position-block-end)};
+}

package/styles/overlay/_token-utils.scss

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

@@ -3,8 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './token-utils' as *;
-
-@mixin configuration {
-  @include tokens;
-}
+@forward './core';

package/styles/overlay/overlay.scss

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as *;
+
+//
+// Host
+//
+
+:host {
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-overlay {
+  @include tokens;
+}
+
+.forge-overlay {
+  @include base;
+}
+
+//
+// Position strategy - absolute
+//
+
+:host([position-strategy=absolute]) {
+  .forge-overlay {
+    @include absolute;
+  }
+}
+
+//
+// Open
+//
+
+:host([open][inline]) {
+  .forge-overlay {
+    @include open;
+  }
+}
+
+:host([open]) {
+  .forge-overlay:popover-open {
+    @include open;
+  }
+}
+
+//
+// No anchor
+//
+
+:host([open][no-anchor]) {
+  .forge-overlay:popover-open {
+    @include no-anchor;
+  }
+}

package/styles/popover/_animations.scss

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@keyframes zoomin {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(#{token(slidein-x, custom)}) translateY(#{token(slidein-y, custom)});
+  }
+
+  to {
+    transform: translateX(0) translateY(0);
+  }
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/styles/popover/_core.scss

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin base {
+  position: relative;
+
+  background: #{token(background)};
+
+  border-radius: #{token(border-radius)};
+  box-shadow: #{token(box-shadow)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+}
+
+@mixin arrow {
+  position: absolute;
+
+  background-color: #{token(arrow-background-color)};
+
+  height: #{token(arrow-height)};
+  width: #{token(arrow-width)};
+  box-shadow: #{token(box-shadow)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+  
+  transform: translate(#{token(arrow-translate-x, custom)}, #{token(arrow-translate-y, custom)})
+             rotate(#{token(arrow-rotation, custom)});
+  clip-path: #{token(arrow-clip-path, custom)};
+}
+
+@mixin zoom-base {
+  animation-duration: #{token(zoom-duration)};
+  animation-timing-function: #{token(zoom-timing)};
+  animation-name: fadein, zoomin;
+  transform-origin: #{token(zoomin-origin, custom)};
+}
+
+@mixin slide-base {
+  animation-duration: #{token(slide-duration)};
+  animation-timing-function: #{token(slide-timing)};
+  animation-name: fadein, slidein;
+}
+
+@mixin fade-base {
+  animation-duration: #{token(fade-duration)};
+  animation-timing-function: #{token(fade-timing)};
+  animation-name: fadein;
+}

package/styles/popover/_token-utils.scss

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