@tylertech/forge 3.0.0-next.11 → 3.0.0-next.13

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;
-  }
-}

package/styles/icon-button/_variables.scss

@@ -1,42 +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.
-//
-
-@use '@material/density/variables';
-
-$icon-size: 24px !default;
-
-$size: 48px !default;
-$minimum-height: 24px !default;
-$maximum-height: $size !default;
-$density-scale: variables.$default-scale !default;
-$density-config: (
-  size: (
-    default: $size,
-    maximum: $maximum-height,
-    minimum: $minimum-height,
-  ),
-) !default;

package/styles/list/list/_mixins.scss

@@ -1,45 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/typography/typography' as mdc-typography;
-@use '../../theme';
-
-@mixin core-styles() {
-  .forge-list {
-    @include base;
-  }
-}
-
-@mixin host() {
-  display: block;
-  contain: content;
-}
-
-@mixin base($query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-  $feat-typography: mdc-feature-targeting.create-target($query, typography);
-
-  @include mdc-typography.typography(subtitle1, $query);
-  @include mdc-feature-targeting.targets($feat-typography) {
-    // According to the mocks and stickersheet, the line-height is
-    // adjusted to 24px for text content, same as for body1.
-    /* @alternate */
-    line-height: map.get(map.get(mdc-typography.$styles, body1), line-height);
-  }
-  @include mdc-feature-targeting.targets($feat-structure) {
-    @include theme.css-custom-property(padding-top, --forge-list-padding, 8px);
-    @include theme.css-custom-property(padding-bottom, --forge-list-padding, 8px);
-
-    margin: 0;
-    list-style-type: none;
-
-    &:focus {
-      outline: none;
-    }
-  }
-}