@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

package/dist/css/mixins.scss

@@ -1,138 +0,0 @@
-@import "mixins/field.scss";
-@import "mixins/menu.scss";
-@import "mixins/selection.scss";
-@import "mixins/table.scss";
-
-// Spaces
-@mixin padding($pos: "a", $size: "sm") {
-  $position: map.get($positions, $pos);
-  $space: map.get($spaces, $size);
-
-  padding#{$position}: $space;
-}
-
-@mixin margin($pos: "a", $size: "sm") {
-  $position: map.get($positions, $pos);
-  $space: map.get($spaces, $size);
-
-  margin#{$position}: $space;
-}
-
-@mixin gap($space: "sm") {
-  gap: map.get($spaces, $space);
-}
-
-//States
-@mixin elevate($strength, $position) {
-  $coeff: 1;
-  @if $position == "top" {
-    $coeff: -1;
-  }
-  $elevate: 0.125rem * $strength;
-
-  &-#{$position} {
-    box-shadow: 0 $elevate * $coeff $elevate 0 rgb(0, 0, 0, 0.24 + 0.08 * $strength);
-  }
-}
-
-@mixin border($color: var(--outline)) {
-  border: 0.0625rem solid $color;
-}
-
-@mixin transparent($ripple: false) {
-  background-color: transparent;
-  background: transparent;
-  color: inherit;
-
-  &:is(:focus, :hover) > .q-icon {
-    font-variation-settings: "FILL" 1;
-  }
-
-  @if $ripple {
-    &::after {
-      background-image: radial-gradient(circle, rgb(150, 150, 150, 0.2) 1%, transparent 1%);
-    }
-  }
-}
-
-//Layout
-@mixin include-drawers($baseWidth, $pos, $el) {
-  // Left drawer
-  &.left ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$L_Drawer});
-  }
-
-  // Right drawer
-  &.right ~ .q-#{$el} {
-    width: calc(#{$baseWidth} - #{$R_Drawer});
-  }
-
-  // Left drawer + Right drawer
-  &.left ~ .q-drawer.active.right:not(.offset-#{$pos}, .overlay) {
-    width: calc(#{$baseWidth} - #{$LR_Drawer});
-  }
-}
-
-// Images
-@mixin responsive($parent: null) {
-  object-fit: cover;
-  object-position: center;
-  transition:
-    var(--speed3) transform,
-    var(--speed3) border-radius,
-    var(--speed3) padding;
-  width: 100%;
-  height: 100%;
-
-  @include margin("x", "auto");
-
-  @if $parent != null {
-    width: 2.5rem;
-    border: 0.25rem solid transparent;
-  }
-}
-
-@mixin btn-image($parent: "btn") {
-  &.q-#{$parent}--sm > &__img--responsive {
-    height: 2rem;
-    width: 2rem;
-  }
-
-  &.q-#{$parent}--lg > &__img--responsive {
-    height: 3rem;
-    width: 3rem;
-  }
-
-  &.q-#{$parent}--xl > &__img--responsive {
-    height: 3.5rem;
-    width: 3.5rem;
-  }
-
-  > .q-#{$parent}__img {
-    margin-inline: -0.5rem;
-
-    &:not(&--responsive) {
-      min-width: 1.5rem;
-      max-width: 1.5rem;
-      min-height: 1.5rem;
-      max-height: 1.5rem;
-    }
-
-    &--responsive {
-      @include responsive($parent);
-
-      $marginSize: -1.5rem;
-      @if $parent == "chip" {
-        $marginSize: -1rem;
-      }
-
-      margin-left: $marginSize;
-      margin-right: -0.5rem;
-
-      &.q-#{$parent}__img--trailing {
-        margin-left: -0.5rem;
-        margin-right: $marginSize;
-      }
-    }
-  }
-}

package/dist/css/states.scss

