add colors to buttons (#1)

.changeset/nice-glasses-remember.md

@@ -0,0 +1,6 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+remove `drop_shadow` and `drop_shadow_lg` variables and
+rename `box_shadow`/`box_shadow_lg` to `shadow`/`shadow_lg`

.changeset/silver-bats-wonder.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+add button colors

CHANGELOG.md

@@ -425,8 +425,8 @@
   - remove `.plain-button`, use `.plain` on `button` instead
   - rename `.w-full` to `.width_full` and `.h-full` to `.height_full`
   - snake_case `.padded-X` to `.padded_X` and `.icon-button` to `.icon_button`
-  - rename `--box_shadow_dark` and `--drop_shadow_dark` to `--box_shadow_lg`
-    and `--drop_shadow_lg`
+  - rename `--shadow_dark` and `--shadow_dark` to `--shadow_lg`
+    and `--shadow_lg`
   - drop the `font_` from `--font_size_X` (later changed to `size_`, see below)
   - rename `.column` to `.width_md` and `.column-sm` to `.width_sm`
   - rename `--column_width` to `--width_md` and `--column_width_sm` to `--width_sm`
@@ -714,11 +714,11 @@
   - remove `--interactive_color_active_dark`
   - remove `--avatar_height`
   - remove `--border_radius_N` for variants `md`/`sm`/`xs`
-  - remove `--input_box_shadow_` variables
+  - remove `--input_shadow_` variables
   - remove `--panel_color` and `--panel_color_dark`
   - remove `.panel-outset` and `.panel-inset` - use `.panel` instead
-  - remove `--panel_inset_box_shadow`, `--panel_outset_box_shadow`,
-    `--panel_inset_box_shadow_hover` and `--panel_outset_box_shadow_hover`
+  - remove `--panel_inset_shadow`, `--panel_outset_shadow`,
+    `--panel_inset_shadow_hover` and `--panel_outset_shadow_hover`
   - remove `--panel_padding`, `--panel_padding_sm`, and `--panel_padding_xs` -- use `--padded_X` instead
   - add utility classes `.centered-text`, `.padded-xs`, `.padded-sm`, and `.padded-lg`
   - add `--border_width`
@@ -940,7 +940,7 @@
   ([#159](https://github.com/ryanatkn/fuz/pull/159))
 - **break**: remove opinionated layout CSS on the `html` and `body` elements
   ([#155](https://github.com/ryanatkn/fuz/pull/155))
-- **break**: replace `--pane_box_shadow` with `--drop_shadow` and `--drop_shadow_dark`
+- **break**: replace `--pane_shadow` with `--shadow` and `--shadow_dark`
   ([#161](https://github.com/ryanatkn/fuz/pull/161))
 - add CSS variables `--transition_duration_1` to `--transition_duration_5`
   that get disabled with `prefers-reduced-motion`

src/lib/Dialog.svelte

@@ -152,7 +152,7 @@
 
 <style>
 	.dialog {
-		--drop_shadow: var(--drop_shadow_lg);
+		--shadow: var(--shadow_lg);
 		overflow: auto;
 		position: fixed;
 		inset: 0;

src/lib/Library_Panel.svelte

@@ -7,7 +7,7 @@
 		overflow: hidden;
 		width: 100%;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		justify-content: center;
 		flex-direction: column;
 		padding: var(--library_panel_padding, var(--spacing_lg));

src/lib/style.css

@@ -414,13 +414,15 @@ button:focus,
 .buttonlike:focus {
 	--border_color: var(--border_2);
 	background: var(--button_bg_hover);
+	box-shadow: var(--shadow_inset);
 }
 button:active,
 .buttonlike:active {
 	--border_color: var(--border_5);
 	--outline_width: var(--outline_width_3);
 	/* TODO use of `background` vs `background-color` in this file is not intentional */
 	background: var(--button_bg_active);
+	box-shadow: var(--shadow_inset_active);
 }
 button.inline {
 	display: inline-block;
@@ -432,12 +434,14 @@ see https://caniuse.com/css-has
  */
 /* TODO maybe add a style for `button.selected:disabled`, probably reduced brightness,
 currently `:disabled` overrides this */
-button.selected,
-.buttonlike.selected {
+:is(button, .buttonlike).selected {
 	--text_color: var(--text_active);
 	--border_color: var(--color_1);
 	background: var(--button_bg_active);
+}
+:is(button, .buttonlike).selected:not(.deselectable) {
 	cursor: default;
+	box-shadow: none;
 }
 input:checked,
 .buttonlike:hover input:checked:not(:disabled),
@@ -454,6 +458,7 @@ input[type='radio']:checked {
 	--border_color: var(--border_disabled);
 	--border_style: solid dashed;
 	cursor: default;
+	box-shadow: none;
 	opacity: var(--disabled_opacity);
 	background: var(--button_bg_disabled);
 	outline: none;
@@ -469,6 +474,67 @@ label.disabled:active {
 	background: var(--button_bg_disabled);
 }
 
+/* TODO these need design work for visuals/consistency/customizability */
+button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7) {
+	color: var(--bg_7);
+}
+/* TODO differences for hover/focus */
+button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):is(:hover, :focus) {
+	color: var(--bg_10);
+}
+button:is(.color_1, .color_2, .color_3, .color_4, .color_5, .color_6, .color_7):active {
+	color: var(--bg_10);
+}
+button.color_1:not(.selected) {
+	background-color: var(--color_1);
+}
+button.color_2:not(.selected) {
+	background-color: var(--color_2);
+}
+button.color_3:not(.selected) {
+	background-color: var(--color_3);
+}
+button.color_4:not(.selected) {
+	background-color: var(--color_4);
+}
+button.color_5:not(.selected) {
+	background-color: var(--color_5);
+}
+button.color_6:not(.selected) {
+	background-color: var(--color_6);
+}
+button.color_7:not(.selected) {
+	background-color: var(--color_7);
+}
+button.selected.color_1 {
+	color: var(--color_1);
+	border-color: var(--color_1);
+}
+button.selected.color_2 {
+	color: var(--color_2);
+	border-color: var(--color_2);
+}
+button.selected.color_3 {
+	color: var(--color_3);
+	border-color: var(--color_3);
+}
+button.selected.color_4 {
+	color: var(--color_4);
+	border-color: var(--color_4);
+}
+button.selected.color_5 {
+	color: var(--color_5);
+	border-color: var(--color_5);
+}
+button.selected.color_6 {
+	color: var(--color_6);
+	border-color: var(--color_6);
+}
+button.selected.color_7 {
+	color: var(--color_7);
+	border-color: var(--color_7);
+}
+
 /* TODO could improve this with the coming `:has` selector
 for disabled colors without needing a wrapper .disabled class */
 label {
@@ -576,9 +642,9 @@ ahead are utility and helper classes:
 By default it's opaque, resetting the background to the initial depth. */
 .pane {
 	background-color: var(--pane_bg, var(--bg));
-	/* TODO this causes blurriness with nested contextmenus, maybe they shouldn't be panes? is pane overloaded? maybe extract the bg part of it?
-	filter: var(--drop_shadow); */
-	box-shadow: var(--box_shadow);
+	/* TODO this is preferred but causes blurriness with nested contextmenus, maybe they shouldn't be panes? is pane overloaded? maybe extract the bg part of it?
+	filter: drop-shadow(var(--shadow)); */
+	box-shadow: var(--shadow);
 	border-radius: var(--border_radius_xs);
 }
 /* A panel is a box embedded into the page, useful for visually isolating content. */
@@ -682,7 +748,7 @@ https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories
 .selectable.selected {
 	cursor: default;
 }
-.selected.deselectable:not(:disabled) {
+.selectable.selected.deselectable:not(:disabled) {
 	cursor: pointer;
 }
 

src/lib/theme.css

@@ -37,7 +37,7 @@
 	--tint_hue: var(--hue_4);
 	--tint_saturation: 11%;
 	--bg: hsl(var(--tint_hue), var(--tint_saturation), 96%);
-	--fg: hsl(var(--tint_hue), var(--tint_saturation), 7%);
+	--fg: hsl(var(--tint_hue), var(--tint_saturation), 6%);
 	--bg_1: var(--lighten_1);
 	--bg_2: var(--lighten_2);
 	--bg_3: var(--lighten_3);
@@ -47,6 +47,7 @@
 	--bg_7: var(--lighten_7);
 	--bg_8: var(--lighten_8);
 	--bg_9: var(--lighten_9);
+	--bg_10: #fff;
 	--fg_1: var(--darken_1);
 	--fg_2: var(--darken_2);
 	--fg_3: var(--darken_3);
@@ -56,6 +57,7 @@
 	--fg_7: var(--darken_7);
 	--fg_8: var(--darken_8);
 	--fg_9: var(--darken_9);
+	--fg_10: #000;
 	--text_color: var(--text_1);
 	--text_1: hsl(var(--tint_hue), var(--tint_saturation), 16%);
 	--text_2: hsl(var(--tint_hue), var(--tint_saturation), 32%);
@@ -144,12 +146,14 @@
 	--input_height_inner: calc(
 		var(--input_height) - 2 * var(--border_width) - 2 * var(--input_padding_y)
 	);
-	--box_shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28),
-		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28);
-	--box_shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8),
-		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8);
-	--drop_shadow: drop-shadow(var(--box_shadow));
-	--drop_shadow_lg: drop-shadow(var(--box_shadow_lg));
+	--shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28),
+		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28);
+	--shadow_lg: 2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8),
+		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8);
+	--shadow_inset: 2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2),
+		4px 4px 6px inset var(--lighten_1), -4px -4px 6px inset var(--darken_1);
+	--shadow_inset_active: 2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2),
+		4px 4px 6px inset var(--darken_1), -4px -4px 6px inset var(--lighten_1);
 	--icon_size: var(--icon_size_md);
 	--icon_size_xs: 18px;
 	--icon_size_sm: 32px;
@@ -171,7 +175,7 @@
 	--faded_4: 24%;
 	--faded_5: 15%;
 	--faded_6: 9%;
-	--disabled_opacity: var(--faded_1);
+	--disabled_opacity: var(--faded_2);
 	--border_radius: var(--border_radius_md);
 	--border_radius_md: calc(var(--input_height) / 2);
 	--border_radius_sm: calc(var(--border_radius_md) / 1.618);
@@ -186,7 +190,7 @@
 	--color_5: hsl(var(--hue_5), 50%, 65%);
 	--color_6: hsl(var(--hue_6), 32%, 75%);
 	--color_7: hsl(var(--hue_7), 74%, 76%);
-	--bg: hsl(var(--tint_hue), var(--tint_saturation), 7%);
+	--bg: hsl(var(--tint_hue), var(--tint_saturation), 6%);
 	--fg: hsl(var(--tint_hue), var(--tint_saturation), 96%);
 	--bg_1: var(--darken_1);
 	--bg_2: var(--darken_2);
@@ -197,6 +201,7 @@
 	--bg_7: var(--darken_7);
 	--bg_8: var(--darken_8);
 	--bg_9: var(--darken_9);
+	--bg_10: #000;
 	--fg_1: var(--lighten_1);
 	--fg_2: var(--lighten_2);
 	--fg_3: var(--lighten_3);
@@ -206,6 +211,7 @@
 	--fg_7: var(--lighten_7);
 	--fg_8: var(--lighten_8);
 	--fg_9: var(--lighten_9);
+	--fg_10: #fff;
 	--text_1: hsl(var(--tint_hue), var(--tint_saturation), 80%);
 	--text_2: hsl(var(--tint_hue), var(--tint_saturation), 65%);
 	--text_3: hsl(var(--tint_hue), var(--tint_saturation), 50%);
@@ -216,9 +222,9 @@
 	--border_3: hsl(var(--tint_hue), 60%, 80%, 50%);
 	--border_4: hsl(var(--tint_hue), 60%, 80%, 40%);
 	--border_5: hsl(var(--tint_hue), 60%, 80%, 30%);
-	--box_shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
+	--shadow: 2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
 		2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5));
