add support for more colors

Author: lovasoa

demo/spreadsheet.sql

@@ -9,7 +9,8 @@ select 'spreadsheet' as component,
 select 
   row_number() over (order by created_at) as x,
   0 as y,
-  id as value
+  id as value,
+  '#80cbc4' as color -- light teal
 from todos
 order by created_at;
 
@@ -26,6 +27,14 @@ with recursive n(n) as (
     union all
     select n + 1 from n
   )
-select n+5 as y , 4 as x, n as value, true as bold, true as italic, true as center, 'cyan' as color, '### ##0.00 €' as number_format
+select 
+  n+5 as y ,
+  4 as x, 
+  n as value, 
+  true as bold, 
+  true as italic, 
+  true as center, 
+  'pink-lt' as color, 
+  '### ##0.00 €' as number_format
 from n
 limit 100;

src/spreadsheet.ts

@@ -180,19 +180,18 @@ async function handleUpdate(
 	}
 }
 
+const CSS_VARS = getComputedStyle(document.documentElement);
+
 function cellFromProps(props: CellProps[]) {
 	const s: IStyleData & { id?: string } = {};
 	for (let i = 0; i < props.length; i++) {
 		const n = props[i];
 		if (n === 1) s.bl = 1;
 		else if (n === 2) s.it = 1;
 		else if (n === 3) {
-			const color = props[++i];
-			s.bg = {
-				rgb: getComputedStyle(document.documentElement).getPropertyValue(
-					`--tblr-${color}`,
-				),
-			};
+			const color = props[++i].toString();
+			const rgb = CSS_VARS.getPropertyValue(`--tblr-${color}`) || color;
+			s.bg = { rgb };
 		} else if (n === 4) s.ht = 2;
 		else if (n === 5) s.ht = 3;
 		else if (n === 6) {
@@ -253,7 +252,7 @@ async function renderSpreadsheet(
 	setFrozenCells(univerAPI, activeSheet, freeze_x, freeze_y);
 
 	univerAPI.onCommandExecuted(({ id, params }) => {
-		console.log(id, params);
+		// To debug: console.log(id, params);
 		const set_range: typeof SetRangeValuesMutation.id =
 			"sheet.mutation.set-range-values";
 		if (id === set_range) {