@reshape-biotech/design-system 1.2.4 → 1.2.5

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/manual-cfu-counter/ManualCFUCounter.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { Button } from '../button';
-	import { textColor } from '../../tokens';
+	import { textColor, borderColor } from '../../tokens';
 	import { Icon } from '../icons';
 	import IconButton from '../icon-button/IconButton.svelte';
 	import Divider from '../divider/Divider.svelte';
@@ -14,6 +14,7 @@
 	const MIN_ZOOM = 1;
 	const ZOOM_STEP = 0.001;
 	const MARKER_COLOR = textColor['icon-blue'] || '#2563eb';
+	const MARKER_BORDER_COLOR = borderColor['interactive'] || '#12192A1A';
 	const TEXT_COLOR = textColor['primary-inverse'];
 	const DRAG_THRESHOLD = 5;
 
@@ -219,6 +220,9 @@
 			circle.setAttribute('r', String(adjustedMarkerSize));
 			circle.setAttribute('fill', MARKER_COLOR);
 			circle.setAttribute('class', 'drop-shadow-sm');
+			circle.setAttribute('opacity', '0.75');
+			circle.setAttribute('stroke', MARKER_BORDER_COLOR);
+			circle.setAttribute('stroke-width', String(1 / transform.scale));
 			group.appendChild(circle);
 
 			const text = document.createElementNS(svgns, 'text');

package/dist/components/select-new/components/SelectItem.svelte

@@ -3,7 +3,7 @@
 	import type { ItemProps, ItemSlotProps } from '../types';
 
 	import type { Snippet } from 'svelte';
