@invisibleloop/pulse 0.20.6 → 0.20.8

package/docs/public/theme.css

@@ -1,8 +1,52 @@
-/* Brut theme tokens */
-:root {
-  --brut-yellow: #f0e642;
-  --brut-ink: #0a0a0a;
-  --brut-surface: #ffffff;
-  --brut-dark: #111114;
-  --brut-darker: #111214;
+/* Brut theme tokens — home page only, scoped to [data-theme="light"] on <body> */
+[data-theme="light"] {
+  /* Confident saturated gold — solid block fill (dark ink text sits on top) */
+  --brut-gold: #e8b613;
+  --brut-gold-deep: #c99700;
+  --brut-ink: #171512;
+  --brut-surface: #faf8f2;
+  --brut-surface-2: #f1ede1;
+  --brut-muted: #5c574c;
+  --brut-dark: #171512;
+  --brut-darker: #100f0c;
+  --brut-surface-dot: #e6e0d2;
+}
+
+/* Site-wide light theme tokens — feeds docs.css's :root token names (--bg,
+   --surface, --text, --accent, etc.) and pulse-ui.css's input tokens, so
+   every docs page (nav, sidebar, guides, component reference, templates
+   gallery) picks up the same warm/gold/paper palette as the home page. */
+[data-theme="light"] {
+  --bg:            var(--brut-surface);
+  --surface:       #ffffff;
+  --surface-2:     var(--brut-surface-2);
+  --border:        #ddd6c4;
+  --border-subtle: #ece7d9;
+  --text:          var(--brut-ink);
+  --muted:         var(--brut-muted);
+  --muted-2:       #8a8272;
+  --accent:        var(--brut-gold-deep);
+  --accent-text:   var(--brut-ink);
+  --accent-hover:  #a97f00;
+  --accent-dim:    rgba(201, 151, 0, 0.12);
+  --green:         #166534;
+  --red:           #b91c1c;
+
+  /* Syntax tokens — dark-on-light, tuned for contrast on --surface-2 */
+  --tok-kw:    #7c3aed;
+  --tok-str:   #15803d;
+  --tok-cmt:   #78716c;
+  --tok-num:   #c2410c;
+  --tok-fn:    #1d4ed8;
+  --tok-prop:  #a16207;
+  --tok-op:    #0891b2;
+  --tok-punct: #57534e;
+
+  /* Sticky header background — replaces the hardcoded rgba(13,13,16,.9) */
+  --header-bg: rgba(250, 248, 242, 0.9);
+
+  /* Callout / tag accents that were hardcoded dark-theme hex in docs.css */
+  --callout-note-icon: #1d4ed8;
+  --tag-required-bg:   rgba(185, 28, 28, 0.12);
+  --tag-required-text: #b91c1c;
 }

package/docs/src/lib/component-page.js

@@ -11,6 +11,7 @@ import { highlight } from './highlight.js'
 export function demo(previewHtml, codeStr, { col = false, scroll = false, bleed = false } = {}) {
   const previewClass = [
     'demo-preview',
+    'is-light',
     col    ? 'demo-preview--col'    : '',
     scroll ? 'demo-preview--scroll' : '',
     bleed  ? 'demo-preview--bleed'  : '',
@@ -20,7 +21,7 @@ export function demo(previewHtml, codeStr, { col = false, scroll = false, bleed
     <svg class="demo-theme-toggle__light" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
   </button>`
   return `<div class="component-demo">
-  <div class="${previewClass}">${toggle}<div class="demo-preview-inner">${previewHtml}</div></div>
+  <div class="${previewClass}">${toggle}<div class="demo-preview-inner ui-theme-light">${previewHtml}</div></div>
   <div class="demo-code">${codeBlock(highlight(codeStr, 'js'))}</div>
 </div>`
 }

package/docs/src/pages/accessibility.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/accessibility')
 export default {
   route: '/accessibility',
   meta: {
+    theme:       'light',
     title: 'Accessibility — Pulse Docs',
     description: 'Keyboard navigation, focus management, semantic HTML, and ARIA patterns in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/accessibility',

package/docs/src/pages/actions.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/actions')
 export default {
   route: '/actions',
   meta: {
+    theme:       'light',
     title: 'Actions — Pulse Docs',
     description: 'Async operations in Pulse — lifecycle, FormData, error handling.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderLayout({

package/docs/src/pages/auth.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/auth')
 export default {
   route: '/auth',
   meta: {
+    theme:       'light',
     title: 'Auth (Auth0) — Pulse Docs',
     description: 'Integrating Auth0 OAuth authentication with Pulse using guard functions, ctx.setCookie, and raw response specs.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/auth',

package/docs/src/pages/caching.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/caching')
 export default {
   route: '/caching',
   meta: {
+    theme:       'light',
     title: 'Caching — Pulse Docs',
     description: 'HTTP cache headers, in-process server data caching, and asset caching in Pulse.',
-    styles: ['/docs.css'],
+    styles: ['/theme.css', '/docs.css'],
   },
   view: () => renderLayout({
     currentHref: '/caching',

package/docs/src/pages/components/accordion.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/accordion')
 export default {
   route: '/components/accordion',
   meta: {
+    theme:       'light',
     title: 'Accordion — Pulse Docs',
     description: 'Accordion component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/accordion',

package/docs/src/pages/components/alert.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/alert')
 export default {
   route: '/components/alert',
   meta: {
+    theme:       'light',
     title: 'Alert — Pulse Docs',
     description: 'Alert component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/alert',

package/docs/src/pages/components/app-badge.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/app-badge')
 export default {
   route: '/components/app-badge',
   meta: {
+    theme:       'light',
     title: 'App Badge — Pulse Docs',
     description: 'App Badge component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/app-badge',

package/docs/src/pages/components/avatar.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/avatar')
 export default {
   route: '/components/avatar',
   meta: {
+    theme:       'light',
     title: 'Avatar — Pulse Docs',
     description: 'Avatar component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/avatar',

package/docs/src/pages/components/badge.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/badge')
 export default {
   route: '/components/badge',
   meta: {
+    theme:       'light',
     title: 'Badge — Pulse Docs',
     description: 'Badge component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/badge',

package/docs/src/pages/components/breadcrumbs.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/breadcrumbs')
 export default {
   route: '/components/breadcrumbs',
   meta: {
+    theme:       'light',
     title: 'Breadcrumbs — Pulse Docs',
     description: 'Accessible breadcrumb navigation component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/breadcrumbs',

package/docs/src/pages/components/button.js

@@ -9,9 +9,10 @@ const { prev, next } = prevNext('/components/button')
 export default {
   route: '/components/button',
   meta: {
+    theme:       'light',
     title: 'Button — Pulse Docs',
     description: 'Button component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/button',

package/docs/src/pages/components/card.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/card')
 export default {
   route: '/components/card',
   meta: {
+    theme:       'light',
     title: 'Card — Pulse Docs',
     description: 'Card component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/card',

package/docs/src/pages/components/charts.js

@@ -29,9 +29,10 @@ const traffic = [
 export default {
   route: '/components/charts',
   meta: {
+    theme:       'light',
     title: 'Charts — Pulse Docs',
     description: 'Server-rendered SVG charts for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/charts',

package/docs/src/pages/components/checkbox.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/checkbox')
 export default {
   route: '/components/checkbox',
   meta: {
+    theme:       'light',
     title:       'Checkbox — Pulse Docs',
     description: 'Custom-styled checkbox component for Pulse UI.',
-    styles:      ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/checkbox',

package/docs/src/pages/components/cluster.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/cluster')
 export default {
   route: '/components/cluster',
   meta: {
+    theme:       'light',
     title: 'Cluster — Pulse Docs',
     description: 'Cluster component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/cluster',

package/docs/src/pages/components/container.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/container')
 export default {
   route: '/components/container',
   meta: {
+    theme:       'light',
     title: 'Container — Pulse Docs',
     description: 'Container component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/container',

package/docs/src/pages/components/cta.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/cta')
 export default {
   route: '/components/cta',
   meta: {
+    theme:       'light',
     title: 'CTA — Pulse Docs',
     description: 'Call-to-action block with eyebrow, heading, body text, and an actions slot.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderComponentPage({

package/docs/src/pages/components/divider.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/divider')
 export default {
   route: '/components/divider',
   meta: {
+    theme:       'light',
     title: 'Divider — Pulse Docs',
     description: 'Divider component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/divider',

package/docs/src/pages/components/empty.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/empty')
 export default {
   route: '/components/empty',
   meta: {
+    theme:       'light',
     title: 'Empty — Pulse Docs',
     description: 'Empty state component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/empty',

package/docs/src/pages/components/feature.js

@@ -9,9 +9,10 @@ const { prev, next } = prevNext('/components/feature')
 export default {
   route: '/components/feature',
   meta: {
+    theme:       'light',
     title: 'Feature — Pulse Docs',
     description: 'Feature component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/feature',

package/docs/src/pages/components/fieldset.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/fieldset')
 export default {
   route: '/components/fieldset',
   meta: {
+    theme:       'light',
     title: 'Fieldset — Pulse Docs',
     description: 'Semantic grouping of related form fields with an accessible legend.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/fieldset',

package/docs/src/pages/components/fileupload.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/file-upload')
 export default {
   route: '/components/file-upload',
   meta: {
+    theme:       'light',
     title: 'File Upload — Pulse Docs',
     description: 'Drag-and-drop file upload zone component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   state: { fileName: '', fileSize: '' },
   mutations: {

package/docs/src/pages/components/footer.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/footer')
 export default {
   route: '/components/footer',
   meta: {
+    theme:       'light',
     title: 'Footer — Pulse Docs',
     description: 'Accessible site footer with logo slot, navigation links, and legal text.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/footer',

package/docs/src/pages/components/grid.js

@@ -12,9 +12,10 @@ const item = (label) =>
 export default {
   route: '/components/grid',
   meta: {
+    theme:       'light',
     title: 'Grid — Pulse Docs',
     description: 'Grid component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/grid',

package/docs/src/pages/components/heading.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/heading')
 export default {
   route: '/components/heading',
   meta: {
+    theme:       'light',
     title: 'Heading — Pulse Docs',
     description: 'Styled semantic heading component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/heading',

package/docs/src/pages/components/hero.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/hero')
 export default {
   route: '/components/hero',
   meta: {
+    theme:       'light',
     title: 'Hero — Pulse Docs',
     description: 'Hero component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   state: {},
   view: () => {

package/docs/src/pages/components/icons.js

@@ -382,9 +382,10 @@ feature({ icon: iconCode({   size: 22, bg: 'square', bgColor: 'muted'   }), titl
 export default {
   route: '/components/icons',
   meta: {
+    theme:       'light',
     title: 'Icons — Pulse Docs',
     description: 'Built-in icon set for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
 
   // Shell: all visible content (nav, examples, icon grid) — sends immediately.

package/docs/src/pages/components/image.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/image')
 export default {
   route: '/components/image',
   meta: {
+    theme:       'light',
     title: 'Image — Pulse Docs',
     description: 'Responsive image component with optional aspect-ratio crop and caption for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/image',

package/docs/src/pages/components/input.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/input')
 export default {
   route: '/components/input',
   meta: {
+    theme:       'light',
     title: 'Input — Pulse Docs',
     description: 'Input component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/input',

package/docs/src/pages/components/media.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/media')
 export default {
   route: '/components/media',
   meta: {
+    theme:       'light',
     title: 'Media — Pulse Docs',
     description: 'Media component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/media',

package/docs/src/pages/components/modal.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/modal')
 export default {
   route: '/components/modal',
   meta: {
+    theme:       'light',
     title: 'Modal — Pulse Docs',
     description: 'Modal dialog component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/modal',

package/docs/src/pages/components/nav.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/nav')
 export default {
   route: '/components/nav',
   meta: {
+    theme:       'light',
     title: 'Nav — Pulse Docs',
     description: 'Nav component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/nav',

package/docs/src/pages/components/phone-frame.js

@@ -28,9 +28,10 @@ const sampleScreen = `
 export default {
   route: '/components/phone-frame',
   meta: {
+    theme:       'light',
     title: 'Phone Frame — Pulse Docs',
     description: 'Phone Frame component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   state: {},
   view: () => renderComponentPage({

package/docs/src/pages/components/progress.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/progress')
 export default {
   route: '/components/progress',
   meta: {
+    theme:       'light',
     title: 'Progress — Pulse Docs',
     description: 'Progress bar component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/progress',

package/docs/src/pages/components/prose.js

@@ -21,9 +21,10 @@ const SAMPLE_HTML = `<h2>Why great coffee starts with water</h2>
 export default {
   route: '/components/prose',
   meta: {
+    theme:       'light',
     title: 'Prose — Pulse Docs',
     description: 'Typography wrapper for CMS output and rich text content in Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/prose',

package/docs/src/pages/components/pullquote.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/pullquote')
 export default {
   route: '/components/pullquote',
   meta: {
+    theme:       'light',
     title: 'Pullquote — Pulse Docs',
     description: 'Styled blockquote component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/pullquote',

package/docs/src/pages/components/radio.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/radio')
 export default {
   route: '/components/radio',
   meta: {
+    theme:       'light',
     title: 'Radio — Pulse Docs',
     description: 'Radio button and radio group components for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/radio',

package/docs/src/pages/components/rating.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/rating')
 export default {
   route: '/components/rating',
   meta: {
+    theme:       'light',
     title: 'Rating — Pulse Docs',
     description: 'Star rating display and interactive input component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/rating',

package/docs/src/pages/components/search.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/search')
 export default {
   route: '/components/search',
   meta: {
+    theme:       'light',
     title: 'Search — Pulse Docs',
     description: 'Search input component with icon, debounce binding, and clear button.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/search',

package/docs/src/pages/components/section.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/section')
 export default {
   route: '/components/section',
   meta: {
+    theme:       'light',
     title: 'Section — Pulse Docs',
     description: 'Vertical padding wrapper with optional background. Compose with container() for full-width background with constrained content.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/section',

package/docs/src/pages/components/segmented.js

@@ -8,9 +8,10 @@ const { prev, next } = prevNext('/components/segmented')
 export default {
   route: '/components/segmented',
   meta: {
+    theme:       'light',
     title: 'Segmented — Pulse Docs',
     description: 'iOS-style segmented control component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/segmented',

package/docs/src/pages/components/select.js

@@ -7,9 +7,10 @@ const { prev, next } = prevNext('/components/select')
 export default {
   route: '/components/select',
   meta: {
+    theme:       'light',
     title: 'Select — Pulse Docs',
     description: 'Select component for Pulse UI.',
-    styles: ['/pulse-ui.css', '/docs.css'],
+    styles: ['/pulse-ui.css', '/theme.css', '/docs.css'],
   },
   view: () => renderComponentPage({
     currentHref: '/components/select',