@clhaas/palette-kit 0.1.0

package/src/tokens/presetRadixLikeUi.ts

@@ -0,0 +1,75 @@
+import type { ColorHex, Scale, Step } from "../types.js";
+
+type TokenMapEntry = {
+  token: string;
+  slot: string;
+  step: Step;
+  required?: boolean;
+};
+
+const tokenMap: TokenMapEntry[] = [
+  { token: "bg.app", slot: "neutral", step: 1 },
+  { token: "bg.subtle", slot: "neutral", step: 2 },
+  { token: "surface.card", slot: "neutral", step: 2 },
+  { token: "surface.raised", slot: "neutral", step: 3 },
+  { token: "component.bg", slot: "neutral", step: 3 },
+  { token: "component.bgHover", slot: "neutral", step: 4 },
+  { token: "component.bgActive", slot: "neutral", step: 5 },
+  { token: "border.subtle", slot: "neutral", step: 6 },
+  { token: "border.default", slot: "neutral", step: 7 },
+  { token: "border.strong", slot: "neutral", step: 8 },
+  { token: "text.secondary", slot: "neutral", step: 11 },
+  { token: "text.primary", slot: "neutral", step: 12 },
+  { token: "text.disabled", slot: "neutral", step: 10 },
+
+  { token: "focus.ring", slot: "accent", step: 8 },
+  { token: "accent.solid", slot: "accent", step: 9 },
+  { token: "accent.solidHover", slot: "accent", step: 10 },
+  { token: "accent.border", slot: "accent", step: 7 },
+  { token: "accent.subtle", slot: "accent", step: 3 },
+  { token: "accent.subtleHover", slot: "accent", step: 4 },
+
+  { token: "status.success.solidBg", slot: "success", step: 9, required: false },
+  { token: "status.success.solidHover", slot: "success", step: 10, required: false },
+  { token: "status.success.subtleBg", slot: "success", step: 3, required: false },
+  { token: "status.success.border", slot: "success", step: 7, required: false },
+  { token: "status.success.text", slot: "success", step: 11, required: false },
+  { token: "status.success.textStrong", slot: "success", step: 12, required: false },
+
+  { token: "status.warning.solidBg", slot: "warning", step: 9, required: false },
+  { token: "status.warning.solidHover", slot: "warning", step: 10, required: false },
+  { token: "status.warning.subtleBg", slot: "warning", step: 3, required: false },
+  { token: "status.warning.border", slot: "warning", step: 7, required: false },
+  { token: "status.warning.text", slot: "warning", step: 11, required: false },
+  { token: "status.warning.textStrong", slot: "warning", step: 12, required: false },
+
+  { token: "status.danger.solidBg", slot: "danger", step: 9, required: false },
+  { token: "status.danger.solidHover", slot: "danger", step: 10, required: false },
+  { token: "status.danger.subtleBg", slot: "danger", step: 3, required: false },
+  { token: "status.danger.border", slot: "danger", step: 7, required: false },
+  { token: "status.danger.text", slot: "danger", step: 11, required: false },
+  { token: "status.danger.textStrong", slot: "danger", step: 12, required: false },
+];
+
+export function buildPresetTokens(scales: Record<string, Scale>): {
+  light: Record<string, ColorHex>;
+  dark: Record<string, ColorHex>;
+} {
+  const light: Record<string, ColorHex> = {};
+  const dark: Record<string, ColorHex> = {};
+
+  for (const { token, slot, step, required } of tokenMap) {
+    const scale = scales[slot];
+    if (!scale) {
+      if (required === false) {
+        continue;
+      }
+      throw new Error(`Missing scale for slot: ${slot}`);
+    }
+
+    light[token] = scale.light[step];
+    dark[token] = scale.dark[step];
+  }
+
+  return { light, dark };
+}

package/src/types.ts

@@ -0,0 +1,63 @@
+export type Step = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type ColorHex = `#${string}`;
+export type ColorP3 = string;
+
+export type RadixSeedName = string;
+
+export type TemplateId = "neutral" | "warm" | "cool";
+
+export type ColorSource =
+  | { source: "seed"; value: ColorHex }
+  | { source: "radix"; name: RadixSeedName };
+
+export type ScaleDiagnostics = {
+  outOfGamutCount: number;
+  outOfP3GamutCount?: number;
+};
+
+export type Scale = {
+  light: Record<Step, ColorHex>;
+  dark: Record<Step, ColorHex>;
+  p3?: {
+    light: Record<Step, ColorP3>;
+    dark: Record<Step, ColorP3>;
+  };
+  meta?: ScaleDiagnostics;
+};
+
+export type ScaleColorMode = Omit<Scale, "light" | "dark"> & {
+  light: Record<Step, string>;
+  dark: Record<Step, string>;
+};
+
+export type AlphaScale = {
+  light: Record<Step, ColorHex>;
+  dark: Record<Step, ColorHex>;
+};
+
+export type ThemeDiagnostics = {
+  contrast: Record<string, number>;
+  outOfGamutCount: number;
+  warnings?: string[];
+};
+
+export type Theme = {
+  scales: Record<string, Scale>;
+  tokens: {
+    light: Record<string, ColorHex>;
+    dark: Record<string, ColorHex>;
+  };
+  alpha?: AlphaScale;
+  diagnostics?: ThemeDiagnostics;
+};
+
+export type ThemeColorMode = Omit<Theme, "scales"> & {
+  scales: Record<string, ScaleColorMode>;
+};
+
+export type OklchColor = {
+  l: number;
+  c: number;
+  h: number;
+};

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["examples/**", "tests/**", "node_modules/**"]
+}