add .lg

.changeset/cute-webs-mix.md

@@ -0,0 +1,19 @@
+---
+'@fuzdev/fuz_css': minor
+---
+
+add `.lg` size composite class, rename `input_height_sm` to `input_height_compact`, remove `--min_height`
+
+**Breaking changes:**
+
+- rename CSS variable `--input_height_sm` to `--input_height_compact` — used for checkboxes, radio buttons, and inline buttons. The old name conflicted with the size composite naming convention where `_sm` means "value when `.sm` is active."
+- remove CSS variable `--min_height` — buttons now read `min-height: var(--input_height)` directly, and inline buttons read `min-height: var(--input_height_compact)`. The indirection layer is no longer needed.
+- rename JS export `input_height_sm` to `input_height_compact` in `variables.ts`
+- remove `input_height_inner` variable — was defined but unused
+- menuitem default `min-height` changes from `var(--icon_size_sm)` (2rem) to `var(--input_height_compact)` (3.3rem)
+
+**Migration:**
+
+- find-replace `--input_height_sm` → `--input_height_compact` in CSS and inline styles
+- find-replace `input_height_sm` → `input_height_compact` in JS/TS imports
+- remove any references to `--min_height` — use `--input_height` or `--input_height_compact` directly

CLAUDE.md

@@ -115,7 +115,7 @@ See `GenFuzCssOptions` and `VitePluginFuzCssOptions` types for configuration.
 - **Composite classes** - Multi-property shortcuts: `box`, `column`, `row`,
   `ellipsis`, `pixelated`, `circular`, `selectable`, `clickable`, `pane`,
   `panel`, `sm` (tighter sizing), `md` (default sizing / cascade reset),
-  `icon_button`, `plain`, `menuitem`, `chevron`, `chip`
+  `lg` (larger sizing), `icon_button`, `plain`, `menuitem`, `chevron`, `chip`
 - **Literal classes** - CSS `property:value` syntax: `display:flex`, `opacity:50%`
 
 All class types support modifiers: responsive (`md:`), state (`hover:`),

src/lib/css_class_composites.ts

@@ -114,9 +114,8 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 		declaration: `
 			--font_size: var(--font_size_sm);
 			--input_height: var(--space_xl3);
-			--input_height_sm: var(--space_xl2);
+			--input_height_compact: var(--space_xl2);
 			--input_padding_x: var(--space_sm);
-			--min_height: var(--space_xl3);
 			--icon_size: var(--icon_size_sm);
 			--menuitem_padding: var(--space_xs4) var(--space_xs3);
 			--flow_margin: var(--space_md);
@@ -127,14 +126,26 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 		declaration: `
 			--font_size: var(--font_size_md);
 			--input_height: var(--space_xl5);
-			--input_height_sm: var(--space_xl4);
+			--input_height_compact: var(--space_xl4);
 			--input_padding_x: var(--space_lg);
