docs(docs): add a Bulma palette activator

apps/docs/src/App.vue

@@ -322,7 +322,7 @@
       );
     }
 
-    [data-theme]:not([data-theme="light"]):not([data-theme="odyssey"]):not([data-theme="tailwind-light"]):not([data-theme="material-3-light"]):not([data-theme="ant-design-light"]):not([data-theme="radix-light"]):not([data-theme="emerald-light"]) &.dot-grid::before {
+    [data-theme]:not([data-theme="light"]):not([data-theme="odyssey"]):not([data-theme="tailwind-light"]):not([data-theme="material-3-light"]):not([data-theme="ant-design-light"]):not([data-theme="radix-light"]):not([data-theme="emerald-light"]):not([data-theme="bulma-light"]) &.dot-grid::before {
       --dot-opacity: 10%;
     }
 

apps/docs/src/components.d.ts

@@ -39,6 +39,7 @@ declare module 'vue' {
     AppNavFooter: typeof import('./components/app/AppNavFooter.vue')['default']
     AppNavLink: typeof import('./components/app/AppNavLink.vue')['default']
     AppPaletteAntDesignButton: typeof import('./components/app/theme/palette/AppPaletteAntDesignButton.vue')['default']
+    AppPaletteBulmaButton: typeof import('./components/app/theme/palette/AppPaletteBulmaButton.vue')['default']
     AppPaletteEmeraldButton: typeof import('./components/app/theme/palette/AppPaletteEmeraldButton.vue')['default']
     AppPaletteMaterial3Button: typeof import('./components/app/theme/palette/AppPaletteMaterial3Button.vue')['default']
     AppPaletteRadixButton: typeof import('./components/app/theme/palette/AppPaletteRadixButton.vue')['default']

apps/docs/src/components/app/AppThemeMenu.vue

@@ -44,6 +44,7 @@
         <AppPaletteRadixButton />
         <AppPaletteAntDesignButton />
         <AppPaletteEmeraldButton />
+        <AppPaletteBulmaButton />
       </div>
 
       <slot name="palettes-footer" />

apps/docs/src/components/app/settings/AppSettingsTheme.vue

@@ -73,6 +73,7 @@
           <AppPaletteRadixButton />
           <AppPaletteAntDesignButton />
           <AppPaletteEmeraldButton />
+          <AppPaletteBulmaButton />
         </div>
       </div>
 

apps/docs/src/components/app/theme/palette/AppPaletteBulmaButton.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  // Composables
+  import { useThemeToggleController } from '@/composables/useThemeToggle'
+
+  // Utilities
+  import { toRef } from 'vue'
+
+  const toggle = useThemeToggleController()
+  const active = toRef(() =>
+    !toggle.isOverrideActive.value && toggle.palette.value === 'bulma',
+  )
+</script>
+
+<template>
+  <AppThemeButton
+    :active
+    icon="theme-bulma"
+    justify="start"
+    label="Bulma"
+    @click="toggle.setPalette('bulma')"
+  />
+</template>

apps/docs/src/composables/useThemeToggle.ts

@@ -19,6 +19,7 @@ export type Palette =
   | 'radix'
   | 'ant-design'
   | 'emerald'
+  | 'bulma'
 
 export const PALETTE_THEMES: Record<Palette, { dark: ThemeId, light: ThemeId }> = {
   'vuetify0': { dark: 'dark', light: 'light' },
@@ -27,6 +28,7 @@ export const PALETTE_THEMES: Record<Palette, { dark: ThemeId, light: ThemeId }>
   'radix': { dark: 'radix', light: 'radix-light' },
   'ant-design': { dark: 'ant-design', light: 'ant-design-light' },
   'emerald': { dark: 'emerald-dark', light: 'emerald-light' },
+  'bulma': { dark: 'bulma-dark', light: 'bulma-light' },
 }
 
 export const PALETTES = Object.keys(PALETTE_THEMES) as Palette[]
@@ -38,6 +40,7 @@ export const PALETTE_ICONS: Record<Palette, string> = {
   'radix': 'theme-radix',
   'ant-design': 'theme-ant-design',
   'emerald': 'theme-emerald',
+  'bulma': 'theme-bulma',
 }
 
 export const PALETTE_LABELS: Record<Palette, string> = {
@@ -47,6 +50,7 @@ export const PALETTE_LABELS: Record<Palette, string> = {
   'radix': 'Radix',
   'ant-design': 'Ant Design',
   'emerald': 'Emerald',
+  'bulma': 'Bulma',
 }
 
 const ACCESSIBILITY_THEMES = [

apps/docs/src/pages/systems/bulma/index.md

@@ -37,6 +37,8 @@ Bulma tells you to bring your own JavaScript. This package is that JavaScript.
 
 <DocsPageFeatures :frontmatter />
 
+<DocsSystemActivator palette="bulma" />
+
 Bulma is a CSS framework — it ships the `.modal`, `.dropdown` and `.navbar` styles and stops there, leaving every open, close, dismiss and keyboard interaction to you. `@paper/bulma` fills that gap: each component renders the markup Bulma documents, against the `bulma.css` you already load, with [Vuetify0](/) supplying behavior, focus management and accessibility.
 
 Nothing about your stylesheet changes. There is no theme to adopt, no class prefix to learn, and no CSS in the package.

apps/docs/src/plugins/icons.ts

@@ -199,6 +199,8 @@ export const [useIconContext, provideIconContext, context] = createTokensContext
         'M20 4Q8.5 8.5 4 20Q15.5 15.5 20 4Z',
       ],
     },
+    // Bulma mark (simple-icons), 24×24
+    'theme-bulma': 'M11.25 0l-6 6-1.5 10.5 7.5 7.5 9-6-6-6 4.5-4.5-7.5-7.5Z',
     'arrow-left': mdiArrowLeft,
     'arrow-right': mdiArrowRight,
     'plus': mdiPlus,

apps/docs/src/themes/index.ts

@@ -746,6 +746,84 @@ export const themes = {
       'github': '#24292f',
     },
   },
+  // Bulma 1.0.4, the `bulma@^1.0` peer @paper/bulma declares. Brand colors and
+  // their on-colors are the published invert steps (primary text is the 5%
+  // step, not white). Neutrals are scheme hue 221 / saturation 14% at each
+  // theme's lightness. Accent is Bulma's purple.
+  'bulma-dark': {
+    id: 'bulma-dark',
+    label: 'Bulma',
+    icon: 'theme-bulma',
+    dark: true,
+    colors: {
+      'primary': '#00d1b2',
+      'secondary': '#4258ff',
+      'accent': '#b86bff',
+      'error': '#ff6685',
+      'info': '#66d1ff',
+      'success': '#48c78e',
+      'warning': '#ffb70f',
+      'background': '#14161a',
+      'surface': '#181b20',
+      'surface-tint': '#1d1f26',
+      'surface-variant': '#2e333d',
+      'divider': '#353a46',
+      'pre': '{bulma-dark.colors.surface-tint}',
+      'on-primary': '#001f1a',
+      'on-secondary': '#f5f6ff',
+      'on-accent': '#1a0033',
+      'on-error': '#1a0005',
+      'on-info': '#002433',
+      'on-success': '#0a1f15',
+      'on-warning': '#291d00',
+      'on-background': '#abb1bf',
+      'on-surface': '#abb1bf',
+      'on-surface-variant': '#768198',
+      'glass-surface': 'rgba(20, 22, 26, 0.7)',
+      'scrollbar-thumb': 'rgba(0, 209, 178, 0.4)',
+      'discord': '{palette.brand.discord}',
+      'vue': '{palette.brand.vue}',
+      'mastered': '{palette.brand.mastered}',
+      'github': '#24292f',
+    },
+  },
+  'bulma-light': {
+    id: 'bulma-light',
+    label: 'Bulma',
+    icon: 'theme-bulma',
+    dark: false,
+    colors: {
+      'primary': '#00d1b2',
+      'secondary': '#4258ff',
+      'accent': '#b86bff',
+      'error': '#ff6685',
+      'info': '#66d1ff',
+      'success': '#48c78e',
+      'warning': '#ffb70f',
+      'background': '#ffffff',
+      'surface': '#f9fafb',
+      'surface-tint': '#f3f4f6',
+      'surface-variant': '#ebecf0',
+      'divider': '#d6d9e0',
+      'pre': '{bulma-light.colors.surface-tint}',
+      'on-primary': '#001f1a',
+      'on-secondary': '#f5f6ff',
+      'on-accent': '#1a0033',
+      'on-error': '#1a0005',
+      'on-info': '#002433',
+      'on-success': '#0a1f15',
+      'on-warning': '#291d00',
+      'on-background': '#404654',
+      'on-surface': '#404654',
+      'on-surface-variant': '#69748c',
+      'glass-surface': 'rgba(255, 255, 255, 0.85)',
+      'scrollbar-thumb': 'rgba(0, 209, 178, 0.4)',
+      'discord': '{palette.brand.discord}',
+      'vue': '{palette.brand.vue}',
+      'mastered': '{palette.brand.mastered}',
+      'github': '#24292f',
+    },
+  },
 } as const satisfies Record<string, ThemeDefinition>
 
 /**