@tylertech/forge 3.0.0-next.17 → 3.0.0-next.18

package/styles/badge/_mixins.scss

@@ -1,125 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use './variables';
-@use '../theme';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(badge, $theme, variables.$theme-values);
-}
-
-@mixin core-styles() {
-  .forge-badge {
-    @include base;
-
-    &--elevated {
-      @include elevated;
-    }
-
-    &--open {
-      @include open;
-    }
-
-    &--dot {
-      @include dot;
-    }
-  }
-}
-
-@mixin host() {
-  --forge-icon-font-size: 14px;
-
-  display: flex;
-  box-sizing: border-box;
-}
-
-@mixin host-positioned() {
-  position: absolute;
-  top: 0;
-  left: 100%;
-  transform: translateX(-1.25rem);
-}
-
-@mixin base() {
-  @include mdc-typography.typography(caption);
-  @include theme.css-custom-property(height, --forge-badge-height, variables.$height);
-  @include theme.css-custom-property(line-height, --forge-badge-line-height, variables.$line-height);
-  @include theme.css-custom-property(min-width, --forge-badge-min-width, variables.$min-width);
-  @include theme.css-custom-property(max-width, --forge-badge-max-width, variables.$max-width);
-  @include theme.css-custom-property(border, --forge-badge-border, none);
-
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  transition: transform 200ms ease-in-out;
-  transform: scale(0);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  pointer-events: none;
-  border-radius: 16px;
-  padding: 0 8px;
-  font-weight: 700;
-}
-
-@mixin theme-property($property, $theme, $theme-mod) {
-  $combined-theme: $theme + '-' + $theme-mod + '-' + $property;
-  $light-theme-value: map.get(variables.$theme-values, $combined-theme);
-  $dark-theme-css-custom-property: --forge-badge-theme-#{$theme}-#{$theme-mod}-#{$property};
-  @include theme.css-custom-property($property, $dark-theme-css-custom-property, $light-theme-value);
-}
-
-@mixin theme-base($theme, $theme-mod) {
-  .forge-badge {
-    @include theme-property('background', $theme, $theme-mod);
-    @include theme-property('color', $theme, $theme-mod);
-  }
-}
-
-@mixin default-theme() {
-  :host(:not([theme])),
-  :host([theme='']) {
-    @include theme-base('default', 'muted');
-  }
-  
-  :host(:not([theme])[strong]),
-  :host([theme=''][strong]) {
-    @include theme-base('default', 'strong');
-  }
-  
-  @include theme('default');
-}
-
-@mixin theme($theme: 'danger') {
-  :host([theme=#{$theme}]) {
-    @include theme-base($theme, 'muted');
-  }
-  
-  :host([theme=#{$theme}][strong]) {
-    @include theme-base($theme, 'strong');
-  }
-}
-
-@mixin static() {
-  position: static;
-}
-
-@mixin elevated() {
-  @include mdc-elevation-theme.elevation(1);
-}
-
-@mixin open() {
-  transform: scale(1);
-}
-
-@mixin dot() {
-  height: 0.5rem;
-  width: 0.5rem;
-  min-width: auto;
-  padding: 0;
-}

package/styles/badge/_variables.scss

@@ -1,87 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../theme/theme-values';
-
-$height: 1.25rem !default;
-$line-height: 1.25rem !default;
-$min-width: 0 !default;
-$max-width: auto !default;
-
-$theme-values: (
-  // default theme
-  default-muted-background: theme-values.$secondary,
-  default-muted-color: rgba(0, 0, 0, 0.87),
-  default-strong-background: theme-values.$tertiary,
-  default-strong-color: theme-values.$on-tertiary,
-  
-  // success theme
-  success-muted-background: #a5d6a7,
-  success-muted-color: #1b5e20,
-  success-strong-background: #2e7d32,
-  success-strong-color: #ffffff,
-
-  // warning theme
-  warning-muted-background: #ffdba6,
-  warning-muted-color: #a03a03,
-  warning-strong-background: #d14900,
-  warning-strong-color: #ffffff,
-
-  // danger theme
-  danger-muted-background: #ffcdd2,
-  danger-muted-color: #a22d0e,
-  danger-strong-background: #b00020,
-  danger-strong-color: #ffffff,
-
-  // info-primary theme
-  info-primary-muted-background: #bbdefb,
-  info-primary-strong-background: #1a237e,
-  info-primary-muted-color: #1a237e,
-  info-primary-strong-color: #ffffff,
-
-  // info-secondary theme
-  info-secondary-muted-background: #e0e0e0,
-  info-secondary-muted-color: #000000,
-  info-secondary-strong-background: #000000,
-  info-secondary-strong-color: #ffffff
-) !default;
-
-$theme-values-dark: (
-  // default theme
-  default-muted-background: theme-values.$secondary,
-  default-strong-background: theme-values.$primary,
-  default-muted-color: #000000,
-  default-strong-color: rgba(255, 255, 255, 0.87),
-
-  // success theme
-  success-muted-background: #175a2a,
-  success-strong-background: #007425,
-  success-muted-color: #ffffff,
-  success-strong-color: #ffffff,
-
-  // warning theme
-  warning-muted-background: #933600,
-  warning-strong-background: #cc3900,
-  warning-muted-color: #ffffff,
-  warning-strong-color: #ffffff,
-
-  // danger theme
-  danger-muted-background: #810022,
-  danger-strong-background: #ae0019,
-  danger-muted-color: #ffffff,
-  danger-strong-color: #ffffff,
-
-  // info-primary theme
-  info-primary-muted-background: #bbdefb,
-  info-primary-muted-color: #1a237e,
-  info-primary-strong-background: #1a237e,
-  info-primary-strong-color: #ffffff,
-
-  // info-secondary theme
-  info-secondary-muted-background: #424242,
-  info-secondary-strong-background: #5a5a5a,
-  info-secondary-muted-color: #ffffff,
-  info-secondary-strong-color: #ffffff
-) !default;

package/styles/banner/_mixins.scss

@@ -1,219 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use '../theme';
-@use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(banner, $theme, variables.$theme-values);
-}
-
-@mixin width-above-breakpoint {
-  @media (min-width: variables.$width-breakpoint) {
-    @content;
-  }
-}
-
-@mixin width-below-breakpoint {
-  @media (max-width: variables.$width-breakpoint - 1) {
-    @content;
-  }
-}
-
-@mixin height-transition($new-height) {
-  transition: variables.$transition;
-  overflow: hidden;
-  max-height: $new-height;
-}
-
-@mixin theme-property($property, $theme, $overriding-css-custom-property) {
-  $light-theme-value: map.get(variables.$theme-values, $theme + '-' + $property);
-  $dark-theme-css-custom-property: --forge-banner-theme-#{$theme}-#{$property};
-
-  // map the properties for 'color' back to 'color'. The differentiation between icon and font is required for the theme handling above.
-  $styleName: $property;
-  @if $styleName == 'font-color' or $styleName == 'icon-color' {
-    $styleName: color;
-  }
-
-  $primary-override: $overriding-css-custom-property;
-  $secondary-override: $dark-theme-css-custom-property;
-  $default: $light-theme-value;
-
-  #{$styleName}: $default;
-  #{$styleName}: var($primary-override, var($secondary-override, $default));
-}
-
-@mixin theme-base($theme) {
-  .forge-banner {
-    @include theme-property('background', $theme, --forge-banner-theme-background);
-    @include theme-property('font-color', $theme, --forge-banner-theme-on-background);
-
-    .forge-banner__container-wrapper-icon {
-      @include theme-property('icon-color', $theme, --forge-banner-theme-icon);
-    }
-
-    .forge-banner__container-dismiss {
-      @include theme-property('icon-color', $theme, --forge-banner-theme-icon);
-    }
-  }
-}
-
-@mixin default-theme() {
-  :host(:not([theme])),
-  :host([theme='']),
-  :host([theme=default]) {
-    @include theme-base('default');
-  }
-}
-
-@mixin theme($theme) {
-  :host([theme=#{$theme}]) {
-    @include theme-base($theme);
-  }
-}
-
-@mixin base {
-  @include height-transition(variables.$max-height);
-
-  max-height: variables.$max-height;
-}
-
-@mixin container-base {
-  @include theme.property(border-bottom-color, border-color);
-
-  display: flex;
-  flex-direction: row;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  min-height: 48px;
-}
-
-@mixin container-wrapper-base {
-  flex: 1 1 auto;
-  display: flex;
-  flex-direction: row;
-}
-
-@mixin container-wrapper-icon-base {
-  margin-right: 16px;
-}
-
-@mixin container-wrapper-subsection-base {
-  display: flex;
-  justify-content: center;
-}
-
-@mixin container-dismiss-base {
-  &[hidden] {
-    display: none;
-  }
-}
-
-@mixin wide-styles {
-  @include width-above-breakpoint {
-    .forge-banner {
-      @include base;
-
-      &.forge-banner--dismissed {
-        @include height-transition(0);
-      }
-
-      &__container {
-        @include container-base;
-
-        align-items: center;
-        padding: 0 variables.$padding-right 0 variables.$padding-left;
-
-        &-wrapper {
-          @include container-wrapper-base;
-
-          justify-content: center;
-          align-items: center;
-
-          &-icon {
-            @include container-wrapper-icon-base;
-          }
-
-          &-subsection {
-            @include container-wrapper-subsection-base;
-
-            flex-direction: row;
-            align-items: center;
-
-            &-text {
-              padding: variables.$padding-top 0 variables.$padding-bottom 0;
-              margin-right: 24px;
-            }
-
-            &-action {
-              ::slotted(forge-button) {
-                margin-right: 16px;
-              }
-            }
-          }
-        }
-
-        &-dismiss {
-          @include container-dismiss-base;
-        }
-      }
-    }
-  }
-}
-
-@mixin narrow-styles {
-  @include width-below-breakpoint {
-    .forge-banner {
-      @include base;
-
-      &.forge-banner--dismissed {
-        @include height-transition(0);
-      }
-
-      &__container {
-        @include container-base;
-
-        padding: variables.$padding-top-narrow
-                 variables.$padding-right-narrow
-                 variables.$padding-bottom-narrow
-                 variables.$padding-left-narrow;
-
-        &-wrapper {
-          @include container-wrapper-base;
-
-          &-icon {
-            @include container-wrapper-icon-base;
-          }
-
-          &-subsection {
-            @include container-wrapper-subsection-base;
-
-            flex-direction: column;
-
-            &-action {
-              ::slotted(forge-button) {
-                margin-top: 12px;
-              }
-            }
-          }
-        }
-
-        &-dismiss {
-          @include container-dismiss-base;
-
-          margin-top: -12px;
-          margin-right: -12px;
-        }
-      }
-    }
-  }
-}
-
-@mixin core-styles() {
-  @include wide-styles;
-  @include narrow-styles;
-}

package/styles/banner/_variables.scss

@@ -1,88 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '../theme/theme-values';
-
-// There must be an explicit max height in order for the animation to function.
-//   600px _should_ be more than plenty.
-$max-height: 600px !default;
-
-$padding-top: 14px !default;
-$padding-bottom: $padding-top !default;
-$padding-right: 24px !default;
-$padding-left: $padding-right !default;
-
-$padding-top-narrow: 16px !default;
-$padding-bottom-narrow: $padding-top-narrow !default;
-$padding-right-narrow: 12px !default;
-$padding-left-narrow: $padding-right-narrow !default;
-
-$width-breakpoint: 600px !default;
-$transition: max-height 300ms ease-in-out !default;
-
-$theme-values: (
-  // default theme
-  default-background: mdc-color-palette.$indigo-50,
-  default-font-color: theme-values.$text-primary-color,
-  default-icon-color: theme-values.$text-secondary-color,
-
-  // success theme
-  success-background: #a5d6a7,
-  success-font-color: theme-values.$text-primary-color,
-  success-icon-color: theme-values.$text-secondary-color,
-
-  // warning theme
-  warning-background: #ffdba6,
-  warning-font-color: theme-values.$text-primary-color,
-  warning-icon-color: theme-values.$text-secondary-color,
-
-  // danger theme
-  danger-background: #ffcdd2,
-  danger-font-color: theme-values.$text-primary-color,
-  danger-icon-color: theme-values.$text-secondary-color,
-
-  // info-primary theme
-  info-primary-background: #bbdefb,
-  info-primary-font-color: theme-values.$text-primary-color,
-  info-primary-icon-color: theme-values.$text-secondary-color,
-
-  // info-secondary theme
-  info-secondary-background: #e0e0e0,
-  info-secondary-font-color: theme-values.$text-primary-color,
-  info-secondary-icon-color: theme-values.$text-secondary-color
-) !default;
-
-$theme-values-dark: (
-  // default theme
-  default-background: #3f51b5,
-  default-font-color: #ffffff,
-  default-icon-color: #ffffff,
-
-  // success theme
-  success-background: #175a2a,
-  success-font-color: #ffffff,
-  success-icon-color: #ffffff,
-
-  // warning theme
-  warning-background: #933600,
-  warning-font-color: #ffffff,
-  warning-icon-color: #ffffff,
-
-  // danger theme
-  danger-background: #810022,
-  danger-font-color: #ffffff,
-  danger-icon-color: #ffffff,
-
-  // info-primary theme
-  info-primary-background: #0a3b71,
-  info-primary-font-color: #ffffff,
-  info-primary-icon-color: #ffffff,
-
-  // info-secondary theme
-  info-secondary-background: #424242,
-  info-secondary-font-color: #ffffff,
-  info-secondary-icon-color: #ffffff
-) !default;