├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── dist
    ├── index.cjs
    ├── index.cjs.map
    ├── index.modern.js
    ├── index.modern.js.map
    ├── index.module.js
    ├── index.module.js.map
    ├── index.umd.js
    ├── index.umd.js.map
    └── types
    │   └── index.d.ts
├── index.ts
├── package-lock.json
├── package.json
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es2021": true,
 5 |     "node": true
 6 |   },
 7 |   "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
 8 |   "overrides": [],
 9 |   "parser": "@typescript-eslint/parser",
10 |   "parserOptions": {
11 |     "ecmaVersion": "latest",
12 |     "sourceType": "module"
13 |   },
14 |   "plugins": ["@typescript-eslint", "prettier"],
15 |   "rules": {
16 |     "prettier/prettier": 1,
17 |     "@typescript-eslint/no-explicit-any": "off"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | README.md
2 | dist
3 | tsconfig.json


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "trailingComma": "es5",
 4 |   "arrowParens": "always",
 5 |   "bracketSameLine": false,
 6 |   "printWidth": 120,
 7 |   "tabWidth": 2,
 8 |   "semi": true
 9 | }
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Brandon McConnell
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">Default Shades for TailwindCSS</h1>
  2 | 
  3 | <div align="center">
  4 | 
  5 | [![minified size](https://img.shields.io/bundlephobia/min/tailwindcss-default-shades)](https://bundlephobia.com/package/tailwindcss-default-shades)
  6 | [![license](https://img.shields.io/github/license/brandonmcconnell/tailwindcss-default-shades?label=license)](https://github.com/brandonmcconnell/tailwindcss-default-shades/blob/main/LICENSE)
  7 | [![version](https://img.shields.io/npm/v/tailwindcss-default-shades)](https://www.npmjs.com/package/tailwindcss-default-shades)
  8 | [![twitter](https://img.shields.io/twitter/follow/branmcconnell)](https://twitter.com/branmcconnell)
  9 | 
 10 | </div>
 11 | 
 12 | `tailwindcss-default-shades` simplifies working with color shades by introducing default aliases. It is a function that wraps the colors defined in your Tailwind CSS config file. With `tailwindcss-default-shades` in use, you can use colors without specifying a shade, like `bg-blue` instead of `bg-blue-500`.
 13 | 
 14 | - [Installation](#installation)
 15 | - [Usage](#usage)
 16 |   - [Specifying Default Shades](#specifying-default-shades)
 17 |     - [Example: Single Default Shade](#example-single-default-shade)
 18 |     - [Example: Granular Default Shades](#example-granular-default-shades)
 19 | - [Why Use `tailwindcss-default-shades`](#why-use-tailwindcss-default-shades)
 20 | 
 21 | ## Installation
 22 | 
 23 | You can install the plugin via npm:
 24 | 
 25 | ```bash
 26 | npm install tailwindcss-default-shades
 27 | ```
 28 | 
 29 | ## Usage
 30 | 
 31 | By default, `tailwindcss-default-shades` automatically maps the `500` shade of each color as its base name. This means that specifying a class like `bg-blue` will effectively apply the `bg-blue-500` shade.
 32 | 
 33 | ```js
 34 | const defaultShades = require('tailwindcss-default-shades');
 35 | 
 36 | module.exports = {
 37 |   plugins: [
 38 |     defaultShades({
 39 |       blue: {
 40 |         // ...
 41 |         500: '#3b82f6',
 42 |         // ...
 43 |       }
 44 |     }),
 45 |   ]
 46 | };
 47 | ```
 48 | 
 49 | In this example, the `bg-blue` class will apply the `bg-blue-500` shade, `#3b82f6`.
 50 | 
 51 | The default shade can, however, be overridden by specifying a different shade as the second argument in the `tailwindcss-default-shades` function, or even an object specifying which shade to use per color in your colors object, with an optional fallback for unspecified colors, which also defaults to `500`.
 52 | 
 53 | ### Specifying Default Shades
 54 | 
 55 | If you wish to customize the default shades for specific colors, you can do so by providing a different shade key, or an object with the color name as the key and the default shade as the value, as the second argument in the `tailwindcss-default-shades` function.
 56 | 
 57 | #### Example: Single Default Shade
 58 | 
 59 | ```js
 60 | const defaultShades = require('tailwindcss-default-shades');
 61 | 
 62 | module.exports = {
 63 |   plugins: [
 64 |     defaultShades({
 65 |       red: { /* your shades */ },
 66 |       green: { /* your shades */ },
 67 |       blue: { /* your shades */ },
 68 |     }, 300),
 69 |   ]
 70 | };
 71 | ```
 72 | 
 73 | In this example, the `bg-blue` class will apply the `bg-blue-300` shade, and the `bg-red` and `bg-green` classes will apply the `bg-red-300` and `bg-green-300` shades, respectively.
 74 | 
 75 | #### Example: Granular Default Shades
 76 | 
 77 | ```js
 78 | const defaultShades = require('tailwindcss-default-shades');
 79 | 
 80 | module.exports = {
 81 |   plugins: [
 82 |     defaultShades({
 83 |       red: { /* your shades */ },
 84 |       green: { /* your shades */ },
 85 |       blue: { /* your shades */ },
 86 |     }, {
 87 |       DEFAULT: 100,
 88 |       red: 300,
 89 |       green: 400,
 90 |     }),
 91 |   ]
 92 | };
 93 | ```
 94 | 
 95 | In this example, the `bg-red` class will apply the `bg-red-300` shade, the `bg-green` class will apply the `bg-green-400` shade, and the `bg-blue` class will apply the `bg-blue-100` shade because it falls back to the `DEFAULT` shade. Had `DEFAULT` not been specified in this example, the `bg-blue` class would have applied the `bg-blue-500` shade, as `500` is the general default shade.
 96 | 
 97 | ## Why Use `tailwindcss-default-shades`
 98 | 
 99 | `tailwindcss-default-shades` enhances your workflow by reducing the need to specify shades explicitly when a default shade suffices. This leads to cleaner, more readable utility class usage without sacrificing the flexibility and power that Tailwind CSS offers.
100 | 
101 | ---
102 | 
103 | To experiment with `tailwindcss-default-shades`, try out the demo here on Tailwind Play: https://play.tailwindcss.com/x7YCj9Dauo
104 | 
105 | I hope you find `tailwindcss-default-shades` a valuable addition to your Tailwind CSS toolkit. If you have any feedback or suggestions, don't hesitate to open an issue or pull request.
106 | 
107 | Enjoy more simplified styles with `tailwindcss-default-shades`! 🚀
108 | 
109 | ---
110 | 
111 | I hope you find `tailwindcss-default-shades` a valuable addition to your projects. If you have any issues or suggestions, don't hesitate to open an issue or pull request.
112 | 
113 | If you liked this, you might also like my other Tailwind CSS plugins:
114 | * [tailwindcss-multi](https://github.com/brandonmcconnell/tailwindcss-multi): Group utilities together by variant
115 | * [tailwindcss-signals](https://github.com/brandonmcconnell/tailwindcss-signals): Apply styles based on parent or ancestor state, a state-driven alterative to groups
116 | * [tailwindcss-members](https://github.com/brandonmcconnell/tailwindcss-members): Apply styles based on child or descendant state, the inverse of groups
117 | * [tailwindcss-mixins](https://github.com/brandonmcconnell/tailwindcss-mixins): Construct reusable & aliased sets of utilities inline
118 | * [tailwind-lerp-colors](https://github.com/brandonmcconnell/tailwind-lerp-colors): Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes
119 | * [tailwindcss-selector-patterns](https://github.com/brandonmcconnell/tailwindcss-selector-patterns): Dynamic CSS selector patterns
120 | * [tailwindcss-js](https://github.com/brandonmcconnell/tailwindcss-js): Effortless build-time JS script injection
121 | * [tailwindcss-directional-shadows](https://github.com/brandonmcconnell/tailwindcss-directional-shadows): Supercharge your shadow utilities with added directional support (includes directional `shadow-border` utilities too ✨)


--------------------------------------------------------------------------------
/dist/index.cjs:
--------------------------------------------------------------------------------
1 | function e(){return e=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e},e.apply(this,arguments)}module.exports=function(r,o){var t;if(void 0===o&&(o=500),!r||"object"!=typeof r)throw new Error("defaultShades: received unexpected `colors` argument value of `"+JSON.stringify(r)+"`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.");if(!o)throw new Error("defaultShades: received unexpected `defaultShade` argument value of `"+JSON.stringify(o)+"`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or `DEFAULT`) and numeric or string values of the desired shade for each.");var a="object"==typeof o;a&&(null!=(t=o).DEFAULT||(t.DEFAULT=500));for(var n={},i=0,s=Object.entries(r);i<s.length;i++){var c,l=s[i],f=l[0],d=l[1];if(!d)throw new Error("defaultShades: shades for color `"+f+"` was an unexpected value of `"+JSON.stringify(d)+"`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.");if("string"!=typeof d){var h=e({},d),u=d[a?null!=(c=o[f])?c:o.DEFAULT:o];u&&(null!=h.DEFAULT||(h.DEFAULT=u)),n[f]=h}else n[f]=d}return n};
2 | //# sourceMappingURL=index.cjs.map
3 | 


--------------------------------------------------------------------------------
/dist/index.cjs.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.cjs","sources":["../index.ts"],"sourcesContent":["type IsRecord<T> =\n  T extends Record<string, infer R> ? (R extends string | Record<string, string> ? true : never) : never;\ntype Colors<T> = IsRecord<T> extends true ? T : never;\ntype IndividualShade<T> = Record<keyof Colors<T>, keyof Colors<T>[keyof Colors<T>]> & { DEFAULT?: number | string };\n\nconst defaultDefaultShade = 500;\n\nexport default function defaultShades<T>(\n  colors: Colors<T>,\n  defaultShade: number | string | IndividualShade<T> = defaultDefaultShade\n): Colors<T> {\n  if (!colors || typeof colors !== 'object') {\n    throw new Error(\n      `defaultShades: received unexpected \\`colors\\` argument value of \\`${JSON.stringify(colors)}\\`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n    );\n  }\n  if (!defaultShade) {\n    throw new Error(\n      `defaultShades: received unexpected \\`defaultShade\\` argument value of \\`${JSON.stringify(defaultShade)}\\`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or \\`DEFAULT\\`) and numeric or string values of the desired shade for each.`\n    );\n  }\n  const usingKeyedShades = typeof defaultShade === 'object';\n  if (usingKeyedShades) defaultShade.DEFAULT ??= defaultDefaultShade;\n\n  const resultColors: Record<string, string | Record<string, string>> = {};\n  for (const [name, shades] of Object.entries(colors)) {\n    if (!shades) {\n      throw new Error(\n        `defaultShades: shades for color \\`${name}\\` was an unexpected value of \\`${JSON.stringify(shades)}\\`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n      );\n    }\n    if (typeof shades === 'string') {\n      resultColors[name] = shades;\n      continue;\n    }\n    const newShades = { ...shades };\n    const newShadesDefault =\n      shades[\n        usingKeyedShades\n          ? defaultShade[name as keyof typeof defaultShade] ?? (defaultShade.DEFAULT as string)\n          : defaultShade\n      ];\n    if (newShadesDefault) newShades.DEFAULT ??= newShadesDefault;\n    resultColors[name] = newShades;\n  }\n  return resultColors as Colors<T>;\n}\n"],"names":["colors","defaultShade","_defaultShade","Error","JSON","stringify","usingKeyedShades","DEFAULT","resultColors","_i","_Object$entries","Object","entries","length","_defaultShade$name","_Object$entries$_i","name","shades","newShades","_extends","newShadesDefault","_newShades$DEFAULT"],"mappings":"mPAOwB,SACtBA,EACAC,GAAwE,IAAAC,EAExE,YAFAD,IAAAA,EAJ0B,MAMrBD,GAA4B,iBAAXA,EACpB,MAAM,IAAIG,MAC6DC,kEAAAA,KAAKC,UAAUL,GAAO,iQAG/F,IAAKC,EACH,MAAU,IAAAE,MAAK,wEAC8DC,KAAKC,UAAUJ,GAAa,mNAG3G,IAAMK,EAA2C,iBAAjBL,EAC5BK,IAAsC,OAApBJ,EAAAD,GAAaM,UAAbL,EAAaK,QAjBT,MAoB1B,IADA,IAAMC,EAAgE,CAAA,EACtEC,EAAAC,EAAAA,EAA6BC,OAAOC,QAAQZ,GAAOS,EAAAC,EAAAG,OAAAJ,IAAE,CAAA,IAAAK,EAAhDC,EAAAL,EAAAD,GAAOO,EAAID,EAAEE,GAAAA,EAAMF,EACtB,GAAA,IAAKE,EACH,MAAM,IAAId,MAAK,oCACwBa,EAAI,iCAAmCZ,KAAKC,UAAUY,GAAuM,iMAGtS,GAAsB,iBAAXA,EAAX,CAIA,IAAMC,EAASC,EAAQF,CAAAA,EAAAA,GACjBG,EACJH,EACEX,EACmDQ,OADnCA,EACZb,EAAae,IAAkCF,EAAKb,EAAaM,QACjEN,GAEJmB,IAAmCC,MAAjBH,EAAUX,UAAVW,EAAUX,QAAYa,IAC5CZ,EAAaQ,GAAQE,CATrB,MAFEV,EAAaQ,GAAQC,CAYzB,CACA,OAAOT,CACT"}


--------------------------------------------------------------------------------
/dist/index.modern.js:
--------------------------------------------------------------------------------
1 | function e(){return e=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e},e.apply(this,arguments)}function r(r,o=500){if(!r||"object"!=typeof r)throw new Error(`defaultShades: received unexpected \`colors\` argument value of \`${JSON.stringify(r)}\`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.`);if(!o)throw new Error(`defaultShades: received unexpected \`defaultShade\` argument value of \`${JSON.stringify(o)}\`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or \`DEFAULT\`) and numeric or string values of the desired shade for each.`);const t="object"==typeof o;t&&(null!=o.DEFAULT||(o.DEFAULT=500));const n={};for(const[i,s]of Object.entries(r)){var a;if(!s)throw new Error(`defaultShades: shades for color \`${i}\` was an unexpected value of \`${JSON.stringify(s)}\`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.`);if("string"==typeof s){n[i]=s;continue}const r=e({},s),c=s[t?null!=(a=o[i])?a:o.DEFAULT:o];c&&(null!=r.DEFAULT||(r.DEFAULT=c)),n[i]=r}return n}export{r as default};
2 | //# sourceMappingURL=index.modern.js.map
3 | 


--------------------------------------------------------------------------------
/dist/index.modern.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.modern.js","sources":["../index.ts"],"sourcesContent":["type IsRecord<T> =\n  T extends Record<string, infer R> ? (R extends string | Record<string, string> ? true : never) : never;\ntype Colors<T> = IsRecord<T> extends true ? T : never;\ntype IndividualShade<T> = Record<keyof Colors<T>, keyof Colors<T>[keyof Colors<T>]> & { DEFAULT?: number | string };\n\nconst defaultDefaultShade = 500;\n\nexport default function defaultShades<T>(\n  colors: Colors<T>,\n  defaultShade: number | string | IndividualShade<T> = defaultDefaultShade\n): Colors<T> {\n  if (!colors || typeof colors !== 'object') {\n    throw new Error(\n      `defaultShades: received unexpected \\`colors\\` argument value of \\`${JSON.stringify(colors)}\\`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n    );\n  }\n  if (!defaultShade) {\n    throw new Error(\n      `defaultShades: received unexpected \\`defaultShade\\` argument value of \\`${JSON.stringify(defaultShade)}\\`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or \\`DEFAULT\\`) and numeric or string values of the desired shade for each.`\n    );\n  }\n  const usingKeyedShades = typeof defaultShade === 'object';\n  if (usingKeyedShades) defaultShade.DEFAULT ??= defaultDefaultShade;\n\n  const resultColors: Record<string, string | Record<string, string>> = {};\n  for (const [name, shades] of Object.entries(colors)) {\n    if (!shades) {\n      throw new Error(\n        `defaultShades: shades for color \\`${name}\\` was an unexpected value of \\`${JSON.stringify(shades)}\\`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n      );\n    }\n    if (typeof shades === 'string') {\n      resultColors[name] = shades;\n      continue;\n    }\n    const newShades = { ...shades };\n    const newShadesDefault =\n      shades[\n        usingKeyedShades\n          ? defaultShade[name as keyof typeof defaultShade] ?? (defaultShade.DEFAULT as string)\n          : defaultShade\n      ];\n    if (newShadesDefault) newShades.DEFAULT ??= newShadesDefault;\n    resultColors[name] = newShades;\n  }\n  return resultColors as Colors<T>;\n}\n"],"names":["defaultShades","colors","defaultShade","Error","JSON","stringify","usingKeyedShades","DEFAULT","resultColors","name","shades","Object","entries","_defaultShade$name","newShades","_extends","newShadesDefault","_newShades$DEFAULT"],"mappings":"oOAOwB,SAAAA,EACtBC,EACAC,EAJ0B,KAM1B,IAAKD,GAA4B,iBAAXA,EACpB,MAAU,IAAAE,MACR,qEAAqEC,KAAKC,UAAUJ,oQAGxF,IAAKC,EACH,MAAM,IAAIC,MACR,2EAA2EC,KAAKC,UAAUH,wNAG9F,MAAMI,EAA2C,iBAAjBJ,EAC5BI,IAAsC,MAApBJ,EAAaK,UAAbL,EAAaK,QAjBT,MAmB1B,MAAMC,EAAgE,GACtE,IAAK,MAAOC,EAAMC,KAAWC,OAAOC,QAAQX,GAAS,CAAA,IAAAY,EACnD,IAAKH,EACH,MAAU,IAAAP,MACR,qCAAqCM,oCAAuCL,KAAKC,UAAUK,oMAG/F,GAAsB,iBAAXA,EAAqB,CAC9BF,EAAaC,GAAQC,EACrB,QACF,CACA,MAAMI,EAASC,EAAA,CAAA,EAAQL,GACjBM,EACJN,EACEJ,EACmDO,OADnCA,EACZX,EAAaO,IAAkCI,EAAKX,EAAaK,QACjEL,GAEJc,IAAmCC,MAAjBH,EAAUP,UAAVO,EAAUP,QAAYS,IAC5CR,EAAaC,GAAQK,CACvB,CACA,OAAON,CACT"}


--------------------------------------------------------------------------------
/dist/index.module.js:
--------------------------------------------------------------------------------
1 | function e(){return e=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e},e.apply(this,arguments)}function r(r,t){var o;if(void 0===t&&(t=500),!r||"object"!=typeof r)throw new Error("defaultShades: received unexpected `colors` argument value of `"+JSON.stringify(r)+"`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.");if(!t)throw new Error("defaultShades: received unexpected `defaultShade` argument value of `"+JSON.stringify(t)+"`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or `DEFAULT`) and numeric or string values of the desired shade for each.");var a="object"==typeof t;a&&(null!=(o=t).DEFAULT||(o.DEFAULT=500));for(var n={},i=0,s=Object.entries(r);i<s.length;i++){var c,l=s[i],f=l[0],d=l[1];if(!d)throw new Error("defaultShades: shades for color `"+f+"` was an unexpected value of `"+JSON.stringify(d)+"`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.");if("string"!=typeof d){var h=e({},d),u=d[a?null!=(c=t[f])?c:t.DEFAULT:t];u&&(null!=h.DEFAULT||(h.DEFAULT=u)),n[f]=h}else n[f]=d}return n}export{r as default};
2 | //# sourceMappingURL=index.module.js.map
3 | 


--------------------------------------------------------------------------------
/dist/index.module.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.module.js","sources":["../index.ts"],"sourcesContent":["type IsRecord<T> =\n  T extends Record<string, infer R> ? (R extends string | Record<string, string> ? true : never) : never;\ntype Colors<T> = IsRecord<T> extends true ? T : never;\ntype IndividualShade<T> = Record<keyof Colors<T>, keyof Colors<T>[keyof Colors<T>]> & { DEFAULT?: number | string };\n\nconst defaultDefaultShade = 500;\n\nexport default function defaultShades<T>(\n  colors: Colors<T>,\n  defaultShade: number | string | IndividualShade<T> = defaultDefaultShade\n): Colors<T> {\n  if (!colors || typeof colors !== 'object') {\n    throw new Error(\n      `defaultShades: received unexpected \\`colors\\` argument value of \\`${JSON.stringify(colors)}\\`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n    );\n  }\n  if (!defaultShade) {\n    throw new Error(\n      `defaultShades: received unexpected \\`defaultShade\\` argument value of \\`${JSON.stringify(defaultShade)}\\`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or \\`DEFAULT\\`) and numeric or string values of the desired shade for each.`\n    );\n  }\n  const usingKeyedShades = typeof defaultShade === 'object';\n  if (usingKeyedShades) defaultShade.DEFAULT ??= defaultDefaultShade;\n\n  const resultColors: Record<string, string | Record<string, string>> = {};\n  for (const [name, shades] of Object.entries(colors)) {\n    if (!shades) {\n      throw new Error(\n        `defaultShades: shades for color \\`${name}\\` was an unexpected value of \\`${JSON.stringify(shades)}\\`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n      );\n    }\n    if (typeof shades === 'string') {\n      resultColors[name] = shades;\n      continue;\n    }\n    const newShades = { ...shades };\n    const newShadesDefault =\n      shades[\n        usingKeyedShades\n          ? defaultShade[name as keyof typeof defaultShade] ?? (defaultShade.DEFAULT as string)\n          : defaultShade\n      ];\n    if (newShadesDefault) newShades.DEFAULT ??= newShadesDefault;\n    resultColors[name] = newShades;\n  }\n  return resultColors as Colors<T>;\n}\n"],"names":["defaultShades","colors","defaultShade","_defaultShade","Error","JSON","stringify","usingKeyedShades","DEFAULT","resultColors","_i","_Object$entries","Object","entries","length","_defaultShade$name","_Object$entries$_i","name","shades","newShades","_extends","newShadesDefault","_newShades$DEFAULT"],"mappings":"oOAOwB,SAAAA,EACtBC,EACAC,GAAwE,IAAAC,EAExE,YAFAD,IAAAA,EAJ0B,MAMrBD,GAA4B,iBAAXA,EACpB,MAAM,IAAIG,MAC6DC,kEAAAA,KAAKC,UAAUL,GAAO,iQAG/F,IAAKC,EACH,MAAU,IAAAE,MAAK,wEAC8DC,KAAKC,UAAUJ,GAAa,mNAG3G,IAAMK,EAA2C,iBAAjBL,EAC5BK,IAAsC,OAApBJ,EAAAD,GAAaM,UAAbL,EAAaK,QAjBT,MAoB1B,IADA,IAAMC,EAAgE,CAAA,EACtEC,EAAAC,EAAAA,EAA6BC,OAAOC,QAAQZ,GAAOS,EAAAC,EAAAG,OAAAJ,IAAE,CAAA,IAAAK,EAAhDC,EAAAL,EAAAD,GAAOO,EAAID,EAAEE,GAAAA,EAAMF,EACtB,GAAA,IAAKE,EACH,MAAM,IAAId,MAAK,oCACwBa,EAAI,iCAAmCZ,KAAKC,UAAUY,GAAuM,iMAGtS,GAAsB,iBAAXA,EAAX,CAIA,IAAMC,EAASC,EAAQF,CAAAA,EAAAA,GACjBG,EACJH,EACEX,EACmDQ,OADnCA,EACZb,EAAae,IAAkCF,EAAKb,EAAaM,QACjEN,GAEJmB,IAAmCC,MAAjBH,EAAUX,UAAVW,EAAUX,QAAYa,IAC5CZ,EAAaQ,GAAQE,CATrB,MAFEV,EAAaQ,GAAQC,CAYzB,CACA,OAAOT,CACT"}


--------------------------------------------------------------------------------
/dist/index.umd.js:
--------------------------------------------------------------------------------
1 | !function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(e||self).tailwindcssDefaultShades=o()}(this,function(){function e(){return e=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},e.apply(this,arguments)}return function(o,r){var t;if(void 0===r&&(r=500),!o||"object"!=typeof o)throw new Error("defaultShades: received unexpected `colors` argument value of `"+JSON.stringify(o)+"`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.");if(!r)throw new Error("defaultShades: received unexpected `defaultShade` argument value of `"+JSON.stringify(r)+"`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or `DEFAULT`) and numeric or string values of the desired shade for each.");var n="object"==typeof r;n&&(null!=(t=r).DEFAULT||(t.DEFAULT=500));for(var i={},a=0,s=Object.entries(o);a<s.length;a++){var f,c=s[a],l=c[0],d=c[1];if(!d)throw new Error("defaultShades: shades for color `"+l+"` was an unexpected value of `"+JSON.stringify(d)+"`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.");if("string"!=typeof d){var u=e({},d),h=d[n?null!=(f=r[l])?f:r.DEFAULT:r];h&&(null!=u.DEFAULT||(u.DEFAULT=h)),i[l]=u}else i[l]=d}return i}});
2 | //# sourceMappingURL=index.umd.js.map
3 | 


--------------------------------------------------------------------------------
/dist/index.umd.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"index.umd.js","sources":["../index.ts"],"sourcesContent":["type IsRecord<T> =\n  T extends Record<string, infer R> ? (R extends string | Record<string, string> ? true : never) : never;\ntype Colors<T> = IsRecord<T> extends true ? T : never;\ntype IndividualShade<T> = Record<keyof Colors<T>, keyof Colors<T>[keyof Colors<T>]> & { DEFAULT?: number | string };\n\nconst defaultDefaultShade = 500;\n\nexport default function defaultShades<T>(\n  colors: Colors<T>,\n  defaultShade: number | string | IndividualShade<T> = defaultDefaultShade\n): Colors<T> {\n  if (!colors || typeof colors !== 'object') {\n    throw new Error(\n      `defaultShades: received unexpected \\`colors\\` argument value of \\`${JSON.stringify(colors)}\\`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n    );\n  }\n  if (!defaultShade) {\n    throw new Error(\n      `defaultShades: received unexpected \\`defaultShade\\` argument value of \\`${JSON.stringify(defaultShade)}\\`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or \\`DEFAULT\\`) and numeric or string values of the desired shade for each.`\n    );\n  }\n  const usingKeyedShades = typeof defaultShade === 'object';\n  if (usingKeyedShades) defaultShade.DEFAULT ??= defaultDefaultShade;\n\n  const resultColors: Record<string, string | Record<string, string>> = {};\n  for (const [name, shades] of Object.entries(colors)) {\n    if (!shades) {\n      throw new Error(\n        `defaultShades: shades for color \\`${name}\\` was an unexpected value of \\`${JSON.stringify(shades)}\\`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.`\n      );\n    }\n    if (typeof shades === 'string') {\n      resultColors[name] = shades;\n      continue;\n    }\n    const newShades = { ...shades };\n    const newShadesDefault =\n      shades[\n        usingKeyedShades\n          ? defaultShade[name as keyof typeof defaultShade] ?? (defaultShade.DEFAULT as string)\n          : defaultShade\n      ];\n    if (newShadesDefault) newShades.DEFAULT ??= newShadesDefault;\n    resultColors[name] = newShades;\n  }\n  return resultColors as Colors<T>;\n}\n"],"names":["colors","defaultShade","_defaultShade","Error","JSON","stringify","usingKeyedShades","DEFAULT","resultColors","_i","_Object$entries","Object","entries","length","_defaultShade$name","_Object$entries$_i","name","shades","newShades","_extends","newShadesDefault","_newShades$DEFAULT"],"mappings":"sdAOwB,SACtBA,EACAC,GAAwE,IAAAC,EAExE,YAFAD,IAAAA,EAJ0B,MAMrBD,GAA4B,iBAAXA,EACpB,MAAM,IAAIG,MAC6DC,kEAAAA,KAAKC,UAAUL,GAAO,iQAG/F,IAAKC,EACH,MAAU,IAAAE,MAAK,wEAC8DC,KAAKC,UAAUJ,GAAa,mNAG3G,IAAMK,EAA2C,iBAAjBL,EAC5BK,IAAsC,OAApBJ,EAAAD,GAAaM,UAAbL,EAAaK,QAjBT,MAoB1B,IADA,IAAMC,EAAgE,CAAA,EACtEC,EAAAC,EAAAA,EAA6BC,OAAOC,QAAQZ,GAAOS,EAAAC,EAAAG,OAAAJ,IAAE,CAAA,IAAAK,EAAhDC,EAAAL,EAAAD,GAAOO,EAAID,EAAEE,GAAAA,EAAMF,EACtB,GAAA,IAAKE,EACH,MAAM,IAAId,MAAK,oCACwBa,EAAI,iCAAmCZ,KAAKC,UAAUY,GAAuM,iMAGtS,GAAsB,iBAAXA,EAAX,CAIA,IAAMC,EAASC,EAAQF,CAAAA,EAAAA,GACjBG,EACJH,EACEX,EACmDQ,OADnCA,EACZb,EAAae,IAAkCF,EAAKb,EAAaM,QACjEN,GAEJmB,IAAmCC,MAAjBH,EAAUX,UAAVW,EAAUX,QAAYa,IAC5CZ,EAAaQ,GAAQE,CATrB,MAFEV,EAAaQ,GAAQC,CAYzB,CACA,OAAOT,CACT"}


--------------------------------------------------------------------------------
/dist/types/index.d.ts:
--------------------------------------------------------------------------------
1 | type IsRecord<T> = T extends Record<string, infer R> ? (R extends string | Record<string, string> ? true : never) : never;
2 | type Colors<T> = IsRecord<T> extends true ? T : never;
3 | type IndividualShade<T> = Record<keyof Colors<T>, keyof Colors<T>[keyof Colors<T>]> & {
4 |     DEFAULT?: number | string;
5 | };
6 | export default function defaultShades<T>(colors: Colors<T>, defaultShade?: number | string | IndividualShade<T>): Colors<T>;
7 | export {};
8 | 


--------------------------------------------------------------------------------
/index.ts:
--------------------------------------------------------------------------------
 1 | type IsRecord<T> =
 2 |   T extends Record<string, infer R> ? (R extends string | Record<string, string> ? true : never) : never;
 3 | type Colors<T> = IsRecord<T> extends true ? T : never;
 4 | type IndividualShade<T> = Record<keyof Colors<T>, keyof Colors<T>[keyof Colors<T>]> & { DEFAULT?: number | string };
 5 | 
 6 | const defaultDefaultShade = 500;
 7 | 
 8 | export default function defaultShades<T>(
 9 |   colors: Colors<T>,
10 |   defaultShade: number | string | IndividualShade<T> = defaultDefaultShade
11 | ): Colors<T> {
12 |   if (!colors || typeof colors !== 'object') {
13 |     throw new Error(
14 |       `defaultShades: received unexpected \`colors\` argument value of \`${JSON.stringify(colors)}\`. Expected an object with string keys of the color names in your theme, each with a string key of its associated color value or an object with the shades for that color, comprised of string or numeric keys and string values for the color of each shade.`
15 |     );
16 |   }
17 |   if (!defaultShade) {
18 |     throw new Error(
19 |       `defaultShades: received unexpected \`defaultShade\` argument value of \`${JSON.stringify(defaultShade)}\`. Expected a numeric or string key, or an object with keys matching a partial list of the colors in your Tailwind CSS configuration (or \`DEFAULT\`) and numeric or string values of the desired shade for each.`
20 |     );
21 |   }
22 |   const usingKeyedShades = typeof defaultShade === 'object';
23 |   if (usingKeyedShades) defaultShade.DEFAULT ??= defaultDefaultShade;
24 | 
25 |   const resultColors: Record<string, string | Record<string, string>> = {};
26 |   for (const [name, shades] of Object.entries(colors)) {
27 |     if (!shades) {
28 |       throw new Error(
29 |         `defaultShades: shades for color \`${name}\` was an unexpected value of \`${JSON.stringify(shades)}\`. Expected a string representing a single color value or an object with individual shades for that color, comprised of string or numeric keys and string values for the color of each shade.`
30 |       );
31 |     }
32 |     if (typeof shades === 'string') {
33 |       resultColors[name] = shades;
34 |       continue;
35 |     }
36 |     const newShades = { ...shades };
37 |     const newShadesDefault =
38 |       shades[
39 |         usingKeyedShades
40 |           ? defaultShade[name as keyof typeof defaultShade] ?? (defaultShade.DEFAULT as string)
41 |           : defaultShade
42 |       ];
43 |     if (newShadesDefault) newShades.DEFAULT ??= newShadesDefault;
44 |     resultColors[name] = newShades;
45 |   }
46 |   return resultColors as Colors<T>;
47 | }
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-default-shades",
 3 |   "version": "0.0.23",
 4 |   "description": "Enable default shades for colors in tailwind for shorthand access `bg-blue` vs. `bg-blue-500`",
 5 |   "type": "module",
 6 |   "source": "index.ts",
 7 |   "exports": {
 8 |     "types": "./dist/types/index.d.ts",
 9 |     "require": "./dist/index.cjs",
10 |     "default": "./dist/index.modern.js"
11 |   },
12 |   "types": "dist/types/index.d.ts",
13 |   "main": "./dist/index.cjs",
14 |   "module": "./dist/index.module.js",
15 |   "unpkg": "./dist/index.umd.js",
16 |   "scripts": {
17 |     "test": "echo \"Error: no test specified\" && exit 1",
18 |     "build": "microbundle",
19 |     "dev": "microbundle watch"
20 |   },
21 |   "publishConfig": {
22 |     "access": "public"
23 |   },
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "git+https://github.com/brandonmcconnell/tailwindcss-default-shades.git"
27 |   },
28 |   "keywords": [
29 |     "tailwind",
30 |     "tailwindcss",
31 |     "css",
32 |     "postcss",
33 |     "style",
34 |     "styling",
35 |     "styles",
36 |     "default",
37 |     "shades",
38 |     "shade",
39 |     "colors",
40 |     "color"
41 |   ],
42 |   "author": "Brandon McConnell",
43 |   "license": "MIT",
44 |   "bugs": {
45 |     "url": "https://github.com/brandonmcconnell/tailwindcss-default-shades/issues"
46 |   },
47 |   "homepage": "https://github.com/brandonmcconnell/tailwindcss-default-shades#readme",
48 |   "dependencies": {
49 |     "@types/node": "^20.4.1"
50 |   },
51 |   "devDependencies": {
52 |     "@types/tailwindcss": "^3.1.0",
53 |     "@typescript-eslint/eslint-plugin": "^5.59.8",
54 |     "@typescript-eslint/parser": "^5.59.8",
55 |     "eslint": "^8.41.0",
56 |     "eslint-config-prettier": "^8.8.0",
57 |     "eslint-plugin-prettier": "^5.0.0-alpha.1",
58 |     "microbundle": "^0.15.1",
59 |     "npm-run-all": "^4.1.5",
60 |     "tailwindcss": "^3.4.3",
61 |     "typescript": "^5.1.6"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "esModuleInterop": true,
 4 |     "skipLibCheck": true,
 5 |     "target": "es2022",
 6 |     "allowJs": true,
 7 |     "resolveJsonModule": true,
 8 |     "moduleDetection": "force",
 9 |     "isolatedModules": true,
10 |     "strict": true,
11 |     "noUncheckedIndexedAccess": true,
12 |     "module": "NodeNext",
13 |     "outDir": "dist",
14 |     "sourceMap": true,
15 |     "declaration": true,
16 |     "lib": ["es2022"]
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------