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

package/styles/calendar/_mixins.scss

@@ -3,16 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '../theme';
+@use '../core/styles/typography';
+@use '../core/styles/theme';
 @use '../utils/mixins' as utils;
 @use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(calendar, $theme, variables.$theme-values);
-}
+@use '../focus-indicator';
 
 @mixin core-styles() {
   .forge-calendar {
@@ -49,6 +44,10 @@
     &__date {
       @include date;
 
+      forge-focus-indicator {
+        @include focus-indicator.provide-theme(( shape: 50% ));
+      }
+
       &__inner {
         @include date-inner;
       }
@@ -155,25 +154,23 @@
 }
 
 @mixin popup-context-styles() {
-  @include theme.property(--forge-calendar-event-stroke-color, elevated-surface);
+  --forge-calendar-event-stroke-color: #{theme.variable(surface-bright)};
 }
 
 @mixin host() {
-  @include theme.property(--forge-calendar-event-stroke-color, surface);
+  --forge-calendar-event-stroke-color: #{theme.variable(surface)};
 
   display: inline-block;
 }
 
 @mixin base() {
-  @include theme.css-custom-property(width, --forge-calendar-width, variables.$width);
-
+  width: var(--forge-calendar-width, variables.$width);
   height: fit-content;
   position: relative;
 }
 
 @mixin header() {
-  @include theme.css-custom-property(padding, --forge-calendar-controls-padding, 0);
-
+  padding: var(--forge-calendar-controls-padding, 0);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -192,8 +189,7 @@
 }
 
 @mixin footer() {
-  @include theme.css-custom-property(padding, --forge-calendar-controls-padding, 0);
-
+  padding: var(--forge-calendar-controls-padding, 0);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -221,7 +217,7 @@
 }
 
 @mixin day() {
-  @include mdc-typography.typography(caption);
+  @include typography.style(label2);
   @include square-aspect-ratio;
 
   display: flex;
@@ -244,20 +240,10 @@
   outline: none;
   cursor: default;
   user-select: none;
-
-  .mdc-ripple-surface {
-    border-radius: inherit;
-
-    &::before, &::after {
-      @include date-inner-gap($force: true);
-
-      border-radius: inherit !important; // Override ripple value to match the parent
-    }
-  }
 }
 
 @mixin date-inner() {
-  @include mdc-typography.typography(body2);
+  @include typography.style(body1);
   @include date-inner-gap;
 
   display: flex;
@@ -269,8 +255,8 @@
 
 @mixin date-today() {
   &:not([disabled]) {
-    @include theme.property(color, primary);
-    @include theme.property(border-color, primary);
+    color: #{theme.variable(primary)};
+    border-color: #{theme.variable(primary)};
   }
 
   .forge-calendar__date__inner {
@@ -282,42 +268,34 @@
 
   // Override the color when also selected
   &.forge-calendar__date--selected {
-    @include theme.property(color, on-primary);
+    color: #{theme.variable(on-primary)};
   }
 }
 
 @mixin date-selectable() {
-  @include mdc-ripple.surface($ripple-target: '.mdc-ripple-surface', $include-will-change: false);
-  @include mdc-ripple.radius-unbounded($ripple-target: '.mdc-ripple-surface');
-  @include mdc-ripple-theme.states($color: on-surface, $ripple-target: '.mdc-ripple-surface');
-
   cursor: pointer;
 }
 
 @mixin date-selected() {
   &:not([disabled]) .forge-calendar__date__inner {
-    @include theme.property(background-color, primary);
-    @include theme.property(color, on-primary);
+    background-color: #{theme.variable(primary)};
+    color: #{theme.variable(on-primary)};
   }
 
   &[disabled] .forge-calendar__date__inner {
-    @include theme.property(background-color, form-field-disabled-on-background);
-    @include theme.property(color, text-disabled-on-background);
+    background-color: #{theme.variable(primary-container-minimum)};
+    color: #{theme.variable(text-low)};
   }
   
-  .forge-calendar:not(.forge-calendar--readonly) &:hover .forge-calendar__date__inner {
-    opacity: 0.87;
-  }
-
-  &:focus, &.mdc-ripple-upgraded--background-focused {
-    .forge-calendar__date__inner {
-      opacity: 0.54;
-    }
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: var(--forge-theme-primary-container)
+    ));
   }
 }
 
 @mixin date-disabled() {
-  @include theme.property(color, text-disabled-on-background);
+  color: #{theme.variable(text-low)};
 }
 
 @mixin date-spacer {
@@ -333,8 +311,7 @@
 
 @mixin range() {
   .forge-calendar__range__target {
-    @include theme.property(background-color, primary);
-
+    background-color: #{theme.variable(primary)};
     position: absolute;
     width: 100%;
     height: 100%;
@@ -383,13 +360,13 @@
 
 @mixin event() {
   @include event-color;
-  @include theme.css-custom-property(font-size, --forge-calendar-event-dot-size, variables.$event-dot-size);
+  
+  font-size: var(--forge-calendar-event-dot-size, variables.$event-dot-size);
 }
 
 @mixin event-overflow() {
-  @include theme.property(color, on-surface);
-  @include theme.css-custom-property(background-color, --mdc-theme-surface);
-
+  background-color: #{theme.variable(surface)};
+  color: #{theme.variable(on-surface)};
   border-radius: 50%;
 }
 
@@ -412,7 +389,7 @@
 @mixin event-color() {
   @each $color in variables.$theme-base-strings {
     &[data-event-theme=#{"" + $color}] {
-      @include theme.css-custom-property(color, --forge-calendar-theme-event-#{$color}-accent, map-get(variables.$theme-values, event-#{$color}-accent));
+      color: var(--forge-calendar-theme-event-#{$color}-accent, map-get(variables.$theme-values, event-#{$color}-accent));
     }
   }
 }
@@ -428,7 +405,7 @@
 }
 
 @mixin date-view-row-gap() {
-  @include theme.css-custom-property(margin-top, --forge-calendar-row-gap, variables.$row-gap);
+  margin-top: var(--forge-calendar-row-gap, variables.$row-gap);
 }
 
 @mixin date-inner-gap($force: false) {

package/styles/calendar/_variables.scss

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/theme/color-palette' as mdc-color-palette;
+@use '../core/styles/tokens/color-palette/material-color-palette';
 
 $width: 100%;
 $row-gap: 2px;
@@ -32,48 +32,48 @@ $theme-base-strings:
   deep-orange;
 $theme-values: (
   // primary theme
-  event-primary-background: mdc-color-palette.$indigo-100,
-  event-primary-accent: mdc-color-palette.$indigo-500,
+  event-primary-background: material-color-palette.$indigo-100,
+  event-primary-accent: material-color-palette.$indigo-500,
 
   // secondary theme
-  event-secondary-background: mdc-color-palette.$amber-100,
-  event-secondary-accent: mdc-color-palette.$amber-500,
+  event-secondary-background: material-color-palette.$amber-100,
+  event-secondary-accent: material-color-palette.$amber-500,
 
   // basic theme
-  event-blue-background: mdc-color-palette.$blue-100,
-  event-blue-accent: mdc-color-palette.$blue-500,
-  event-light-green-background: mdc-color-palette.$light-green-100,
-  event-light-green-accent: mdc-color-palette.$light-green-500,
-  event-cyan-background: mdc-color-palette.$cyan-100,
-  event-cyan-accent: mdc-color-palette.$cyan-500,
-  event-teal-background: mdc-color-palette.$teal-100,
-  event-teal-accent: mdc-color-palette.$teal-500,
-  event-orange-background: mdc-color-palette.$orange-100,
-  event-orange-accent: mdc-color-palette.$orange-500,
-  event-blue-grey-background: mdc-color-palette.$blue-grey-100,
-  event-blue-grey-accent: mdc-color-palette.$blue-grey-500,
-  event-grey-background: mdc-color-palette.$grey-100,
-  event-grey-accent: mdc-color-palette.$grey-500,
+  event-blue-background: material-color-palette.$blue-100,
+  event-blue-accent: material-color-palette.$blue-500,
+  event-light-green-background: material-color-palette.$light-green-100,
+  event-light-green-accent: material-color-palette.$light-green-500,
+  event-cyan-background: material-color-palette.$cyan-100,
+  event-cyan-accent: material-color-palette.$cyan-500,
+  event-teal-background: material-color-palette.$teal-100,
+  event-teal-accent: material-color-palette.$teal-500,
+  event-orange-background: material-color-palette.$orange-100,
+  event-orange-accent: material-color-palette.$orange-500,
+  event-blue-grey-background: material-color-palette.$blue-grey-100,
+  event-blue-grey-accent: material-color-palette.$blue-grey-500,
+  event-grey-background: material-color-palette.$grey-100,
+  event-grey-accent: material-color-palette.$grey-500,
 
   // extended theme
-  event-red-background: mdc-color-palette.$red-100,
-  event-red-accent: mdc-color-palette.$red-500,
-  event-pink-background: mdc-color-palette.$pink-100,
-  event-pink-accent: mdc-color-palette.$pink-500,
-  event-purple-background: mdc-color-palette.$purple-100,
-  event-purple-accent: mdc-color-palette.$purple-500,
-  event-light-blue-background: mdc-color-palette.$light-blue-100,
-  event-light-blue-accent: mdc-color-palette.$light-blue-500,
-  event-deep-purple-background: mdc-color-palette.$deep-purple-100,
-  event-deep-purple-accent: mdc-color-palette.$deep-purple-500,
-  event-green-background: mdc-color-palette.$green-100,
-  event-green-accent: mdc-color-palette.$green-500,
-  event-lime-background: mdc-color-palette.$lime-100,
-  event-lime-accent: mdc-color-palette.$lime-500,
-  event-yellow-background: mdc-color-palette.$yellow-100,
-  event-yellow-accent: mdc-color-palette.$yellow-500,
-  event-brown-background: mdc-color-palette.$brown-100,
-  event-brown-accent: mdc-color-palette.$brown-500,
-  event-deep-orange-background: mdc-color-palette.$deep-orange-100,
-  event-deep-orange-accent: mdc-color-palette.$deep-orange-500,
+  event-red-background: material-color-palette.$red-100,
+  event-red-accent: material-color-palette.$red-500,
+  event-pink-background: material-color-palette.$pink-100,
+  event-pink-accent: material-color-palette.$pink-500,
+  event-purple-background: material-color-palette.$purple-100,
+  event-purple-accent: material-color-palette.$purple-500,
+  event-light-blue-background: material-color-palette.$light-blue-100,
+  event-light-blue-accent: material-color-palette.$light-blue-500,
+  event-deep-purple-background: material-color-palette.$deep-purple-100,
+  event-deep-purple-accent: material-color-palette.$deep-purple-500,
+  event-green-background: material-color-palette.$green-100,
+  event-green-accent: material-color-palette.$green-500,
+  event-lime-background: material-color-palette.$lime-100,
+  event-lime-accent: material-color-palette.$lime-500,
+  event-yellow-background: material-color-palette.$yellow-100,
+  event-yellow-accent: material-color-palette.$yellow-500,
+  event-brown-background: material-color-palette.$brown-100,
+  event-brown-accent: material-color-palette.$brown-500,
+  event-deep-orange-background: material-color-palette.$deep-orange-100,
+  event-deep-orange-accent: material-color-palette.$deep-orange-500,
 ) !default;

package/styles/calendar/calendar-menu/_mixins.scss

@@ -3,13 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '../../theme';
-@use '../../theme/theme-values';
+@use '../../core/styles/typography';
+@use '../../core/styles/theme';
+@use '../../core/styles/scrollbar';
 @use './variables';
+@use '../../focus-indicator';
 
 @mixin core-styles() {
   .forge-calendar-menu {
@@ -64,7 +62,7 @@
         }
       }
 
-      &--focused, &:focus, .mdc-ripple-upgraded--background-focused {
+      &--focused, &:focus {
         @include item-focused;
       }
     }
@@ -135,8 +133,7 @@
 }
 
 @mixin base() {
-  @include theme.property(background-color, surface);
-
+  background-color: #{theme.variable(surface)};
   position: relative;
   height: 100%;
   width: 100%;
@@ -144,7 +141,7 @@
 }
 
 @mixin popup-context-base() {
-  @include theme.property(background-color, elevated-surface);
+  background-color: #{theme.variable(surface-bright)};
 }
 
 @mixin view() {
@@ -157,8 +154,7 @@
 }
 
 @mixin grid() {
-  @include theme.css-custom-property(max-height, --forge-calendar-menu-max-height, variables.$max-height);
-
+  max-height: var(--forge-calendar-menu-max-height, variables.$max-height);
   display: grid;
   gap: 16px;
   justify-items: center;
@@ -176,7 +172,7 @@
 }
 
 @mixin grid-item() {
-  @include mdc-typography.typography(body2);
+  @include typography.style(body1);
 
   display: flex;
   justify-content: center;
@@ -191,28 +187,22 @@
 }
 
 @mixin grid-item-enabled {
-  @include mdc-ripple.surface($include-will-change: false);
-  @include mdc-ripple.radius-bounded();
-  @include mdc-ripple-theme.states($color: primary);
-
-  border: theme-values.$border;
+  border: 1px solid #{theme.variable(outline)};
   cursor: pointer;
 }
 
 @mixin grid-item-disabled() {
-  @include theme.property(color, text-disabled-on-background);
+  color: #{theme.variable(text-low)};
 }
 
 @mixin grid-item-selected() {
-  @include theme.property(color, on-primary);
-  @include theme.property(background-color, primary);
+  background-color: #{theme.variable(primary)};
+  color: #{theme.variable(on-primary)};
 
-  &:hover {
-    opacity: 0.87;
-  }
-
-  &:focus, &.mdc-ripple-upgraded--background-focused {
-    opacity: 0.54;
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: #{theme.variable(primary-container)}
+    ));
   }
 }
 
@@ -222,7 +212,7 @@
 }
 
 @mixin list-wrapper() {
-  @include theme.scrollbar;
+  @include scrollbar.base;
 
   position: relative;
   height: 100%;
@@ -230,8 +220,6 @@
 }
 
 @mixin list-item() {
-  @include _deprecated-interactable;
-
   display: flex;
   align-items: center;
   justify-content: center;
@@ -242,18 +230,17 @@
   overflow: hidden;
   text-align: center;
   cursor: pointer;
+  position: relative;
 }
 
 @mixin list-item-selected() {
-  @include theme.property(background-color, primary);
-  @include theme.property(color, on-primary);
+  background-color: #{theme.variable(primary)};
+  color: #{theme.variable(on-primary)};
 
-  &:hover {
-    opacity: 0.87;
-  }
-
-  &:focus, &.mdc-ripple-upgraded--background-focused {
-    opacity: 0.54;
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: var(--forge-theme-primary-container)
+    ));
   }
 }
 
@@ -417,49 +404,3 @@
     }
   }
 }
