tweak colors and library styles (#10)

ryanatkn · Feb 25, 2024 · 2a4e4ae · 2a4e4ae
1 parent 6600f4e
commit 2a4e4ae
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 49 deletions.
diff --git a/.changeset/large-elephants-build.md b/.changeset/large-elephants-build.md
@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+tweak colors
diff --git a/src/lib/Card.svelte b/src/lib/Card.svelte
@@ -47,14 +47,16 @@
 		display: flex;
 		font-size: var(--size_2);
 		align-items: center;
-		justify-content: center;
 		padding: var(--spacing_lg);
 		width: var(--card_width);
 		background-color: var(--fg_1);
 		border-radius: var(--border_radius);
 		text-decoration: none;
 		text-align: left;
 	}
+	.right {
+		justify-content: flex-end;
+	}
 	.above,
 	.below {
 		flex-direction: column;

diff --git a/src/lib/theme.css b/src/lib/theme.css
@@ -18,7 +18,7 @@
 	--color_a_7: hsl(var(--hue_a), 55%, 30%);
 	--color_a_8: hsl(var(--hue_a), 55%, 20%);
 	--color_a_9: hsl(var(--hue_a), 55%, 10%);
-	--color_b_1: hsl(var(--hue_b), 55%, 88%);
+	--color_b_1: hsl(var(--hue_b), 55%, 90%);
 	--color_b_2: hsl(var(--hue_b), 50%, 77%);
 	--color_b_3: hsl(var(--hue_b), 50%, 63%);
 	--color_b_4: hsl(var(--hue_b), 50%, 49%);
@@ -239,14 +239,14 @@
 	--border_radius_xs2: calc(var(--border_radius_xs) / 1.618);
 }
 :root.dark {
-	--color_a_2: hsl(var(--hue_a), 62%, 88%);
+	--color_a_2: hsl(var(--hue_a), 62%, 87%);
 	--color_a_3: hsl(var(--hue_a), 60%, 82%);
 	--color_a_4: hsl(var(--hue_a), 60%, 76%);
 	--color_a_5: hsl(var(--hue_a), 55%, 70%);
 	--color_a_6: hsl(var(--hue_a), 55%, 55%);
 	--color_a_7: hsl(var(--hue_a), 55%, 40%);
 	--color_a_8: hsl(var(--hue_a), 55%, 25%);
-	--color_b_2: hsl(var(--hue_b), 50%, 81%);
+	--color_b_2: hsl(var(--hue_b), 50%, 82%);
 	--color_b_3: hsl(var(--hue_b), 50%, 74%);
 	--color_b_4: hsl(var(--hue_b), 50%, 66%);
 	--color_b_5: hsl(var(--hue_b), 43%, 58%);
@@ -260,7 +260,7 @@
 	--color_c_6: hsl(var(--hue_c), 65%, 45%);
 	--color_c_7: hsl(var(--hue_c), 65%, 33%);
 	--color_c_8: hsl(var(--hue_c), 65%, 22%);
-	--color_d_2: hsl(var(--hue_d), 50%, 87%);
+	--color_d_2: hsl(var(--hue_d), 50%, 86%);
 	--color_d_3: hsl(var(--hue_d), 50%, 81%);
 	--color_d_4: hsl(var(--hue_d), 50%, 76%);
 	--color_d_5: hsl(var(--hue_d), 50%, 70%);
@@ -281,7 +281,7 @@
 	--color_f_6: hsl(var(--hue_f), 40%, 44%);
 	--color_f_7: hsl(var(--hue_f), 50%, 31%);
 	--color_f_8: hsl(var(--hue_f), 70%, 19%);
-	--color_g_2: hsl(var(--hue_g), 72%, 87%);
+	--color_g_2: hsl(var(--hue_g), 72%, 86%);
 	--color_g_3: hsl(var(--hue_g), 72%, 81%);
 	--color_g_4: hsl(var(--hue_g), 72%, 76%);
 	--color_g_5: hsl(var(--hue_g), 72%, 70%);

diff --git a/src/lib/variables.ts b/src/lib/variables.ts
@@ -32,16 +32,16 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'hue_f', light: '27', summary: 'brown'},
 	{name: 'hue_g', light: '335', summary: 'pink'},
 	{name: 'color_a_1', light: 'hsl(var(--hue_a), 65%, 91%)'},
