+
+
diff --git a/src/routes/CodeTome.svelte b/src/routes/CodeTome.svelte
index edbed664..d9e6a43c 100644
--- a/src/routes/CodeTome.svelte
+++ b/src/routes/CodeTome.svelte
@@ -41,7 +41,7 @@ import '@fuzdev/fuz_code/theme.css'; // add this"
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 5dd36089..b349b1d1 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -8,15 +8,15 @@
const library = library_context.get();
-
+
{library.package_json.glyph}
-
-
Dependencies
- By default fuz_code depends on Fuz CSS to provide
+ By default fuz_code depends on fuz_css to provide
color-schema-aware color variables. If you're not using it, import
theme_variables.css or bring your own:
{library.repo_name}
+
+
diff --git a/src/routes/benchmark/+page.svelte b/src/routes/benchmark/+page.svelte
index 21fb82d2..d8efbb3b 100644
--- a/src/routes/benchmark/+page.svelte
+++ b/src/routes/benchmark/+page.svelte
@@ -81,10 +81,10 @@
};
-
+
diff --git a/src/routes/fuz.css b/src/routes/fuz.css
index eecaa019..9dd85384 100644
--- a/src/routes/fuz.css
+++ b/src/routes/fuz.css
@@ -6,58 +6,38 @@
align-items: center;
justify-content: center;
}
-
/* can be used to override the direction of a `.box` */
.row {
display: flex;
flex-direction: row;
align-items: center;
}
-
.ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
-.width_upto_sm {
- width: 100%;
- max-width: var(--distance_sm);
-}
-
-.width_upto_md {
- width: 100%;
- max-width: var(--distance_md);
-}
-
-.width_upto_lg {
- width: 100%;
- max-width: var(--distance_lg);
-}
-
-/* A pane is a box floating over the page, like for dialogs.
- By default it's opaque, resetting the background to the initial depth. */
+/* 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));
box-shadow: var(
--pane_shadow,
- /* TODO this is terrible, maybe add all the variables? should be culled anyway? */
var(--shadow_bottom_md)
color-mix(in hsl, var(--shadow_color) var(--shadow_alpha_3), 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));
}
-
-/* TODO other button variants? */
-/* TODO this is slightly strange that it doesn't use --icon_size */
-/* These are used as modifiers to buttons, and so they use `:where` so they cascade. */
+/*
+TODO other button variants?
+TODO this is slightly strange that it doesn't use --icon_size.
+These are used as modifiers to buttons.
+*/
.icon_button {
width: var(--input_height);
height: var(--input_height);
@@ -68,7 +48,6 @@
font-weight: 900;
padding: 0;
}
-
/* TODO maybe this belongs with the reset, like `selected`? or does `selected` belong here? */
.plain:not(:hover) {
--border_color: transparent;
@@ -79,7 +58,6 @@
.plain:active {
--border_color: transparent;
}
-
.menu_item {
--border_radius: 0;
--border_color: var(--border_color_3);
@@ -137,7 +115,6 @@
text-overflow: ellipsis;
line-height: var(--line_height_lg); /* prevents the bottom of g's and others from being cut off */
}
-
.chip {
font-weight: 500;
padding-left: var(--space_xs);
@@ -148,37 +125,6 @@
a.chip {
font-weight: 600;
}
-
-.position_relative {
- position: relative;
-}
-.position_absolute {
- position: absolute;
-}
-.position_sticky {
- position: sticky;
-}
-.display_block {
- display: block;
-}
-.display_inline_block {
- display: inline-block;
-}
-.display_flex {
- display: flex;
-}
-.flex_1 {
- flex: 1;
-}
-.flex_wrap_wrap {
- flex-wrap: wrap;
-}
-.justify_content_center {
- justify-content: center;
-}
-.justify_content_space_between {
- justify-content: space-between;
-}
.font_size_sm {
font-size: var(--font_size_sm);
--font_size: var(--font_size_sm);
@@ -199,18 +145,6 @@ a.chip {
font-size: var(--font_size_xl2);
--font_size: var(--font_size_xl2);
}
-.text_align_center {
- text-align: center;
-}
-.word_break_break_all {
- word-break: break-all;
-}
-.white_space_pre {
- white-space: pre;
-}
-.white_space_pre_wrap {
- white-space: pre-wrap;
-}
.text_color_3 {
color: var(--text_color_3);
}
@@ -255,17 +189,17 @@ a.chip {
box-shadow: var(--shadow_inset_xs)
color-mix(in hsl, var(--shadow_color) var(--shadow_alpha, var(--shadow_alpha_1)), transparent);
}
-.width_100 {
+.width_atmost_sm {
width: 100%;
+ max-width: var(--distance_sm);
}
-.height_100 {
- height: 100%;
-}
-.top_0 {
- top: 0;
+.width_atmost_md {
+ width: 100%;
+ max-width: var(--distance_md);
}
-.right_0 {
- right: 0;
+.width_atmost_lg {
+ width: 100%;
+ max-width: var(--distance_lg);
}
.p_md {
padding: var(--space_md);
@@ -383,13 +317,62 @@ a.chip {
.gap_xl3 {
gap: var(--space_xl3);
}
-.font_weight_400 {
+.display\:block {
+ display: block;
+}
+.display\:flex {
+ display: flex;
+}
+.flex-wrap\:wrap {
+ flex-wrap: wrap;
+}
+.flex\:1 {
+ flex: 1;
+}
+.font-weight\:400 {
font-weight: 400;
- --font_weight: 400;
}
-.font_weight_500 {
+.font-weight\:500 {
font-weight: 500;
- --font_weight: 500;
+}
+.height\:100\% {
+ height: 100%;
+}
+.justify-content\:center {
+ justify-content: center;
+}
+.justify-content\:space-between {
+ justify-content: space-between;
+}
+.position\:absolute {
+ position: absolute;
+}
+.position\:relative {
+ position: relative;
+}
+.position\:sticky {
+ position: sticky;
+}
+.right\:0 {
+ right: 0;
+}
+.text-align\:center {
+ text-align: center;
+}
+.top\:0 {
+ top: 0;
+}
+.white-space\:pre {
+ white-space: pre;
+}
+.white-space\:pre-wrap {
+ white-space: pre-wrap;
+}
+.width\:100\% {
+ width: 100%;
+}
+.word-break\:break-all {
+ word-break: break-all;
}
/* generated by src/routes/fuz.gen.css.ts */
diff --git a/src/routes/library.json b/src/routes/library.json
index 7cd772d4..6d06c5e3 100644
--- a/src/routes/library.json
+++ b/src/routes/library.json
@@ -43,7 +43,7 @@
"node": ">=22.15"
},
"peerDependencies": {
- "@fuzdev/fuz_css": ">=0.41.0",
+ "@fuzdev/fuz_css": ">=0.44.1",
"svelte": "^5"
},
"peerDependenciesMeta": {
@@ -56,16 +56,17 @@
},
"devDependencies": {
"@changesets/changelog-git": "^0.2.1",
- "@fuzdev/fuz_css": "^0.43.0",
- "@fuzdev/fuz_ui": "^0.177.0",
- "@fuzdev/fuz_util": "^0.45.1",
+ "@fuzdev/fuz_css": "^0.44.1",
+ "@fuzdev/fuz_ui": "^0.178.2",
+ "@fuzdev/fuz_util": "^0.45.3",
"@ryanatkn/eslint-config": "^0.9.0",
- "@ryanatkn/gro": "^0.184.0",
+ "@ryanatkn/gro": "^0.186.0",
"@sveltejs/adapter-static": "^3.0.10",
"@sveltejs/kit": "^2.49.1",
"@sveltejs/package": "^2.5.7",
"@sveltejs/vite-plugin-svelte": "^6.2.1",
"@types/node": "^24.10.1",
+ "@webref/css": "^8.2.0",
"eslint": "^9.39.1",
"eslint-plugin-svelte": "^3.13.1",
"esm-env": "^1.2.2",
diff --git a/src/routes/samples/+page.svelte b/src/routes/samples/+page.svelte
index eec11ed2..2a47ea04 100644
--- a/src/routes/samples/+page.svelte
+++ b/src/routes/samples/+page.svelte
@@ -9,15 +9,15 @@
import Footer from '$routes/Footer.svelte';
-
+
🎨
-
-
benchmark
- chromium --js-flags="--expose-gc"
+ chromium --js-flags="--expose-gc"
HTML rendering (default)
+HTML rendering (default)
{#each Object.values(samples) as sample (sample.name)}
-
{/each}
@@ -37,9 +37,9 @@
{sample.lang}
+{sample.lang}