diff --git a/.changeset/nervous-olives-speak.md b/.changeset/nervous-olives-speak.md new file mode 100644 index 000000000..d4dc4a377 --- /dev/null +++ b/.changeset/nervous-olives-speak.md @@ -0,0 +1,5 @@ +--- +'@ryanatkn/fuz': patch +--- + +add `light` class to `:root` when not auto diff --git a/.changeset/thick-crews-bake.md b/.changeset/thick-crews-bake.md new file mode 100644 index 000000000..bf1f72814 --- /dev/null +++ b/.changeset/thick-crews-bake.md @@ -0,0 +1,5 @@ +--- +'@ryanatkn/fuz': minor +--- + +upgrade `@ryanatkn/moss@0.11` from `0.10.1` diff --git a/package-lock.json b/package-lock.json index 273eb5f91..4d8f9a716 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,11 @@ "license": "MIT", "devDependencies": { "@changesets/changelog-git": "^0.2.0", - "@ryanatkn/belt": "^0.24.10", + "@ryanatkn/belt": "^0.24.11", "@ryanatkn/eslint-config": "^0.4.2", "@ryanatkn/fuz_code": "^0.16.0", - "@ryanatkn/gro": "^0.133.2", - "@ryanatkn/moss": "^0.9.0", + "@ryanatkn/gro": "^0.133.4", + "@ryanatkn/moss": "^0.11.0", "@sveltejs/adapter-static": "^3.0.2", "@sveltejs/kit": "^2.5.18", "@sveltejs/package": "^2.3.2", @@ -28,7 +28,7 @@ "prettier-plugin-svelte": "^3.2.6", "prism-svelte": "^0.5.0", "prismjs": "^1.29.0", - "svelte": "^5.0.0-next.192", + "svelte": "^5.0.0-next.193", "svelte-check": "^3.8.4", "tslib": "^2.6.3", "typescript": "^5.5.3", @@ -395,9 +395,9 @@ "peer": true }, "node_modules/@ryanatkn/belt": { - "version": "0.24.10", - "resolved": "https://registry.npmjs.org/@ryanatkn/belt/-/belt-0.24.10.tgz", - "integrity": "sha512-CrWshOlp+tiqJotCjceT5PaPTgIu5lcwjQsXAk6Ma2R+ZeO4FgYWiHm5RYSyzuaSV9B2qiUXVhMA6nnGIz7S9Q==", + "version": "0.24.11", + "resolved": "https://registry.npmjs.org/@ryanatkn/belt/-/belt-0.24.11.tgz", + "integrity": "sha512-0C0SHwifmMCRHhdsa12/IeQdfYhy8ic01EhXlRl40w3VKcUtT3Une841hc8jkE1Pz50TNveLtdXZV2C7qxPFCw==", "dev": true, "license": "MIT", "engines": { @@ -459,20 +459,20 @@ } }, "node_modules/@ryanatkn/gro": { - "version": "0.133.2", - "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.133.2.tgz", - "integrity": "sha512-jNZfpIfumlF8f7EiYPtPYjFLM4GV7PBTyTdDJPIBaPCLSPEE7zBMRsYyH5NWrmUiJSiii1Tx3LV8eWOmizewsA==", + "version": "0.133.4", + "resolved": "https://registry.npmjs.org/@ryanatkn/gro/-/gro-0.133.4.tgz", + "integrity": "sha512-lTvrF9BfymwD2/imtExs/F9eDOO8SDAdMxk1Hu9cz1dxaoj/DU+E5AKqLlVbUu9LjidSLdkCVJGZ7/gviYVbWQ==", "dev": true, "license": "MIT", "dependencies": { - "@ryanatkn/belt": "^0.24.10", + "@ryanatkn/belt": "^0.24.11", "chokidar": "^3.6.0", "dotenv": "^16.4.5", "es-module-lexer": "^1.5.4", "esm-env": "^1.0.0", "mri": "^1.2.0", "prettier": "^3.3.3", - "prettier-plugin-svelte": "^3.2.5", + "prettier-plugin-svelte": "^3.2.6", "ts-morph": "^23.0.0", "tslib": "^2.6.3", "zod": "^3.23.8" @@ -492,9 +492,9 @@ } }, "node_modules/@ryanatkn/moss": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/@ryanatkn/moss/-/moss-0.9.0.tgz", - "integrity": "sha512-N0fRfTE888ueE8hUf3HMebxOUxMurpkkP+SeymU5sXXPI3YPy+1JdMiitfxrLlLwdDKmWfG5sK8wXg/M4fIkTA==", + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@ryanatkn/moss/-/moss-0.11.0.tgz", + "integrity": "sha512-vpoZQDV4tMlNnhALWLDeyh4/gRN8xVJ7G0UYqUitXwKrjFf7fI68dndjCmUPa3BUzz5T0QDRUAfvIBhS8rGbyg==", "dev": true, "license": "MIT", "engines": { @@ -2840,9 +2840,9 @@ } }, "node_modules/svelte": { - "version": "5.0.0-next.192", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.192.tgz", - "integrity": "sha512-UgjiqTCsEWyQ157x5YNbmx859vBVFfznKaxuiMCPqHS3HRZ1iqTsSyO3LI/4BHjqPrtxwrOn1Z63VwoJkYBBDA==", + "version": "5.0.0-next.193", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.193.tgz", + "integrity": "sha512-ZCiPf2+LMWkITDp4iOXdAQ1XMhsxV56PdRxgiAf4UZx1/UgV5k/xcg8big7+TmRmEisjDOr9Ibtwf2ujFj+yDw==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 4aae5e8d1..76bf9dea0 100644 --- a/package.json +++ b/package.json @@ -47,11 +47,11 @@ }, "devDependencies": { "@changesets/changelog-git": "^0.2.0", - "@ryanatkn/belt": "^0.24.10", + "@ryanatkn/belt": "^0.24.11", "@ryanatkn/eslint-config": "^0.4.2", "@ryanatkn/fuz_code": "^0.16.0", - "@ryanatkn/gro": "^0.133.2", - "@ryanatkn/moss": "^0.9.0", + "@ryanatkn/gro": "^0.133.4", + "@ryanatkn/moss": "^0.11.0", "@sveltejs/adapter-static": "^3.0.2", "@sveltejs/kit": "^2.5.18", "@sveltejs/package": "^2.3.2", @@ -65,7 +65,7 @@ "prettier-plugin-svelte": "^3.2.6", "prism-svelte": "^0.5.0", "prismjs": "^1.29.0", - "svelte": "^5.0.0-next.192", + "svelte": "^5.0.0-next.193", "svelte-check": "^3.8.4", "tslib": "^2.6.3", "typescript": "^5.5.3", diff --git a/src/lib/Earbetter_Logo.svelte b/src/lib/Earbetter_Logo.svelte index ce9782097..586b28f93 100644 --- a/src/lib/Earbetter_Logo.svelte +++ b/src/lib/Earbetter_Logo.svelte @@ -16,17 +16,19 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; } const { - fill = 'hsl(var(--color_d_5))', + fill = 'var(--color_d_5)', size, width, height, label = 'two beamed musical notes with ears', + inline, classes, path_attrs, attrs, @@ -44,6 +46,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/Fuz_Logo.svelte b/src/lib/Fuz_Logo.svelte index 3653f7a7e..873237498 100644 --- a/src/lib/Fuz_Logo.svelte +++ b/src/lib/Fuz_Logo.svelte @@ -25,15 +25,17 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; } - const {project, fill, size, width, height, label, classes, path_attrs, attrs}: Props = $props(); + const {project, fill, size, width, height, label, inline, classes, path_attrs, attrs}: Props = + $props(); const final_fill = $derived( - project ? to_fuz_project_color(project) : (fill ?? 'hsl(var(--color_f_5))'), + project ? to_fuz_project_color(project) : (fill ?? 'var(--color_f_5)'), ); const final_label = $derived( label ?? @@ -51,6 +53,7 @@ {width} {height} label={final_label} + {inline} {classes} {path_attrs} {attrs} diff --git a/src/lib/Github_Logo.svelte b/src/lib/Github_Logo.svelte index 2af3979f7..ddfb92ef3 100644 --- a/src/lib/Github_Logo.svelte +++ b/src/lib/Github_Logo.svelte @@ -14,6 +14,7 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; attrs?: any; // TODO type } @@ -24,6 +25,7 @@ width, height, label = 'the GitHub icon, an octocat silhouette', + inline, classes, attrs, }: Props = $props(); @@ -40,6 +42,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/Gro_Logo.svelte b/src/lib/Gro_Logo.svelte index fb03f31f5..6f7b13baf 100644 --- a/src/lib/Gro_Logo.svelte +++ b/src/lib/Gro_Logo.svelte @@ -15,6 +15,7 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; @@ -25,6 +26,7 @@ width, height, label = 'a pixelated green oak acorn with a glint of sun', + inline, classes, path_attrs, attrs, @@ -42,6 +44,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/Library_Footer.svelte b/src/lib/Library_Footer.svelte index 16307dc59..c23e3ac0f 100644 --- a/src/lib/Library_Footer.svelte +++ b/src/lib/Library_Footer.svelte @@ -45,7 +45,7 @@ border: var(--border_width) double var(--border_color); } .logo a:hover { - --border_color: hsl(var(--color_a_5)); + --border_color: var(--color_a_5); } .root_url { /* TODO messy */ diff --git a/src/lib/Mdn_Link.svelte b/src/lib/Mdn_Link.svelte index ecc4a1ec1..1f1e0aa0a 100644 --- a/src/lib/Mdn_Link.svelte +++ b/src/lib/Mdn_Link.svelte @@ -25,11 +25,11 @@ const final_children = $derived(children ?? strip_end(path, '/').split('/').at(-1)!); -{#if typeof final_children === 'string'} {final_children} {:else} {@render final_children()} {/if} - diff --git a/src/lib/Mdn_Logo.svelte b/src/lib/Mdn_Logo.svelte index bc02fe70d..91e6e2874 100644 --- a/src/lib/Mdn_Logo.svelte +++ b/src/lib/Mdn_Logo.svelte @@ -14,6 +14,7 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; attrs?: any; } @@ -24,6 +25,7 @@ height, fill = '#8cb4ff', label = 'GitHub icon', + inline, classes, attrs, }: Props = $props(); @@ -40,9 +42,17 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/Moss_Logo.svelte b/src/lib/Moss_Logo.svelte index 0bd067c10..83d0a8d39 100644 --- a/src/lib/Moss_Logo.svelte +++ b/src/lib/Moss_Logo.svelte @@ -19,17 +19,19 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; } const { - fill = 'hsl(var(--color_b_5))', + fill = 'var(--color_b_5)', size, width, height, label = 'a fuzzy tuft of green moss', + inline, classes, path_attrs, attrs, @@ -39,4 +41,14 @@ const style = $derived(attrs?.style ? transform + '; ' + attrs.style : transform); - + diff --git a/src/lib/Package_Detail.svelte b/src/lib/Package_Detail.svelte index a7b994fb1..0df1ec259 100644 --- a/src/lib/Package_Detail.svelte +++ b/src/lib/Package_Detail.svelte @@ -294,16 +294,16 @@ padding: var(--space_xs); } .ts { - --link_color: hsl(var(--color_a_5)); + --link_color: var(--color_a_5); } .svelte { - --link_color: hsl(var(--color_e_5)); + --link_color: var(--color_e_5); } .css { - --link_color: hsl(var(--color_b_5)); + --link_color: var(--color_b_5); } .json { - --link_color: hsl(var(--color_f_5)); + --link_color: var(--color_f_5); } /* TODO extract */ .declarations { @@ -322,15 +322,15 @@ margin-right: var(--space_xs2); } .variable_declaration { - color: hsl(var(--color_d_5)); + color: var(--color_d_5); } .function_declaration { - color: hsl(var(--color_c_5)); + color: var(--color_c_5); } .type_declaration { - color: hsl(var(--color_g_5)); + color: var(--color_g_5); } .class_declaration { - color: hsl(var(--color_f_5)); + color: var(--color_f_5); } diff --git a/src/lib/Spider.svelte b/src/lib/Spider.svelte index 8e82ad31c..0f67544fe 100644 --- a/src/lib/Spider.svelte +++ b/src/lib/Spider.svelte @@ -16,6 +16,7 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; @@ -27,6 +28,7 @@ width, height, label = 'a friendly spider facing you', + inline, classes, path_attrs, attrs, @@ -44,6 +46,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/Spiders.svelte b/src/lib/Spiders.svelte index f0d7b1cc5..a7397910c 100644 --- a/src/lib/Spiders.svelte +++ b/src/lib/Spiders.svelte @@ -22,13 +22,13 @@ const { spiders = [ - 'hsl(var(--color_a_5))', - 'hsl(var(--color_b_5))', - 'hsl(var(--color_c_5))', - 'hsl(var(--color_d_5))', - 'hsl(var(--color_e_5))', - 'hsl(var(--color_f_5))', - 'hsl(var(--color_g_5))', + 'var(--color_a_5)', + 'var(--color_b_5)', + 'var(--color_c_5)', + 'var(--color_d_5)', + 'var(--color_e_5)', + 'var(--color_f_5)', + 'var(--color_g_5)', ], seed = minute_of_day(), random = create_random_alea(seed), diff --git a/src/lib/Spiderspace_Logo.svelte b/src/lib/Spiderspace_Logo.svelte index 26388ebb3..76465011a 100644 --- a/src/lib/Spiderspace_Logo.svelte +++ b/src/lib/Spiderspace_Logo.svelte @@ -15,6 +15,7 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; @@ -25,6 +26,7 @@ width, height, label = 'a galaxy full of twinkling star spiders', + inline, classes, path_attrs, attrs, @@ -42,6 +44,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > @@ -105,3 +108,10 @@ fill="url('#spiderspace_logo_galaxy_radial_gradient')" /> + + diff --git a/src/lib/Webdevladder_Logo.svelte b/src/lib/Webdevladder_Logo.svelte index 63a6e17c1..8c7fffb87 100644 --- a/src/lib/Webdevladder_Logo.svelte +++ b/src/lib/Webdevladder_Logo.svelte @@ -16,17 +16,19 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; } const { - fill = 'hsl(var(--color_b_5))', + fill = 'var(--color_b_5)', size, width, height, label = 'a spider web between two rungs of a ladder', + inline, classes, path_attrs, attrs, @@ -44,6 +46,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/Zzz_Logo.svelte b/src/lib/Zzz_Logo.svelte index 0e822767b..2e2324b98 100644 --- a/src/lib/Zzz_Logo.svelte +++ b/src/lib/Zzz_Logo.svelte @@ -16,17 +16,19 @@ */ height?: string; label?: string; + inline?: boolean; classes?: string; path_attrs?: SvelteHTMLElements['path']; attrs?: SvelteHTMLElements['svg']; } const { - fill = 'hsl(var(--color_g_5))', + fill = 'var(--color_g_5)', size, width, height, label = "three sleepy z's", + inline, classes, path_attrs, attrs, @@ -44,6 +46,7 @@ style:width={final_width} style:height={final_height} class={classes} + class:inline > + + diff --git a/src/lib/alert.ts b/src/lib/alert.ts index 81e584426..52fc4d92b 100644 --- a/src/lib/alert.ts +++ b/src/lib/alert.ts @@ -9,6 +9,6 @@ export interface Alert_Status_Options { export const alert_status_options: Record = { inform: {color: 'var(--text_2)', icon: '✻'}, - help: {color: 'hsl(var(--color_b_5))', icon: '➺'}, - error: {color: 'hsl(var(--color_c_5))', icon: '!?'}, + help: {color: 'var(--color_b_5)', icon: '➺'}, + error: {color: 'var(--color_c_5)', icon: '!?'}, }; diff --git a/src/lib/theme.svelte.ts b/src/lib/theme.svelte.ts index 5b7eec037..38f1350b9 100644 --- a/src/lib/theme.svelte.ts +++ b/src/lib/theme.svelte.ts @@ -50,6 +50,11 @@ export const sync_color_scheme = (color_scheme: Color_Scheme | null): void => { } else { document.documentElement.classList.remove('dark'); } + if (color_scheme === 'light') { + document.documentElement.classList.add('light'); + } else { + document.documentElement.classList.remove('light'); + } }; export const COLOR_SCHEME_STORAGE_KEY = 'color-scheme'; @@ -120,6 +125,12 @@ export const load_theme = (fallback: Theme = default_themes[0], key = THEME_STOR * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme * Prefers a value in `localStorage` if available, and if not detects using `matchMedia`. * On unexpected errors, like if `localStorage` is disabled, the `fallback` value is used. + * The `light` class is added only if the user has explicitly chosen the light theme, + * whereas the `dark` class is always added if the dark theme is chosen or detected. + * + * A `meta` tag is added for immediate parsing, and in the case of dark mode, + * a `:root:root` dark mode `color-scheme` is applied to override the Moss default. + * * @param fallback sets `content` of `` and the default if something fails * @param key * @returns HTML string with the color scheme setup script and a `color-schema` meta tag @@ -129,11 +140,14 @@ export const create_theme_setup_script = ( key = COLOR_SCHEME_STORAGE_KEY, ): string => ` + ${fallback === 'dark' ? "" : ''}