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 | 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 18x 60x 60x | // SPDX-License-Identifier: MIT
// Bulma-specific CSS variable generation
import type { ThemeFlavor } from '../types.js';
import {
escapeCssId,
generateVariables,
generateHSLComponents,
generateHSLColors,
generateComponentVariables,
} from './helpers.js';
import {
BULMA_SCHEME_MAPPINGS,
PRIMARY_HSL_MAPPING,
STATE_HSL_MAPPINGS,
TEXT_MAPPINGS,
HEADING_MAPPINGS,
CONTENT_MAPPINGS,
TABLE_MAPPINGS,
SYNTAX_MAPPINGS,
SURFACE_MAPPINGS,
COMPONENT_MAPPINGS,
} from './mappings.js';
/**
* Generates theme CSS variables for a flavor using data-driven mappings.
*/
export function generateThemeCSSVariables(flavor: ThemeFlavor): string {
const { tokens } = flavor;
const escapedId = escapeCssId(flavor.id);
const lines: string[] = [];
// Bulma scheme variables
lines.push(...generateVariables(tokens, BULMA_SCHEME_MAPPINGS));
// Primary color HSL components
lines.push(...generateHSLComponents(tokens, PRIMARY_HSL_MAPPING));
// State colors as HSL
lines.push(...generateHSLColors(tokens, STATE_HSL_MAPPINGS));
// Typography (with special formatting for font stacks)
lines.push(` --theme-font-sans:\n ${tokens.typography.fonts.sans};`);
lines.push(` --theme-font-mono:\n ${tokens.typography.fonts.mono};`);
// Text variables
lines.push(...generateVariables(tokens, TEXT_MAPPINGS));
// Heading variables
lines.push(...generateVariables(tokens, HEADING_MAPPINGS));
// Content element variables
lines.push(...generateVariables(tokens, CONTENT_MAPPINGS));
// Table variables
lines.push(...generateVariables(tokens, TABLE_MAPPINGS));
// Syntax highlighting variables
lines.push(...generateVariables(tokens, SYNTAX_MAPPINGS));
// Surface/background variables
lines.push(...generateVariables(tokens, SURFACE_MAPPINGS));
// Component tokens (optional)
const componentLines = generateComponentVariables(tokens, COMPONENT_MAPPINGS);
if (componentLines.length > 0) {
lines.push(...componentLines);
}
// Color scheme
lines.push(` color-scheme: ${flavor.appearance};`);
return `html[data-flavor='${escapedId}'] {\n${lines.join('\n')}\n}`;
}
|