@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/css/shared/q-field.scss

@@ -0,0 +1,348 @@
+@use "sass:math";
+@use "../mixins";
+
+.q-field {
+  $transition-duration: 0.2s;
+  $wrapper-height: 3rem;
+  $wrapper-height-dense: 2.5rem;
+
+  display: flex;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  &__wrapper {
+    --decorator-color: var(--outline);
+    display: flex;
+    position: relative;
+    height: $wrapper-height;
+  }
+
+  &--dense &__wrapper {
+    height: $wrapper-height-dense;
+  }
+
+  &--rounded#{&}--active &__wrapper {
+    $clip-x1: 1.25rem;
+    $clip-x2: 1.5rem;
+    $clip-y: 0.125rem;
+
+    // clip path has to go beyond 0% and 100% for y because of the floating label
+    clip-path: polygon(
+      0% -20%,
+      $clip-x1 -20%,
+      $clip-x1 $clip-y,
+      $clip-x2 $clip-y,
+      $clip-x2 -20%,
+      100% -20%,
+      100% 120%,
+      0% 120%
+    );
+  }
+
+  &--default &__wrapper,
+  &--filled &__wrapper {
+    border-bottom: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--default &__wrapper,
+  &--focus#{&}--filled &__wrapper {
+    border-bottom: 0.0625rem solid var(--decorator-color);
+    box-shadow: inset 0 -0.0625rem 0 var(--decorator-color);
+  }
+
+  &--has-border &__wrapper {
+    border: 0.0625rem solid var(--decorator-color);
+  }
+
+  &--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
+  }
+
+  &__wrapper {
+    border-radius: 0px;
+  }
+
+  &--rounded &__wrapper {
+    border-radius: math.div($wrapper-height, 2);
+  }
+
+  &--rounded#{&}--dense &__wrapper {
+    border-radius: math.div($wrapper-height-dense, 2);
+  }
+
+  &--outlined &__wrapper {
+    border-radius: 0.25rem;
+  }
+
+  &--filled &__wrapper {
+    background-color: var(--surface-variant);
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
+  }
+
+  &--label#{&}--active#{&}--has-border &__wrapper {
+    border-top-color: transparent;
+    box-shadow: none;
+  }
+
+  &--label#{&}--focus#{&}--has-border &__wrapper {
+    box-shadow:
+      inset 0.0625rem 0 0 var(--decorator-color),
+      inset -0.0625rem 0 0 var(--decorator-color),
+      inset 0 -0.0625rem 0 0 var(--decorator-color);
+  }
+
+  &--label#{&}--active#{&}--rounded &__wrapper {
+    @include mixins.border-substitute("rounded", $wrapper-height);
+  }
+
+  &--label#{&}--active#{&}--rounded#{&}--dense &__wrapper {
+    @include mixins.border-substitute("rounded", $wrapper-height-dense, true);
+  }
+
+  &--label#{&}--active#{&}--outlined &__wrapper {
+    @include mixins.border-substitute("outlined", $wrapper-height);
+  }
+
+  &--label#{&}--active#{&}--outlined#{&}--dense &__wrapper {
+    @include mixins.border-substitute("outlined", $wrapper-height-dense, true);
+  }
+
+  // in case we have no label
+  &__label {
+    display: none;
+  }
+
+  &--label &__label {
+    display: flex;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    font-size: 1rem;
+    line-height: $wrapper-height - 0.25rem;
+    color: var(--decorator-color);
+    pointer-events: none;
+    transition:
+      color $transition-duration ease 0s,
+      left $transition-duration ease 0s,
+      top $transition-duration ease 0s,
+      font-size $transition-duration ease 0s,
+      line-height $transition-duration ease 0s,
+      border-color $transition-duration ease 0s;
+    will-change: top, left, font-size, line-height;
+  }
+
+  &--label#{&}--dense &__label {
+    line-height: $wrapper-height-dense - 0.25rem;
+  }
+
+  &--default &__label,
+  &--filled &__label {
+    left: 1rem;
+  }
+
+  &--default:not(#{&}--dense) &__label,
+  &--filled:not(#{&}--dense) &__label {
+    top: 0.0625rem;
+  }
+
+  &--snippet-prepend#{&}--default &__label,
+  &--snippet-prepend#{&}--filled &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
+  }
+
+  &--active#{&}--default &__label,
+  &--active#{&}--filled &__label {
+    top: 0.6875rem;
+  }
+
+  &--rounded &__label {
+    left: 1.4375rem;
+  }
+
+  &--snippet-prepend#{&}--rounded &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
+  }
+
+  &--active#{&}--rounded &__label {
+    left: 1.4375rem;
+  }
+
+  &--label#{&}--has-border#{&}--focus &__wrapper {
+    &::before,
+    &::after {
+      box-shadow: inset 0 0.0625rem 0 var(--decorator-color);
+    }
+  }
+
+  &--outlined &__label {
+    left: 0.75rem;
+  }
+
+  &--snippet-prepend#{&}--outlined &__label {
+    left: calc(0.5rem + var(--snippet-prepend-width));
+  }
+
+  // active state should not account for prepend snippet width
+  &--active#{&}--outlined &__label {
+    left: 0.75rem;
+  }
+
+  &--active#{&}--has-border &__label::after {
+    content: "";
+    display: block;
+    margin-left: 0.25rem;
+    flex-grow: 1;
+    border-top-width: 0.0625rem;
+    border-top-style: solid;
+    border-top-color: var(--decorator-color);
+    min-width: 0.625rem;
+    height: 0.5rem;
+    pointer-events: none;
+    transition: border-color $transition-duration ease 0s;
+    opacity: 1 !important;
+  }
+
+  &--active#{&}--rounded &__label {
+    right: math.div($wrapper-height, 2) - 0.125rem;
+  }
+
+  &--active#{&}--rounded#{&}--dense &__label {
+    right: math.div($wrapper-height-dense, 2) - 0.125rem;
+  }
+
+  &--active#{&}--outlined &__label {
+    right: 1.375rem;
+  }
+
+  &--active#{&}--outlined#{&}--dense &__label {
+    right: 1.125rem;
+  }
+
+  &--active &__label {
+    font-size: 0.75rem;
+    line-height: 0px;
+    margin-top: -0.0625rem;
+  }
+
+  &--active#{&}--dense &__label {
+    line-height: 0px;
+  }
+
+  &--active#{&}--default &__label,
+  &--active#{&}--filled &__label {
+    margin-top: 0px;
+  }
+
+  &--focus &__wrapper {
+    --decorator-color: var(--primary);
+  }
+
+  &--focus#{&}--has-border &__label::after {
+    border-top-width: 0.125rem;
+  }
+
+  &__input {
+    @include mixins.reset-form-element;
+    font-size: 1rem;
+    height: 100%;
+    color: unset;
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &--default &__input,
+  &--filled &__input {
+    padding: 0 1rem;
+    padding-top: 0.9375rem;
+  }
+
+  &--focus#{&}--default &__input,
+  &--focus#{&}--filled &__input {
+    padding-top: 1rem;
+  }
+
+  &--rounded &__input {
+    padding: 0 1.4375rem;
+  }
+
+  &--outlined &__input {
+    padding: 0 0.75rem;
+  }
+
+  &--snippet-prepend &__input {
+    padding-left: 0.5rem !important;
+  }
+
+  &--snippet-append &__input {
+    padding-right: 0.5rem !important;
+  }
+
+  &__hint,
+  &__error {
+    font-size: 0.75rem;
+    text-align: left;
+    left: 1rem;
+    padding-top: 0.125rem;
+  }
+
+  &--error &__label,
+  &__error {
+    color: var(--error);
+  }
+
+  &--error &__wrapper,
+  &--error#{&}--focus &__wrapper {
+    --decorator-color: var(--error);
+  }
+
+  &__snippet- {
+    &prepend,
+    &append,
+    &before,
+    &after {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &__snippet-prepend {
+    padding-left: 0.75rem;
+  }
+
+  &--rounded &__snippet-prepend {
+    padding-left: 1rem;
+  }
+
+  &__snippet-append {
+    padding-right: 0.75rem;
+  }
+
+  &--rounded &__snippet-append {
+    padding-right: 1rem;
+  }
+
+  &__snippet-before {
+    padding-right: 0.75rem;
+  }
+
+  &__snippet-after {
+    padding-left: 0.75rem;
+  }
+
+  &--disable {
+    opacity: 0.5;
+    &,
+    * {
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/css/theme/_colors.scss

@@ -0,0 +1,173 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+
+:root {
+  --primary-light: #2d54cc;
+  --on-primary-light: #ffffff;
+  --primary-container-light: #dce1ff;
+  --on-primary-container-light: #001551;
+  --secondary-light: #595d72;
+  --on-secondary-light: #ffffff;
+  --secondary-container-light: #dee1f9;
+  --on-secondary-container-light: #161b2c;
+  --tertiary-light: #75546f;
+  --on-tertiary-light: #ffffff;
+  --tertiary-container-light: #ffd7f5;
+  --on-tertiary-container-light: #2c1229;
+  --neutral-light: #5e5e62;
+  --on-neutral-light: #ffffff;
+  --neutral-container-light: #e4e1e6;
+  --on-neutral-container-light: #1b1b1f;
+  --neutral-variant-light: #5d5e67;
+  --on-neutral-variant-light: #ffffff;
+  --neutral-variant-container-light: #e2e1ec;
+  --on-neutral-variant-container-light: #1a1b23;
+  --error-light: #ba1a1a;
+  --on-error-light: #ffffff;
+  --error-container-light: #ffdad6;
+  --on-error-container-light: #410002;
+  --surface-light: #fbf8fd;
+  --surface-dim-light: #dbd9de;
+  --surface-bright-light: #fbf8fd;
+  --on-surface-light: #1b1b1f;
+  --on-surface-variant-light: #45464f;
+  --surface-container-lowest-light: #ffffff;
+  --surface-container-low-light: #f5f3f7;
+  --surface-container-light: #efedf1;
+  --surface-container-high-light: #eae7ec;
+  --surface-container-highest-light: #e4e1e6;
+  --inverse-surface-light: #303034;
+  --inverse-on-surface-light: #f2f0f4;
+  --inverse-primary-light: #b7c4ff;
+  --outline-light: #767680;
+  --outline-variant-light: #c6c5d0;
+  --scrim-light: #000000;
+  --shadow-light: #000000;
+  --primary-dark: #b7c4ff;
+  --on-primary-dark: #002681;
+  --primary-container-dark: #0039b4;
+  --on-primary-container-dark: #dce1ff;
+  --secondary-dark: #c2c5dd;
+  --on-secondary-dark: #2b3042;
+  --secondary-container-dark: #424659;
+  --on-secondary-container-dark: #dee1f9;
+  --tertiary-dark: #e3bada;
+  --on-tertiary-dark: #43273f;
+  --tertiary-container-dark: #5c3d57;
+  --on-tertiary-container-dark: #ffd7f5;
+  --neutral-dark: #c8c6ca;
+  --on-neutral-dark: #303034;
+  --neutral-container-dark: #47464a;
+  --on-neutral-container-dark: #e4e1e6;
+  --neutral-variant-dark: #c6c5d0;
+  --on-neutral-variant-dark: #2f3038;
+  --neutral-variant-container-dark: #45464f;
+  --on-neutral-variant-container-dark: #e2e1ec;
+  --error-dark: #ffb4ab;
+  --on-error-dark: #690005;
+  --error-container-dark: #93000a;
+  --on-error-container-dark: #ffdad6;
+  --surface-dark: #131316;
+  --surface-dim-dark: #131316;
+  --surface-bright-dark: #39393c;
+  --on-surface-dark: #e4e1e6;
+  --on-surface-variant-dark: #e2e1ec;
+  --surface-container-lowest-dark: #0e0e11;
+  --surface-container-low-dark: #1b1b1f;
+  --surface-container-dark: #1f1f23;
+  --surface-container-high-dark: #2a2a2d;
+  --surface-container-highest-dark: #39393c;
+  --inverse-surface-dark: #e4e1e6;
+  --inverse-on-surface-dark: #303034;
+  --inverse-primary-dark: #2d54cc;
+  --outline-dark: #90909a;
+  --outline-variant-dark: #45464f;
+  --scrim-dark: #000000;
+  --shadow-dark: #000000;
+}
+
+.body--light {
+  --primary: var(--primary-light);
+  --on-primary: var(--on-primary-light);
+  --primary-container: var(--primary-container-light);
+  --on-primary-container: var(--on-primary-container-light);
+  --secondary: var(--secondary-light);
+  --on-secondary: var(--on-secondary-light);
+  --secondary-container: var(--secondary-container-light);
+  --on-secondary-container: var(--on-secondary-container-light);
+  --tertiary: var(--tertiary-light);
+  --on-tertiary: var(--on-tertiary-light);
+  --tertiary-container: var(--tertiary-container-light);
+  --on-tertiary-container: var(--on-tertiary-container-light);
+  --neutral: var(--neutral-light);
+  --on-neutral: var(--on-neutral-light);
+  --neutral-container: var(--neutral-container-light);
+  --on-neutral-container: var(--on-neutral-container-light);
+  --neutral-variant: var(--neutral-variant-light);
+  --on-neutral-variant: var(--on-neutral-variant-light);
+  --neutral-variant-container: var(--neutral-variant-container-light);
+  --on-neutral-variant-container: var(--on-neutral-variant-container-light);
+  --error: var(--error-light);
+  --on-error: var(--on-error-light);
+  --error-container: var(--error-container-light);
+  --on-error-container: var(--on-error-container-light);
+  --surface: var(--surface-light);
+  --surface-dim: var(--surface-dim-light);
+  --surface-bright: var(--surface-bright-light);
+  --on-surface: var(--on-surface-light);
+  --on-surface-variant: var(--on-surface-variant-light);
+  --surface-container-lowest: var(--surface-container-lowest-light);
+  --surface-container-low: var(--surface-container-low-light);
+  --surface-container: var(--surface-container-light);
+  --surface-container-high: var(--surface-container-high-light);
+  --surface-container-highest: var(--surface-container-highest-light);
+  --inverse-surface: var(--inverse-surface-light);
+  --inverse-on-surface: var(--inverse-on-surface-light);
+  --inverse-primary: var(--inverse-primary-light);
+  --outline: var(--outline-light);
+  --outline-variant: var(--outline-variant-light);
+  --scrim: var(--scrim-light);
+  --shadow: var(--shadow-light);
+}
+.body--dark {
+  --primary: var(--primary-dark);
+  --on-primary: var(--on-primary-dark);
+  --primary-container: var(--primary-container-dark);
+  --on-primary-container: var(--on-primary-container-dark);
+  --secondary: var(--secondary-dark);
+  --on-secondary: var(--on-secondary-dark);
+  --secondary-container: var(--secondary-container-dark);
+  --on-secondary-container: var(--on-secondary-container-dark);
+  --tertiary: var(--tertiary-dark);
+  --on-tertiary: var(--on-tertiary-dark);
+  --tertiary-container: var(--tertiary-container-dark);
+  --on-tertiary-container: var(--on-tertiary-container-dark);
+  --neutral: var(--neutral-dark);
+  --on-neutral: var(--on-neutral-dark);
+  --neutral-container: var(--neutral-container-dark);
+  --on-neutral-container: var(--on-neutral-container-dark);
+  --neutral-variant: var(--neutral-variant-dark);
+  --on-neutral-variant: var(--on-neutral-variant-dark);
+  --neutral-variant-container: var(--neutral-variant-container-dark);
+  --on-neutral-variant-container: var(--on-neutral-variant-container-dark);
+  --error: var(--error-dark);
+  --on-error: var(--on-error-dark);
+  --error-container: var(--error-container-dark);
+  --on-error-container: var(--on-error-container-dark);
+  --surface: var(--surface-dark);
+  --surface-dim: var(--surface-dim-dark);
+  --surface-bright: var(--surface-bright-dark);
+  --on-surface: var(--on-surface-dark);
+  --on-surface-variant: var(--on-surface-variant-dark);
+  --surface-container-lowest: var(--surface-container-lowest-dark);
+  --surface-container-low: var(--surface-container-low-dark);
+  --surface-container: var(--surface-container-dark);
+  --surface-container-high: var(--surface-container-high-dark);
+  --surface-container-highest: var(--surface-container-highest-dark);
+  --inverse-surface: var(--inverse-surface-dark);
+  --inverse-on-surface: var(--inverse-on-surface-dark);
+  --inverse-primary: var(--inverse-primary-dark);
+  --outline: var(--outline-dark);
+  --outline-variant: var(--outline-variant-dark);
+  --scrim: var(--scrim-dark);
+  --shadow: var(--shadow-dark);
+}