@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.36.1 → 0.5.0-beta.38.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.css +1 -1
  3. package/dist/index.d.ts +77 -0
  4. package/dist/index.js +144 -141
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.tailwind.css +1 -1
  7. package/dist/utils/colors.cjs +1 -1
  8. package/dist/utils/colors.cjs.map +1 -1
  9. package/dist/utils/colors.js +3 -2
  10. package/dist/utils/colors.js.map +1 -1
  11. package/package.json +1 -1
package/dist/utils/colors.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(e,g)=>{if(typeof window<"u")return getComputedStyle(document.documentElement).getPropertyValue("--"+e).trim()||g||"";const E=g?", "+g:"";return"var(--"+e+E+")"},a={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"),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")},b=[a.ORANGE,a.RED,a.GREEN,a.BLUE,a.YELLOW,a.PURPLE,a.GRAPH_SECONDARY_BROWN,a.GRAPH_SECONDARY_PINK,a.GRAPH_SECONDARY_TEAL,a.GRAPH_SECONDARY_DARK_BLUE,a.GRAPH_SECONDARY_BLACK,a.GRAPH_SECONDARY_GREY];exports.CHART_COLORS=b;exports.COLORS=a;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(e,g)=>{if(typeof window<"u")return getComputedStyle(document.documentElement).getPropertyValue("--"+e).trim()||g||"";const E=g?", "+g:"";return"var(--"+e+E+")"},a={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")},b=[a.ORANGE,a.RED,a.GREEN,a.BLUE,a.YELLOW,a.PURPLE,a.GRAPH_SECONDARY_BROWN,a.GRAPH_SECONDARY_PINK,a.GRAPH_SECONDARY_TEAL,a.GRAPH_SECONDARY_DARK_BLUE,a.GRAPH_SECONDARY_BLACK,a.GRAPH_SECONDARY_GREY];exports.CHART_COLORS=b;exports.COLORS=a;
2
2
  //# sourceMappingURL=colors.cjs.map
package/dist/utils/colors.cjs.map CHANGED
@@ -1 +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 * Uses the primary graph colors from the design system\n */\nexport const CHART_COLORS = [\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.GREEN,\n COLORS.BLUE,\n COLORS.YELLOW,\n COLORS.PURPLE,\n COLORS.GRAPH_SECONDARY_BROWN,\n COLORS.GRAPH_SECONDARY_PINK,\n COLORS.GRAPH_SECONDARY_TEAL,\n COLORS.GRAPH_SECONDARY_DARK_BLUE,\n COLORS.GRAPH_SECONDARY_BLACK,\n COLORS.GRAPH_SECONDARY_GREY,\n] as const;\n\nexport type ColorToken = keyof typeof COLORS;\n"],"names":["getCSSVar","cssVar","fallback","fallbackSuffix","COLORS","CHART_COLORS"],"mappings":"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"}
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 * Uses the primary graph colors from the design system\n */\nexport const CHART_COLORS = [\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.GREEN,\n COLORS.BLUE,\n COLORS.YELLOW,\n COLORS.PURPLE,\n COLORS.GRAPH_SECONDARY_BROWN,\n COLORS.GRAPH_SECONDARY_PINK,\n COLORS.GRAPH_SECONDARY_TEAL,\n COLORS.GRAPH_SECONDARY_DARK_BLUE,\n COLORS.GRAPH_SECONDARY_BLACK,\n COLORS.GRAPH_SECONDARY_GREY,\n] as const;\n\nexport type ColorToken = keyof typeof COLORS;\n"],"names":["getCSSVar","cssVar","fallback","fallbackSuffix","COLORS","CHART_COLORS"],"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,EAMaK,EAAe,CAC1BD,EAAO,OACPA,EAAO,IACPA,EAAO,MACPA,EAAO,KACPA,EAAO,OACPA,EAAO,OACPA,EAAO,sBACPA,EAAO,qBACPA,EAAO,qBACPA,EAAO,0BACPA,EAAO,sBACPA,EAAO,oBACT"}
package/dist/utils/colors.js CHANGED
@@ -17,6 +17,7 @@ const r = (E, g) => {
17
17
  BLACK_900: r("black-900", "rgba(26, 26, 26, 1)"),
18
18
  // Legacy aliases for backwards compatibility
19
19
  BLACK: r("black-900", "#1a1a1a"),
20
+ BLACK_OPACITY_20: "rgba(26, 26, 26, 0.2)",
20
21
  // Custom opacity not in CSS vars
21
22
  // White scale
22
23
  WHITE_50: r("white-50", "rgba(255, 255, 255, 0.05)"),
@@ -77,7 +78,7 @@ const r = (E, g) => {
77
78
  GRAPH_SECONDARY_DARK_BLUE: r("graph-secondary-dark-blue", "#4072D2"),
78
79
  GRAPH_SECONDARY_BLACK: r("graph-secondary-black", "#424E62"),
79
80
  GRAPH_SECONDARY_GREY: r("graph-secondary-grey", "#B4B4B4")
80
- }, _ = [
81
+ }, b = [
81
82
  a.ORANGE,
82
83
  a.RED,
83
84
  a.GREEN,
@@ -92,7 +93,7 @@ const r = (E, g) => {
92
93
  a.GRAPH_SECONDARY_GREY
93
94
  ];
94
95
  export {
95
- _ as CHART_COLORS,
96
+ b as CHART_COLORS,
96
97
  a as COLORS
97
98
  };
98
99
  //# sourceMappingURL=colors.js.map
package/dist/utils/colors.js.map CHANGED
@@ -1 +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 * Uses the primary graph colors from the design system\n */\nexport const CHART_COLORS = [\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.GREEN,\n COLORS.BLUE,\n COLORS.YELLOW,\n COLORS.PURPLE,\n COLORS.GRAPH_SECONDARY_BROWN,\n COLORS.GRAPH_SECONDARY_PINK,\n COLORS.GRAPH_SECONDARY_TEAL,\n COLORS.GRAPH_SECONDARY_DARK_BLUE,\n COLORS.GRAPH_SECONDARY_BLACK,\n COLORS.GRAPH_SECONDARY_GREY,\n] as const;\n\nexport type ColorToken = keyof typeof COLORS;\n"],"names":["getCSSVar","cssVar","fallback","fallbackSuffix","COLORS","CHART_COLORS"],"mappings":"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"}
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 * Uses the primary graph colors from the design system\n */\nexport const CHART_COLORS = [\n COLORS.ORANGE,\n COLORS.RED,\n COLORS.GREEN,\n COLORS.BLUE,\n COLORS.YELLOW,\n COLORS.PURPLE,\n COLORS.GRAPH_SECONDARY_BROWN,\n COLORS.GRAPH_SECONDARY_PINK,\n COLORS.GRAPH_SECONDARY_TEAL,\n COLORS.GRAPH_SECONDARY_DARK_BLUE,\n COLORS.GRAPH_SECONDARY_BLACK,\n COLORS.GRAPH_SECONDARY_GREY,\n] as const;\n\nexport type ColorToken = keyof typeof COLORS;\n"],"names":["getCSSVar","cssVar","fallback","fallbackSuffix","COLORS","CHART_COLORS"],"mappings":"AAYA,MAAMA,IAAY,CAACC,GAAgBC,MAA8B;AAC/D,MAAI,OAAO,SAAW;AAIpB,WAHc,iBAAiB,SAAS,eAAe,EACpD,iBAAiB,OAAOD,CAAM,EAC9B,KAAA,KACaC,KAAY;AAE9B,QAAMC,IAAiBD,IAAW,OAAOA,IAAW;AACpD,SAAO,WAAWD,IAASE,IAAiB;AAC9C,GAMaC,IAAS;AAAA;AAAA,EAEpB,UAAUJ,EAAU,YAAY,wBAAwB;AAAA,EACxD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,uBAAuB;AAAA,EACzD,WAAWA,EAAU,aAAa,qBAAqB;AAAA;AAAA,EAGvD,OAAOA,EAAU,aAAa,SAAS;AAAA,EACvC,kBAAkB;AAAA;AAAA;AAAA,EAGlB,UAAUA,EAAU,YAAY,2BAA2B;AAAA,EAC3D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,0BAA0B;AAAA,EAC5D,WAAWA,EAAU,aAAa,wBAAwB;AAAA;AAAA,EAG1D,OAAOA,EAAU,aAAa,SAAS;AAAA;AAAA,EAGvC,SAASA,EAAU,WAAW,wBAAwB;AAAA,EACtD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,uBAAuB;AAAA,EACvD,UAAUA,EAAU,YAAY,uBAAuB;AAAA,EACvD,UAAUA,EAAU,YAAY,uBAAuB;AAAA,EACvD,UAAUA,EAAU,YAAY,sBAAsB;AAAA,EACtD,UAAUA,EAAU,YAAY,qBAAqB;AAAA,EACrD,UAAUA,EAAU,YAAY,oBAAoB;AAAA;AAAA,EAGpD,MAAMA,EAAU,sBAAsB,SAAS;AAAA;AAAA,EAG/C,SAASA,EAAU,WAAW,wBAAwB;AAAA,EACtD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,UAAUA,EAAU,YAAY,sBAAsB;AAAA,EACtD,UAAUA,EAAU,YAAY,qBAAqB;AAAA,EACrD,UAAUA,EAAU,YAAY,qBAAqB;AAAA,EACrD,UAAUA,EAAU,YAAY,qBAAqB;AAAA;AAAA,EAGrD,MAAMA,EAAU,YAAY,SAAS;AAAA;AAAA,EAGrC,QAAQA,EAAU,wBAAwB,SAAS;AAAA,EACnD,KAAKA,EAAU,qBAAqB,SAAS;AAAA,EAC7C,OAAOA,EAAU,uBAAuB,SAAS;AAAA,EACjD,QAAQA,EAAU,wBAAwB,SAAS;AAAA,EACnD,QAAQA,EAAU,wBAAwB,SAAS;AAAA;AAAA,EAGnD,UAAUA,EAAU,YAAY,wBAAwB;AAAA,EACxD,eAAeA,EAAU,iBAAiB,qBAAqB;AAAA,EAC/D,WAAWA,EAAU,aAAa,wBAAwB;AAAA,EAC1D,gBAAgBA,EAAU,kBAAkB,uBAAuB;AAAA,EACnE,QAAQA,EAAU,UAAU,wBAAwB;AAAA,EACpD,WAAWA,EAAU,aAAa,sBAAsB;AAAA;AAAA,EAGxD,uBAAuBA,EAAU,yBAAyB,SAAS;AAAA,EACnE,sBAAsBA,EAAU,wBAAwB,SAAS;AAAA,EACjE,sBAAsBA,EAAU,wBAAwB,SAAS;AAAA,EACjE,2BAA2BA,EAAU,6BAA6B,SAAS;AAAA,EAC3E,uBAAuBA,EAAU,yBAAyB,SAAS;AAAA,EACnE,sBAAsBA,EAAU,wBAAwB,SAAS;AACnE,GAMaK,IAAe;AAAA,EAC1BD,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AAAA,EACPA,EAAO;AACT;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tetrascience-npm/tetrascience-react-ui",
3
- "version": "0.5.0-beta.36.1",
3
+ "version": "0.5.0-beta.38.1",
4
4
  "description": "TetraScience React UI",
5
5
  "type": "module",
6
6
  "author": "TetraScience",