@tylertech/forge 2.0.0

package/styles/floating-action-button/_fab.mixins.scss

@@ -0,0 +1,351 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+// Copyright 2016 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 'sass:math';
+@use 'sass:list';
+@use '@material/animation/functions' as mdc-animation-functions;
+@use '@material/elevation/mixins' as mdc-elevation-mixins;
+@use '@material/elevation/variables' as mdc-elevation-variables;
+@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
+@use '@material/dom/mixins' as mdc-dom-mixins;
+@use '@material/ripple/ripple' as mdc-ripple;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '@material/typography/typography' as mdc-typography;
+@use './fab-custom-properties';
+@use './extended-fab-theme';
+@use './fab-theme';
+@use '../theme/theme-values';
+
+@mixin core-styles($query: mdc-feature-targeting.all()) {
+  @include without-ripple($query);
+  @include ripple($query);
+
+  // FORGE (new): forge-specific styles
+  @include host;
+}
+
+@mixin without-ripple($query: mdc-feature-targeting.all()) {
+  // postcss-bem-linter: define fab
+
+  // prettier-ignore
+  @include mdc-elevation-mixins.overlay-common($query); // COPYBARA_COMMENT_THIS_LINE
+
+  .forge-fab {
+    @include base_($query: $query);
+    @include fab-theme.container-color(secondary, $query: $query);
+    @include fab-theme.icon-size(24px, $query: $query);
+    @include fab-theme.ink-color(on-secondary, $query: $query);
+    @include fab-theme.shape-radius(fab-theme.$shape-radius, $query: $query);
+    @include mdc-elevation-mixins.elevation(6, $query: $query);
+  }
+
+  .forge-fab--mini {
+    @include mini_($query: $query);
+  }
+
+  .forge-fab--extended {
+    @include extended_($query: $query);
+  }
+
+  .forge-fab::before {
+    @include mdc-dom-mixins.transparent-border($query: $query);
+  }
+
+  .forge-fab__label {
+    @include label_($query: $query);
+  }
+
+  .forge-fab__icon {
+    @include icon_($query: $query);
+  }
+
+  // Increase specificity for FAB icon styles that need to override styles defined for .material-icons
+  // (which is loaded separately so the order of CSS definitions is not guaranteed)
+  .forge-fab .forge-fab__icon {
+    @include icon-overrides_($query: $query);
+  }
+
+  .forge-fab--exited {
+    @include exited_($query: $query);
+  }
+
+  // postcss-bem-linter: end
+}
+
+@mixin ripple($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-ripple.common($query); // COPYBARA_COMMENT_THIS_LINE
+
+  .forge-fab {
+    @include mdc-ripple.surface(
+      $query: $query,
+      $ripple-target: fab-theme.$ripple-target
+    );
+    @include mdc-ripple.radius-bounded(
+      $query: $query,
+      $ripple-target: fab-theme.$ripple-target
+    );
+    @include fab-theme.ripple-color(on-secondary, $query: $query);
+
+    #{fab-theme.$ripple-target} {
+      @include mdc-ripple.target-common($query: $query);
+
+      @include mdc-feature-targeting.targets($feat-structure) {
+        overflow: hidden;
+      }
+    }
+    @include mdc-ripple-theme.behind-content(
+      fab-theme.$ripple-target,
+      $query: $query
+    );
+  }
+}
+
+$icon-enter-delay_: 90ms;
+$icon-enter-duration_: 180ms;
+
+@mixin base_($query: mdc-feature-targeting.all()) {
+  @include mdc-elevation-mixins.overlay-surface-position($query: $query);
+  @include mdc-elevation-mixins.overlay-dimensions(100%, $query: $query);
+
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: fab-theme.$height;
+    height: fab-theme.$height;
+    padding: 0;
+    border: none;
+    fill: currentColor;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    -moz-appearance: 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;
+  }
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    transition: box-shadow mdc-elevation-variables.$transition-duration mdc-elevation-variables.$transition-timing-function, opacity 15ms linear 30ms,
+      mdc-animation-functions.enter(transform, $icon-enter-duration_ + $icon-enter-delay_);
+  }
+
+  &::-moz-focus-inner {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  &:hover {
+    @include mdc-elevation-mixins.elevation(8, $query: $query);
+  }
+
+  @include mdc-ripple-theme.focus() {
+    @include mdc-elevation-mixins.elevation(8, $query: $query);
+  }
+
+  // Increase active state specificity due to mdc-ripple-theme.focus().
+  &:active,
+  &:focus:active {
+    @include mdc-elevation-mixins.elevation(12, $query: $query);
+  }
+
+  &:active,
+  &:focus {
+    // TODO(acdvorak): Should this be paired with states and/or ripple? We don't want to disable outline
+    // (an accessibility/usability feature) unless we're confident that there is also a visual indication that the
+    // element has focus. If the client has customized the DOM in some unexpected way, and is certain that another
+    // element will receive focus instead, they can always override this property manually in their CSS.
+    @include mdc-feature-targeting.targets($feat-structure) {
+      outline: none;
+    }
+  }
+
+  &:hover {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      cursor: pointer;
+    }
+  }
+
+  // This allows for using SVGs within them to align properly in all browsers.
+  // Can remove once: https://bugzilla.mozilla.org/show_bug.cgi?id=1294515 is resolved.
+
+  // stylelint-disable selector-max-type
+  // postcss-bem-linter: ignore
+  > svg {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      width: 100%;
+    }
+  }
+  // stylelint-enable selector-max-type
+}
+
+@mixin mini_($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    width: fab-theme.$mini-height;
+    height: fab-theme.$mini-height;
+  }
+}
+
+@mixin extended_($query: mdc-feature-targeting.all()) {
+  @include mdc-typography.typography(button, $query: $query);
+  @include extended-fab-theme.extended-shape-radius(
+    fab-theme.$shape-radius,
+    $query: $query
+  );
+  $extended-icon-padding: mdc-custom-properties.create(
+    fab-custom-properties.$extended-icon-padding,
+    extended-fab-theme.$extended-icon-padding
+  );
+  $extended-label-padding: mdc-custom-properties.create(
+    fab-custom-properties.$extended-label-padding,
+    extended-fab-theme.$extended-label-padding
+  );
+  @include extended-fab-theme.extended-padding(
+    extended-fab-theme.$extended-icon-padding,
+    extended-fab-theme.$extended-label-padding,
+    $query: $query
+  );
+
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    width: auto;
+    max-width: 100%;
+    height: extended-fab-theme.$extended-height;
+    // This allows the text within the extended fab to be centered for varying font sizes.
+    /* @alternate */
+    line-height: normal;
+  }
+}
+
+@mixin icon_($query: mdc-feature-targeting.all()) {
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    transition: mdc-animation-functions.enter(
+      transform,
+      $icon-enter-duration_,
+      $icon-enter-delay_
+    );
+  }
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    fill: currentColor;
+    will-change: transform;
+  }
+}
+
+@mixin label_($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    justify-content: flex-start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+    overflow-y: visible;
+  }
+}
+
+@mixin icon-overrides_($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+@mixin exited_($query: mdc-feature-targeting.all()) {
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    transition: opacity 15ms linear 150ms, mdc-animation-functions.exit-permanent(transform, 180ms);
+  }
+
+  .forge-fab__icon {
+    @include mdc-feature-targeting.targets($feat-structure) {
+      transform: scale(0);
+    }
+
+    @include mdc-feature-targeting.targets($feat-animation) {
+      transition: mdc-animation-functions.exit-permanent(transform, 135ms);
+    }
+  }
+}
+
+///
+/// FORGE (new): forge-specific mixins
+///
+
+@mixin host() {
+  forge-fab {
+    display: inline-block;
+  }
+}
+
+@mixin host-theme($theme) {
+  forge-fab[theme='#{$theme}'] .forge-fab {
+    @include theme($theme);
+  }
+}
+
+@mixin theme($theme) {
+  $defaultValue: map-get(theme-values.$background-colors, $theme);
+  $contrastValue: map-get(map-get(theme-values.$background-colors, contrast), $theme);
+
+  --mdc-theme-secondary: var(--mdc-theme-#{$theme}, #{$defaultValue});
+  --mdc-theme-on-secondary: #{$contrastValue};
+
+  // IE support
+  .forge-fab {
+    background-color: #{$defaultValue};
+    color: #{$contrastValue};
+  }
+}

package/styles/floating-action-button/forge-floating-action-button.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './fab.mixins' as mixins;
+
+@include mixins.core-styles;
+
+@include mixins.host-theme(primary);
+@include mixins.host-theme(danger);
+@include mixins.host-theme(warning);
+@include mixins.host-theme(success);
+@include mixins.host-theme(info);
+@include mixins.host-theme(info-secondary);
+@include mixins.host-theme(info-secondary);

package/styles/floating-label/_mixins.scss

@@ -0,0 +1,291 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+//
+// Copyright 2018 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.
+//
+
+// Selector '.forge-*' should only be used in this project.
+// stylelint-disable selector-class-pattern
+
+@use '@material/rtl' as mdc-rtl-mixins;
+@use '@material/theme/theme' as mdc-theme;
+@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
+@use '@material/animation/variables' as mdc-animation-variables;
+@use '@material/typography/typography' as mdc-typography;
+@use './variables';
+
+@mixin core-styles($query: mdc-feature-targeting.all()) {
+  .forge-floating-label {
+    @include base($query: $query);
+
+    &--float-above {
+      @include float($query: $query);
+    }
+
+    &--float-above-end-keyframe {
+      transition: none;
+      font-size: variables.$font-size * variables.$float-scale;
+      @include float(variables.$position-y, 0%, 1);
+    }
+
+    &--unfloat-above-start-keyframe {
+      transition: none;
+      font-size: variables.$font-size;
+      @include float(variables.$position-y, 0%, variables.$float-scale);
+    }
+
+    &--required {
+      @include required($query: $query);
+    }
+
+    &--shake {
+      @include shake-animation(standard, $query: $query);
+    }
+  }
+
+  @include shake-keyframes(standard, variables.$position-y, $query: $query);
+}
+
+@mixin base($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+
+  @include mdc-typography.typography(subtitle1, $exclude-props: (line-height, font-size), $query: $query);
+  font-size: var(--mdc-typography-subtitle1-font-size, variables.$font-size);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    position: absolute;
+    /* @noflip */
+    left: 0;
+    /* @noflip */
+    -webkit-transform-origin: left top;
+    /* @noflip */
+    transform-origin: left top;
+    line-height: 1.1rem;
+
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: text;
+    overflow: hidden;
+
+    /* @alternate */
+    // Force the label into its own layer to prevent visible layer promotion adjustments
+    // when the ripple is activated behind it.
+    will-change: transform;
+
+    @include mdc-rtl-mixins.rtl {
+      /* @noflip */
+      right: 0;
+      /* @noflip */
+      left: auto;
+      /* @noflip */
+      -webkit-transform-origin: right top;
+      /* @noflip */
+      transform-origin: right top;
+      /* @noflip */
+      text-align: right;
+    }
+  }
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    transition: transform variables.$transition-duration mdc-animation-variables.$standard-curve-timing-function,
+                color variables.$transition-duration mdc-animation-variables.$standard-curve-timing-function;
+  }
+}
+
+@mixin float($positionY: variables.$position-y, $positionX: 0%, $scale: variables.$float-scale, $query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include float-position($positionY, $positionX, $scale, $query: $query);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    cursor: auto;
+  }
+}
+
+@mixin required($query: mdc-feature-targeting.all()) {
+  &::after {
+    @include _required-content($query);
+  }
+
+  @include mdc-rtl-mixins.rtl {
+    &::after {
+      @include _required-content-rtl($query);
+    }
+  }
+}
+
+@mixin ink-color($color, $query: mdc-feature-targeting.all()) {
+  $feat-color: mdc-feature-targeting.create-target($query, color);
+
+  @include mdc-feature-targeting.targets($feat-color) {
+    @include mdc-theme.property(color, $color);
+  }
+}
+
+// Used for textarea in case of scrolling
+@mixin fill-color($color, $query: mdc-feature-targeting.all()) {
+  $feat-color: mdc-feature-targeting.create-target($query, color);
+
+  @include mdc-feature-targeting.targets($feat-color) {
+    @include mdc-theme.property(background-color, $color);
+  }
+}
+
+@mixin shake-keyframes(
+  $modifier,
+  $positionY,
+  $positionX: 0%,
+  $scale: variables.$float-scale,
+  $query: mdc-feature-targeting.all()
+) {
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    @keyframes mdc-floating-label-shake-float-above-#{$modifier} {
+      0% {
+        @include mdc-rtl-mixins.ignore-next-line();
+        transform: translateX(calc(0 - #{$positionX}))
+          translateY(-#{$positionY}) 
+          scale(#{$scale});
+      }
+
+      33% {
+        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
+        @include mdc-rtl-mixins.ignore-next-line();
+        transform: translateX(calc(4% - #{$positionX}))
+          translateY(-#{$positionY}) 
+          scale(#{$scale});
+      }
+
+      66% {
+        animation-timing-function: cubic-bezier(
+          0.302435,
+          0.381352,
+          0.55,
+          0.956352
+        );
+        @include mdc-rtl-mixins.ignore-next-line();
+        transform: translateX(calc(-4% - #{$positionX}))
+          translateY(-#{$positionY})
+          scale(#{$scale});
+      }
+
+      100% {
+        @include mdc-rtl-mixins.ignore-next-line();
+        transform: translateX(calc(0 - #{$positionX}))
+          translateY(-#{$positionY})
+          scale(#{$scale});
+      }
+    }
+  }
+}
+
+@mixin float-position(
+  $positionY,
+  $positionX: 0%,
+  $scale: variables.$float-scale,
+  $query: mdc-feature-targeting.all()
+) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    @if $positionX > 0 or $positionX < 0 {
+      @include mdc-rtl-mixins.ignore-next-line();
+      transform: translateY(-1 * $positionY)
+        translateX(-1 * $positionX)
+        scale($scale);
+
+      @include mdc-rtl-mixins.rtl {
+        @include mdc-rtl-mixins.ignore-next-line();
+        transform: translateY(-1 * $positionY)
+          translateX($positionX)
+          scale($scale);
+      }
+    } @else {
+      transform: translateY(-1 * $positionY) scale($scale);
+    }
+  }
+}
+
+@mixin shake-animation($modifier, $query: mdc-feature-targeting.all()) {
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    animation: mdc-floating-label-shake-float-above-#{$modifier} 250ms 1;
+  }
+}
+
+@mixin max-width($max-width, $query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    max-width: $max-width;
+  }
+}
+
+///
+/// Sets the CSS transition for the floating animation.
+///
+/// @param {Number} $duration-ms - Duration (in ms) of the animation.
+/// @param {String} $timing-function - Optionally overrides the default animation timing function.
+///
+@mixin float-transition(
+  $duration-ms,
+  $timing-function: mdc-animation-variables.$standard-curve-timing-function,
+  $query: mdc-feature-targeting.all()
+) {
+  $feat-animation: mdc-feature-targeting.create-target($query, animation);
+
+  @include mdc-feature-targeting.targets($feat-animation) {
+    transition: color $duration-ms $timing-function,
+      transform $duration-ms $timing-function;
+  }
+}
+
+@mixin _required-content($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    @include mdc-rtl-mixins.ignore-next-line();
+    margin-left: 1px;
+    @include mdc-rtl-mixins.ignore-next-line();
+    margin-right: 0;
+    content: '*';
+  }
+}
+
+// Need to specify LTR/RTL manually since rtl mixins will add ::after[dir=rtl]
+// selector and that breaks some browsers
+@mixin _required-content-rtl($query: mdc-feature-targeting.all()) {
+  $feat-structure: mdc-feature-targeting.create-target($query, structure);
+
+  @include mdc-feature-targeting.targets($feat-structure) {
+    @include mdc-rtl-mixins.ignore-next-line();
+    margin-left: 0;
+    @include mdc-rtl-mixins.ignore-next-line();
+    margin-right: 1px;
+  }
+}

package/styles/floating-label/_variables.scss

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+$class-name: 'forge-floating-label' !default;
+
+///
+/// Y-axis position of label when it is afloat.
+/// 100% of the length of label and additional 6% for scaledown.
+///
+$position-y: 106% !default;
+$transition-duration: 150ms !default;
+$font-size: 1rem !default;
+$float-scale: 0.8125 !default;

package/styles/floating-label/forge-floating-label.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;

package/styles/forge-core.scss

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './utils/mixins-core';
+
+body, html {
+  @include mixins-core.root-reset;
+}
+
+body {
+  @include mixins-core.body-base;
+}

package/styles/forge-dark.scss

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './theme/theme-dark';
+
+:root {
+  @include theme-dark.theme-properties;
+}