[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":36,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":25,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","1b40ccd0-292c-11f1-9e8e-42dde27851f2","name","fileType","script","content","","import { useState } from \"react\";\n\nconst BRAND = {\n White: \"#FFFFFF\",\n \"Sea Salt\": \"#F0F0EB\",\n Oyster: \"#E4E2DB\",\n \"Tebi Yellow\": \"#F4E45D\",\n Espresso: \"#261C0A\",\n Olive: \"#5A6D17\",\n Jam: \"#802220\",\n Sesame: \"#C69F5B\",\n \"Earl Grey\": \"#587293\",\n Bergamot: \"#9083A3\",\n};\n\nconst N = {\n light: {\n surface: \"#FFFFFF\",\n \"surface-raised\": \"#F7F7F5\",\n \"surface-secondary\": \"#F0F0EB\",\n \"surface-muted\": \"#E4E2DB\",\n base: \"#261C0A\",\n },\n dark: {\n surface: \"#0B0A08\",\n \"surface-raised\": \"#13110F\",\n \"surface-secondary\": \"#1B1917\",\n \"surface-muted\": \"#252421\",\n base: \"#EDE8DF\",\n },\n};\nconst N_A = {\n text: 1.00,\n \"text-secondary\": .62,\n \"text-tertiary\": .40,\n \"text-disabled\": .25,\n border: .18,\n \"border-subtle\": .10,\n \"border-strong\": .30,\n tonal: .07,\n \"tonal-hover\": .12,\n};\nconst F_A = { surface: .12, \"surface-hover\": .16, border: .25, focus: .40 };\nconst F_A_DARK = {\n surface: .25,\n \"surface-hover\": .30,\n border: .35,\n focus: .50,\n};\nconst HL_A = { surface: .28, \"surface-hover\": .36, border: .50, focus: .65 };\nconst HL_A_DARK = {\n surface: .35,\n \"surface-hover\": .42,\n border: .55,\n focus: .70,\n};\n\nconst F = {\n Primary: {\n brand: { n: \"Earl Grey\", h: \"#587293\" },\n role: \"Accent / CTA\",\n direct: false,\n light: {\n solid: \"#005ECB\",\n \"solid-hover\": \"#004BB7\",\n text: \"#005ECB\",\n \"text-strong\": \"#001A87\",\n \"on-solid\": \"#FFFFFF\",\n },\n dark: {\n solid: \"#246CD0\",\n \"solid-hover\": \"#387FE4\",\n text: \"#87B5FA\",\n \"text-strong\": \"#BBECFF\",\n \"on-solid\": \"#FFFFFF\",\n },\n },\n Error: {\n brand: { n: \"Jam\", h: \"#802220\" },\n role: \"Error\",\n direct: false,\n light: {\n solid: \"#B71920\",\n \"solid-hover\": \"#A20009\",\n text: \"#B71920\",\n \"text-strong\": \"#5F0000\",\n \"on-solid\": \"#FFFFFF\",\n },\n dark: {\n solid: \"#BF3633\",\n \"solid-hover\": \"#D44A45\",\n text: \"#F79990\",\n \"text-strong\": \"#FFD1C6\",\n \"on-solid\": \"#FFFFFF\",\n },\n },\n Success: {\n brand: { n: \"Olive\", h: \"#5A6D17\" },\n role: \"Success\",\n direct: false,\n light: {\n solid: \"#3F7400\",\n \"solid-hover\": \"#2E6200\",\n text: \"#3F7400\",\n \"text-strong\": \"#003600\",\n \"on-solid\": \"#FFFFFF\",\n },\n dark: {\n solid: \"#4E7F25\",\n \"solid-hover\": \"#5F9139\",\n text: \"#99BC83\",\n \"text-strong\": \"#CAEEB4\",\n \"on-solid\": \"#FFFFFF\",\n },\n },\n Warning: {\n brand: { n: \"Sesame\", h: \"#C69F5B\" },\n role: \"Warning\",\n direct: false,\n light: {\n solid: \"#A46500\",\n \"solid-hover\": \"#915300\",\n text: \"#A46500\",\n \"text-strong\": \"#561D00\",\n \"on-solid\": \"#FFFFFF\",\n },\n dark: {\n solid: \"#AD732A\",\n \"solid-hover\": \"#C0853E\",\n text: \"#D3AB80\",\n \"text-strong\": \"#FFE1B5\",\n \"on-solid\": \"#FFFFFF\",\n },\n },\n Highlight: {\n brand: { n: \"Tebi Yellow\", h: \"#F4E45D\" },\n role: \"Highlight\",\n direct: true,\n light: {\n solid: \"#F4E45D\",\n \"solid-hover\": \"#E0D046\",\n text: \"#8A7900\",\n \"text-strong\": \"#614F00\",\n \"on-solid\": \"#261C0A\",\n },\n dark: {\n solid: \"#B6A724\",\n \"solid-hover\": \"#C9BA3E\",\n text: \"#ECE39B\",\n \"text-strong\": \"#F0E79F\",\n \"on-solid\": \"#261C0A\",\n },\n },\n Info: {\n brand: { n: \"Bergamot\", h: \"#9083A3\" },\n role: \"Info\",\n direct: true,\n light: {\n solid: \"#9083A3\",\n \"solid-hover\": \"#7E7191\",\n text: \"#827594\",\n \"text-strong\": \"#352A44\",\n \"on-solid\": \"#FFFFFF\",\n },\n dark: {\n solid: \"#9C90AE\",\n \"solid-hover\": \"#AFA2C1\",\n text: \"#B6AEC2\",\n \"text-strong\": \"#E9E0F6\",\n \"on-solid\": \"#FFFFFF\",\n },\n },\n};\n\nconst DECO = [\n { n: \"Coral\", h: \"#C85B76\", d: \"#C2657A\", sl: \"#F1CDD3\", sd: \"#452129\" },\n { n: \"Tomato\", h: \"#C53637\", d: \"#D25A55\", sl: \"#F9CAC6\", sd: \"#4C1D1B\" },\n {\n n: \"Jam\",\n h: \"#802220\",\n d: \"#93423D\",\n sl: \"#F0CECA\",\n sd: \"#442320\",\n brand: true,\n },\n { n: \"Clay\", h: \"#924D35\", d: \"#A56853\", sl: \"#EAD1C9\", sd: \"#3F271E\" },\n { n: \"Tangerine\", h: \"#BB5D00\", d: \"#BF6F35\", sl: \"#F0D0BD\", sd: \"#44250E\" },\n {\n n: \"Sesame\",\n h: \"#C69F5B\",\n d: \"#A08149\",\n sl: \"#E2D6C2\",\n sd: \"#382C16\",\n brand: true,\n },\n {\n n: \"Olive\",\n h: \"#5A6D17\",\n d: \"#728441\",\n sl: \"#D4DBC3\",\n sd: \"#2A3117\",\n brand: true,\n },\n { n: \"Lime\", h: \"#4D7800\", d: \"#688E3C\", sl: \"#CEDEC1\", sd: \"#243313\" },\n { n: \"Teal\", h: \"#007B76\", d: \"#43918C\", sl: \"#C4DEDB\", sd: \"#153432\" },\n { n: \"Cyan\", h: \"#007A90\", d: \"#4390A3\", sl: \"#C3DDE4\", sd: \"#15333A\" },\n { n: \"Ocean\", h: \"#006AA0\", d: \"#3D82B0\", sl: \"#C4DBED\", sd: \"#163143\" },\n {\n n: \"Earl Grey\",\n h: \"#587293\",\n d: \"#7188A5\",\n sl: \"#D0D8E4\",\n sd: \"#262F3A\",\n brand: true,\n },\n {\n n: \"Bergamot\",\n h: \"#9083A3\",\n d: \"#8B809B\",\n sl: \"#D9D5E0\",\n sd: \"#302B36\",\n brand: true,\n },\n { n: \"Plum\", h: \"#7D418A\", d: \"#915D9C\", sl: \"#E4D0E8\", sd: \"#39253E\" },\n { n: \"Rose\", h: \"#974C72\", d: \"#AA6888\", sl: \"#EACFDA\", sd: \"#3F2431\" },\n {\n n: \"Espresso\",\n h: \"#261C0A\",\n d: \"#28231B\",\n sl: null,\n sd: null,\n brand: true,\n neutral: true,\n },\n {\n n: \"Stone\",\n h: \"#5A544B\",\n d: \"#413C35\",\n sl: \"#DAD7D2\",\n sd: \"#2B2823\",\n neutral: true,\n },\n {\n n: \"Ash\",\n h: \"#938F87\",\n d: \"#5E5A53\",\n sl: \"#D9D7D3\",\n sd: \"#2B2824\",\n neutral: true,\n },\n {\n n: \"Pebble\",\n h: \"#C1BDB7\",\n d: \"#7D7A74\",\n sl: \"#E0DEDA\",\n sd: \"#2A2926\",\n neutral: true,\n },\n {\n n: \"White\",\n h: \"#FFFFFF\",\n d: \"#EDE8DF\",\n sl: null,\n sd: null,\n brand: true,\n neutral: true,\n },\n];\n\nconst cx = (h) => {\n const r = parseInt(h.slice(1, 3), 16),\n g = parseInt(h.slice(3, 5), 16),\n b = parseInt(h.slice(5, 7), 16);\n return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.55\n ? \"rgba(0,0,0,0.85)\"\n : \"rgba(255,255,255,0.92)\";\n};\nconst bl = (fg, bg, a) => {\n const [fr, f, fb] = [\n parseInt(fg.slice(1, 3), 16),\n parseInt(fg.slice(3, 5), 16),\n parseInt(fg.slice(5, 7), 16),\n ];\n const [br, b2, bb] = [\n parseInt(bg.slice(1, 3), 16),\n parseInt(bg.slice(3, 5), 16),\n parseInt(bg.slice(5, 7), 16),\n ];\n return (\"#\" +\n [\n Math.round(fr * a + br * (1 - a)),\n Math.round(f * a + b2 * (1 - a)),\n Math.round(fb * a + bb * (1 - a)),\n ].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")).toUpperCase();\n};\nconst rgba = (hex, a) => {\n const r = parseInt(hex.slice(1, 3), 16),\n g = parseInt(hex.slice(3, 5), 16),\n b = parseInt(hex.slice(5, 7), 16);\n return `rgba(${r},${g},${b},${a})`;\n};\n\nconst dotBg = (c1, c2) =>\n `url(\"data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='5' height='5' fill='${\n encodeURIComponent(c1)\n }'/%3E%3Crect x='5' y='5' width='5' height='5' fill='${\n encodeURIComponent(c1)\n }'/%3E%3Crect x='5' width='5' height='5' fill='${\n encodeURIComponent(c2)\n }'/%3E%3Crect y='5' width='5' height='5' fill='${\n encodeURIComponent(c2)\n }'/%3E%3C/svg%3E\")`;\n\nfunction NeutralSection({ mode }) {\n const n = N[mode];\n const surfs = [\n \"surface\",\n \"surface-raised\",\n \"surface-secondary\",\n \"surface-muted\",\n ];\n const brandMap = {\n \"#FFFFFF\": \"White\",\n \"#F0F0EB\": \"Sea Salt\",\n \"#E4E2DB\": \"Oyster\",\n \"#261C0A\": \"Espresso\",\n };\n const ck1 = mode === \"dark\" ? \"#0B0A08\" : \"#FFFFFF\";\n const ck2 = mode === \"dark\" ? \"#1B1917\" : \"#EDEDEB\";\n return (\n

\n Neutral\n

\n {surfs.map((s) => {\n const bname = brandMap[n[s]];\n return (\n \n \n {s.replace(\"surface-\", \"\")}\n

\n \n {n[s]}\n

\n {bname && (\n \n = {bname}\n \n )}\n \n );\n })}\n \n \n base\n \n \n {n.base}\n \n {mode === \"light\" && (\n \n = Espresso\n \n )}\n \n \n \n Alpha tokens{\" \"}\n \n (base at opacity — checkerboard shows transparency)\n \n \n \n {Object.entries(N_A).map(([name, pct]) => {\n const comp = bl(n.base, n.surface, pct);\n return (\n \n \n

\n \n {name}\n

\n \n {Math.round(pct * 100)}%\n \n \n \n );\n })}\n \n \n );\n}\n\nfunction ScaleCard({ name, data, mode }) {\n const [open, setOpen] = useState(false);\n const m = data[mode], n = N[mode], sol = m.solid;\n const alphas = name === \"Highlight\"\n ? (mode === \"dark\" ? HL_A_DARK : HL_A)\n : (mode === \"dark\" ? F_A_DARK : F_A);\n const ck1 = mode === \"dark\" ? \"#0B0A08\" : \"#FFFFFF\",\n ck2 = mode === \"dark\" ? \"#1B1917\" : \"#EDEDEB\";\n return (\n \n setOpen((o) => !o)}\n style={{\n all: \"unset\",\n cursor: \"pointer\",\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n gap: 10,\n padding: \"10px 12px\",\n }}\n >\n \n \n Aa\n \n \n

\n \n {name}\n \n {data.direct && (\n \n BRAND DIRECT\n \n )}\n {name === \"Highlight\" && (\n \n ESPRESSO ON-SOLID\n \n )}\n

\n from {data.brand.n} · {data.role}\n

\n {Object.values(alphas).map((a, i) => (\n \n ))}\n \n

\n \n ›\n \n \n {open && (\n \n \n Opaque tokens\n \n \n {Object.entries(m).map(([t, hex]) => (\n

\n \n {!t.includes(\"on-\") && (\n \n {t === \"solid\"\n ? \"Button\"\n : t.includes(\"hover\")\n ? \"Hover\"\n : \"Text\"}\n \n )}\n

\n \n {t}\n \n \n {hex}\n \n \n ))}\n \n \n Alpha overlays{\" \"}\n \n {name === \"Highlight\"\n ? \"(bespoke — higher for yellow)\"\n : \"(mode-aware: light/dark)\"}\n \n \n \n {Object.entries(alphas).map(([an, a]) => {\n const comp = bl(sol, n.surface, a);\n return (\n \n \n

\n \n {an}\n

\n \n {Math.round(a * 100)}%\n \n \n \n );\n })}\n \n \n )}\n \n );\n}\n\nfunction Demo({ mode }) {\n const n = N[mode], al = N_A;\n const p = F.Primary[mode],\n e = F.Error[mode],\n s = F.Success[mode],\n w = F.Warning[mode],\n h = F.Highlight[mode],\n inf = F.Info[mode];\n const sA = mode === \"dark\" ? .25 : .12,\n bA = mode === \"dark\" ? .35 : .25,\n hlA = mode === \"dark\" ? .35 : .28;\n return (\n \n \n {mode}\n \n\n {/* Card */}\n \n \n Card title\n \n \n Secondary body text on raised surface\n \n

\n \n Primary\n \n \n Tonal\n \n \n Ghost\n \n

\n \n\n {/* Status badges */}\n

\n {[[\"Saved\", s], [\"Pending\", w], [\"Failed\", e]].map(([l, c]) => (\n \n {l}\n

\n ))}\n \n\n {/* Form field */}\n \n \n Email address\n \n \n placeholder@tebi.app\n \n \n\n {/* Status dots */}\n \n

\n {[[\"Success\", s], [\"Warning\", w], [\"Error\", e], [\"Info\", inf]].map((\n [l, c],\n ) => (\n \n \n {l}\n \n ))}\n

\n \n\n {/* Toast */}\n \n \n

\n Payment failed\n

\n \n Check your card details and try again.\n

\n \n \n\n {/* Tags */}\n

\n \n \n Highlight\n \n

\n \n \n HL surface\n \n \n \n \n Info tag\n \n \n \n \n Active\n \n \n \n \n );\n}\n\nfunction DecoSection({ mode }) {\n const chromatic = DECO.filter((d) => !d.neutral),\n neutrals = DECO.filter((d) => d.neutral);\n return (\n

\n Decorative palette\n

\n 20 colors: 15 chromatic + 5 neutrals. Each has solid + soft variant.\n

\n\n \n Chromatic\n

\n \n {chromatic.map((d) => {\n const sol = mode === \"dark\" ? d.d : d.h,\n soft = mode === \"dark\" ? d.sd : d.sl;\n return (\n

\n \n \n Aa\n \n {d.brand && (\n \n )}\n

\n \n \n soft\n \n

\n \n \n {d.n}\n \n \n );\n })}\n \n\n \n Neutrals\n \n

\n {neutrals.map((d) => {\n const sol = mode === \"dark\" ? d.d : d.h,\n soft = d.sl ? (mode === \"dark\" ? d.sd : d.sl) : null;\n return (\n

\n \n \n \n Aa\n \n {d.brand && (\n \n )}\n

\n {soft && (\n \n \n soft\n \n

\n )}\n \n \n {d.n}\n \n \n );\n })}\n \n\n \n \n Brand\n \n \n Solid = tiles, dots, badges · Soft = tag bg, chart fill, avatar ring\n \n \n\n

\n POS tiles\n

\n {[\"light\", \"dark\"].map((m) => {\n const nn = N[m];\n return (\n \n \n POS ({m})\n

\n \n {DECO.filter((d) => !d.neutral).slice(0, 10).map((d) => {\n const hex = m === \"dark\" ? d.d : d.h;\n return (\n \n \n {d.n}\n \n \n );\n })}\n \n \n );\n })}\n \n \n );\n}\n\n// ── COMPARE DATA ──\nconst CUR_NEUTRALS = [\n { n: \"100\", h: \"#FFFFFF\" },\n { n: \"200\", h: \"#F8F6F1\" },\n { n: \"250\", h: \"#F6F6F3\" },\n { n: \"300\", h: \"#F0F0EB\" },\n { n: \"350\", h: \"#ECEBE6\" },\n { n: \"400\", h: \"#C7C6BF\" },\n { n: \"450\", h: \"#ABA99F\" },\n { n: \"500\", h: \"#A1A099\" },\n { n: \"550\", h: \"#828179\" },\n { n: \"600\", h: \"#797870\" },\n { n: \"650\", h: \"#574D4C\" },\n { n: \"700\", h: \"#433938\" },\n { n: \"750\", h: \"#2F2A23\" },\n { n: \"800\", h: \"#1C1812\" },\n { n: \"850\", h: \"#1D1301\" },\n { n: \"900\", h: \"#140F05\" },\n];\nconst CUR_DECO = [\n { n: \"200\", h: \"#EE6503\" },\n { n: \"300\", h: \"#F4E45D\" },\n { n: \"400\", h: \"#468054\" },\n { n: \"500\", h: \"#325E81\" },\n { n: \"600\", h: \"#6684AB\" },\n { n: \"700\", h: \"#7A569A\" },\n { n: \"800\", h: \"#AC85CE\" },\n { n: \"900\", h: \"#C03060\" },\n { n: \"1000\", h: \"#C69F5B\" },\n { n: \"1100\", h: \"#802220\" },\n];\nconst CMP = [\n {\n role: \"Surface\",\n b: \"#FFFFFF\",\n c: \"#FFFFFF\",\n p: \"#FFFFFF\",\n bn: \"White\",\n cn: \"N-100\",\n pn: \"surface\",\n },\n {\n role: \"Surface 2\",\n b: \"#F0F0EB\",\n c: \"#F6F6F3\",\n p: \"#F7F7F5\",\n bn: \"Sea Salt\",\n cn: \"N-250\",\n pn: \"surface-raised\",\n },\n {\n role: \"Surface 3\",\n b: \"#E4E2DB\",\n c: \"#ECEBE6\",\n p: \"#F0F0EB\",\n bn: \"Oyster\",\n cn: \"N-350\",\n pn: \"surface-secondary\",\n },\n {\n role: \"Surface 4\",\n b: null,\n c: null,\n p: \"#E4E2DB\",\n bn: \"—\",\n cn: \"—\",\n pn: \"surface-muted\",\n },\n {\n role: \"Text\",\n b: \"#261C0A\",\n c: \"#1D1301\",\n p: \"#261C0A\",\n bn: \"Espresso\",\n cn: \"N-850\",\n pn: \"Espresso direct\",\n },\n {\n role: \"Accent\",\n b: \"#587293\",\n c: \"#4457F4\",\n p: \"#005ECB\",\n bn: \"Earl Grey\",\n cn: \"Blue 740\",\n pn: \"Earl Grey +chroma\",\n },\n {\n role: \"Error\",\n b: \"#802220\",\n c: \"#D02C1A\",\n p: \"#B71920\",\n bn: \"Jam\",\n cn: \"Red 630\",\n pn: \"Jam +chroma\",\n },\n {\n role: \"Success\",\n b: \"#5A6D17\",\n c: \"#15943B\",\n p: \"#3F7400\",\n bn: \"Olive\",\n cn: \"Green 630\",\n pn: \"Olive +chroma\",\n },\n {\n role: \"Warning\",\n b: \"#C69F5B\",\n c: \"#D45C00\",\n p: \"#A46500\",\n bn: \"Sesame\",\n cn: \"Orange 900\",\n pn: \"Sesame +chroma\",\n },\n {\n role: \"Highlight\",\n b: \"#F4E45D\",\n c: \"#F4E45D\",\n p: \"#F4E45D\",\n bn: \"Tebi Yellow\",\n cn: \"= brand\",\n pn: \"= brand direct\",\n },\n {\n role: \"Info\",\n b: \"#9083A3\",\n c: null,\n p: \"#9083A3\",\n bn: \"Bergamot\",\n cn: \"(none)\",\n pn: \"= brand direct\",\n },\n];\n\nfunction Swatch({ hex, size = 28 }) {\n if (!hex) {\n return (\n \n );\n }\n return (\n \n );\n}\n\nfunction CompareSection() {\n return (\n

\n Brand → current → proposed\n

\n Brand = original palette. Current = Storybook product tokens. Proposed =\n this system.\n

\n\n \n \n \n {[\"Role\", \"Brand\", \"Current\", \"Proposed\"].map((h) => (\n \n {h}\n \n ))}\n \n \n \n {CMP.map((r) => (\n \n \n {r.role}\n \n {[{ h: r.b, n: r.bn }, { h: r.c, n: r.cn }, { h: r.p, n: r.pn }]\n .map((col, i) => (\n \n \n \n

\n \n {col.n}\n

\n \n {col.h || \"—\"}\n

\n \n \n \n ))}\n \n ))}\n \n \n\n

\n Neutral ramps\n

\n Current: 16 opaque steps. Proposed: 4 surfaces + alpha.\n

\n \n Current (16 primitives)\n \n

\n {CUR_NEUTRALS.map((c, i) => (\n \n \n {c.n}\n \n

\n ))}\n \n \n Proposed (surfaces + alpha)\n \n

\n {[\"surface\", \"surface-raised\", \"surface-secondary\", \"surface-muted\"]\n .map((s, i) => {\n const h = N.light[s];\n return (\n \n \n {s.replace(\"surface-\", \"\")}\n \n

\n );\n })}\n \n base\n \n \n

\n {Object.entries(N_A).filter(([k]) => !k.includes(\"disabled\")).map(\n ([name, pct], i, arr) => {\n const comp = bl(\"#261C0A\", \"#FFFFFF\", pct);\n return (\n \n \n {Math.round(pct * 100)}%\n \n

\n );\n },\n )}\n \n\n

\n Decorative palettes\n

\n Current: 10 indexed. Proposed: 20 named.\n

\n \n Current\n \n

\n {CUR_DECO.map((c) => (\n

\n \n {c.n}\n

\n ))}\n

\n \n Proposed\n \n

\n {DECO.filter((d) => !d.neutral).map((d) => (\n

\n \n {d.brand && (\n \n )}\n

\n \n {d.n}\n

\n \n ))}\n \n

\n {DECO.filter((d) => d.neutral).map((d) => (\n

\n \n {d.brand && (\n \n )}\n

\n \n {d.n}\n

\n \n ))}\n \n\n \n \n Key changes\n \n {[\n [\n \"Surfaces\",\n \"Brand direct (White, Sea Salt, Oyster) replaces shifted N-250/350\",\n ],\n [\"Text\", \"Espresso (#261C0A) direct, not shifted #1D1301\"],\n [\"Accent\", \"Earl Grey hue (Δ1°) replaces electric blue (Δ16°)\"],\n [\"Error\", \"Jam hue, boosted. Higher APCA than current\"],\n [\"Success\", \"Olive family (Δ12°) not mint green (Δ25°)\"],\n [\"Warning\", \"Sesame hue (Δ12°) not pure orange (Δ33°)\"],\n [\"Architecture\", \"4 surfaces + alpha replaces 16 opaque primitives\"],\n [\"Decorative\", \"20 named replaces 10 indexed\"],\n [\"Dark mode\", \"Mode-aware alphas (25% surface vs 12%)\"],\n ].map(([k, v]) => (\n

\n {k}:\n {\" \"}\n {v}\n

\n ))}\n \n \n );\n}\n\nexport default function App() {\n const [mode, setMode] = useState(\"light\");\n const [tab, setTab] = useState(\"system\");\n const v = mode === \"dark\"\n ? {\n \"--tp\": \"#E5E0D7\",\n \"--ts\": \"#B8AE9E\",\n \"--bd\": \"rgba(255,255,255,.06)\",\n \"--sf\": \"rgba(255,255,255,.03)\",\n \"--bg\": \"#0B0A08\",\n \"--gb\": \"#1A2E10\",\n \"--gf\": \"#8EC86A\",\n \"--yb\": \"#2E2200\",\n \"--yf\": \"#E4B44A\",\n \"--rb\": \"#2E1010\",\n \"--rf\": \"#F09090\",\n }\n : {\n \"--tp\": \"#1C1406\",\n \"--ts\": \"#8C8982\",\n \"--bd\": \"rgba(0,0,0,.07)\",\n \"--sf\": \"rgba(0,0,0,.025)\",\n \"--bg\": \"#FFFFFF\",\n \"--gb\": \"#E8F5DE\",\n \"--gf\": \"#2B5A0A\",\n \"--yb\": \"#FDF0D0\",\n \"--yf\": \"#7A5500\",\n \"--rb\": \"#FCE8E8\",\n \"--rf\": \"#8A1A1A\",\n };\n const tabs = [\n { id: \"system\", l: \"System\" },\n { id: \"compare\", l: \"Compare\" },\n { id: \"demo\", l: \"In context\" },\n { id: \"deco\", l: \"Decorative\" },\n { id: \"map\", l: \"Token map\" },\n ];\n\n return (\n \n \n

\n Tebi color system\n

\n Brand-grounded · APCA-verified · mode-aware · 20-color decorative\n

\n setMode((m) => m === \"light\" ? \"dark\" : \"light\")}\n style={{\n all: \"unset\",\n cursor: \"pointer\",\n padding: \"6px 14px\",\n borderRadius: 6,\n fontSize: 13,\n fontWeight: 600,\n background: \"var(--sf)\",\n border: \"1px solid var(--bd)\",\n color: \"var(--tp)\",\n }}\n >\n {mode === \"light\" ? \"☀ Light\" : \"☾ Dark\"}\n \n \n \n {tabs.map((t) => (\n setTab(t.id)}\n style={{\n all: \"unset\",\n cursor: \"pointer\",\n flex: 1,\n textAlign: \"center\",\n padding: \"7px 8px\",\n borderRadius: 5,\n fontSize: 13,\n fontWeight: 600,\n color: tab === t.id ? \"var(--tp)\" : \"var(--ts)\",\n background: tab === t.id ? \"var(--bg)\" : \"transparent\",\n }}\n >\n {t.l}\n \n ))}\n \n\n {tab === \"system\" && (\n

\n \n Decisions:{\" \"}\n Surfaces = brand White / Sea Salt / Oyster + raised step. Text =\n Espresso at alpha. Functional = brand hues, mode-aware alphas\n (12%→25% in dark). Highlight always Espresso text. Decorative = 15\n chromatic + 5 neutral, each with soft.\n

\n \n

\n Functional scales\n

\n Click to expand. 5 opaque tokens + 4 mode-aware alpha overlays per\n scale.\n

\n {Object.entries(F).map(([name, data]) => (\n \n ))}\n \n \n APCA constraints\n \n

\n \n Highlight dark + Espresso:\n {\" \"}\n Lc 55 — headlines/icons only. Use text-strong for small text.\n

\n \n Ash + Espresso:\n {\" \"}\n Lc 44 — icon only. White better (Lc 65, large/bold). Use soft for\n text chips.\n

\n \n Pebble + Espresso:\n {\" \"}\n Lc 68 — large/bold only. Use soft for small text.\n

\n \n \n )}\n\n {tab === \"compare\" && }\n\n {tab === \"demo\" && (\n

\n In context\n

\n \n \n \n

\n \n )}\n\n {tab === \"deco\" && }\n\n {tab === \"map\" && (\n

\n CSS variable reference\n

\n {[\n {\n g: \"Neutral\",\n tokens: [\n [\"--color-surface\", \"White (brand)\"],\n [\"--color-surface-raised\", \"Between White & Sea Salt\"],\n [\"--color-surface-secondary\", \"Sea Salt (brand)\"],\n [\"--color-surface-muted\", \"Oyster (brand)\"],\n [\"--color-text\", \"Espresso 100%\"],\n [\"--color-text-secondary\", \"Espresso 62%\"],\n [\"--color-text-tertiary\", \"Espresso 40%\"],\n [\"--color-text-disabled\", \"Espresso 25%\"],\n [\"--color-border\", \"Espresso 18%\"],\n [\"--color-border-subtle\", \"Espresso 10%\"],\n [\"--color-border-strong\", \"Espresso 30%\"],\n [\"--color-tonal\", \"Espresso 7%\"],\n [\"--color-tonal-hover\", \"Espresso 12%\"],\n ],\n },\n {\n g: \"Per scale (primary, error, success, warning, highlight, info)\",\n tokens: [\n [\"--color-{scale}\", \"Solid fill\"],\n [\"--color-{scale}-hover\", \"Solid hover\"],\n [\"--color-{scale}-on\", \"Auto text on solid\"],\n [\"--color-{scale}-text\", \"Colored text (APCA ≥60)\"],\n [\"--color-{scale}-text-strong\", \"High-contrast (APCA ≥90)\"],\n [\n \"--color-{scale}-surface\",\n \"Light: 12% · Dark: 25% (HL: 28%/35%)\",\n ],\n [\n \"--color-{scale}-surface-hover\",\n \"Light: 16% · Dark: 30% (HL: 36%/42%)\",\n ],\n [\n \"--color-{scale}-border\",\n \"Light: 25% · Dark: 35% (HL: 50%/55%)\",\n ],\n [\n \"--color-{scale}-focus\",\n \"Light: 40% · Dark: 50% (HL: 65%/70%)\",\n ],\n ],\n },\n {\n g: \"Special\",\n tokens: [\n [\"--color-on-light\", \"White at 97%\"],\n [\"--color-on-dark\", \"Espresso at 95%\"],\n [\"--color-scrim\", \"Black at 40%\"],\n [\"--color-static-white\", \"#FFF (no mode flip)\"],\n [\"--color-static-black\", \"#000 (no mode flip)\"],\n ],\n },\n ].map(({ g, tokens }) => (\n

\n \n {g}\n

\n {tokens.map(([t, s]) => (\n \n \n {t}\n \n {s}\n

\n ))}\n \n ))}\n \n )}\n \n );\n}","createdAt",["D",1774540514960],"branchVersion","branchId","1b3d2bac-292c-11f1-9e8e-42dde27851f2","id","1b3c725c-292c-11f1-9e8e-42dde27851f2","untitled-8960",["D",1774540483743],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019d2ada-9f77-751b-a056-f69d3f2e0fb3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d2ada-9f77-751b-a056-fb192fc62946","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned",7,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","MicahTebi","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzNCVVAwRnZ6a2Q1YmNqbkxaS09ZcTEwWnY3byJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":147,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":148,"_78":149,"_80":150,"_82":25},"tree",[142],"files",[142],"counts",{"_131":60,"_132":133,"_134":60,"_135":136,"_137":138},"contents",[123],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":124,"_32":28,"_30":31,"_125":-5,"_41":42,"_40":14,"_126":25,"_38":127,"_13":128,"_33":34,"_35":37,"_24":25,"_129":-5,"_27":130},"2ddb8614-292c-11f1-bdb6-42dde27851f2","parentId","latest",["D",1774540514960],2,"label",[28],"pulls","branches",1,"forks","envVars",{"_139":60,"_141":60},"connections",{"_139":60,"_140":60},"count","unfilledCount","emptyCount",{"_43":124,"_32":28,"_30":31,"_125":-5,"_41":42,"_40":14,"_126":25,"_38":143,"_13":128,"_33":34,"_35":37,"_24":25,"_129":-5,"_144":145,"_27":146},["D",1774540514960],"children",[],[28],["D",1774540483743],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_120":184,"_185":186,"_187":188,"_189":25,"_190":25,"_191":25,"_192":193,"_194":-5,"_195":-7,"_196":-7,"_197":60,"_198":25,"_199":25,"_200":-5,"_201":25,"_202":25,"_203":25,"_204":-5},"ENV",{"_155":156,"_157":158,"_159":84,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets",true,"preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v3