Chuk Design System

""" Remotion TypeScript exporter. Exports design tokens as TypeScript constants for Remotion video projects. """ from typing import Any def export_to_remotion_ts(theme: dict[str, Any]) -> str: """ Export theme to Remotion TypeScript constants. Args: theme: Complete theme dictionary from get_theme() Returns: TypeScript string with exported constants """ lines = [ "/**", f" * Design tokens for {theme['metadata']['name']} theme", f" * {theme['metadata']['description']}", " * Auto-generated by chuk-design-system", " */", "", ] # Export colors if "colors" in theme and "semantic" in theme["colors"]: lines.append("// Colors") semantic = theme["colors"]["semantic"] for category, values in semantic.items(): if isinstance(values, dict): if "DEFAULT" in values: var_name = f"color{category.capitalize()}" lines.append(f'export const {var_name} = "{values["DEFAULT"]}";') # Export hover/active states for state in ["hover", "active", "foreground"]: if state in values: var_name = f"color{category.capitalize()}{state.capitalize()}" lines.append(f'export const {var_name} = "{values[state]}";') lines.append("") # Export spacing if "spacing" in theme and "spacing" in theme["spacing"]: lines.append("// Spacing") spacing = theme["spacing"]["spacing"] for key, value in spacing.items(): # Convert "1u" to "spacing1u" var_name = f"spacing{key.replace('.', '_').replace('u', 'U')}" lines.append(f'export const {var_name} = "{value}";') lines.append("") # Export typography if "typography" in theme: lines.append("// Typography") if "sizes" in theme["typography"]: sizes = theme["typography"]["sizes"] for key, value in sizes.items(): var_name = f"fontSize{key.capitalize().replace('xl', 'Xl')}" lines.append(f'export const {var_name} = "{value}";') lines.append("") if "weights" in theme["typography"]: weights = theme["typography"]["weights"] for key, value in weights.items(): var_name = f"fontWeight{key.capitalize()}" lines.append(f"export const {var_name} = {value};") lines.append("") # Export motion (Remotion-specific) if "motion" in theme: lines.append("// Motion") if "durations" in theme["motion"]: durations = theme["motion"]["durations"] for key, value in durations.items(): var_name = f"duration{key.capitalize()}" if "ms" in value: lines.append( f"export const {var_name} = {value['ms']}; // {value['description']}" ) lines.append("") if "easings" in theme["motion"]: easings = theme["motion"]["easings"] for key, value in easings.items(): var_name = f"easing{key.capitalize()}" if "css" in value: lines.append(f'export const {var_name} = "{value["css"]}";') lines.append("") # Export spring configs as objects if "springs" in theme["motion"]: lines.append("// Spring configurations") springs = theme["motion"]["springs"] for key, value in springs.items(): var_name = f"spring{key.capitalize()}" lines.append(f"export const {var_name} = {{") lines.append(f" damping: {value['damping']},") lines.append(f" mass: {value['mass']},") lines.append(f" stiffness: {value['stiffness']},") lines.append(f" overshootClamping: {str(value['overshootClamping']).lower()},") lines.append("};") lines.append("") return "\n".join(lines) def export_spring_only(theme: dict[str, Any]) -> str: """Export only spring configurations for Remotion.""" lines = [] if "motion" in theme and "springs" in theme["motion"]: springs = theme["motion"]["springs"] for key, value in springs.items(): var_name = f"spring{key.capitalize()}" lines.append(f"export const {var_name} = {{") lines.append(f" damping: {value['damping']},") lines.append(f" mass: {value['mass']},") lines.append(f" stiffness: {value['stiffness']},") lines.append(f" overshootClamping: {str(value['overshootClamping']).lower()},") lines.append("};") lines.append("") return "\n".join(lines)