mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
Vinicius LourençoandGitHub
0ffb228439
* fix(package): better compatibility with cjs/esm * refactor(components): try optimize bundle output * refactor(index): use tailwind config * feat(vite): migrate from tsdown * feat(biome): migrate from eslint * fix(vite): last config to correct d.ts of cjs
138 lines
4.3 KiB
TypeScript
138 lines
4.3 KiB
TypeScript
import { getTransformedColorTokens } from '../utils.js';
|
|
|
|
const colors = getTransformedColorTokens();
|
|
|
|
// Function to calculate luminance and determine if we should use light or dark text
|
|
function getContrastTextColor(hexColor: string): string {
|
|
const hex = hexColor.replace('#', '');
|
|
const r = parseInt(hex.substring(0, 2), 16);
|
|
const g = parseInt(hex.substring(2, 4), 16);
|
|
const b = parseInt(hex.substring(4, 6), 16);
|
|
|
|
// brightness calculation
|
|
const brightness = (r + g + b) / 3;
|
|
|
|
return brightness > 127 ? 'text-black' : 'text-white';
|
|
}
|
|
|
|
function ColorPalette() {
|
|
// Accent colors configuration
|
|
const primaryAccents = ['robin'];
|
|
const secondaryAccents = ['forest', 'amber', 'cherry', 'aqua', 'sakura', 'sienna'];
|
|
|
|
// Get accent color data
|
|
const getAccentColor = (colorName: string) => {
|
|
const color = colors.find((c) => c.name.toLowerCase() === colorName.toLowerCase());
|
|
if (!color) return null;
|
|
const shade500 = color.shades.find((s) => s.name === '500');
|
|
return shade500 ? { name: color.name, value: shade500.value } : null;
|
|
};
|
|
|
|
return (
|
|
<div className="p-5">
|
|
<h1 className="mb-5 text-lg font-bold text-card-foreground">Pallette</h1>
|
|
|
|
{/* Regular colors */}
|
|
<div className="grid grid-cols-4 gap-5 mb-12">
|
|
{colors
|
|
.filter((item) => item.name !== 'Gradient')
|
|
.map((color) => (
|
|
<div key={color.name}>
|
|
<h3 className="mt-4 text-base font-bold capitalize text-card-foreground">
|
|
{color.name}
|
|
</h3>
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
{color.shades.map((shade) => (
|
|
<div
|
|
key={shade.name}
|
|
className={`flex items-center justify-between w-full h-12 px-4 font-semibold ${getContrastTextColor(shade.value)}`}
|
|
style={{ backgroundColor: shade.value }}
|
|
>
|
|
<span>{shade.name}</span>
|
|
<span className="uppercase">{shade.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Accents */}
|
|
<div className="mb-12">
|
|
<h1 className="mb-5 text-lg font-bold text-card-foreground">Accents</h1>
|
|
|
|
{/* Primary Accents */}
|
|
<div className="mb-8">
|
|
<h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-card-foreground opacity-70">
|
|
PRIMARY
|
|
</h2>
|
|
<div className="flex gap-4">
|
|
{primaryAccents.map((accentName) => {
|
|
const accent = getAccentColor(accentName);
|
|
if (!accent) return null;
|
|
return (
|
|
<div key={accent.name} className="flex flex-col gap-3">
|
|
<div
|
|
className="h-[70px] w-[150px] rounded shadow-lg"
|
|
style={{ backgroundColor: accent.value }}
|
|
/>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-card-foreground opacity-70">
|
|
{accent.name}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Secondary Accents */}
|
|
<div>
|
|
<h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-card-foreground opacity-70">
|
|
SECONDARY
|
|
</h2>
|
|
<div className="flex flex-wrap gap-4">
|
|
{secondaryAccents.map((accentName) => {
|
|
const accent = getAccentColor(accentName);
|
|
if (!accent) return null;
|
|
return (
|
|
<div key={accent.name} className="flex flex-col gap-3">
|
|
<div
|
|
className="h-[70px] w-[150px] rounded shadow-lg"
|
|
style={{ backgroundColor: accent.value }}
|
|
/>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-card-foreground opacity-70">
|
|
{accent.name}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Gradients */}
|
|
{colors
|
|
.filter((item) => item.name === 'Gradient')
|
|
.map((color) => (
|
|
<div key={color.name}>
|
|
<h1 className="mb-5 text-lg font-bold text-vanilla-100">Gradients</h1>
|
|
|
|
<div className="grid grid-cols-6 gap-5 mb-12">
|
|
{color.shades.map((shade) => (
|
|
<div className=" shadow-lg" key={shade.name}>
|
|
<div
|
|
className={`flex items-center justify-between w-full h-20 px-4 font-semibold overflow-hidden rounded-lg`}
|
|
style={{ backgroundImage: shade.value }}
|
|
></div>
|
|
<span className="text-vanilla-100">{shade.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ColorPalette;
|