@quaffui/quaff 0.1.0-prealpha20 → 0.1.0-prealpha22

package/dist/css/mixins/_design.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @use "../variables";
 
 @mixin elevate($strength, $position: null) {
@@ -11,19 +12,19 @@
 }
 
 @mixin border($color: var(--outline), $position: variables.$border-positions) {
-  @if index($list: $position, $value: top) {
+  @if list.index($list: $position, $value: top) {
     border-top: 0.0625rem solid $color;
   }
 
-  @if index($list: $position, $value: right) {
+  @if list.index($list: $position, $value: right) {
     border-right: 0.0625rem solid $color;
   }
 
-  @if index($list: $position, $value: bottom) {
+  @if list.index($list: $position, $value: bottom) {
     border-bottom: 0.0625rem solid $color;
   }
 
-  @if index($list: $position, $value: left) {
+  @if list.index($list: $position, $value: left) {
     border-left: 0.0625rem solid $color;
   }
 }

package/dist/css/mixins/_image.scss

@@ -1,4 +1,5 @@
 @use "$css/variables";
+@use "spaces";
 
 @mixin responsive($parent: null) {
   object-fit: cover;
@@ -10,7 +11,7 @@
   width: 100%;
   height: 100%;
 
-  @include margin("x-auto");
+  @include spaces.margin("x-auto");
 
   @if $parent != null {
     width: 2.5rem;

package/dist/css/mixins/_index.scss

@@ -1,9 +1,9 @@
-@import "design";
-@import "field";
-@import "image";
-@import "layout";
-@import "menu";
-@import "selection";
-@import "spaces";
-@import "table";
-@import "typography";
+@forward "design";
+@forward "field";
+@forward "image";
+@forward "layout";
+@forward "menu";
+@forward "selection";
+@forward "spaces";
+@forward "table";
+@forward "typography";

package/dist/css/theme/_index.scss

@@ -0,0 +1,12 @@
+@forward "reset";
+@forward "css-variables";
+@forward "page";
+@forward "elevate";
+
+@forward "colors";
+@forward "color-classes";
+@forward "palette";
+
+@forward "typography";
+@forward "typography-classes";
+@forward "typography-variables";

package/dist/css/theme/_page.scss

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

package/dist/css/theme/{palette.scss → _palette.scss}

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 $red6: #f44336;
 
 $red1: #ffebee;
@@ -611,8 +613,8 @@ $colors-list: (
 
 :root {
   @each $color-name, $color-values in $colors-list {
-    @for $i from 1 through length($color-values) {
-      $color: nth($color-values, $i);
+    @for $i from 1 through list.length($color-values) {
+      $color: list.nth($color-values, $i);
       $var-name: "--color-#{$color-name}-#{$i}";
       #{$var-name}: $color;
 
@@ -625,7 +627,7 @@ $colors-list: (
 }
 
 @each $color-name, $color-values in $colors-list {
-  @for $i from 1 through length($color-values) {
+  @for $i from 1 through list.length($color-values) {
     $var-name: "--color-#{$color-name}-#{$i}";
     $text-selector: ".text-#{$color-name}-#{$i}";
     $bg-selector: ".bg-#{$color-name}-#{$i}";

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha20";
+declare const _default: "0.1.0-prealpha22";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha20";
+export default "0.1.0-prealpha22";

package/dist/utils/types.json

@@ -2,8 +2,8 @@
   "QAvatarShapeOptions": "type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"",
   "QAvatarSizeOptions": "type QAvatarSizeOptions = Q.Size | Q.CssValue | number",
   "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = Exclude<Q.Size, \"xs\" | \"xl\">",
-  "QBtnDesignOptions": "type QBtnDesignOptions = \"elevated\" | \"filled\" | \"tonal\" | \"outlined\" | \"flat\"",
   "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<Q.Size, \"xs\">",
+  "QBtnVariantOptions": "type QBtnVariantOptions = \"elevated\" | \"filled\" | \"tonal\" | \"outlined\" | \"flat\"",
   "QCardFillColors": "type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"",
   "QChipFillOptions": "type QChipFillOptions =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"neutral\"\n  | \"neutral-variant\"\n  | \"error\"",
   "QChipKindOptions": "type QChipKindOptions = \"assist\" | \"filter\" | \"input\" | \"suggestion\"",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha20",
+  "version": "0.1.0-prealpha22",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
@@ -13,7 +13,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
     "lint": "prettier --plugin prettier-plugin-svelte . --check . && eslint .",
-    "format": "prettier --plugin prettier-plugin-svelte . --write .",
+    "format": "prettier --plugin prettier-plugin-svelte . --write . && eslint . --fix",
     "docgen-props": "bun scripts/docgenProps.ts",
     "colorgen": "bun scripts/colorgen.ts",
     "docgen-snippets": "bun scripts/docgenSnippets.ts",
@@ -32,43 +32,44 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "shiki": "^1.23.0"
   },
   "devDependencies": {
     "@fontsource/roboto": "^5.1.0",
-    "@material/material-color-utilities": "^0.3.0",
-    "@sveltejs/adapter-auto": "^3.2.5",
-    "@sveltejs/kit": "^2.5.28",
-    "@sveltejs/package": "^2.3.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
-    "@types/bun": "^1.1.11",
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.8.2",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "@types/prettier": "^3.0.0",
-    "@types/prismjs": "^1.26.4",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
-    "eslint": "^9.11.1",
+    "@types/prismjs": "^1.26.5",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "bun-types": "^1.1.36",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import-x": "^4.3.0",
-    "eslint-plugin-svelte": "^2.44.0",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-import-x": "^4.4.3",
+    "eslint-plugin-svelte": "^2.46.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "estree-walker": "^3.0.3",
-    "globals": "^15.9.0",
-    "magic-string": "^0.30.11",
-    "material-symbols": "^0.23.0",
+    "globals": "^15.12.0",
+    "magic-string": "^0.30.13",
+    "material-symbols": "^0.27.1",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "publint": "^0.2.11",
-    "sass": "^1.79.3",
-    "shiki": "^1.21.0",
-    "svelte": "5.0.0-next.257",
-    "svelte-check": "^4.0.3",
-    "svelte-eslint-parser": "^0.41.1",
-    "tslib": "^2.7.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.7",
-    "vitest": "^2.1.1"
+    "prettier-plugin-svelte": "^3.3.2",
+    "publint": "^0.2.12",
+    "sass": "^1.81.0",
+    "svelte": "^5.2.7",
+    "svelte-check": "^4.1.0",
+    "svelte-eslint-parser": "^0.43.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.5"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@material/material-color-utilities": "^0.3.0"
+  }
 }

package/dist/css/flex.scss

@@ -1,41 +0,0 @@
-.flex {
-  display: flex !important;
-  flex-wrap: wrap;
-}
-
-.column {
-  flex-direction: column;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
-.flex-center {
-  @extend .items-center;
-  @extend .justify-center;
-}

package/dist/css/theme/page.scss

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

package/dist/css/theme/theme.scss

@@ -1,10 +0,0 @@
-@import "$css/theme/colors";
-@import "$css/theme/tokens.scss";
-@import "$css/theme/colors.module.scss";
-@import "$css/theme/palette.scss";
-@import "$css/theme/reset.scss";
-@import "$css/theme/css-variables.scss";
-@import "$css/theme/typography.module.scss";
-@import "$css/theme/typography.scss";
-@import "$css/theme/elevate.scss";
-@import "$css/theme/page.scss";