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

package/styles/radio/_mixins.scss

@@ -1,309 +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
-
-@use 'sass:map';
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/dom/dom' as mdc-dom;
-@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/touch-target/variables' as mdc-touch-target-variables;
-@use '@material/theme/theme' as mdc-theme;
-@use './radio-theme';
-@use '../theme/custom-properties';
-@use '../theme';
-@use '../theme/theme-values';
-
-$ripple-target: '.mdc-radio__ripple';
-
-///
-/// Radio core styles.
-///
-@mixin core-styles($query: mdc-feature-targeting.all()) {
-  @include without-ripple($query);
-  @include ripple($query);
-
-  // FORGE (new): adding our custom wrapper element styles in the Shadow DOM
-  @include wrapper-styles;
-}
-
-@mixin wrapper-styles() {
-  .forge-radio-wrapper--disabled {
-    cursor: not-allowed;
-
-    ::slotted(label) {
-      cursor: not-allowed;
-    }
-  }
-}
-
-// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
-// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.
-@mixin without-ripple($query: mdc-feature-targeting.all()) {
-  // postcss-bem-linter: define radio
-
-  $feat-animation: mdc-feature-targeting.create-target($query, animation);
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  // @include mdc-touch-target-mixins.wrapper($query); // COPYBARA_COMMENT_THIS_LINE
-
-  .mdc-radio {
-    @include radio-theme.unchecked-stroke-color(radio-theme.$unchecked-color, $query: $query);
-    @include radio-theme.checked-stroke-color(radio-theme.$baseline-theme-color, $query: $query);
-    @include radio-theme.ink-color(radio-theme.$baseline-theme-color, $query: $query);
-    @include radio-theme.disabled-unchecked-stroke-color(radio-theme.$disabled-circle-color, $query: $query);
-    @include radio-theme.disabled-checked-stroke-color(radio-theme.$disabled-circle-color, $query: $query);
-    @include radio-theme.disabled-ink-color(radio-theme.$disabled-circle-color, $query: $query);
-    @include radio-theme.focus-indicator-color(radio-theme.$baseline-theme-color, $query: $query);
-    @include radio-theme.density(radio-theme.$density-scale, $query: $query);
-
-    @include mdc-dom.forced-colors-mode {
-      @include radio-theme.disabled-unchecked-stroke-color(GrayText, $query: $query);
-      @include radio-theme.disabled-checked-stroke-color(GrayText, $query: $query);
-      @include radio-theme.disabled-ink-color(GrayText, $query: $query);
-    }
-
-    @include mdc-feature-targeting.targets($feat-structure) {
-      display: inline-block;
-      position: relative;
-      flex: 0 0 auto;
-      box-sizing: content-box;
-      width: radio-theme.$icon-size;
-      height: radio-theme.$icon-size;
-      cursor: pointer;
-      /* @alternate */
-      will-change: opacity, transform, border-color, color;
-    }
-
-    // Container for radio circles and ripple.
-    &__background {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        display: inline-block;
-        position: relative;
-        box-sizing: border-box;
-        width: radio-theme.$icon-size;
-        height: radio-theme.$icon-size;
-      }
-
-      &::before {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          position: absolute;
-          transform: scale(0, 0);
-          border-radius: 50%;
-          opacity: 0;
-          pointer-events: none;
-          content: '';
-        }
-
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: exit(opacity), exit(transform);
-        }
-      }
-    }
-
-    &__outer-circle {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-width: 2px;
-        border-style: solid;
-        border-radius: 50%;
-      }
-
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: exit(border-color);
-      }
-    }
-
-    &__inner-circle {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        transform: scale(0, 0);
-        border-width: 10px;
-        border-style: solid;
-        border-radius: 50%;
-      }
-
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: exit(transform), exit(border-color);
-      }
-    }
-
-    // FORGE (modify): use slotted selector to target <input>
-    ::slotted(input[type=radio]) {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        position: absolute;
-        margin: 0;
-        padding: 0;
-        opacity: 0;
-        cursor: inherit;
-        z-index: 1;
-
-        // FORGE (new): make sure to stretch the input for touch target
-        top: 0;
-        right: 0;
-        left: 0;
-        width: radio-theme.$maximum-size;
-        height: radio-theme.$maximum-size;
-      }
-    }
-
-    // FORGE (new): we need to set the dense styles on the slotted input
-    &.forge-radio--dense {
-      @include radio-theme.density(-3);
-
-      ::slotted(input[type='radio']) {
-        width: radio-theme.$minimum-size;
-        height: radio-theme.$minimum-size;
-      }
-    }
-
-    // FORGE (new): we need to set the label color theme when disabled
-    &--disabled + ::slotted(label) {
-      @include theme.property(color, label-disabled-on-background);
-    }
-  }
-
-  // FORGE (modify): use FORGE  classes since <input> is slotted and not a sibling
-  .forge-radio--checked,
-  .mdc-radio--disabled {
-    .mdc-radio__background {
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: enter(opacity), enter(transform);
-      }
-
-      .mdc-radio__outer-circle {
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: enter(border-color);
-        }
-      }
-
-      .mdc-radio__inner-circle {
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: enter(transform), enter(border-color);
-        }
-      }
-    }
-  }
-
-  .mdc-radio--disabled {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  // FORGE (modify): use FORGE  class since <input> is slotted and not a sibling
-  .forge-radio--checked {
-    .mdc-radio__background {
-      .mdc-radio__inner-circle {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          transform: scale(0.5);
-        }
-
-        @include mdc-feature-targeting.targets($feat-animation) {
-          transition: enter(transform), enter(border-color);
-        }
-      }
-    }
-  }
-
-  // FORGE (modify): use FORGE  class since <input> is slotted and not a sibling
-  .mdc-radio--disabled {
-    .mdc-radio__background {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        cursor: default;
-      }
-    }
-  }
-
-  // FORGE (modify): use FORGE  class since <input> is slotted and not a sibling
-  .forge-radio--focused {
-    .mdc-radio__background::before {
-      @include mdc-feature-targeting.targets($feat-structure) {
-        transform: scale(1);
-        opacity: map.get(mdc-ripple-theme.$dark-ink-opacities, focus);
-      }
-
-      @include mdc-feature-targeting.targets($feat-animation) {
-        transition: enter(opacity), enter(transform);
-      }
-    }
-  }
-
-  // postcss-bem-linter: end
-}
-
-// This API is intended for use by frameworks that may want to separate the ripple-related styles from the other
-// radio styles. It is recommended that most users use `mdc-radio-core-styles` instead.
-@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
-
-  .mdc-radio {
-    @include mdc-ripple.surface($query: $query, $ripple-target: $ripple-target);
-    @include mdc-ripple.radius-unbounded($query: $query, $ripple-target: $ripple-target);
-
-    // FORGE (modify): using forge-specific theme style custom property
-    $tertiary-prop: custom-properties.create(--forge-theme-tertiary, theme-values.$tertiary);
-    @include mdc-ripple-theme.states($color: $tertiary-prop, $query: $query, $ripple-target: $ripple-target);
-
-    &.mdc-ripple-upgraded,
-    &.mdc-ripple-upgraded--background-focused {
-      .mdc-radio__background::before {
-        @include mdc-feature-targeting.targets($feat-structure) {
-          content: none;
-        }
-      }
-    }
-  }
-
-  #{$ripple-target} {
-    @include mdc-ripple.target-common($query: $query);
-  }
-}
-
-@function enter($name) {
-  @return mdc-animation.enter($name, radio-theme.$transition-duration);
-}
-
-@function exit($name) {
-  @return mdc-animation.exit-temporary($name, radio-theme.$transition-duration);
-}

