@spark-ui/theme-utils 1.1.1 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@1.2.0...@spark-ui/theme-utils@2.0.0) (2023-02-14)
+
+### Features
+
+- split the theme utils package into two distinct packages ([77def01](https://github.com/adevinta/spark/commit/77def01abd8b2ccf4f234093133294071e407231)), closes [#235](https://github.com/adevinta/spark/issues/235)
+
+### BREAKING CHANGES
+
+- Split the theme utils package into two distinct packages
+
+# [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

package/{createTheme.mts → dist/createTheme.d.ts}

@@ -1,9 +1,5 @@
-import deepMerge from 'deepmerge'
-import { PartialDeep } from 'type-fest'
-
-import { defaultTheme } from './defaultTheme.mjs'
-import type { Theme } from './types.mjs'
-
+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.
  *
@@ -16,6 +12,4 @@ import type { Theme } from './types.mjs'
  * const alternativeTheme: PartialDeep<Theme> = { ... }
  * const newTheme = createTheme(alternativeTheme)
  */
-export function createTheme(theme: PartialDeep<Theme> = {}): Theme {
-  return deepMerge<Theme, PartialDeep<Theme>>(defaultTheme, theme)
-}
+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,3 @@
+export { createTheme } from './createTheme';
+export { defaultTheme } from './defaultTheme';
+export type { Theme } from './types';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("deepmerge"),e={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}};exports.createTheme=function(r={}){return o(e,r)},exports.defaultTheme=e;

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import r from "deepmerge";
+const o = { 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 a(e = {}) {
+  return r(o, e);
+}
+export {
+  a as createTheme,
+  o 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/package.json

@@ -1,21 +1,19 @@
 {
   "name": "@spark-ui/theme-utils",
-  "version": "1.1.1",
-  "description": "Theme configuration",
+  "version": "2.0.0",
+  "description": "package for managing Spark theme configuration",
   "publishConfig": {
     "access": "public"
   },
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build"
   },
   "devDependencies": {
     "deepmerge": "4.3.0",
-    "hex-rgb": "5.0.0",
-    "parent-module": "3.0.0",
     "type-fest": "3.5.6"
   },
-  "gitHead": "88ef74d7ffbf238395c021350fb6e54fe50bba43"
+  "gitHead": "a5a2528df9b68065d31be22132f60cc70d7fc472"
 }

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' })],
+      external: [...deps, ...devDeps],
+      plugins: [terser()],
     },
   },
+  plugins: [
+    dts({
+      entryRoot: './src',
+    }),
+  ],
 }

package/createCSSTokensFile.mts

