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

package/styles/app-bar/_mixins.scss

@@ -1,254 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use 'sass:string';
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/top-app-bar/mixins' as mdc-top-app-bar-mixins;
-@use '@material/top-app-bar/variables' as mdc-top-app-bar-variables;
-@use '../theme';
-@use './variables';
-@use '../tabs/tab-bar';
-@use '../tabs/tab';
-@use '../icon-button';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(app-bar, $theme, variables.$theme-values);
-}
-
-@mixin base() {
-  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
-  @include theme.css-custom-property(background-color, --forge-app-bar-theme-background, variables.$background);
-  @include theme.z-index(header);
-
-  background-size: cover;
-  background-position: center;
-  display: grid;
-  grid-template-rows: 1fr auto;
-  grid-template-columns: minmax(0, 1fr);
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  transition: box-shadow 200ms linear;
-}
-
-@mixin row() {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: variables.$row-height;
-}
-
-@mixin row-two-column() {
-  grid-template-columns: 1fr auto;
-}
-
-@mixin section() {
-  display: inline-flex;
-  flex: 1 1 auto;
-  align-items: center;
-  min-width: 0;
-  padding: 0 4px;
-  height: variables.$row-height;
-  box-sizing: border-box;
-}
-
-@mixin section-align-start() {
-  justify-content: flex-start;
-  order: -1;
-  grid-column: 1;
-}
-
-@mixin section-align-center() {
-  grid-column: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin section-align-end() {
-  justify-content: flex-end;
-  order: 1;
-  grid-column: 3;
-}
-
-@mixin title() {
-  @include mdc-typography.typography(headline5);
-  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-@mixin fixed() {
-  transition: box-shadow 200ms linear;
-}
-
-@mixin raised() {
-  @include mdc-elevation-theme.elevation(4);
-}
-
-@mixin title-hover() {
-  background-color: rgba(255, 255, 255, 0.12);
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-@mixin title-active() {
-  background-color: rgba(255, 255, 255, 0.24);
-}
-
-/// Creates styles for the app-bar host element.
-@mixin host() {
-  @include theme.z-index(header);
-
-  position: relative;
-  display: block;
-  contain: layout style;
-}
-
-/// Creates the styles for the logo.
-@mixin logo() {
-  @include theme.css-custom-property(color, --forge-app-bar-theme-on-background, variables.$on-background);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 8px;
-  font-size: 3rem;
-  overflow: visible;
-}
-
-@mixin bottom() {
-  padding: 0 4px;
-  display: flex;
-  align-items: center;
-  height: auto !important;
-  overflow: hidden;
-}
-
-@mixin no-center-align-end() {
-  grid-column: 2;
-}
-
-@mixin core-styles() {
-  .forge-app-bar {
-    @include base;
-
-    &__row {
-      @include row;
-
-      .forge-app-bar--no-center & {
-        @include row-two-column;
-      }
-    }
-
-    &__section {
-      @include section;
-
-      &--align-start {
-        @include section-align-start;
-      }
-
-      &--align-center {
-        @include section-align-center;
-      }
-
-      &--align-end {
-        @include section-align-end;
-      }
-    }
-
-    &--no-center {
-      .forge-app-bar__section--align-end {
-        @include no-center-align-end;
-      }
-    }
-    
-    ::slotted([slot=logo]) {
-      @include logo;
-    }
-
-    ::slotted([slot=profile]) {
-      margin-left: 4px;
-    }
-
-    ::slotted([slot=title]) {
-      @include title;
-    }
-
-    slot[name=user-action] {
-      display: inline-flex;
-      margin-right: 24px;
-    }
-
-    &__title {
-      @include title;
-
-      &--interactable {
-        &:hover {
-          @include title-hover;
-        }
-
-        &:active {
-          @include title-active;
-        }
-      }
-    }
-
-    &__bottom {
-      @include bottom;
-
-      grid-row: 2;
-    }
-
-    &--fixed {
-      @include fixed;
-    }
-
-    &--raised {
-      @include raised;
-    }
-  }
-}
-
-@mixin default-theme() {
-  ::slotted(*:not(forge-button)) {
-    --mdc-theme-on-primary: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
-    --mdc-theme-on-surface: var(--forge-app-bar-theme-on-background, #{variables.$on-background});
-  }
-
-  --mdc-theme-text-secondary-on-background: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background});
-  --mdc-theme-text-secondary-on-light: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background});
-  --mdc-theme-text-disabled-on-background: var(--forge-app-bar-theme-disabled-on-background, #{variables.$disabled-on-background});
-  --mdc-theme-text-disabled-on-light: var(--forge-app-bar-theme-disabled-on-light, #{variables.$disabled-on-light});
-
-  ::slotted(forge-tab-bar) {
-    @include tab-bar.provide-theme(( divider-thickness: 0 ));
-
-    @include tab.provide-theme((
-      active-color: var(--forge-app-bar-theme-on-background, #{variables.$on-background}),
-      inactive-color: var(--forge-app-bar-theme-secondary-on-background, #{variables.$secondary-on-background})
-    ));
-  }
-
-  ::slotted(*) {
-    @include icon-button.provide-theme((
-      icon-color: var(--forge-app-bar-theme-on-background, #{variables.$on-background})
-    ));
-  }
-
-  ::slotted(forge-button:is(:not([variant]),[variant=outlined])) {
-    --forge-theme-primary: var(--forge-app-bar-theme-on-background, rgba(255, 255, 255, 0.87));
-  }
-}

package/styles/app-bar/_variables.scss

@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/color-palette' as mdc-color-palette;
-
-$background: mdc-color-palette.$indigo-800 !default;
-$on-background: #ffffff !default;
-$secondary-on-background: rgba(255, 255, 255, 0.54) !default;
-$disabled-on-background: rgba(255, 255, 255, 0.38) !default;
-$disabled-on-light: rgba(255, 255, 255, 0.12) !default;
-$row-height: 56px !default;
-
-$theme-values: (
-  background: $background,
-  on-background: $on-background,
-  secondary-on-background: $secondary-on-background,
-  disabled-on-background: $disabled-on-background,
-  disabled-on-light: $disabled-on-light
-) !default;
-
-$theme-values-white: (
-  background: #ffffff,
-  on-background: rgba(0, 0, 0, 0.87),
-  secondary-on-background: rgba(0, 0, 0, 0.54),
-  disabled-on-background: rgba(0, 0, 0, 0.38),
-  disabled-on-light: rgba(0, 0, 0, 0.12)
-) !default;
-
-$theme-values-dark: (
-  background: #{mdc-color-palette.$grey-900},
-  on-background: #ffffff
-) !default;

package/styles/app-bar/app-bar.scss

@@ -1,22 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './variables';
-@use './mixins';
-
-@include mixins.core-styles;
-
-:host {
-  @include mixins.host;
-  @include mixins.default-theme;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-:host([theme=white]) {
-  @include mixins.provide-theme(variables.$theme-values-white);
-}

package/styles/floating-action-button/_extended-fab-theme.scss

@@ -1,238 +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:map';
-@use 'sass:list';
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/rtl/mixins' as mdc-rtl-mixins;
-@use '@material/shape/mixins' as mdc-shape-mixins;
-@use '@material/shape/functions' as mdc-shape-functions;
-@use '@material/theme/state' as mdc-state;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use './fab-theme';
-
-$extended-icon-padding: 12px !default;
-$extended-label-padding: 20px !default;
-$extended-height: 48px !default;
-
-$_extended-light-theme: (
-  container-color: mdc-theme-color.$surface,
-  container-shape: 50%,
-  container-height: 56px,
-  container-elevation: mdc-elevation-theme.get-elevation(3),
-  icon-size: 36px,
-  icon-color: null,
-  label-text-font: mdc-typographyget-font(button),
-  label-text-size: mdc-typographyget-size(button),
-  label-text-weight: mdc-typographyget-weight(button),
-  label-text-tracking: mdc-typographyget-tracking(button),
-  label-text-color: mdc-theme-color.$on-surface,
-  hover-container-elevation: null,
-  hover-state-layer-color: mdc-theme-color.$primary,
-  hover-state-layer-opacity: null,
-  hover-icon-color: null,
-  hover-label-text-color: null,
-  focus-container-elevation: null,
-  focus-state-layer-color: mdc-theme-color.$primary,
-  focus-state-layer-opacity: null,
-  focus-outline-color: null,
-  focus-outline-width: null,
-  focus-icon-color: null,
-  focus-label-text-color: null,
-  pressed-container-elevation: null,
-  pressed-ripple-color: mdc-theme-color.$primary,
-  pressed-ripple-opacity: null,
-  pressed-icon-color: null,
-  pressed-label-text-color: null,
-);
-
-@mixin theme($theme) {
-  @include mdc-theme.validate-theme($_extended-light-theme, $theme);
-  @include fab-theme.base-theme($theme);
-  $container-shape: map.get($theme, container-shape);
-  @if $container-shape {
-    @include extended-shape-radius($container-shape);
-  }
-  @include _label-color(
-    (
-      default: map.get($theme, label-text-color),
-      hover: map.get($theme, hover-label-text-color),
-      focus: map.get($theme, focus-label-text-color),
-      pressed: map.get($theme, pressed-label-text-color),
-    )
-  );
-  @include _label-typography(
-    (
-      font: map.get($theme, label-text-font),
-      size: map.get($theme, label-text-size),
-      weight: map.get($theme, label-text-weight),
-      tracking: map.get($theme, label-text-tracking),
-    )
-  );
-}
-
-@mixin extended-fluid($query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    width: 100%;
-  }
-}
-
-@mixin extended-padding(
-  $icon-padding,
-  $label-padding,
-  $focus-outline-width: null,
-  $query: mdc-feature-targeting.all()
-) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include extended-label-padding($label-padding, $query: $query);
-
-  // Offsets the outer label padding by deducting it from icon padding.
-  .forge-fab__icon {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      @include extended-icon-padding($icon-padding, $label-padding);
-    }
-  }
-
-  // For Extended FAB with text label followed by icon.
-  .forge-fab__label + .forge-fab__icon {
-    @include mdc-feature-targeting.targets($feat-structure) {
-      @include extended-icon-padding(
-        $icon-padding,
-        $label-padding,
-        $is-icon-at-end: true
-      );
-    }
-  }
-
-  @if $focus-outline-width {
-    @include fab-theme.focus-outline-width(
-      $focus-outline-width,
-      $padding: 0 $label-padding
-    );
-  }
-}
-
-@mixin extended-icon-padding(
-  $icon-padding,
-  $label-padding,
-  $is-icon-at-end: false
-) {
-  $start: 'calc(icon - label)';
-  $end: $icon-padding;
-
-  @if $is-icon-at-end {
-    $start: $icon-padding;
-    $end: 'calc(icon - label)';
-  }
-
-  @include mdc-rtl-mixins.reflexive-property(
-    margin,
-    $start,
-    $end,
-    $replace: (icon: $icon-padding, label: $label-padding)
-  );
-}
-
-@mixin extended-label-padding($label-padding, $query: mdc-feature-targeting.all()) {
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-
-  @include mdc-feature-targeting.targets($feat-structure) {
-    @include mdc-theme.property(padding-left, $label-padding, $gss: (noflip: true));
-    @include mdc-theme.property(
-      padding-right,
-      $label-padding,
-      $gss: (noflip: true)
-    );
-  }
-}
-
-@mixin extended-shape-radius(
-  $radius,
-  $rtl-reflexive: false,
-  $query: mdc-feature-targeting.all()
-) {
-  // Extended FABs _do_ need a $component-height since they are not circular.
-  // Percentage radii must be resolved.
-  @include mdc-shape-mixins.radius(
-    $radius,
-    $rtl-reflexive,
-    $component-height: $extended-height,
-    $query: $query
-  );
-
-  #{fab-theme.$ripple-target} {
-    @include mdc-shape-mixins.radius(
-      $radius,
-      $rtl-reflexive,
-      $component-height: $extended-height,
-      $query: $query
-    );
-  }
-}
-
-@mixin _label-color($color-or-map) {
-  &:not(:disabled) {
-    @include _set-label-color(mdc-state.get-default-state($color-or-map));
-
-    &:hover {
-      @include _set-label-color(mdc-state.get-hover-state($color-or-map));
-    }
-
-    &:focus {
-      @include _set-label-color(mdc-state.get-focus-state($color-or-map));
-    }
-
-    &:active {
-      @include _set-label-color(mdc-state.get-pressed-state($color-or-map));
-    }
-  }
-
-  &:disabled {
-    @include _set-label-color(mdc-state.get-disabled-state($color-or-map));
-  }
-}
-
-@mixin _set-label-color($color) {
-  .forge-fab__label {
-    @include mdc-theme.property(color, $color);
-  }
-}
-
-@mixin _label-typography($typography-map) {
-  font-family: map.get($typography-map, font);
-  font-size: map.get($typography-map, size);
-  font-weight: map.get($typography-map, weight);
-  letter-spacing: map.get($typography-map, tracking);
-}

package/styles/floating-action-button/_fab-custom-properties.scss

@@ -1,29 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-//
-// Copyright 2021 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.
-//
-
-$extended-icon-padding: --mdc-fab-extended-icon-padding;
-$extended-label-padding: --mdc-fab-extended-label-padding;