diff --git a/.changeset/large-elephants-build.md b/.changeset/large-elephants-build.md new file mode 100644 index 000000000..6d67cc51c --- /dev/null +++ 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 index 007dc0a4b..332c9df20 100644 --- a/src/lib/Card.svelte +++ b/src/lib/Card.svelte @@ -47,7 +47,6 @@ 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); @@ -55,6 +54,9 @@ 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 index 79ace4be0..f43d48f6f 100644 --- 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 index d806ee4d1..f8db6bfa3 100644 --- a/src/lib/variables.ts +++ b/src/lib/variables.ts @@ -32,7 +32,7 @@ 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%)'}, @@ -40,8 +40,8 @@ export const default_variables: Theme_Variable[] = [ {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 index d338ca0c3..9350f4743 100644 --- 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 index e560353ad..131fc2c70 100644 --- 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 index 89eeffd02..0e0ca3e38 100644 --- 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 index 8206a6422..15760ae97 100644 --- 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 index c4fe12214..7e63668ff 100644 --- 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 index 1689d7c27..04fdafbdf 100644 --- 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;