-	{name: 'color_a_2', light: 'hsl(var(--hue_a), 62%, 84%)', dark: 'hsl(var(--hue_a), 62%, 88%)'},
+	{name: 'color_a_2', light: 'hsl(var(--hue_a), 62%, 84%)', dark: 'hsl(var(--hue_a), 62%, 87%)'},
 	{name: 'color_a_3', light: 'hsl(var(--hue_a), 60%, 73%)', dark: 'hsl(var(--hue_a), 60%, 82%)'},
 	{name: 'color_a_4', light: 'hsl(var(--hue_a), 60%, 62%)', dark: 'hsl(var(--hue_a), 60%, 76%)'},
 	{name: 'color_a_5', light: 'hsl(var(--hue_a), 55%, 50%)', dark: 'hsl(var(--hue_a), 55%, 70%)'},
 	{name: 'color_a_6', light: 'hsl(var(--hue_a), 55%, 40%)', dark: 'hsl(var(--hue_a), 55%, 55%)'},
 	{name: 'color_a_7', light: 'hsl(var(--hue_a), 55%, 30%)', dark: 'hsl(var(--hue_a), 55%, 40%)'},
 	{name: 'color_a_8', light: 'hsl(var(--hue_a), 55%, 20%)', dark: 'hsl(var(--hue_a), 55%, 25%)'},
 	{name: 'color_a_9', light: 'hsl(var(--hue_a), 55%, 10%)'},
-	{name: 'color_b_1', light: 'hsl(var(--hue_b), 55%, 88%)'},
-	{name: 'color_b_2', light: 'hsl(var(--hue_b), 50%, 77%)', dark: 'hsl(var(--hue_b), 50%, 81%)'},
+	{name: 'color_b_1', light: 'hsl(var(--hue_b), 55%, 90%)'},
+	{name: 'color_b_2', light: 'hsl(var(--hue_b), 50%, 77%)', dark: 'hsl(var(--hue_b), 50%, 82%)'},
 	{name: 'color_b_3', light: 'hsl(var(--hue_b), 50%, 63%)', dark: 'hsl(var(--hue_b), 50%, 74%)'},
 	{name: 'color_b_4', light: 'hsl(var(--hue_b), 50%, 49%)', dark: 'hsl(var(--hue_b), 50%, 66%)'},
 	{name: 'color_b_5', light: 'hsl(var(--hue_b), 55%, 36%)', dark: 'hsl(var(--hue_b), 43%, 58%)'},
@@ -59,7 +59,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'color_c_8', light: 'hsl(var(--hue_c), 65%, 20%)', dark: 'hsl(var(--hue_c), 65%, 22%)'},
 	{name: 'color_c_9', light: 'hsl(var(--hue_c), 65%, 10%)'},
 	{name: 'color_d_1', light: 'hsl(var(--hue_d), 50%, 91%)'},
-	{name: 'color_d_2', light: 'hsl(var(--hue_d), 50%, 82%)', dark: 'hsl(var(--hue_d), 50%, 87%)'},
+	{name: 'color_d_2', light: 'hsl(var(--hue_d), 50%, 82%)', dark: 'hsl(var(--hue_d), 50%, 86%)'},
 	{name: 'color_d_3', light: 'hsl(var(--hue_d), 50%, 72%)', dark: 'hsl(var(--hue_d), 50%, 81%)'},
 	{name: 'color_d_4', light: 'hsl(var(--hue_d), 50%, 62%)', dark: 'hsl(var(--hue_d), 50%, 76%)'},
 	{name: 'color_d_5', light: 'hsl(var(--hue_d), 50%, 50%)', dark: 'hsl(var(--hue_d), 50%, 70%)'},
