js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplify themer logic

Browse Source
This commit is contained in:
lindsaym-fa
2024-01-08 22:49:48 -05:00
parent 4ace1efbe0
commit 9987ce8d4f
3 changed files with 125 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/_includes/default.njk
View File

@@ -51,8 +51,7 @@
{# Web Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Noto+Sans+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600&family=Inter:wght@300;400;500;600&family=Lora:wght@400;500;600&family=Noto+Sans+Display:wght@300;400;500;600&family=Noto+Sans+Mono:wght@300;400;500;600&family=Noto+Sans:wght@300;400;500;600&family=Noto+Serif:wght@300;400;500;600&family=Open+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300;400;500;600&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300;400;500;600&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&display=swap" rel="stylesheet">
{# Turbo + Scroll positioning #}
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>

33
docs/pages/experimental/themer.md
View File

@@ -574,12 +574,7 @@ toc: false
if (darkModeSelect.checked === true) {
// darkModeSelect.checked = false
document.documentElement.className = "flavor-html"
if(theme === 'chic') {
document.documentElement.classList.toggle(`wa-theme-${theme}-light`);
} else {
document.documentElement.classList.toggle(`wa-theme-${theme}-dark`);
}
document.documentElement.classList.toggle(`wa-theme-${theme}-dark`);
}
}, 100)
})
@@ -694,7 +689,8 @@ toc: false
fontFamily = `'inter', sans-serif`;
break;
case 'lora':
fontFamily = `'Lora', serif`
fontFamily = `'Lora', serif`;
break;
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
@@ -748,7 +744,8 @@ toc: false
fontFamily = `'inter', sans-serif`;
break;
case 'lora':
fontFamily = `'Lora', serif`
fontFamily = `'Lora', serif`;
break;
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
@@ -829,11 +826,8 @@ toc: false
darkModeSelect.addEventListener('wa-change', event => {
const el = document.documentElement
const theme = themeSelect.value
if(theme === 'chic') {
el.classList.toggle(`wa-theme-${theme}-light`);
} else {
el.classList.toggle(`wa-theme-${theme}-dark`);
}
el.classList.toggle(`wa-theme-${theme}-dark`);
});
</script>
@@ -927,8 +921,8 @@ toc: false
<wa-card>
<div class="space-vertically" style="height: 100%;">
<wa-alert variant="success" open>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
This is the way.
<wa-icon slot="icon" name="circle-check"></wa-icon>
This is the Way.
</wa-alert>
<wa-select label="Signet" help-text="This identifies your clan. You can change this later.">
<wa-option>Mudhorn</wa-option>
@@ -940,7 +934,7 @@ toc: false
<wa-card>
<div class="space-vertically" style="height: 100%;">
<wa-alert variant="warning" open>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
<wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
It's a trap!
</wa-alert>
<wa-radio-group label="Faction" value="2">
@@ -954,7 +948,7 @@ toc: false
<wa-card>
<div class="space-vertically" style="height: 100%;">
<wa-alert variant="danger" open>
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
That's no moon.
</wa-alert>
<wa-input label="Destination" value="Alderaan"></wa-input>
@@ -967,8 +961,9 @@ toc: false
<style>
html {
background: white;
background-image: radial-gradient(rgb(0 0 0 / .1) 1.5px, transparent 0);
background: var(--wa-color-surface-default);
background-attachment: fixed;
background-image: radial-gradient(var(--wa-color-surface-lowered) 1.5px, transparent 0);
background-size: 28px 28px;
background-position: -19px -19px;
min-height: 100vh;

220
src/themes/chic.css
View File

@@ -4,8 +4,8 @@
:root,
:host,
.wa-theme-chic-dark {
color-scheme: dark;
.wa-theme-chic-light {
color-scheme: light;
/**
* Primitive colors
@@ -81,36 +81,40 @@
/* Surfaces are background layers that UI components and other content rest on.
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-base-95);
--wa-color-surface-border: var(--wa-color-base-90);
/* Text colors are used for standard text elements.
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-normal: var(--wa-color-base-05);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
--wa-color-selection-background: var(--wa-color-lime-40);
--wa-color-selection-text: white;
--wa-color-selection-background: var(--wa-color-lime-80);
--wa-color-selection-text: black;
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
--wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
--wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
/* Overlays dim background elements to focus attention on modal content, such as drawers or dialogs. */
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
--wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: black 5%;
/**
* Semantic theme colors
@@ -126,55 +130,55 @@
* Subtle colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
*/
--wa-color-brand-spot: var(--wa-color-lime-80);
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
--wa-color-brand-fill-subtle: var(--wa-color-lime-10);
--wa-color-brand-fill-highlight: var(--wa-color-lime-20);
--wa-color-brand-border-subtle: var(--wa-color-lime-20);
--wa-color-brand-border-highlight: var(--wa-color-lime-30);
--wa-color-brand-spot: var(--wa-color-lime-70);
--wa-color-brand-spot-darker: var(--wa-color-lime-60);
--wa-color-brand-fill-subtle: var(--wa-color-lime-95);
--wa-color-brand-fill-highlight: var(--wa-color-lime-90);
--wa-color-brand-border-subtle: var(--wa-color-lime-90);
--wa-color-brand-border-highlight: var(--wa-color-lime-80);
--wa-color-brand-text-on-spot: black;
--wa-color-brand-text-on-fill: var(--wa-color-lime-90);
--wa-color-brand-text-on-surface: var(--wa-color-lime-80);
--wa-color-brand-text-on-fill: var(--wa-color-lime-40);
--wa-color-brand-text-on-surface: var(--wa-color-lime-50);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-70);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-spot: var(--wa-color-green-70);
--wa-color-success-spot-darker: var(--wa-color-green-60);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-text-on-spot: black;
--wa-color-success-text-on-fill: var(--wa-color-green-90);
--wa-color-success-text-on-surface: var(--wa-color-green-80);
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-70);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-spot: var(--wa-color-yellow-70);
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-text-on-spot: black;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-60);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-text-on-spot: black;
--wa-color-danger-text-on-fill: var(--wa-color-red-80);
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-spot: var(--wa-color-base-70);
--wa-color-neutral-spot-darker: var(--wa-color-base-60);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: black;
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
/**
* Typography
@@ -322,90 +326,86 @@
--wa-tooltip-arrow-size: 0.375rem;
}
.wa-theme-chic-light,
.wa-theme-chic-light :host {
.wa-theme-chic-dark,
.wa-theme-chic-dark :host {
color-scheme: dark;
/**
* Base theme colors
*/
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-base-95);
--wa-color-surface-border: var(--wa-color-base-90);
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-05);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-selection-background: var(--wa-color-lime-80);
--wa-color-selection-text: black;
--wa-color-selection-background: var(--wa-color-lime-40);
--wa-color-selection-text: white;
--wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 96%, transparent);
--wa-color-focus: color-mix(in oklab, var(--wa-color-lime-60) 90%, transparent);
--wa-color-overlay: color-mix(in oklab, var(--wa-color-base-10) 25%, transparent);
--wa-color-overlay: color-mix(in oklab, black 50%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-base) * 32% + 40%), transparent);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: black 5%;
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-lime-70);
--wa-color-brand-spot-darker: var(--wa-color-lime-60);
--wa-color-brand-fill-subtle: var(--wa-color-lime-95);
--wa-color-brand-fill-highlight: var(--wa-color-lime-90);
--wa-color-brand-border-subtle: var(--wa-color-lime-90);
--wa-color-brand-border-highlight: var(--wa-color-lime-80);
--wa-color-brand-spot: var(--wa-color-lime-80);
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
--wa-color-brand-fill-subtle: var(--wa-color-lime-10);
--wa-color-brand-fill-highlight: var(--wa-color-lime-20);
--wa-color-brand-border-subtle: var(--wa-color-lime-20);
--wa-color-brand-border-highlight: var(--wa-color-lime-30);
--wa-color-brand-text-on-spot: black;
--wa-color-brand-text-on-fill: var(--wa-color-lime-40);
--wa-color-brand-text-on-surface: var(--wa-color-lime-50);
--wa-color-brand-text-on-fill: var(--wa-color-lime-90);
--wa-color-brand-text-on-surface: var(--wa-color-lime-80);
--wa-color-success-spot: var(--wa-color-green-70);
--wa-color-success-spot-darker: var(--wa-color-green-60);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-70);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: black;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-text-on-fill: var(--wa-color-green-90);
--wa-color-success-text-on-surface: var(--wa-color-green-80);
--wa-color-warning-spot: var(--wa-color-yellow-70);
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-70);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: black;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-60);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: black;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-text-on-fill: var(--wa-color-red-80);
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
--wa-color-neutral-spot: var(--wa-color-base-70);
--wa-color-neutral-spot-darker: var(--wa-color-base-60);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-text-on-spot: black;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
}
/* _utility.css */