diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml index 3153f40..b825556 100644 --- a/.github/workflows/check.yml +++ b/.github/workflows/check.yml @@ -24,5 +24,4 @@ jobs: with: node-version: ${{ matrix.node-version }} - run: npm ci - - run: npx @ryanatkn/gro check --workspace - - run: npx @ryanatkn/gro build + - run: npx @ryanatkn/gro check --workspace --build diff --git a/package-lock.json b/package-lock.json index cedd7b7..e26eefd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,21 +8,21 @@ "name": "fuz.dev", "version": "0.0.1", "devDependencies": { - "@fuzdev/fuz_css": "^0.44.1", - "@fuzdev/fuz_ui": "^0.179.0", - "@fuzdev/fuz_util": "^0.45.3", + "@fuzdev/fuz_css": "^0.45.0", + "@fuzdev/fuz_ui": "^0.180.0", + "@fuzdev/fuz_util": "^0.48.2", "@ryanatkn/eslint-config": "^0.9.0", - "@ryanatkn/gro": "^0.186.0", + "@ryanatkn/gro": "^0.189.3", "@sveltejs/adapter-static": "^3.0.10", - "@sveltejs/kit": "^2.49.1", - "@sveltejs/vite-plugin-svelte": "^6.2.1", + "@sveltejs/kit": "^2.50.1", + "@sveltejs/vite-plugin-svelte": "^6.2.4", "@webref/css": "^8.2.0", "eslint": "^9.39.1", "eslint-plugin-svelte": "^3.13.1", "prettier": "^3.7.4", "prettier-plugin-svelte": "^3.4.1", - "svelte": "^5.45.6", - "svelte-check": "^4.3.4", + "svelte": "^5.48.5", + "svelte-check": "^4.3.5", "tslib": "^2.8.1", "typescript": "^5.9.3", "typescript-eslint": "^8.48.1", @@ -692,9 +692,9 @@ } }, "node_modules/@fuzdev/fuz_css": { - "version": "0.44.1", - "resolved": "https://registry.npmjs.org/@fuzdev/fuz_css/-/fuz_css-0.44.1.tgz", - "integrity": "sha512-WZ+Tws9/QeRx1FH+oSY6ZIZJ8PAnvfMMuzXXG27+YY+/Yj06mGdQRX8ct4ANp9l2Ll1sJJkA6NnVvQsIfbL9dw==", + "version": "0.45.0", + "resolved": "https://registry.npmjs.org/@fuzdev/fuz_css/-/fuz_css-0.45.0.tgz", + "integrity": "sha512-gCRJmJth8WvM45mYs6TuwrXrZWKOv7cb6ZYPjVGfF2fe3xD8mG5C5+FkGaCjkv6MuDBpveampGppJyZC4Hdgzg==", "dev": true, "license": "MIT", "engines": { @@ -708,7 +708,8 @@ "@sveltejs/acorn-typescript": "^1", "@webref/css": "^8", "acorn-jsx": "^5", - "zimmerframe": "^1" + "zimmerframe": "^1", + "zod": "^4" }, "peerDependenciesMeta": { "@fuzdev/fuz_util": { @@ -725,13 +726,16 @@ }, "zimmerframe": { "optional": true + }, + "zod": { + "optional": true } } }, "node_modules/@fuzdev/fuz_ui": { - "version": "0.179.0", - "resolved": "https://registry.npmjs.org/@fuzdev/fuz_ui/-/fuz_ui-0.179.0.tgz", - "integrity": "sha512-ByvnywCtiVsQ0xEOvMqGx5Ndby16wSuaf0N0/QAY0nb2Kmlcg5OmzqkQF4exjWAScmyr6z2uwB6HuN45MLrr+A==", + "version": "0.180.0", + "resolved": "https://registry.npmjs.org/@fuzdev/fuz_ui/-/fuz_ui-0.180.0.tgz", + "integrity": "sha512-JzA8UdS2c7z2U9L0YvZ+VGHzKOmAYMMQLbaMVOuw4KrIRWAthVobWXZilOTEj9doIdg0YAbaN3OXzgGVJ1VJjQ==", "dev": true, "license": "MIT", "engines": { @@ -768,9 +772,9 @@ } }, "node_modules/@fuzdev/fuz_util": { - "version": "0.45.3", - "resolved": "https://registry.npmjs.org/@fuzdev/fuz_util/-/fuz_util-0.45.3.tgz", - "integrity": "sha512-N0xaUwFxGG1FuEkcVqB4t8Gqs2ReCVmmQf1kI7gErGuyKV9mRycHSFWFyT7/hQ9K4/0epsZj4cejj5fYIjkG/Q==", + "version": "0.48.2", + "resolved": "https://registry.npmjs.org/@fuzdev/fuz_util/-/fuz_util-0.48.2.tgz", + "integrity": "sha512-xrgKZ3VrN5K5BC0qlSVvO3gMrmKspsiLi7I9SnzsCqIUAgl6ejb91Qb5MJ2XW5EzQRDIoZjNCVWNpDoqgToPog==", "dev": true, "license": "MIT", "engines": { @@ -1517,16 +1521,15 @@ } }, "node_modules/@ryanatkn/gro": { - "version": "0.186.0", - "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.186.0.tgz", - "integrity": "sha512-Yq/KtVKUpcYarJ9Xuh7OGJoDf9OYCZtRAeVSgIfv54gt2O13J+TMDp9ESnXc5Ohfs4t2QvyCeEmLEL0mW6PSpQ==", + "version": "0.189.3", + "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.189.3.tgz", + "integrity": "sha512-E+vPZX2OwEFk1j9VEtI+mKACQDJHtkvxo/HJQyEOUE2K1YRPIGb5b8oU8ysnQSXcJl3DiWs8mgwd302VuRoM8A==", "dev": true, "license": "MIT", "dependencies": { "chokidar": "^5.0.0", "dotenv": "^17.2.3", "esm-env": "^1.2.2", - "mri": "^1.2.0", "oxc-parser": "^0.99.0", "prettier": "^3.7.4", "prettier-plugin-svelte": "^3.4.1", @@ -1547,7 +1550,7 @@ "vitest": "^3 || ^4" }, "peerDependencies": { - "@fuzdev/fuz_util": ">=0.45.3", + "@fuzdev/fuz_util": ">=0.48.0", "@sveltejs/kit": "^2", "esbuild": "^0.27.0", "svelte": "^5", @@ -1591,9 +1594,9 @@ } }, "node_modules/@sveltejs/kit": { - "version": "2.49.1", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.49.1.tgz", - "integrity": "sha512-vByReCTTdlNM80vva8alAQC80HcOiHLkd8XAxIiKghKSHcqeNfyhp3VsYAV8VSiPKu4Jc8wWCfsZNAIvd1uCqA==", + "version": "2.50.1", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.50.1.tgz", + "integrity": "sha512-XRHD2i3zC4ukhz2iCQzO4mbsts081PAZnnMAQ7LNpWeYgeBmwMsalf0FGSwhFXBbtr2XViPKnFJBDCckWqrsLw==", "dev": true, "license": "MIT", "dependencies": { @@ -1602,7 +1605,7 @@ "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", - "devalue": "^5.3.2", + "devalue": "^5.6.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", @@ -1621,25 +1624,29 @@ "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", + "typescript": "^5.3.3", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "peerDependenciesMeta": { "@opentelemetry/api": { "optional": true + }, + "typescript": { + "optional": true } } }, "node_modules/@sveltejs/vite-plugin-svelte": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.1.tgz", - "integrity": "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ==", + "version": "6.2.4", + "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.4.tgz", + "integrity": "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==", "dev": true, "license": "MIT", "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", - "debug": "^4.4.1", "deepmerge": "^4.3.1", - "magic-string": "^0.30.17", + "magic-string": "^0.30.21", + "obug": "^2.1.0", "vitefu": "^1.1.1" }, "engines": { @@ -2394,9 +2401,9 @@ } }, "node_modules/devalue": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.5.0.tgz", - "integrity": "sha512-69sM5yrHfFLJt0AZ9QqZXGCPfJ7fQjvpln3Rq5+PS03LD32Ost1Q9N+eEnaQwGRIriKkMImXD56ocjQmfjbV3w==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.2.tgz", + "integrity": "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==", "dev": true, "license": "MIT" }, @@ -3666,9 +3673,9 @@ } }, "node_modules/svelte": { - "version": "5.45.6", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.45.6.tgz", - "integrity": "sha512-V3aVXthzPyPt1UB1wLEoXnEXpwPsvs7NHrR0xkCor8c11v71VqBj477MClqPZYyrcXrAH21sNGhOj9FJvSwXfQ==", + "version": "5.48.5", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.48.5.tgz", + "integrity": "sha512-NB3o70OxfmnE5UPyLr8uH3IV02Q43qJVAuWigYmsSOYsS0s/rHxP0TF81blG0onF/xkhNvZw4G8NfzIX+By5ZQ==", "dev": true, "license": "MIT", "dependencies": { @@ -3680,7 +3687,7 @@ "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", - "devalue": "^5.5.0", + "devalue": "^5.6.2", "esm-env": "^1.2.1", "esrap": "^2.2.1", "is-reference": "^3.0.3", @@ -3693,9 +3700,9 @@ } }, "node_modules/svelte-check": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.4.tgz", - "integrity": "sha512-DVWvxhBrDsd+0hHWKfjP99lsSXASeOhHJYyuKOFYJcP7ThfSCKgjVarE8XfuMWpS5JV3AlDf+iK1YGGo2TACdw==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.5.tgz", + "integrity": "sha512-e4VWZETyXaKGhpkxOXP+B/d0Fp/zKViZoJmneZWe/05Y2aqSKj3YN2nLfYPJBQ87WEiY4BQCQ9hWGu9mPT1a1Q==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 12d4ca8..a29ce4e 100644 --- a/package.json +++ b/package.json @@ -22,21 +22,21 @@ "node": ">=22.15" }, "devDependencies": { - "@fuzdev/fuz_css": "^0.44.1", - "@fuzdev/fuz_ui": "^0.179.0", - "@fuzdev/fuz_util": "^0.45.3", + "@fuzdev/fuz_css": "^0.45.0", + "@fuzdev/fuz_ui": "^0.180.0", + "@fuzdev/fuz_util": "^0.48.2", "@ryanatkn/eslint-config": "^0.9.0", - "@ryanatkn/gro": "^0.186.0", + "@ryanatkn/gro": "^0.189.3", "@sveltejs/adapter-static": "^3.0.10", - "@sveltejs/kit": "^2.49.1", - "@sveltejs/vite-plugin-svelte": "^6.2.1", + "@sveltejs/kit": "^2.50.1", + "@sveltejs/vite-plugin-svelte": "^6.2.4", "@webref/css": "^8.2.0", "eslint": "^9.39.1", "eslint-plugin-svelte": "^3.13.1", "prettier": "^3.7.4", "prettier-plugin-svelte": "^3.4.1", - "svelte": "^5.45.6", - "svelte-check": "^4.3.4", + "svelte": "^5.48.5", + "svelte-check": "^4.3.5", "tslib": "^2.8.1", "typescript": "^5.9.3", "typescript-eslint": "^8.48.1", diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1235df9..ca1cc4f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -15,9 +15,11 @@

fuz

-
friendly user zystem 🦋
+
+ friendly user zystem 🦋 +
-
+

Fuz is a zippy stack for autonomy. Today Fuz has a collection of libraries for making modern websites with TypeScript, CSS, Svelte, and SvelteKit, and soon they'll be joined diff --git a/src/routes/fuz.css b/src/routes/fuz.css index 1f8369c..4241d35 100644 --- a/src/routes/fuz.css +++ b/src/routes/fuz.css @@ -13,23 +13,23 @@ align-items: center; } .selectable { - --button_fill: color-mix(in hsl, var(--fill) 8%, transparent); - --button_fill_hover: color-mix(in hsl, var(--fill) 16%, transparent); - --button_fill_active: color-mix(in hsl, var(--fill) 24%, transparent); + --button_fill: color-mix(in hsl, var(--shade_50) 8%, transparent); + --button_fill_hover: color-mix(in hsl, var(--shade_50) 16%, transparent); + --button_fill_active: color-mix(in hsl, var(--shade_50) 24%, transparent); cursor: pointer; background-color: var(--button_fill); - border-color: var(--border_color_3); + border-color: var(--border_color_30); border-style: var(--border_style); border-width: var(--border_width); } .selectable:hover { background-color: var(--button_fill_hover); - border-color: var(--border_color_2); + border-color: var(--border_color_20); } .selectable.selected, .selectable:active { background-color: var(--button_fill_active); - border-color: var(--color_a_5); + border-color: var(--color_a_50); } .selectable.selected { cursor: default; @@ -39,18 +39,22 @@ } /* A pane is a box floating over the page, like for dialogs. By default it's opaque, resetting the background to the initial depth. */ .pane { - background-color: var(--pane_bg, var(--bg)); + background-color: var(--shade_00); box-shadow: var( --pane_shadow, var(--shadow_bottom_md) - color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_3), transparent) + color-mix( + in hsl, + var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha_50), + transparent + ) ); border-radius: var(--border_radius_xs); } /* A panel is a box embedded into the page, useful for visually isolating content. */ .panel { border-radius: var(--border_radius_xs); - background-color: var(--panel_bg, var(--fg_1)); + background-color: var(--fg_10); } /* TODO maybe this belongs with the reset, like `selected`? or does `selected` belong here? */ .plain:not(:hover) { @@ -64,7 +68,7 @@ } .menu_item { --border_radius: 0; - --border_color: var(--border_color_3); + --border_color: var(--border_color_30); position: relative; z-index: 2; cursor: pointer; @@ -76,9 +80,9 @@ padding: var(--menu_item_padding, var(--space_xs3) var(--space_xs)); } .menu_item.selected { - /* TODO different patterns for border and bg? */ - --border_color: var(--color_a_5); - background-color: var(--fg_1); + /* TODO different patterns for border and surface? */ + --border_color: var(--color_a_50); + background-color: var(--fg_10); z-index: 1; cursor: default; } @@ -86,13 +90,13 @@ cursor: pointer; } .menu_item:hover { - --border_color: var(--border_color_3); - background-color: var(--fg_0); + --border_color: var(--border_color_30); + background-color: var(--fg_10); } .menu_item:active, .menu_item.selected:hover { - --border_color: var(--border_color_3); - background-color: var(--fg_2); + --border_color: var(--border_color_30); + background-color: var(--fg_20); } .menu_item.plain { border: none; @@ -123,12 +127,52 @@ font-weight: 500; padding-left: var(--space_xs); padding-right: var(--space_xs); - background-color: var(--fg_1); + background-color: var(--fg_10); border-radius: var(--border_radius_xs); } a.chip { font-weight: 600; } +.chip.color_a { + color: var(--color_a_50); + background-color: var(--color_a_10); +} +.chip.color_b { + color: var(--color_b_50); + background-color: var(--color_b_10); +} +.chip.color_c { + color: var(--color_c_50); + background-color: var(--color_c_10); +} +.chip.color_d { + color: var(--color_d_50); + background-color: var(--color_d_10); +} +.chip.color_e { + color: var(--color_e_50); + background-color: var(--color_e_10); +} +.chip.color_f { + color: var(--color_f_50); + background-color: var(--color_f_10); +} +.chip.color_g { + color: var(--color_g_50); + background-color: var(--color_g_10); +} +.chip.color_h { + color: var(--color_h_50); + background-color: var(--color_h_10); +} +.chip.color_i { + color: var(--color_i_50); + background-color: var(--color_i_10); +} +.chip.color_j { + color: var(--color_j_50); + background-color: var(--color_j_10); +} .font_size_md { font-size: var(--font_size_md); --font_size: var(--font_size_md); @@ -145,50 +189,71 @@ a.chip { font-size: var(--font_size_xl5); --font_size: var(--font_size_xl5); } -.text_color_3 { - color: var(--text_color_3); +.text_70 { + color: var(--text_70); + --text_color: var(--text_70); } -.bg { - background-color: var(--bg); +.shade_00 { + background-color: var(--shade_00); } -.color_a_5 { - color: var(--color_a_5); +.color_a_50 { + color: var(--color_a_50); + --text_color: var(--color_a_50); } -.color_b_5 { - color: var(--color_b_5); +.color_b_50 { + color: var(--color_b_50); + --text_color: var(--color_b_50); } -.color_c_5 { - color: var(--color_c_5); +.color_c_50 { + color: var(--color_c_50); + --text_color: var(--color_c_50); } -.color_d_5 { - color: var(--color_d_5); +.color_d_50 { + color: var(--color_d_50); + --text_color: var(--color_d_50); } -.color_e_5 { - color: var(--color_e_5); +.color_e_50 { + color: var(--color_e_50); + --text_color: var(--color_e_50); } -.color_f_5 { - color: var(--color_f_5); +.color_f_50 { + color: var(--color_f_50); + --text_color: var(--color_f_50); } -.color_g_5 { - color: var(--color_g_5); +.color_g_50 { + color: var(--color_g_50); + --text_color: var(--color_g_50); } -.color_h_5 { - color: var(--color_h_5); +.color_h_50 { + color: var(--color_h_50); + --text_color: var(--color_h_50); } .border_radius_sm { border-radius: var(--border_radius_sm); } .shadow_md { box-shadow: var(--shadow_md) - color-mix(in hsl, var(--shadow_color) var(--shadow_alpha, var(--shadow_alpha_3)), transparent); + color-mix( + in hsl, + var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_50)), + transparent + ); } .shadow_bottom_sm { box-shadow: var(--shadow_bottom_sm) - color-mix(in hsl, var(--shadow_color) var(--shadow_alpha, var(--shadow_alpha_2)), transparent); + color-mix( + in hsl, + var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_40)), + transparent + ); } .shadow_inset_xs { box-shadow: var(--shadow_inset_xs) - color-mix(in hsl, var(--shadow_color) var(--shadow_alpha, var(--shadow_alpha_1)), transparent); + color-mix( + in hsl, + var(--shadow_color, var(--shadow_color_umbra)) var(--shadow_alpha, var(--shadow_alpha_30)), + transparent + ); } .width_atmost_sm { width: 100%; diff --git a/src/routes/library.json b/src/routes/library.json index 8a9387a..e2fd4d3 100644 --- a/src/routes/library.json +++ b/src/routes/library.json @@ -33,21 +33,21 @@ "node": ">=22.15" }, "devDependencies": { - "@fuzdev/fuz_css": "^0.44.1", - "@fuzdev/fuz_ui": "^0.179.0", - "@fuzdev/fuz_util": "^0.45.3", + "@fuzdev/fuz_css": "^0.45.0", + "@fuzdev/fuz_ui": "^0.180.0", + "@fuzdev/fuz_util": "^0.48.2", "@ryanatkn/eslint-config": "^0.9.0", - "@ryanatkn/gro": "^0.186.0", + "@ryanatkn/gro": "^0.189.3", "@sveltejs/adapter-static": "^3.0.10", - "@sveltejs/kit": "^2.49.1", - "@sveltejs/vite-plugin-svelte": "^6.2.1", + "@sveltejs/kit": "^2.50.1", + "@sveltejs/vite-plugin-svelte": "^6.2.4", "@webref/css": "^8.2.0", "eslint": "^9.39.1", "eslint-plugin-svelte": "^3.13.1", "prettier": "^3.7.4", "prettier-plugin-svelte": "^3.4.1", - "svelte": "^5.45.6", - "svelte-check": "^4.3.4", + "svelte": "^5.48.5", + "svelte-check": "^4.3.5", "tslib": "^2.8.1", "typescript": "^5.9.3", "typescript-eslint": "^8.48.1",