@reshape-biotech/design-system 1.2.4 → 1.2.6

package/dist/components/button/Button.svelte

@@ -108,7 +108,7 @@
 
 .button:disabled {
 
-    background-color: #12192a0d;
+    background-color: #12192a0A;
 
     --tw-text-opacity: 1;
 
@@ -119,7 +119,7 @@
 
     cursor: not-allowed;
 
-    background-color: #12192a0d;
+    background-color: #12192a0A;
 
     --tw-text-opacity: 1;
 
@@ -133,7 +133,7 @@
 
 	.disabled:hover {
 
-    background-color: #12192a0d !important
+    background-color: #12192a0A !important
 }
 	/* Size variants */
 	.btn-size-xs {
@@ -205,7 +205,7 @@
 
 	.btn-secondary {
 
-    background-color: #12192a0d;
+    background-color: #12192a0A;
 
     --tw-text-opacity: 1;
 
@@ -219,7 +219,7 @@
 
 	.btn-secondary:active {
 
-    background-color: #12192a0d
+    background-color: #12192a0A
 }
 	.btn-transparent {
 
@@ -231,7 +231,7 @@
 }
 	.btn-transparent:hover {
 
-    background-color: #12192a0d
+    background-color: #12192a0A
 }
 	.btn-danger {
 
@@ -265,7 +265,7 @@
 
     border-color: #12192A26;
 
-    background-color: #12192a0d;
+    background-color: #12192a0A;
 
     --tw-text-opacity: 1;
 

package/dist/components/collapsible/components/collapsible-trigger.svelte

@@ -7,10 +7,10 @@
 </script>
 
 <Collapsible.Trigger {...props} class="transition-all {props.class}">
-	<div class="container">
+	<div class="container h-8">
 		{@render children()}
 		{#if withIcon}
-			<Icon iconName="CaretDown" class="icon z-[-1]" />
+			<Icon iconName="CaretDown" color="secondary" class="icon z-[-1] m-1" />
 		{/if}
 	</div>
 </Collapsible.Trigger>

package/dist/components/combobox/components/combobox-content.svelte

@@ -117,7 +117,7 @@
 }
 	:global([data-combobox-item][data-highlighted]) {
 
-    background-color: #12192a0d
+    background-color: #12192a0A
 }
 
 	:global([data-combobox-group-label]) {

package/dist/components/datepicker/DatePicker.svelte

@@ -181,9 +181,9 @@
 
     padding: 1rem;
 
-    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 0.5px rgba(18, 25, 42, 0.08);
+    --tw-shadow: 0 4px 20px 0 rgba(18, 25, 42, 0.06), 0 0 0 1px rgba(18, 25, 42, 0.08);
 
-    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 0.5px var(--tw-shadow-color);
+    --tw-shadow-colored: 0 4px 20px 0 var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }

package/dist/components/graphs/bar-chart/BarChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { textColor, borderColor } from '../../../tokens';
+	import { textColor, borderColor, backgroundColor, boxShadow, chartColor } from '../../../tokens';
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { EChartsOption, BarSeriesOption } from 'echarts';
 	import { createTooltipFormatter } from '../utils/tooltipFormatter';
@@ -29,13 +29,15 @@
 	}: BarChartProps = $props();
 
 	const defaultColors: Record<string, string> = {
-		blue: textColor['icon-blue'],
-		accent: textColor['icon-accent'],
-		orange: textColor['icon-orange'],
-		sky: textColor['icon-sky'],
-		lilac: textColor['icon-lilac'],
-		plum: textColor['icon-plum'],
-		pear: textColor['icon-pear']
+		accent: chartColor['accent'],
+		blue: chartColor['blue'],
+		orange: chartColor['orange'],
+		plum: chartColor['plum'],
+		sky: chartColor['sky'],
+		pear: chartColor['pear'],
+		pink: chartColor['pink'],
+		lilac: chartColor['lilac'],
+		lime: chartColor['lime']
 	};
 	const defaultColorRotationArray = $derived(Object.values(defaultColors));
 
@@ -55,7 +57,9 @@
 		value,
 		itemStyle: {
 			color,
-			borderRadius: [2, 2, 0, 0]
+			borderRadius: 2,
+			borderWidth: 0.5,
+			borderColor: borderColor['white']
 		},
 		emphasis: {
 			disabled: true
@@ -89,21 +93,24 @@
 	const options: EChartsOption = $derived.by(() => {
 		return {
 			tooltip: {
-				trigger: 'item',
+				trigger: 'axis',
 				axisPointer: {
-					type: 'shadow'
+					type: 'shadow',
+					shadowStyle: {
+						color: backgroundColor['neutral']
+					}
 				},
 				borderWidth: 0,
-				extraCssText: 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 8px;',
+				borderRadius: 6,
+				extraCssText: `box-shadow: ${boxShadow.menu}`,
 				formatter: formatTooltip
 			},
 			grid: {
 				containLabel: true,
-				left: '3%',
-				right: '4%',
-				bottom: '3%',
-				top: '10%',
-				...props.grid
+				left: 0,
+				right: 16,
+				bottom: 16,
+				top: 16
 			},
 			xAxis: {
 				type: 'category',
@@ -113,7 +120,7 @@
 					alignWithLabel: true
 				},
 				axisLabel: {
-					fontSize: 12,
+					fontSize: 11,
 					color: textColor['secondary'],
 					show: true,
 					...(rotateXAxisLabels
@@ -121,13 +128,15 @@
 						: { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 })
 				},
 				axisLine: {
-					show: false
+					lineStyle: {
+						color: borderColor['axis']
+					}
 				}
 			},
 			yAxis: {
 				type: 'value',
 				axisLabel: {
-					fontSize: 12,
+					fontSize: 11,
 					color: textColor['secondary']
 				},
 				axisLine: {
@@ -135,11 +144,15 @@
 				},
 				splitLine: {
 					lineStyle: {
-						color: borderColor['static'],
+						color: borderColor['input'],
 						type: 'dashed'
 					}
 				}
 			},
+			textStyle: {
+				color: textColor['secondary'],
+				fontFamily: 'af Another Sans'
+			},
 			series: chartSeries,
 			color: defaultColorRotationArray
 		};

package/dist/components/graphs/bar-chart/StackedBarChart.stories.svelte

@@ -12,7 +12,7 @@
 	const stackedChartProps = {
 		xAxisCategories: ['ID 1', 'ID 2', 'ID 3', 'ID 4'],
 		series: [
-			{ name: 'Halo', data: [120, 132, 101, 134] },
+			{ name: 'Halo', data: [100, 132, 101, 134] },
 			{ name: 'Spot', data: [220, 182, 191, 234] },
 			{ name: 'Microbial', data: [150, 232, 201, 154] }
 		]

package/dist/components/graphs/bar-chart/StackedBarChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { textColor, borderColor } from '../../../tokens';
+	import { textColor, borderColor, backgroundColor, chartColor, boxShadow } from '../../../tokens';
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { EChartsOption, BarSeriesOption } from 'echarts';
 	import type { CallbackDataParams } from 'echarts/types/dist/shared';
@@ -29,13 +29,15 @@
 	}: StackedBarChartProps = $props();
 
 	const defaultColors: Record<string, string> = {
-		blue: textColor['icon-blue'],
-		accent: textColor['icon-accent'],
-		orange: textColor['icon-orange'],
-		sky: textColor['icon-sky'],
-		lilac: textColor['icon-lilac'],
-		plum: textColor['icon-plum'],
-		pear: textColor['icon-pear']
+		accent: chartColor['accent'],
+		blue: chartColor['blue'],
+		orange: chartColor['orange'],
+		plum: chartColor['plum'],
+		sky: chartColor['sky'],
+		pear: chartColor['pear'],
+		pink: chartColor['pink'],
+		lilac: chartColor['lilac'],
+		lime: chartColor['lime']
 	};
 	const defaultColorRotationArray = $derived(Object.values(defaultColors));
 
@@ -55,7 +57,9 @@
 		value,
 		itemStyle: {
 			color,
-			borderRadius: [2, 2, 0, 0]
+			borderRadius: 2,
+			borderWidth: 0.5,
+			borderColor: borderColor['white']
 		},
 		emphasis: {
 			disabled: true
@@ -93,7 +97,7 @@
 		const firstParam = paramArray[0];
 		const categoryName = firstParam.name;
 
-		let tooltipContent = `<div style="font-weight:bold; margin-bottom: 5px;">${categoryName}</div>`;
+		let tooltipContent = `<div class="font-medium mb-1 text-primary">${categoryName}</div>`;
 
 		// Sort tooltip items by value descending for readability
 		paramArray.sort((a, b) => (b.value as number) - (a.value as number));
@@ -120,8 +124,8 @@
 				}
 			}
 
-			const marker = `<span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${color};"></span>`;
-			tooltipContent += `<div>${marker}${seriesName}: <span style="font-weight:500;">${value}</span></div>`;
+			const marker = `<span class="size-2 rounded-sm" style="background-color:${color}"></span>`;
+			tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span class="text-primary">${value}</span></div>`;
 		});
 
 		return tooltipContent;
@@ -132,19 +136,22 @@
 			tooltip: {
 				trigger: 'axis', // Trigger per category for stacked charts
 				axisPointer: {
-					type: 'none'
+					type: 'shadow',
+					shadowStyle: {
+						color: backgroundColor['neutral']
+					}
 				},
+				extraCssText: `box-shadow: ${boxShadow.menu}`,
 				borderWidth: 0,
-				extraCssText: 'box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 8px;',
+				borderRadius: 6,
 				formatter: formatTooltip
 			},
 			grid: {
 				containLabel: true,
-				left: '3%',
-				right: '4%',
-				bottom: '3%',
-				top: '10%',
-				...props.grid
+				left: 0,
+				right: 16,
+				bottom: 16,
+				top: 16
 			},
 			xAxis: {
 				type: 'category',
@@ -154,7 +161,7 @@
 					alignWithLabel: true
 				},
 				axisLabel: {
-					fontSize: 12,
+					fontSize: 11,
 					color: textColor['secondary'],
 					show: true,
 					...(rotateXAxisLabels
@@ -162,13 +169,15 @@
 						: { rotate: 0, overflow: 'truncate', ellipsis: '...', width: 80 })
 				},
 				axisLine: {
-					show: false
+					lineStyle: {
+						color: borderColor['axis']
+					}
 				}
 			},
 			yAxis: {
 				type: 'value',
 				axisLabel: {
-					fontSize: 12,
+					fontSize: 11,
 					color: textColor['secondary']
 				},
 				axisLine: {
@@ -176,11 +185,15 @@
 				},
 				splitLine: {
 					lineStyle: {
-						color: borderColor['static'],
+						color: borderColor['input'],
 						type: 'dashed'
 					}
 				}
 			},
+			textStyle: {
+				color: textColor['secondary'],
+				fontFamily: 'af Another Sans'
+			},
 			series: chartSeries,
 			color: defaultColorRotationArray
 		};

package/dist/components/graphs/chart/Chart.svelte

@@ -62,7 +62,6 @@
 				fontFamily: 'af Another Sans',
 				lineHeight: 14,
 				align: 'center',
-				fontWeight: 450,
 				color: textColor.secondary,
 				margin: 16
 			},
@@ -86,7 +85,6 @@
 				fontFamily: 'af Another Sans',
 				lineHeight: 14,
 				align: 'center',
-				fontWeight: 450,
 				color: textColor.secondary,
 				margin: 16
 			},

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -16,7 +16,7 @@
 	const data = [
 		10.0, 8.04, 8.07, 6.95, 13.0, 7.58, 9.05, 8.81, 11.0, 8.33, 14.0, 7.66, 13.4, 6.81, 10.0, 6.33,
 		14.0, 8.96, 12.5, 6.82, 9.15, 7.2, 11.5, 7.2, 3.03, 4.23, 12.2, 7.83, 2.02, 4.47, 1.05, 3.33,
-		4.05, 4.96, 6.03, 7.24, 12.0, 6.26, 12.0, 8.84, 7.08, 5.82, 5.02, 5.6
+		4.05, 4.96, 6.03, 7.24, 12.0, 6.26, 12.0, 8.84, 7.08, 5.82, 5.02
 	];
 
 	const bigData = Array.from({ length: 1000 }, (_, i) => i);

package/dist/components/graphs/line/LineChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { textColor } from '../../../tokens';
+	import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
 	import Chart from '../chart/Chart.svelte';
 	import type { EChartsOption } from 'echarts';
 	import * as echarts from 'echarts/core';
@@ -20,7 +20,7 @@
 		xAxisName,
 		yAxisName,
 		withArea = false,
-		color = textColor['icon-blue'],
+		color = chartColor['accent'],
 		captureInterval,
 		...props
 	}: LineChartProps = $props();
@@ -52,21 +52,27 @@
 
 	let options: EChartsOption = $derived({
 		grid: {
-			top: 10,
-			bottom: 10,
-			left: 10,
-			right: 10,
 			containLabel: true,
-			...props.grid
+			left: 0,
+			right: 16,
+			bottom: 16,
+			top: 16
 		},
 		textStyle: {
-			color: textColor['secondary']
+			color: textColor['secondary'],
+			fontFamily: 'af Another Sans'
 		},
 		xAxis: {
 			type: 'category',
 			boundaryGap: false,
+			axisLabel: {
+				fontSize: 11
+			},
 			axisLine: {
-				onZero: false
+				onZero: false,
+				lineStyle: {
+					color: borderColor['axis']
+				}
 			},
 			data: captureIntervals,
 			...props.xAxisOptions
@@ -82,19 +88,15 @@
 					formatter: (value: any) => toFixedLocaleString(value.value, 2)
 				}
 			},
-			...props.yAxisOptions
-		},
-		selectedMode: 'multiple',
-		tooltip: {
-			axisPointer: {
-				type: 'line',
+			splitLine: {
 				lineStyle: {
-					type: 'solid'
+					color: borderColor['input'],
+					type: 'dashed'
 				}
 			},
-			trigger: 'axis',
-			formatter: formatTooltip
+			...props.yAxisOptions
 		},
+		selectedMode: 'multiple',
 		series: {
 			type: 'line',
 			symbol: 'circle',
@@ -112,7 +114,7 @@
 						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 							{
 								offset: 0,
-								color: echarts.color.modifyAlpha(color, 0.4)
+								color: echarts.color.modifyAlpha(color, 0.2)
 							},
 							{
 								offset: 1,
@@ -121,8 +123,24 @@
 						])
 					}
 				: undefined
+		},
+		tooltip: {
+			axisPointer: {
+				type: 'line',
+				z: 0,
+				lineStyle: {
+					type: 'solid',
+					color: borderColor['axis']
+				}
+			},
+			trigger: 'axis',
+			borderWidth: 0,
+			borderRadius: 6,
+			extraCssText: `box-shadow: ${boxShadow.menu}`,
+			formatter: formatTooltip
 		}
 	});
+	console.log('LineChart options:', options);
 </script>
 
 <Chart

package/dist/components/graphs/multiline/MultiLineChart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { textColor } from '../../../tokens';
+	import { textColor, borderColor, chartColor, boxShadow } from '../../../tokens';
 	import Chart, { type GenericChartProps } from '../chart/Chart.svelte';
 	import type { ECElementEvent, EChartsOption, LineSeriesOption } from 'echarts';
 	import * as echarts from 'echarts/core';
@@ -65,13 +65,15 @@
 	}
 
 	const defaultColors: Record<string, string> = {
-		blue: textColor['icon-blue'],
-		accent: textColor['icon-accent'],
-		orange: textColor['icon-orange'],
-		sky: textColor['icon-sky'],
-		lilac: textColor['icon-lilac'],
-		plum: textColor['icon-plum'],
-		pear: textColor['icon-pear']
+		accent: chartColor['accent'],
+		blue: chartColor['blue'],
+		orange: chartColor['orange'],
+		plum: chartColor['plum'],
+		sky: chartColor['sky'],
+		pear: chartColor['pear'],
+		pink: chartColor['pink'],
+		lilac: chartColor['lilac'],
+		lime: chartColor['lime']
 	};
 	const defaultColorRotationArray = $derived(Object.values(defaultColors));
 
@@ -99,21 +101,27 @@
 
 	let options: EChartsOption = $derived.by(() => ({
 		grid: {
-			top: 10,
-			bottom: 0,
 			left: 0,
-			right: 0,
-			containLabel: true,
-			...props.grid
+			right: 16,
+			bottom: 16,
+			top: 16,
+			containLabel: true
 		},
 		textStyle: {
-			color: textColor['secondary']
+			color: textColor['secondary'],
+			fontFamily: 'af Another Sans'
 		},
 		xAxis: {
 			type: 'category',
 			boundaryGap: false,
+			axisLabel: {
+				fontSize: 11
+			},
 			axisLine: {
-				onZero: false
+				onZero: false,
+				lineStyle: {
+					color: borderColor['axis']
+				}
 			},
 			data: captureIntervals,
 			...props.xAxisOptions
@@ -129,6 +137,12 @@
 					formatter: (value: any) => toFixedLocaleString(value.value, 2)
 				}
 			},
+			splitLine: {
+				lineStyle: {
+					color: borderColor['input'],
+					type: 'dashed'
+				}
+			},
 			...props.yAxisOptions
 		},
 		selectedMode: 'multiple',
@@ -136,10 +150,12 @@
 			trigger: 'axis',
 			axisPointer: {
 				type: 'line',
+				z: 0,
 				lineStyle: {
 					type: 'solid'
 				}
 			},
+			extraCssText: `box-shadow: ${boxShadow.menu}`,
 			formatter: createTooltipFormatter({
 				yAxisName,
 				yAxisUnit: props.yAxisUnit ?? undefined,
@@ -169,8 +185,8 @@
 			// Determine visual style based on focusTargetKey
 			const isTargeted = focusTargetKey && group.key === focusTargetKey;
 			const isBlurred = focusTargetKey && !isTargeted;
-			const lineOpacity = isBlurred ? 0.3 : 1;
-			const areaOpacityBase = isBlurred ? 0.1 : 0.4; // Lower base opacity for blurred area
+			const lineOpacity = isBlurred ? 0.25 : 1;
+			const areaOpacityBase = isBlurred ? 0.1 : 0.2; // Lower base opacity for blurred area
 			const areaOpacityEnd = 0;
 
 			return {

package/dist/components/graphs/utils/tooltipFormatter.js

@@ -21,7 +21,7 @@ export const createTooltipFormatter = (config) => {
         const firstParam = paramArray[0];
         const categoryName = firstParam.name ?? ''; // X-axis value (category)
         const unit = config.yAxisUnit ?? '';
-        let tooltipContent = `<div style="font-weight:bold; margin-bottom: 5px;">${categoryName}</div>`;
+        let tooltipContent = `<div class="font-medium mb-1 text-primary">${categoryName}</div>`;
         const originalSeriesCount = paramArray.length;
         let seriesToShow = paramArray;
         if (originalSeriesCount > maxSeriesToShow) {
@@ -39,9 +39,9 @@ export const createTooltipFormatter = (config) => {
             }
             // Fallback color if still unresolved (should ideally not happen if configured correctly)
             color = color || textColor['icon-blue'];
-            const marker = `<span style="display:inline-block;margin-right:5px;border-radius:2px;width:8px;height:8px;background-color:${color}; vertical-align: baseline;"></span>`;
-            const valueString = `<span style="font-weight:500;">${toFixedLocaleString(value, 2)} ${unit}</span>`;
-            tooltipContent += `<div>${marker}${seriesName}: ${valueString}</div>`;
+            const marker = `<span class="size-2 rounded-sm" style="background-color:${color}"></span>`;
+            const valueString = `<span class="text-primary">${toFixedLocaleString(value, 2)} ${unit}</span>`;
+            tooltipContent += `<div class="flex items-center justify-between gap-4"><span class="flex items-center gap-2">${marker}${seriesName}</span><span>${valueString}</span></div>`;
         });
         if (originalSeriesCount > maxSeriesToShow) {
             const remainingCount = originalSeriesCount - maxSeriesToShow;

package/dist/components/icon-button/IconButton.svelte

@@ -88,7 +88,7 @@
     cursor: not-allowed
 }
 	.disabled:disabled {
-    background-color: #12192a0d;
+    background-color: #12192a0A;
     --tw-text-opacity: 1;
     color: rgb(136 140 148 / var(--tw-text-opacity, 1))
 }
@@ -141,7 +141,7 @@
     background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
 }
 	.color-secondary {
-    background-color: #12192a0d;
+    background-color: #12192a0A;
     --tw-text-opacity: 1;
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }
@@ -154,7 +154,7 @@
     color: rgb(89 94 106 / var(--tw-text-opacity, 1))
 }
 	.color-transparent:hover {
-    background-color: #12192a0d;
+    background-color: #12192a0A;
     --tw-text-opacity: 1;
     color: rgb(18 25 42 / var(--tw-text-opacity, 1))
 }

package/dist/components/icons/index.d.ts

@@ -1,10 +1,11 @@
 import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
-import type { textColor } from './../../tokens';
+import type { textColor, backgroundColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'CursorClick' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Ruler' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
+export type BackgroundClass = `bg-${keyof typeof backgroundColor}`;
 export type IconColor = keyof typeof textColor;
 export type SupportedAnalysisModelIcons = 'pipeline_halos' | 'pipeline_large_colonies' | 'pipeline_microbial_colonies' | 'pipeline_small_colonies' | 'sgs_enteros' | 'general_germination_rate_with_tracking' | 'general_germination_rate_without_tracking' | 'pipeline_insects' | 'pipeline_colony_formation' | 'pipeline_radial_growth' | 'syngenta_health_score_crw' | 'pipeline_seed_germination' | 'syngenta_health_score_faw' | 'syngenta_health_score_sbl' | 'unilever_cfu_count_lowres';
 export type SupportedPrincipalIcons = 'user' | 'group' | 'organization';