-	--box_shadow_lg: 2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
+	--shadow_lg: 2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)),
 		2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5));
 }
 

src/lib/variables.ts

@@ -1,5 +1,20 @@
 import type {Theme_Variable} from '$lib/theme.js';
 
+/*
+
+TODO lots of things here to address:
+
+- lots of inconsistencies, like the relationship between base and modified values
+	- in some cases the base value is just a value, in other cases it's the "current" value
+- going from `_lg` to `_1` is awkward - maybe replace all xs/sm/md/lg with 1/2/3/4
+	- issues with this:
+		- less semantically meaningful, harder to read/write so you'll have to learn the system
+			- 3 won't always be "medium" for each usage because of the lower end values
+		- changing the bottom end of the range will cause bad churn (can't just add a new `_xs4`)
+		- numbers will get into the double digits
+
+/*
+
 /**
  * These are implicitly the variables for the `base` theme.
  * See also the empty `variables` array of the `base` theme above.
@@ -80,15 +95,15 @@ export const default_variables: Theme_Variable[] = [
 	{
 		name: 'bg',
 		light: 'hsl(var(--tint_hue), var(--tint_saturation), 96%)',
-		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 7%)',
+		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 6%)',
 	},
 	{
 		name: 'fg',
-		light: 'hsl(var(--tint_hue), var(--tint_saturation), 7%)',
+		light: 'hsl(var(--tint_hue), var(--tint_saturation), 6%)',
 		dark: 'hsl(var(--tint_hue), var(--tint_saturation), 96%)',
 	},
 	/* these are light or dark with a low alpha, so they nest/stack arbitrarily */
