@tetrascience-npm/tetrascience-react-ui 0.6.0-beta.81.1 → 0.6.0-beta.83.1

package/dist/utils/colors.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(E,e)=>{if(typeof window<"u")return getComputedStyle(document.documentElement).getPropertyValue("--"+E).trim()||e||"";const g=e?", "+e:"";return"var(--"+E+g+")"},b={BLACK_50:r("black-50","rgba(26, 26, 26, 0.05)"),BLACK_100:r("black-100","rgba(26, 26, 26, 0.1)"),BLACK_200:r("black-200","rgba(26, 26, 26, 0.2)"),BLACK_300:r("black-300","rgba(26, 26, 26, 0.3)"),BLACK_400:r("black-400","rgba(26, 26, 26, 0.4)"),BLACK_500:r("black-500","rgba(26, 26, 26, 0.5)"),BLACK_600:r("black-600","rgba(26, 26, 26, 0.6)"),BLACK_700:r("black-700","rgba(26, 26, 26, 0.7)"),BLACK_800:r("black-800","rgba(26, 26, 26, 0.8)"),BLACK_900:r("black-900","rgba(26, 26, 26, 1)"),BLACK:r("black-900","#1a1a1a"),BLACK_OPACITY_20:"rgba(26, 26, 26, 0.2)",WHITE_50:r("white-50","rgba(255, 255, 255, 0.05)"),WHITE_100:r("white-100","rgba(255, 255, 255, 0.1)"),WHITE_200:r("white-200","rgba(255, 255, 255, 0.2)"),WHITE_300:r("white-300","rgba(255, 255, 255, 0.3)"),WHITE_400:r("white-400","rgba(255, 255, 255, 0.4)"),WHITE_500:r("white-500","rgba(255, 255, 255, 0.5)"),WHITE_600:r("white-600","rgba(255, 255, 255, 0.6)"),WHITE_700:r("white-700","rgba(255, 255, 255, 0.7)"),WHITE_800:r("white-800","rgba(255, 255, 255, 0.8)"),WHITE_900:r("white-900","rgba(255, 255, 255, 1)"),WHITE:r("white-900","#ffffff"),BLUE_50:r("blue-50","rgba(240, 249, 255, 1)"),BLUE_100:r("blue-100","rgba(225, 243, 254, 1)"),BLUE_200:r("blue-200","rgba(185, 229, 252, 1)"),BLUE_300:r("blue-300","rgba(125, 211, 251, 1)"),BLUE_400:r("blue-400","rgba(58, 190, 247, 1)"),BLUE_500:r("blue-500","rgba(27, 173, 240, 1)"),BLUE_600:r("blue-600","rgba(64, 114, 210, 1)"),BLUE_700:r("blue-700","rgba(3, 105, 159, 1)"),BLUE_800:r("blue-800","rgba(5, 69, 103, 1)"),BLUE_900:r("blue-900","rgba(4, 38, 63, 1)"),BLUE:r("graph-primary-blue","#2D9CDB"),GREY_50:r("grey-50","rgba(248, 250, 252, 1)"),GREY_100:r("grey-100","rgba(241, 245, 249, 1)"),GREY_200:r("grey-200","rgba(225, 231, 239, 1)"),GREY_300:r("grey-300","rgba(200, 214, 229, 1)"),GREY_400:r("grey-400","rgba(158, 172, 192, 1)"),GREY_500:r("grey-500","rgba(100, 116, 139, 1)"),GREY_600:r("grey-600","rgba(72, 86, 106, 1)"),GREY_700:r("grey-700","rgba(51, 65, 86, 1)"),GREY_800:r("grey-800","rgba(29, 40, 57, 1)"),GREY_900:r("grey-900","rgba(20, 30, 53, 1)"),GREY:r("grey-400","#CCCCCC"),ORANGE:r("graph-primary-orange","#FFA62E"),RED:r("graph-primary-red","#FF5C64"),GREEN:r("graph-primary-green","#A5C34E"),YELLOW:r("graph-primary-yellow","#FBED53"),PURPLE:r("graph-primary-purple","#7A51AB"),GREEN_BG:r("green-bg","rgba(234, 254, 229, 1)"),GREEN_SUCCESS:r("green-success","rgba(8, 173, 55, 1)"),ORANGE_BG:r("orange-bg","rgba(254, 250, 229, 1)"),ORANGE_CAUTION:r("orange-caution","rgba(249, 173, 20, 1)"),RED_BG:r("red-bg","rgba(254, 234, 229, 1)"),RED_ERROR:r("red-error","rgba(216, 35, 44, 1)"),GRAPH_SECONDARY_BROWN:r("graph-secondary-brown","#AD7942"),GRAPH_SECONDARY_PINK:r("graph-secondary-pink","#FB90B4"),GRAPH_SECONDARY_TEAL:r("graph-secondary-teal","#3CCABA"),GRAPH_SECONDARY_DARK_BLUE:r("graph-secondary-dark-blue","#4072D2"),GRAPH_SECONDARY_BLACK:r("graph-secondary-black","#424E62"),GRAPH_SECONDARY_GREY:r("graph-secondary-grey","#B4B4B4")},A=[r("chart-1","#2F45B5"),r("chart-2","#FD972F"),r("chart-3","#038599"),r("chart-4","#E15759"),r("chart-5","#8243BA"),r("chart-6","#94C2FF"),r("chart-7","#465364"),r("chart-8","#F4D03F"),r("chart-9","#CC79A7"),r("chart-10","#117733"),r("chart-11","#88CCEE"),r("chart-12","#882255")],a=(E,e)=>e.map((g,C)=>r(`${E}-${String(C+1).padStart(2,"0")}`,g)),B={blue:a("chart-seq-blue",["#F0F3FC","#DCE3F8","#C5D1F2","#A9BCEC","#8AA5E4","#6C8DDB","#5276D0","#3D62C5","#2F45B5","#27399A","#1F2D7E","#172261"]),teal:a("chart-seq-teal",["#E8F8FA","#CFF1F5","#AFE7EF","#88DAE6","#5ECADA","#34B9CC","#1AA5BD","#0BB6D0","#099DB3","#08899C","#067282","#055A66"]),purple:a("chart-seq-purple",["#F8EEFB","#EFD8F4","#E3BCEB","#D49DE0","#C27CD2","#AD5DC3","#9544B0","#8243BA","#6E2FA0","#5A2487","#481B6E","#371454"])},t={blueOrange:a("chart-div-blue-orange",["#1F3D9E","#2F45B5","#5276D0","#7A95DD","#A9BCEC","#DCE3F8","#FCE6CC","#FACB99","#F7AE63","#FD972F","#D87410","#A6580A"]),tealMagenta:a("chart-div-teal-magenta",["#055A66","#099DB3","#34B9CC","#88DAE6","#CFF1F5","#F0FAFB","#FBEBF3","#F0C8DE","#E29EC2","#CC79A7","#A85585","#7E3B62"]),purpleYellowGreen:a("chart-div-purple-yellowgreen",["#481B6E","#8243BA","#A767D0","#C593E0","#E3C5EE","#F4E6F8","#F2F7D9","#DCEB9F","#B8D266","#8FB939","#6E9A1F","#527516"])};exports.CHART_COLORS=A;exports.CHART_DIVERGING=t;exports.CHART_SEQUENTIAL=B;exports.COLORS=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let l;const i=255,D=(t,e)=>{if(/^(#|rgb)/.test(t))return t;if(l===void 0){const F=document.createElement("canvas");F.width=1,F.height=1,l=F.getContext("2d",{willReadFrequently:!0})}if(!l)return e||t;l.fillStyle="#000",l.fillStyle=t;const C=l.fillStyle;if(l.fillStyle="#fff",l.fillStyle=t,C!==l.fillStyle)return e||t;l.clearRect(0,0,1,1),l.fillRect(0,0,1,1);const[n,A,a,c]=l.getImageData(0,0,1,1).data;return c===i?"#"+[n,A,a].map(F=>F.toString(16).padStart(2,"0")).join(""):`rgba(${n}, ${A}, ${a}, ${(c/i).toFixed(3)})`},r=(t,e)=>{if(typeof window<"u"){const n=getComputedStyle(document.documentElement).getPropertyValue("--"+t).trim();return n?D(n,e):e||""}const C=e?", "+e:"";return"var(--"+t+C+")"},E=[r("chart-1","#2F45B5"),r("chart-2","#FD972F"),r("chart-3","#038599"),r("chart-4","#E15759"),r("chart-5","#8243BA"),r("chart-6","#94C2FF"),r("chart-7","#465364"),r("chart-8","#F4D03F"),r("chart-9","#CC79A7"),r("chart-10","#117733"),r("chart-11","#88CCEE"),r("chart-12","#882255")],B=(t,e)=>e??E[t%E.length],o=(t,e)=>e.map((C,n)=>r(`${t}-${String(n+1).padStart(2,"0")}`,C)),s={blue:o("chart-seq-blue",["#F0F3FC","#DCE3F8","#C5D1F2","#A9BCEC","#8AA5E4","#6C8DDB","#5276D0","#3D62C5","#2F45B5","#27399A","#1F2D7E","#172261"]),teal:o("chart-seq-teal",["#E8F8FA","#CFF1F5","#AFE7EF","#88DAE6","#5ECADA","#34B9CC","#1AA5BD","#0BB6D0","#099DB3","#08899C","#067282","#055A66"]),purple:o("chart-seq-purple",["#F8EEFB","#EFD8F4","#E3BCEB","#D49DE0","#C27CD2","#AD5DC3","#9544B0","#8243BA","#6E2FA0","#5A2487","#481B6E","#371454"])},u={blueOrange:o("chart-div-blue-orange",["#1F3D9E","#2F45B5","#5276D0","#7A95DD","#A9BCEC","#DCE3F8","#FCE6CC","#FACB99","#F7AE63","#FD972F","#D87410","#A6580A"]),tealMagenta:o("chart-div-teal-magenta",["#055A66","#099DB3","#34B9CC","#88DAE6","#CFF1F5","#F0FAFB","#FBEBF3","#F0C8DE","#E29EC2","#CC79A7","#A85585","#7E3B62"]),purpleYellowGreen:o("chart-div-purple-yellowgreen",["#481B6E","#8243BA","#A767D0","#C593E0","#E3C5EE","#F4E6F8","#F2F7D9","#DCEB9F","#B8D266","#8FB939","#6E9A1F","#527516"])},h=t=>t.length===0?[]:t.length===1?[[0,t[0]],[1,t[0]]]:t.map((e,C)=>[C/(t.length-1),e]);exports.CHART_COLORS=E;exports.CHART_DIVERGING=u;exports.CHART_SEQUENTIAL=s;exports.seriesColor=B;exports.toPlotlyColorscale=h;
 //# sourceMappingURL=colors.cjs.map

package/dist/utils/colors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"colors.cjs","sources":["../../src/utils/colors.ts"],"sourcesContent":["/**\n * Centralized color system for TetraScience UI\n * This utility provides access to CSS variables defined in colors.css\n * while maintaining TypeScript support and IntelliSense\n */\n\n/**\n * Get a CSS variable value with optional fallback\n * @param cssVar - The CSS variable name (without --)\n * @param fallback - Optional fallback value\n * @returns The CSS variable value or fallback\n */\nconst getCSSVar = (cssVar: string, fallback?: string): string => {\n  if (typeof window !== \"undefined\") {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue(\"--\" + cssVar)\n      .trim();\n    return value || fallback || \"\";\n  }\n  const fallbackSuffix = fallback ? \", \" + fallback : \"\";\n  return \"var(--\" + cssVar + fallbackSuffix + \")\";\n};\n\n/**\n * Centralized color tokens that map to CSS variables\n * This provides TypeScript support while leveraging CSS custom properties\n */\nexport const COLORS = {\n  // Black scale\n  BLACK_50: getCSSVar(\"black-50\", \"rgba(26, 26, 26, 0.05)\"),\n  BLACK_100: getCSSVar(\"black-100\", \"rgba(26, 26, 26, 0.1)\"),\n  BLACK_200: getCSSVar(\"black-200\", \"rgba(26, 26, 26, 0.2)\"),\n  BLACK_300: getCSSVar(\"black-300\", \"rgba(26, 26, 26, 0.3)\"),\n  BLACK_400: getCSSVar(\"black-400\", \"rgba(26, 26, 26, 0.4)\"),\n  BLACK_500: getCSSVar(\"black-500\", \"rgba(26, 26, 26, 0.5)\"),\n  BLACK_600: getCSSVar(\"black-600\", \"rgba(26, 26, 26, 0.6)\"),\n  BLACK_700: getCSSVar(\"black-700\", \"rgba(26, 26, 26, 0.7)\"),\n  BLACK_800: getCSSVar(\"black-800\", \"rgba(26, 26, 26, 0.8)\"),\n  BLACK_900: getCSSVar(\"black-900\", \"rgba(26, 26, 26, 1)\"),\n\n  // Legacy aliases for backwards compatibility\n  BLACK: getCSSVar(\"black-900\", \"#1a1a1a\"),\n  BLACK_OPACITY_20: \"rgba(26, 26, 26, 0.2)\", // Custom opacity not in CSS vars\n\n  // White scale\n  WHITE_50: getCSSVar(\"white-50\", \"rgba(255, 255, 255, 0.05)\"),\n  WHITE_100: getCSSVar(\"white-100\", \"rgba(255, 255, 255, 0.1)\"),\n  WHITE_200: getCSSVar(\"white-200\", \"rgba(255, 255, 255, 0.2)\"),\n  WHITE_300: getCSSVar(\"white-300\", \"rgba(255, 255, 255, 0.3)\"),\n  WHITE_400: getCSSVar(\"white-400\", \"rgba(255, 255, 255, 0.4)\"),\n  WHITE_500: getCSSVar(\"white-500\", \"rgba(255, 255, 255, 0.5)\"),\n  WHITE_600: getCSSVar(\"white-600\", \"rgba(255, 255, 255, 0.6)\"),\n  WHITE_700: getCSSVar(\"white-700\", \"rgba(255, 255, 255, 0.7)\"),\n  WHITE_800: getCSSVar(\"white-800\", \"rgba(255, 255, 255, 0.8)\"),\n  WHITE_900: getCSSVar(\"white-900\", \"rgba(255, 255, 255, 1)\"),\n\n  // Legacy alias\n  WHITE: getCSSVar(\"white-900\", \"#ffffff\"),\n\n  // Blue scale\n  BLUE_50: getCSSVar(\"blue-50\", \"rgba(240, 249, 255, 1)\"),\n  BLUE_100: getCSSVar(\"blue-100\", \"rgba(225, 243, 254, 1)\"),\n  BLUE_200: getCSSVar(\"blue-200\", \"rgba(185, 229, 252, 1)\"),\n  BLUE_300: getCSSVar(\"blue-300\", \"rgba(125, 211, 251, 1)\"),\n  BLUE_400: getCSSVar(\"blue-400\", \"rgba(58, 190, 247, 1)\"),\n  BLUE_500: getCSSVar(\"blue-500\", \"rgba(27, 173, 240, 1)\"),\n  BLUE_600: getCSSVar(\"blue-600\", \"rgba(64, 114, 210, 1)\"),\n  BLUE_700: getCSSVar(\"blue-700\", \"rgba(3, 105, 159, 1)\"),\n  BLUE_800: getCSSVar(\"blue-800\", \"rgba(5, 69, 103, 1)\"),\n  BLUE_900: getCSSVar(\"blue-900\", \"rgba(4, 38, 63, 1)\"),\n\n  // Legacy alias\n  BLUE: getCSSVar(\"graph-primary-blue\", \"#2D9CDB\"),\n\n  // Grey scale\n  GREY_50: getCSSVar(\"grey-50\", \"rgba(248, 250, 252, 1)\"),\n  GREY_100: getCSSVar(\"grey-100\", \"rgba(241, 245, 249, 1)\"),\n  GREY_200: getCSSVar(\"grey-200\", \"rgba(225, 231, 239, 1)\"),\n  GREY_300: getCSSVar(\"grey-300\", \"rgba(200, 214, 229, 1)\"),\n  GREY_400: getCSSVar(\"grey-400\", \"rgba(158, 172, 192, 1)\"),\n  GREY_500: getCSSVar(\"grey-500\", \"rgba(100, 116, 139, 1)\"),\n  GREY_600: getCSSVar(\"grey-600\", \"rgba(72, 86, 106, 1)\"),\n  GREY_700: getCSSVar(\"grey-700\", \"rgba(51, 65, 86, 1)\"),\n  GREY_800: getCSSVar(\"grey-800\", \"rgba(29, 40, 57, 1)\"),\n  GREY_900: getCSSVar(\"grey-900\", \"rgba(20, 30, 53, 1)\"),\n\n  // Legacy alias\n  GREY: getCSSVar(\"grey-400\", \"#CCCCCC\"),\n\n  // Graph primary colors\n  ORANGE: getCSSVar(\"graph-primary-orange\", \"#FFA62E\"),\n  RED: getCSSVar(\"graph-primary-red\", \"#FF5C64\"),\n  GREEN: getCSSVar(\"graph-primary-green\", \"#A5C34E\"),\n  YELLOW: getCSSVar(\"graph-primary-yellow\", \"#FBED53\"),\n  PURPLE: getCSSVar(\"graph-primary-purple\", \"#7A51AB\"),\n\n  // Semantic colors\n  GREEN_BG: getCSSVar(\"green-bg\", \"rgba(234, 254, 229, 1)\"),\n  GREEN_SUCCESS: getCSSVar(\"green-success\", \"rgba(8, 173, 55, 1)\"),\n  ORANGE_BG: getCSSVar(\"orange-bg\", \"rgba(254, 250, 229, 1)\"),\n  ORANGE_CAUTION: getCSSVar(\"orange-caution\", \"rgba(249, 173, 20, 1)\"),\n  RED_BG: getCSSVar(\"red-bg\", \"rgba(254, 234, 229, 1)\"),\n  RED_ERROR: getCSSVar(\"red-error\", \"rgba(216, 35, 44, 1)\"),\n\n  // Graph secondary colors\n  GRAPH_SECONDARY_BROWN: getCSSVar(\"graph-secondary-brown\", \"#AD7942\"),\n  GRAPH_SECONDARY_PINK: getCSSVar(\"graph-secondary-pink\", \"#FB90B4\"),\n  GRAPH_SECONDARY_TEAL: getCSSVar(\"graph-secondary-teal\", \"#3CCABA\"),\n  GRAPH_SECONDARY_DARK_BLUE: getCSSVar(\"graph-secondary-dark-blue\", \"#4072D2\"),\n  GRAPH_SECONDARY_BLACK: getCSSVar(\"graph-secondary-black\", \"#424E62\"),\n  GRAPH_SECONDARY_GREY: getCSSVar(\"graph-secondary-grey\", \"#B4B4B4\"),\n} as const;\n\n/**\n * Chart color palette for consistent graph styling.\n *\n * CVD-friendly (deuteranopia / protanopia / tritanopia) categorical palette.\n * Single source of truth is the `--chart-1` … `--chart-12` CSS variables in\n * `index.tailwind.css`; the hex fallbacks below are used during SSR / before\n * the stylesheet resolves. Slots 1–8 are recommended; 9–12 are for sparing use\n * when more than 8 series are needed.\n */\nexport const CHART_COLORS = [\n  getCSSVar(\"chart-1\", \"#2F45B5\"), // TS Blue 500\n  getCSSVar(\"chart-2\", \"#FD972F\"), // Yellow Flax\n  getCSSVar(\"chart-3\", \"#038599\"), // Forest Green 300\n  getCSSVar(\"chart-4\", \"#E15759\"), // Imperial Red\n  getCSSVar(\"chart-5\", \"#8243BA\"), // Purple 500\n  getCSSVar(\"chart-6\", \"#94C2FF\"), // Light Blue 100\n  getCSSVar(\"chart-7\", \"#465364\"), // Stone Gray 300\n  getCSSVar(\"chart-8\", \"#F4D03F\"), // Soft Yellow\n  getCSSVar(\"chart-9\", \"#CC79A7\"), // Rose Pink\n  getCSSVar(\"chart-10\", \"#117733\"), // Dark Green\n  getCSSVar(\"chart-11\", \"#88CCEE\"), // Sky Blue\n  getCSSVar(\"chart-12\", \"#882255\"), // Wine\n] as const;\n\n/**\n * Build a continuous color ramp from the `--chart-{name}-01` … `-12` CSS\n * variables, falling back to the provided hex steps during SSR.\n */\nconst ramp = (name: string, fallbacks: readonly string[]): string[] =>\n  fallbacks.map((hex, i) => getCSSVar(`${name}-${String(i + 1).padStart(2, \"0\")}`, hex));\n\n/**\n * CVD-friendly sequential ramps (light → dark, anchored on brand).\n * 12 steps each — pass to a chart's colorscale / sequential interpolator.\n * Source of truth: `--chart-seq-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_SEQUENTIAL = {\n  blue: ramp(\"chart-seq-blue\", [\"#F0F3FC\", \"#DCE3F8\", \"#C5D1F2\", \"#A9BCEC\", \"#8AA5E4\", \"#6C8DDB\", \"#5276D0\", \"#3D62C5\", \"#2F45B5\", \"#27399A\", \"#1F2D7E\", \"#172261\"]),\n  teal: ramp(\"chart-seq-teal\", [\"#E8F8FA\", \"#CFF1F5\", \"#AFE7EF\", \"#88DAE6\", \"#5ECADA\", \"#34B9CC\", \"#1AA5BD\", \"#0BB6D0\", \"#099DB3\", \"#08899C\", \"#067282\", \"#055A66\"]),\n  purple: ramp(\"chart-seq-purple\", [\"#F8EEFB\", \"#EFD8F4\", \"#E3BCEB\", \"#D49DE0\", \"#C27CD2\", \"#AD5DC3\", \"#9544B0\", \"#8243BA\", \"#6E2FA0\", \"#5A2487\", \"#481B6E\", \"#371454\"]),\n} as const;\n\n/**\n * CVD-friendly diverging ramps (midpoint at step 06/07). Red/green pairings\n * are intentionally avoided (worst for deutan/protan).\n * Source of truth: `--chart-div-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_DIVERGING = {\n  blueOrange: ramp(\"chart-div-blue-orange\", [\"#1F3D9E\", \"#2F45B5\", \"#5276D0\", \"#7A95DD\", \"#A9BCEC\", \"#DCE3F8\", \"#FCE6CC\", \"#FACB99\", \"#F7AE63\", \"#FD972F\", \"#D87410\", \"#A6580A\"]),\n  tealMagenta: ramp(\"chart-div-teal-magenta\", [\"#055A66\", \"#099DB3\", \"#34B9CC\", \"#88DAE6\", \"#CFF1F5\", \"#F0FAFB\", \"#FBEBF3\", \"#F0C8DE\", \"#E29EC2\", \"#CC79A7\", \"#A85585\", \"#7E3B62\"]),\n  purpleYellowGreen: ramp(\"chart-div-purple-yellowgreen\", [\"#481B6E\", \"#8243BA\", \"#A767D0\", \"#C593E0\", \"#E3C5EE\", \"#F4E6F8\", \"#F2F7D9\", \"#DCEB9F\", \"#B8D266\", \"#8FB939\", \"#6E9A1F\", \"#527516\"]),\n} as const;\n\nexport type ColorToken = keyof typeof COLORS;\n"],"names":["getCSSVar","cssVar","fallback","fallbackSuffix","COLORS","CHART_COLORS","ramp","name","fallbacks","hex","i","CHART_SEQUENTIAL","CHART_DIVERGING"],"mappings":"gFAYA,MAAMA,EAAY,CAACC,EAAgBC,IAA8B,CAC/D,GAAI,OAAO,OAAW,IAIpB,OAHc,iBAAiB,SAAS,eAAe,EACpD,iBAAiB,KAAOD,CAAM,EAC9B,KAAA,GACaC,GAAY,GAE9B,MAAMC,EAAiBD,EAAW,KAAOA,EAAW,GACpD,MAAO,SAAWD,EAASE,EAAiB,GAC9C,EAMaC,EAAS,CAEpB,SAAUJ,EAAU,WAAY,wBAAwB,EACxD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,uBAAuB,EACzD,UAAWA,EAAU,YAAa,qBAAqB,EAGvD,MAAOA,EAAU,YAAa,SAAS,EACvC,iBAAkB,wBAGlB,SAAUA,EAAU,WAAY,2BAA2B,EAC3D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,0BAA0B,EAC5D,UAAWA,EAAU,YAAa,wBAAwB,EAG1D,MAAOA,EAAU,YAAa,SAAS,EAGvC,QAASA,EAAU,UAAW,wBAAwB,EACtD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,uBAAuB,EACvD,SAAUA,EAAU,WAAY,uBAAuB,EACvD,SAAUA,EAAU,WAAY,uBAAuB,EACvD,SAAUA,EAAU,WAAY,sBAAsB,EACtD,SAAUA,EAAU,WAAY,qBAAqB,EACrD,SAAUA,EAAU,WAAY,oBAAoB,EAGpD,KAAMA,EAAU,qBAAsB,SAAS,EAG/C,QAASA,EAAU,UAAW,wBAAwB,EACtD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,SAAUA,EAAU,WAAY,sBAAsB,EACtD,SAAUA,EAAU,WAAY,qBAAqB,EACrD,SAAUA,EAAU,WAAY,qBAAqB,EACrD,SAAUA,EAAU,WAAY,qBAAqB,EAGrD,KAAMA,EAAU,WAAY,SAAS,EAGrC,OAAQA,EAAU,uBAAwB,SAAS,EACnD,IAAKA,EAAU,oBAAqB,SAAS,EAC7C,MAAOA,EAAU,sBAAuB,SAAS,EACjD,OAAQA,EAAU,uBAAwB,SAAS,EACnD,OAAQA,EAAU,uBAAwB,SAAS,EAGnD,SAAUA,EAAU,WAAY,wBAAwB,EACxD,cAAeA,EAAU,gBAAiB,qBAAqB,EAC/D,UAAWA,EAAU,YAAa,wBAAwB,EAC1D,eAAgBA,EAAU,iBAAkB,uBAAuB,EACnE,OAAQA,EAAU,SAAU,wBAAwB,EACpD,UAAWA,EAAU,YAAa,sBAAsB,EAGxD,sBAAuBA,EAAU,wBAAyB,SAAS,EACnE,qBAAsBA,EAAU,uBAAwB,SAAS,EACjE,qBAAsBA,EAAU,uBAAwB,SAAS,EACjE,0BAA2BA,EAAU,4BAA6B,SAAS,EAC3E,sBAAuBA,EAAU,wBAAyB,SAAS,EACnE,qBAAsBA,EAAU,uBAAwB,SAAS,CACnE,EAWaK,EAAe,CAC1BL,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,WAAY,SAAS,EAC/BA,EAAU,WAAY,SAAS,EAC/BA,EAAU,WAAY,SAAS,CACjC,EAMMM,EAAO,CAACC,EAAcC,IAC1BA,EAAU,IAAI,CAACC,EAAKC,IAAMV,EAAU,GAAGO,CAAI,IAAI,OAAOG,EAAI,CAAC,EAAE,SAAS,EAAG,GAAG,CAAC,GAAID,CAAG,CAAC,EAO1EE,EAAmB,CAC9B,KAAML,EAAK,iBAAkB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EACjK,KAAMA,EAAK,iBAAkB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EACjK,OAAQA,EAAK,mBAAoB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,CACvK,EAOaM,EAAkB,CAC7B,WAAYN,EAAK,wBAAyB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EAC9K,YAAaA,EAAK,yBAA0B,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EAChL,kBAAmBA,EAAK,+BAAgC,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,CAC9L"}
+{"version":3,"file":"colors.cjs","sources":["../../src/utils/colors.ts"],"sourcesContent":["/**\n * Centralized chart color system for TetraScience UI\n * Resolves the CVD-friendly chart palette CSS variables defined in\n * `index.tailwind.css` into Plotly-parseable colors, with TypeScript\n * support and IntelliSense\n */\n\nlet colorProbe: CanvasRenderingContext2D | null | undefined;\n\nconst OPAQUE_ALPHA = 255;\n\n/**\n * Normalize a CSS color to a hex/rgba string that Plotly (tinycolor) can\n * parse. Tokens are declared in oklch, which tinycolor does not understand,\n * so resolved values are painted onto a 1×1 canvas and read back as sRGB\n * pixel values (the fillStyle getter alone won't do — browsers serialize\n * oklch back as oklch).\n */\nconst toPlotlySafeColor = (value: string, fallback?: string): string => {\n  if (/^(#|rgb)/.test(value)) return value;\n  if (colorProbe === undefined) {\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = 1;\n    canvas.height = 1;\n    colorProbe = canvas.getContext(\"2d\", { willReadFrequently: true });\n  }\n  if (!colorProbe) return fallback || value;\n  // An unparseable value leaves the previous fillStyle in place. Assigning it\n  // after two different sentinels distinguishes \"parsed\" (same result twice)\n  // from \"ignored\" (the sentinels leak through) without colliding with any\n  // legitimately black/white token.\n  colorProbe.fillStyle = \"#000\";\n  colorProbe.fillStyle = value;\n  const first = colorProbe.fillStyle;\n  colorProbe.fillStyle = \"#fff\";\n  colorProbe.fillStyle = value;\n  if (first !== colorProbe.fillStyle) return fallback || value;\n  colorProbe.clearRect(0, 0, 1, 1);\n  colorProbe.fillRect(0, 0, 1, 1);\n  const [r, g, b, a] = colorProbe.getImageData(0, 0, 1, 1).data;\n  if (a === OPAQUE_ALPHA) {\n    return (\n      \"#\" + [r, g, b].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")\n    );\n  }\n  return `rgba(${r}, ${g}, ${b}, ${(a / OPAQUE_ALPHA).toFixed(3)})`;\n};\n\n/**\n * Get a CSS variable value with optional fallback\n * @param cssVar - The CSS variable name (without --)\n * @param fallback - Optional fallback value\n * @returns The CSS variable value or fallback\n */\nconst getCSSVar = (cssVar: string, fallback?: string): string => {\n  if (typeof window !== \"undefined\") {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue(\"--\" + cssVar)\n      .trim();\n    if (!value) return fallback || \"\";\n    return toPlotlySafeColor(value, fallback);\n  }\n  const fallbackSuffix = fallback ? \", \" + fallback : \"\";\n  return \"var(--\" + cssVar + fallbackSuffix + \")\";\n};\n\n/**\n * Chart color palette for consistent graph styling.\n *\n * CVD-friendly (deuteranopia / protanopia / tritanopia) categorical palette.\n * Single source of truth is the `--chart-1` … `--chart-12` CSS variables in\n * `index.tailwind.css`; the hex fallbacks below are used during SSR / before\n * the stylesheet resolves. Slots 1–8 are recommended; 9–12 are for sparing use\n * when more than 8 series are needed.\n */\nexport const CHART_COLORS = [\n  getCSSVar(\"chart-1\", \"#2F45B5\"), // TS Blue 500\n  getCSSVar(\"chart-2\", \"#FD972F\"), // Yellow Flax\n  getCSSVar(\"chart-3\", \"#038599\"), // Forest Green 300\n  getCSSVar(\"chart-4\", \"#E15759\"), // Imperial Red\n  getCSSVar(\"chart-5\", \"#8243BA\"), // Purple 500\n  getCSSVar(\"chart-6\", \"#94C2FF\"), // Light Blue 100\n  getCSSVar(\"chart-7\", \"#465364\"), // Stone Gray 300\n  getCSSVar(\"chart-8\", \"#F4D03F\"), // Soft Yellow\n  getCSSVar(\"chart-9\", \"#CC79A7\"), // Rose Pink\n  getCSSVar(\"chart-10\", \"#117733\"), // Dark Green\n  getCSSVar(\"chart-11\", \"#88CCEE\"), // Sky Blue\n  getCSSVar(\"chart-12\", \"#882255\"), // Wine\n] as const;\n\n/**\n * Resolve the color for a data series: use the explicit color when one is\n * provided, otherwise cycle through the {@link CHART_COLORS} palette by series\n * index (wrapping around when there are more series than palette slots).\n *\n * @param index - Zero-based series index\n * @param explicit - Caller-provided color override, if any\n */\nexport const seriesColor = (index: number, explicit?: string | null): string =>\n  explicit ?? CHART_COLORS[index % CHART_COLORS.length];\n\n/**\n * Build a continuous color ramp from the `--chart-{name}-01` … `-12` CSS\n * variables, falling back to the provided hex steps during SSR.\n */\nconst ramp = (name: string, fallbacks: readonly string[]): string[] =>\n  fallbacks.map((hex, i) => getCSSVar(`${name}-${String(i + 1).padStart(2, \"0\")}`, hex));\n\n/**\n * CVD-friendly sequential ramps (light → dark, anchored on brand).\n * 12 steps each — pass to a chart's colorscale / sequential interpolator.\n * Source of truth: `--chart-seq-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_SEQUENTIAL = {\n  blue: ramp(\"chart-seq-blue\", [\"#F0F3FC\", \"#DCE3F8\", \"#C5D1F2\", \"#A9BCEC\", \"#8AA5E4\", \"#6C8DDB\", \"#5276D0\", \"#3D62C5\", \"#2F45B5\", \"#27399A\", \"#1F2D7E\", \"#172261\"]),\n  teal: ramp(\"chart-seq-teal\", [\"#E8F8FA\", \"#CFF1F5\", \"#AFE7EF\", \"#88DAE6\", \"#5ECADA\", \"#34B9CC\", \"#1AA5BD\", \"#0BB6D0\", \"#099DB3\", \"#08899C\", \"#067282\", \"#055A66\"]),\n  purple: ramp(\"chart-seq-purple\", [\"#F8EEFB\", \"#EFD8F4\", \"#E3BCEB\", \"#D49DE0\", \"#C27CD2\", \"#AD5DC3\", \"#9544B0\", \"#8243BA\", \"#6E2FA0\", \"#5A2487\", \"#481B6E\", \"#371454\"]),\n} as const;\n\n/**\n * CVD-friendly diverging ramps (midpoint at step 06/07). Red/green pairings\n * are intentionally avoided (worst for deutan/protan).\n * Source of truth: `--chart-div-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_DIVERGING = {\n  blueOrange: ramp(\"chart-div-blue-orange\", [\"#1F3D9E\", \"#2F45B5\", \"#5276D0\", \"#7A95DD\", \"#A9BCEC\", \"#DCE3F8\", \"#FCE6CC\", \"#FACB99\", \"#F7AE63\", \"#FD972F\", \"#D87410\", \"#A6580A\"]),\n  tealMagenta: ramp(\"chart-div-teal-magenta\", [\"#055A66\", \"#099DB3\", \"#34B9CC\", \"#88DAE6\", \"#CFF1F5\", \"#F0FAFB\", \"#FBEBF3\", \"#F0C8DE\", \"#E29EC2\", \"#CC79A7\", \"#A85585\", \"#7E3B62\"]),\n  purpleYellowGreen: ramp(\"chart-div-purple-yellowgreen\", [\"#481B6E\", \"#8243BA\", \"#A767D0\", \"#C593E0\", \"#E3C5EE\", \"#F4E6F8\", \"#F2F7D9\", \"#DCEB9F\", \"#B8D266\", \"#8FB939\", \"#6E9A1F\", \"#527516\"]),\n} as const;\n\n/**\n * Convert a color ramp (e.g. `CHART_SEQUENTIAL.blue`, `CHART_DIVERGING.blueOrange`)\n * into Plotly's colorscale format: evenly spaced [position, color] stops.\n */\nexport const toPlotlyColorscale = (\n  ramp: readonly string[],\n): Array<[number, string]> => {\n  if (ramp.length === 0) return [];\n  if (ramp.length === 1) {\n    return [\n      [0, ramp[0]],\n      [1, ramp[0]],\n    ];\n  }\n  return ramp.map((color, i) => [i / (ramp.length - 1), color]);\n};\n"],"names":["colorProbe","OPAQUE_ALPHA","toPlotlySafeColor","value","fallback","canvas","first","r","g","b","a","v","getCSSVar","cssVar","fallbackSuffix","CHART_COLORS","seriesColor","index","explicit","ramp","name","fallbacks","hex","i","CHART_SEQUENTIAL","CHART_DIVERGING","toPlotlyColorscale","color"],"mappings":"gFAOA,IAAIA,EAEJ,MAAMC,EAAe,IASfC,EAAoB,CAACC,EAAeC,IAA8B,CACtE,GAAI,WAAW,KAAKD,CAAK,EAAG,OAAOA,EACnC,GAAIH,IAAe,OAAW,CAC5B,MAAMK,EAAS,SAAS,cAAc,QAAQ,EAC9CA,EAAO,MAAQ,EACfA,EAAO,OAAS,EAChBL,EAAaK,EAAO,WAAW,KAAM,CAAE,mBAAoB,GAAM,CACnE,CACA,GAAI,CAACL,EAAY,OAAOI,GAAYD,EAKpCH,EAAW,UAAY,OACvBA,EAAW,UAAYG,EACvB,MAAMG,EAAQN,EAAW,UAGzB,GAFAA,EAAW,UAAY,OACvBA,EAAW,UAAYG,EACnBG,IAAUN,EAAW,UAAW,OAAOI,GAAYD,EACvDH,EAAW,UAAU,EAAG,EAAG,EAAG,CAAC,EAC/BA,EAAW,SAAS,EAAG,EAAG,EAAG,CAAC,EAC9B,KAAM,CAACO,EAAGC,EAAGC,EAAGC,CAAC,EAAIV,EAAW,aAAa,EAAG,EAAG,EAAG,CAAC,EAAE,KACzD,OAAIU,IAAMT,EAEN,IAAM,CAACM,EAAGC,EAAGC,CAAC,EAAE,IAAKE,GAAMA,EAAE,SAAS,EAAE,EAAE,SAAS,EAAG,GAAG,CAAC,EAAE,KAAK,EAAE,EAGhE,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,MAAMC,EAAIT,GAAc,QAAQ,CAAC,CAAC,GAChE,EAQMW,EAAY,CAACC,EAAgBT,IAA8B,CAC/D,GAAI,OAAO,OAAW,IAAa,CACjC,MAAMD,EAAQ,iBAAiB,SAAS,eAAe,EACpD,iBAAiB,KAAOU,CAAM,EAC9B,KAAA,EACH,OAAKV,EACED,EAAkBC,EAAOC,CAAQ,EADrBA,GAAY,EAEjC,CACA,MAAMU,EAAiBV,EAAW,KAAOA,EAAW,GACpD,MAAO,SAAWS,EAASC,EAAiB,GAC9C,EAWaC,EAAe,CAC1BH,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,UAAW,SAAS,EAC9BA,EAAU,WAAY,SAAS,EAC/BA,EAAU,WAAY,SAAS,EAC/BA,EAAU,WAAY,SAAS,CACjC,EAUaI,EAAc,CAACC,EAAeC,IACzCA,GAAYH,EAAaE,EAAQF,EAAa,MAAM,EAMhDI,EAAO,CAACC,EAAcC,IAC1BA,EAAU,IAAI,CAACC,EAAKC,IAAMX,EAAU,GAAGQ,CAAI,IAAI,OAAOG,EAAI,CAAC,EAAE,SAAS,EAAG,GAAG,CAAC,GAAID,CAAG,CAAC,EAO1EE,EAAmB,CAC9B,KAAML,EAAK,iBAAkB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EACjK,KAAMA,EAAK,iBAAkB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EACjK,OAAQA,EAAK,mBAAoB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,CACvK,EAOaM,EAAkB,CAC7B,WAAYN,EAAK,wBAAyB,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EAC9K,YAAaA,EAAK,yBAA0B,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,EAChL,kBAAmBA,EAAK,+BAAgC,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAAC,CAC9L,EAMaO,EACXP,GAEIA,EAAK,SAAW,EAAU,CAAA,EAC1BA,EAAK,SAAW,EACX,CACL,CAAC,EAAGA,EAAK,CAAC,CAAC,EACX,CAAC,EAAGA,EAAK,CAAC,CAAC,CAAA,EAGRA,EAAK,IAAI,CAACQ,EAAOJ,IAAM,CAACA,GAAKJ,EAAK,OAAS,GAAIQ,CAAK,CAAC"}

