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 /**