Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tweak colors and library styles #10

Merged
merged 7 commits into from
Feb 25, 2024
Merged

tweak colors and library styles #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4c407db
tweak colors
ryanatkn Feb 25, 2024
027f90e
wip
ryanatkn Feb 25, 2024
c12c838
wip
ryanatkn Feb 25, 2024
cdd7f10
wip
ryanatkn Feb 25, 2024
cba5a14
wip
ryanatkn Feb 25, 2024
a796fd3
wip
ryanatkn Feb 25, 2024
8e740da
wip
ryanatkn Feb 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/large-elephants-build.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@ryanatkn/fuz": patch
---

tweak colors
4 changes: 3 additions & 1 deletion src/lib/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions src/lib/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand All @@ -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%);
Expand All @@ -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%);
Expand Down
10 changes: 5 additions & 5 deletions src/lib/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%)'},
Expand All @@ -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%)'},
Expand All @@ -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%)'},
Expand Down
34 changes: 21 additions & 13 deletions src/routes/library/buttons/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 />

Expand Down
4 changes: 4 additions & 0 deletions src/routes/library/colors/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -121,6 +122,9 @@
{/each}
</ul>
<br />
<div class="box width_full spaced">
<Color_Scheme_Input />
</div>
</Tome_Detail>

<style>
Expand Down
8 changes: 4 additions & 4 deletions src/routes/library/forms/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</script>

<Tome_Detail {tome}>
<div class="prose box">
<div class="prose">
<Code
content={`<form>
<fieldset>
Expand Down Expand Up @@ -119,7 +119,7 @@

<hr />

<div class="box prose">
<div class="prose">
<h3>
<code>form</code> with range input
</h3>
Expand All @@ -137,7 +137,7 @@

<hr />

<div class="box prose">
<div class="prose">
<h3>
<code>form</code> with checkboxes
</h3>
Expand Down Expand Up @@ -171,7 +171,7 @@
</div>
<hr />

<div class="box prose">
<div class="prose">
<h3>
<code>form</code> with radio inputs
</h3>
Expand Down
4 changes: 3 additions & 1 deletion src/routes/library/menu_item/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -22,7 +24,7 @@
</script>

<Tome_Detail {tome}>
<section class="prose box">
<section class="prose">
<h3>
<code>.menu_item</code> CSS class
</h3>
Expand Down
42 changes: 24 additions & 18 deletions src/routes/library/typography/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -82,4 +84,8 @@
section {
margin-bottom: var(--spacing_5);
}
.overflowing {
width: 100%;
overflow-x: auto;
}
</style>
4 changes: 2 additions & 2 deletions src/routes/library/typography/Icon_Sizes.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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;
Expand Down
Loading