@@ -1,127 +0,0 @@
-import { appendFileSync, existsSync, mkdirSync } from 'fs'
-import hexRgb from 'hex-rgb'
-import parentModule from 'parent-module'
-import { join } from 'path'
-import type { RequireAtLeastOne } from 'type-fest'
-
-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)}}`
-  })
-
-/**
- * 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 function createCSSTokensFile(
-  path: string,
-  themeRecord: RequireAtLeastOne<Record<string, Theme>, 'default'>
-) {
-  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/createTailwindThemeConfigFile.mts

@@ -1,87 +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)
-}
-
-/**
- * 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 function createTailwindThemeConfigFile(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/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 { createTailwindThemeConfigFile } from './createTailwindThemeConfigFile.mjs'
-export { createCSSTokensFile } from './createCSSTokensFile.mjs'
-export { defaultTheme } from './defaultTheme.mjs'
-
-export type { Theme } from './types.mjs'

package/index.stories.mdx

@@ -1,219 +0,0 @@
-import { Meta } from '@storybook/blocks'
-import { StoryHeading } from '../../../documentation/helpers/StoryHeading/'
-
-<Meta title="utils/Theme" />
-
-# Theme
-
-- [Theme](#theme-interface)
-- [defaultTheme](#default-theme)
-- [createTheme](#createtheme)
-- [createCSSTokensFile](#createcsstokensfile)
-- [createTailwindThemeConfigFile](#createtailwindthemeconfigfile)
-- [Practical example](#practical-example)
-
-> **Note**
->
-> Spark Design System is built using the **Tailwind CSS** framework
-
----
-
-The **`packages/utils/theme`** exposes the following:
-
-```tsx
-import {
-  Theme,
-  defaultTheme,
-  createTheme,
-  createCSSTokensFile,
-  createTailwindThemeConfigFile,
-} from '@spark-ui/theme-utils'
-```
-
-<StoryHeading label="theme interface" as="h4" />
-
-- `Theme`, the TypeScript interface for our theme
-
-<StoryHeading label="default theme" as="h4" />
-
-- `defaultTheme`, our default theme, represented as an `Object`
-
-<StoryHeading label="createTheme" as="h4" />
-
-- A function, that enables one to create a new theme by modifying specific values from the default theme without having to define a completely new theme from scratch.
-
-This function expects one argument:
-
-- A partial theme object which holds the theme values that need to be customized or overridden
-
-**Usage:**
-
-```tsx
-const someTheme: PartialDeep<Theme> = { ... }
-const newTheme = createTheme(someTheme) // Theme
-
-```
-
-<StoryHeading label="createCSSTokensFile" as="h4" />
-
-- A function, that will generate a `css` file containing all of the theme tokens, represented as CSS custom properties.
-
-This function expects two arguments:
-
-- The file path where the `css` file will be created
-- A `Record` (with a required key of "default") of themes that will be included in the `css` file
-
-**Usage:**
-
-- Let's create a file (named `createTokens.ts` in our example) that will call this function
-
-```tsx
-// createTokens.ts
-const defaultTheme: Theme = { ... }
-const darkTheme: Theme = { ... }
-const someOtherTheme: Theme = { ... }
-
-const themes = {
-  default: defaultTheme,
-  dark: darkTheme,
-  other: someOtherTheme
-}
-
-createCSSTokensFile('./somePath.css', themes)
-
-```
-
-- Executing `createTokens.ts` will generate a `somePath.css` file with the following structure:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    /* :root, derived from the "default" key ↔️ themes.default */
-    --some-token: someValue;
-    --some-other-token: otherValue;
-    ...;
-  }
-
-  .dark {
-    /* .dark, derived from the "dark" key ↔️ themes.dark */
-    --some-token: foo;
-    --some-other-token: bar;
-    ...;
-  }
-
-  .other {
-    /* .other, derived from the "other" key ↔️ themes.other */
-    --some-token: lorem;
-    --some-other-token: ipsum;
-    ...;
-  }
-}
-```
-
-<StoryHeading label="createTailwindThemeConfigFile" as="h4" />
-
-A function that will generate a 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.
-
-This function expects one argument:
-
-- The file path where the `css` file will be created
-
-**Usage:**
-
-- Let's create a file (named `overrideTailwindConfig.ts` in our example) that will call this function
-
-```tsx
-// overrideTailwindConfig.ts
-createTailwindThemeConfigFile('./tailwind.theme.js)
-
-```
-
-- Executing `overrideTailwindConfig.ts` will generate a `tailwind.theme.js` file with the following structure:
-
-```js
-// tailwind.theme.js
-module.exports = {
-  ...,
-  screens: {
-    sm: 'var(--some-value)',
-    md: 'var(--some-other-value)',
-  },
-  spacing: {
-    sm: 'var(--some-foo)',
-    md: 'var(--some-bar)'
-  }
-  ...
-}
-```
-
-- Then, inside your Tailwind config file, include a reference to the file that will be generated upon executing `overrideTailwindConfig.ts`
-
-```js
-// tailwind.config.js
-const themeConf = require('./tailwind.theme.js') // ⬅️ generated by executing `overrideTailwindConfig.ts`
-
-module.exports = {
-  theme: {
-    ...themeConf, // ⬅️ replacing default Tailwind theme with our own
-  },
-  content: ['...'],
-}
-```
-
-<StoryHeading label="Practical Example" as="h3" />
-
-- For a more detailed understanding of how to employ these two functions together (**createCSSTokensFile** & **createTailwindThemeConfigFile**), here's a practical example of integrating them into your project:
-
-1️⃣. Create a file (named `createThemeConfig.ts` in this example) that will call both of these functions
-
-```tsx
-// createThemeConfig.ts
-import { createCSSTokensFile, createTailwindThemeConfigFile } from '@spark-ui/theme-utils'
-import { themes } from '/myThemes'
-
-createTailwindThemeConfigFile('./tailwind.theme.js') // ⬅️ will generate the Tailwind theme config file
-createCSSTokensFile('./tailwind.css', themes) // ⬅️ will generate the CSS tokens file
-```
-
-2️⃣ a. Inside the Tailwind config file, include a reference to the file that will be generated upon executing the file from step 1
-
-```js
-// tailwind.config.js
-const themeConf = require('./tailwind.theme.js') // ⬅️ generated by executing `createThemeConfig.ts`
-
-module.exports = {
-  theme: {
-    ...themeConf, // ⬅️ replacing default Tailwind theme with our own
-  },
-  content: ['...'],
-}
-```
-
-2️⃣ b. Inside a file in your application where you import your global styles, include a reference to the file that will be generated upon executing the file from step 1
-
-If you are using **Next.js**, that would be `_app.tsx`
-
-```tsx
-// some file in your application where you can import global styles
-
-import '../tailwind.css' // ⬅️ generated by executing `createThemeConfig.ts`
-```
-
-3️⃣. Inside your `package.json`, add a script that will execute the file from step 1, and make sure to run that script before you start your application
-
-```json
-// package.json
-{
-  ...
-  "scripts": {
-    ...,
-    "start": "npm run create:theme-config && start your-app",
-    "create:theme-config": "ts-node-esm createThemeConfig.ts", // ⬅️ executing `createThemeConfig.ts`
-    ...
-  }
-}
-```

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,
-}