Clean up CSS

Rafferty97 · Rafferty97 · commit 9f30610d2449 · 2026-02-07T11:53:46.000+11:00
diff --git a/TODO b/TODO
@@ -1,3 +1,2 @@
 - Extract out context menu
-- Extract out cell content
-- Permit customisation via CSS variables
+- Extract out cell content
diff --git a/src/components/CellContent.css b/src/components/CellContent.css
@@ -32,7 +32,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: white;
+    background-color: var(--solid-tabular-cell-color);
     padding: 0.25rem;
     outline: none;
     border: none;
diff --git a/src/components/CellContent.tsx b/src/components/CellContent.tsx
@@ -32,7 +32,7 @@ export const textContent =
       <div
         onDblClick={handleDoubleClick}
         class="solid-tabular/text-content"
-        style={{ color: format.color ?? 'black' }}
+        style={{ color: format.color ?? 'inherit' }}
       >
         {format.prefix?.(props.value)}
         <div
diff --git a/src/components/Renameable.css b/src/components/Renameable.css
@@ -9,10 +9,6 @@
     text-overflow: ellipsis;
     white-space: pre;
     user-select: none;
-
-    &.solid-tabular\/empty {
-      color: oklch(70.7% 0.022 261.325); /* gray-400 */
-    }
   }
 
   input {
@@ -32,8 +28,12 @@
     &[data-visible='true'] {
       width: auto;
       border-radius: 4px;
-      background-color: white;
+      background-color: var(--solid-tabular-cell-color);
       padding: 0.25rem;
     }
   }
 }
+
+.solid-tabular\/placeholder {
+  color: var(--solid-tabular-placeholder-color);
+}
diff --git a/src/components/Renameable.tsx b/src/components/Renameable.tsx
@@ -89,7 +89,7 @@ export function Renameable(props: RenameableProps) {
       onDblClick={handleDblClick}
       ref={containerEl}
     >
-      <div class={cn({ 'solid-tabular/empty': !props.value.length })} title={shownValue()}>
+      <div class={cn({ 'solid-tabular/placeholder': !props.value.length })} title={shownValue()}>
         {shownValue()}
       </div>
       <input
diff --git a/src/components/ResizeBar.css b/src/components/ResizeBar.css
@@ -19,7 +19,7 @@
   > div {
     opacity: 0;
     transition: opacity 0.15s;
-    background-color: var(--solid-tabular-outline-color, black);
+    background-color: var(--solid-tabular-accent-color);
   }
 
   &:hover > div,
diff --git a/src/table/AddColumnButton.css b/src/table/AddColumnButton.css
@@ -8,14 +8,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
+    border: 1px solid var(--solid-tabular-border-color);
     border-top: none;
-    background-color: white;
+    background-color: var(--solid-tabular-cell-color);
     padding: 0.25rem 0;
     box-sizing: border-box;
 
     &:hover {
-      background-color: oklch(96.7% 0.003 264.542); /* gray-100 */
+      background-color: var(--solid-tabular-cell-hover-color);
     }
   }
 }
diff --git a/src/table/AddRowButton.css b/src/table/AddRowButton.css
@@ -2,13 +2,13 @@
   display: flex;
   margin: -6px 0 6px 0;
   cursor: pointer;