@@ -1,71 +0,0 @@
-// DISABLED
-.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-
-  &::before,
-  &::after {
-    all: unset;
-  }
-}
-
-// BORDERED
-.border {
-  @include border;
-}
-
-// ELEVATED
-
-.elevate {
-  &-none {
-    box-shadow: none;
-  }
-
-  $elevations: (
-    "sm": 1,
-    "md": 2,
-    "lg": 3,
-  );
-
-  @each $elevation, $value in $elevations {
-    &-#{$elevation} {
-      @include elevate($value, "top");
-      @include elevate($value, "bottom");
-    }
-  }
-}
-
-// TRANSPARENT
-.transparent {
-  @include transparent;
-}
-
-// WITH RIPPLE EFFECT
-.ripple {
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    border-radius: inherit;
-    background-position: center;
-    opacity: 0;
-    transition: none;
-    background-image: radial-gradient(circle, rgb(255, 255, 255, 0.4) 1%, transparent 1%);
-  }
-
-  &:is(:focus, :hover)::after {
-    background-size: 15000%;
-    opacity: 1;
-    transition: var(--speed2) background-size linear;
-  }
-
-  &:active::after {
-    background-size: 5000%;
-    opacity: 0;
-    transition: none;
-  }
-}

package/dist/css/theme/bridge.scss

@@ -1,15 +0,0 @@
-// Use this for things we might refactor at a later point, e.g beer css variables
-:root {
-  --size: 16px;
-  --font: Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
-  --font-icon: "Material Symbols Outlined";
-  --speed1: 0.1s;
-  --speed2: 0.2s;
-  --speed3: 0.3s;
-  --speed4: 0.4s;
-  --active: rgb(0 0 0 / 0.1);
-}
-
-body.dark {
-  --active: rgb(255 255 255 / 0.2);
-}

package/dist/css/theme/colors.module.scss

@@ -1,180 +0,0 @@
-.primary {
-  background-color: var(--primary);
-}
-.primary-text {
-  color: var(--primary);
-}
-.on-primary {
-  background-color: var(--on-primary);
-}
-.on-primary-text {
-  color: var(--on-primary);
-}
-.primary-container {
-  background-color: var(--primary-container);
-}
-.primary-container-text {
-  color: var(--primary-container);
-}
-.on-primary-container {
-  background-color: var(--on-primary-container);
-}
-.on-primary-container-text {
-  color: var(--on-primary-container);
-}
-.secondary {
-  background-color: var(--secondary);
-}
-.secondary-text {
-  color: var(--secondary);
-}
-.on-secondary {
-  background-color: var(--on-secondary);
-}
-.on-secondary-text {
-  color: var(--on-secondary);
-}
-.secondary-container {
-  background-color: var(--secondary-container);
-}
-.secondary-container-text {
-  color: var(--secondary-container);
-}
-.on-secondary-container {
-  background-color: var(--on-secondary-container);
-}
-.on-secondary-container-text {
-  color: var(--on-secondary-container);
-}
-.tertiary {
-  background-color: var(--tertiary);
-}
-.tertiary-text {
-  color: var(--tertiary);
-}
-.on-tertiary {
-  background-color: var(--on-tertiary);
-}
-.on-tertiary-text {
-  color: var(--on-tertiary);
-}
-.tertiary-container {
-  background-color: var(--tertiary-container);
-}
-.tertiary-container-text {
-  color: var(--tertiary-container);
-}
-.on-tertiary-container {
-  background-color: var(--on-tertiary-container);
-}
-.on-tertiary-container-text {
-  color: var(--on-tertiary-container);
-}
-.error {
-  background-color: var(--error);
-}
-.error-text {
-  color: var(--error);
-}
-.error-container {
-  background-color: var(--error-container);
-}
-.error-container-text {
-  color: var(--error-container);
-}
-.on-error {
-  background-color: var(--on-error);
-}
-.on-error-text {
-  color: var(--on-error);
-}
-.on-error-container {
-  background-color: var(--on-error-container);
-}
-.on-error-container-text {
-  color: var(--on-error-container);
-}
-.background {
-  background-color: var(--background);
-}
-.background-text {
-  color: var(--background);
-}
-.on-background {
-  background-color: var(--on-background);
-}
-.on-background-text {
-  color: var(--on-background);
-}
-.surface {
-  background-color: var(--surface);
-}
-.surface-text {
-  color: var(--surface);
-}
-.on-surface {
-  background-color: var(--on-surface);
-}
-.on-surface-text {
-  color: var(--on-surface);
-}
-.surface-variant {
-  background-color: var(--surface-variant);
-}
-.surface-variant-text {
-  color: var(--surface-variant);
-}
-.on-surface-variant {
-  background-color: var(--on-surface-variant);
-}
-.on-surface-variant-text {
-  color: var(--on-surface-variant);
-}
-.outline {
-  background-color: var(--outline);
-}
-.outline-text {
-  color: var(--outline);
-}
-.inverse-on-surface {
-  background-color: var(--inverse-on-surface);
-}
-.inverse-on-surface-text {
-  color: var(--inverse-on-surface);
-}
-.inverse-surface {
-  background-color: var(--inverse-surface);
-}
-.inverse-surface-text {
-  color: var(--inverse-surface);
-}
-.inverse-primary {
-  background-color: var(--inverse-primary);
-}
-.inverse-primary-text {
-  color: var(--inverse-primary);
-}
-.shadow {
-  background-color: var(--shadow);
-}
-.shadow-text {
-  color: var(--shadow);
-}
-.surface-tint {
-  background-color: var(--surface-tint);
-}
-.surface-tint-text {
-  color: var(--surface-tint);
-}
-.outline-variant {
-  background-color: var(--outline-variant);
-}
-.outline-variant-text {
-  color: var(--outline-variant);
-}
-.scrim {
-  background-color: var(--scrim);
-}
-.scrim-text {
-  color: var(--scrim);
-}

