kobalt/bin/modules/templates.js

A cli to generate a theme from figma projects.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createThemeDeclaration = exports.createTheme = exports.createTemplate = exports.createStyledComponentFont = void 0;
const prettier_1 = require("prettier");
const createStyledComponentFont = (name, font) => `export const ${name} = styled.p\`${font}\`;\n`;
exports.createStyledComponentFont = createStyledComponentFont;
const createTemplate = (body) => (0, prettier_1.format)(`
  import type { ReactNode } from "react";
  import styled, { ThemeProvider } from "styled-components";
  import { theme } from "./theme";
  ${body}
  type GeneratedThemeProps = {
    children?: ReactNode;
  };
  
  export const GeneratedTheme = ({ children }: GeneratedThemeProps) => (
    <ThemeProvider theme={theme}>{children}</ThemeProvider>
  );
  `, { parser: "typescript" });
exports.createTemplate = createTemplate;
const createTheme = (tokens) => (0, prettier_1.format)(`
export const theme = ${tokens};
export type Theme = typeof theme;
`, { parser: "typescript" });
exports.createTheme = createTheme;
const createThemeDeclaration = () => (0, prettier_1.format)(`
import type { Theme } from "./${process.env["OUTPUT_FOLDER"]}/theme";
import "styled-components";

declare module "styled-components" {
  interface DefaultTheme extends Theme {}
}
`, { parser: "typescript" });
exports.createThemeDeclaration = createThemeDeclaration;