-	/* TODO maybe extract --bg_lightness and --fg_lightness */
+	// TODO these inconsistently don't use tint, unlike bg/fg
 	{name: 'bg_1', light: 'var(--lighten_1)', dark: 'var(--darken_1)'},
 	{name: 'bg_2', light: 'var(--lighten_2)', dark: 'var(--darken_2)'},
 	{name: 'bg_3', light: 'var(--lighten_3)', dark: 'var(--darken_3)'},
@@ -98,6 +113,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'bg_7', light: 'var(--lighten_7)', dark: 'var(--darken_7)'},
 	{name: 'bg_8', light: 'var(--lighten_8)', dark: 'var(--darken_8)'},
 	{name: 'bg_9', light: 'var(--lighten_9)', dark: 'var(--darken_9)'},
+	{name: 'bg_10', light: '#fff', dark: '#000'},
 	{name: 'fg_1', light: 'var(--darken_1)', dark: 'var(--lighten_1)'},
 	{name: 'fg_2', light: 'var(--darken_2)', dark: 'var(--lighten_2)'},
 	{name: 'fg_3', light: 'var(--darken_3)', dark: 'var(--lighten_3)'},
@@ -107,6 +123,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'fg_7', light: 'var(--darken_7)', dark: 'var(--lighten_7)'},
 	{name: 'fg_8', light: 'var(--darken_8)', dark: 'var(--lighten_8)'},
 	{name: 'fg_9', light: 'var(--darken_9)', dark: 'var(--lighten_9)'},
