styles_css.ts (2062B)
1 import { theme_presets } from "../presets/index.js"; 2 import { 3 collect_theme_color_entries, 4 select_theme_presets_keys, 5 theme_modes, 6 to_css_name_suffix 7 } from "./theme_utils.js"; 8 9 export interface StyleVariable { 10 color_var_name: string; 11 token_var_name: string; 12 } 13 14 export const build_styles_css = (variables: StyleVariable[]): string => { 15 const lines: string[] = []; 16 lines.push('@import "tailwindcss";'); 17 lines.push(""); 18 lines.push("@theme {"); 19 20 for (const v of variables) { 21 lines.push( 22 ` ${v.color_var_name}: hsl(var(${v.token_var_name}) / <alpha-value>);` 23 ); 24 } 25 26 lines.push("}"); 27 lines.push(""); 28 29 return lines.join("\n"); 30 }; 31 32 export const build_styles_css_from_presets = ( 33 presets: string[] | undefined 34 ): string => { 35 const selected = select_theme_presets_keys(presets); 36 const map = new Map<string, string>(); 37 38 for (const key of selected) { 39 const preset = theme_presets[key]; 40 41 for (const mode of theme_modes) { 42 const theme = preset[mode]; 43 const entries = collect_theme_color_entries(theme); 44 45 for (const entry of entries) { 46 const suffix = to_css_name_suffix(entry.token_key); 47 const layer_prefix = `--${entry.layer_key}`; 48 49 const color = 50 entry.category === "surfaces" 51 ? `--color-${entry.layer_key}${suffix}` 52 : `--color-${entry.layer_key}-gl${suffix}`; 53 54 const token = 55 entry.category === "surfaces" 56 ? `${layer_prefix}${suffix}` 57 : `${layer_prefix}-gl${suffix}`; 58 59 if (!map.has(color)) { 60 map.set(color, token); 61 } 62 } 63 } 64 } 65 66 const list: StyleVariable[] = [...map.entries()].map( 67 ([color_var_name, token_var_name]) => ({ 68 color_var_name, 69 token_var_name 70 }) 71 ); 72 73 return build_styles_css(list); 74 };