-  border-top: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-  background-color: white;
+  border-top: 1px solid var(--solid-tabular-border-color);
+  background-color: var(--solid-tabular-cell-color);
   z-index: 40;
   box-sizing: border-box;
 
   &:hover {
-    background-color: oklch(96.7% 0.003 264.542); /* gray-100 */
+    background-color: var(--solid-tabular-cell-hover-color);
   }
 
   > :first-child {
@@ -24,7 +24,6 @@
     .solid-tabular\/plus-btn {
       padding-right: 0.5rem;
       text-align: right;
-      color: oklch(70.7% 0.022 261.325); /* gray-400 */
       box-sizing: border-box;
     }
 
diff --git a/src/table/Cell.css b/src/table/Cell.css
@@ -4,13 +4,6 @@
   height: 100%;
   align-items: center;
   outline: none;
-
-  /* .null {
-    width: 100%;
-    text-align: center;
-    font-style: italic;
-    color: oklch(87.2% 0.01 258.338); /* gray-300 * /
-  } */
 }
 
 .solid-tabular\/cell-input-container {
diff --git a/src/table/ColumnHeader.css b/src/table/ColumnHeader.css
@@ -1,9 +1,9 @@
 .solid-tabular\/column-header {
   position: absolute;
   top: 0;
-  border-left: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-  border-bottom: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-  background-color: white;
+  border-left: 1px solid var(--solid-tabular-border-color);
+  border-bottom: 1px solid var(--solid-tabular-border-color);
+  background-color: var(--solid-tabular-cell-color);
   box-sizing: border-box;
 
   > :first-child {
diff --git a/src/table/RowHeader.css b/src/table/RowHeader.css
@@ -5,11 +5,11 @@
   display: flex;
   align-items: center;
   justify-content: end;
-  border-top: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-  border-right: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-  background-color: white;
+  border-top: 1px solid var(--solid-tabular-border-color);
+  border-right: 1px solid var(--solid-tabular-border-color);
+  background-color: var(--solid-tabular-cell-color);
   padding: 0.25rem 0.5rem 0.25rem 0;
-  color: oklch(70.7% 0.022 261.325); /* gray-400 */
   box-sizing: border-box;
+  color: var(--solid-tabular-rownum-color, inherit);
   font-size: var(--solid-tabular-font-size-row-num, inherit);
 }
diff --git a/src/table/Table.css b/src/table/Table.css
@@ -1,3 +1,14 @@
+:root {
+  --solid-tabular-bg-color: oklch(92.8% 0.006 264.531);
+  --solid-tabular-text-color: black;
+  --solid-tabular-cell-color: white;
+  --solid-tabular-cell-hover-color: oklch(96.7% 0.003 264.542);
+  --solid-tabular-border-color: oklch(87.2% 0.01 258.338);
+  --solid-tabular-placeholder-color: oklch(70.7% 0.022 261.325);
+  --solid-tabular-accent-color: rgb(83, 83, 223);
+  --solid-tabular-font-size-row-num: 1em;
+}
+
 .solid-tabular\/table {
   position: relative;
   width: 100%;
@@ -6,8 +17,9 @@
   contain: strict;
   outline: none;
   user-select: none;
-  background-color: oklch(92.8% 0.006 264.531); /* gray-200 */
   text-align: left;
+  background-color: var(--solid-tabular-bg-color);
+  color: var(--solid-tabular-text-color);
 
   .solid-tabular\/focus-proxy {
     position: absolute;
@@ -26,12 +38,12 @@
       display: flex;
       align-items: center;
       justify-content: end;
-      border-right: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-      border-bottom: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-      background-color: white;
+      border-right: 1px solid var(--solid-tabular-border-color);
+      border-bottom: 1px solid var(--solid-tabular-border-color);
       padding: 0.25rem 0.5rem 0.25rem 0;
-      color: oklch(70.7% 0.022 261.325); /* gray-400 */
       box-sizing: border-box;
+      background-color: var(--solid-tabular-cell-color);
+      color: var(--solid-tabular-rownum-color, inherit);
       font-size: var(--solid-tabular-font-size-row-num, inherit);
     }
   }
diff --git a/src/table/Table.tsx b/src/table/Table.tsx
@@ -28,6 +28,7 @@ import { isEqual } from 'radashi'
 import './Table.css'
 
 const DEFAULT_COLUMN_SIZE = 80
+const DEFAULT_CELL_HEIGHT = 29
 
 export interface TableProps<K = string, T = string> {
   /** The columns. */
@@ -40,6 +41,8 @@ export interface TableProps<K = string, T = string> {
   rowsEditable?: boolean
   /** Whether cells can be edited. */
   cellsEditable?: boolean
+  /** Height of cells in pixels. */
+  cellHeight?: number
   /** The state of the selected cell or cells in the table. */
   activeRange: ActiveRange
   /** Sets the state of the selected cell or cells in the table. */
@@ -132,7 +135,7 @@ export default function Table<K = string, T = unknown>(props: TableProps<K, T>)
 
   // Calculate some measurements
   const px = () => 1 / devicePixelRatio()
-  const cellHeight = createSize(29)
+  const cellHeight = createSize(() => props.cellHeight ?? DEFAULT_CELL_HEIGHT)
   const rowHeaderWidth = () => rowHeaderSize().width
   const colHeaderHeight = cellHeight
   const scrollPadding = createSize(6)
@@ -168,7 +171,7 @@ export default function Table<K = string, T = unknown>(props: TableProps<K, T>)
         props.onViewportChanged?.(viewportRange[0], viewportRange[1])
       }
     },
-    overscan: 10, // FIXME: Right number?
+    overscan: 10,
   })
 
   // Restore scroll position when data is ready
