@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

package/dist/css/index.scss

@@ -1,101 +1,21 @@
-@use "sass:map";
-@import "./theme/theme.scss";
-@import "./grid.scss";
-@import "./flex.scss";
+@use "sass:meta";
 
-$space-base: 16px !default;
-$space-x-base: $space-base !default;
-$space-y-base: $space-base !default;
+@layer theme, ripple, components, classes, disabled;
 
-$space-none: 0 !default;
-$space-xs: 0.25rem !default;
-$space-sm: 0.5rem !default;
-$space-md: 1rem !default;
-$space-lg: 1.5rem !default;
-$space-xl: 2rem !default;
-
-$spaces: (
-  "auto": auto,
-  "none": $space-none,
-  "xs": $space-xs,
-  "sm": $space-sm,
-  "md": $space-md,
-  "lg": $space-lg,
-  "xl": $space-xl,
-) !default;
-
-$positions: (
-  "t": -top,
-  "r": -right,
-  "b": -bottom,
-  "l": -left,
-  "x": -inline,
-  "y": -block,
-  "a": "",
-);
-
-@import "./theme/theme";
-@import "./mixins";
-@import "./grid";
-@import "./states";
-@import "./ripple";
-@import "$components/avatar";
-@import "$components/breadcrumbs";
-@import "$components/button";
-@import "$components/card";
-@import "$components/checkbox";
-@import "$components/chip";
-@import "$components/dialog";
-@import "$components/drawer";
-@import "$components/footer";
-@import "$components/icon";
-@import "$components/input";
-@import "$components/layout";
-@import "$components/list";
-@import "$components/progress";
-@import "$components/radio";
-@import "$components/railbar";
-@import "$components/select";
-@import "$components/table";
-@import "$components/tabs";
-@import "$components/toggle";
-@import "$components/toolbar";
-@import "$components/tooltip";
-
-html,
-body {
-  height: 100%;
-  width: 100%;
-}
-
-@each $spaceName, $spaceVal in $spaces {
-  @each $posName, $_ in $positions {
-    .q-p#{$posName}-#{$spaceName} {
-      @include padding($posName, $spaceName);
-    }
-
-    .q-m#{$posName}-#{$spaceName} {
-      @include margin($posName, $spaceName);
-    }
+@layer Quaff {
+  @layer theme {
+    @include meta.load-css("theme");
   }
 
-  @if $spaceName != "auto" {
-    .q-gap-#{$spaceName} {
-      gap: $spaceVal;
-    }
+  @layer ripple {
+    @include meta.load-css("ripple");
   }
-}
 
-.no-overflow {
-  overflow: hidden;
-}
-.scroll {
-  overflow: scroll;
-}
+  @layer components {
+    @include meta.load-css("components");
+  }
 
-.no-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  @layer classes {
+    @include meta.load-css("classes");
+  }
 }

package/dist/css/mixins/_design.scss

@@ -0,0 +1,64 @@
+@use "sass:list";
+@use "../variables";
+
+@mixin elevate($strength, $position: null) {
+  $coeff: 1;
+  @if $position == "top" {
+    $coeff: -1;
+  }
+  $elevate: 0.125rem * $strength;
+
+  box-shadow: 0 $elevate * $coeff $elevate 0 with-alpha(var(--shadow), calc(24% + (8% * $strength)));
+}
+
+@mixin border($color: var(--outline), $position: variables.$border-positions) {
+  @if list.index($list: $position, $value: top) {
+    border-top: 0.0625rem solid $color;
+  }
+
+  @if list.index($list: $position, $value: right) {
+    border-right: 0.0625rem solid $color;
+  }
+
+  @if list.index($list: $position, $value: bottom) {
+    border-bottom: 0.0625rem solid $color;
+  }
+
+  @if list.index($list: $position, $value: left) {
+    border-left: 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%);
+    }
+  }
+}
+
+@mixin overlay($color: null, $opacity: null) {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  border-radius: inherit;
+
+  background-color: $color;
+  opacity: $opacity;
+}
+
+@function with-alpha($color-variable: null, $percentage: null) {
+  @return color-mix(in srgb, $color-variable $percentage, transparent);
+}

