@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/styles/file-picker/_mixins.scss

@@ -1,155 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/theme/color-palette' as mdc-color-palette;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '../theme';
-@use '../theme/theme-values';
-@use '../typography/mixins' as typography-mixins;
-@use '../field/base' as field-base;
-@use './variables';
-
-
-@mixin styles() {
-  .forge-file-picker {
-    @include base;
-
-    &__primary {
-      @include primary;
-    }
-
-    &__secondary {
-      @include secondary;
-    }
-
-    &__input {
-      @include input;
-    }
-
-    &__helper-text {
-      ::slotted([slot='helper-text']) {
-        @include helper-text;
-      }
-    }
-
-    &[disabled] {
-      @include base-disabled;
-    }
-
-    &.compact {
-      @include base-compact;
-
-      .forge-file-picker__primary,
-      .forge-file-picker__secondary {
-        display: none;
-      }
-
-      .forge-file-picker__button {
-        @include button-compact;
-      }
-    }
-
-    &:not(.compact).highlight {
-      @include base-highlight;
-    }
-
-    &.borderless {
-      @include base-borderless;
-
-      &:not(.compact).highlight {
-        border: none;
-      }
-
-      + .forge-file-picker__helper-text {
-        display: none;
-      }
-    }
-  }
-}
-
-@mixin host() {
-  @include theme.css-custom-property(width, --forge-file-picker-width, variables.$width);
-  @include theme.css-custom-property(height, --forge-file-picker-height, variables.$height);
-
-  display: inline-block;
-}
-
-@mixin base() {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(mdc-color-palette.$grey-400, 0.12);
-  border: 1px dashed theme-values.$border-color;
-  display: grid;
-  justify-content: center;
-  align-content: center;
-  gap: 16px;
-  padding: 16px;
-  text-align: center;
-  cursor: pointer;
-}
-
-@mixin base-disabled() {
-  @include mdc-theme.property(background-color, background);
-  @include theme.property(border-color, border-color);
-
-  opacity: 0.38;
-  cursor: unset;
-}
-
-@mixin base-compact() {
-  height: fit-content;
-  width: fit-content;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
-
-@mixin base-borderless() {
-  --forge-file-picker-width: 100%;
-  border: none;
-}
-
-@mixin base-highlight() {
-  @include mdc-theme.property(border-color, primary);
-
-  background-color: rgba(mdc-theme-color.prop-value(primary), 0.12);
-  border-width: 1px;
-  border-style: solid;
-}
-
-@mixin primary() {
-  @include mdc-typography.typography(subtitle1);
-  @include mdc-theme.property(color, text-primary-on-background);
-  @include theme.css-custom-property(max-width, --forge-file-picker-max-content-width, variables.$max-content-width);
-}
-
-@mixin button-compact() {
-  @include theme.css-custom-property(width, --forge-file-picker-width, auto);
-
-  background-color: transparent;
-}
-
-@mixin secondary() {
-  @include typography-mixins.typography(subtitle2-secondary);
-  @include mdc-theme.property(color, text-primary-on-background);
-  @include theme.css-custom-property(max-width, --forge-file-picker-max-content-width, variables.$max-content-width);
-
-}
-
-@mixin input() {
-  display: none;
-}
-
-@mixin helper-text() {
-  @include field-base.helper-text-core;
-  @include field-base.helper-text-color(default);
-  @include field-base.helper-text-margin-left(default);
-  @include typography-mixins.typography(caption);
-
-  text-align: start;
-}

package/styles/file-picker/_variables.scss

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$width: auto !default;
-$height: auto !default;
-$max-content-width: auto !default;

package/styles/page-state/_mixins.scss

@@ -1,123 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '../theme';
-@use '../utils/mixins-media';
-@use './variables';
-
-@mixin host() {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-
-@mixin base() {
-  @include theme.css-custom-property(width, --forge-page-state-width, variables.$width);
-  @include theme.css-custom-property(margin-top, --forge-page-state-vertical-margin, variables.$vertical-margin);
-  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
-  text-align: center;
-}
-
-@mixin base-mobile() {
-  @include theme.css-custom-property(width, --forge-page-state-mobile-width, variables.$mobile-width);
-}
-
-@mixin graphic() {
-  @include theme.css-custom-property(height, --forge-page-state-graphic-height, variables.$graphic-height);
-  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-
-@mixin graphic-mobile() {
-  @include theme.css-custom-property(height, --forge-page-state-mobile-graphic-height, auto);
-}
-
-@mixin title() {
-  @include mdc-typography.typography(headline3);  
-  @include mdc-theme.property(color, text-secondary-on-background);
-  @include theme.css-custom-property(margin-top, --forge-page-state-vertical-margin, variables.$vertical-margin);
-  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
-}
-
-@mixin title-mobile() {
-  @include mdc-typography.typography(headline5);
-}
-
-@mixin message() {
-  @include mdc-typography.typography(subtitle1);
-  @include mdc-theme.property(color, text-primary-on-background);
-  @include theme.css-custom-property(margin-bottom, --forge-page-state-vertical-margin, variables.$vertical-margin);
-
-  font-size: 20px;
-  margin-top: 0;
-}
-
-@mixin message-mobile() {
-  @include mdc-typography.typography(body1);
-}
-
-@mixin core-styles() {
-  .forge-page-state {
-    @include base;
-
-    &__graphic {
-      @include graphic;
-
-      ::slotted([slot=graphic]) {
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    &__title {
-      @include title;
-    }
-
-    &__message {
-      @include message;
-    }
-
-    &__actions {
-      ::slotted(:not(:last-child)) {
-        margin-right: 16px;
-      }
-    }
-  }
-
-  @include mixins-media.phone-only {
-    .forge-page-state {
-      @include base-mobile;
-
-      &__graphic {
-        @include graphic-mobile;
-      }
-
-      &__title {
-        @include title-mobile;
-      }
-  
-      &__message {
-        @include message-mobile;
-      }
-
-      &__actions {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-
-        ::slotted(:not(:last-child)) {
-          margin-right: 0;
-          margin-bottom: 16px;
-        }
-      }
-    }
-  }
-}

package/styles/page-state/_variables.scss

@@ -1,9 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$width: 576px !default;
-$mobile-width: 70% !default;
-$vertical-margin: 56px !default;
-$graphic-height: 296px !default;

package/styles/product-icon/_mixins.scss

@@ -1,49 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../theme';
-@use './variables';
-
-@mixin core-styles() {
-  .forge-product-icon {
-    &__background {
-      @include background;
-    }
-    &__container {
-      @include container;
-    }
-    &__icon,
-    &__text {
-      ::slotted(*) {
-        @include icon;
-      }
-    }
-  }
-}
-
-@mixin host() {
-  display: inline-block;
-}
-
-@mixin background() {
-  @include theme.css-custom-property(border-radius, --forge-product-icon-border-radius, 50%);
-  height: variables.$size;
-  width: variables.$size;
-  overflow: hidden;
-}
-
-@mixin container() {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-
-@mixin icon() {
-  display: flex !important;
-  color: #ffffff !important;
-  font-size: var(--forge-product-icon-font-size, variables.$font-size) !important;
-}

package/styles/product-icon/product-icon.scss

@@ -1,16 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use './mixins';
-
-@include mixins.core-styles;
-
-:host {
-  @include mixins.host;
-}
-
-:host([hidden]) {
-  display: none;
-}

package/styles/skeleton/_mixins.scss

@@ -1,132 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../theme';
-@use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(skeleton, $theme, variables.$theme-values);
-}
-
-@mixin host() {
-  @include theme.css-custom-property(height, --forge-skeleton-height, variables.$default-height);
-  @include theme.css-custom-property(margin, --forge-skeleton-margin, variables.$default-margin);
-  @include theme.css-custom-property(border-radius, --forge-skeleton-border-radius, variables.$border-radius);
-  @include theme.css-custom-property(background-color, --forge-skeleton-theme-background, variables.$background);
-
-  display: block;
-  position: relative;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-@mixin base() {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-@mixin gradient() {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform: translateX(-100%);
-  background-repeat: no-repeat;
-  background-image: linear-gradient(90deg, transparent, var(--forge-skeleton-theme-gradient, variables.$gradient), transparent);
-  animation: loading variables.$animation-duration ease-in infinite;
-}
-
-@mixin keyframes() {
-  @keyframes loading {
-    25%, 100% {
-      transform: translateX(100%);
-    }
-  }
-}
-
-@mixin avatar() {
-  @include theme.css-custom-property(height, --forge-skeleton-avatar-size, variables.$avatar-size);
-  @include theme.css-custom-property(width, --forge-skeleton-avatar-size, variables.$avatar-size);
-
-  border-radius: 50%;
-}
-
-@mixin button() {
-  @include theme.css-custom-property(height, --forge-skeleton-button-height, variables.$button-height);
-  @include theme.css-custom-property(width, --forge-skeleton-button-width, variables.$button-width);
-}
-
-@mixin form-field() {
-  @include theme.css-custom-property(height, --forge-skeleton-form-field-height, variables.$form-field-height);
-  @include theme.css-custom-property(width, --forge-skeleton-form-field-width, variables.$form-field-width);
-}
-
-@mixin chip() {
-  @include theme.css-custom-property(height, --forge-skeleton-chip-height, variables.$chip-height);
-  @include theme.css-custom-property(width, --forge-skeleton-chip-width, variables.$chip-width);
-
-  border-radius: 16px;
-}
-
-@mixin list-item() {
-  @include theme.css-custom-property(height, --forge-skeleton-list-item-height, variables.$list-item-height);
-  @include theme.css-custom-property(margin, --forge-skeleton-list-item-margin, variables.$list-item-margin);
-}
-
-@mixin text() {
-  @include theme.css-custom-property(height, --forge-skeleton-text-height, variables.$text-height);
-}
-
-@mixin stretch() {
-  height: 100%;
-  width: 100%;
-}
-
-@mixin core-styles() {
-  .forge-skeleton {
-    @include base;
-
-    &::after {
-      @include gradient;
-
-      content: '';
-    }
-  }
-
-  @at-root {
-    @include keyframes;
-  }
-}
-
-@mixin host-variant-styles() {
-  :host([avatar]) {
-    @include avatar;
-  }
-  
-  :host([list-item]) {
-    @include list-item;
-  }
-  
-  :host([text]) {
-    @include text;
-  }
-  
-  :host([stretch]) {
-    @include stretch;
-  }
-  
-  :host([chip]) {
-    @include chip;
-  }
-  
-  :host([button]) {
-    @include button;
-  }
-
-  :host([form-field]) {
-    @include form-field;
-  }
-}

package/styles/skeleton/_variables.scss

@@ -1,45 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-$background: rgba(0, 0, 0, 0.12) !default;
-$background-color-dark: rgba(255, 255, 255, 0.12) !default;
-$border-radius: 4px !default;
-$gradient: rgba(255, 255, 255, 0.3) !default;
-$animation-gradient-color-dark: rgba(255, 255, 255, 0.12) !default;
-$animation-duration: 1500ms !default;
-$default-height: 48px !default;
-$default-margin: 16px 0 !default;
-
-$avatar-size: 48px !default;
-
-$button-height: 36px !default;
-$button-width: 72px !default;
-
-$form-field-height: 40px !default;
-$form-field-width: 256px !default;
-
-$chip-height: 32px !default;
-$chip-width: 72px !default;
-
-$list-item-height: 32px !default;
-$list-item-margin: 12px 8px !default;
-
-$text-height: 16px !default;
-$text-short-width: 56px !default;
-$text-medium-width: 96px !default;
-
-$short-width: 25% !default;
-$medium-width: 50% !default;
-$long-width: 75% !default;
-
-$theme-values: (
-  background: $background,
-  gradient: $gradient
-) !default;
-
-$theme-values-dark: (
-  gradient: rgba(255, 255, 255, 0.12),
-  background: rgba(255, 255, 255, 0.12)
-) !default;

package/styles/stack/_mixins.scss

@@ -1,49 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '../theme';
-@use './variables';
-
-@mixin core-styles() {
-  .forge-stack {
-    @include base();
-    @include stretch();
-    @include theme.css-custom-property(gap, --forge-stack-gap, variables.$gap);
-    @include theme.css-custom-property(height, --forge-stack-height, 100%);
-  }
-}
-
-@mixin base() {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-@mixin inline() {
-  flex-direction: row;
-  --forge-stack-height: auto;
-}
-
-@mixin wrap() {
-  flex-wrap: wrap;
-}
-
-@mixin stretch() {
-  ::slotted(*) {
-    flex: var(--forge-stack-stretch, initial);
-  }
-}
-
-@mixin justify-start() {
-  justify-content: start;
-}
-
-@mixin justify-center() {
-  justify-content: center;
-}
-
-@mixin justify-end() {
-  justify-content: end;
-}

package/styles/text-field/_base.scss

@@ -1,76 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use 'sass:map';
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/theme' as mdc-theme;
-@use '@material/typography' as mdc-typography;
-@use '../field/base' as field-base;
-@use '../field/utils' as field-utils;
-@use '../field/variables' as base-variables;
-@use '../theme';
-@use './variables';
-
-// Field
-@mixin field-with-textarea($custom-prop-height) {
-  height: auto;
-  padding-right: 2px; // Moves scollbar inside of border
-  @include theme.css-custom-property(
-    min-height,
-    $custom-prop-height,
-    map.get(base-variables.$field, height, default)
-  );
-}
-
-// Textarea
-@mixin textarea-core {
-  @include mdc-typography.typography(body1);
-  align-self: flex-end;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  transition: mdc-animation.standard(opacity, 150ms);
-  border: none;
-  background: none;
-  appearance: none;
-  outline: none;
-  line-height: normal;
-  min-width: 0;
-  font-size: 1rem;
-  margin: map.get(variables.$textarea, margin, default);
-  padding: map.get(variables.$textarea, padding, default);
-  overflow: auto;
-  resize: vertical;
-  @include field-base.placeholder;
-}
-
-// Multi input
-@mixin input-first {
-  padding-right: 0;
-  max-width: 110px;
-  min-width: 110px;
-  width: 110px;
-}
-
-@mixin input-last {
-  &::placeholder {
-    padding-left: 6px;
-  }
-}
-
-@mixin input-separator-core {
-  @include mdc-theme.property(color, text-primary-on-background);
-  border: transparent;
-}
-
-@mixin input-separator-margin($slot-state) {
-  @if $slot-state == default or $slot-state == helper-text {
-    margin: map.get(variables.$input-separator, margin, no-label);
-  }
-  @else if $slot-state == label or $slot-state == label-helper-text {
-    margin: map.get(variables.$input-separator, margin, default);
-  }
-  @include field-utils.error-y-axis-slot-state(input-separator-margin, $slot-state);
-}

package/styles/text-field/_mixins.scss

@@ -1,28 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/typography' as mdc-typography;
-@use '../theme';
-@use '../field/core' as field-core;
-@use './core';
-@use '../field/variables' as field-variables;
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(text-field, $theme, field-variables.$theme-values);
-}
-
-@mixin host() {
-  display: block;
-  contain: layout;
-}
-
-@mixin core-styles() {
-  // we include the field-selector.field in the text-field-selector.field mixin
-  @include field-core.core-styles(forge-text-field, $exclude: (field));
-  @include core.core-styles;
-}