@ilijazm/tailwindcss-semantic-palette 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -31,10 +31,10 @@ var Palette = class {
|
|
|
31
31
|
* });
|
|
32
32
|
* ```
|
|
33
33
|
*
|
|
34
|
-
* @return {string
|
|
34
|
+
* @return {Record<string, string>} Object of CSS variable declarations.
|
|
35
35
|
*/
|
|
36
36
|
get cssDeclarations() {
|
|
37
|
-
return this.colors.map((color) => `--color-${color.name}-${color.shade}
|
|
37
|
+
return Object.fromEntries(this.colors.map((color) => [`--color-${color.name}-${color.shade}`, color.value]));
|
|
38
38
|
}
|
|
39
39
|
/**
|
|
40
40
|
* Constructs a nested theme object for all palette.
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
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"],
|
|
4
|
-
"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"],
|
|
5
|
-
"mappings": ";AAAA,SAAS,EAAE,GAAE,GAAE;AAAC,SAAM,EAAC,SAAQ,GAAE,QAAO,EAAC;AAAC;AAAC,EAAE,cAAY,SAAS,GAAE,IAAE,OAAK,CAAC,IAAG;AAAC,WAAS,EAAE,GAAE;AAAC,WAAM,EAAC,SAAQ,EAAE,CAAC,GAAE,QAAO,EAAE,CAAC,EAAC;AAAA,EAAC;AAAC,SAAO,EAAE,sBAAoB,MAAG;AAAC;AAAE,IAAI,IAAE;;;ACYjK,IAAM,UAAN,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBnB,IAAI,
|
|
4
|
+
"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 {Record<string, string>} Object of CSS variable declarations.\n */\n get cssDeclarations(): Record<string, string> {\n return Object.fromEntries(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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ilijazm/tailwindcss-semantic-palette",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "TailwindCSS Semantic Palette is a highly extendable plugin for Tailwind CSS that extends the default color palette with colors with semantic meaning.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"typecheck": "tsc --noEmit",
|