package/dist/css/theme/page.scss

@@ -1,16 +0,0 @@
-@import "../variables-sass.scss";
-
-.q-page {
-  max-width: 75rem;
-  margin: 0 auto;
-  padding: 4rem 1.5rem;
-  line-height: 1.5;
-
-  @media only screen and (max-width: #{map-get($breakpoints, md) - 1px}) {
-    padding: 3rem 1.25rem;
-  }
-
-  @media only screen and (min-width: #{map-get($breakpoints, md)}) and (max-width: #{map-get($breakpoints, lg) - 1px}) {
-    padding: 3.5rem 1.5rem;
-  }
-}

package/dist/css/theme/theme.dark.scss

@@ -1,37 +0,0 @@
-body.dark {
-  --body: #000;
-  --primary: rgba(var(--primary-dark));
-  --on-primary: rgba(var(--on-primary-dark));
-  --primary-container: rgba(var(--primary-container-dark));
-  --on-primary-container: rgba(var(--on-primary-container-dark));
-  --secondary: rgba(var(--secondary-dark));
-  --on-secondary: rgba(var(--on-secondary-dark));
-  --secondary-container: rgba(var(--secondary-container-dark));
-  --on-secondary-container: rgba(var(--on-secondary-container-dark));
-  --tertiary: rgba(var(--tertiary-dark));
-  --on-tertiary: rgba(var(--on-tertiary-dark));
-  --tertiary-container: rgba(var(--tertiary-container-dark));
-  --on-tertiary-container: rgba(var(--on-tertiary-container-dark));
-  --error: rgba(var(--error-dark));
-  --error-container: rgba(var(--error-container-dark));
-  --on-error: rgba(var(--on-error-dark));
-  --on-error-container: rgba(var(--on-error-container-dark));
-  --background: rgba(var(--background-dark));
-  --on-background: rgba(var(--on-background-dark));
-  --surface: rgba(var(--surface-dark));
-  --on-surface: rgba(var(--on-surface-dark));
-  --on-surface-2: rgba(var(--on-surface-dark), 0.08);
-  --on-surface-4: rgba(var(--on-surface-dark), 0.12);
-  --surface-variant: rgba(var(--surface-variant-dark));
-  --on-surface-variant: rgba(var(--on-surface-variant-dark));
-  --on-surface-variant-2: rgba(var(--on-surface-variant-dark), 0.08);
-  --on-surface-variant-4: rgba(var(--on-surface-variant-dark), 0.12);
-  --outline: rgba(var(--outline-dark));
-  --inverse-on-surface: rgba(var(--inverse-on-surface-dark));
-  --inverse-surface: rgba(var(--inverse-surface-dark));
-  --inverse-primary: rgba(var(--inverse-primary-dark));
-  --shadow: rgba(var(--shadow-dark));
-  --surface-tint: rgba(var(--surface-tint-dark));
-  --outline-variant: rgba(var(--outline-variant-dark));
-  --scrim: rgba(var(--scrim-dark));
-}

