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 @@

colorful buttons


- {#each color_names as c} - {@const color_name = `color_${c}`} - `} /> - - - - - - -
- {/each} +
+ {#each color_names as c} + {@const color_name = `color_${c}`} + `} /> + + + + + + +
+ {/each} +
+ +
+ +

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}
+
+ +
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 @@ }; -
+

the --icon_size variable's variants

@@ -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;