soujvnunes · soujvnunes · Jan 8, 2025 · Jan 8, 2025 · Jan 8, 2025 · Jan 8, 2025
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
-# ui-theme
+# themizer
 
 Generate CSS3 custom properties based on a given theme with tokens and aliases serving as a reference.
 
 ## API
 
 ```ts
-  const { aliases, medias, tokens, rules } = getTheme(aliases, options?);
+  import themizer from "themizer";
+
+  const { aliases, medias, tokens, rules } = themizer(aliases, options?);
 ```
 
 ### Parameters
@@ -18,7 +20,7 @@ Generate CSS3 custom properties based on a given theme with tokens and aliases s
 
 - **options?**
 
-  - prefixVars?
+  - prefixAtoms?
 
     String to prefix all the generated CSS custom properties, accessed in `theme.rules`.
 
@@ -79,10 +81,10 @@ export default function rgba(color: string, alpha: string) {
 
 // src/lib/theme.ts
 
-import { getTheme } from 'ui-theme';
+import themizer from 'themizer';
 import rgba from 'helpers/rgba';
 
-const theme = getTheme(
+const theme = themizer(
   (tokens) => ({
     palette: {
       main: tokens.colors.amber[500],
@@ -106,7 +108,7 @@ const theme = getTheme(
     },
   }),
   {
-    prefixVars: 'ds',
+    prefixAtoms: 'ds',
     medias: {
       desktop: '@media (min-width: 1024px)',
       dark: '@media (prefers-color-scheme: dark)',
@@ -156,7 +158,7 @@ const theme = getTheme(
 
 The generated custom properties from the last example would look like this.
 
-> Note that the provided `prefixVars` ("ds") is being used. Otherwise, these custom properties would be just like `--tokens-*` for tokens and `--aliases-*` for aliases.
+> Note that the provided `prefixAtoms` ("ds") is being used. Otherwise, these custom properties would be just like `--tokens-*` for tokens and `--aliases-*` for aliases.
 
 Generated styles within `theme.rules.css`:
 
@@ -295,6 +297,97 @@ console.log(theme.rules.jss);
 
 The generated CSS custom properties needs to be indexed at the project's top-level file.
 
+#### Next.js and Talwind CSS
+
+1. Customize Tailwind CSS' default theme with the generated by `themizer`.
+
+```ts
+// tailwind.config.ts
+
+import theme from './lib/theme';
+import plugin from 'tailwindcss/plugin';
+import defaultTheme from 'tailwindcss/defaultTheme';
+import { type Config } from 'tailwindcss';
+import { type CSSRuleObject } from 'tailwindcss/types/config';
+
+const config = {
+  content: ['./app/**/*.{tsx,ts,mdx}', './components/**/*.{tsx,ts,mdx}'],
+  theme: {
+    fontFamily: {
+      sans: [
+        theme.tokens.font.families.sans,
+        '-apple-system-font',
+        ...defaultTheme.fontFamily.sans,
+      ],
+    },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      background: rgb(theme.aliases.colors.background),
+      foreground: rgb(theme.aliases.colors.foreground),
+    },
+    fontSize: {
+      body: [
+        theme.aliases.typography.sm,
+        {
+          lineHeight: theme.aliases.typography.lg,
+        },
+      ],
+    },
+  },
+  plugins: [
+    plugin(({ addBase }) => {
+      return addBase(theme.rules.jss as CSSRuleObject);
+    }),
+  ],
+} satisfies Config;
+
+export default config;
+```
+
+2. Apply the class names normally to style anything. And don't worry, intellisense will charmingly work.
+
+```tsx
+import type { Metadata, Viewport } from 'next';
+import { Analytics } from '@vercel/analytics/react';
+import { SpeedInsights } from '@vercel/speed-insights/next';
+import theme from 'lib/theme';
+import './global.css';
+import { resolveAtom } from 'themizer';
+
+export const viewport: Viewport = {
+  themeColor: [
+    {
+      media: '(prefers-color-scheme: dark)',
+      color: `rgb(${resolveAtom(theme.tokens.palette.amber[950])})`,
+    },
+    {
+      media: '(prefers-color-scheme: light)',
+      color: `rgb(${resolveAtom(theme.tokens.palette.amber[50])})`,
+    },
+  ],
+};
+
+export default function AppLayout({ children }: React.PropsWithChildren) {
+  return (
+    <html
+      lang="en"
+      className="h-full bg-background text-body text-foreground antialiased"
+    >
+      <body className="flex h-full flex-col">
+        <main className="m-auto">{children}</main>
+        <Analytics />
+        <SpeedInsights />
+      </body>
+    </html>
+  );
+}
+```
+
+> ✨
+
+![Intellisense Example](intellisense-example.png)
+
 #### Next.js and styled-jsx (native CSS-in-JS solution)
 
 1. Create a **styled-jsx** [registry](https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-jsx) to collect all CSS rules in a render and inject the theme rules in the document.
@@ -325,9 +418,7 @@ export default function StyledJsxProvider({
   return (
     <StyleRegistry registry={styleRegistry}>
       <style jsx global>{`
-        ${theme.rules}
-
-        /* Other CSS styles, such as Reset, Normalize and so on. */
+        ${theme.rules}/* Other CSS styles, such as Reset, Normalize and so on. */
       `}</style>
       {children}
     </StyleRegistry>
@@ -345,17 +436,17 @@ import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import StyledJsxProvider from 'providers/StyledJsxProvider';
 // There are also cool helper functions to get a custom property name or value.
-import { resolveVar, unwrapVar } from 'ui-theme';
+import { resolveAtom, unwrapAtom } from 'themizer';
 
 export const viewport: Viewport = {
   themeColor: [
     {
       media: '(prefers-color-scheme: dark)',
-      color: resolveVar(theme.tokens.colors.amber[400]), // #fbbf24
+      color: resolveAtom(theme.tokens.colors.amber[400]), // #fbbf24
     },
     {
       media: '(prefers-color-scheme: light)',
-      color: resolveVar(theme.tokens.colors.amber[600]), // #d97706
+      color: resolveAtom(theme.tokens.colors.amber[600]), // #d97706
     },
   ],
 };
@@ -425,7 +516,3 @@ export default function Page() {
   );
 }
 ```
-
-#### Next.js and styled-jsx (native CSS-in-JS solution)
-
-_Soon!_
diff --git a/intellisense-example.png b/intellisense-example.png
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ui-theme",
+  "name": "themizer",
   "version": "1.0.0",
   "description": "Generate CSS custom properties based on a given theme with tokens and aliases serving as a reference.",
   "author": "soujvnunes <soujvnunes@gmail.com> (https://soujvnunes.github.io)",
@@ -54,10 +54,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/soujvnunes/ui-theme.git"
+    "url": "git+https://github.com/soujvnunes/themizer.git"
   },
   "bugs": {
-    "url": "https://github.com/soujvnunes/ui-theme/issues"
+    "url": "https://github.com/soujvnunes/themizer/issues"
   },
-  "homepage": "https://github.com/soujvnunes/ui-theme#readme"
+  "homepage": "https://github.com/soujvnunes/themizer#readme"
 }
diff --git a/src/generateVars.test.ts → src/atomizer.test.ts b/src/generateVars.test.ts → src/atomizer.test.ts
@@ -1,9 +1,9 @@
-import generateVars from './generateVars';
+import atomizer from './atomizer';
 
-describe('generateVars', () => {
+describe('atomizer', () => {
   describe('when providing the schema parameter', () => {
     it('returns generated vars and its references', () => {
-      const vars = generateVars({
+      const vars = atomizer({
         colors: {
           white: '#fff',
           red: {
@@ -36,7 +36,7 @@ describe('generateVars', () => {
 
   describe('with prefix properties option', () => {
     it('returns prefixed generated vars and its references', () => {
-      const vars = generateVars(
+      const vars = atomizer(
         {
           colors: {
             white: '#fff',
@@ -49,7 +49,7 @@ describe('generateVars', () => {
           },
         },
         {
-          prefixVars: 'tokens',
+          prefixAtoms: 'tokens',
         },
       );
 
@@ -74,7 +74,7 @@ describe('generateVars', () => {
 
   describe('with medias options', () => {
     it('returns generated vars within each media query and its references with default values', () => {
-      const vars = generateVars(
+      const vars = atomizer(
         {
           colors: {
             black: '#111',

diff --git a/src/atomizer.ts b/src/atomizer.ts
@@ -0,0 +1,65 @@
+import getAtomsResolver from './getAtomsResolver';
+import isPrimitive from './isPrimitive';
+import type {
+  AtomizerOptions,
+  ResponsiveAtoms,
+  Schema,
+  Atomizer,
+} from './types';
+
+const ATOMS_UNIFIER = '-';
+const RESPONSIVE_ATOMS: ResponsiveAtoms = {};
+
+export default function atomizer<M extends string, S extends Schema<M>>(
+  schema: S,
+  options?: AtomizerOptions<M>,
+  __adjustor?: string,
+): Atomizer<M, S> {
+  const prefixAtoms = options?.prefixAtoms
+    ? `${options.prefixAtoms}${ATOMS_UNIFIER}`
+    : '';
+  const adjustor = __adjustor ? `${__adjustor}${ATOMS_UNIFIER}` : '';
+
+  return Object.entries(schema).reduce((generatedAtoms, [key, value]) => {
+    const path = `${prefixAtoms}${adjustor}${key}`;
+    const finalPath = `--${path}`;
+    const resolveAtoms = getAtomsResolver(generatedAtoms);
+
+    if (isPrimitive(value)) {
+      return resolveAtoms(
+        { [finalPath]: value },
+        { [key]: `var(${finalPath}, ${value})` },
+      );
+    }
+
+    if (Array.isArray(value)) {
+      const [medias, defaultValue] = value;
+      const resolvedDefaultValue = isPrimitive(defaultValue)
+        ? `, ${defaultValue}`
+        : '';
+
+      for (const [media, responsiveValue] of Object.entries(medias)) {
+        const mediaQuery = options?.medias?.[media as M] as string;
+
+        RESPONSIVE_ATOMS[mediaQuery] = {
+          ...RESPONSIVE_ATOMS[mediaQuery],
+          [finalPath]: responsiveValue,
+        };
+      }
+
+      return resolveAtoms(
+        {
+          ...(isPrimitive(defaultValue) && {
+            [finalPath]: defaultValue,
+          }),
+          ...RESPONSIVE_ATOMS,
+        },
+        { [key]: `var(${finalPath}${resolvedDefaultValue})` },
+      );
+    }
+
+    const vars = atomizer(value, { ...options, prefixAtoms: '' }, path);
+
+    return resolveAtoms(vars.value, { [key]: vars.reference });
+  }, {} as Atomizer<M, S>);
+}
diff --git a/src/dispatchVars.test.ts b/src/dispatchVars.test.ts
diff --git a/src/dispatchVars.ts b/src/dispatchVars.ts