package/dist/css/theme/theme.light.scss

@@ -1,37 +0,0 @@
-body.light {
-  --body: #fff;
-  --primary: rgba(var(--primary-light));
-  --on-primary: rgba(var(--on-primary-light));
-  --primary-container: rgba(var(--primary-container-light));
-  --on-primary-container: rgba(var(--on-primary-container-light));
-  --secondary: rgba(var(--secondary-light));
-  --on-secondary: rgba(var(--on-secondary-light));
-  --secondary-container: rgba(var(--secondary-container-light));
-  --on-secondary-container: rgba(var(--on-secondary-container-light));
-  --tertiary: rgba(var(--tertiary-light));
-  --on-tertiary: rgba(var(--on-tertiary-light));
-  --tertiary-container: rgba(var(--tertiary-container-light));
-  --on-tertiary-container: rgba(var(--on-tertiary-container-light));
-  --error: rgba(var(--error-light));
-  --error-container: rgba(var(--error-container-light));
-  --on-error: rgba(var(--on-error-light));
-  --on-error-container: rgba(var(--on-error-container-light));
-  --background: rgba(var(--background-light));
-  --on-background: rgba(var(--on-background-light));
-  --surface: rgba(var(--surface-light));
-  --on-surface: rgba(var(--on-surface-light));
-  --on-surface-2: rgba(var(--on-surface-light), 0.08);
-  --on-surface-4: rgba(var(--on-surface-light), 0.12);
-  --surface-variant: rgba(var(--surface-variant-light));
-  --on-surface-variant: rgba(var(--on-surface-variant-light));
-  --on-surface-variant-2: rgba(var(--on-surface-variant-light), 0.08);
-  --on-surface-variant-4: rgba(var(--on-surface-variant-light), 0.12);
-  --outline: rgba(var(--outline-light));
-  --inverse-on-surface: rgba(var(--inverse-on-surface-light));
-  --inverse-surface: rgba(var(--inverse-surface-light));
-  --inverse-primary: rgba(var(--inverse-primary-light));
-  --shadow: rgba(var(--shadow-light));
-  --surface-tint: rgba(var(--surface-tint-light));
-  --outline-variant: rgba(var(--outline-variant-light));
-  --scrim: rgba(var(--scrim-light));
-}

package/dist/css/theme/theme.scss

@@ -1,11 +0,0 @@
-@import "$css/theme/tokens.scss";
-@import "$css/theme/colors.module.scss";
-@import "$css/theme/palette.scss";
-@import "$css/theme/reset.scss";
-@import "$css/theme/bridge.scss";
-@import "$css/theme/typography.module.scss";
-@import "$css/theme/typography.scss";
-@import "$css/theme/elevate.scss";
-@import "$css/theme/theme.light.scss";
-@import "$css/theme/theme.dark.scss";
-@import "$css/theme/page.scss";