-	import Check from 'phosphor-svelte/lib/Check';
+	import Icon from '../../icons/Icon.svelte';
 
 	interface Props extends ItemProps {
 		children?: Snippet<[ItemSlotProps]>;
@@ -13,10 +13,10 @@
 	let { class: className = '', children, ...restProps }: Props = $props();
 
 	const baseClasses = `
-        relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none 
-        focus:bg-accent focus:text-accent-foreground 
+        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none 
+        focus:bg-neutral focus:text-accent-foreground 
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-        data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
+        data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground
     `;
 </script>
 
@@ -33,9 +33,7 @@
 			>
 		{/if}
 		{#if params.selected}
-			<span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-				<Check class="h-4 w-4" />
-			</span>
+			<Icon iconName="Check" color="accent" />
 		{/if}
 	{/snippet}
 </SelectPrimitive.Item>

package/dist/components/select-new/components/SelectTrigger.svelte

@@ -23,7 +23,7 @@
 	}: Props = $props();
 
 	const baseClasses =
-		'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
+		'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-surface p-2 text-sm placeholder:text-tertiary focus:outline-none hover:border-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-50 transition-colors shadow-input';
 </script>
 
 <SelectPrimitive.Trigger
@@ -43,6 +43,6 @@
 	{#if TriggerIcon}
 		{@render TriggerIcon()}
 	{:else}
-		<Icon iconName="CaretDown" class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+		<Icon iconName="CaretDown" color="secondary" class="mx-1 shrink-0" />
 	{/if}
 </SelectPrimitive.Trigger>

package/dist/components/slider/Slider.svelte

@@ -78,7 +78,7 @@
 		border-radius: 9999px;
 		border-width: 1px;
 		border-color: #12192a14;
-		background-color: #12192a0d;
+		background-color: #12192a0A;
 }
 
 	.thumb-overlay {

package/dist/components/stat-card/StatCard.svelte

@@ -114,7 +114,7 @@
 			</Tooltip>
 		{/if}
 	</p>
-	<div class="flex h-10 w-full items-center gap-1">
+	<div class="flex h-8 w-full items-center gap-1">
 		{#if value !== null}
 			{#if isEditing}
 				<div class="flex-1">

package/dist/components/status-badge/StatusBadge.svelte

@@ -83,7 +83,7 @@
 }
 
 	.badge-neutral {
-    background-color: #12192a0d
+    background-color: #12192a0A
 }
 
 	.badge-neutral:hover {

package/dist/components/stepper/components/stepper-step.svelte

@@ -92,7 +92,7 @@
 		content: '';
 		position: absolute;
 		width: 1px;
-		background-color: #12192a0d;
+		background-color: #12192a0A;
 		left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
 		top: 2.25rem;
 		height: 2.25rem;

package/dist/components/tag/Tag.svelte

@@ -19,7 +19,7 @@
 			| 'accent'
 			| 'success'
 			| 'warning';
-		size?: 'sm' | 'md';
+		size?: 'xs' | 'sm' | 'md';
 		tooltip?: string;
 		onclick?: (event: MouseEvent) => void;
 		class?: string;
@@ -35,6 +35,7 @@
 	}: Props = $props();
 
 	const sizes = {
+		xs: 'h-5 text-xs p-1',
 		sm: 'h-6 text-xs p-1.5',
 		md: 'h-7 text-sm p-2'
 	};

package/dist/components/tag/Tag.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
     variant?: 'default' | 'outline' | 'transparent' | 'default-inverse' | 'orange' | 'sky' | 'pink' | 'lime' | 'lilac' | 'pear' | 'blue' | 'accent' | 'success' | 'warning';
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
     tooltip?: string;
     onclick?: (event: MouseEvent) => void;
     class?: string;

package/dist/tailwind.preset.d.ts

@@ -366,6 +366,8 @@ declare const config: {
                 danger: string;
                 'static-inverse': string;
                 'interactive-inverse': string;
+                white: string;
+                axis: string;
             };
             textColor: {
                 'icon-primary': string;

package/dist/tokens.d.ts

@@ -259,6 +259,8 @@ export declare const borderColor: {
     danger: string;
     'static-inverse': string;
     'interactive-inverse': string;
+    white: string;
+    axis: string;
 };
 export declare const textColor: {
     'icon-primary': string;
@@ -418,6 +420,21 @@ export declare const backgroundColor: {
     'pear-inverse': string;
     'pear-inverse-hover': string;
 };
+export declare const chartColor: {
+    accent: string;
+    blue: string;
+    orange: string;
+    sky: string;
+    pink: string;
+    plum: string;
+    lilac: string;
+    lime: string;
+    pear: string;
+    green: string;
+    yellow: string;
+    red: string;
+    gray: string;
+};
 export declare const outlineColor: {
     'dark-static': string;
     'dark-input': string;
@@ -697,6 +714,8 @@ export declare const tokens: {
         danger: string;
         'static-inverse': string;
         'interactive-inverse': string;
+        white: string;
+        axis: string;
     };
     textColor: {
         'icon-primary': string;
@@ -873,4 +892,19 @@ export declare const tokens: {
         hover: string;
         focus: string;
     };
+    chartColor: {
+        accent: string;
+        blue: string;
+        orange: string;
+        sky: string;
+        pink: string;
+        plum: string;
+        lilac: string;
+        lime: string;
+        pear: string;
+        green: string;
+        yellow: string;
+        red: string;
+        gray: string;
+    };
 };

package/dist/tokens.js

@@ -14,7 +14,7 @@ export const colors = {
         },
         midnight: {
             default: '#12192a',
-            5: '#12192a0d',
+            5: '#12192a0A',
             8: '#12192a14',
             10: '#12192A1A',
             15: '#12192A26',
@@ -185,7 +185,9 @@ const lightBorderColor = {
     focus: colors.periwinkle[5].default,
     danger: colors.red[5].default,
     'static-inverse': colors.base.white[10],
-    'interactive-inverse': colors.base.white[15]
+    'interactive-inverse': colors.base.white[15],
+    white: colors.base.white.default,
+    axis: colors.gray[3]
 };
 const lightOutlineColor = {
     static: colors.base.midnight[8],
@@ -255,6 +257,21 @@ const lightBackgroundColor = {
     'pear-inverse': colors.pear[5].default,
     'pear-inverse-hover': colors.pear[6]
 };
+const lightChartColor = {
+    accent: colors.periwinkle[5].default,
+    blue: colors.blue[5].default,
+    orange: colors.orange[5].default,
+    sky: colors.sky[5].default,
+    pink: colors.pink[5].default,
+    plum: colors.plum[5].default,
+    lilac: colors.lilac[5].default,
+    lime: colors.lime[5].default,
+    pear: colors.pear[5].default,
+    green: colors.green[5].default,
+    yellow: colors.yellow[5].default,
+    red: colors.red[5].default,
+    gray: colors.gray[5]
+};
 const darkTextColor = {
     'dark-primary': colors.base.white.default,
     'dark-secondary': colors.gray[3],
@@ -367,6 +384,9 @@ export const backgroundColor = {
     ...lightBackgroundColor,
     ...darkBackgroundColor
 };
+export const chartColor = {
+    ...lightChartColor
+};
 export const outlineColor = {
     ...lightOutlineColor,
     ...darkOutlineColor
@@ -374,7 +394,7 @@ export const outlineColor = {
 export const boxShadow = {
     input: `0 1px 4px 0 ${colors.shadow[4]}`,
     container: `0 2px 16px 0 ${colors.shadow[2]}`,
-    menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 0.5px ${colors.shadow[8]}`
+    menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`
 };
 export const tokens = {
     colors,
@@ -382,5 +402,6 @@ export const tokens = {
     textColor,
     backgroundColor,
     boxShadow,
-    outlineColor
+    outlineColor,
+    chartColor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "1.2.4",
+	"version": "1.2.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",