style variable renames and misc changes (#12)

.changeset/ninety-ducks-raise.md

@@ -0,0 +1,5 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+many potentially-breaking style changes

.changeset/orange-jeans-burn.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": patch
+---
+
+rename `Library_Tome_Link` from `Library_Vocab`

.changeset/poor-olives-peel.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+rename `Style_Variable` from `Theme_Variable`

.changeset/shy-tigers-destroy.md

@@ -0,0 +1,5 @@
+---
+"@ryanatkn/fuz": minor
+---
+
+rename `Theme` property `variables` from `items`

.changeset/young-rings-check.md

@@ -0,0 +1,39 @@
+---
+'@ryanatkn/fuz': minor
+---
+
+rename some variables
+
+- `fade_N` from `faded_N`
+- `space_N` from `spacing_N`
+- `radius_N` from `border_radius_N`
+- `space_5xs` from `space_xs5`
+- `space_4xs` from `space_xs4`
+- `space_3xs` from `space_xs3`
+- `space_2xs` from `space_xs2`
+- `space_xs` from `space_xs`
+- `space_sm` from `space_sm`
+- `space_md` from `space_md`
+- `space_lg` from `space_lg`
+- `space_xl` from `space_1`
+- `space_2xl` from `space_2`
+- `space_3xl` from `space_3`
+- `space_4xl` from `space_4`
+- `space_5xl` from `space_5`
+- `space_6xl` from `space_6`
+- `space_7xl` from `space_7`
+- `space_8xl` from `space_8`
+- `space_9xl` from `space_9`
+- `size_xl` from `size_1`
+- `size_2xl` from `size_2`
+- `size_3xl` from `size_3`
+- `size_4xl` from `size_4`
+- `size_5xl` from `size_5`
+- `size_6xl` from `size_6`
+- `size_7xl` from `size_7`
+- `size_8xl` from `size_8`
+- `size_9xl` from `size_9`
+- `icon_size_xl` from `icon_size_1`
+- `icon_size_2xl` from `icon_size_2`
+- `icon_size_3xl` from `icon_size_3`
+- `icon_size_4xl` from `icon_size_4`

CHANGELOG.md

@@ -321,7 +321,7 @@
   ([#337](https://github.com/ryanatkn/fuz/pull/337))
 - add classes `.inline`, `.inline_block`, `.block`, `.flex`, and `.flex_1`
   ([#337](https://github.com/ryanatkn/fuz/pull/337))
-- add `--border_radius_xs2`
+- add `--radius_2xs`
   ([#342](https://github.com/ryanatkn/fuz/pull/342))
 
 ## 0.64.0
@@ -357,7 +357,7 @@
   ([#318](https://github.com/ryanatkn/fuz/pull/318))
 - add more readable dark mode text colors
   ([#327](https://github.com/ryanatkn/fuz/pull/327))
-- add `attrs` prop to `PendingAnimation`
+- add `attrs` prop to `Pending_Animation`
   ([#327](https://github.com/ryanatkn/fuz/pull/327))
 - improve `HueInput` a11y
   ([#334](https://github.com/ryanatkn/fuz/pull/334))
@@ -439,7 +439,7 @@
   - add and publish `$lib/theme.ts` with `create_theme_setup_script` for setting up the color scheme
   - add and publish `$lib/themes.ts` with the default theme data,
     including the base theme along with low and high contrast themes
-  - add and publish `$lib/variables.ts` with the default `Theme_Variable` data
+  - add and publish `$lib/variables.ts` with the default `Style_Variable` data
   - add and publish `$lib/Themed.svelte` for mounting a theme to the page or a part of it
   - add and publish `$lib/Color_Scheme_Input.svelte`
   - remove the `error` param from `createContextmenu` and add the `contextmenu.error` store
@@ -755,12 +755,12 @@
   ([#224](https://github.com/ryanatkn/fuz/pull/224))
   - remove `--input_border_width` - use `--border_width` instead
   - remove `--border` - use each variable directly instead so they can be overidden
-  - remove `--icon_max` - use `--icon_size_4` instead
+  - remove `--icon_max` - use `--icon_size_4xl` instead
   - remove `--button_border_width` and `--button_text_color`
   - rename `--interactive_` variables to `--button_`
   - remove `--interactive_color_active_dark`
   - remove `--avatar_height`
-  - remove `--border_radius_N` for variants `md`/`sm`/`xs`
+  - remove `--radius_N` for variants `md`/`sm`/`xs`
   - remove `--input_shadow_` variables
   - remove `--panel_color` and `--panel_color_dark`
   - remove `.panel-outset` and `.panel-inset` - use `.panel` instead
@@ -836,8 +836,8 @@
 
 ## 0.30.0
 
-- **break**: replace `--border_radius_1` and `--border_radius_5` with `--border_radius_2` to 5,
-  and rename `--border_radius_2` and `border_radius_3` to 2 and 3, respectively
+- **break**: replace `--radius_xl` and `--radius_5xl` with `--radius_2xl` to 5,
+  and rename `--radius_2xl` and `radius_3xl` to 2 and 3, respectively
   ([#204](https://github.com/ryanatkn/fuz/pull/204))
 - add `fade-in` animation
   ([#205](https://github.com/ryanatkn/fuz/pull/205))
@@ -903,7 +903,7 @@
 
 - **break**: rename `--duration_N` CSS variables from `--transition_duration_N` and add `--duration_6`
   ([#186](https://github.com/ryanatkn/fuz/pull/186))
-- add `--animation_duration` API to `PendingAnimation.svelte`
+- add `--animation_duration` API to `Pending_Animation.svelte`
   ([#186](https://github.com/ryanatkn/fuz/pull/186))
 - relax `is_editable` type in `util/dom.js`
   ([#187](https://github.com/ryanatkn/fuz/pull/187))
@@ -930,7 +930,7 @@
   ([#178](https://github.com/ryanatkn/fuz/pull/178))
 - improve env handling for log level
   ([#180](https://github.com/ryanatkn/fuz/pull/180))
-- add `index` to `PendingAnimation` slot props
+- add `index` to `Pending_Animation` slot props
   ([#181](https://github.com/ryanatkn/fuz/pull/181))
 
 ## 0.22.0
@@ -1045,7 +1045,7 @@
   ([#136](https://github.com/ryanatkn/fuz/pull/136))
 - **break**: update styles
   ([#136](https://github.com/ryanatkn/fuz/pull/136))
-- **break**: change `PendingAnimation` property `paused` to `running`
+- **break**: change `Pending_Animation` property `paused` to `running`
   ([#136](https://github.com/ryanatkn/fuz/pull/136))
 - add optional `separator` arg to `toToClientId`
   ([#136](https://github.com/ryanatkn/fuz/pull/136))
@@ -1100,7 +1100,7 @@
   ([#108](https://github.com/ryanatkn/fuz/pull/108))
 - **break**: add peer deps `svelte` and `@sveltejs/kit`
   ([#112](https://github.com/ryanatkn/fuz/pull/112))
-- update `PendingAnimation.svelte` with slot content and `running` prop
+- update `Pending_Animation.svelte` with slot content and `running` prop
   ([#108](https://github.com/ryanatkn/fuz/pull/108))
 - replace `Message.svelte` prop `text` with a slot
   ([#108](https://github.com/ryanatkn/fuz/pull/108))
@@ -1163,7 +1163,7 @@
 
 ## 0.4.2
 
-- publish component `PendingAnimation.svelte`
+- publish component `Pending_Animation.svelte`
   ([#91](https://github.com/ryanatkn/fuz/pull/91))
 
 ## 0.4.1

README.md

@@ -18,8 +18,9 @@ Feel free to take the ideas and code for your own purposes.
 The CSS design system:
 
 - plain CSS
-- designed around style variables,
+- designed around variables aka style variables aka design tokens,
   a specialization of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
+  - variables are a more primitive building block than classes
   - includes optional utility and semantic classes that use the variables
 - the only required parts of the library are `@ryanatkn/fuz/style.css` and either
   `@ryanatkn/fuz/theme.css` or your own theme file, everything else can be used a la carte

package.json

@@ -213,10 +213,10 @@
       "default": "./dist/Library_Panel.svelte",
       "types": "./dist/Library_Panel.svelte.d.ts"
     },
-    "./Library_Vocab.svelte": {
-      "svelte": "./dist/Library_Vocab.svelte",
-      "default": "./dist/Library_Vocab.svelte",
-      "types": "./dist/Library_Vocab.svelte.d.ts"
+    "./Library_Tome_Link.svelte": {
+      "svelte": "./dist/Library_Tome_Link.svelte",
+      "default": "./dist/Library_Tome_Link.svelte",
+      "types": "./dist/Library_Tome_Link.svelte.d.ts"
     },
     "./Library.svelte": {
       "svelte": "./dist/Library.svelte",

src/lib/Alert.svelte

@@ -39,8 +39,8 @@
 		display: flex;
 		justify-content: flex-start; /* override button horizontal centering */
 		align-items: center;
-		padding: var(--spacing_xs2) var(--spacing_lg) var(--spacing_xs2) var(--spacing_xs);
-		margin-bottom: var(--spacing_lg);
+		padding: var(--space_2xs) var(--space_lg) var(--space_2xs) var(--space_xs);
+		margin-bottom: var(--space_lg);
 	}
 	.message:last-child {
 		margin-bottom: 0;
@@ -49,7 +49,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding-right: var(--spacing_md);
-		font-size: var(--size_2);
+		padding-right: var(--space_md);
+		font-size: var(--size_2xl);
 	}
 </style>

src/lib/Breadcrumb.svelte

@@ -33,12 +33,12 @@
 		flex-wrap: wrap;
 		justify-content: center;
 		align-items: stretch;
-		padding: var(--spacing_md) 0;
+		padding: var(--space_md) 0;
 	}
 	a {
 		position: relative;
 		z-index: 1;
-		padding: 0 var(--spacing_sm);
+		padding: 0 var(--space_sm);
 		display: flex;
 		align-items: center;
 	}

src/lib/Card.svelte

@@ -43,11 +43,11 @@
 <style>
 	.card {
 		--icon_size: var(--icon_size_lg);
-		--icon_margin: var(--spacing_lg);
+		--icon_margin: var(--space_lg);
 		display: flex;
-		font-size: var(--size_2);
+		font-size: var(--size_2xl);
 		align-items: center;
-		padding: var(--spacing_lg);
+		padding: var(--space_lg);
 		width: var(--card_width);
 		background-color: var(--fg_1);
 		border-radius: var(--border_radius);
@@ -67,11 +67,11 @@
 		text-decoration: underline;
 	}
 	.left .content {
-		padding-right: var(--spacing_sm);
+		padding-right: var(--space_sm);
 	}
 	.right .content {
 		text-align: right;
-		padding-left: var(--spacing_sm);
+		padding-left: var(--space_sm);
 	}
 	.icon {
 		font-size: var(--icon_size);
@@ -93,22 +93,22 @@
 	}
 	@media (max-width: 460px) {
 		.card {
-			font-size: var(--size_1);
+			font-size: var(--size_xl);
 		}
 	}
 	@media (max-width: 380px) {
 		.card {
 			--icon_size: var(--icon_size_md);
-			--icon_margin: var(--spacing_sm);
+			--icon_margin: var(--space_sm);
 			font-size: var(--size_lg);
 		}
 		.icon {
 			font-size: var(--icon_size_md);
-			margin-right: var(--spacing_sm);
+			margin-right: var(--space_sm);
 		}
 		.right .icon {
 			margin-right: 0;
-			margin-left: var(--spacing_sm);
+			margin-left: var(--space_sm);
 		}
 	}
 </style>

src/lib/Color_Scheme_Input.svelte

@@ -51,7 +51,7 @@ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_ro
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0 var(--spacing_lg);
+		padding: 0 var(--space_lg);
 	}
 	.color_scheme {
 		border-radius: 0;

src/lib/Contextmenu.svelte

@@ -287,7 +287,7 @@
 		border: var(--contextmenu_border_width, var(--border_width))
 			var(--contextmenu_border_style, var(--border_style))
 			var(--contextmenu_border_color, var(--border_color));
-		border-radius: var(--contextmenu_border_radius, var(--border_radius_xs));
+		border-radius: var(--contextmenu_border_radius, var(--radius_xs));
 	}
 
 	/* TODO better way to do this? */

src/lib/Copy_To_Clipboard.svelte

@@ -33,7 +33,7 @@
 	}
 	small {
 		font-weight: 700;
-		margin-top: var(--spacing_xs);
+		margin-top: var(--space_xs);
 		opacity: 0;
 		animation: fade-in 1.5s ease-in reverse;
 	}

src/lib/Github_Logo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let size = 'var(--spacing_7, 64px)';
+	export let size = 'var(--space_7xl, 64px)';
 	export let fill = 'var(--color, #000)';
 	export let label = 'GitHub icon';
 	export let attrs: any = undefined;

src/lib/Hue_Input.svelte

@@ -60,7 +60,7 @@
 <style>
 	.hue_input .indicator {
 		background-color: hsl(var(--hue) 50% 50%);
-		height: var(--spacing_5);
+		height: var(--space_5xl);
 		margin: 0;
 		display: flex;
 		flex-direction: row;
@@ -90,7 +90,7 @@
 			hsl(324, 50%, 50%) 90%,
 			hsl(360, 50%, 50%) 100%
 		);
-		height: var(--spacing_lg);
+		height: var(--space_lg);
 	}
 	/* TODO generic way to make this seamless? */
 	input {

src/lib/Library.svelte

@@ -16,6 +16,6 @@
 	}
 	/* TODO hacky */
 	.tomes :global(.tome) {
-		margin-bottom: var(--spacing_9) !important;
+		margin-bottom: var(--space_9xl) !important;
 	}
 </style>

src/lib/Library_Footer.svelte

@@ -45,6 +45,6 @@
 	}
 	.root_url {
 		/* TODO messy */
-		margin-top: var(--spacing_md);
+		margin-top: var(--space_md);
 	}
 </style>

src/lib/Library_Menu.svelte

@@ -49,10 +49,10 @@
 		width: 100%;
 	}
 	h6 {
-		padding-bottom: var(--spacing_sm);
+		padding-bottom: var(--space_sm);
 	}
 	h6:not(:first-child) {
-		margin-top: var(--spacing_1);
+		margin-top: var(--space_xl);
 	}
 	li {
 		width: 100%;

src/lib/Library_Nav.svelte

@@ -26,7 +26,7 @@
 
 <style>
 	nav {
-		font-size: var(--size_1);
+		font-size: var(--size_xl);
 	}
 	.root {
 		--text_decoration_selected: none;

src/lib/Library_Panel.svelte

@@ -5,8 +5,8 @@
 <style>
 	.library_panel {
 		overflow: hidden;
-		padding: var(--library_panel_padding, var(--spacing_lg));
+		padding: var(--library_panel_padding, var(--space_lg));
 		/* This margin matches the padding between the library menu and main content. */
-		margin-bottom: calc(var(--spacing_md) + var(--spacing_sm));
+		margin-bottom: calc(var(--space_md) + var(--space_sm));
 	}
 </style>

src/lib/Library_Vocab.svelte → src/lib/Library_Tome_Link.svelte

@@ -5,7 +5,7 @@
 
 	export let name: string; // TODO type, generate from `tomes`?
 
-	// TODO runes!
+	// TODO active state
 </script>
 
 <code {...$$restProps}><a href="{base}/library/{name}"><slot>{name}</slot></a></code>