@tylertech/forge 2.0.0

package/styles/banner/_variables.scss

@@ -0,0 +1,88 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/theme/color-palette' as mdc-color-palette;
+@use '../theme/theme-values';
+
+// There must be an explicit max height in order for the animation to function.
+//   600px _should_ be more than plenty.
+$max-height: 600px !default;
+
+$padding-top: 14px !default;
+$padding-bottom: $padding-top !default;
+$padding-right: 24px !default;
+$padding-left: $padding-right !default;
+
+$padding-top-narrow: 16px !default;
+$padding-bottom-narrow: $padding-top-narrow !default;
+$padding-right-narrow: 12px !default;
+$padding-left-narrow: $padding-right-narrow !default;
+
+$width-breakpoint: 600px !default;
+$transition: max-height 300ms ease-in-out !default;
+
+$theme-values: (
+  // default theme
+  default-background: mdc-color-palette.$indigo-50,
+  default-font-color: theme-values.$text-primary-color,
+  default-icon-color: theme-values.$text-secondary-color,
+
+  // success theme
+  success-background: #a5d6a7,
+  success-font-color: theme-values.$text-primary-color,
+  success-icon-color: theme-values.$text-secondary-color,
+
+  // warning theme
+  warning-background: #ffdba6,
+  warning-font-color: theme-values.$text-primary-color,
+  warning-icon-color: theme-values.$text-secondary-color,
+
+  // danger theme
+  danger-background: #ffcdd2,
+  danger-font-color: theme-values.$text-primary-color,
+  danger-icon-color: theme-values.$text-secondary-color,
+
+  // info-primary theme
+  info-primary-background: #bbdefb,
+  info-primary-font-color: theme-values.$text-primary-color,
+  info-primary-icon-color: theme-values.$text-secondary-color,
+
+  // info-secondary theme
+  info-secondary-background: #e0e0e0,
+  info-secondary-font-color: theme-values.$text-primary-color,
+  info-secondary-icon-color: theme-values.$text-secondary-color
+) !default;
+
+$theme-values-dark: (
+  // default theme
+  default-background: #3f51b5,
+  default-font-color: #ffffff,
+  default-icon-color: #ffffff,
+
+  // success theme
+  success-background: #175a2a,
+  success-font-color: #ffffff,
+  success-icon-color: #ffffff,
+
+  // warning theme
+  warning-background: #933600,
+  warning-font-color: #ffffff,
+  warning-icon-color: #ffffff,
+
+  // danger theme
+  danger-background: #810022,
+  danger-font-color: #ffffff,
+  danger-icon-color: #ffffff,
+
+  // info-primary theme
+  info-primary-background: #0a3b71,
+  info-primary-font-color: #ffffff,
+  info-primary-icon-color: #ffffff,
+
+  // info-secondary theme
+  info-secondary-background: #424242,
+  info-secondary-font-color: #ffffff,
+  info-secondary-icon-color: #ffffff
+) !default;

package/styles/banner/banner.scss

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@use '../icon-button/forge-icon-button';
+
+@include mixins.core-styles;
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+@include mixins.default-theme();
+@include mixins.theme('danger');
+@include mixins.theme('warning');
+@include mixins.theme('success');
+@include mixins.theme('info-primary');
+@include mixins.theme('info-secondary');

package/styles/bottom-sheet/_mixins.scss

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
+@use '@material/animation/variables' as mdc-animation-variables;
+@use '@material/shape/shape' as mdc-shape;
+@use '../theme';
+@use '../typography/mixins' as typopgraphy-mixins;
+@use '../utils/mixins-media' as media-mixins;
+@use './variables';
+@use '../utils/mixins' as utils-mixins;
+
+@mixin core-styles() {
+  .forge-bottom-sheet {
+    @include base;
+
+    &--open {
+      @include open;
+    }
+
+    &--fullscreen.forge-bottom-sheet--open {
+      @include open-fullscreen;
+    }
+
+    &--dragging {
+		@include dragging;
+    }
+
+    &--scrollable {
+		@include scrollable;
+    }
+  }
+}
+
+@mixin host() {
+  @include theme.z-index(dialog);
+
+  position: fixed;
+}
+
+@mixin backdrop() {
+  @include utils-mixins.position-abs-zero;
+
+  position: fixed;
+}
+
+@mixin base() {
+  @include mdc-theme.property(background-color, surface);
+  @include mdc-elevation-theme.elevation(8);
+  @include theme.css-custom-property(border-radius, --forge-bottom-sheet-border-radius, mdc-shape.$medium-component-radius mdc-shape.$medium-component-radius 0 0);
+  @include theme.css-custom-property(max-width, --forge-bottom-sheet-desktop-max-width, 50%);
+
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  max-height: 50%;
+  margin: 0 auto;
+  display: inline-flex;
+  flex-direction: column;
+  transform: translateY(100%);
+  transition: max-height variables.$transition-duration ease-in,
+              transform variables.$transition-duration-close mdc-animation-variables.$standard-curve-timing-function;
+
+  @include media-mixins.tablet-portrait-down {
+    @include full-width;
+  }
+}
+
+@mixin full-width() {
+  max-width: 100%;
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+}
+
+@mixin open() {
+  transform: translateY(0);
+  transition-duration: variables.$transition-duration;
+}
+
+@mixin open-fullscreen {
+  height: 100%;
+  max-height: 100%;
+  transition: max-height variables.$transition-duration ease-in;
+}
+
+@mixin dragging {
+	transition: none !important;
+}
+
+@mixin scrollable {
+	height: 100%;
+}

