More testing with other's themes.

This commit is contained in:
Bradley Shellnut 2022-06-08 17:47:34 -07:00
parent 4f03b02082
commit 756adf502c
6 changed files with 1829 additions and 5992 deletions

6184
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -12,33 +12,33 @@
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ." "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.22.0", "@playwright/test": "^1.22.2",
"@rgossiaux/svelte-headlessui": "1.0.0-beta.12", "@rgossiaux/svelte-headlessui": "1.0.0-beta.12",
"@sveltejs/adapter-auto": "1.0.0-next.42", "@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "1.0.0-next.326", "@sveltejs/kit": "next",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/node": "^17.0.34", "@types/node": "^17.0.41",
"@typescript-eslint/eslint-plugin": "^5.24.0", "@typescript-eslint/eslint-plugin": "^5.27.1",
"@typescript-eslint/parser": "^5.24.0", "@typescript-eslint/parser": "^5.27.1",
"carbon-components-svelte": "^0.63.8", "carbon-components-svelte": "^0.63.8",
"carbon-icons-svelte": "^11.0.1", "carbon-icons-svelte": "^11.1.0",
"eslint": "^8.15.0", "eslint": "^8.17.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^3.4.1", "eslint-plugin-svelte3": "^3.4.1",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0", "prettier-plugin-svelte": "^2.7.0",
"sass": "^1.51.0", "sass": "^1.52.3",
"svelte": "^3.48.0", "svelte": "^3.48.0",
"svelte-check": "^2.7.1", "svelte-check": "^2.7.2",
"svelte-preprocess": "^4.10.6", "svelte-preprocess": "^4.10.7",
"tslib": "^2.4.0", "tslib": "^2.4.0",
"typescript": "^4.6.4" "typescript": "^4.7.3"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@fontsource/fira-mono": "^4.5.8", "@fontsource/fira-mono": "^4.5.8",
"@lukeed/uuid": "^2.0.0", "@lukeed/uuid": "^2.0.0",
"cookie": "^0.5.0", "cookie": "^0.5.0",
"zod": "^3.16.0" "zod": "^3.17.3"
} }
} }

File diff suppressed because it is too large Load diff

View file

@ -11,8 +11,9 @@
const themes = { const themes = {
'🌛 Night': { name: '🌛 Night' }, '🌛 Night': { name: '🌛 Night' },
'☀️ Daylight': { name: '☀️ Daylight' }, '☀️ Daylight': { name: '☀️ Daylight' },
'😎 Synthwave': { name: '😎 Synthwave' } '🐺 Night Howl': { name: '🐺 Night Howl' },
}; '🧠 Night Mind': { name: '🧠 Night Mind' },
}
let selectedTheme = getTheme() ?? themes['🌛 Night']; let selectedTheme = getTheme() ?? themes['🌛 Night'];
@ -59,8 +60,6 @@
</script> </script>
<div class="theme"> <div class="theme">
<span>Theme</span>
<div class="listbox"> <div class="listbox">
<Listbox value={selectedTheme} on:change={handleChange} let:open> <Listbox value={selectedTheme} on:change={handleChange} let:open>
<ListboxButton class="button"> <ListboxButton class="button">

View file

@ -36,12 +36,12 @@
<Toggle /> <Toggle />
</div> </div>
<div><Themes /></div> <div><Themes /></div>
<ul> <!-- <ul>
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li> <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
<li class:active={$page.url.pathname === '/about'}> <li class:active={$page.url.pathname === '/about'}>
<a sveltekit:prefetch href="/about">About</a> <a sveltekit:prefetch href="/about">About</a>
</li> </li>
</ul> </ul> -->
</nav> </nav>
</header> </header>

View file

