diff --git a/apps/docs/src/App.vue b/apps/docs/src/App.vue
index 3343c0f41..d37e17189 100644
--- a/apps/docs/src/App.vue
+++ b/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%;
}
diff --git a/apps/docs/src/components.d.ts b/apps/docs/src/components.d.ts
index b3ace2e26..b36df2457 100644
--- a/apps/docs/src/components.d.ts
+++ b/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']
diff --git a/apps/docs/src/components/app/AppThemeMenu.vue b/apps/docs/src/components/app/AppThemeMenu.vue
index ad982d19f..11b58126f 100644
--- a/apps/docs/src/components/app/AppThemeMenu.vue
+++ b/apps/docs/src/components/app/AppThemeMenu.vue
@@ -44,6 +44,7 @@
+
diff --git a/apps/docs/src/components/app/settings/AppSettingsTheme.vue b/apps/docs/src/components/app/settings/AppSettingsTheme.vue
index f67fe1327..5bffebf18 100644
--- a/apps/docs/src/components/app/settings/AppSettingsTheme.vue
+++ b/apps/docs/src/components/app/settings/AppSettingsTheme.vue
@@ -73,6 +73,7 @@
+
diff --git a/apps/docs/src/components/app/theme/palette/AppPaletteBulmaButton.vue b/apps/docs/src/components/app/theme/palette/AppPaletteBulmaButton.vue
new file mode 100644
index 000000000..f76b143c5
--- /dev/null
+++ b/apps/docs/src/components/app/theme/palette/AppPaletteBulmaButton.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
diff --git a/apps/docs/src/composables/useThemeToggle.ts b/apps/docs/src/composables/useThemeToggle.ts
index 964187a9f..69cb63f68 100644
--- a/apps/docs/src/composables/useThemeToggle.ts
+++ b/apps/docs/src/composables/useThemeToggle.ts
@@ -19,6 +19,7 @@ export type Palette =
| 'radix'
| 'ant-design'
| 'emerald'
+ | 'bulma'
export const PALETTE_THEMES: Record = {
'vuetify0': { dark: 'dark', light: 'light' },
@@ -27,6 +28,7 @@ export const PALETTE_THEMES: Record
'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 = {
'radix': 'theme-radix',
'ant-design': 'theme-ant-design',
'emerald': 'theme-emerald',
+ 'bulma': 'theme-bulma',
}
export const PALETTE_LABELS: Record = {
@@ -47,6 +50,7 @@ export const PALETTE_LABELS: Record = {
'radix': 'Radix',
'ant-design': 'Ant Design',
'emerald': 'Emerald',
+ 'bulma': 'Bulma',
}
const ACCESSIBILITY_THEMES = [
diff --git a/apps/docs/src/pages/systems/bulma/index.md b/apps/docs/src/pages/systems/bulma/index.md
index 5c1b249dd..4d3c89f29 100644
--- a/apps/docs/src/pages/systems/bulma/index.md
+++ b/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.
+
+
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.
diff --git a/apps/docs/src/plugins/icons.ts b/apps/docs/src/plugins/icons.ts
index 8d4a217a4..00671dc06 100644
--- a/apps/docs/src/plugins/icons.ts
+++ b/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,
diff --git a/apps/docs/src/themes/index.ts b/apps/docs/src/themes/index.ts
index a77fa1c02..edb4d2a61 100644
--- a/apps/docs/src/themes/index.ts
+++ b/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
/**