@spark-ui/theme-utils 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@1.1.1...@spark-ui/theme-utils@1.2.0) (2023-02-13)
+
+### Features
+
+- **theme-utils:** improve build process for the theme-utils package ([7e53f89](https://github.com/adevinta/spark/commit/7e53f89bb80c7da4f5816b3bdb64b5b9a23d4874)), closes [#219](https://github.com/adevinta/spark/issues/219)
+
+## [1.1.1](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@1.1.0...@spark-ui/theme-utils@1.1.1) (2023-02-13)
+
+**Note:** Version bump only for package @spark-ui/theme-utils
+
 # [1.1.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@0.0.1...@spark-ui/theme-utils@1.1.0) (2023-02-10)
 
 ### Features

package/dist/createCSSTokensFile.d.ts

@@ -0,0 +1,25 @@
+import type { RequireAtLeastOne } from 'type-fest';
+import type { Theme } from './types';
+/**
+ * Creates a CSS file containing theme tokens represented as CSS custom properties
+ *
+ * @param {string} path - The file path where the CSS file will be created.
+ * @param {Record<string, Theme>} themeRecord - A record (with a required key of "default") of themes that will be included in the CSS Tokens file.
+ *
+ * @returns {void}
+ *
+ * @example
+ *
+ * const defaultTheme: Theme = { ... }
+ * const darkTheme: Theme = { ... }
+ * const otherTheme: Theme = { ... }
+ *
+ * const themes = {
+ *   default: defaultTheme,
+ *   dark: darkTheme
+ *   other: otherTheme
+ * }
+ *
+ * createCSSTokensFile('somePath.css', themes)
+ */
+export declare function createCSSTokensFile(path: string, themeRecord: RequireAtLeastOne<Record<string, Theme>, 'default'>): void;

package/dist/createTailwindThemeConfigFile.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Creates a Tailwind config file that links the [theme options](https://tailwindcss.com/docs/theme#configuration-reference) provided by Tailwind with the CSS custom property values generated using the "createCSSTokensFile" function
+ *
+ * @param {string} path - The file path where the Tailwind config file will be created.
+ *
+ * @returns {void}
+ *
+ * @example
+ *
+ * createTailwindThemeConfigFile('tailwind.theme.js')
+ */
+export declare function createTailwindThemeConfigFile(path: string): void;

package/dist/createTheme.d.ts

@@ -0,0 +1,15 @@
+import { PartialDeep } from 'type-fest';
+import type { Theme } from './types';
+/**
+ * Create a custom theme by merging the default theme with a partial custom theme passed as an argument.
+ *
+ * @param {PartialDeep<Theme>} theme - A partial theme object of type PartialDeep<Theme> which holds the theme values that need to be customized or overridden
+ *
+ * @returns {Theme}
+ *
+ * @example
+ *
+ * const alternativeTheme: PartialDeep<Theme> = { ... }
+ * const newTheme = createTheme(alternativeTheme)
+ */
+export declare function createTheme(theme?: PartialDeep<Theme>): Theme;

package/dist/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const defaultTheme: Theme;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { createTheme } from './createTheme';
+export { createTailwindThemeConfigFile } from './createTailwindThemeConfigFile';
+export { createCSSTokensFile } from './createCSSTokensFile';
+export { defaultTheme } from './defaultTheme';
+export type { Theme } from './types';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";var M=Object.defineProperty,P=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var y=(e,r,t)=>r in e?M(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,$=(e,r)=>{for(var t in r||(r={}))g.call(r,t)&&y(e,t,r[t]);if(m)for(var t of m(r))b.call(r,t)&&y(e,t,r[t]);return e},h=(e,r)=>P(e,z(r));var S=(e,r)=>{var t={};for(var n in e)g.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&m)for(var n of m(e))r.indexOf(n)<0&&b.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("deepmerge"),c=require("fs"),j=require("parent-module"),w=require("path"),U=require("hex-rgb"),d={screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},borderWidth:{none:"0",xs:"0.1rem",s:"0.2rem",m:"0.4rem"},colors:{transparent:"transparent",bg:{primary:"#f28133",primaryAccent:"#ad4c07",primarySubtle:"#fba56c",secondary:"#3481f2",secondaryAccent:"#074aad",secondarySubtle:"#4c93f7",body:"#fff"},bd:{primary:"#f28133",secondary:"#3481f2"},fg:{default:"#334155",accent:"#1161d7",cta:"#000",ctaInverse:"#fff"}},fontFamily:{openSans:'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"'},fontSize:{xs:"1rem",s:"1.2rem",m:"1.4rem",l:"1.6rem",xl:"1.8rem","2xl":"2rem","3xl":"2.4rem"},fontWeight:{regular:400,semibold:600,bold:700},lineHeight:{xs:"1.4rem",s:"1.7rem",m:"1.9rem",l:"2.2rem",xl:"2.4rem","2xl":"2.6rem","3xl":"2.8rem"},width:{pageMin:"320px",pageMax:"1066px"},borderRadius:{none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",full:"100%"},boxShadow:{none:"none",normal:"0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)",highlighted:"0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)"},spacing:{auto:"auto",none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",xl:"3.2rem",xxl:"4rem"},zIndex:{hide:-1,base:0,raised:1,dropdown:1e3,sticky:1100,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800}};function N(e){return Object.entries(e)}function l(e){return e.replace(/[A-Z]/g,r=>`-${r.toLocaleLowerCase()}`)}function O(e){return typeof e=="number"?!1:/^#[0-9a-fA-F]+$/.test(e)}function A(e){return typeof e=="string"||typeof e=="number"}function C(e,r=1){const t={};for(const n in e){const o=typeof e[n]=="object"?C(e[n],r+1):e[n];t[r>1?n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase():n]=o}return t}function k(e){let r=function(n){var i;const o=n.slice(n.indexOf(":")+1);return o.replace(((i=o.match(/\/([^/]+)\.(jsx|js|tsx|ts|mjs|mts|cjs|cts)(?!$)/g))==null?void 0:i.at(0))||"","")}(e).replace(/\\/g,"/"),t="";return r[0]==="/"?(t="/",r=r.slice(1)):r[1]===":"&&(t=r.slice(0,3),r=r.slice(3)),{filepath:r,rootPath:t}}function H(e){const r=JSON.parse(JSON.stringify(e));return function t(n,o){N(n).forEach(([i,a])=>{if(a===null||typeof a!="object"){if(A(a)){const f=/--colors/.test(o||"")&&O(a)?`rgb(var(${o}-${l(i)}) / <alpha-value>)`:`var(${o}-${l(i)})`;n[i]=f}}else t(a,l((o?`--${o}-${i}`:`--${i}`).replace(/-{3,}/,"--")))})}(r),C(r)}const v=e=>Object.entries(e).map(([r,t])=>`${r}:${t}`).join(";"),R=e=>{return(r=e,Object.keys(r)).map(t=>{const i=function(a,f){const x={};return function F(T,u){N(T).forEach(([p,s])=>{if(s===null||typeof s!="object"){if(A(s)){const q=()=>{if(O(s)){const{red:E,green:I,blue:L}=U(s);return`${E} ${I} ${L}`}return s};x[`${u}-${l(p)}`]=q()}}else F(s,l((u?`--${u}-${p}`:`--${p}`).replace(/-{3,}/,"--")))})}(a),h($({},x),{className:f})}(e[t],t),{className:n}=i,o=S(i,["className"]);return t==="default"?`:root{${v(o)}}`:`.${n}{${v(o)}}`});var r};exports.createCSSTokensFile=function(e,r){const{filepath:t,rootPath:n}=k(w.join(j()||"",e));t.split("/").slice(0,-1).reduce((o,i)=>{const a=o+i+"/";return c.existsSync(a)||c.mkdirSync(a),a},n);try{c.appendFileSync(n+t,`
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @layer base {${R(r).join("")}}
+        `,{flag:"w"}),console.log(`✨ CSS tokens file has been created 👉 ${e}`)}catch(o){console.error(o)}},exports.createTailwindThemeConfigFile=function(e){const{filepath:r,rootPath:t}=k(w.join(j()||"",e));r.split("/").slice(0,-1).reduce((n,o)=>{const i=n+o+"/";return c.existsSync(i)||c.mkdirSync(i),i},t);try{c.writeFileSync(t+r,`module.exports = ${JSON.stringify(H(d))}`,{flag:"w"}),console.log(`✨ Tailwind theme config file has been created 👉 ${e}`)}catch(n){console.error(n)}},exports.createTheme=function(e={}){return J(d,e)},exports.defaultTheme=d;

package/dist/index.mjs

@@ -0,0 +1,133 @@
+var M = Object.defineProperty, P = Object.defineProperties;
+var U = Object.getOwnPropertyDescriptors;
+var l = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var d = (e, r, t) => r in e ? M(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, b = (e, r) => {
+  for (var t in r || (r = {}))
+    x.call(r, t) && d(e, t, r[t]);
+  if (l)
+    for (var t of l(r))
+      g.call(r, t) && d(e, t, r[t]);
+  return e;
+}, y = (e, r) => P(e, U(r));
+var $ = (e, r) => {
+  var t = {};
+  for (var o in e)
+    x.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && l)
+    for (var o of l(e))
+      r.indexOf(o) < 0 && g.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import H from "deepmerge";
+import { existsSync as S, mkdirSync as j, writeFileSync as R, appendFileSync as W } from "fs";
+import w from "parent-module";
+import { join as k } from "path";
+import Z from "hex-rgb";
+const v = { screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }, borderWidth: { none: "0", xs: "0.1rem", s: "0.2rem", m: "0.4rem" }, colors: { transparent: "transparent", bg: { primary: "#f28133", primaryAccent: "#ad4c07", primarySubtle: "#fba56c", secondary: "#3481f2", secondaryAccent: "#074aad", secondarySubtle: "#4c93f7", body: "#fff" }, bd: { primary: "#f28133", secondary: "#3481f2" }, fg: { default: "#334155", accent: "#1161d7", cta: "#000", ctaInverse: "#fff" } }, fontFamily: { openSans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"' }, fontSize: { xs: "1rem", s: "1.2rem", m: "1.4rem", l: "1.6rem", xl: "1.8rem", "2xl": "2rem", "3xl": "2.4rem" }, fontWeight: { regular: 400, semibold: 600, bold: 700 }, lineHeight: { xs: "1.4rem", s: "1.7rem", m: "1.9rem", l: "2.2rem", xl: "2.4rem", "2xl": "2.6rem", "3xl": "2.8rem" }, width: { pageMin: "320px", pageMax: "1066px" }, borderRadius: { none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", full: "100%" }, boxShadow: { none: "none", normal: "0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)", highlighted: "0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)" }, spacing: { auto: "auto", none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", xl: "3.2rem", xxl: "4rem" }, zIndex: { hide: -1, base: 0, raised: 1, dropdown: 1e3, sticky: 1100, overlay: 1300, modal: 1400, popover: 1500, skipLink: 1600, toast: 1700, tooltip: 1800 } };
+function Y(e = {}) {
+  return H(v, e);
+}
+function N(e) {
+  return Object.entries(e);
+}
+function c(e) {
+  return e.replace(/[A-Z]/g, (r) => `-${r.toLocaleLowerCase()}`);
+}
+function A(e) {
+  return typeof e == "number" ? !1 : /^#[0-9a-fA-F]+$/.test(e);
+}
+function C(e) {
+  return typeof e == "string" || typeof e == "number";
+}
+function F(e, r = 1) {
+  const t = {};
+  for (const o in e) {
+    const n = typeof e[o] == "object" ? F(e[o], r + 1) : e[o];
+    t[r > 1 ? o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase() : o] = n;
+  }
+  return t;
+}
+function O(e) {
+  let r = function(o) {
+    var s;
+    const n = o.slice(o.indexOf(":") + 1);
+    return n.replace(((s = n.match(/\/([^/]+)\.(jsx|js|tsx|ts|mjs|mts|cjs|cts)(?!$)/g)) == null ? void 0 : s.at(0)) || "", "");
+  }(e).replace(/\\/g, "/"), t = "";
+  return r[0] === "/" ? (t = "/", r = r.slice(1)) : r[1] === ":" && (t = r.slice(0, 3), r = r.slice(3)), { filepath: r, rootPath: t };
+}
+function B(e) {
+  const r = JSON.parse(JSON.stringify(e));
+  return function t(o, n) {
+    N(o).forEach(([s, a]) => {
+      if (a === null || typeof a != "object") {
+        if (C(a)) {
+          const m = /--colors/.test(n || "") && A(a) ? `rgb(var(${n}-${c(s)}) / <alpha-value>)` : `var(${n}-${c(s)})`;
+          o[s] = m;
+        }
+      } else
+        t(a, c((n ? `--${n}-${s}` : `--${s}`).replace(/-{3,}/, "--")));
+    });
+  }(r), F(r);
+}
+function _(e) {
+  const { filepath: r, rootPath: t } = O(k(w() || "", e));
+  r.split("/").slice(0, -1).reduce((o, n) => {
+    const s = o + n + "/";
+    return S(s) || j(s), s;
+  }, t);
+  try {
+    R(t + r, `module.exports = ${JSON.stringify(B(v))}`, { flag: "w" }), console.log(`✨ Tailwind theme config file has been created 👉 ${e}`);
+  } catch (o) {
+    console.error(o);
+  }
+}
+const h = (e) => Object.entries(e).map(([r, t]) => `${r}:${t}`).join(";"), q = (e) => {
+  return (r = e, Object.keys(r)).map((t) => {
+    const s = function(a, m) {
+      const u = {};
+      return function T(E, f) {
+        N(E).forEach(([p, i]) => {
+          if (i === null || typeof i != "object") {
+            if (C(i)) {
+              const I = () => {
+                if (A(i)) {
+                  const { red: L, green: z, blue: J } = Z(i);
+                  return `${L} ${z} ${J}`;
+                }
+                return i;
+              };
+              u[`${f}-${c(p)}`] = I();
+            }
+          } else
+            T(i, c((f ? `--${f}-${p}` : `--${p}`).replace(/-{3,}/, "--")));
+        });
+      }(a), y(b({}, u), { className: m });
+    }(e[t], t), { className: o } = s, n = $(s, ["className"]);
+    return t === "default" ? `:root{${h(n)}}` : `.${o}{${h(n)}}`;
+  });
+  var r;
+};
+function ee(e, r) {
+  const { filepath: t, rootPath: o } = O(k(w() || "", e));
+  t.split("/").slice(0, -1).reduce((n, s) => {
+    const a = n + s + "/";
+    return S(a) || j(a), a;
+  }, o);
+  try {
+    W(o + t, `
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+        @layer base {${q(r).join("")}}
+        `, { flag: "w" }), console.log(`✨ CSS tokens file has been created 👉 ${e}`);
+  } catch (n) {
+    console.error(n);
+  }
+}
+export {
+  ee as createCSSTokensFile,
+  _ as createTailwindThemeConfigFile,
+  Y as createTheme,
+  v as defaultTheme
+};

package/dist/types.d.ts

@@ -0,0 +1,103 @@
+export interface Theme {
+    screens: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    borderWidth: {
+        none: string;
+        xs: string;
+        s: string;
+        m: string;
+    };
+    colors: {
+        transparent: string;
+        bg: {
+            body: string;
+            primary: string;
+            primaryAccent: string;
+            primarySubtle: string;
+            secondary: string;
+            secondaryAccent: string;
+            secondarySubtle: string;
+        };
+        fg: {
+            default: string;
+            accent: string;
+            cta: string;
+            ctaInverse: string;
+        };
+        bd: {
+            primary: string;
+            secondary: string;
+        };
+    };
+    fontFamily: {
+        openSans: string;
+    };
+    fontSize: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        regular: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeight: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    width: {
+        pageMin: string;
+        pageMax: string;
+    };
+    borderRadius: {
+        none: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        full: string;
+    };
+    boxShadow: {
+        none: string;
+        normal: string;
+        highlighted: string;
+    };
+    spacing: {
+        auto: string;
+        none: string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+    };
+    zIndex: {
+        hide: number;
+        base: number;
+        raised: number;
+        dropdown: number;
+        sticky: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+}

package/dist/utils.d.ts

@@ -0,0 +1,11 @@
+declare function objectKeys<T extends Record<string | number, unknown>>(obj: T): (keyof T)[];
+declare function objectEntries<T extends Record<string | number, unknown>>(obj: T): [keyof T, T[keyof T]][];
+declare function toKebabCase(v: string): string;
+declare function isHex(value: string | number): value is string;
+declare function isStringOrNumber(value: unknown): value is string | number;
+declare function toKebabCaseKeys<T extends Object>(obj: T, level?: number): Record<string, T[keyof T]>;
+declare function buildFilePath(path: string): {
+    filepath: string;
+    rootPath: string;
+};
+export { objectKeys, objectEntries, toKebabCase, isHex, toKebabCaseKeys, buildFilePath, isStringOrNumber, };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@spark-ui/theme-utils",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Theme configuration",
   "publishConfig": {
     "access": "public"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build"
   },
@@ -17,5 +17,5 @@
     "parent-module": "3.0.0",
     "type-fest": "3.5.6"
   },
-  "gitHead": "807a2fbdf384a277d4110cff7dbb549bb9ab4563"
+  "gitHead": "a854685e736add2fe4854ecd6bef7272ea4ab82f"
 }

package/tsconfig.json

@@ -1,10 +1,4 @@
 {
   "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "./",
-     "outDir": "./dist",
-    "declaration": true,
-  },
-  "include": ["**/*", "../../global.d.ts"]
+  "include": ["src/**/*", "../../global.d.ts"]
 }

package/vite.config.ts

@@ -1,6 +1,6 @@
 import path from 'path'
 import { terser } from 'rollup-plugin-terser'
-import typescript from '@rollup/plugin-typescript'
+import dts from 'vite-plugin-dts'
 
 const pkg = require(path.resolve(__dirname, './package.json'))
 
@@ -11,14 +11,18 @@ export default {
   build: {
     target: 'es2015',
     lib: {
-      entry: 'index.mts',
+      entry: 'src/index.ts',
       formats: ['es', 'cjs'],
       fileName: 'index',
     },
     rollupOptions: {
       external: [...deps, ...devDeps, 'path', 'fs'],
-      preserveModules: false,
-      plugins: [terser(), typescript({ cacheDir: './dist' })],
+      plugins: [terser()],
     },
   },
+  plugins: [
+    dts({
+      entryRoot: './src',
+    }),
+  ],
 }

package/createCSSTokensFile.mts

@@ -1,101 +0,0 @@
-import { appendFileSync, existsSync, mkdirSync } from 'fs'
-import hexRgb from 'hex-rgb'
-import parentModule from 'parent-module'
-import { join } from 'path'
-
-import type { Theme } from './types.mjs'
-import {
-  buildFilePath,
-  isHex,
-  isStringOrNumber,
-  objectEntries,
-  objectKeys,
-  toKebabCase,
-} from './utils.mjs'
-
-/* eslint-disable-next-line @typescript-eslint/ban-types */
-type FlattenedTheme = Record<'className' | (string & {}), string | number>
-type NestedObj = Record<string, string | number | Record<string, string | number>>
-
-function flattenTheme(theme: Theme, className: string): FlattenedTheme {
-  const flattenedTheme = {} as FlattenedTheme
-
-  function flatten(obj: Theme, path?: string) {
-    objectEntries(obj as unknown as NestedObj).forEach(([key, value]) => {
-      if (value !== null && typeof value === 'object') {
-        const formattedPath = path ? `--${path}-${key}` : `--${key}`
-        flatten(value as unknown as Theme, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
-
-        return
-      }
-
-      if (isStringOrNumber(value)) {
-        const getFormattedValue = () => {
-          if (isHex(value)) {
-            const { red, green, blue } = hexRgb(value)
-
-            return `${red} ${green} ${blue}`
-          }
-
-          return value
-        }
-
-        flattenedTheme[`${path}-${toKebabCase(key as string)}`] = getFormattedValue()
-      }
-    })
-  }
-
-  flatten(theme)
-
-  return {
-    ...flattenedTheme,
-    className,
-  }
-}
-
-const toStringifiedTheme = (theme: Record<string, string | number>) =>
-  Object.entries(theme)
-    .map(([k, v]) => `${k}:${v}`)
-    .join(';')
-
-const getStringifiedThemes = (themeRecord: Record<string, Theme>) =>
-  objectKeys(themeRecord).map(key => {
-    const { className, ...rest } = flattenTheme(themeRecord[key] as Theme, key)
-
-    return key === 'default'
-      ? `:root{${toStringifiedTheme(rest)}}`
-      : `.${className}{${toStringifiedTheme(rest)}}`
-  })
-
-export function createCSSTokensFile(path: string, themeRecord: Record<string, Theme>) {
-  const { filepath, rootPath } = buildFilePath(join(parentModule() || '', path))
-
-  const folders = filepath.split('/').slice(0, -1)
-  folders.reduce((acc, folder) => {
-    const folderPath = acc + folder + '/'
-    if (!existsSync(folderPath)) {
-      mkdirSync(folderPath)
-    }
-
-    return folderPath
-  }, rootPath)
-
-  try {
-    appendFileSync(
-      rootPath + filepath,
-      `
-        @tailwind base;
-        @tailwind components;
-        @tailwind utilities;
-        @layer base {${getStringifiedThemes(themeRecord).join('')}}
-        `,
-      {
-        flag: 'w',
-      }
-    )
-
-    console.log(`✨ CSS tokens file has been created 👉 ${path}`)
-  } catch (error) {
-    console.error(error)
-  }
-}

package/createTailwindConfigFile.mts

@@ -1,76 +0,0 @@
-import { existsSync, mkdirSync, writeFileSync } from 'fs'
-import parentModule from 'parent-module'
-import { join } from 'path'
-
-import { defaultTheme } from './defaultTheme.mjs'
-import type { Theme } from './types.mjs'
-import {
-  buildFilePath,
-  isHex,
-  isStringOrNumber,
-  objectEntries,
-  toKebabCase,
-  toKebabCaseKeys,
-} from './utils.mjs'
-
-type NestedObj = Record<string, string | number | Record<string, string | number>>
-type TailwindConfig = Record<string, Theme[keyof Theme]>
-
-function toTailwindConfig(theme: Theme): TailwindConfig {
-  const themeCpy: Theme = JSON.parse(JSON.stringify(theme))
-
-  function flatten(obj: Theme, path?: string) {
-    objectEntries(obj as unknown as NestedObj).forEach(([key, value]) => {
-      if (value !== null && typeof value === 'object') {
-        const formattedPath = path ? `--${path}-${key}` : `--${key}`
-        flatten(value as unknown as Theme, toKebabCase(formattedPath.replace(/-{3,}/, '--')))
-
-        return
-      }
-
-      /* eslint-disable */
-      if (isStringOrNumber(value)) {
-        const formattedPath =
-          /--colors/.test(path || '') && isHex(value)
-            ? `rgb(var(${path}-${toKebabCase(key as string)}) / <alpha-value>)`
-            : `var(${path}-${toKebabCase(key as string)})`
-
-        /* @ts-ignore */
-        obj[key as any] = formattedPath
-        /* eslint-enable */
-      }
-    })
-  }
-
-  flatten(themeCpy)
-
-  return toKebabCaseKeys(themeCpy)
-}
-
-export function createTailwindConfigFile(path: string) {
-  const { filepath, rootPath } = buildFilePath(join(parentModule() || '', path))
-
-  const folders = filepath.split('/').slice(0, -1)
-  folders.reduce((acc, folder) => {
-    const folderPath = acc + folder + '/'
-    if (!existsSync(folderPath)) {
-      mkdirSync(folderPath)
-    }
-
-    return folderPath
-  }, rootPath)
-
-  try {
-    writeFileSync(
-      rootPath + filepath,
-      `module.exports = ${JSON.stringify(toTailwindConfig(defaultTheme))}`,
-      {
-        flag: 'w',
-      }
-    )
-
-    console.log(`✨ Tailwind theme config file has been created 👉 ${path}`)
-  } catch (error) {
-    console.error(error)
-  }
-}

package/createTheme.mts

@@ -1,9 +0,0 @@
-import deepMerge from 'deepmerge'
-import { PartialDeep } from 'type-fest'
-
-import { defaultTheme } from './defaultTheme.mjs'
-import type { Theme } from './types.mjs'
-
-export function createTheme(theme: PartialDeep<Theme> = {}): Theme {
-  return deepMerge<Theme, PartialDeep<Theme>>(defaultTheme, theme)
-}

package/defaultTheme.mts

@@ -1,106 +0,0 @@
-import type { Theme } from './types.mjs'
-
-export const defaultTheme: Theme = {
-  screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
-  borderWidth: {
-    none: '0',
-    xs: '0.1rem',
-    s: '0.2rem',
-    m: '0.4rem',
-  },
-  colors: {
-    transparent: 'transparent',
-    bg: {
-      primary: '#f28133',
-      primaryAccent: '#ad4c07',
-      primarySubtle: '#fba56c',
-      secondary: '#3481f2',
-      secondaryAccent: '#074aad',
-      secondarySubtle: '#4c93f7',
-      body: '#fff',
-    },
-    bd: {
-      primary: '#f28133',
-      secondary: '#3481f2',
-    },
-    fg: {
-      default: '#334155',
-      accent: '#1161d7',
-      cta: '#000',
-      ctaInverse: '#fff',
-    },
-  },
-  fontFamily: {
-    openSans:
-      'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"',
-  },
-  fontSize: {
-    xs: '1rem',
-    s: '1.2rem',
-    m: '1.4rem',
-    l: '1.6rem',
-    xl: '1.8rem',
-    '2xl': '2rem',
-    '3xl': '2.4rem',
-  },
-  fontWeight: {
-    regular: 400,
-    semibold: 600,
-    bold: 700,
-  },
-  lineHeight: {
-    xs: '1.4rem',
-    s: '1.7rem',
-    m: '1.9rem',
-    l: '2.2rem',
-    xl: '2.4rem',
-    '2xl': '2.6rem',
-    '3xl': '2.8rem',
-  },
-  width: {
-    pageMin: '320px',
-    pageMax: '1066px',
-  },
-  borderRadius: {
-    none: '0',
-    xs: '0.4rem',
-    s: '0.8rem',
-    m: '1.6rem',
-    l: '2.4rem',
-    full: '100%',
-  },
-  boxShadow: {
-    none: 'none',
-    normal: '0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)',
-    highlighted: '0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)',
-  },
-  spacing: {
-    auto: 'auto',
-    none: '0',
-    xs: '0.4rem',
-    s: '0.8rem',
-    m: '1.6rem',
-    l: '2.4rem',
-    xl: '3.2rem',
-    xxl: '4rem',
-  },
-  zIndex: {
-    hide: -1,
-    base: 0,
-    raised: 1,
-    dropdown: 1000,
-    sticky: 1100,
-    overlay: 1300,
-    modal: 1400,
-    popover: 1500,
-    skipLink: 1600,
-    toast: 1700,
-    tooltip: 1800,
-  },
-}

package/index.mts

@@ -1,6 +0,0 @@
-export { createTheme } from './createTheme.mjs'
-export { createTailwindConfigFile } from './createTailwindConfigFile.mjs'
-export { createCSSTokensFile } from './createCSSTokensFile.mjs'
-export { defaultTheme } from './defaultTheme.mjs'
-
-export type { Theme } from './types.mjs'

package/types.mts

@@ -1,103 +0,0 @@
-export interface Theme {
-  screens: {
-    sm: string
-    md: string
-    lg: string
-    xl: string
-    '2xl': string
-  }
-  borderWidth: {
-    none: string
-    xs: string
-    s: string
-    m: string
-  }
-  colors: {
-    transparent: string
-    bg: {
-      body: string
-      primary: string
-      primaryAccent: string
-      primarySubtle: string
-      secondary: string
-      secondaryAccent: string
-      secondarySubtle: string
-    }
-    fg: {
-      default: string
-      accent: string
-      cta: string
-      ctaInverse: string
-    }
-    bd: {
-      primary: string
-      secondary: string
-    }
-  }
-  fontFamily: {
-    openSans: string
-  }
-  fontSize: {
-    xs: string
-    s: string
-    m: string
-    l: string
-    xl: string
-    '2xl': string
-    '3xl': string
-  }
-  fontWeight: {
-    regular: number
-    semibold: number
-    bold: number
-  }
-  lineHeight: {
-    xs: string
-    s: string
-    m: string
-    l: string
-    xl: string
-    '2xl': string
-    '3xl': string
-  }
-  width: {
-    pageMin: string
-    pageMax: string
-  }
-  borderRadius: {
-    none: string
-    xs: string
-    s: string
-    m: string
-    l: string
-    full: string
-  }
-  boxShadow: {
-    none: string
-    normal: string
-    highlighted: string
-  }
-  spacing: {
-    auto: string
-    none: string
-    xs: string
-    s: string
-    m: string
-    l: string
-    xl: string
-    xxl: string
-  }
-  zIndex: {
-    hide: number
-    base: number
-    raised: number
-    dropdown: number
-    sticky: number
-    overlay: number
-    modal: number
-    popover: number
-    skipLink: number
-    toast: number
-    tooltip: number
-  }
-}

package/utils.mts

@@ -1,71 +0,0 @@
-function objectKeys<T extends Record<string | number, unknown>>(obj: T): (keyof T)[] {
-  return Object.keys(obj) as (keyof T)[]
-}
-
-function objectEntries<T extends Record<string | number, unknown>>(
-  obj: T
-): [keyof T, T[keyof T]][] {
-  return Object.entries(obj) as [keyof T, T[keyof T]][]
-}
-
-function toKebabCase(v: string) {
-  return v.replace(/[A-Z]/g, e => `-${e.toLocaleLowerCase()}`)
-}
-
-function isHex(value: string | number): value is string {
-  if (typeof value === 'number') {
-    return false
-  }
-
-  const regexp = /^#[0-9a-fA-F]+$/
-
-  return regexp.test(value)
-}
-
-function isStringOrNumber(value: unknown): value is string | number {
-  return typeof value === 'string' || typeof value === 'number'
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-function toKebabCaseKeys<T extends Object>(obj: T, level = 1): Record<string, T[keyof T]> {
-  const result: any = {}
-  for (const key in obj) {
-    const value =
-      typeof obj[key] === 'object' ? toKebabCaseKeys(obj[key] as T, level + 1) : obj[key]
-    result[level > 1 ? key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() : key] = value
-  }
-
-  return result
-}
-
-function getFormattedPath(input: string) {
-  const preFormat = input.slice(input.indexOf(':') + 1)
-  const extensionRegex = /\/([^/]+)\.(jsx|js|tsx|ts|mjs|mts|cjs|cts)(?!$)/g
-
-  return preFormat.replace(preFormat.match(extensionRegex)?.at(0) || '', '')
-}
-
-function buildFilePath(path: string) {
-  let filepath = getFormattedPath(path).replace(/\\/g, '/')
-
-  let rootPath = ''
-  if (filepath[0] === '/') {
-    rootPath = '/'
-    filepath = filepath.slice(1)
-  } else if (filepath[1] === ':') {
-    rootPath = filepath.slice(0, 3)
-    filepath = filepath.slice(3)
-  }
-
-  return { filepath, rootPath }
-}
-
-export {
-  objectKeys,
-  objectEntries,
-  toKebabCase,
-  isHex,
-  toKebabCaseKeys,
-  buildFilePath,
-  isStringOrNumber,
-}