@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/css/index.scss

@@ -1,102 +1,23 @@
-@use "sass:map";
-@import "./theme/theme.scss";
-@import "./grid.scss";
-@import "./flex.scss";
+@layer theme, ripple, components, classes, disabled;
 
-$space-base: 16px !default;
-$space-x-base: $space-base !default;
-$space-y-base: $space-base !default;
-
-$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/separator";
-@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);
-    }
+@layer Quaff {
+  @layer theme {
+    @import "./theme/theme";
+  }
 
-    .q-m#{$posName}-#{$spaceName} {
-      @include margin($posName, $spaceName);
-    }
+  @layer ripple {
+    @import "ripple";
   }
 
-  @if $spaceName != "auto" {
-    .q-gap-#{$spaceName} {
-      gap: $spaceVal;
-    }
+  @layer components {
+    @import "components";
   }
-}
 
-.no-overflow {
-  overflow: hidden;
-}
-.scroll {
-  overflow: scroll;
-}
+  @layer classes {
+    @import "classes";
+  }
 
-.no-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  @layer disabled {
+    @import "disabled";
+  }
 }

package/dist/css/mixins/_design.scss

@@ -0,0 +1,63 @@
+@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 index($list: $position, $value: top) {
+    border-top: 0.0625rem solid $color;
+  }
+
+  @if index($list: $position, $value: right) {
+    border-right: 0.0625rem solid $color;
+  }
+
+  @if index($list: $position, $value: bottom) {
+    border-bottom: 0.0625rem solid $color;
+  }
+
+  @if 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-mixins.scss → _field.scss}

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @mixin reset-form-element {
   padding: 0px;
   background: none;
@@ -19,8 +21,8 @@
   );
 }
 
-@mixin border-substitute($variant: "outlined") {
-  $border-radius: if($variant == "outlined", 0.25rem, calc(var(--wrapper-height) / 2));
+@mixin border-substitute($variant: "outlined", $wrapper-height, $dense: false) {
+  $border-radius: if($variant == "outlined", 0.25rem, math.div($wrapper-height, 2));
 
   &::before,
   &::after {
@@ -28,8 +30,8 @@
     position: absolute;
     top: -0.0625rem;
     bottom: -0.0625rem;
-    width: calc(var(--wrapper-height) / 2);
-    height: var(--wrapper-height);
+    width: math.div($wrapper-height, 2);
+    height: $wrapper-height;
     border: 0.0625rem solid transparent;
     border-top-color: var(--decorator-color);
     border-radius: $border-radius;
@@ -41,7 +43,16 @@
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
     $clip-height: 0.25rem;
-    $clip-width: if($variant == "outlined", 0.9375rem, 0.3125rem);
+    $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);
   }
 

package/dist/css/mixins/_image.scss

@@ -0,0 +1,63 @@
+@use "$css/variables";
+
+@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 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,9 @@
+@import "design";
+@import "field";
+@import "image";
+@import "layout";
+@import "menu";
+@import "selection";
+@import "spaces";
+@import "table";
+@import "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/{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;
@@ -20,8 +23,8 @@
     }
 
     > input:is(:focus, :hover) + span::before {
-      background-color: var(--active);
-      box-shadow: 0 0 0 0.5rem var(--active);
+      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,
@@ -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 {

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/_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);
+}