-			--min_height: var(--input_height);
 			--icon_size: var(--icon_size_md);
 			--menuitem_padding: var(--space_xs3) var(--space_xs);
 			--flow_margin: var(--space_lg);
 		`,
 	},
+	lg: {
+		comment:
+			'Larger sizing by overriding variables, cascading to children. Works on individual elements or containers.',
+		declaration: `
+			--font_size: var(--font_size_lg);
+			--input_height: var(--space_xl6);
+			--input_height_compact: var(--space_xl5);
+			--input_padding_x: var(--space_xl);
+			--icon_size: var(--icon_size_lg);
+			--menuitem_padding: var(--space_xs2) var(--space_sm);
+			--flow_margin: var(--space_xl);
+		`,
+	},
 	mb_flow: {
 		comment: 'Flow-aware margin-bottom that responds to --flow_margin overrides like .sm.',
 		declaration: 'margin-bottom: var(--flow_margin, var(--space_lg));',
@@ -183,7 +194,7 @@ export const css_class_composites: Record<string, CssClassDefinition | undefined
 				z-index: 2;
 				cursor: pointer;
 				width: 100%;
-				min-height: var(--min_height, var(--icon_size_sm));
+				min-height: var(--input_height_compact);
 				display: flex;
 				justify-content: space-between;
 				align-items: center;

src/lib/style.css

@@ -344,10 +344,10 @@ but not for the identical user action of clicking the track,
 so for consistent visuals we opt to include no active state */
 :where(input[type='checkbox']:not(.unstyled)) {
 	cursor: pointer;
-	width: var(--input_height_sm);
-	height: var(--input_height_sm);
-	min-width: var(--input_height_sm);
-	min-height: var(--input_height_sm);
+	width: var(--input_height_compact);
+	height: var(--input_height_compact);
+	min-width: var(--input_height_compact);
+	min-height: var(--input_height_compact);
 	border-radius: var(--border_radius, var(--border_radius_xs));
 	--input_padding_x: 0;
 	--checkbox_content: var(--checkbox_content_empty, '');
@@ -374,11 +374,11 @@ so for consistent visuals we opt to include no active state */
 
 :where(input[type='radio']:not(.unstyled)) {
 	cursor: pointer;
-	width: var(--input_height_sm);
-	height: var(--input_height_sm);
+	width: var(--input_height_compact);
+	height: var(--input_height_compact);
 	border-radius: 50%;
-	min-width: var(--input_height_sm);
-	min-height: var(--input_height_sm);
+	min-width: var(--input_height_compact);
+	min-height: var(--input_height_compact);
 	--input_padding_x: 0;
 }
 :where(input[type='radio']:not(.unstyled):checked)::before {
@@ -517,7 +517,6 @@ TODO think through these patterns to get somewhere consistent
 
 */
 :where(button:not(.unstyled)) {
-	--min_height: var(--input_height);
 	--text_color: var(--text_70);
 	--button_text_color: var(--text_color);
 	--button_fill: color-mix(in hsl, var(--fill, var(--shade_50)) 8%, transparent);
@@ -539,7 +538,7 @@ TODO think through these patterns to get somewhere consistent
 	font-size: var(--font_size, inherit);
 	font-weight: 700;
 	line-height: normal;
-	min-height: var(--min_height);
+	min-height: var(--input_height);
 	padding: 0 var(--input_padding_x);
 	box-shadow: var(--shadow, var(--button_shadow));
 	border-width: var(--border_width);
@@ -681,7 +680,7 @@ TODO think through these patterns to get somewhere consistent
 
 :where(button:not(.unstyled).inline, p button:not(.unstyled)) {
 	display: inline-block;
-	--min_height: var(--input_height_sm); /* TODO this increases paragraph line spacing */
+	min-height: var(--input_height_compact); /* TODO this increases paragraph line spacing */
 }
 
 :where(small) {

src/lib/theme.css

@@ -649,10 +649,7 @@
 	--input_padding_x: var(--space_lg);
 	--input_width_min: 100px;
 	--input_height: var(--space_xl5);
-	--input_height_sm: var(--space_xl4);
-	--input_height_inner: calc(
-		var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y)
-	);
+	--input_height_compact: var(--space_xl4);
 	--shadow_xs: 0 0 3px 0px;
 	--shadow_sm: 0 0 4px 0px;
 	--shadow_md: 0 0 6px 0px;

src/lib/variables.ts

@@ -1417,10 +1417,9 @@ export const input_padding_y: StyleVariable = {name: 'input_padding_y', light: '
 export const input_padding_x: StyleVariable = {name: 'input_padding_x', light: 'var(--space_lg)'};
 export const input_width_min: StyleVariable = {name: 'input_width_min', light: '100px'};
 export const input_height: StyleVariable = {name: 'input_height', light: 'var(--space_xl5)'};
-export const input_height_sm: StyleVariable = {name: 'input_height_sm', light: 'var(--space_xl4)'};
-export const input_height_inner: StyleVariable = {
-	name: 'input_height_inner',
-	light: 'calc(var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y))',
+export const input_height_compact: StyleVariable = {
+	name: 'input_height_compact',
+	light: 'var(--space_xl4)',
 };
 
 /*
@@ -2225,8 +2224,7 @@ export const default_variables: Array<StyleVariable> = [
 	input_padding_x,
 	input_width_min,
 	input_height,
-	input_height_sm,
-	input_height_inner,
+	input_height_compact,
 
 	/* shadows and glows */
 	shadow_xs,

src/routes/docs/buttons/+page.svelte

@@ -271,4 +271,34 @@
 			<button type="button" class="color_j">3</button>
 		</div>
 	</TomeSection>
+
+	<TomeSection>
+		<TomeSectionHeader text="With .lg">
+			With <code>.lg</code>
+		</TomeSectionHeader>
+		<p>
+			The <code>.lg</code>
+			<TomeLink name="classes" hash="#Composite-classes">composite class</TomeLink> sizes things larger
+			with bigger fonts, inputs, padding, and flow margins.
+		</p>
+		<Code content={`<button>normal</button>\n<button class="lg">lg</button>`} />
+		<div class="row gap_xs mb_lg">
+			<button type="button">normal</button>
+			<button type="button" class="lg">lg</button>
+		</div>
+		<p><code>.lg</code> with <code>.plain</code> and <code>.icon_button</code>:</p>
+		<div class="row gap_sm mb_lg">
+			<button type="button">+++</button>
+			<button type="button" class="lg">+++</button>
+			<button type="button" class="lg plain">+++</button>
+			<button type="button" class="lg icon_button">+++</button>
+			<button type="button" class="lg plain icon_button">+++</button>
+		</div>
+		<p><code>.lg</code> overrides custom properties, so children inherit the sizing:</p>
+		<div class="lg row gap_sm">
+			<button type="button">one</button>
+			<button type="button" class="plain">to</button>
+			<button type="button" class="color_j">3</button>
+		</div>
+	</TomeSection>
 </TomeContent>

src/routes/docs/chips/+page.svelte

@@ -98,4 +98,35 @@
 			<a class="chip color_e">three</a>
 		</div>
 	</TomeSection>
+
+	<TomeSection>
+		<TomeSectionHeader text="With .lg">
+			With <code>.lg</code>
+		</TomeSectionHeader>
+		<p>
+			The <code>.lg</code>
+			<TomeLink name="classes" hash="#Composite-classes">composite class</TomeLink> applies larger sizing
+			with bigger fonts, inputs, padding, and flow margins.
+		</p>
+		<Code content={`<span class="chip">normal</span>\n<span class="chip lg">large</span>`} />
+		<div class="row gap_sm mb_lg">
+			<span class="chip">normal</span>
+			<span class="chip lg">large</span>
+		</div>
+		<div class="row gap_sm mb_lg">
+			<span class="chip color_a">normal</span>
+			<span class="chip color_a lg">color_a</span>
+			<span class="chip color_b lg">color_b</span>
+			<span class="chip color_c lg">color_c</span>
+		</div>
+		<p>
+			<code>.lg</code> overrides custom properties, so children inherit the sizing:
+		</p>
+		<div class="lg row gap_sm">
+			<span class="chip">one</span>
+			<span class="chip color_d">two</span>
+			<!-- svelte-ignore a11y_missing_attribute -->
+			<a class="chip color_e">three</a>
+		</div>
+	</TomeSection>
 </TomeContent>

src/routes/docs/classes/+page.svelte

@@ -1057,6 +1057,7 @@ export const gen = gen_fuz_css({
 				<li><code>.circular</code> - 50% border-radius</li>
 				<li><code>.sm</code> - tighter sizing, cascading to children</li>
 				<li><code>.md</code> - default sizing, cascade reset</li>
+				<li><code>.lg</code> - larger sizing, cascading to children</li>
 				<li><code>.mb_flow</code> - flow-aware margin-bottom</li>
 				<li><code>.mt_flow</code> - flow-aware margin-top</li>
 			</ul>

src/routes/docs/colors/ColorSwatch.svelte

@@ -37,6 +37,6 @@
 <style>
 	ul {
 		width: 100%;
-		margin-bottom: var(--input_height_sm);
+		margin-bottom: var(--input_height_compact);
 	}
 </style>

src/routes/docs/colors/ColorSwatchItem.svelte

@@ -44,7 +44,7 @@
 		display: flex;
 		align-items: stretch;
 		font-family: var(--font_family_mono);
-		min-height: var(--input_height_sm);
+		min-height: var(--input_height_compact);
 	}
 	li:hover {
 		background-color: var(--shade_00);

src/routes/docs/forms/+page.svelte

@@ -276,4 +276,77 @@
 			</div>
 		</div>
 	</TomeSection>
+
+	<TomeSection>
+		<TomeSectionHeader text="With .lg">
+			With <code>.lg</code>
+		</TomeSectionHeader>
+		<p>
+			The <code>.lg</code>
+			<TomeLink name="classes" hash="#Composite-classes">composite class</TomeLink> provides larger sizing
+			with bigger fonts, inputs, padding, and flow margins. Apply directly or on a container to cascade
+			to children.
+		</p>
+		<Code
+			content={`<form class="lg">
+	...
+</form>`}
+		/>
+		<div class="display:flex gap_lg">
+			<div class="width_atmost_sm">
+				<form class="lg">
+					<fieldset>
+						<legend>.lg</legend>
+						<label>
+							<div class="title">name</div>
+							<input placeholder=">" />
+						</label>
+						<label>
+							<div class="title">notes</div>
+							<textarea placeholder="..."></textarea>
+						</label>
+						<label>
+							<div class="title">option</div>
+							<select>
+								{#each faces as face (face)}
+									<option value={face}>{face}</option>
+								{/each}
+							</select>
+						</label>
+						<div class="row">
+							<button type="button">submit</button>
+							<button type="button" class="icon_button plain">+</button>
+						</div>
+					</fieldset>
+				</form>
+			</div>
+			<div class="width_atmost_sm">
+				<form>
+					<fieldset>
+						<legend>normal</legend>
+						<label>
+							<div class="title">name</div>
+							<input placeholder=">" />
+						</label>
+						<label>
+							<div class="title">notes</div>
+							<textarea placeholder="..."></textarea>
+						</label>
+						<label>
+							<div class="title">option</div>
+							<select>
+								{#each faces as face (face)}
+									<option value={face}>{face}</option>
+								{/each}
+							</select>
+						</label>
+						<div class="row">
+							<button type="button">submit</button>
+							<button type="button" class="icon_button plain">+</button>
+						</div>
+					</fieldset>
+				</form>
+			</div>
+		</div>
+	</TomeSection>
 </TomeContent>

src/routes/docs/layout/+page.svelte

@@ -69,7 +69,7 @@
 <style>
 	.layout_example {
 		position: relative;
-		height: var(--input_height_sm);
+		height: var(--input_height_compact);
 		display: flex;
 		align-items: center;
 	}

src/routes/docs/semantic/+page.svelte

@@ -91,13 +91,14 @@
 		/>
 		<p>
 			The <code>--flow_margin</code> variable is unset by default, falling back to
-			<code>var(--space_lg)</code>. Size composite classes like <code>.sm</code> set
-			<code>--flow_margin</code> to tighten vertical rhythm for all flow elements and headings.
+			<code>var(--space_lg)</code>. Size composite classes like <code>.sm</code> and
+			<code>.lg</code> set <code>--flow_margin</code> to adjust vertical rhythm for all flow elements
+			and headings.
 		</p>
 		<p>
 			For elements not in the flow list, use the <code>.mb_flow</code> and <code>.mt_flow</code>
-			composite classes to get the same size-responsive spacing. Use <code>.mb_lg</code> when you
-			want a fixed value that ignores <code>.sm</code>.
+			composite classes to get the same size-responsive spacing. Use <code>.mb_lg</code> when you want
+			a fixed value that ignores size composites.
 		</p>
 		<aside>
 			⚠️ The <code>:not(:last-child)</code> creates unfortunate edge cases by coupling structure to

src/routes/docs/shading/+page.svelte

@@ -284,10 +284,10 @@ background-color: var(--shade_min);`}
 		grid-auto-flow: row;
 	}
 	.color {
-		height: var(--input_height_sm);
+		height: var(--input_height_compact);
 	}
 	small {
-		height: var(--input_height_sm);
+		height: var(--input_height_compact);
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -301,7 +301,7 @@ background-color: var(--shade_min);`}
 		border-radius: var(--border_radius_xs2);
 	}
 	.overlay_color {
-		height: var(--input_height_sm);
+		height: var(--input_height_compact);
 	}
 	.stacking_demo {
 		padding: var(--space_md);