diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2aa483601a..7a609d77d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -255,6 +255,9 @@ importers: rimraf: specifier: ^4.4.1 version: 4.4.1 + runed: + specifier: ^0.25.0 + version: 0.25.0(svelte@5.16.1) shiki: specifier: ^1.2.1 version: 1.2.1 @@ -4244,6 +4247,11 @@ packages: peerDependencies: svelte: ^5.7.0 + runed@0.25.0: + resolution: {integrity: sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg==} + peerDependencies: + svelte: ^5.7.0 + rw@1.3.3: resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} @@ -9398,6 +9406,11 @@ snapshots: esm-env: 1.2.2 svelte: 5.16.1 + runed@0.25.0(svelte@5.16.1): + dependencies: + esm-env: 1.2.2 + svelte: 5.16.1 + rw@1.3.3: {} rxjs@7.8.1: diff --git a/sites/docs/package.json b/sites/docs/package.json index 1df47c5ef0..0ff292528c 100644 --- a/sites/docs/package.json +++ b/sites/docs/package.json @@ -68,6 +68,7 @@ "remark-code-import": "^1.2.0", "remark-gfm": "^4.0.0", "rimraf": "^4.4.1", + "runed": "^0.25.0", "shiki": "^1.2.1", "svelte": "^5.16.1", "svelte-check": "^4.1.1", diff --git a/sites/docs/src/lib/components/colors/color-card.svelte b/sites/docs/src/lib/components/colors/color-card.svelte index 0766eec729..af6435c14d 100644 --- a/sites/docs/src/lib/components/colors/color-card.svelte +++ b/sites/docs/src/lib/components/colors/color-card.svelte @@ -1,69 +1,140 @@ -
-
Choose color format to copy:
- -
- - -
-
- - -
-
- - -
-
- - -
- -
- - -
- {#each Object.entries(colorData) as [colorName, shades] (colorName)} -
-

{colorName}

+
+ {#each colors as color (color.name)} +
+
+

{`${color.name[0].toUpperCase()}${color.name.slice(1)}`}

+ + + + Format: + {selectedFormat.current} + + + + {#each formats as format (format.format)} + + + {format.format} + {format.hint} + + + {/each} + + +
+
+ {#each color.colors as shade (shade.className)} + - {/each} -
+
+ + + + {shade.className.split("-")[1]} + + + {/each}
- {/each} -
- +
+ {/each} + diff --git a/sites/docs/src/lib/components/colors/colors.ts b/sites/docs/src/lib/components/colors/colors.ts new file mode 100644 index 0000000000..bf47da82b6 --- /dev/null +++ b/sites/docs/src/lib/components/colors/colors.ts @@ -0,0 +1,87 @@ +import { z } from "zod"; + +import { colors } from "$lib/registry/colors.js"; + +const colorSchema = z.object({ + name: z.string(), + id: z.string(), + scale: z.number(), + className: z.string(), + hex: z.string(), + rgb: z.string(), + hsl: z.string(), + foreground: z.string(), + oklch: z.string(), +}); + +const colorPaletteSchema = z.object({ + name: z.string(), + colors: z.array(colorSchema), +}); + +export type ColorPalette = z.infer; + +export function getColorFormat(color: Color) { + return { + className: `bg-${color.name}-100`, + hex: color.hex, + rgb: color.rgb, + hsl: color.hsl, + oklch: color.oklch, + }; +} + +export type ColorFormat = keyof ReturnType; + +export function getColors() { + const tailwindColors = colorPaletteSchema.array().parse( + Object.entries(colors) + .map(([name, color]) => { + if (!Array.isArray(color)) { + return null; + } + + return { + name, + colors: color.map((color) => { + const rgb = color.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, "$1 $2 $3"); + + return { + ...color, + name, + id: `${name}-${color.scale}`, + className: `${name}-${color.scale}`, + rgb, + hsl: color.hsl.replace( + /^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, + "$1 $2 $3" + ), + oklch: color.oklch.replace( + /^oklch\(([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)$/, + "$1 $2 $3" + ), + foreground: getForegroundFromBackground(rgb), + }; + }), + }; + }) + .filter(Boolean) + ); + + return tailwindColors; +} + +export type Color = ReturnType[number]["colors"][number]; + +function getForegroundFromBackground(rgb: string) { + const [r, g, b] = rgb.split(" ").map(Number); + + function toLinear(number: number): number { + const base = number / 255; + return base <= 0.04045 ? base / 12.92 : Math.pow((base + 0.055) / 1.055, 2.4); + } + + const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b); + + return luminance > 0.179 ? "#000" : "#fff"; +} diff --git a/sites/docs/src/lib/components/docs/site-footer.svelte b/sites/docs/src/lib/components/docs/site-footer.svelte index ddbc43a895..b8bdca4e3d 100644 --- a/sites/docs/src/lib/components/docs/site-footer.svelte +++ b/sites/docs/src/lib/components/docs/site-footer.svelte @@ -2,7 +2,7 @@ import { siteConfig } from "$lib/config/site.js"; -