Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | 405x 405x 405x 405x 405x 405x 405x 405x 3x 402x 402x 402x 136x 136x 72x 72x 194x 194x 402x 405x 11x 11x 4x 4x 4x 4x 4x 4x 4x 4x 11x 3x 3x 3x 3x 3x 3x 11x 2x 2x 2x 2x 2x 2x 2x 11x 1x 1x 1x 1x 1x 1x 1x 1x 11x 1x 1x 1x 1x 1x 1x 1x 11x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 4x 2x | // SPDX-License-Identifier: MIT
// Bulma configuration utilities
import type { BulmaConfig } from './types.ts';
/**
* Convert hex color to HSL values
*/
export function hexToHsl(hex: string): { h: number; s: number; l: number } {
// Remove # if present
const cleanHex = hex.replace('#', '');
// Parse hex to RGB
const r = Number.parseInt(cleanHex.slice(0, 2), 16) / 255;
const g = Number.parseInt(cleanHex.slice(2, 4), 16) / 255;
const b = Number.parseInt(cleanHex.slice(4, 6), 16) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h: number;
const l = (max + min) / 2;
let s: number;
if (max === min) {
h = s = 0; // achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
default:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100),
};
}
/**
* Theme colors interface for Bulma configuration
*/
export interface ThemeColors {
primary: string; // hex color
link: string; // hex color
info: string; // hex color
success: string; // hex color
warning: string; // hex color
danger: string; // hex color
}
/**
* Generate Bulma Sass configuration from theme config
*/
export function generateBulmaConfig(config: BulmaConfig): string {
const lines: string[] = [];
// Breakpoints
if (config.breakpoints) {
lines.push('// Custom breakpoints');
const breakpoints = config.breakpoints;
if (breakpoints.mobile) lines.push(`$mobile: ${breakpoints.mobile};`);
if (breakpoints.tablet) lines.push(`$tablet: ${breakpoints.tablet};`);
if (breakpoints.desktop) lines.push(`$desktop: ${breakpoints.desktop};`);
if (breakpoints.widescreen) lines.push(`$widescreen: ${breakpoints.widescreen};`);
if (breakpoints.fullhd) lines.push(`$fullhd: ${breakpoints.fullhd};`);
lines.push('');
}
// Spacing
if (config.spacing) {
lines.push('// Custom spacing scale');
const spacing = config.spacing;
Eif (spacing.small) lines.push(`$spacing-small: ${spacing.small};`);
if (spacing.medium) lines.push(`$spacing-medium: ${spacing.medium};`);
if (spacing.large) lines.push(`$spacing-large: ${spacing.large};`);
lines.push('');
}
// Sizes
if (config.sizes) {
lines.push('// Custom typography sizes');
const sizes = config.sizes;
if (sizes.small) lines.push(`$size-small: ${sizes.small};`);
Eif (sizes.normal) lines.push(`$size-normal: ${sizes.normal};`);
if (sizes.medium) lines.push(`$size-medium: ${sizes.medium};`);
if (sizes.large) lines.push(`$size-large: ${sizes.large};`);
lines.push('');
}
// Radius
if (config.radius) {
lines.push('// Custom border radius');
const radius = config.radius;
Eif (radius.small) lines.push(`$radius-small: ${radius.small};`);
Eif (radius.normal) lines.push(`$radius: ${radius.normal};`);
Eif (radius.medium) lines.push(`$radius-medium: ${radius.medium};`);
Eif (radius.large) lines.push(`$radius-large: ${radius.large};`);
Eif (radius.rounded) lines.push(`$radius-rounded: ${radius.rounded};`);
lines.push('');
}
// Shadows
if (config.shadows) {
lines.push('// Custom shadows');
const shadows = config.shadows;
Eif (shadows.small) lines.push(`$shadow-small: ${shadows.small};`);
Eif (shadows.normal) lines.push(`$shadow-normal: ${shadows.normal};`);
Eif (shadows.medium) lines.push(`$shadow-medium: ${shadows.medium};`);
Eif (shadows.large) lines.push(`$shadow-large: ${shadows.large};`);
lines.push('');
}
return lines.join('\n');
}
/**
* Generate full Bulma @use statement with configuration
* @param colors - Theme colors in hex format
* @param config - Optional Bulma configuration (breakpoints, spacing, etc.)
*/
export function generateBulmaUse(colors: ThemeColors, config?: BulmaConfig): string {
// Convert hex colors to HSL with error handling
let primaryHsl, linkHsl, infoHsl, successHsl, warningHsl, dangerHsl;
try {
primaryHsl = hexToHsl(colors.primary);
linkHsl = hexToHsl(colors.link);
infoHsl = hexToHsl(colors.info);
successHsl = hexToHsl(colors.success);
warningHsl = hexToHsl(colors.warning);
dangerHsl = hexToHsl(colors.danger);
} catch (error) {
throw new Error(
`Invalid theme colors: ${error instanceof Error ? error.message : String(error)}`
);
}
// Generate Bulma config (breakpoints, spacing, etc.)
const configStr = config ? generateBulmaConfig(config) : '';
// Build the @use statement with color configuration
// Use 'bulma/sass' to ensure variables are properly forwarded and configurable
const colorConfig = `@use 'bulma/sass' with (
$primary: hsl(${primaryHsl.h}, ${primaryHsl.s}%, ${primaryHsl.l}%),
$link: hsl(${linkHsl.h}, ${linkHsl.s}%, ${linkHsl.l}%),
$info: hsl(${infoHsl.h}, ${infoHsl.s}%, ${infoHsl.l}%),
$success: hsl(${successHsl.h}, ${successHsl.s}%, ${successHsl.l}%),
$warning: hsl(${warningHsl.h}, ${warningHsl.s}%, ${warningHsl.l}%),
$danger: hsl(${dangerHsl.h}, ${dangerHsl.s}%, ${dangerHsl.l}%)
);`;
// If no additional config, return just the color config
if (!configStr.trim()) {
return colorConfig;
}
// Combine config and color @use statement with newline separator
return `${configStr}\n${colorConfig}`;
}
|