@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

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

@@ -1,351 +0,0 @@
-/**
- * @license
- * Copyright 2023 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

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 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/icon-button/_mixins.scss

@@ -1,345 +0,0 @@
-/**
- * @license
- * Copyright 2023 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 'sass:math';
-@use '@material/density/functions' as mdc-density-functions;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/rtl/mixins' as mdc-rtl;
-@use '@material/theme/theme' as mdc-theme;
-@use './variables';
-@use '../theme';
-@use '../theme/theme-values';
-@use '../app-bar/variables' as app-bar-variables;
-
-@mixin core-styles($query: mdc-feature-targeting.all()) {
-  @include without-ripple($query);
-  @include ripple($query);
-
-  // FORGE (new): additional forge-specific styles
-  @include styles;
-}
-
-@mixin styles() {
-  forge-icon-button {
-    @include host;
-  }
-
-  .forge-icon-button {
-    &--on {
-      @include ink-color(primary);
-
-
-      &::before {
-        @include mdc-theme.property(background-color, primary);
-
-        opacity: 0.08;
-      }
-    }
-
-    &--dense {
-      @include density(-5);
-
-      padding: 0;
-    }
-
-    &--dense-1 {
-      @include density(-1);
-    }
-
-    &--dense-2 {
-      @include density(-2);
-    }
-
-    &--dense-3 {
-      @include density(-3);
-    }
-
-    &--dense-4 {
-      @include density(-4);
-    }
-
-    &--dense-5 {
-      @include density(-5);
-    }
-
-    &--dense-6 {
-      @include density(-6);
-    }
-
-    &--with-badge {
-      forge-badge {
-        @include theme.z-index(surface);
-
-        pointer-events: none;
-        --forge-badge-max-width: 32px;
-        --forge-badge-border: 1px solid transparent;
-      }
-
-      forge-badge[app-bar-context] {
-        --forge-badge-border: 2px solid var(--forge-app-bar-theme-background);
-      }
-    }
-  }
-}
-
-@mixin host() {
-  position: relative;
-  display: inline-block;
-  overflow: visible;
-}
-
-@mixin without-ripple($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  // postcss-bem-linter: define icon-button
-  .forge-icon-button {
-    @include base_($query: $query);
-    @include density(0, $query: $query);
-  }
-
-  .forge-icon-button__icon {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      display: inline-block;
-    }
-
-    // stylelint-disable-next-line plugin/selector-bem-pattern
-    &.forge-icon-button__icon--on {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        display: none;
-      }
-    }
-  }
-
-  .forge-icon-button--on {
-    .forge-icon-button__icon {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        display: none;
-      }
-
-      // stylelint-disable-next-line plugin/selector-bem-pattern
-      &.forge-icon-button__icon--on {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          display: inline-block;
-        }
-      }
-    }
-  }
-  // postcss-bem-linter: end
-}
-
-@mixin ripple($query: mdc-feature-targeting.all()) {
-  @include mdc-ripple.common($query); // COPYBARA_COMMENT_THIS_LINE
-
-  .forge-icon-button {
-    @include mdc-ripple.surface($query: $query);
-    @include mdc-ripple.radius-unbounded($query: $query);
-    @include mdc-ripple-theme.states(on-surface, $query: $query); // FORGE (modify): use on-surface for ripple to support dark theme
-  }
-}
-
-///
-/// Sets the density scale for icon button.
-///
-/// @param {Number | String} $density-scale - Density scale value for component.
-///     Supported density scale values range from `-5` to `0`, with `0` being the default.
-///
-@mixin density($density-scale, $query: mdc-feature-targeting.all()) {
-  $size: mdc-density-functions.prop-value(
-    $density-config: variables.$density-config,
-    $density-scale: $density-scale,
-    $property-name: size,
-  );
-
-  @include size($size, $query: $query);
-}
-
-///
-/// Sets the size of the icon-button.
-///
-/// @param {Number} $size - Size value for icon-button.
-///     Size will set the width, height, and padding for the overall component.
-///
-@mixin size($size, $query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    width: $size;
-    height: $size;
-    padding: ($size - variables.$icon-size) * 0.5;
-  }
-}
-
-///
-/// Sets the width, height and padding of icon button. Also changes the size of
-/// the icon itself based on button size.
-///
-/// @param {Number} $width - Width value for icon-button.
-/// @param {Number} $height - Height value for icon-button. (default: $width)
-/// @param {Number} $padding - Padding value for icon-button. (default: max($width, $height) / 2)
-/// @deprecated
-///     This mixin provides too much of low level customization.
-///     Please use mdc-icon-button-size instead.
-///
-@mixin icon-size(
-  $width,
-  $height: $width,
-  $padding: math.max($width, $height) * 0.5,
-  $query: mdc-feature-targeting.all()
-) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    width: $width + $padding * 2;
-    height: $height + $padding * 2;
-    padding: $padding;
-    font-size: math.max($width, $height);
-  }
-
-  svg, img, forge-icon {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      width: $width;
-      height: $height;
-    }
-  }
-}
-
-///
-/// Sets the font color and the ripple color to the provided color value.
-/// @param {Color} $color - The desired font and ripple color.
-///
-@mixin ink-color($color, $query: mdc-feature-targeting.all()) {
-  @include ink-color_($color, $query: $query);
-  @include mdc-ripple-theme.states($color, $query: $query);
-}
-
-///
-/// Flips icon only in RTL context.
-///
-@mixin flip-icon-in-rtl($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  .forge-button__icon {
-    @include mdc-rtl.rtl {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        /* @noflip */
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
-
-///
-/// Sets the font color to the provided color value for a disabled icon button.
-/// @param {Color} $color - The desired font color.
-///
-@mixin disabled-ink-color($color, $query: mdc-feature-targeting.all()) {
-  @include if-disabled_ {
-    @include ink-color_($color, $query: $query);
-  }
-}
-
-///
-/// Includes ad-hoc high contrast mode support.
-///
-@mixin high-contrast-mode-shim($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    // TODO(b/175806874): Use the DOM border mixin after the ripple is moved
-    // away from :before to a dedicated element.
-    outline: solid 3px transparent;
-
-    &:focus {
-      outline: double 5px transparent;
-    }
-  }
-}
-
-@mixin base_($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    box-sizing: border-box;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    fill: currentColor;
-    color: inherit;
-    font-size: variables.$icon-size;
-    text-decoration: none;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  svg, img, forge-icon {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      width: variables.$icon-size;
-      height: variables.$icon-size;
-    }
-  }
-
-  @include disabled-ink-color(text-disabled-on-light, $query: $query);
-
-  @include if-disabled_ {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-}
-
-///
-/// Sets the font color to the provided color value. This can be wrapped in
-/// a state qualifier such as `mdc-icon-button-if-disabled_`.
-/// @access private
-///
-@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);
-  }
-}
-
-///
-/// Helps style the icon button in its disabled state.
-/// @access private
-///
-@mixin if-disabled_ {
-  &:disabled {
-    @content;
-  }
-}