@@ -86,7 +86,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'color_f_8', light: 'hsl(var(--hue_f), 75%, 10%)', dark: 'hsl(var(--hue_f), 70%, 19%)'},
 	{name: 'color_f_9', light: 'hsl(var(--hue_f), 80%, 6%)'},
 	{name: 'color_g_1', light: 'hsl(var(--hue_g), 72%, 91%)'},
-	{name: 'color_g_2', light: 'hsl(var(--hue_g), 72%, 83%)', dark: 'hsl(var(--hue_g), 72%, 87%)'},
+	{name: 'color_g_2', light: 'hsl(var(--hue_g), 72%, 83%)', dark: 'hsl(var(--hue_g), 72%, 86%)'},
 	{name: 'color_g_3', light: 'hsl(var(--hue_g), 72%, 74%)', dark: 'hsl(var(--hue_g), 72%, 81%)'},
 	{name: 'color_g_4', light: 'hsl(var(--hue_g), 72%, 65%)', dark: 'hsl(var(--hue_g), 72%, 76%)'},
 	{name: 'color_g_5', light: 'hsl(var(--hue_g), 72%, 56%)', dark: 'hsl(var(--hue_g), 72%, 70%)'},

diff --git a/src/routes/library/buttons/+page.svelte b/src/routes/library/buttons/+page.svelte
@@ -3,6 +3,7 @@
 
 	import Tome_Detail from '$lib/Tome_Detail.svelte';
 	import {get_tome} from '$lib/tome.js';
+	import Color_Scheme_Input from '$lib/Color_Scheme_Input.svelte';
 
 	const LIBRARY_ITEM_NAME = 'buttons';
 
@@ -30,19 +31,26 @@
 		<h3>colorful buttons</h3>
 	</section>
 	<br />