package/styles/bottom-sheet/_variables.scss

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$transition-duration: var(--forge-bottom-sheet-transition-duration, 250ms);
+$transition-duration-close: var(--forge-bottom-sheet-transition-duration-close, 200ms);

package/styles/bottom-sheet/bottom-sheet.scss

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@use '../icon-button/forge-icon-button';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+
+  forge-backdrop {
+    @include mixins.backdrop;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}

package/styles/busy-indicator/_mixins.scss

@@ -0,0 +1,184 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/button/button-shared-theme' as mdc-button-shared-theme;
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
+@use '@material/typography/typography' as mdc-typography;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/animation/functions' as mdc-animation;
+@use '../theme';
+@use './variables';
+
+@mixin host() {
+  outline: none;
+  contain: content;
+}
+
+@mixin core-styles-row() {
+  .forge-busy-indicator {
+    
+    &__surface {
+      @include surface;
+
+      &--fixed {
+        @include surface-fixed;
+      }
+
+      &--invisible {
+        @include surface-invisible;
+      }
+    }
+
+    &__title {
+      @include title;
+    }
+
+    &__message-container {
+      @include message-container;
+    }
+
+    &__message {
+      @include message;
+    }
+
+    &__cancel-button {
+      @include cancel-button;
+    }
+
+    &__progress-container {
+      @include progress-container;
+    }
+  }
+}
+
+@mixin core-styles-column() {
+  .forge-busy-indicator {
+    &__surface {
+      @include surface($direction: 'column');
+
+      &--invisible {
+        @include surface-invisible;
+      }
+    }
+
+    &__title {
+      @include title;
+    }
+
+    &__message-container {
+      @include column-layout;
+    }
+
+    &__message {
+      @include row-layout-message;
+    }
+
+    &__forge-cancel-button {
+      @include row-layout-cancel-button;
+    }
+
+    &__progress-container {
+      @include progress-container;
+    }
+
+    &__spinner {
+      margin-bottom: 32px;
+    }
+  }
+}
+
+@mixin surface($direction: 'row') {
+  @include mdc-elevation-theme.elevation(24);
+  @include mdc-theme.property(background-color, surface);
+  @include mdc-button-shared-theme.shape-radius(medium, false);
+  @include theme.z-index(dialog);
+
+  position: absolute;
+  padding: 48px;
+  box-sizing: border-box;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  transition: mdc-animation.enter(opacity, 120ms);
+  outline: none;
+  opacity: 0;
+
+  @if $direction == 'row' {
+    min-width: variables.$surface-min-width-row;
+    max-width: variables.$surface-max-width-row;
+  } @else {
+    min-width: variables.$surface-min-width;
+    max-width: variables.$surface-max-width;
+  }
+}
+
+@mixin surface-fixed() {
+  position: fixed;
+}
+
+@mixin surface-invisible() {
+  background: transparent;
+  box-shadow: none;
+  min-width: auto;
+}
+
+@mixin title() {
+  @include mdc-typography.typography(headline5);
+
+  margin-top: -24px;
+  margin-left: -24px;
+}
+
+@mixin message-container() {
+  display: flex;
+  align-items: center;
+}
+
+@mixin message() {
+  @include mdc-typography.typography(body1);
+  @include mdc-theme.property(color, text-secondary-on-background);
+
+  flex: 1 auto;
+
+  &:nth-child(2) {
+    margin-left: 16px;
+  }
+}
+
+@mixin cancel-button() {
+  margin-left: 16px;
+}
+
+@mixin progress-container() {
+  min-width: 244px;
+  margin-top: 24px;
+}
+
+@mixin row-layout {
+  flex-direction: row;
+  display: flex;
+}
+
+@mixin column-layout {
+  flex-direction: column;
+  display: flex;
+  place-items: center;
+}
+
+@mixin row-layout-cancel-button {
+  margin-top: 16px;
+  margin-bottom: -36px;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+@mixin row-layout-message() {
+  @include mdc-typography.typography(body1);
+  @include mdc-theme.property(color, text-secondary-on-background);
+
+  flex: 1 auto;
+  text-align: center;
+  margin: 0;
+}

package/styles/busy-indicator/_variables.scss

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$surface-min-width: 256px !default;
+$surface-max-width: 356px !default;
+$surface-min-width-row: 280px !default;
+$surface-max-width-row: 865px !default;

package/styles/busy-indicator/busy-indicator.scss

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+@use '../button/forge-button';
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([direction=row]) {
+  @include mixins.core-styles-row;
+}
+
+:host([direction=column]) {
+  @include mixins.core-styles-column;
+}

package/styles/busy-indicator/forge-busy-indicator.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+*[forge-busy-indicator-open=true] {
+  overflow: hidden;
+}

package/styles/button/_button-base.scss

@@ -0,0 +1,183 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+//
+// Copyright 2020 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.forge-*' should only be used in this project.
+
+@use '@material/elevation/elevation' as mdc-elevation;
+@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
+@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
+@use '@material/rtl/rtl' as mdc-rtl;
+@use '@material/typography/typography' as mdc-typography;
+@use './button-ripple';
+@use './button-shared-theme';
+
+@mixin static-styles($query: mdc-feature-targeting.all()) {
+  @include static-styles-without-ripple($query: $query);
+  @include button-ripple.static-styles($query: $query);
+}
+
+@mixin static-styles-without-ripple($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  // prettier-ignore
+  @include mdc-elevation.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE
+
+  // postcss-bem-linter: define button
+  .forge-button {
+    @include base($query);
+    // The icon CSS class overrides styles defined in the .material-icons CSS
+    // class, which is loaded separately so the order of CSS definitions is not
+    // guaranteed. Therefore, increase specifity by nesting this class to ensure
+    // overrides apply.
+    .forge-button__icon {
+      @include mdc-feature-targeting.targets($feat-structure) {
+        @include icon;
+      }
+    }
+  }
+
+  .forge-button__label ~ .forge-button__icon {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      @include icon-trailing;
+    }
+  }
+
+  svg.forge-button__icon {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      @include icon-svg;
+    }
+  }
+
+  // TODO: figure out the correct place for this rule.
+  .forge-button--raised,
+  .forge-button--unelevated,
+  .forge-button--outlined {
+    .forge-button__icon {
+      @include mdc-feature-targeting.targets($feat-structure) {
+        // Icons inside contained buttons have different styles due to increased button padding
+        @include icon-contained;
+      }
+    }
+
+    .forge-button__label ~ .forge-button__icon {
+      @include mdc-feature-targeting.targets($feat-structure) {
+        @include icon-contained-trailing;
+      }
+    }
+  }
+  // postcss-bem-linter: end
+}
+
+@mixin base($query) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-typography.typography(button, $query);
+  @include mdc-elevation-theme.overlay-surface-position($query: $query);
+  @include mdc-elevation-theme.overlay-dimensions(100%, $query: $query);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    display: inline-flex;
+    // position: relative; already set in mdc-elevation-overlay-surface-position
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 64px;
+    border: none;
+    outline: none;
+    /* @alternate */
+    line-height: inherit;
+    user-select: none;
+    -webkit-appearance: none;
+    // Even though `visible` is the default, IE 11 computes the property as
+    // `hidden` in some cases, unless it's explicitly defined here.
+    overflow: visible;
+    vertical-align: middle;
+  }
+
+  &::-moz-focus-inner {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  // postcss-bem-linter: ignore
+  &:active {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      outline: none;
+    }
+  }
+
+  &:hover {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      cursor: pointer;
+    }
+  }
+
+  &:disabled {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin icon {
+  @include mdc-rtl.reflexive-box(margin, right, 8px);
+
+  $icon-size: mdc-typography.px-to-rem(18px);
+
+  display: inline-block;
+  font-size: $icon-size;
+  height: $icon-size;
+  vertical-align: top;
+  width: $icon-size;
+}
+
+@mixin icon-trailing {
+  @include mdc-rtl.reflexive-box(margin, left, 8px);
+}
+
+@mixin icon-svg {
+  fill: currentColor;
+}
+
+@mixin icon-contained {
+  @include mdc-rtl.reflexive-property(margin, -4px, 8px);
+}
+
+@mixin icon-contained-trailing {
+  @include mdc-rtl.reflexive-property(margin, 8px, -4px);
+}
+
+// FORGE(new): added new dense mixin
+@mixin dense() {
+  @include button-shared-theme.density(-3);
+
+  height: 1.5rem;
+}