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

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;

package/styles/table/_core.scss

@@ -0,0 +1,333 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/border';
+@use '../core/styles/elevation';
+@use '../core/styles/spacing';
+@use '../core/styles/theme';
+@use '../core/styles/typography';
+@use '../core/styles/animation';
+@use './variables';
+
+@mixin host {
+  display: block;
+}
+
+
+// The base styles for the `<table>` element.
+@mixin base {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+// The base styles for the rows of the table.
+@mixin row-base($cell-class-name, $select-class-name) {
+  // Finds the first table cell that is not the select cell
+  > .#{$cell-class-name}:not(.#{$select-class-name}):first-child,
+  .#{$cell-class-name}.#{$select-class-name} + .#{$cell-class-name}:not(.#{$select-class-name}) {
+    padding-right: #{spacing.variable(large)};
+  }
+
+  > .#{$cell-class-name}:last-child {
+    padding-right: #{spacing.variable(large)};
+  }
+}
+
+@mixin fixed {
+  position: relative;
+}
+
+@mixin fixed-head-cell {
+  position: sticky;
+  top: 0;
+
+  background: #{theme.variable(surface)};
+
+  z-index: #{elevation.z-index-variable(surface)};
+
+  &::after {
+    content: '';
+
+    border-bottom-width: 1px;
+    border-style: solid;
+    border-color: #{theme.variable(outline)};
+    border-width: 0;
+
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+
+    height: 1px;
+
+    box-sizing: border-box;
+  }
+}
+
+// The dense styles for all table rows.
+@mixin row-dense {
+  height: variables.$thead-dense-row-height;
+}
+
+// The roomy styles for all table rows.
+@mixin row-roomy {
+  height: variables.$thead-roomy-row-height;
+}
+
+/// The base styles for the cells within the table.
+@mixin cell-base($select-class-name) {
+  padding-right: #{spacing.variable(xxxlarge)};
+  
+  border-bottom-width: #{border.variable(thin)};
+  border-bottom-style: solid;
+  border-bottom-color: #{theme.variable(outline)};
+
+  &:first-child:not(.#{$select-class-name}) {
+    padding-left: #{spacing.variable(large)};
+  }
+}
+
+@mixin cell {
+  padding-right: #{spacing.variable(xxxlarge)};
+  padding-left: #{spacing.variable(large)};
+
+  border-bottom-width: #{border.variable(thin)};
+  border-bottom-style: solid;
+  border-bottom-color: #{theme.variable(outline)};
+}
+
+// Creates styles for container element that is placed within each cell.
+@mixin cell-container {
+  display: flex;
+  align-items: center;
+}
+
+// Centers the content within a table cell.
+@mixin cell-center {
+  justify-content: center;
+}
+
+// Right justifies the content within a table cell.
+@mixin cell-right {
+  justify-content: flex-end;
+}
+
+// Provides base styles for the select checkbox container element.
+@mixin cell-select {
+  text-align: center !important;
+  box-sizing: border-box;
+  width: 66px;
+  padding-right: #{spacing.variable(small)};
+  padding-left: #{spacing.variable(medium)};
+}
+
+// Styles the select checkbox wrapper element.
+@mixin cell-checkbox-container {
+  display: flex;
+
+  &--align-left {
+    justify-content: flex-start;
+  }
+  &--align-right {
+    justify-content: flex-end;
+  }
+  &--align-center {
+    justify-content: center;
+  }
+}
+
+@mixin cell-resizing {
+  display: block;
+  height: 100%;
+  position: absolute;
+  right: 4px;
+  top: 0;
+  bottom: 0;
+  border-right-width: #{border.variable(medium)};
+  border-right-style: solid;
+  border-right-color: #{theme.variable(primary)};
+}
+
+// The default table head row styles.
+@mixin head-row {
+  height: variables.$thead-row-height;
+}
+
+@mixin head-filter {
+  // TODO: use element-specific variables when passthrough tokens are supported
+  // --forge-text-field-height: 40px;
+  // --forge-select-height: 40px;
+  --forge-field-height: 40px;
+
+  .forge-table-head__cell-container {
+    padding: #{spacing.variable(xsmall)} 0;
+  }
+}
+
+/// Removes the border on all `th` and `td` elements.
+@mixin row-no-border {
+  th, td {
+    border-bottom: none;
+  }
+}
+
+// The base styles for the cells within the table head.
+@mixin head-cell {
+  color: #{theme.variable(text-medium)};
+  font-weight: bold;
+  text-align: left;
+  font-size: #{typography.font-size-relative('0750')};
+  box-sizing: border-box;
+}
+
+// The sorted state styles for the column header cells.
+@mixin head-cell-text-sorted {
+  color: #{theme.variable(text-high)};
+  font-weight: 700 !important;
+}
+
+// Creates styles for the sort icon within the table head cells.
+@mixin head-cell-sort-icon {
+  color: #{theme.variable(text-high)};
+  font-size: 18px !important;
+  height: 18px;
+  width: 18px;
+  margin-left: 5px;
+  transition: transform #{animation.variable(duration-short4)} #{animation.variable(easing-accelerate)};
+  display: none !important;
+  font-weight: 700;
+}
+
+// The active sort icon styles.
+@mixin head-cell-sort-icon-active {
+  display: inline !important;
+}
+
+// Rotates the sort icon using a transform when in ascending direction.
+@mixin head-cell-sort-icon-ascending {
+  transform: rotate(180deg);
+}
+
+// The table head cell wrapper element styles for alignment purposes.
+@mixin head-cell-container {
+  display: flex;
+  align-items: center;
+}
+
+// Base styles for a table header cell when the column is sortable.
+@mixin head-cell-sortable($icon-class-name, $sort-order-class-name) {
+  cursor: pointer;
+
+  :hover {
+    .#{$icon-class-name},
+    .#{$sort-order-class-name} {
+      color: #{theme.variable(text-medium)};
+    }
+  }
+}
+
+@mixin head-cell-sortable-button {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  text-align: inherit;
+  margin: inherit;
+  padding-block: #{spacing.variable(xxsmall)};
+  padding-inline: 0;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  outline-offset: #{spacing.variable(xxsmall)};
+}
+
+// The base table body row styles for row interactions.
+@mixin body-row {
+  height: variables.$tbody-row-height;
+  transition: background-color #{animation.variable(duration-short4)} #{animation.variable(easing-standard)};
+
+  &:hover {
+    background-color: var(--forge-table-theme-row-hover-background, variables.$row-hover-background);
+  }
+
+  &--selected:hover {
+    background-color: var(--forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
+  }
+}
+
+// Sets the selected state styles on a row.
+@mixin body-row-selected {
+  background-color: var(--forge-table-theme-row-selected-background, variables.$row-selected-background);
+
+  &:hover {
+    background-color: var(--forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
+  }
+}
+
+// Sets the styles for a clickable row.
+@mixin body-row-clickable {
+  cursor: pointer;
+
+  &:active {
+    background-color: var(--forge-table-theme-row-active-background, variables.$row-active-background);
+  }
+  
+  &.forge-table-body__row--selected:active {
+    background-color: var(--forge-table-theme-row-selected-active-background, variables.$row-selected-active-background);
+  }
+}
+
+// The cell styles for all tbody rows.
+@mixin body-row-cell {
+  color: #{theme.variable(on-surface)};
+  font-size: variables.$cell-font-size;
+}
+
+@mixin resize-handle {
+  display: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  border-right-width: #{border.variable(medium)};
+  border-right-style: solid;
+  border-right-color: #{theme.variable(primary)};
+  box-sizing: border-box;
+  margin-right: #{spacing.variable(xxsmall)};
+  transition-property: border-right-width;
+  transition-duration: #{animation.variable(duration-medium1)};
+  transition-timing-function: #{animation.variable(easing-accelerate)};
+}
+
+@mixin resize-handle-hover {
+  border-right-width: #{border.variable(thick)};
+  cursor: col-resize;
+}
+
+@mixin forge-table {
+  @include base;
+
+  thead {
+    tr {
+      @include head-row;
+
+      th {
+        @include cell;
+        @include head-cell;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      @include body-row;
+
+      td {
+        @include cell;
+        @include body-row-cell;
+      }
+    }
+  }
+}