feat: pack the library for its first release.

.eslintignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

README.md

@@ -3,9 +3,13 @@
 > [!WARNING]  
 > This project is still in early development. It is not yet ready for production use.
 
-Radix Colors is a great color palette for software design and development. I love its simplicity in defining one color palette for both light and dark mode. I really enjoy the time when I don't have to specify `dark:` colors anymore. The original `@radix-ui/colors` library is fully usable with Tailwind CSS (e.g. `bg-mauve-2`), but it is incompatible with Tailwind CSS alpha value injection (e.g. `bg-mauve-4/50`) because its library is originally implemented and built with Hex color format. So at the same time of enjoying the simplicity of Radix Colors, I have to give up the ability to use Tailwind CSS alpha values for getting a bunch of modified semi-transparent colors.
+Radix Colors is a great color palette for software design and development. I love its simplicity in defining one color palette for both light and dark mode. I really enjoy the time when I don't have to specify `dark:` colors anymore. The original `@radix-ui/colors` library is fully usable with Tailwind CSS (e.g. `bg-mauve-2`), but it is incompatible with Tailwind CSS alpha value injection (e.g. `bg-mauve-4/50`) because its library is originally implemented and built with Hex color format. So at the same time of enjoying the simplicity of Radix Colors, I have to give up the ability to use Tailwind CSS alpha values for getting a bunch of modified semi-transparent colors. This library is intended to provide a simple way to integrate all benefits of Radix Colors in Tailwind CSS, including alpha values, P3 display, and composing ability.
 
-This library is intended to provide a simple way to integrate all benefits of Radix Colors in Tailwind CSS, including alpha values, P3 display, and composing ability. It generally parses the original library and generates a plug-able Tailwind CSS plugin.
+## Implementation Progress
+
+- [x] Alpha value injection (e.g. `bg-mauve-4/50`)
+- [x] Composing ability (light and dark mode in one declaration)
+- [ ] P3 display support (there are some issues with Tailwind flexibilities when we want to keep alpha value injection)
 
 ## Why Radix Colors when Tailwind CSS already has a color palette?
 