@@ -229,7 +232,7 @@ export default function Table<K = string, T = unknown>(props: TableProps<K, T>)
     createMemo(() => props.columns.slice(visibleColumnRange().start, visibleColumnRange().end)),
     (column, localIndex) => {
       const index = () => localIndex() + visibleColumnRange().start
-      const size = createMemo(() => horizSizes().columns[index()]) // FIXME: Can use memo here?
+      const size = createMemo(() => horizSizes().columns[index()])
       return {
         id: column.id,
         get name() {
diff --git a/src/table/TableRow.css b/src/table/TableRow.css
@@ -1,21 +1,14 @@
 .solid-tabular\/row .solid-tabular\/row-cell,
 .solid-tabular\/row .solid-tabular\/row-header {
-  background: white;
+  background: var(--solid-tabular-cell-color);
 }
 
-/* .solid-tabular\/row:hover .solid-tabular\/row-cell,
-.solid-tabular\/row:hover .solid-tabular\/row-header,
-&:focus-within .solid-tabular\/row[data-active='true'] .solid-tabular\/row-cell,
-&:focus-within .solid-tabular\/row[data-active='true'] .solid-tabular\/row-header {
-  background: rgb(243, 245, 247);
-} */
-
 .solid-tabular\/row-cell {
   position: absolute;
   top: 0;
   left: 0;
   cursor: cell;
-  border-top: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
-  border-left: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */
+  border-top: 1px solid var(--solid-tabular-border-color);
+  border-left: 1px solid var(--solid-tabular-border-color);
   box-sizing: border-box;
 }
diff --git a/stories/Basic.stories.tsx b/stories/Basic.stories.tsx
@@ -49,6 +49,8 @@ export const BasicUsage: Story = {
             })
           }
           cellsEditable
+          rowsEditable
+          columnsEditable
         />
       </div>
     )
diff --git a/stories/main.css b/stories/main.css
@@ -4,10 +4,12 @@ body {
 
 .table-wrap {
   height: 100%;
-  border: 2px solid oklch(48.011% 0.08557 182.905);
+  border: 2px solid black; /* oklch(48.011% 0.08557 182.905); */
   border-radius: 6px;
   overflow: hidden;
   font-size: 14px;
-  --solid-tabular-outline-color: oklch(60% 0.118 184.704);
+  /* --solid-tabular-accent-color: oklch(60% 0.118 184.704);
   --solid-tabular-font-size-row-num: 12px;
+  --solid-tabular-text-color: red;
+  --solid-tabular-rownum-color: blue; */
 }

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export const textContent =`
`32`	`32`	`<div`
`33`	`33`	`onDblClick={handleDoubleClick}`
`34`	`34`	`class="solid-tabular/text-content"`
`35`		`- style={{ color: format.color ?? 'black' }}`
	`35`	`+ style={{ color: format.color ?? 'inherit' }}`
`36`	`36`	`>`
`37`	`37`	`{format.prefix?.(props.value)}`
`38`	`38`	`<div`
Original file line number	Diff line number	Diff line change
`@@ -9,10 +9,6 @@`
`9`	`9`	`text-overflow: ellipsis;`
`10`	`10`	`white-space: pre;`
`11`	`11`	`user-select: none;`
`12`		`-`
`13`		`- &.solid-tabular\/empty {`
`14`		`- color: oklch(70.7% 0.022 261.325); /* gray-400 */`
`15`		`- }`
`16`	`12`	`}`
`17`	`13`
`18`	`14`	`input {`
`@@ -32,8 +28,12 @@`
`32`	`28`	`&[data-visible='true'] {`
`33`	`29`	`width: auto;`
`34`	`30`	`border-radius: 4px;`
`35`		`- background-color: white;`
	`31`	`+ background-color: var(--solid-tabular-cell-color);`
`36`	`32`	`padding: 0.25rem;`
`37`	`33`	`}`
`38`	`34`	`}`
`39`	`35`	`}`
	`36`	`+`
	`37`	`+.solid-tabular\/placeholder {`
	`38`	`+ color: var(--solid-tabular-placeholder-color);`
	`39`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ export function Renameable(props: RenameableProps) {`
`89`	`89`	`onDblClick={handleDblClick}`
`90`	`90`	`ref={containerEl}`
`91`	`91`	`>`
`92`		`- <div class={cn({ 'solid-tabular/empty': !props.value.length })} title={shownValue()}>`
	`92`	`+ <div class={cn({ 'solid-tabular/placeholder': !props.value.length })} title={shownValue()}>`
`93`	`93`	`{shownValue()}`
`94`	`94`	`</div>`
`95`	`95`	`<input`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@`
`19`	`19`	`> div {`
`20`	`20`	`opacity: 0;`
`21`	`21`	`transition: opacity 0.15s;`
`22`		`- background-color: var(--solid-tabular-outline-color, black);`
	`22`	`+ background-color: var(--solid-tabular-accent-color);`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`&:hover > div,`
Original file line number	Diff line number	Diff line change
`@@ -8,14 +8,14 @@`
`8`	`8`	`display: flex;`
`9`	`9`	`align-items: center;`
`10`	`10`	`justify-content: center;`
`11`		`- border: 1px solid oklch(87.2% 0.01 258.338); /* gray-300 */`
	`11`	`+ border: 1px solid var(--solid-tabular-border-color);`
`12`	`12`	`border-top: none;`
`13`		`- background-color: white;`
	`13`	`+ background-color: var(--solid-tabular-cell-color);`
`14`	`14`	`padding: 0.25rem 0;`
`15`	`15`	`box-sizing: border-box;`
`16`	`16`
`17`	`17`	`&:hover {`
`18`		`- background-color: oklch(96.7% 0.003 264.542); /* gray-100 */`
	`18`	`+ background-color: var(--solid-tabular-cell-hover-color);`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`	`}`