package/dist/utils/colors.js

@@ -1,84 +1,25 @@
-const r = (e, E) => {
-  if (typeof window < "u")
-    return getComputedStyle(document.documentElement).getPropertyValue("--" + e).trim() || E || "";
-  const g = E ? ", " + E : "";
-  return "var(--" + e + g + ")";
-}, b = {
-  // Black scale
-  BLACK_50: r("black-50", "rgba(26, 26, 26, 0.05)"),
-  BLACK_100: r("black-100", "rgba(26, 26, 26, 0.1)"),
-  BLACK_200: r("black-200", "rgba(26, 26, 26, 0.2)"),
-  BLACK_300: r("black-300", "rgba(26, 26, 26, 0.3)"),
-  BLACK_400: r("black-400", "rgba(26, 26, 26, 0.4)"),
-  BLACK_500: r("black-500", "rgba(26, 26, 26, 0.5)"),
-  BLACK_600: r("black-600", "rgba(26, 26, 26, 0.6)"),
-  BLACK_700: r("black-700", "rgba(26, 26, 26, 0.7)"),
-  BLACK_800: r("black-800", "rgba(26, 26, 26, 0.8)"),
-  BLACK_900: r("black-900", "rgba(26, 26, 26, 1)"),
-  // Legacy aliases for backwards compatibility
-  BLACK: r("black-900", "#1a1a1a"),
-  BLACK_OPACITY_20: "rgba(26, 26, 26, 0.2)",
-  // Custom opacity not in CSS vars
-  // White scale
-  WHITE_50: r("white-50", "rgba(255, 255, 255, 0.05)"),
-  WHITE_100: r("white-100", "rgba(255, 255, 255, 0.1)"),
-  WHITE_200: r("white-200", "rgba(255, 255, 255, 0.2)"),
-  WHITE_300: r("white-300", "rgba(255, 255, 255, 0.3)"),
-  WHITE_400: r("white-400", "rgba(255, 255, 255, 0.4)"),
-  WHITE_500: r("white-500", "rgba(255, 255, 255, 0.5)"),
-  WHITE_600: r("white-600", "rgba(255, 255, 255, 0.6)"),
-  WHITE_700: r("white-700", "rgba(255, 255, 255, 0.7)"),
-  WHITE_800: r("white-800", "rgba(255, 255, 255, 0.8)"),
-  WHITE_900: r("white-900", "rgba(255, 255, 255, 1)"),
-  // Legacy alias
-  WHITE: r("white-900", "#ffffff"),
-  // Blue scale
-  BLUE_50: r("blue-50", "rgba(240, 249, 255, 1)"),
-  BLUE_100: r("blue-100", "rgba(225, 243, 254, 1)"),
-  BLUE_200: r("blue-200", "rgba(185, 229, 252, 1)"),
-  BLUE_300: r("blue-300", "rgba(125, 211, 251, 1)"),
-  BLUE_400: r("blue-400", "rgba(58, 190, 247, 1)"),
-  BLUE_500: r("blue-500", "rgba(27, 173, 240, 1)"),
-  BLUE_600: r("blue-600", "rgba(64, 114, 210, 1)"),
-  BLUE_700: r("blue-700", "rgba(3, 105, 159, 1)"),
-  BLUE_800: r("blue-800", "rgba(5, 69, 103, 1)"),
-  BLUE_900: r("blue-900", "rgba(4, 38, 63, 1)"),
-  // Legacy alias
-  BLUE: r("graph-primary-blue", "#2D9CDB"),
-  // Grey scale
-  GREY_50: r("grey-50", "rgba(248, 250, 252, 1)"),
-  GREY_100: r("grey-100", "rgba(241, 245, 249, 1)"),
-  GREY_200: r("grey-200", "rgba(225, 231, 239, 1)"),
-  GREY_300: r("grey-300", "rgba(200, 214, 229, 1)"),
-  GREY_400: r("grey-400", "rgba(158, 172, 192, 1)"),
-  GREY_500: r("grey-500", "rgba(100, 116, 139, 1)"),
-  GREY_600: r("grey-600", "rgba(72, 86, 106, 1)"),
-  GREY_700: r("grey-700", "rgba(51, 65, 86, 1)"),
-  GREY_800: r("grey-800", "rgba(29, 40, 57, 1)"),
-  GREY_900: r("grey-900", "rgba(20, 30, 53, 1)"),
-  // Legacy alias
-  GREY: r("grey-400", "#CCCCCC"),
-  // Graph primary colors
-  ORANGE: r("graph-primary-orange", "#FFA62E"),
-  RED: r("graph-primary-red", "#FF5C64"),
-  GREEN: r("graph-primary-green", "#A5C34E"),
-  YELLOW: r("graph-primary-yellow", "#FBED53"),
-  PURPLE: r("graph-primary-purple", "#7A51AB"),
-  // Semantic colors
-  GREEN_BG: r("green-bg", "rgba(234, 254, 229, 1)"),
-  GREEN_SUCCESS: r("green-success", "rgba(8, 173, 55, 1)"),
-  ORANGE_BG: r("orange-bg", "rgba(254, 250, 229, 1)"),
-  ORANGE_CAUTION: r("orange-caution", "rgba(249, 173, 20, 1)"),
-  RED_BG: r("red-bg", "rgba(254, 234, 229, 1)"),
-  RED_ERROR: r("red-error", "rgba(216, 35, 44, 1)"),
-  // Graph secondary colors
-  GRAPH_SECONDARY_BROWN: r("graph-secondary-brown", "#AD7942"),
-  GRAPH_SECONDARY_PINK: r("graph-secondary-pink", "#FB90B4"),
-  GRAPH_SECONDARY_TEAL: r("graph-secondary-teal", "#3CCABA"),
-  GRAPH_SECONDARY_DARK_BLUE: r("graph-secondary-dark-blue", "#4072D2"),
-  GRAPH_SECONDARY_BLACK: r("graph-secondary-black", "#424E62"),
-  GRAPH_SECONDARY_GREY: r("graph-secondary-grey", "#B4B4B4")
-}, A = [
+let F;
+const D = (t, e) => {
+  if (/^(#|rgb)/.test(t)) return t;
+  if (F === void 0) {
+    const E = document.createElement("canvas");
+    E.width = 1, E.height = 1, F = E.getContext("2d", { willReadFrequently: !0 });
+  }
+  if (!F) return e || t;
+  F.fillStyle = "#000", F.fillStyle = t;
+  const n = F.fillStyle;
+  if (F.fillStyle = "#fff", F.fillStyle = t, n !== F.fillStyle) return e || t;
+  F.clearRect(0, 0, 1, 1), F.fillRect(0, 0, 1, 1);
+  const [l, A, o, a] = F.getImageData(0, 0, 1, 1).data;
+  return a === 255 ? "#" + [l, A, o].map((E) => E.toString(16).padStart(2, "0")).join("") : `rgba(${l}, ${A}, ${o}, ${(a / 255).toFixed(3)})`;
+}, r = (t, e) => {
+  if (typeof window < "u") {
+    const l = getComputedStyle(document.documentElement).getPropertyValue("--" + t).trim();
+    return l ? D(l, e) : e || "";
+  }
+  const n = e ? ", " + e : "";
+  return "var(--" + t + n + ")";
+}, c = [
   r("chart-1", "#2F45B5"),
   // TS Blue 500
   r("chart-2", "#FD972F"),
@@ -103,19 +44,23 @@ const r = (e, E) => {
   // Sky Blue
   r("chart-12", "#882255")
   // Wine
-], a = (e, E) => E.map((g, C) => r(`${e}-${String(C + 1).padStart(2, "0")}`, g)), B = {
-  blue: a("chart-seq-blue", ["#F0F3FC", "#DCE3F8", "#C5D1F2", "#A9BCEC", "#8AA5E4", "#6C8DDB", "#5276D0", "#3D62C5", "#2F45B5", "#27399A", "#1F2D7E", "#172261"]),
-  teal: a("chart-seq-teal", ["#E8F8FA", "#CFF1F5", "#AFE7EF", "#88DAE6", "#5ECADA", "#34B9CC", "#1AA5BD", "#0BB6D0", "#099DB3", "#08899C", "#067282", "#055A66"]),
-  purple: a("chart-seq-purple", ["#F8EEFB", "#EFD8F4", "#E3BCEB", "#D49DE0", "#C27CD2", "#AD5DC3", "#9544B0", "#8243BA", "#6E2FA0", "#5A2487", "#481B6E", "#371454"])
-}, _ = {
-  blueOrange: a("chart-div-blue-orange", ["#1F3D9E", "#2F45B5", "#5276D0", "#7A95DD", "#A9BCEC", "#DCE3F8", "#FCE6CC", "#FACB99", "#F7AE63", "#FD972F", "#D87410", "#A6580A"]),
-  tealMagenta: a("chart-div-teal-magenta", ["#055A66", "#099DB3", "#34B9CC", "#88DAE6", "#CFF1F5", "#F0FAFB", "#FBEBF3", "#F0C8DE", "#E29EC2", "#CC79A7", "#A85585", "#7E3B62"]),
-  purpleYellowGreen: a("chart-div-purple-yellowgreen", ["#481B6E", "#8243BA", "#A767D0", "#C593E0", "#E3C5EE", "#F4E6F8", "#F2F7D9", "#DCEB9F", "#B8D266", "#8FB939", "#6E9A1F", "#527516"])
-};
+], i = (t, e) => e ?? c[t % c.length], C = (t, e) => e.map((n, l) => r(`${t}-${String(l + 1).padStart(2, "0")}`, n)), B = {
+  blue: C("chart-seq-blue", ["#F0F3FC", "#DCE3F8", "#C5D1F2", "#A9BCEC", "#8AA5E4", "#6C8DDB", "#5276D0", "#3D62C5", "#2F45B5", "#27399A", "#1F2D7E", "#172261"]),
+  teal: C("chart-seq-teal", ["#E8F8FA", "#CFF1F5", "#AFE7EF", "#88DAE6", "#5ECADA", "#34B9CC", "#1AA5BD", "#0BB6D0", "#099DB3", "#08899C", "#067282", "#055A66"]),
+  purple: C("chart-seq-purple", ["#F8EEFB", "#EFD8F4", "#E3BCEB", "#D49DE0", "#C27CD2", "#AD5DC3", "#9544B0", "#8243BA", "#6E2FA0", "#5A2487", "#481B6E", "#371454"])
+}, h = {
+  blueOrange: C("chart-div-blue-orange", ["#1F3D9E", "#2F45B5", "#5276D0", "#7A95DD", "#A9BCEC", "#DCE3F8", "#FCE6CC", "#FACB99", "#F7AE63", "#FD972F", "#D87410", "#A6580A"]),
+  tealMagenta: C("chart-div-teal-magenta", ["#055A66", "#099DB3", "#34B9CC", "#88DAE6", "#CFF1F5", "#F0FAFB", "#FBEBF3", "#F0C8DE", "#E29EC2", "#CC79A7", "#A85585", "#7E3B62"]),
+  purpleYellowGreen: C("chart-div-purple-yellowgreen", ["#481B6E", "#8243BA", "#A767D0", "#C593E0", "#E3C5EE", "#F4E6F8", "#F2F7D9", "#DCEB9F", "#B8D266", "#8FB939", "#6E9A1F", "#527516"])
+}, u = (t) => t.length === 0 ? [] : t.length === 1 ? [
+  [0, t[0]],
+  [1, t[0]]
+] : t.map((e, n) => [n / (t.length - 1), e]);
 export {
-  A as CHART_COLORS,
-  _ as CHART_DIVERGING,
+  c as CHART_COLORS,
+  h as CHART_DIVERGING,
   B as CHART_SEQUENTIAL,
-  b as COLORS
+  i as seriesColor,
+  u as toPlotlyColorscale
 };
 //# sourceMappingURL=colors.js.map

package/dist/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":["../../src/utils/colors.ts"],"sourcesContent":["/**\n * Centralized color system for TetraScience UI\n * This utility provides access to CSS variables defined in colors.css\n * while maintaining TypeScript support and IntelliSense\n */\n\n/**\n * Get a CSS variable value with optional fallback\n * @param cssVar - The CSS variable name (without --)\n * @param fallback - Optional fallback value\n * @returns The CSS variable value or fallback\n */\nconst getCSSVar = (cssVar: string, fallback?: string): string => {\n  if (typeof window !== \"undefined\") {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue(\"--\" + cssVar)\n      .trim();\n    return value || fallback || \"\";\n  }\n  const fallbackSuffix = fallback ? \", \" + fallback : \"\";\n  return \"var(--\" + cssVar + fallbackSuffix + \")\";\n};\n\n/**\n * Centralized color tokens that map to CSS variables\n * This provides TypeScript support while leveraging CSS custom properties\n */\nexport const COLORS = {\n  // Black scale\n  BLACK_50: getCSSVar(\"black-50\", \"rgba(26, 26, 26, 0.05)\"),\n  BLACK_100: getCSSVar(\"black-100\", \"rgba(26, 26, 26, 0.1)\"),\n  BLACK_200: getCSSVar(\"black-200\", \"rgba(26, 26, 26, 0.2)\"),\n  BLACK_300: getCSSVar(\"black-300\", \"rgba(26, 26, 26, 0.3)\"),\n  BLACK_400: getCSSVar(\"black-400\", \"rgba(26, 26, 26, 0.4)\"),\n  BLACK_500: getCSSVar(\"black-500\", \"rgba(26, 26, 26, 0.5)\"),\n  BLACK_600: getCSSVar(\"black-600\", \"rgba(26, 26, 26, 0.6)\"),\n  BLACK_700: getCSSVar(\"black-700\", \"rgba(26, 26, 26, 0.7)\"),\n  BLACK_800: getCSSVar(\"black-800\", \"rgba(26, 26, 26, 0.8)\"),\n  BLACK_900: getCSSVar(\"black-900\", \"rgba(26, 26, 26, 1)\"),\n\n  // Legacy aliases for backwards compatibility\n  BLACK: getCSSVar(\"black-900\", \"#1a1a1a\"),\n  BLACK_OPACITY_20: \"rgba(26, 26, 26, 0.2)\", // Custom opacity not in CSS vars\n\n  // White scale\n  WHITE_50: getCSSVar(\"white-50\", \"rgba(255, 255, 255, 0.05)\"),\n  WHITE_100: getCSSVar(\"white-100\", \"rgba(255, 255, 255, 0.1)\"),\n  WHITE_200: getCSSVar(\"white-200\", \"rgba(255, 255, 255, 0.2)\"),\n  WHITE_300: getCSSVar(\"white-300\", \"rgba(255, 255, 255, 0.3)\"),\n  WHITE_400: getCSSVar(\"white-400\", \"rgba(255, 255, 255, 0.4)\"),\n  WHITE_500: getCSSVar(\"white-500\", \"rgba(255, 255, 255, 0.5)\"),\n  WHITE_600: getCSSVar(\"white-600\", \"rgba(255, 255, 255, 0.6)\"),\n  WHITE_700: getCSSVar(\"white-700\", \"rgba(255, 255, 255, 0.7)\"),\n  WHITE_800: getCSSVar(\"white-800\", \"rgba(255, 255, 255, 0.8)\"),\n  WHITE_900: getCSSVar(\"white-900\", \"rgba(255, 255, 255, 1)\"),\n\n  // Legacy alias\n  WHITE: getCSSVar(\"white-900\", \"#ffffff\"),\n\n  // Blue scale\n  BLUE_50: getCSSVar(\"blue-50\", \"rgba(240, 249, 255, 1)\"),\n  BLUE_100: getCSSVar(\"blue-100\", \"rgba(225, 243, 254, 1)\"),\n  BLUE_200: getCSSVar(\"blue-200\", \"rgba(185, 229, 252, 1)\"),\n  BLUE_300: getCSSVar(\"blue-300\", \"rgba(125, 211, 251, 1)\"),\n  BLUE_400: getCSSVar(\"blue-400\", \"rgba(58, 190, 247, 1)\"),\n  BLUE_500: getCSSVar(\"blue-500\", \"rgba(27, 173, 240, 1)\"),\n  BLUE_600: getCSSVar(\"blue-600\", \"rgba(64, 114, 210, 1)\"),\n  BLUE_700: getCSSVar(\"blue-700\", \"rgba(3, 105, 159, 1)\"),\n  BLUE_800: getCSSVar(\"blue-800\", \"rgba(5, 69, 103, 1)\"),\n  BLUE_900: getCSSVar(\"blue-900\", \"rgba(4, 38, 63, 1)\"),\n\n  // Legacy alias\n  BLUE: getCSSVar(\"graph-primary-blue\", \"#2D9CDB\"),\n\n  // Grey scale\n  GREY_50: getCSSVar(\"grey-50\", \"rgba(248, 250, 252, 1)\"),\n  GREY_100: getCSSVar(\"grey-100\", \"rgba(241, 245, 249, 1)\"),\n  GREY_200: getCSSVar(\"grey-200\", \"rgba(225, 231, 239, 1)\"),\n  GREY_300: getCSSVar(\"grey-300\", \"rgba(200, 214, 229, 1)\"),\n  GREY_400: getCSSVar(\"grey-400\", \"rgba(158, 172, 192, 1)\"),\n  GREY_500: getCSSVar(\"grey-500\", \"rgba(100, 116, 139, 1)\"),\n  GREY_600: getCSSVar(\"grey-600\", \"rgba(72, 86, 106, 1)\"),\n  GREY_700: getCSSVar(\"grey-700\", \"rgba(51, 65, 86, 1)\"),\n  GREY_800: getCSSVar(\"grey-800\", \"rgba(29, 40, 57, 1)\"),\n  GREY_900: getCSSVar(\"grey-900\", \"rgba(20, 30, 53, 1)\"),\n\n  // Legacy alias\n  GREY: getCSSVar(\"grey-400\", \"#CCCCCC\"),\n\n  // Graph primary colors\n  ORANGE: getCSSVar(\"graph-primary-orange\", \"#FFA62E\"),\n  RED: getCSSVar(\"graph-primary-red\", \"#FF5C64\"),\n  GREEN: getCSSVar(\"graph-primary-green\", \"#A5C34E\"),\n  YELLOW: getCSSVar(\"graph-primary-yellow\", \"#FBED53\"),\n  PURPLE: getCSSVar(\"graph-primary-purple\", \"#7A51AB\"),\n\n  // Semantic colors\n  GREEN_BG: getCSSVar(\"green-bg\", \"rgba(234, 254, 229, 1)\"),\n  GREEN_SUCCESS: getCSSVar(\"green-success\", \"rgba(8, 173, 55, 1)\"),\n  ORANGE_BG: getCSSVar(\"orange-bg\", \"rgba(254, 250, 229, 1)\"),\n  ORANGE_CAUTION: getCSSVar(\"orange-caution\", \"rgba(249, 173, 20, 1)\"),\n  RED_BG: getCSSVar(\"red-bg\", \"rgba(254, 234, 229, 1)\"),\n  RED_ERROR: getCSSVar(\"red-error\", \"rgba(216, 35, 44, 1)\"),\n\n  // Graph secondary colors\n  GRAPH_SECONDARY_BROWN: getCSSVar(\"graph-secondary-brown\", \"#AD7942\"),\n  GRAPH_SECONDARY_PINK: getCSSVar(\"graph-secondary-pink\", \"#FB90B4\"),\n  GRAPH_SECONDARY_TEAL: getCSSVar(\"graph-secondary-teal\", \"#3CCABA\"),\n  GRAPH_SECONDARY_DARK_BLUE: getCSSVar(\"graph-secondary-dark-blue\", \"#4072D2\"),\n  GRAPH_SECONDARY_BLACK: getCSSVar(\"graph-secondary-black\", \"#424E62\"),\n  GRAPH_SECONDARY_GREY: getCSSVar(\"graph-secondary-grey\", \"#B4B4B4\"),\n} as const;\n\n/**\n * Chart color palette for consistent graph styling.\n *\n * CVD-friendly (deuteranopia / protanopia / tritanopia) categorical palette.\n * Single source of truth is the `--chart-1` … `--chart-12` CSS variables in\n * `index.tailwind.css`; the hex fallbacks below are used during SSR / before\n * the stylesheet resolves. Slots 1–8 are recommended; 9–12 are for sparing use\n * when more than 8 series are needed.\n */\nexport const CHART_COLORS = [\n  getCSSVar(\"chart-1\", \"#2F45B5\"), // TS Blue 500\n  getCSSVar(\"chart-2\", \"#FD972F\"), // Yellow Flax\n  getCSSVar(\"chart-3\", \"#038599\"), // Forest Green 300\n  getCSSVar(\"chart-4\", \"#E15759\"), // Imperial Red\n  getCSSVar(\"chart-5\", \"#8243BA\"), // Purple 500\n  getCSSVar(\"chart-6\", \"#94C2FF\"), // Light Blue 100\n  getCSSVar(\"chart-7\", \"#465364\"), // Stone Gray 300\n  getCSSVar(\"chart-8\", \"#F4D03F\"), // Soft Yellow\n  getCSSVar(\"chart-9\", \"#CC79A7\"), // Rose Pink\n  getCSSVar(\"chart-10\", \"#117733\"), // Dark Green\n  getCSSVar(\"chart-11\", \"#88CCEE\"), // Sky Blue\n  getCSSVar(\"chart-12\", \"#882255\"), // Wine\n] as const;\n\n/**\n * Build a continuous color ramp from the `--chart-{name}-01` … `-12` CSS\n * variables, falling back to the provided hex steps during SSR.\n */\nconst ramp = (name: string, fallbacks: readonly string[]): string[] =>\n  fallbacks.map((hex, i) => getCSSVar(`${name}-${String(i + 1).padStart(2, \"0\")}`, hex));\n\n/**\n * CVD-friendly sequential ramps (light → dark, anchored on brand).\n * 12 steps each — pass to a chart's colorscale / sequential interpolator.\n * Source of truth: `--chart-seq-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_SEQUENTIAL = {\n  blue: ramp(\"chart-seq-blue\", [\"#F0F3FC\", \"#DCE3F8\", \"#C5D1F2\", \"#A9BCEC\", \"#8AA5E4\", \"#6C8DDB\", \"#5276D0\", \"#3D62C5\", \"#2F45B5\", \"#27399A\", \"#1F2D7E\", \"#172261\"]),\n  teal: ramp(\"chart-seq-teal\", [\"#E8F8FA\", \"#CFF1F5\", \"#AFE7EF\", \"#88DAE6\", \"#5ECADA\", \"#34B9CC\", \"#1AA5BD\", \"#0BB6D0\", \"#099DB3\", \"#08899C\", \"#067282\", \"#055A66\"]),\n  purple: ramp(\"chart-seq-purple\", [\"#F8EEFB\", \"#EFD8F4\", \"#E3BCEB\", \"#D49DE0\", \"#C27CD2\", \"#AD5DC3\", \"#9544B0\", \"#8243BA\", \"#6E2FA0\", \"#5A2487\", \"#481B6E\", \"#371454\"]),\n} as const;\n\n/**\n * CVD-friendly diverging ramps (midpoint at step 06/07). Red/green pairings\n * are intentionally avoided (worst for deutan/protan).\n * Source of truth: `--chart-div-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_DIVERGING = {\n  blueOrange: ramp(\"chart-div-blue-orange\", [\"#1F3D9E\", \"#2F45B5\", \"#5276D0\", \"#7A95DD\", \"#A9BCEC\", \"#DCE3F8\", \"#FCE6CC\", \"#FACB99\", \"#F7AE63\", \"#FD972F\", \"#D87410\", \"#A6580A\"]),\n  tealMagenta: ramp(\"chart-div-teal-magenta\", [\"#055A66\", \"#099DB3\", \"#34B9CC\", \"#88DAE6\", \"#CFF1F5\", \"#F0FAFB\", \"#FBEBF3\", \"#F0C8DE\", \"#E29EC2\", \"#CC79A7\", \"#A85585\", \"#7E3B62\"]),\n  purpleYellowGreen: ramp(\"chart-div-purple-yellowgreen\", [\"#481B6E\", \"#8243BA\", \"#A767D0\", \"#C593E0\", \"#E3C5EE\", \"#F4E6F8\", \"#F2F7D9\", \"#DCEB9F\", \"#B8D266\", \"#8FB939\", \"#6E9A1F\", \"#527516\"]),\n} as const;\n\nexport type ColorToken = keyof typeof COLORS;\n"],"names":["getCSSVar","cssVar","fallback","fallbackSuffix","COLORS","CHART_COLORS","ramp","name","fallbacks","hex","i","CHART_SEQUENTIAL","CHART_DIVERGING"],"mappings":"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"}
+{"version":3,"file":"colors.js","sources":["../../src/utils/colors.ts"],"sourcesContent":["/**\n * Centralized chart color system for TetraScience UI\n * Resolves the CVD-friendly chart palette CSS variables defined in\n * `index.tailwind.css` into Plotly-parseable colors, with TypeScript\n * support and IntelliSense\n */\n\nlet colorProbe: CanvasRenderingContext2D | null | undefined;\n\nconst OPAQUE_ALPHA = 255;\n\n/**\n * Normalize a CSS color to a hex/rgba string that Plotly (tinycolor) can\n * parse. Tokens are declared in oklch, which tinycolor does not understand,\n * so resolved values are painted onto a 1×1 canvas and read back as sRGB\n * pixel values (the fillStyle getter alone won't do — browsers serialize\n * oklch back as oklch).\n */\nconst toPlotlySafeColor = (value: string, fallback?: string): string => {\n  if (/^(#|rgb)/.test(value)) return value;\n  if (colorProbe === undefined) {\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = 1;\n    canvas.height = 1;\n    colorProbe = canvas.getContext(\"2d\", { willReadFrequently: true });\n  }\n  if (!colorProbe) return fallback || value;\n  // An unparseable value leaves the previous fillStyle in place. Assigning it\n  // after two different sentinels distinguishes \"parsed\" (same result twice)\n  // from \"ignored\" (the sentinels leak through) without colliding with any\n  // legitimately black/white token.\n  colorProbe.fillStyle = \"#000\";\n  colorProbe.fillStyle = value;\n  const first = colorProbe.fillStyle;\n  colorProbe.fillStyle = \"#fff\";\n  colorProbe.fillStyle = value;\n  if (first !== colorProbe.fillStyle) return fallback || value;\n  colorProbe.clearRect(0, 0, 1, 1);\n  colorProbe.fillRect(0, 0, 1, 1);\n  const [r, g, b, a] = colorProbe.getImageData(0, 0, 1, 1).data;\n  if (a === OPAQUE_ALPHA) {\n    return (\n      \"#\" + [r, g, b].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")\n    );\n  }\n  return `rgba(${r}, ${g}, ${b}, ${(a / OPAQUE_ALPHA).toFixed(3)})`;\n};\n\n/**\n * Get a CSS variable value with optional fallback\n * @param cssVar - The CSS variable name (without --)\n * @param fallback - Optional fallback value\n * @returns The CSS variable value or fallback\n */\nconst getCSSVar = (cssVar: string, fallback?: string): string => {\n  if (typeof window !== \"undefined\") {\n    const value = getComputedStyle(document.documentElement)\n      .getPropertyValue(\"--\" + cssVar)\n      .trim();\n    if (!value) return fallback || \"\";\n    return toPlotlySafeColor(value, fallback);\n  }\n  const fallbackSuffix = fallback ? \", \" + fallback : \"\";\n  return \"var(--\" + cssVar + fallbackSuffix + \")\";\n};\n\n/**\n * Chart color palette for consistent graph styling.\n *\n * CVD-friendly (deuteranopia / protanopia / tritanopia) categorical palette.\n * Single source of truth is the `--chart-1` … `--chart-12` CSS variables in\n * `index.tailwind.css`; the hex fallbacks below are used during SSR / before\n * the stylesheet resolves. Slots 1–8 are recommended; 9–12 are for sparing use\n * when more than 8 series are needed.\n */\nexport const CHART_COLORS = [\n  getCSSVar(\"chart-1\", \"#2F45B5\"), // TS Blue 500\n  getCSSVar(\"chart-2\", \"#FD972F\"), // Yellow Flax\n  getCSSVar(\"chart-3\", \"#038599\"), // Forest Green 300\n  getCSSVar(\"chart-4\", \"#E15759\"), // Imperial Red\n  getCSSVar(\"chart-5\", \"#8243BA\"), // Purple 500\n  getCSSVar(\"chart-6\", \"#94C2FF\"), // Light Blue 100\n  getCSSVar(\"chart-7\", \"#465364\"), // Stone Gray 300\n  getCSSVar(\"chart-8\", \"#F4D03F\"), // Soft Yellow\n  getCSSVar(\"chart-9\", \"#CC79A7\"), // Rose Pink\n  getCSSVar(\"chart-10\", \"#117733\"), // Dark Green\n  getCSSVar(\"chart-11\", \"#88CCEE\"), // Sky Blue\n  getCSSVar(\"chart-12\", \"#882255\"), // Wine\n] as const;\n\n/**\n * Resolve the color for a data series: use the explicit color when one is\n * provided, otherwise cycle through the {@link CHART_COLORS} palette by series\n * index (wrapping around when there are more series than palette slots).\n *\n * @param index - Zero-based series index\n * @param explicit - Caller-provided color override, if any\n */\nexport const seriesColor = (index: number, explicit?: string | null): string =>\n  explicit ?? CHART_COLORS[index % CHART_COLORS.length];\n\n/**\n * Build a continuous color ramp from the `--chart-{name}-01` … `-12` CSS\n * variables, falling back to the provided hex steps during SSR.\n */\nconst ramp = (name: string, fallbacks: readonly string[]): string[] =>\n  fallbacks.map((hex, i) => getCSSVar(`${name}-${String(i + 1).padStart(2, \"0\")}`, hex));\n\n/**\n * CVD-friendly sequential ramps (light → dark, anchored on brand).\n * 12 steps each — pass to a chart's colorscale / sequential interpolator.\n * Source of truth: `--chart-seq-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_SEQUENTIAL = {\n  blue: ramp(\"chart-seq-blue\", [\"#F0F3FC\", \"#DCE3F8\", \"#C5D1F2\", \"#A9BCEC\", \"#8AA5E4\", \"#6C8DDB\", \"#5276D0\", \"#3D62C5\", \"#2F45B5\", \"#27399A\", \"#1F2D7E\", \"#172261\"]),\n  teal: ramp(\"chart-seq-teal\", [\"#E8F8FA\", \"#CFF1F5\", \"#AFE7EF\", \"#88DAE6\", \"#5ECADA\", \"#34B9CC\", \"#1AA5BD\", \"#0BB6D0\", \"#099DB3\", \"#08899C\", \"#067282\", \"#055A66\"]),\n  purple: ramp(\"chart-seq-purple\", [\"#F8EEFB\", \"#EFD8F4\", \"#E3BCEB\", \"#D49DE0\", \"#C27CD2\", \"#AD5DC3\", \"#9544B0\", \"#8243BA\", \"#6E2FA0\", \"#5A2487\", \"#481B6E\", \"#371454\"]),\n} as const;\n\n/**\n * CVD-friendly diverging ramps (midpoint at step 06/07). Red/green pairings\n * are intentionally avoided (worst for deutan/protan).\n * Source of truth: `--chart-div-*` CSS variables in `index.tailwind.css`.\n */\nexport const CHART_DIVERGING = {\n  blueOrange: ramp(\"chart-div-blue-orange\", [\"#1F3D9E\", \"#2F45B5\", \"#5276D0\", \"#7A95DD\", \"#A9BCEC\", \"#DCE3F8\", \"#FCE6CC\", \"#FACB99\", \"#F7AE63\", \"#FD972F\", \"#D87410\", \"#A6580A\"]),\n  tealMagenta: ramp(\"chart-div-teal-magenta\", [\"#055A66\", \"#099DB3\", \"#34B9CC\", \"#88DAE6\", \"#CFF1F5\", \"#F0FAFB\", \"#FBEBF3\", \"#F0C8DE\", \"#E29EC2\", \"#CC79A7\", \"#A85585\", \"#7E3B62\"]),\n  purpleYellowGreen: ramp(\"chart-div-purple-yellowgreen\", [\"#481B6E\", \"#8243BA\", \"#A767D0\", \"#C593E0\", \"#E3C5EE\", \"#F4E6F8\", \"#F2F7D9\", \"#DCEB9F\", \"#B8D266\", \"#8FB939\", \"#6E9A1F\", \"#527516\"]),\n} as const;\n\n/**\n * Convert a color ramp (e.g. `CHART_SEQUENTIAL.blue`, `CHART_DIVERGING.blueOrange`)\n * into Plotly's colorscale format: evenly spaced [position, color] stops.\n */\nexport const toPlotlyColorscale = (\n  ramp: readonly string[],\n): Array<[number, string]> => {\n  if (ramp.length === 0) return [];\n  if (ramp.length === 1) {\n    return [\n      [0, ramp[0]],\n      [1, ramp[0]],\n    ];\n  }\n  return ramp.map((color, i) => [i / (ramp.length - 1), color]);\n};\n"],"names":["colorProbe","toPlotlySafeColor","value","fallback","canvas","first","r","g","b","v","getCSSVar","cssVar","fallbackSuffix","CHART_COLORS","seriesColor","index","explicit","ramp","name","fallbacks","hex","i","CHART_SEQUENTIAL","CHART_DIVERGING","toPlotlyColorscale","color"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetrascience-npm/tetrascience-react-ui",
-  "version": "0.6.0-beta.81.1",
+  "version": "0.6.0-beta.83.1",
   "description": "TetraScience React UI",
   "type": "module",
   "author": "TetraScience",