tunio-colors
Version:
Softer and pleasant colors for Tailwind CSS v4.0+
258 lines (257 loc) • 7.65 kB
JavaScript
;
/**
* Tunio Colors - Softer and pleasant colors for Tailwind CSS v4.0+
*
* This library provides a custom color palette that replaces Tailwind's default colors
* with softer, more pleasant alternatives while maintaining the same naming convention.
*
* Usage with Tailwind CSS v4.0+:
* 1. Import the colors.css file in your main CSS file
* 2. Use the same color classes as you would with default Tailwind colors
*
* Example:
* <div class="bg-red-500 text-white">Hello World</div>
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.tunioColors = void 0;
exports.getTunioColor = getTunioColor;
exports.getTunioColorNames = getTunioColorNames;
exports.getTunioColorShades = getTunioColorShades;
/**
* Tunio color palette with HSL values
* These colors are designed to be softer and more pleasant than the default Tailwind colors
*/
exports.tunioColors = {
red: {
50: 'hsl(15 81% 97%)',
100: 'hsl(15 68% 94%)',
200: 'hsl(10 66% 89%)',
300: 'hsl(7 66% 80%)',
400: 'hsl(2 66% 68%)',
500: 'hsl(356 65% 55%)',
600: 'hsl(353 63% 48%)',
700: 'hsl(350 65% 40%)',
800: 'hsl(348 62% 33%)',
900: 'hsl(347 55% 29%)',
950: 'hsl(337 66% 14%)',
},
orange: {
50: 'hsl(36 73% 96%)',
100: 'hsl(36 77% 91%)',
200: 'hsl(36 74% 83%)',
300: 'hsl(33 77% 71%)',
400: 'hsl(30 72% 59%)',
500: 'hsl(28 71% 51%)',
600: 'hsl(17 72% 48%)',
700: 'hsl(18 71% 39%)',
800: 'hsl(15 62% 37%)',
900: 'hsl(17 57% 27%)',
950: 'hsl(15 63% 14%)',
},
amber: {
50: 'hsl(52 79% 96%)',
100: 'hsl(48 81% 90%)',
200: 'hsl(46 77% 78%)',
300: 'hsl(45 74% 67%)',
400: 'hsl(45 69% 58%)',
500: 'hsl(41 70% 53%)',
600: 'hsl(34 62% 45%)',
700: 'hsl(30 62% 38%)',
800: 'hsl(28 56% 31%)',
900: 'hsl(27 51% 26%)',
950: 'hsl(27 63% 14%)',
},
yellow: {
50: 'hsl(60 85% 96%)',
100: 'hsl(57 77% 89%)',
200: 'hsl(53 74% 79%)',
300: 'hsl(48 74% 67%)',
400: 'hsl(47 70% 57%)',
500: 'hsl(45 74% 52%)',
600: 'hsl(41 68% 44%)',
700: 'hsl(36 68% 34%)',
800: 'hsl(32 59% 29%)',
900: 'hsl(28 54% 26%)',
950: 'hsl(28 63% 14%)',
},
lime: {
50: 'hsl(90 54% 95%)',
100: 'hsl(82 61% 90%)',
200: 'hsl(80 60% 81%)',
300: 'hsl(80 58% 68%)',
400: 'hsl(83 54% 58%)',
500: 'hsl(90 65% 44%)',
600: 'hsl(90 37% 37%)',
700: 'hsl(90 43% 29%)',
800: 'hsl(90 33% 25%)',
900: 'hsl(90 26% 24%)',
950: 'hsl(90 44% 10%)',
},
green: {
50: 'hsl(152 44% 96%)',
100: 'hsl(152 51% 91%)',
200: 'hsl(146 49% 82%)',
300: 'hsl(146 54% 69%)',
400: 'hsl(146 46% 55%)',
500: 'hsl(146 63% 44%)',
600: 'hsl(146 44% 37%)',
700: 'hsl(146 44% 27%)',
800: 'hsl(146 38% 22%)',
900: 'hsl(146 36% 18%)',
950: 'hsl(146 44% 9%)',
},
teal: {
50: 'hsl(152 44% 96%)',
100: 'hsl(152 51% 91%)',
200: 'hsl(152 49% 82%)',
300: 'hsl(152 54% 69%)',
400: 'hsl(152 46% 55%)',
500: 'hsl(162 68% 39%)',
600: 'hsl(162 44% 28%)',
700: 'hsl(162 44% 27%)',
800: 'hsl(162 38% 21%)',
900: 'hsl(162 36% 18%)',
950: 'hsl(162 44% 9%)',
},
cyan: {
50: 'hsl(168 56% 97%)',
100: 'hsl(168 61% 90%)',
200: 'hsl(168 60% 79%)',
300: 'hsl(168 65% 67%)',
400: 'hsl(168 46% 52%)',
500: 'hsl(174 68% 39%)',
600: 'hsl(174 44% 28%)',
700: 'hsl(174 44% 27%)',
800: 'hsl(174 38% 22%)',
900: 'hsl(174 36% 18%)',
950: 'hsl(174 44% 11%)',
},
sky: {
50: 'hsl(192 56% 97%)',
100: 'hsl(192 61% 90%)',
200: 'hsl(192 60% 79%)',
300: 'hsl(192 65% 67%)',
400: 'hsl(192 46% 52%)',
500: 'hsl(198 68% 39%)',
600: 'hsl(198 44% 28%)',
700: 'hsl(198 44% 27%)',
800: 'hsl(198 38% 22%)',
900: 'hsl(198 36% 18%)',
950: 'hsl(198 44% 11%)',
},
blue: {
50: 'hsl(214 100% 97%)',
100: 'hsl(214 95% 93%)',
200: 'hsl(213 97% 87%)',
300: 'hsl(212 96% 78%)',
400: 'hsl(213 94% 68%)',
500: 'hsl(217 91% 60%)',
600: 'hsl(221 83% 53%)',
700: 'hsl(224 76% 48%)',
800: 'hsl(226 71% 40%)',
900: 'hsl(224 64% 33%)',
950: 'hsl(226 55% 21%)',
},
indigo: {
50: 'hsl(225 100% 97%)',
100: 'hsl(226 100% 94%)',
200: 'hsl(228 96% 89%)',
300: 'hsl(230 94% 82%)',
400: 'hsl(234 89% 74%)',
500: 'hsl(239 84% 67%)',
600: 'hsl(243 75% 59%)',
700: 'hsl(245 58% 51%)',
800: 'hsl(244 55% 41%)',
900: 'hsl(242 47% 34%)',
950: 'hsl(244 47% 20%)',
},
violet: {
50: 'hsl(250 100% 98%)',
100: 'hsl(251 91% 95%)',
200: 'hsl(251 95% 92%)',
300: 'hsl(252 95% 85%)',
400: 'hsl(255 92% 76%)',
500: 'hsl(258 90% 66%)',
600: 'hsl(262 83% 58%)',
700: 'hsl(263 70% 50%)',
800: 'hsl(263 69% 42%)',
900: 'hsl(264 67% 35%)',
950: 'hsl(261 73% 20%)',
},
purple: {
50: 'hsl(270 100% 98%)',
100: 'hsl(269 100% 95%)',
200: 'hsl(269 100% 92%)',
300: 'hsl(269 97% 85%)',
400: 'hsl(270 95% 75%)',
500: 'hsl(271 91% 65%)',
600: 'hsl(271 81% 56%)',
700: 'hsl(272 72% 47%)',
800: 'hsl(272 67% 39%)',
900: 'hsl(273 66% 32%)',
950: 'hsl(274 87% 21%)',
},
fuchsia: {
50: 'hsl(289 100% 98%)',
100: 'hsl(287 100% 95%)',
200: 'hsl(288 96% 91%)',
300: 'hsl(291 93% 83%)',
400: 'hsl(292 91% 73%)',
500: 'hsl(292 84% 61%)',
600: 'hsl(293 69% 49%)',
700: 'hsl(295 72% 40%)',
800: 'hsl(295 70% 33%)',
900: 'hsl(296 63% 28%)',
950: 'hsl(297 96% 15%)',
},
pink: {
50: 'hsl(327 73% 97%)',
100: 'hsl(326 78% 95%)',
200: 'hsl(326 85% 90%)',
300: 'hsl(327 87% 81%)',
400: 'hsl(329 86% 70%)',
500: 'hsl(330 81% 60%)',
600: 'hsl(333 71% 51%)',
700: 'hsl(335 78% 42%)',
800: 'hsl(336 74% 35%)',
900: 'hsl(336 69% 30%)',
950: 'hsl(336 84% 17%)',
},
rose: {
50: 'hsl(355 100% 97%)',
100: 'hsl(356 100% 95%)',
200: 'hsl(353 96% 90%)',
300: 'hsl(353 95% 81%)',
400: 'hsl(351 95% 71%)',
500: 'hsl(350 89% 60%)',
600: 'hsl(347 77% 50%)',
700: 'hsl(345 83% 41%)',
800: 'hsl(343 80% 35%)',
900: 'hsl(341 75% 30%)',
950: 'hsl(343 87% 17%)',
},
};
/**
* Helper function to get a specific color shade
* @param color - The color name (e.g., 'red', 'blue')
* @param shade - The shade number (50, 100, 200, etc.)
* @returns The HSL color value
*/
function getTunioColor(color, shade) {
var _a;
return ((_a = exports.tunioColors[color]) === null || _a === void 0 ? void 0 : _a[shade]) || '';
}
/**
* Get all available color names
* @returns Array of color names
*/
function getTunioColorNames() {
return Object.keys(exports.tunioColors);
}
/**
* Get all available shades for any color
* @returns Array of shade numbers
*/
function getTunioColorShades() {
return Object.keys(exports.tunioColors.red);
}