package/dist/css/mixins/_field.scss

@@ -0,0 +1,64 @@
+@use "sass:math";
+
+@mixin reset-form-element {
+  padding: 0px;
+  background: none;
+  border: none;
+  border-radius: 0px;
+  outline: none;
+  appearance: none;
+  font-family: inherit;
+}
+
+@mixin clip-border($clip-width, $clip-height) {
+  clip-path: polygon(
+    0% 0%,
+    0% 100%,
+    100% 100%,
+    100% $clip-height,
+    calc(100% - #{$clip-width}) $clip-height,
+    calc(100% - #{$clip-width}) 0%
+  );
+}
+
+@mixin border-substitute($variant: "outlined", $wrapper-height, $dense: false) {
+  $border-radius: if($variant == "outlined", 0.25rem, math.div($wrapper-height, 2));
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    top: -0.0625rem;
+    bottom: -0.0625rem;
+    width: math.div($wrapper-height, 2);
+    height: $wrapper-height;
+    border: 0.0625rem solid transparent;
+    border-top-color: var(--decorator-color);
+    border-radius: $border-radius;
+    box-sizing: border-box;
+  }
+
+  &::before {
+    left: -0.0625rem;
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    $clip-height: 0.25rem;
+    $clip-width: if($variant == "outlined", 0.9375rem, 0.25rem);
+
+    @if $dense == true and $variant == "outlined" {
+      $clip-width: math.div($clip-width, 1.4);
+    }
+
+    @if $dense == true and $variant != "outlined" {
+      $clip-width: 0rem;
+    }
+
+    @include clip-border($clip-width, $clip-height);
+  }
+
+  &::after {
+    right: -0.0625rem;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+}

package/dist/css/mixins/_image.scss

@@ -0,0 +1,64 @@
+@use "$css/variables";
+@use "spaces";
+
+@mixin responsive($parent: null) {
+  object-fit: cover;
+  object-position: center;
+  transition:
+    variables.$speed3 transform,
+    variables.$speed3 border-radius,
+    variables.$speed3 padding;
+  width: 100%;
+  height: 100%;
+
+  @include spaces.margin("x-auto");
+
+  @if $parent != null {
+    width: 2.5rem;
+    border: 0.25rem solid transparent;
+  }
+}
+
+@mixin btn-image($parent: "btn") {
+  &.q-#{$parent}--sm > .q-#{$parent}__img--responsive {
+    height: 2rem;
+    width: 2rem;
+  }
+
+  &.q-#{$parent}--lg > .q-#{$parent}__img--responsive {
+    height: 3rem;
+    width: 3rem;
+  }
+
+  &.q-#{$parent}--xl > .q-#{$parent}__img--responsive {
+    height: 3.5rem;
+    width: 3.5rem;
+  }
+
+  & > .q-#{$parent}__img {
+    margin-inline: -0.5rem;
+  }
+
+  & > .q-#{$parent}__img:not(.q-#{$parent}__img--responsive) {
+    min-width: 1.5rem;
+    max-width: 1.5rem;
+    min-height: 1.5rem;
+    max-height: 1.5rem;
+  }
+
+  & > .q-#{$parent}__img.q-#{$parent}__img--responsive {
+    @include responsive($parent);
+
+    $marginSize: -1.5rem;
+    @if $parent == "chip" {
+      $marginSize: -1rem;
+    }
+
+    margin-left: $marginSize !important;
+
+    &.q-#{$parent}__img--trailing {
+      margin-left: -0.5rem;
+      margin-right: $marginSize;
+    }
+  }
+}

package/dist/css/mixins/_index.scss

@@ -0,0 +1,11 @@
+@forward "design";
+@forward "field";
+@forward "image";
+@forward "layout";
+@forward "menu";
+@forward "responsive";
+@forward "selection";
+@forward "spaces";
+@forward "table";
+@forward "toolbar";
+@forward "typography";