package/styles/radio/_radio-theme.scss

@@ -1,314 +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
-
-@use 'sass:map';
-@use '@material/density/functions' as mdc-density-functions;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/density/variables' as mdc-density-variables;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '../theme';
-
-$ripple-size: 40px !default;
-$icon-size: 20px !default;
-$transition-duration: 120ms !default;
-$ripple-opacity: 0.14 !default;
-$baseline-theme-color: tertiary !default; // FORGE(modify): use forge-specific theme style
-$unchecked-color: text-secondary-on-background !default; // FORGE(modify): use MDC theme style instead of static color
-$disabled-circle-color: form-field-icon-disabled-on-background !default; // FORGE(modify): use forge-specific theme style instead of static color
-
-$minimum-size: 28px !default;
-$maximum-size: $ripple-size !default;
-$density-scale: mdc-density-variables.$default-scale !default;
-$density-config: (
-  size: (
-    minimum: $minimum-size,
-    default: $ripple-size,
-    maximum: $maximum-size,
-  ),
-) !default;
-
-///
-/// Sets the stroke color of an unchecked, enabled radio button.
-/// @param {Color} $color - The desired stroke color.
-///
-@mixin unchecked-stroke-color($color, $query: mdc-feature-targeting.all()) {
-  @include _if-enabled-unchecked {
-    @include _stroke-color($color, $query: $query);
-  }
-}
-
-///
-/// Sets the stroke color of a checked, enabled radio button.
-/// @param {Color} $color - The desired stroke color.
-///
-@mixin checked-stroke-color($color, $query: mdc-feature-targeting.all()) {
-  @include _if-enabled-checked {
-    @include _stroke-color($color, $query: $query);
-  }
-}
-
-///
-/// Sets the ink color of an enabled radio button.
-/// @param {Color} $color - The desired ink color.
-///
-@mixin ink-color($color, $query: mdc-feature-targeting.all()) {
-  @include _if-enabled {
-    @include _ink-color($color, $query: $query);
-  }
-}
-
-
-///
-/// Sets the stroke color of an unchecked, disabled radio button.
-/// @param {Color} $color - The desired stroke color.
-///
-@mixin disabled-unchecked-stroke-color($color, $query: mdc-feature-targeting.all()) {
-  @include _if-disabled-unchecked {
-    @include _stroke-color($color, $query: $query);
-  }
-}
-
-///
-/// Sets the stroke color of a checked, disabled radio button.
-/// @param {Color} $color - The desired stroke color.
-///
-@mixin disabled-checked-stroke-color($color, $query: mdc-feature-targeting.all()) {
-  @include if-disabled-checked_ {
-    @include _stroke-color($color, $query: $query);
-  }
-}
-
-
-///
-/// Sets the ink color of a disabled radio button.
-/// @param {Color} $color - The desired ink color
-///
-@mixin disabled-ink-color($color, $query: mdc-feature-targeting.all()) {
-  @include if-disabled_ {
-    @include _ink-color($color, $query: $query);
-  }
-}
-
-
-@mixin focus-indicator-color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  .mdc-radio__background::before {
-    @include mdc-feature-targeting.targets($feat-color) {
-      // FORGE(modify): use FORGE theme styles (with fallback to MDC)
-      @include theme.property(background-color, $color);
-    }
-  }
-}
-
-
-///
-/// Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom
-/// ripple size.
-///
-/// @param {Number} $size Size of touch target (Native input) in `px`.
-/// @param {Number} $ripple-size Size of ripple in `px`. Required only for custom ripple size.
-///
-@mixin touch-target($size: $ripple-size, $ripple-size: $ripple-size, $query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-  $offset: ($ripple-size - $size) * 0.5;
-
-  .mdc-radio__native-control {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      top: $offset;
-      right: $offset;
-      left: $offset;
-      width: $size;
-      height: $size;
-    }
-  }
-}
-
-
-///
-/// Sets density scale for radio.
-///
-/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values
-///     `-3`, `-2`, `-1`, `0`.
-///
-@mixin density($density-scale, $query: mdc-feature-targeting.all()) {
-  $size: mdc-density-functions.prop-value($density-config: $density-config, $density-scale: $density-scale, $property-name: size,);
-
-  @include ripple-size($size, $query: $query);
-  // Sets touch target size same as ripple size.
-  @include touch-target($size: $size, $ripple-size: $size, $query: $query);
-
-  @if $density-scale != 0 {
-    @include touch-target-reset_($query: $query);
-  }
-}
-
-
-///
-/// Sets radio ripple size.
-///
-/// @param {Number} $size - Ripple size in `px`.
-///
-@mixin ripple-size($size, $query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-  $padding: ($size - $icon-size) * 0.5;
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    padding: $padding;
-  }
-
-  .mdc-radio__background::before {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      top: -$padding;
-      left: -$padding;
-      width: $size;
-      height: $size;
-    }
-  }
-}
-
-
-///
-/// Resets touch target-related styles. This is called from the density mixin to
-/// automatically remove the increased touch target, since dense components
-/// don't have the same default a11y requirements.
-/// @access private
-///
-@mixin touch-target-reset_($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    margin: 0;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// enabled state.
-/// @access private
-///
-@mixin _if-enabled {
-  // FORGE(modify): using class-based state selector due to Shadow DOM
-  &.forge-radio--enabled {
-    @content;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// enabled & unchecked state.
-/// @access private
-///
-@mixin _if-enabled-unchecked {
-  // FORGE(modify): using class-based state selector due to Shadow DOM
-  &.forge-radio--enabled {
-    @content;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// enabled & checked state.
-/// @access private
-///
-@mixin _if-enabled-checked {
-  // FORGE(modify): using class-based state selector due to Shadow DOM
-  &.forge-radio--enabled.forge-radio--checked {
-    @content;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// disabled state.
-/// @access private
-///
-@mixin if-disabled_ {
-  // FORGE(modify): using class-based state selector due to Shadow DOM
-  &.mdc-radio--disabled {
-    @content;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// disabled & unchecked state.
-/// @access private
-///
-@mixin _if-disabled-unchecked {
-  // FORGE(modify): using class-based state selector due to Shadow DOM
-  &.mdc-radio--disabled {
-    @content;
-  }
-}
-
-///
-/// Helps select the radio background only when its native control is in the
-/// disabled & checked state.
-/// @access private
-///
-@mixin if-disabled-checked_ {
-  // FORGE(modify): using class-based state selector due to Shadow DOM
-  &.mdc-radio--disabled.forge-radio--checked {
-    @content;
-  }
-}
-
-///
-/// Sets the ink color for radio. This is wrapped in a mixin
-/// that qualifies state such as `_if-enabled`
-/// @access private
-///
-@mixin _ink-color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  .mdc-radio__background .mdc-radio__inner-circle {
-    @include mdc-feature-targeting.targets($feat-color) {
-      // FORGE(modify): use FORGE theme styles (with fallback to MDC)
-      @include theme.property(border-color, $color);
-    }
-  }
-}
-
-///
-/// Sets the stroke color for radio. This is wrapped in a mixin
-/// that qualifies state such as `_if-enabled`
-/// @access private
-///
-@mixin _stroke-color($color, $query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-
-  .mdc-radio__background .mdc-radio__outer-circle {
-    @include mdc-feature-targeting.targets($feat-color) {
-      // FORGE(modify): use FORGE theme styles (with fallback to MDC)
-      @include theme.property(border-color, $color);
-    }
-  }
-}

package/styles/radio/radio.scss

@@ -1,19 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './mixins';
-@use './radio-theme';
-@use '../form-field/mixins' as form-field-mixins;
-
-@include mixins.core-styles;
-@include form-field-mixins.shadow-styles;
-
-:host {
-  display: inline-block;
-}
-
-:host([hidden]) {
-  display: none;
-}