+	{name: 'fg_10', light: '#000', dark: '#fff'},
 	/* text colors don't use alpha because it affects performance too much */
 	{name: 'text_color', light: 'var(--text_1)'},
 	{
@@ -258,20 +275,32 @@ export const default_variables: Theme_Variable[] = [
 	},
 
 	/* shadows */
+	// TODO these shouldn't use tint, use lighten/darken instead,
+	// but ideally we'd have a blend mode make the colors right,
+	// which would require a pseduo-element,
+	// but that's heavier and requires the element to be positioned (I think?)
 	{
-		name: 'box_shadow',
+		name: 'shadow',
 		light:
-			'2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.28)',
+			'2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.28)',
 		dark: '2px 4px 9px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 14px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',
 	},
 	{
-		name: 'box_shadow_lg',
+		name: 'shadow_lg',
 		light:
-			'2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 7%, 0.8)',
+			'2px 6px 14px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 6%, 0.8)',
 		dark: '2px 6px 18px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5)), 2px 6px 48px hsla(var(--tint_hue), var(--tint_saturation), 82%, var(--faded_5))',
 	},
-	{name: 'drop_shadow', light: 'drop-shadow(var(--box_shadow))'},
-	{name: 'drop_shadow_lg', light: 'drop-shadow(var(--box_shadow_lg))'},
+	{
+		name: 'shadow_inset',
+		light:
+			'2px 2px 4px inset var(--lighten_2), -2px -2px 4px inset var(--darken_2), 4px 4px 6px inset var(--lighten_1), -4px -4px 6px inset var(--darken_1)',
+	},
+	{
+		name: 'shadow_inset_active', // TODO better name? this is the "pressed" version for buttons
+		light:
+			'2px 2px 4px inset var(--darken_2), -2px -2px 4px inset var(--lighten_2), 4px 4px 6px inset var(--darken_1), -4px -4px 6px inset var(--lighten_1)',
+	},
 
 	/* icons */
 	/* these decrease by the golden ratio, rounded to the nearest pixel,
@@ -302,7 +331,7 @@ export const default_variables: Theme_Variable[] = [
 	{name: 'faded_4', light: '24%'},
 	{name: 'faded_5', light: '15%'},
 	{name: 'faded_6', light: '9%'},
-	{name: 'disabled_opacity', light: 'var(--faded_1)'},
+	{name: 'disabled_opacity', light: 'var(--faded_2)'},
 
 	/* border radii */
 	{name: 'border_radius', light: 'var(--border_radius_md)'},