package/dist/css/mixins/_layout.scss

@@ -0,0 +1,20 @@
+@use "../variables";
+
+@mixin include-drawers($baseWidth, $pos, $el) {
+  // Left drawer
+  &.q-drawer--left ~ .q-#{$el} {
+    width: calc(#{$baseWidth} - #{variables.$left-drawer});
+  }
+
+  // Right drawer
+  &.q-drawer--right ~ .q-#{$el} {
+    width: calc(#{$baseWidth} - #{variables.$right-drawer});
+  }
+
+  // Left drawer + Right drawer
+  &.q-drawer--left
+    ~ .q-drawer--active.q-drawer--right:not(.q-drawer--offset-#{$pos}, .q-drawer--overlay)
+    ~ .q-#{$el} {
+    width: calc(#{$baseWidth} - #{variables.$left-right-drawer});
+  }
+}

package/dist/css/mixins/{menu.scss → _menu.scss}

@@ -1,3 +1,5 @@
+@use "$css/variables";
+
 @mixin menu {
   opacity: 0;
   visibility: hidden;
@@ -23,7 +25,7 @@
   border-radius: 0.25rem;
   transform: scale(0.8) translateY(120%);
   transition:
-    var(--speed2) all,
+    variables.$speed2 all,
     0s background-color;
 
   &--active {
@@ -46,7 +48,7 @@
   }
 
   > a:is(:hover, :focus, .active) {
-    background-color: var(--active);
+    background-color: var(--secondary-container);
   }
 
   &__dense {

package/dist/css/mixins/_responsive.scss

@@ -0,0 +1,56 @@
+@use "sass:map";
+@use "$css/variables";
+
+@mixin xs {
+  @media only screen and (max-width: #{map.get(variables.$breakpoints, sm) - 1px}) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media only screen and (min-width: #{map.get(variables.$breakpoints, sm)}) and (max-width: #{map.get(variables.$breakpoints, md) - 1px}) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media only screen and (min-width: #{map.get(variables.$breakpoints, md)}) and (max-width: #{map.get(variables.$breakpoints, lg) - 1px}) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media only screen and (min-width: #{map.get(variables.$breakpoints, lg)}) and (max-width: #{map.get(variables.$breakpoints, xl) - 1px}) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media only screen and (min-width: #{map.get(variables.$breakpoints, xl)}) {
+    @content;
+  }
+}
+
+@mixin up-to-sm {
+  @media only screen and (max-width: #{map.get(variables.$breakpoints, sm) - 1px}) {
+    @content;
+  }
+}
+
+@mixin up-to-md {
+  @media only screen and (max-width: #{map.get(variables.$breakpoints, md) - 1px}) {
+    @content;
+  }
+}
+
+@mixin up-to-lg {
+  @media only screen and (max-width: #{map.get(variables.$breakpoints, lg) - 1px}) {
+    @content;
+  }
+}
+
+@mixin up-to-xl {
+  @media only screen and (max-width: #{map.get(variables.$breakpoints, xl) - 1px}) {
+    @content;
+  }
+}

package/dist/css/mixins/{selection.scss → _selection.scss}

@@ -1,3 +1,6 @@
+@use "$css/mixins/design";
+@use "$css/variables";
+
 // type can be: checkbox, radio or switch
 @mixin selection($type) {
   width: auto;
@@ -19,12 +22,12 @@
       padding-left: 0.25rem;
     }
 
-    > input:is(:focus, :hover) + span::before {
-      background-color: var(--active);
-      box-shadow: 0 0 0 0.5rem var(--active);
+    > input:not(label[aria-disabled] > input):is(:focus, :hover) + span::before {
+      background-color: design.with-alpha(var(--primary), 10%);
+      box-shadow: 0 0 0 0.5rem design.with-alpha(var(--primary), 10%);
     }
 
-    > input:checked + span::before,
+    > input:not([aria-disabled], label[aria-disabled] > input):checked + span::before,
     &--icon > input:checked + span > i {
       color: var(--primary);
     }
@@ -68,71 +71,8 @@
     border-radius: 50%;
     user-select: none;
     z-index: 1;
-    box-shadow: 0 0 0 0 var(--active);
-    transition: var(--speed1) all;
-  }
-
-  @if $type == switch {
-    > input {
-      width: 3.25rem;
-      height: 2rem;
-      opacity: 0;
-    }
-
-    > span::before,
-    &--icon > span > i {
-      position: absolute;
-      left: 0;
-      top: 50%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      transition: var(--speed2) all;
-      font-size: 1rem;
-      user-select: none;
-      min-width: auto;
-      content: "";
-      color: var(--surface-variant);
-      background-color: var(--outline);
-      transform: translate(-3rem, -50%) scale(0.6);
-    }
-
-    &--icon > span > i {
-      transform: translate(-3rem, -50%) scale(1);
-    }
-
-    > input:is(:focus, :hover) + span::before,
-    &--icon > input:is(:focus, :hover) + span > i {
-      box-shadow: 0 0 0 0.5rem var(--active);
-    }
-
-    > input:checked + span::after {
-      border: none;
-      background-color: var(--primary);
-    }
-
-    > input:checked + span::before,
-    &--icon > input:checked + span > i {
-      content: "check";
-      color: var(--primary);
-      background-color: var(--on-primary);
-      transform: translate(-1.75rem, -50%) scale(1);
-    }
-
-    > span::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 50%;
-      background-color: var(--active);
-      border: 0.125rem solid var(--outline);
-      box-sizing: border-box;
-      width: 3.25rem;
-      height: 2rem;
-      border-radius: 2rem;
-      transform: translate(-3.25rem, -50%);
-    }
+    box-shadow: 0 0 0 0 design.with-alpha(var(--primary), 10%);
+    transition: variables.$speed1 all;
   }
 
   @if $type == checkbox {
@@ -178,7 +118,7 @@
     cursor: not-allowed;
   }
 
-  & + & {
+  & + &:not(.column > &) {
     margin-left: 0.5rem;
   }
 }

package/dist/css/mixins/_spaces.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "sass:string";
+@use "../variables";
+
+@mixin space($type: null, $spaces...) {
+  @each $space in $spaces {
+    $pos: string.slice($space, 1, 1);
+    @if not map.has-key(variables.$positions, $pos) {
+      @error "Position error for #{$type}, \"#{$pos}\" is not a valid position. Should be one of a, x, y, t, r, b or l";
+    }
+    $pos: map.get(variables.$positions, $pos);
+
+    $spacing: string.slice($space, 3);
+    @if not map.has-key(variables.$spaces, $spacing) {
+      @error "Spacing error for #{$type}, \"#{$space}\" is not a valid spacing. Should be one of auto, none, xs, sm, md, lg or xl";
+    }
+    $spacing: map.get(variables.$spaces, $spacing);
+
+    #{$type}#{$pos}: $spacing;
+  }
+}
+
+@mixin padding($paddings...) {
+  @include space("padding", $paddings...);
+}
+
+@mixin margin($margins...) {
+  @include space("margin", $margins...);
+}
+
+@mixin gap($space: "sm") {
+  @if not map.has-key(variables.$spaces, $space) {
+    @error "Spacing error for gap, \"#{$space}\" is not a valid spacing. Should be one of auto, none, xs, sm, md, lg or xl";
+  }
+  gap: map.get(variables.$spaces, $space);
+}

package/dist/css/mixins/_toolbar.scss

@@ -0,0 +1,7 @@
+@mixin toolbarDisplay() {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+}

package/dist/css/mixins/_typography.scss

@@ -0,0 +1,7 @@
+@mixin typography($name: null) {
+  font-family: var(--typescale-#{$name}-font-family-name);
+  font-weight: var(--typescale-#{$name}-font-weight);
+  font-size: var(--typescale-#{$name}-font-size);
+  line-height: var(--typescale-#{$name}-line-height);
+  letter-spacing: var(--typescale-#{$name}-letter-spacing);
+}