@ilijazm/tailwindcss-semantic-palette 0.1.1

package/README.md

@@ -0,0 +1,215 @@
+# TailwindCSS Semantic Palette
+
+TailwindCSS Semantic Palette is a highly extendable plugin for Tailwind CSS
+that extends the default color palette with colors with semantic meaning.
+This allows the user to reference colors by their intended meaning such as `primary`, `success`, or `warning`
+instead of specific color values such as `indigo`, `green`, or `yellow`.
+
+![Introduction](docs/images/readme_introduction.png)
+
+
+**Table of content**
+
+1. [Installation](#1-installation)
+2. [Features](#2-features)
+3. [Customization](#3-customization)
+
+## 1. Installation
+
+To install the TailwindCSS Semantic Palette follow the following steps:
+
+![Installation Guide](docs/images/installation.png)
+
+1. Install the TailwindCSS Semantic Palette dependency:
+
+```bash
+npm install @ilijazm/tailwindcss-semantic-palette
+```
+
+2. Import the plugin in your `.css`-file.
+
+```diff
+@import "tailwindcss";
++ @plugin "@ilijazm/tailwindcss-semantic-palette";
+```
+
+
+## 2. Features
+
+### Default palette extension
+
+By default, the plugin adds the following colors to the TailwindCSS palette:
+
+![Default colors](docs/images/default_colors.png)
+
+* `surface`
+* `container`
+* `content`
+* `brand`
+* `primary`
+* `secondary`
+* `tertiary`
+* `accent`
+* `info`
+* `success`
+* `warning`
+* `danger`
+
+## 3. Customization
+
+TailwindCSS Semantic Palette is build to support a wide range of customization options:
+
+Skip to the desired content:
+
+* [Select a subset of colors](#select-a-subset-of-colors)
+* [Customize a color](#customize-a-color)
+* [Select a subset of colors and customize colors](#select-a-subset-of-colors)
+* [Use custom colors exclusively](#use-custom-colors-exclusively)
+* [Add custom colors to a selected subset of colors](#add-custom-colors-to-a-selected-subset-of-colors)
+* [Add custom colors to all default colors](#add-custom-colors-to-all-default-colors)
+
+### Select a subset of colors
+
+To select only a subset of colors to add to the palette, one can use the `semantic-palette` option.
+The `semantic-palette` option allows selecting a subset of colors.
+
+Selecting a subset of colors is useful to control and limit the set of colors that gets added to the project.
+For example, a user only needs to add the colors `primary` and `brand` to the palette.
+
+The following code demonstrates how the user is able to select a subset of colors:
+
+```css
+@import 'tailwindcss';
+
+/* Only extend the palette with the default colors for 'primary' and 'brand'. */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette: primary, brand;
+}
+```
+
+This yields the following result:
+
+![A subset of colors](docs/images/subset_of_colors.png)
+
+### Customize a color
+
+To customize a color of the palette, one can use the `semantic-palette--<color_name>` options.
+The `semantic-palette--<color_name>` option allows setting the color shades of a specific color.
+
+Customizing a color is useful to apply the proper styling and branding to a project.
+For example, a user wants to set the color `primary` to `rose`.
+
+The following code demonstrates how the user is able to set the color `primary` to `rose`:
+
+```css
+@import 'tailwindcss';
+
+/* Extends the palette with all the default colors but set a custom primary color */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette--primary: "var(--color-rose-*)";
+}
+```
+
+This yields the following result:
+
+![Customize primary](docs/images/customize_primary.png)
+
+Alternatively, a user can define an array of colors to specify the exact colors.
+This array must contain exactly 11 items since TailwindCSS has 11 shades for each color
+(50, 100, 200, ..., 800, 900, 950).
+
+For example, a user wants to set the exact `brand` color.
+
+The following code demonstrates how the user is able to set the color `brand` to its exact color:
+
+```css
+@import 'tailwindcss';
+
+/* Extends the palette with all the default colors but set a custom brand color */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette--brand: "#ecfbf3", "#c6f2da", "#a0eac1", "#7be1a9", "#55d990", "#2fd077", "#26aa62", "#1e844c", "#155f36", "#0d3921", "#04130b";
+}
+```
+
+This yields the following result:
+
+![Customize palette](docs/images/customize_brand.png)
+
+### Select a subset of colors and customize colors
+
+To select a subset of colors while customizing the colors
+
+```css
+@import 'tailwindcss';
+
+/* Only extend the palette with 'primary', 'brand', and 'warning' and customize the colors 'primary' and 'brand'. */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette: primary, brand, warning;
+    semantic-palette--brand: "#ecfbf3", "#c6f2da", "#a0eac1", "#7be1a9", "#55d990", "#2fd077", "#26aa62", "#1e844c", "#155f36", "#0d3921", "#04130b";
+}
+```
+
+### Use custom colors exclusively
+
+```css
+@import 'tailwindcss';
+
+/* Only extend the palette with the custom colors 'to-do', 'in-progress', and 'done' */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette: to-do, in-progress, done;
+    semantic-palette--to-do: "#ecfbf3", "#c6f2da", "#a0eac1", "#7be1a9", "#55d990", "#2fd077", "#26aa62", "#1e844c", "#155f36", "#0d3921", "#04130b";
+    semantic-palette--in-progress: "var(--color-sky-*)";
+    semantic-palette--done: "hsl(260, 13%, 95%)", "hsl(262, 11%, 86%)", "hsl(260, 10%, 77%)", "hsl(260, 11%, 68%)", "hsl(261, 11%, 59%)", "hsl(261, 11%, 50%)", "hsl(261, 11%, 41%)", "hsl(263, 11%, 32%)", "hsl(263, 11%, 23%)", "hsl(263, 11%, 14%)", "hsl(260, 13%, 5%)"
+}
+```
+
+### Add custom colors to a selected subset of colors
+
+```css
+@import 'tailwindcss';
+
+/* Extend the palette with colors for 'success' and 'error'
+   as well as the custom colors 'to-do', 'in-progress', and 'done' */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette: success, error, to-do, in-progress, done;
+    semantic-palette--to-do: "#ecfbf3", "#c6f2da", "#a0eac1", "#7be1a9", "#55d990", "#2fd077", "#26aa62", "#1e844c", "#155f36", "#0d3921", "#04130b";
+    semantic-palette--in-progress: "var(--color-sky-*)";
+    semantic-palette--done: "hsl(260, 13%, 95%)", "hsl(262, 11%, 86%)", "hsl(260, 10%, 77%)", "hsl(260, 11%, 68%)", "hsl(261, 11%, 59%)", "hsl(261, 11%, 50%)", "hsl(261, 11%, 41%)", "hsl(263, 11%, 32%)", "hsl(263, 11%, 23%)", "hsl(263, 11%, 14%)", "hsl(260, 13%, 5%)"
+}
+```
+
+### Add custom colors to all default colors
+
+```css
+@import 'tailwindcss';
+
+/* Extends the palette with all the default colors
+   as well as the custom colors 'to-do', 'in-progress', and 'done' */
+@plugin '@IlijazM/tailwindcss-semantic-palette' {
+    semantic-palette: "*", to-do, in-progress, done;
+    semantic-palette--to-do: "#ecfbf3", "#c6f2da", "#a0eac1", "#7be1a9", "#55d990", "#2fd077", "#26aa62", "#1e844c", "#155f36", "#0d3921", "#04130b";
+    semantic-palette--in-progress: "var(--color-sky-*)";
+    semantic-palette--done: "hsl(260, 13%, 95%)", "hsl(262, 11%, 86%)", "hsl(260, 10%, 77%)", "hsl(260, 11%, 68%)", "hsl(261, 11%, 59%)", "hsl(261, 11%, 50%)", "hsl(261, 11%, 41%)", "hsl(263, 11%, 32%)", "hsl(263, 11%, 23%)", "hsl(263, 11%, 14%)", "hsl(260, 13%, 5%)"
+}
+```
+
+### Build project
+
+1. Install dependencies with `npm install`
+1. Run `npm run build`
+1. Result is in the `dist/` directory
+
+### Run example
+
+1. Go into the directory `example/`
+1. Install dependencies with npm `install`
+1. Run development build with `npm run dev`
+1. Check the example via `http://localhost:5173/`
+
+## Contributions
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+[MIT](../LICENSE)

package/dist/index.js

@@ -0,0 +1,296 @@
+// node_modules/tailwindcss/dist/plugin.mjs
+function g(i, n) {
+  return { handler: i, config: n };
+}
+g.withOptions = function(i, n = () => ({})) {
+  function t(o) {
+    return { handler: i(o), config: n(o) };
+  }
+  return t.__isOptionsFunction = true, t;
+};
+var u = g;
+
+// src/palette/palette.ts
+var Palette = class {
+  /**
+   * Constructs CSS variable declarations for all palette.
+   *
+   * Used for generating :root CSS variables in Tailwind CSS.
+   *
+   * Example output:
+   *
+   * ```typescript
+   * ["--color-primary-50: var(--color-indigo-50)", "--color-primary-100: var(--color-indigo-100)", ...]
+   * ```
+   *
+   * Example usage in CSS:
+   *
+   * ```typescript
+   * addBase({
+   *   ':root': palette.cssDeclarations,
+   * });
+   * ```
+   *
+   * @return {string[]} Array of CSS variable declarations.
+   */
+  get cssDeclarations() {
+    return this.colors.map((color) => `--color-${color.name}-${color.shade}: ${color.value};`);
+  }
+  /**
+   * Constructs a nested theme object for all palette.
+   *
+   * Used for extending Tailwind CSS theme palette.
+   *
+   * Example output:
+   *
+   * ```typescript
+   * {
+   *  primary: {
+   *    "50": "var(--color-indigo-50)",
+   *    "100": "var(--color-indigo-100)",
+   *    ...
+   *  },
+   *  secondary: {
+   *    "50": "var(--color-pink-50)",
+   *    "100": "var(--color-pink-100)",
+   *    ...
+   *  },
+   * }
+   * ```
+   *
+   * Example usage in Tailwind CSS config:
+   *
+   * ```typescript
+   * return {
+   *  theme: {
+   *    extend: {
+   *      palette: palette.themeExtension,
+   *    },
+   *  },
+   * };
+   * ```
+   *
+   * @return {Record<string, Record<string, string>>} Nested theme object.
+   */
+  get themeExtension() {
+    const theme = {};
+    for (const color of this.colors) {
+      if (!(color.name in theme)) {
+        theme[color.name] = {};
+      }
+      theme[color.name][color.shade] = color.value;
+    }
+    return theme;
+  }
+  colors = [];
+  /**
+   * Adds a new color to the collection.
+   *
+   * Example usage:
+   *
+   * ```typescript
+   * palette.addColor({ name: 'primary', shade: '500', value: 'var(--color-indigo-500)' });
+   * ```
+   *
+   * @param color {Color} The color to add.
+   */
+  addColor(color) {
+    this.colors.push(color);
+  }
+};
+
+// src/tailwindcss-color-shades.ts
+var TAILWIND_COLORS_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+// src/palette/generate-palette.ts
+function generatePalette(options) {
+  const palette = new Palette();
+  const paletteEntries = Object.entries(options.semanticPalette);
+  for (const [semanticColorName, colorValues] of paletteEntries) {
+    if (colorValues.length !== TAILWIND_COLORS_SHADES.length) {
+      throw new Error(
+        `The number of color values for semantic color "${semanticColorName}" (${colorValues.length}) does not match the number of Tailwind color shades (${TAILWIND_COLORS_SHADES.length}).`
+      );
+    }
+    for (let i = 0; i < TAILWIND_COLORS_SHADES.length; i++) {
+      const tailwindShade = TAILWIND_COLORS_SHADES[i];
+      palette.addColor({
+        name: semanticColorName,
+        shade: tailwindShade,
+        value: colorValues[i]
+      });
+    }
+  }
+  return palette;
+}
+
+// src/options/to-color-array.ts
+var PREFIX_REGEX = /^((var\()?--)?(color-)/;
+var SUFFIX_REGEX = /-?\*\)?$|\)$/;
+function toColorArray(variableName) {
+  if (!PREFIX_REGEX.test(variableName)) {
+    return TAILWIND_COLORS_SHADES.map(() => variableName);
+  }
+  const strippedVariableName = variableName.replace(PREFIX_REGEX, "").replace(SUFFIX_REGEX, "");
+  return TAILWIND_COLORS_SHADES.map((steps) => `var(--color-${strippedVariableName}-${steps})`);
+}
+
+// src/options/tailwindcss-semantic-palette-options-errors.ts
+var INVALID_TAILWINDCSS_OPTIONS_TYPE = new Error("The TailwindCSS options must be an object.");
+var INVALID_SEMANTIC_PALETTE_TYPE = new Error("The semantic palette option must be array of strings.");
+var INVALID_CUSTOM_SEMANTIC_COLOR_TYPE = new Error(
+  "Each custom semantic color must be a string or an array of strings."
+);
+var INVALID_AMOUNT_OF_COLORS_ERROR = new Error("A semantic palette must have exactly 1 or 11 colors defined.");
+
+// src/options/tailwindcss-semantic-palette-options.ts
+var DEFAULT_SEMANTIC_PALETTE_COLOR_SHADES = toColorArray("var(--color-neutral-*)");
+var DEFAULT_SEMANTIC_PALETTE = {
+  brand: toColorArray("var(--color-blue-*)"),
+  primary: toColorArray("var(--color-indigo-*)"),
+  secondary: toColorArray("var(--color-pink-*)"),
+  tertiary: toColorArray("var(--color-lime-*)"),
+  accent: toColorArray("var(--color-teal-*)"),
+  info: toColorArray("var(--color-cyan-*)"),
+  success: toColorArray("var(--color-green-*)"),
+  warning: toColorArray("var(--color-amber-*)"),
+  danger: toColorArray("var(--color-red-*)"),
+  surface: toColorArray("var(--color-gray-*)"),
+  container: toColorArray("var(--color-slate-*)"),
+  content: toColorArray("var(--color-neutral-*)")
+};
+var TailwindcssSemanticPaletteOptions = class {
+  semanticPalette;
+  constructor(options) {
+    this.semanticPalette = this.applyOptions(options);
+  }
+  applyOptions(options) {
+    if (options == null) {
+      return DEFAULT_SEMANTIC_PALETTE;
+    }
+    if (typeof options !== "object") {
+      throw INVALID_TAILWINDCSS_OPTIONS_TYPE;
+    }
+    return this.applyAllSemanticPaletteOptions(options);
+  }
+  applyAllSemanticPaletteOptions(options) {
+    let semanticPalette = {};
+    semanticPalette = this.applySemanticPaletteOption(options);
+    semanticPalette = this.applySemanticPaletteCustomColorsOption(semanticPalette, options);
+    return semanticPalette;
+  }
+  applySemanticPaletteOption(options) {
+    if (!("semantic-palette" in options)) {
+      return DEFAULT_SEMANTIC_PALETTE;
+    }
+    const semanticPaletteOption = options["semantic-palette"];
+    if (typeof semanticPaletteOption === "string") {
+      return this.mergeSemanticPaletteOptions([semanticPaletteOption]);
+    }
+    if (typeof semanticPaletteOption === "number") {
+      return this.mergeSemanticPaletteOptions([semanticPaletteOption.toString()]);
+    }
+    if (Array.isArray(semanticPaletteOption)) {
+      return this.mergeSemanticPaletteOptions(semanticPaletteOption);
+    }
+    throw INVALID_SEMANTIC_PALETTE_TYPE;
+  }
+  mergeSemanticPaletteOptions(semanticPaletteOption) {
+    const semanticPalette = {};
+    for (const colorName of semanticPaletteOption) {
+      if (colorName === "*") {
+        Object.assign(semanticPalette, DEFAULT_SEMANTIC_PALETTE);
+      } else if (colorName in DEFAULT_SEMANTIC_PALETTE) {
+        semanticPalette[colorName] = DEFAULT_SEMANTIC_PALETTE[colorName];
+      } else {
+        semanticPalette[colorName] = DEFAULT_SEMANTIC_PALETTE_COLOR_SHADES;
+      }
+    }
+    return semanticPalette;
+  }
+  applySemanticPaletteCustomColorsOption(semanticPalette, options) {
+    const customColorKeys = this.getAllCustomColorNames(options);
+    for (const customColorKey of customColorKeys) {
+      if (!(customColorKey in semanticPalette)) {
+        continue;
+      }
+      const option = this.getCustomSemanticPalette(options, customColorKey);
+      if (option.length === 1) {
+        semanticPalette[customColorKey] = toColorArray(option[0]);
+      } else if (option.length === 11) {
+        semanticPalette[customColorKey] = option;
+      } else {
+        throw INVALID_AMOUNT_OF_COLORS_ERROR;
+      }
+    }
+    return semanticPalette;
+  }
+  getCustomSemanticPalette(options, colorName) {
+    const option = options["semantic-palette--" + colorName];
+    if (typeof option === "string") {
+      return [option];
+    } else if (Array.isArray(option)) {
+      return option;
+    } else {
+      throw INVALID_CUSTOM_SEMANTIC_COLOR_TYPE;
+    }
+  }
+  getAllCustomColorNames(options) {
+    const customColorKeys = [];
+    for (const [potentialCustomColorKey] of Object.entries(options)) {
+      if (!potentialCustomColorKey.startsWith("semantic-palette--")) {
+        continue;
+      }
+      const customColorKey = potentialCustomColorKey.replace(/^semantic-palette--/, "");
+      customColorKeys.push(customColorKey);
+    }
+    return customColorKeys;
+  }
+};
+
+// src/tailwindcss-semantic-palette.ts
+var TailwindCssSemanticPalettePlugin = class {
+  options;
+  /**
+   * Cached palette instance.
+   *
+   * @private
+   */
+  _palette = null;
+  get palette() {
+    if (this._palette === null) {
+      return generatePalette(this.options);
+    }
+    return this._palette;
+  }
+  constructor(options) {
+    this.options = new TailwindcssSemanticPaletteOptions(options);
+  }
+};
+
+// src/index.ts
+var tailwindcssSemanticPalettePlugin = u.withOptions(
+  (options) => {
+    return ({ addBase }) => {
+      const plugin = new TailwindCssSemanticPalettePlugin(options);
+      addBase({
+        ":root": plugin.palette.cssDeclarations
+      });
+    };
+  },
+  (options) => {
+    const plugin = new TailwindCssSemanticPalettePlugin(options);
+    return {
+      theme: {
+        extend: {
+          colors: plugin.palette.themeExtension
+        }
+      }
+    };
+  }
+);
+var index_default = tailwindcssSemanticPalettePlugin;
+export {
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../node_modules/tailwindcss/dist/plugin.mjs", "../src/palette/palette.ts", "../src/tailwindcss-color-shades.ts", "../src/palette/generate-palette.ts", "../src/options/to-color-array.ts", "../src/options/tailwindcss-semantic-palette-options-errors.ts", "../src/options/tailwindcss-semantic-palette-options.ts", "../src/tailwindcss-semantic-palette.ts", "../src/index.ts"],
+  "sourcesContent": ["function g(i,n){return{handler:i,config:n}}g.withOptions=function(i,n=()=>({})){function t(o){return{handler:i(o),config:n(o)}}return t.__isOptionsFunction=!0,t};var u=g;export{u as default};\n", "import { TailwindColorShade } from '@src/tailwindcss-color-shades.ts';\n\nexport interface Color {\n  name: string;\n  shade: TailwindColorShade;\n  value: string;\n}\n\n/**\n * Holds a collection of palette and provides methods to generate\n * CSS variable declarations and Tailwind CSS theme extensions.\n */\nexport class Palette {\n  /**\n   * Constructs CSS variable declarations for all palette.\n   *\n   * Used for generating :root CSS variables in Tailwind CSS.\n   *\n   * Example output:\n   *\n   * ```typescript\n   * [\"--color-primary-50: var(--color-indigo-50)\", \"--color-primary-100: var(--color-indigo-100)\", ...]\n   * ```\n   *\n   * Example usage in CSS:\n   *\n   * ```typescript\n   * addBase({\n   *   ':root': palette.cssDeclarations,\n   * });\n   * ```\n   *\n   * @return {string[]} Array of CSS variable declarations.\n   */\n  get cssDeclarations(): string[] {\n    return this.colors.map((color) => `--color-${color.name}-${color.shade}: ${color.value};`);\n  }\n\n  /**\n   * Constructs a nested theme object for all palette.\n   *\n   * Used for extending Tailwind CSS theme palette.\n   *\n   * Example output:\n   *\n   * ```typescript\n   * {\n   *  primary: {\n   *    \"50\": \"var(--color-indigo-50)\",\n   *    \"100\": \"var(--color-indigo-100)\",\n   *    ...\n   *  },\n   *  secondary: {\n   *    \"50\": \"var(--color-pink-50)\",\n   *    \"100\": \"var(--color-pink-100)\",\n   *    ...\n   *  },\n   * }\n   * ```\n   *\n   * Example usage in Tailwind CSS config:\n   *\n   * ```typescript\n   * return {\n   *  theme: {\n   *    extend: {\n   *      palette: palette.themeExtension,\n   *    },\n   *  },\n   * };\n   * ```\n   *\n   * @return {Record<string, Record<string, string>>} Nested theme object.\n   */\n  get themeExtension() {\n    const theme: Record<string, Record<string, string>> = {};\n\n    for (const color of this.colors) {\n      if (!(color.name in theme)) {\n        theme[color.name] = {};\n      }\n      theme[color.name]![color.shade] = color.value;\n    }\n\n    return theme;\n  }\n\n  readonly colors: Color[] = [];\n\n  /**\n   * Adds a new color to the collection.\n   *\n   * Example usage:\n   *\n   * ```typescript\n   * palette.addColor({ name: 'primary', shade: '500', value: 'var(--color-indigo-500)' });\n   * ```\n   *\n   * @param color {Color} The color to add.\n   */\n  addColor(color: Color) {\n    this.colors.push(color);\n  }\n}\n", "export type TailwindColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;\n\nexport const TAILWIND_COLORS_SHADES: TailwindColorShade[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];\n", "import { TailwindcssSemanticPaletteOptions } from '../options/tailwindcss-semantic-palette-options.ts';\nimport { Palette } from '@src/palette/palette.ts';\nimport { TAILWIND_COLORS_SHADES } from '@src/tailwindcss-color-shades.ts';\n\n/**\n * Generates all palette.\n *\n * @param options a reference to the options object.\n * @returns the generated palette.\n */\nexport function generatePalette(options: TailwindcssSemanticPaletteOptions): Palette {\n  const palette = new Palette();\n\n  const paletteEntries = Object.entries(options.semanticPalette);\n  for (const [semanticColorName, colorValues] of paletteEntries) {\n    if (colorValues.length !== TAILWIND_COLORS_SHADES.length) {\n      throw new Error(\n        `The number of color values for semantic color \"${semanticColorName}\" (${colorValues.length}) does not match the number of Tailwind color shades (${TAILWIND_COLORS_SHADES.length}).`,\n      );\n    }\n\n    // TAILWIND_COLORS_SHADES.length === colorValues.length\n    for (let i = 0; i < TAILWIND_COLORS_SHADES.length; i++) {\n      const tailwindShade = TAILWIND_COLORS_SHADES[i]!;\n      palette.addColor({\n        name: semanticColorName,\n        shade: tailwindShade,\n        value: colorValues[i]!,\n      });\n    }\n  }\n\n  return palette;\n}\n", "import { TAILWIND_COLORS_SHADES } from '@src/tailwindcss-color-shades.ts';\n\n/**\n * Matches the following prefixes:\n *\n * * \"--var(color-\"\n * * \"--color-\"\n * * \"color-\"\n */\nconst PREFIX_REGEX = /^((var\\()?--)?(color-)/;\n\n/**\n * Matches to following suffixes:\n *\n * * \")\"\n * * \"*)\"\n * * \"-*)\"\n * * \"-*\"\n */\nconst SUFFIX_REGEX = /-?\\*\\)?$|\\)$/;\n\n/**\n * Transforms a color variable from a name to an array containing all tailwind palette steps from 90 to 950.\n *\n * If a simple name is inputted this name will be wrapped into an array eleven times.\n *\n * If used with one of the following prefixes:\n *\n * * \"--var(color-\"\n * * \"--color-\"\n * * \"color-\"\n *\n * it will return an array with the desired color variable for each tailwind steps.\n *\n * The variable name may end with the following suffixes:\n *\n * * \")\"\n * * \"*)\"\n * * \"-*)\"\n * * \"-*\"\n *\n * @example The input `white` yields an array with the value `white` present eleven times.\n *\n * ```json\n * [\"white\", \"white\", \"white\", \"white\", \"white\", \"white\", \"white\", \"white\", \"white\", \"white\", \"white\"]\n * ```\n *\n * @example The input `var(--color-indigo-*) yields the following result\n *\n * ```\n * [\n *   \"var(--color-indigo-50\",\n *   \"var(--color-indigo-100\",\n *   \"var(--color-indigo-200\",\n *   \"var(--color-indigo-300\",\n *   \"var(--color-indigo-400\",\n *   \"var(--color-indigo-500\",\n *   \"var(--color-indigo-600\",\n *   \"var(--color-indigo-700\",\n *   \"var(--color-indigo-800\",\n *   \"var(--color-indigo-900\",\n *   \"var(--color-indigo-950\"\n * ]\n * ```\n *\n * @see TAILWIND_COLORS_SHADES\n * @param variableName the name of the variable to transform into a color step array\n * @returns the color step array\n */\nexport function toColorArray(variableName: string): string[] {\n  if (!PREFIX_REGEX.test(variableName)) {\n    // single variable case\n    // example: \"white\" -> [\"white\", \"white\", ..., \"white\"]\n    return TAILWIND_COLORS_SHADES.map(() => variableName);\n  }\n\n  // multi variable case\n  // example: \"var(--color-indigo-*)\" -> [\"var(--color-indigo-50)\", \"var(--color-indigo-100)\", ..., \"var(--color-indigo-950)\"]\n\n  // Strip the prefix and suffix from the variable name and leave only the variable name\n  const strippedVariableName = variableName.replace(PREFIX_REGEX, '').replace(SUFFIX_REGEX, '');\n  return TAILWIND_COLORS_SHADES.map((steps) => `var(--color-${strippedVariableName}-${steps})`);\n}\n", "export const INVALID_TAILWINDCSS_OPTIONS_TYPE = new Error('The TailwindCSS options must be an object.');\nexport const INVALID_SEMANTIC_PALETTE_TYPE = new Error('The semantic palette option must be array of strings.');\nexport const INVALID_CUSTOM_SEMANTIC_COLOR_TYPE = new Error(\n  'Each custom semantic color must be a string or an array of strings.',\n);\nexport const INVALID_AMOUNT_OF_COLORS_ERROR = new Error('A semantic palette must have exactly 1 or 11 colors defined.');\n", "/**\n * @packageDocumentation\n *\n * This package is responsible for parsing the options object provided from TailwindCSS into a typed class that is\n * getting used for generating the palette.\n *\n * This package does the following things:\n *\n * ## No options provided\n *\n * If the user didn't provide any options, a default should be chosen containing a handful of useful color additions for\n * the palette. The user can simply go with the default palette by importing the plugin with no options provided like\n * the following:\n *\n * ```css\n * @import 'tailwindcss';\n * @plugin '@IlijazM/tailwindcss-semantic-palette';\n * ```\n *\n * This yields the default output which is defined in the const {@link DEFAULT_SEMANTIC_PALETTE} and looks like the\n * following:\n *\n * ```json\n * {\n *   \"semanticPalette\": {\n *     \"brand\": [\"var(--color-blue-50)\", \"var(--color-blue-100)\", ..., \"var(--color-blue-950)\"],\n *     \"primary\": [\"var(--color-indigo-50)\", \"var(--color-indigo-100)\", ..., \"var(--color-indigo-950)\"],\n *     ...\n *     \"content\": [\"var(--color-neutral-50)\", \"var(--color-neutral-100)\", ..., \"var(--color-neutral-950)\"],\n *   }\n * }\n * ```\n *\n * ## A sub-set of colors\n *\n * A user may select a sub-set of colors that get used. This is useful if said user only needs for example \"primary\" and\n * \"brand\". The user can select these two colors by prompting the sub-set of colors using the option \"semantic-palette\"\n * which looks like the following:\n *\n * ```css\n * @import 'tailwindcss';\n * @plugin '@IlijazM/tailwindcss-semantic-palette' {\n *   semantic-palette: primary, brand;\n * }\n * ```\n *\n * This yields a subset of the default output defined in the const {@link DEFAULT_SEMANTIC_PALETTE} and looks like the\n * following:\n *\n * ```json\n * {\n *   \"semanticPalette\": {\n *     \"brand\": [\"var(--color-blue-50)\", \"var(--color-blue-100)\", ..., \"var(--color-blue-950)\"],\n *     \"primary\": [\"var(--color-indigo-50)\", \"var(--color-indigo-100)\", ..., \"var(--color-indigo-950)\"],\n *   }\n * }\n * ```\n *\n * ## Custom colors\n *\n * A user may define his custom colors. This is useful if there is a specific use case where a color should get assigned\n * a semantic meaning for example the user defined an ui that includes a kanban board. That kanban board should use a\n * semantic color for each column which includes \"To Do\", \"In Progress\", \"Done\". It needs these colors in different\n * shades because the background color, border color, text color, and button color changes based on the column. In this\n * case the user can define new colors by using the options \"semantic-palette\" and the options\n * \"semantic-palette--<color_name>\" which looks the following:\n *\n * ```css\n * @import 'tailwindcss';\n * @plugin '@IlijazM/tailwindcss-semantic-palette' {\n *   semantic-palette: \"*\", to-do, in-progress, done;\n *   semantic-palette--to-do: \"#ecfbf3\", \"#c6f2da\", \"#a0eac1\", \"#7be1a9\", \"#55d990\", \"#2fd077\", \"#26aa62\", \"#1e844c\", \"#155f36\", \"#0d3921\", \"#04130b\";\n *   semantic-palette--in-progress: \"var(--color-sky-50)\", \"var(--color-sky-100)\", \"var(--color-sky-200)\", \"var(--color-sky-300)\", \"var(--color-sky-400)\", \"var(--color-sky-500)\", \"var(--color-sky-600)\", \"var(--color-sky-700)\", \"var(--color-sky-800)\", \"var(--color-sky-900)\", \"var(--color-sky-950)\";\n *   semantic-palette--done: \"hsl(260, 13%, 95%)\", \"hsl(262, 11%, 86%)\", \"hsl(260, 10%, 77%)\", \"hsl(260, 11%, 68%)\", \"hsl(261, 11%, 59%)\", \"hsl(261, 11%, 50%)\", \"hsl(261, 11%, 41%)\", \"hsl(263, 11%, 32%)\", \"hsl(263, 11%, 23%)\", \"hsl(263, 11%, 14%)\", \"hsl(260, 13%, 5%)\"\n * }\n * ```\n *\n * ## Customize colors\n *\n * A user may select, add, and customize colors\n *\n */\n\nimport { toColorArray } from '@src/options/to-color-array.ts';\nimport {\n  INVALID_AMOUNT_OF_COLORS_ERROR,\n  INVALID_CUSTOM_SEMANTIC_COLOR_TYPE,\n  INVALID_SEMANTIC_PALETTE_TYPE,\n  INVALID_TAILWINDCSS_OPTIONS_TYPE,\n} from '@src/options/tailwindcss-semantic-palette-options-errors.ts';\n\ntype PaletteOptionsType = Record<string, string[]>;\n\nexport interface TailwindCssSemanticPaletteThemedOptionsType {\n  semanticPalette: PaletteOptionsType;\n}\n\nexport const DEFAULT_SEMANTIC_PALETTE_COLOR_SHADES = toColorArray('var(--color-neutral-*)');\n\nexport const DEFAULT_SEMANTIC_PALETTE: Record<string, string[]> = {\n  brand: toColorArray('var(--color-blue-*)'),\n  primary: toColorArray('var(--color-indigo-*)'),\n  secondary: toColorArray('var(--color-pink-*)'),\n  tertiary: toColorArray('var(--color-lime-*)'),\n  accent: toColorArray('var(--color-teal-*)'),\n  info: toColorArray('var(--color-cyan-*)'),\n  success: toColorArray('var(--color-green-*)'),\n  warning: toColorArray('var(--color-amber-*)'),\n  danger: toColorArray('var(--color-red-*)'),\n  surface: toColorArray('var(--color-gray-*)'),\n  container: toColorArray('var(--color-slate-*)'),\n  content: toColorArray('var(--color-neutral-*)'),\n};\n\nexport class TailwindcssSemanticPaletteOptions implements TailwindCssSemanticPaletteThemedOptionsType {\n  readonly semanticPalette: PaletteOptionsType;\n\n  constructor(options: unknown) {\n    this.semanticPalette = this.applyOptions(options);\n  }\n\n  private applyOptions(options: unknown): PaletteOptionsType {\n    if (options == null) {\n      return DEFAULT_SEMANTIC_PALETTE;\n    }\n\n    if (typeof options !== 'object') {\n      throw INVALID_TAILWINDCSS_OPTIONS_TYPE;\n    }\n\n    return this.applyAllSemanticPaletteOptions(options);\n  }\n\n  private applyAllSemanticPaletteOptions(options: any): PaletteOptionsType {\n    let semanticPalette: PaletteOptionsType = {};\n\n    semanticPalette = this.applySemanticPaletteOption(options);\n    semanticPalette = this.applySemanticPaletteCustomColorsOption(semanticPalette, options);\n\n    return semanticPalette;\n  }\n\n  private applySemanticPaletteOption(options: any): PaletteOptionsType {\n    // If no semantic palette option is provided, return the default semantic palette.\n    if (!('semantic-palette' in options)) {\n      return DEFAULT_SEMANTIC_PALETTE;\n    }\n\n    const semanticPaletteOption = options['semantic-palette'];\n\n    // This case happens when there is only on color provided in the .css file. In this case the string should just be\n    // treated as an array with one element.\n    //\n    // For example:\n    //\n    // ```css\n    // @import 'tailwindcss';\n    // @plugin '@IlijazM/tailwindcss-semantic-palette' {\n    //   semantic-palette: primary;\n    // }\n    // ```\n    if (typeof semanticPaletteOption === 'string') {\n      return this.mergeSemanticPaletteOptions([semanticPaletteOption]);\n    }\n\n    // This is a special case where the user provides a number instead of a string. This can happen when the user\n    // provides a number color name without quotes in the .css file. I'm not sure why someone would do that, but just in\n    // case. In this case the number should be treated as an array with the number as string as the only element.\n    //\n    // For example:\n    //\n    // ```css\n    // @import 'tailwindcss';\n    // @plugin '@IlijazM/tailwindcss-semantic-palette' {\n    //   semantic-palette: 100;\n    // }\n    // ```\n    if (typeof semanticPaletteOption === 'number') {\n      return this.mergeSemanticPaletteOptions([semanticPaletteOption.toString()]);\n    }\n\n    // This case happens when there is a list of colors provided in the .css file.\n    //\n    // For example:\n    //\n    // ```css\n    // @import 'tailwindcss';\n    // @plugin '@IlijazM/tailwindcss-semantic-palette' {\n    //   semantic-palette: primary, brand;\n    // }\n    // ```\n    if (Array.isArray(semanticPaletteOption)) {\n      return this.mergeSemanticPaletteOptions(semanticPaletteOption);\n    }\n\n    // If the semantic palette option is not a string, number, or array, throw an error. I'm not sure how this would\n    // happen, but just in case.\n    throw INVALID_SEMANTIC_PALETTE_TYPE;\n  }\n\n  private mergeSemanticPaletteOptions(semanticPaletteOption: string[]): PaletteOptionsType {\n    const semanticPalette: PaletteOptionsType = {};\n\n    for (const colorName of semanticPaletteOption) {\n      if (colorName === '*') {\n        Object.assign(semanticPalette, DEFAULT_SEMANTIC_PALETTE);\n      } else if (colorName in DEFAULT_SEMANTIC_PALETTE) {\n        semanticPalette[colorName] = DEFAULT_SEMANTIC_PALETTE[colorName]!;\n      } else {\n        semanticPalette[colorName] = DEFAULT_SEMANTIC_PALETTE_COLOR_SHADES;\n      }\n    }\n\n    return semanticPalette;\n  }\n\n  private applySemanticPaletteCustomColorsOption(\n    semanticPalette: PaletteOptionsType,\n    options: any,\n  ): PaletteOptionsType {\n    const customColorKeys: string[] = this.getAllCustomColorNames(options);\n\n    for (const customColorKey of customColorKeys) {\n      if (!(customColorKey in semanticPalette)) {\n        // Potentially warn the user that they defined a custom color that is not in the semantic palette.\n        continue;\n      }\n\n      const option = this.getCustomSemanticPalette(options, customColorKey);\n\n      if (option.length === 1) {\n        semanticPalette[customColorKey] = toColorArray(option[0]!);\n      } else if (option.length === 11) {\n        semanticPalette[customColorKey] = option;\n      } else {\n        throw INVALID_AMOUNT_OF_COLORS_ERROR;\n      }\n    }\n\n    return semanticPalette;\n  }\n\n  private getCustomSemanticPalette(options: any, colorName: string): string[] {\n    const option = options['semantic-palette--' + colorName];\n\n    if (typeof option === 'string') {\n      return [option];\n    } else if (Array.isArray(option)) {\n      return option;\n    } else {\n      throw INVALID_CUSTOM_SEMANTIC_COLOR_TYPE;\n    }\n  }\n\n  private getAllCustomColorNames(options: any): string[] {\n    const customColorKeys: string[] = [];\n\n    for (const [potentialCustomColorKey] of Object.entries(options)) {\n      if (!potentialCustomColorKey.startsWith('semantic-palette--')) {\n        continue;\n      }\n\n      const customColorKey = potentialCustomColorKey.replace(/^semantic-palette--/, '');\n      customColorKeys.push(customColorKey);\n    }\n\n    return customColorKeys;\n  }\n}\n", "import { generatePalette } from '@src/palette/generate-palette.ts';\nimport { TailwindcssSemanticPaletteOptions } from './options/tailwindcss-semantic-palette-options.ts';\nimport { Palette } from '@src/palette/palette.js';\n\nexport class TailwindCssSemanticPalettePlugin {\n  private readonly options: TailwindcssSemanticPaletteOptions;\n\n  /**\n   * Cached palette instance.\n   *\n   * @private\n   */\n  private _palette: Palette | null = null;\n\n  public get palette() {\n    if (this._palette === null) {\n      return generatePalette(this.options);\n    }\n    return this._palette!;\n  }\n\n  constructor(options: unknown) {\n    this.options = new TailwindcssSemanticPaletteOptions(options);\n  }\n}\n", "import plugin from 'tailwindcss/plugin';\nimport type { PluginCreator } from 'tailwindcss/plugin';\n\nimport { TailwindCssSemanticPalettePlugin } from '@src/tailwindcss-semantic-palette.ts';\n\nconst tailwindcssSemanticPalettePlugin: PluginCreator = plugin.withOptions(\n  (options) => {\n    return ({ addBase }) => {\n      const plugin = new TailwindCssSemanticPalettePlugin(options);\n\n      addBase({\n        ':root': plugin.palette.cssDeclarations,\n      });\n    };\n  },\n\n  (options) => {\n    const plugin = new TailwindCssSemanticPalettePlugin(options);\n\n    return {\n      theme: {\n        extend: {\n          colors: plugin.palette.themeExtension,\n        },\n      },\n    };\n  },\n);\n\nexport default tailwindcssSemanticPalettePlugin;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@ilijazm/tailwindcss-semantic-palette",
+  "version": "0.1.1",
+  "description": "TailwindCSS Semantic Palette is a highly extendable plugin for Tailwind CSS that extends the default color palette with colors with semantic meaning.",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint",
+    "test": "jest",
+    "build": "node --experimental-transform-types build.ts",
+    "dev": "npm run build -- --watch"
+  },
+  "main": "dist/index.js",
+  "type": "module",
+  "files": [
+    "dist/",
+    "docs/",
+    "README.md"
+  ],
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "plugin",
+    "css",
+    "utilities",
+    "components",
+    "colors",
+    "palette"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "author": "Ilijaz Mehmedovic",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+git@github.com:IlijazM/tailwindcss-semantic-utilities.git",
+    "directory": "tailwindcss-semantic-palette"
+  },
+  "dependencies": {
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.13",
+    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/parser": "^8.36.0",
+    "esbuild": "^0.25.6",
+    "eslint": "^9.31.0",
+    "jest": "^30.0.4",
+    "ts-jest": "^29.4.0",
+    "typescript-eslint": "^8.36.0"
+  }
+}