@@ -26,7 +30,85 @@ The CSS files in the [original Radix Colors library](https://github.com/radix-ui
 
 ## Usage
 
-TBA.
+### Install
+
+```sh
+npm install radix-colors-tailwind
+# Or with Yarn
+yarn add radix-colors-tailwind
+# Or with PNPM
+pnpm add radix-colors-tailwind
+# Or with Bun
+bun add radix-colors-tailwind
+```
+
+### Import in CSS
+
+```css
+/* Add the colors you need */
+@import "radix-colors-tailwind/dist/mauve.css";
+@import "radix-colors-tailwind/dist/mauve-alpha.css";
+@import "radix-colors-tailwind/dist/mauve-dark.css";
+@import "radix-colors-tailwind/dist/mauve-dark-alpha.css";
+
+@import "radix-colors-tailwind/dist/red.css";
+@import "radix-colors-tailwind/dist/green.css";
+@import "radix-colors-tailwind/dist/blue.css";
+@import "radix-colors-tailwind/dist/orange.css";
+@import "radix-colors-tailwind/dist/gold.css";
+
+@import "radix-colors-tailwind/dist/red-dark.css";
+@import "radix-colors-tailwind/dist/green-dark.css";
+@import "radix-colors-tailwind/dist/blue-dark.css";
+@import "radix-colors-tailwind/dist/orange-dark.css";
+@import "radix-colors-tailwind/dist/gold-dark.css";
+```
+
+### Import in Tailwind CSS Config
+
+```js
+const { transformOneRadixColor, transformRadixColors, transformRadixColorsWithAlpha } = require('radix-colors-tailwind');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './lib/**/*.{js,ts,jsx,tsx}',
+    '!./node_modules',
+  ],
+  darkMode: 'class', // You need this to enable dark mode more conveniently.
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  theme: {
+    colors: false,
+    extend: {
+      // ...
+      colors: {
+        clear: 'transparent',
+        brand: {
+          ...transformRadixColorsWithAlpha('blue'),
+          DEFAULT: transformOneRadixColor('blue', 10),
+          'accent': transformOneRadixColor('blue', 11),
+        },
+        mauve: transformRadixColorsWithAlpha('mauve'),
+        red: transformRadixColors('red'),
+        green: transformRadixColors('green'),
+        blue: transformRadixColors('blue'),
+        gold: transformRadixColors('gold'),
+        orange: transformRadixColors('orange'),
+        std: {
+          border: transformOneRadixColor('mauve', 3),
+        },
+        // ...
+      },
+      // ...
+    },
+  },
+  // ...
+};
+```
 
 ## Reference
 

package.json

@@ -1,14 +1,19 @@
 {
   "name": "radix-colors-tailwind",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "dist/index.ts",
-  "type": "module",
   "files": [
-    "dist"
+    "dist/**/*",
+    "!**/*.tsbuildinfo",
+    "LICENSE",
+    "README.md"
   ],
   "scripts": {
-    "prod": "rm -R dist && bun build src/index.ts --target bun --outfile ./dist/index.js && bun generator/index.ts",
-    "lint": "eslint generator/*"
+    "prod": "bun clean && bun generate && bun prod:tsc",
+    "prod:tsc": "tsc --project tsconfig.prod.json",
+    "generate": "bun src/scripts/generator.ts",
+    "lint": "eslint src/scripts/*",
+    "clean": "rm -f -R tsconfig.tsbuildinfo dist"
   },
   "devDependencies": {
     "@taci-tech/eslint-config": "^0.0.3",
@@ -18,5 +23,13 @@
     "eslint": "^8.32.0",
     "bun-types": "latest",
     "typescript": "^5.0.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": "./dist"
   }
 }

src/index.ts

@@ -1,3 +1,17 @@
+/**
+ * Transform one radix color to a CSS color value used in Tailwind CSS config.
+ * @param {string} familyName - The family name of the radix color. If it is an alpha color, the family name should end with `Alpha`, such as `redAlpha`.
+ * @param {number} number - The number of the radix color.
+ */
+export function transformOneRadixColor(familyName: string, number: number): string {
+  const isAlpha = familyName.endsWith('Alpha');
+  const cleanedFamilyName = familyName.replace(/Alpha$/, '');
+  const cleanedNumber = (isAlpha ? `a${number}` : number).toString();
+  return isAlpha
+    ? `rgb(var(--radix-rgb-${cleanedFamilyName}-${cleanedNumber}))`
+    : `rgb(var(--radix-rgb-${cleanedFamilyName}-${cleanedNumber}) / <alpha-value>)`;
+}
+
 type RadixColorsTransformedFamily = {
   1: string;
   2: string;
@@ -13,11 +27,18 @@ type RadixColorsTransformedFamily = {
   12: string;
 };
 
+/**
+ * Transform all radix colors (of a family) to CSS color values used in Tailwind CSS config.
+ * @param familyName - The family name of the radix color. If it is an alpha color, the family name should end with `Alpha`, such as `redAlpha`.
+ */
 export function transformRadixColors(familyName: string): RadixColorsTransformedFamily {
+  const isAlpha = familyName.endsWith('Alpha');
+  const cleanedFamilyName = familyName.replace(/Alpha$/, '');
   return Array.from({ length: 12 }, (_, i) => i + 1).reduce((acc, number) => {
+    const cleanedNumber = (isAlpha ? `a${number}` : number).toString();
     return {
       ...acc,
-      [number]: `rgb(var(--radix-rgb-${familyName}-${number}) / <alpha-value>)`,
+      [number]: `rgb(var(--radix-rgb-${cleanedFamilyName}-${cleanedNumber}) / <alpha-value>)`,
     };
   }, {} as RadixColorsTransformedFamily);
 }
@@ -37,6 +58,10 @@ type RadixColorsTransformedWithAlphaFamily = RadixColorsTransformedFamily & {
   a12: string;
 };
 
+/**
+ * Transform all radix colors (of a family, including corresponding alpha family) to CSS color values used in Tailwind CSS config.
+ * @param familyName - The family name of the radix color. It should not accept any family name ending with `Alpha` because it will be included by default.
+ */
 export function transformRadixColorsWithAlpha(familyName: string): RadixColorsTransformedWithAlphaFamily {
   return Array.from({ length: 12 }, (_, i) => i + 1).reduce((acc, number) => {
     return {

generator/index.ts → src/scripts/generator.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { headerComment } from './header-comment.ts';
+import { headerComment } from './header-comment';
 
 const outputDir = 'dist';
 

generator/header-comment.ts → src/scripts/header-comment.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const packageJson = require('../package.json');
+const packageJson = require('../../package.json');
 
 export const headerComment = `/**
  Radix Colors for Tailwind CSS

tsconfig.json

@@ -5,18 +5,22 @@
     "target": "esnext",
     "moduleResolution": "bundler",
     "moduleDetection": "force",
-    "allowImportingTsExtensions": true,
-    "noEmit": true,
+    "allowImportingTsExtensions": false,
     "composite": true,
     "strict": true,
+    "declaration": true,
+    "declarationDir": "dist",
     "downlevelIteration": true,
+    "incremental": true,
     "skipLibCheck": true,
-    "jsx": "react-jsx",
+    "rootDir": "src",
+    "outDir": "dist",
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "allowJs": true,
     "types": [
       "bun-types" // add Bun global
     ]
-  }
+  },
+  "include": ["src/**/*"]
 }

tsconfig.prod.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["./tsconfig"],
+  "exclude": ["src/scripts/**/*"]
+}