-	{#each color_names as c}
-		{@const color_name = `color_${c}`}
-		<Code content={`<button class="${color_name}">`} />
-		<button class={color_name}>.{color_name}</button>
-		<button class={color_name} disabled>disabled .{color_name}</button>
-		<button class="{color_name} selected">.{color_name}.selected</button>
-		<button class="{color_name} selected" disabled>disabled .{color_name}.selected</button>
-		<button class="{color_name} selected deselectable">.{color_name}.selected.deselectable</button>
-		<button class="{color_name} selected deselectable" disabled
-			>disabled .{color_name}.selected.deselectable</button
-		>
-		<br />
-	{/each}
+	<div class="spaced">
+		{#each color_names as c}
+			{@const color_name = `color_${c}`}
+			<Code content={`<button class="${color_name}">`} />
+			<button class={color_name}>.{color_name}</button>
+			<button class={color_name} disabled>disabled .{color_name}</button>
+			<button class="{color_name} selected">.{color_name}.selected</button>
+			<button class="{color_name} selected" disabled>disabled .{color_name}.selected</button>
+			<button class="{color_name} selected deselectable">.{color_name}.selected.deselectable</button
+			>
+			<button class="{color_name} selected deselectable" disabled
+				>disabled .{color_name}.selected.deselectable</button
+			>
+			<br />
+		{/each}
+	</div>
+
+	<div class="box width_full spaced">
+		<Color_Scheme_Input />
+	</div>
 
 	<hr />
 

diff --git a/src/routes/library/colors/+page.svelte b/src/routes/library/colors/+page.svelte
@@ -4,6 +4,7 @@
 	import Hue_Swatch from '$routes/library/colors/Hue_Swatch.svelte';
 	import Color_Swatch from '$routes/library/colors/Color_Swatch.svelte';
 	import Library_Vocab from '$lib/Library_Vocab.svelte';
+	import Color_Scheme_Input from '$lib/Color_Scheme_Input.svelte';
 
 	const LIBRARY_ITEM_NAME = 'colors';
 
@@ -121,6 +122,9 @@
 		{/each}
 	</ul>
 	<br />
+	<div class="box width_full spaced">
+		<Color_Scheme_Input />
+	</div>
 </Tome_Detail>
 
 <style>

diff --git a/src/routes/library/forms/+page.svelte b/src/routes/library/forms/+page.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<div class="prose box">
+	<div class="prose">
 		<Code
 			content={`<form>
 	<fieldset>
@@ -119,7 +119,7 @@
 
 	<hr />
 
-	<div class="box prose">
+	<div class="prose">
 		<h3>
 			<code>form</code> with range input
 		</h3>
@@ -137,7 +137,7 @@
 
 	<hr />
 
-	<div class="box prose">
+	<div class="prose">
 		<h3>
 			<code>form</code> with checkboxes
 		</h3>
@@ -171,7 +171,7 @@
 	</div>
 	<hr />
 
-	<div class="box prose">
+	<div class="prose">
 		<h3>
 			<code>form</code> with radio inputs
 		</h3>

diff --git a/src/routes/library/menu_item/+page.svelte b/src/routes/library/menu_item/+page.svelte
@@ -8,6 +8,8 @@
 	const LIBRARY_ITEM_NAME = 'menu item';
 	const tome = get_tome(LIBRARY_ITEM_NAME);
 
+	// TODO this is currently not being displayed
+
 	// TODO `role="menuitem"` ?
 
 	let clicked = 'c';
@@ -22,7 +24,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<section class="prose box">
+	<section class="prose">
 		<h3>
 			<code>.menu_item</code> CSS class
 		</h3>

diff --git a/src/routes/library/typography/+page.svelte b/src/routes/library/typography/+page.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <Tome_Detail {tome}>
-	<section class="prose">
+	<section class="prose overflowing">
 		<h1 title="--size_3">h1</h1>
 		<h2 title="--size_2">h2</h2>
 		<h3 title="--size_1">h3</h3>
@@ -46,31 +46,33 @@
 			<p style:font-size="var(--{font_size.name})" title={font_size.light}>--{font_size.name}</p>
 		{/each}
 	</section>
-	<section class="prose">
+	<section class="prose width_full">
 		<h3>
 			sizes at each <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight"
 				><code>font-weight</code></a
 			>
 		</h3>
-		{#each font_weights as fontWeight (fontWeight)}
-			<div style:font-weight={fontWeight}>
-				{fontWeight}
-			</div>
-		{/each}
-		{#each font_sizes as font_size (font_size)}
+		<div class="overflowing">
 			{#each font_weights as fontWeight (fontWeight)}
-				<div
-					class="nowrap"
-					style:font-weight={fontWeight}
-					style:--font_weight={fontWeight}
-					style:font-size={font_size.light}
-				>
-					<div title="{font_size.light} at {fontWeight} font-weight">
-						--{font_size.name}
-					</div>
+				<div style:font-weight={fontWeight}>
+					{fontWeight}
 				</div>
 			{/each}
-		{/each}
+			{#each font_sizes as font_size (font_size)}
+				{#each font_weights as fontWeight (fontWeight)}
+					<div
+						class="nowrap"
+						style:font-weight={fontWeight}
+						style:--font_weight={fontWeight}
+						style:font-size={font_size.light}
+					>
+						<div title="{font_size.light} at {fontWeight} font-weight">
+							--{font_size.name}
+						</div>
+					</div>
+				{/each}
+			{/each}
+		</div>
 	</section>
 	<Icon_Sizes />
 </Tome_Detail>
@@ -82,4 +84,8 @@
 	section {
 		margin-bottom: var(--spacing_5);
 	}
+	.overflowing {
+		width: 100%;
+		overflow-x: auto;
+	}
 </style>
diff --git a/src/routes/library/typography/Icon_Sizes.svelte b/src/routes/library/typography/Icon_Sizes.svelte
@@ -12,7 +12,7 @@
 	};
 </script>
 
-<section class="prose box">
+<section class="prose">
 	<div>
 		<h3>the <code>--icon_size</code> variable's variants</h3>
 		<blockquote class="width_sm">
@@ -103,7 +103,7 @@
 	.icon_sizes {
 		width: 100%;
 		overflow-x: auto;
-		overflow-y: hidden;
+		overflow-y: hidden; /* TODO hack because emoji are bigger than the defined dimensions, maybe dont use a 🐢? :(  */
 	}
 	.icon_sizes figure {
 		display: flex;