@ -1,67 +1,283 @@
html[data-theme='🌛 Night'] { html[data-theme='🌛 Night'] {
/* Global */ /* Global */
--clr-primary: hsl(173 100% 66%); --clr-primary: hsl(173 100% 66%);
--clr-txt: hsl(0 0% 98%); --clr-txt: hsl(0 0% 98%);
--clr-bg: hsl(210 7% 11%); --clr-bg: hsl(210 7% 11%);
--bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg)); --bg: radial-gradient(hsl(173 100% 4%), var(--clr-bg));
--bg-opacity: 0.7; --bg-opacity: 0.7;
/* Menu */ /* Menu */
--clr-menu-text: hsl(0 0% 78%); --clr-menu-text: hsl(0 0% 78%);
--clr-menu-bg: linear-gradient(180deg, --clr-menu-bg: linear-gradient(
180deg,
hsl(180 7% 14%) 0%, hsl(180 7% 14%) 0%,
hsl(216 7% 14%) 100%); hsl(216 7% 14%) 100%
--clr-menu-arrow-bg: hsl(180 7% 14%); );
--clr-menu-border: hsl(0 0% 19%); --clr-menu-arrow-bg: hsl(180 7% 14%);
--clr-menu-border: hsl(0 0% 19%);
--clr-theme-txt: hsl(177 100% 15%); --clr-theme-txt: hsl(177 100% 15%);
--clr-theme-active: hsl(177 100% 80%); --clr-theme-active: hsl(177 100% 80%);
--clr-switch-on-bg: hsl(0 0% 24%); --clr-switch-on-bg: hsl(0 0% 24%);
--clr-switch-off-bg: hsl(0 0% 10%); --clr-switch-off-bg: hsl(0 0% 10%);
/* Hero */ /* Hero */
--clr-hero-txt: hsl(174 27% 73%); --clr-hero-txt: hsl(174 27% 73%);
--clr-hero-bg: linear-gradient(270deg, --clr-hero-bg: linear-gradient(
270deg,
hsl(210 15% 13%) 43%, hsl(210 15% 13%) 43%,
hsl(176 19% 15%) 66%); hsl(176 19% 15%) 66%
--clr-hero-divider-bg: hsl(0 0% 21%); );
--clr-input-txt: hsl(177 100% 15%); --clr-hero-divider-bg: hsl(0 0% 21%);
--clr-input-bg: hsl(210 13% 24%); --clr-input-txt: hsl(177 100% 15%);
--clr-input-placeholder-txt: hsl(210 13% 50%); --clr-input-bg: hsl(210 13% 24%);
--clr-input-border: hsl(0 0% 21%); --clr-input-placeholder-txt: hsl(210 13% 50%);
--clr-input-border: hsl(0 0% 21%);
/* Card */ /* Card */
--clr-card-bg: linear-gradient(180deg, --clr-card-bg: linear-gradient(
180deg,
hsl(180 7% 14%) 0%, hsl(180 7% 14%) 0%,
hsl(216 7% 14%) 100%); hsl(216 7% 14%) 100%
--clr-card-txt: hsl(0 0% 78%); );
--clr-card-txt: hsl(0 0% 78%);
/* Link */ /* Link */
--clr-link-txt: hsl(0 100% 98%); --clr-link-txt: hsl(0 100% 98%);
--clr-link-background: hsl(0 0% 4%); --clr-link-background: hsl(0 0% 4%);
/* Footer */ /* Footer */
--clr-footer-txt: hsl(0 0% 78%); --clr-footer-txt: hsl(0 0% 78%);
--clr-footer-bg: hsl(210 5% 7%); --clr-footer-bg: hsl(210 5% 7%);
/* Post */ /* Post */
--post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg)); --post-overlay-bg: radial-gradient(hsl(173 100% 4% / 80%), var(--clr-bg));
--post-blockquote-txt: hsl(173 100% 94%); --post-blockquote-txt: hsl(173 100% 94%);
--post-blockquote-bg: hsl(173 60% 4%); --post-blockquote-bg: hsl(173 60% 4%);
--post-blockquote-border: hsl(173 10% 10%); --post-blockquote-border: hsl(173 10% 10%);
--clr-code-bg: hsl(173 60% 4%); --clr-code-bg: hsl(173 60% 4%);
--clr-code-title: hsl(173 100% 94%); --clr-code-title: hsl(173 100% 94%);
--clr-code-border: hsl(173 10% 10%); --clr-code-border: hsl(173 10% 10%);
--clr-code-line-number: hsl(173 20% 20%); --clr-code-line-number: hsl(173 20% 20%);
--clr-code-line-highlight: hsl(173 40% 8%); --clr-code-line-highlight: hsl(173 40% 8%);
--clr-code-inline-txt: hsl(173 100% 94%); --clr-code-inline-txt: hsl(173 100% 94%);
--clr-code-inline-bg: hsl(173 60% 4%); --clr-code-inline-bg: hsl(173 60% 4%);
--clr-token-1: hsl(173 100% 66%); --clr-token-1: hsl(173 100% 66%);
--clr-token-2: hsl(180 60% 80%); --clr-token-2: hsl(180 60% 80%);
--clr-token-3: hsl(173 100% 66%); --clr-token-3: hsl(173 100% 66%);
--clr-token-4: hsl(0 0% 98%); --clr-token-4: hsl(0 0% 98%);
--clr-token-5: hsl(173 10% 60%); --clr-token-5: hsl(173 10% 60%);
} }
html[data-theme='☀️ Daylight'] {
/* Global */
--clr-primary: hsl(220 100% 50%);
--clr-txt: hsl(220 10% 10%);
--clr-bg: hsl(0 0% 98%);
--bg: radial-gradient(hsl(0 0% 98%), var(--clr-bg));
--bg-opacity: 0.7;
/* Menu */
--clr-menu-text: hsl(220 10% 10%);
--clr-menu-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
--clr-menu-arrow-bg: hsl(0 0% 98%);
--clr-menu-border: hsl(0 0% 80%);
--clr-theme-txt: hsl(0 0% 98%);
--clr-theme-active: hsl(220 100% 60%);
--clr-switch-on-bg: hsl(220 40% 90%);
--clr-switch-off-bg: hsl(220 40% 80%);
/* Hero */
--clr-hero-txt: hsl(220 10% 40%);
--clr-hero-bg: linear-gradient(270deg, hsl(0 0% 94%) 43%, hsl(0 0% 98%) 66%);
--clr-hero-divider-bg: hsl(0 0% 80%);
--clr-input-txt: hsl(220 10% 98%);
--clr-input-bg: hsl(0 0% 98%);
--clr-input-placeholder-txt: hsl(220 10% 60%);
--clr-input-border: hsl(0 0% 80%);
/* Card */
--clr-card-bg: linear-gradient(180deg, hsl(0 0% 98%) 0%, hsl(0 0% 94%) 100%);
--clr-card-txt: hsl(220 10% 40%);
/* Link */
--clr-link-txt: hsl(220 10% 10%);
--clr-link-background: hsl(0 0% 100%);
/* Footer */
--clr-footer-txt: hsl(220 10% 10%);
--clr-footer-bg: hsl(0 0% 98%);
/* Post */
--post-overlay-bg: radial-gradient(hsl(0 0% 100% / 60%), var(--clr-bg));
--post-blockquote-txt: hsl(0 0% 40%);
--post-blockquote-bg: hsl(0 0% 98%);
--post-blockquote-border: hsl(0 0% 84%);
--clr-code-bg: hsl(0 0% 98%);
--clr-code-title: hsl(0 0% 40%);
--clr-code-border: hsl(0 0% 84%);
--clr-code-line-number: hsl(0 0% 60%);
--clr-code-line-highlight: hsl(0 0% 94%);
--clr-code-inline-txt: hsl(0 0% 98%);
--clr-code-inline-bg: hsl(0 0% 20%);
--clr-token-1: hsl(220 100% 50%);
--clr-token-2: hsl(220 60% 50%);
--clr-token-3: hsl(220 100% 50%);
--clr-token-4: hsl(0 0% 20%);
--clr-token-5: hsl(0 0% 60%);
}
html[data-theme='🐺 Night Howl'] {
/* Global */
--clr-primary: hsl(207 100% 94%);
--clr-txt: hsl(210 40% 80%);
--clr-bg: hsl(210 47% 12%);
--bg: radial-gradient(hsl(206 50% 11%), var(--clr-bg));
--bg-opacity: 0.7;
/* Menu */
--clr-menu-text: hsl(210 40% 80%);
--clr-menu-bg: linear-gradient(
180deg,
hsl(210 47% 14%) 0%,
hsl(210 47% 12%) 100%
);
--clr-menu-arrow-bg: hsl(210 47% 14%);
--clr-menu-border: hsl(210 40% 20%);
--clr-theme-txt: hsl(210 40% 20%);
--clr-theme-active: hsl(210 40% 80%);
--clr-switch-on-bg: hsl(210 40% 60%);
--clr-switch-off-bg: hsl(210 40% 20%);
/* Hero */
--clr-hero-txt: hsl(210 40% 60%);
--clr-hero-bg: linear-gradient(
270deg,
hsl(210 47% 12%) 43%,
hsl(210 47% 14%) 66%
);
--clr-hero-divider-bg: hsl(210 40% 20%);
--clr-input-txt: hsl(210 40% 20%);
--clr-input-bg: hsl(210 40% 16%);
--clr-input-placeholder-txt: hsl(210 40% 60%);
--clr-input-border: hsl(210 40% 20%);
/* Card */
--clr-card-bg: linear-gradient(
180deg,
hsl(210 47% 14%) 0%,
hsl(210 47% 12%) 100%
);
--clr-card-txt: hsl(210 40% 60%);
/* Link */
--clr-link-txt: hsl(210 40% 80%);
--clr-link-background: hsl(210 40% 4%);
/* Footer */
--clr-footer-txt: hsl(210 40% 80%);
--clr-footer-bg: hsl(210 47% 12%);
/* Post */
--post-overlay-bg: radial-gradient(hsl(206 50% 11% / 60%), var(--clr-bg));
--post-blockquote-txt: hsl(210 47% 80%);
--post-blockquote-bg: hsl(210 47% 14%);
--post-blockquote-border: hsl(210 40% 20%);
--clr-code-bg: hsl(210 47% 14%);
--clr-code-title: hsl(210 40% 60%);
--clr-code-border: hsl(210 40% 20%);
--clr-code-line-number: hsl(210 40% 40%);
--clr-code-line-highlight: hsl(210 40% 16%);
--clr-code-inline-txt: hsl(210 47% 98%);
--clr-code-inline-bg: hsl(210 47% 10%);
--clr-token-1: hsl(180 100% 43%);
--clr-token-2: hsl(197 100% 49%);
--clr-token-3: hsl(180 100% 43%);
--clr-token-4: hsl(206 50% 98%);
--clr-token-5: hsl(217 10% 64%);
}
html[data-theme='🧠 Night Mind'] {
/* Global */
--clr-primary: hsl(9 100% 84%);
--clr-txt: hsl(265 28% 98%);
--clr-bg: hsl(265 28% 10%);
--bg: radial-gradient(hsl(265 28% 20%), var(--clr-bg));
--bg-opacity: 0.7;
/* Menu */
--clr-menu-text: hsl(265 28% 98%);
--clr-menu-bg: linear-gradient(
180deg,
hsl(265 28% 20%) 0%,
hsl(265 28% 18%) 100%
);
--clr-menu-arrow-bg: hsl(265 28% 20%);
--clr-menu-border: hsl(265 28% 24%);
--clr-theme-txt: hsl(265 28% 20%);
--clr-theme-active: hsl(9 100% 90%);
--clr-switch-on-bg: hsl(265 28% 30%);
--clr-switch-off-bg: hsl(265 28% 24%);
/* Hero */
--clr-hero-txt: hsl(265 28% 80%);
--clr-hero-bg: linear-gradient(
270deg,
hsl(265 28% 20%) 43%,
hsl(265 28% 24%) 66%
);
--clr-hero-divider-bg: hsl(265 28% 24%);
--clr-input-txt: hsl(265 28% 20%);
--clr-input-bg: hsl(265 28% 24%);
--clr-input-placeholder-txt: hsl(265 28% 80%);
--clr-input-border: hsl(265 28% 26%);
/* Card */
--clr-card-bg: linear-gradient(
180deg,
hsl(265 28% 22%) 0%,
hsl(265 28% 20%) 100%
);
--clr-card-txt: hsl(265 28% 80%);
/* Link */
--clr-link-txt: hsl(265 28% 98%);
--clr-link-background: hsl(210 40% 4%);
/* Footer */
--clr-footer-txt: hsl(265 28% 98%);
--clr-footer-bg: hsl(265 28% 10%);
/* Post */
--post-overlay-bg: radial-gradient(hsl(265 28% 20% / 60%), var(--clr-bg));
--post-blockquote-txt: hsl(265 28% 90%);
--post-blockquote-bg: hsl(265 28% 10%);
--post-blockquote-border: hsl(265 28% 18%);
--clr-code-bg: hsl(265 28% 10%);
--clr-code-title: hsl(265 28% 80%);
--clr-code-border: hsl(265 28% 18%);
--clr-code-line-number: hsl(265 20% 34%);
--clr-code-line-highlight: hsl(265 28% 14%);
--clr-code-inline-txt: hsl(265 28% 98%);
--clr-code-inline-bg: hsl(265 28% 10%);
--clr-token-1: hsl(238 80% 80%);
--clr-token-2: hsl(205 80% 80%);
--clr-token-3: hsl(358 80% 80%);
--clr-token-4: hsl(256 80% 98%);
--clr-token-5: hsl(265 10% 60%);
}