|
| 1 | +import type { ControlModule } from '../../app/registry'; |
| 2 | +import type { ThemeConfig } from '../../compiler/types'; |
| 3 | + |
| 4 | +declare module '../../compiler/types' { |
| 5 | + // eslint-disable-next-line @typescript-eslint/consistent-type-definitions |
| 6 | + interface ThemeModules { |
| 7 | + icons: { |
| 8 | + sizes: Record<string, string>; |
| 9 | + stroke: Record<string, string>; |
| 10 | + }; |
| 11 | + } |
| 12 | +} |
| 13 | + |
| 14 | +export const iconsCompilerEntry = { |
| 15 | + id: 'icons' as const, |
| 16 | + title: 'Iconography', |
| 17 | + isEnabled: (config: ThemeConfig) => Boolean(config.icons), |
| 18 | + emitTokens: (config: ThemeConfig) => { |
| 19 | + if (!config.icons) return ''; |
| 20 | + const sizeLines = Object.keys(config.icons.sizes) |
| 21 | + .map((key) => ` --icon-size-${key}: ${config.icons.sizes[key]};`); |
| 22 | + const strokeLines = Object.keys(config.icons.stroke) |
| 23 | + .map((key) => ` --icon-stroke-${key}: ${config.icons.stroke[key]};`); |
| 24 | + return [...sizeLines, ...strokeLines].join('\n'); |
| 25 | + }, |
| 26 | + emitUtilities: (config: ThemeConfig) => { |
| 27 | + if (!config.icons) return ''; |
| 28 | + const sizeUtils = Object.keys(config.icons.sizes) |
| 29 | + .map((key) => `.icon-${key} { width: var(--icon-size-${key}); height: var(--icon-size-${key}); }`); |
| 30 | + const strokeUtils = Object.keys(config.icons.stroke) |
| 31 | + .map((key) => `.icon-stroke-${key} { stroke-width: var(--icon-stroke-${key}); }`); |
| 32 | + return [...sizeUtils, ...strokeUtils].join('\n'); |
| 33 | + }, |
| 34 | + emitComponents: () => '', |
| 35 | +}; |
| 36 | + |
| 37 | +export const iconsControlModule: ControlModule = { |
| 38 | + id: 'icons', |
| 39 | + title: 'Iconography Scale', |
| 40 | + mount: (container, api) => { |
| 41 | + const renderSizeInput = (key: string, label: string) => ` |
| 42 | + <div class="control-group"> |
| 43 | + <label for="icon-size-${key}">${label}</label> |
| 44 | + <div class="range-with-value"> |
| 45 | + <input id="icon-size-${key}" name="icons.sizes.${key}" type="range" min="8" max="64" step="2" /> |
| 46 | + <span class="range-value" id="icon-size-${key}-val">0px</span> |
| 47 | + </div> |
| 48 | + </div> |
| 49 | + `; |
| 50 | + |
| 51 | + const renderStrokeInput = (key: string, label: string) => ` |
| 52 | + <div class="control-group"> |
| 53 | + <label for="icon-stroke-${key}">${label}</label> |
| 54 | + <div class="range-with-value"> |
| 55 | + <input id="icon-stroke-${key}" name="icons.stroke.${key}" type="range" min="0.5" max="4" step="0.5" /> |
| 56 | + <span class="range-value" id="icon-stroke-${key}-val">0px</span> |
| 57 | + </div> |
| 58 | + </div> |
| 59 | + `; |
| 60 | + |
| 61 | + container.innerHTML = ` |
| 62 | + <div class="icons-editor" style="display: grid; gap: 16px;"> |
| 63 | + <div class="control-subgroup"> |
| 64 | + <h4 style="margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; opacity: 0.6;">Sizes</h4> |
| 65 | + ${renderSizeInput('xs', 'Extra Small (xs)')} |
| 66 | + ${renderSizeInput('sm', 'Small (sm)')} |
| 67 | + ${renderSizeInput('md', 'Medium (md)')} |
| 68 | + ${renderSizeInput('lg', 'Large (lg)')} |
| 69 | + ${renderSizeInput('xl', 'Extra Large (xl)')} |
| 70 | + </div> |
| 71 | + <div class="control-subgroup" style="padding-top: 8px; border-top: 1px solid rgba(128,128,128,0.1);"> |
| 72 | + <h4 style="margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; opacity: 0.6;">Stroke Weight</h4> |
| 73 | + ${renderStrokeInput('thin', 'Thin')} |
| 74 | + ${renderStrokeInput('base', 'Base')} |
| 75 | + ${renderStrokeInput('bold', 'Bold')} |
| 76 | + </div> |
| 77 | + </div> |
| 78 | + `; |
| 79 | + |
| 80 | + const sizeKeys = ['xs', 'sm', 'md', 'lg', 'xl']; |
| 81 | + const strokeKeys = ['thin', 'base', 'bold']; |
| 82 | + |
| 83 | + const sync = () => { |
| 84 | + const cfg = api.getConfig(); |
| 85 | + if (!cfg.icons) return; |
| 86 | + |
| 87 | + sizeKeys.forEach((key) => { |
| 88 | + const input = container.querySelector<HTMLInputElement>(`#icon-size-${key}`); |
| 89 | + const valSpan = container.querySelector<HTMLElement>(`#icon-size-${key}-val`); |
| 90 | + if (input && cfg.icons.sizes[key]) { |
| 91 | + const val = Number.parseInt(cfg.icons.sizes[key], 10) || 0; |
| 92 | + input.value = String(val); |
| 93 | + if (valSpan) valSpan.textContent = `${val}px`; |
| 94 | + } |
| 95 | + }); |
| 96 | + |
| 97 | + strokeKeys.forEach((key) => { |
| 98 | + const input = container.querySelector<HTMLInputElement>(`#icon-stroke-${key}`); |
| 99 | + const valSpan = container.querySelector<HTMLElement>(`#icon-stroke-${key}-val`); |
| 100 | + if (input && cfg.icons.stroke[key]) { |
| 101 | + const val = Number.parseFloat(cfg.icons.stroke[key]) || 0; |
| 102 | + input.value = String(val); |
| 103 | + if (valSpan) valSpan.textContent = `${val}`; |
| 104 | + } |
| 105 | + }); |
| 106 | + }; |
| 107 | + |
| 108 | + const onChange = (e: Event) => { |
| 109 | + const target = e.target as HTMLInputElement; |
| 110 | + const path = target.name.split('.'); // ['icons', 'sizes'|'stroke', key] |
| 111 | + const key = path[2]; |
| 112 | + const type = path[1] as 'sizes' | 'stroke'; |
| 113 | + const val = type === 'sizes' ? `${target.value}px` : target.value; |
| 114 | + |
| 115 | + api.updateConfig((cfg) => ({ |
| 116 | + ...cfg, |
| 117 | + icons: { |
| 118 | + ...cfg.icons, |
| 119 | + [type]: { |
| 120 | + ...cfg.icons[type], |
| 121 | + [key]: val, |
| 122 | + }, |
| 123 | + }, |
| 124 | + })); |
| 125 | + }; |
| 126 | + |
| 127 | + container.addEventListener('input', onChange); |
| 128 | + const unsubscribe = api.subscribe(sync); |
| 129 | + sync(); |
| 130 | + |
| 131 | + return () => { |
| 132 | + unsubscribe(); |
| 133 | + container.removeEventListener('input', onChange); |
| 134 | + }; |
| 135 | + } |
| 136 | +}; |
| 137 | + |
| 138 | +export const iconsPreviewModule = { |
| 139 | + id: 'icons', |
| 140 | + title: 'Iconography Spec', |
| 141 | + render: (config: ThemeConfig) => { |
| 142 | + const icons = config.icons ?? iconsDefaults.icons; |
| 143 | + const sizes = ['xs', 'sm', 'md', 'lg', 'xl']; |
| 144 | + const strokes = ['thin', 'base', 'bold']; |
| 145 | + |
| 146 | + // Simple SVG Icon Template |
| 147 | + const iconSvg = (sizeClass: string, strokeClass: string) => ` |
| 148 | + <svg class="${sizeClass} ${strokeClass}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="transition: all 0.2s ease;"> |
| 149 | + <circle cx="12" cy="12" r="10"></circle> |
| 150 | + <line x1="12" y1="8" x2="12" y2="12"></line> |
| 151 | + <line x1="12" y1="16" x2="12.01" y2="16"></line> |
| 152 | + </svg> |
| 153 | + `; |
| 154 | + |
| 155 | + return ` |
| 156 | + <div style="color: var(--on-background); font-family: var(--font-family, sans-serif);"> |
| 157 | + <h3>Icon Sizes</h3> |
| 158 | + <p style="font-size: 12px; opacity: 0.7; margin-bottom: 24px;">Standardized size scale for all interface icons.</p> |
| 159 | + |
| 160 | + <div style="display: flex; align-items: flex-end; gap: 32px; padding: 24px; background: var(--surface-card); border-radius: 12px; border: 1px solid rgba(128,128,128,0.1); margin-bottom: 40px;"> |
| 161 | + ${sizes.map(s => ` |
| 162 | + <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;"> |
| 163 | + <div style="color: var(--color-primary-500);">${iconSvg(`icon-${s}`, 'icon-stroke-base')}</div> |
| 164 | + <div style="text-align: center;"> |
| 165 | + <div style="font-weight: 800; font-size: 10px;">${s.toUpperCase()}</div> |
| 166 | + <div style="font-size: 9px; opacity: 0.5;">${icons.sizes[s]}</div> |
| 167 | + </div> |
| 168 | + </div> |
| 169 | + `).join('')} |
| 170 | + </div> |
| 171 | +
|
| 172 | + <h3>Stroke Weights</h3> |
| 173 | + <p style="font-size: 12px; opacity: 0.7; margin-bottom: 24px;">Standardized line weights for stroked icon sets.</p> |
| 174 | + |
| 175 | + <div style="display: flex; gap: 40px; padding: 24px; background: var(--surface-card); border-radius: 12px; border: 1px solid rgba(128,128,128,0.1);"> |
| 176 | + ${strokes.map(st => ` |
| 177 | + <div style="display: flex; align-items: center; gap: 16px;"> |
| 178 | + <div style="color: var(--color-primary-500);">${iconSvg('icon-lg', `icon-stroke-${st}`)}</div> |
| 179 | + <div> |
| 180 | + <div style="font-weight: 800; font-size: 11px;">${st.toUpperCase()}</div> |
| 181 | + <div style="font-size: 10px; opacity: 0.5;">${icons.stroke[st]}px</div> |
| 182 | + </div> |
| 183 | + </div> |
| 184 | + `).join('')} |
| 185 | + </div> |
| 186 | + </div> |
| 187 | + `; |
| 188 | + }, |
| 189 | +}; |
| 190 | + |
| 191 | +export const iconsDefaults = { |
| 192 | + icons: { |
| 193 | + sizes: { |
| 194 | + xs: '12px', |
| 195 | + sm: '16px', |
| 196 | + md: '24px', |
| 197 | + lg: '32px', |
| 198 | + xl: '48px', |
| 199 | + }, |
| 200 | + stroke: { |
| 201 | + thin: '1', |
| 202 | + base: '2', |
| 203 | + bold: '3', |
| 204 | + }, |
| 205 | + }, |
| 206 | +}; |
0 commit comments