Partials: Initial Styles
Load Diwa tokens and base styles early to avoid flash-of-unstyled-components and keep spacing, color, and focus contracts consistent from first paint.
Prerequisites
- - A root HTML layout where head tags are controlled.
- - A stable path to the generated Diwa stylesheet.
- - Theme initialization executed before hydration.
Step 1: Link Diwa stylesheet in head
Include the generated token stylesheet once in your root layout.
<head>
<link rel="stylesheet" href="/stencil/diwa-components.css" />
</head>Step 2: Load styles before component registration
Keep stylesheet loading and loader registration in the app shell so upgraded components always inherit expected CSS variables.
<link rel="stylesheet" href="/stencil/diwa-components.css" />
<Script
src="/stencil/diwa-components.esm.js"
type="module"
strategy="beforeInteractive"
/>Step 3: Verify token availability
Use a quick runtime check while integrating to confirm critical tokens are resolved.
const rootStyles = getComputedStyle(document.documentElement);
const accent = rootStyles.getPropertyValue('--diwa-accent').trim();
if (!accent) {
console.warn('Diwa token stylesheet was not loaded.');
}Implementation Notes
- - Load the stylesheet once globally; do not import per component page.
- - Keep theme toggling layered on top of baseline tokens, not as a replacement.
- - Ensure focus and motion token pages are reviewed before custom overrides.
Troubleshooting
- - If components look unthemed, verify the stylesheet path resolves in production too.
- - If focus ring colors are missing, check that CSS variable scoping is on :root or app shell.
- - If first paint flashes unstyled UI, move the link earlier in document head.