-
-@mixin _deprecated-interactable() {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-bounded;
-  @include mdc-ripple-theme.states(on-surface);
-  @include mdc-ripple-theme.states-activated(primary);
-  @include mdc-ripple-theme.states-selected(primary);
-
-  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
-    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
-      mdc-ripple-theme.states-opacity(primary, hover);
-  }
-
-  &:focus,
-  &--active {
-    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
-        }
-      }
-
-      &::before,
-      &::after {
-        @include mdc-theme.property(background-color, on-surface);
-      }
-    }
-  }
-
-  &--active:focus {
-    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
-            mdc-ripple-theme.states-opacity(primary, activated);
-        }
-      }
-    }
-  }
-}

package/styles/color-picker/_mixins.scss

@@ -3,12 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '../theme';
-@use '../theme/theme-values';
-@use './variables';
+@use '../core/styles/theme';
+@use '../core/styles/typography';
+@use '../core/styles/animation';
 
 @mixin styles() {
   * {
@@ -95,18 +92,17 @@
       flex: 1;
 
       label {
-        @include mdc-typography.typography(caption);
-        @include mdc-theme.property(color, text-secondary-on-light);
+        @include typography.style(label2);
+        color: #{theme.variable(text-medium)};
       }
 
       input {
-        @include mdc-typography.typography(caption);
+        @include typography.style(label2);
 
         &[type=number],
         &[type=text] {
-          @include mdc-theme.property(color, on-surface);
-          @include theme.property(border-color, border-color);
-
+          border-color: #{theme.variable(outline)};
+          color: #{theme.variable(on-surface)};
           background-color: transparent;
           padding: 4px 8px;
           border-width: 1px;
@@ -114,18 +110,17 @@
           border-radius: 4px;
           box-sizing: border-box;
           outline: none;
-          transition: mdc-animation.enter(box-shadow, 200ms),
-                      mdc-animation.enter(border-color, 200ms);
+          transition-property: box-shadow, border-colo;
+          transition-duration: #{animation.variable(duration-short4)};
+          transition-timing-function: #{animation.variable(easing-standard)};
 
           &:hover {
-            @include mdc-theme.property(border-color, text-primary-on-background);
+            border-color: #{theme.variable(text-high)};
           }
 
           &:focus {
-            @include mdc-theme.property(border-color, primary);
-
-            box-shadow: 0 0 0 1px inset theme-values.$primary;
-            box-shadow: 0 0 0 1px inset var(--mdc-theme-primary, theme-values.$primary);
+            border-color: #{theme.variable(primary)};
+            box-shadow: 0 0 0 1px inset #{theme.variable(primary)};
           }
         }
 
@@ -190,8 +185,7 @@
 }
 
 @mixin base() {
-  @include theme.css-custom-property(width, --forge-color-picker-width, variables.$width);
-
+  width: var(--forge-color-picker-width, 272px);
   position: relative;
   display: inline-block;
   overflow: hidden;

package/styles/color-picker/color-picker.scss

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
 @use './mixins';
 
 @include mixins.styles;

package/styles/core/styles/animation/index.scss

@@ -7,10 +7,32 @@
 @use '../utils';
 @use '../tokens/animation/tokens';
 
+///
+/// Emits custom property declarations for all animation theme tokens.
+/// 
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(animation, $token-name, $token-value);
+  }
+}
+
+///
+/// Gets a CSS custom property declaration for a specific animation token with its token value as the fallback value.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   animation-duration: #{animation.variable(duration-short4)}; // => animation-duration: var(--forge-animation-duration-short4, 200ms);
+/// }
+/// ```
+/// 
 @function variable($key, $prefix: config.$prefix) {
   @return utils.variable(animation, tokens.$tokens, $key, $prefix);
 }
 
+///
+/// Generates CSS custom property declarations for the provided animation tokens.
+/// 
 @function provide($tokens, $prefix: config.$prefix) {
   @return utils.provide(tokens.$tokens, $tokens, animation, $prefix);
 }

package/styles/core/styles/border/index.scss

@@ -9,13 +9,22 @@
 @use '../theme';
 @use '../utils';
 
+///
+/// Emits custom property declarations for all border theme tokens.
+/// 
+@mixin properties {
+  @each $token-name, $token-value in tokens.$tokens {
+    @include utils.declare-var(border, $token-name, $token-value);
+  }
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific border token with its token value as the fallback value.
 /// 
 /// Example:
 /// ```scss
 /// .my-class {
-///   @include border.style(standard); // => border: var(--forge-border-standard, 1px solid var(--forge-theme-border-color));
+///   @include border.style(standard); // => border: var(--forge-border-standard, 1px solid var(--forge-theme-outline));
 /// }
 /// ```
 ///