Merge pull request #127 from outerbase/table-colors

fix table colors / re-allow customization
outerbase · Jan 9, 2025 · dee10ac · dee10ac
2 parents 1f10fd6 + 466564b
commit dee10ac
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@outerbase/astra-ui",
-  "version": "0.8.5",
+  "version": "0.8.8",
   "type": "module",
   "main": "dist/js/index.js",
   "module": "dist/js/index.js",

diff --git a/src/components/charts/composed.ts b/src/components/charts/composed.ts
@@ -10,20 +10,6 @@ export default class AstraComposedChart extends AstraChart {
   static override styles = [
     ...ClassifiedElement.styles,
     css`
-      * {
-        --astra-table-background-color: #f5f5f5;
-        --astra-table-border-color: #d4d4d4;
-        --astra-table-column-header-background-color: #f5f5f5;
-        --astra-table-row-even-background-color: #f5f5f5;
-      }
-
-      * .dark {
-        --astra-table-background-color: #121212;
-        --astra-table-border-color: #404040;
-        --astra-table-column-header-background-color-dark: #121212;
-        --astra-table-row-even-background-color-dark: #121212;
-      }
-
       .space-mono-regular {
         font-family: 'Space Mono', monospace;
         font-weight: 400;

diff --git a/src/components/table/core/td.ts b/src/components/table/core/td.ts
@@ -247,11 +247,13 @@ export class TableData extends MutableElement {
       'relative focus:z-[1]': true,
       'h-[34px] flex items-center justify-center': true,
       'border-theme-table-border dark:border-theme-table-border-dark': true,
+      'backdrop-blur-sm': this.blank || this.pinned,
       // TODO support odd vs even again
-      'text-theme-table-column-content dark:text-theme-table-column-content-dark': true,
+      'text-theme-table-content dark:text-theme-table-content-dark': !this.isEditing,
+      'text-theme-table-cell-mutating-content dark:text-theme-table-cell-mutating-content': this.isEditing,
       'bg-theme-table-row-new dark:bg-theme-table-row-new-dark': this.rowIsNew,
       // 'hover:bg-theme-table-row-selected-hover dark:hover:bg-theme-row-selected-hover-dark': this.isActive,
-      'bg-theme-table-row-even dark:bg-theme-table-row-even-dark': !this.rowIsNew && !this.isActive && (!this.dirty || this.hideDirt),
+      'bg-theme-table-row dark:bg-theme-table-row-dark': !this.rowIsNew && !this.isActive && (!this.dirty || this.hideDirt),
       'bg-theme-table-row-selected dark:bg-theme-table-row-selected-dark':
         !this.rowIsNew && this.isActive && (!this.dirty || this.hideDirt), // i.e. this is the column being sorted
       'bg-theme-table-cell-dirty dark:bg-theme-table-cell-dirty-dark': !this.rowIsNew && this.dirty && !this.hideDirt, // dirty cells
@@ -303,6 +305,9 @@ export class TableData extends MutableElement {
   @property({ attribute: 'row-is-new', type: Boolean })
   public rowIsNew = false
 
+  @property({ attribute: 'pinned', type: Boolean })
+  pinned = false
+
   @state() menuIsOpen = false
   @state() isContentEditable = true // this property is to toggle off the contenteditableness of to resolve quirky focus and text selection that can happen when, say, right-clicking to trigger the context menu
   @state() protected options = RW_OPTIONS
@@ -534,9 +539,9 @@ export class TableData extends MutableElement {
       cellContents = commonCellContents
     }
 
-    const themeClass = this.theme === 'dark' ? 'dark' : ''
+    const themeClass = this.theme === 'dark' ? 'dark ' : ''
     const inputEl = this.isEditing // &nbsp; prevents the row from collapsing (in height) when there is only 1 column
-      ? html`<div class="text-sm ${themeClass}">&nbsp;<input .value=${typeof displayValue === 'string' ? displayValue : (displayValue ?? '')} ?readonly=${this.readonly} @input=${this.onChange} class="z-[2] absolute top-0 bottom-0 right-0 left-0 bg-theme-table-cell-mutating-background dark:bg-theme-table-cell-mutating-background-dark outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 px-3 focus:rounded-[4px] font-table" @blur=${this.onBlur}></input></div>`
+      ? html`<div class="text-sm ${themeClass}">&nbsp;<input .value=${typeof displayValue === 'string' ? displayValue : (displayValue ?? '')} ?readonly=${this.readonly} @input=${this.onChange} class="z-[2] absolute top-0 bottom-0 right-0 left-0 bg-theme-table-cell-mutating-background dark:bg-theme-table-cell-mutating-background-dark outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700 px-3 focus:rounded-[4px] font-table dark:text-theme-table-cell-mutating-content-dark text-theme-table-cell-mutating-content" @blur=${this.onBlur}></input></div>`
       : html``
     const emptySlot = this.blank ? html`<slot></slot>` : html``
     const menuOptions = this.dirty

diff --git a/src/pages/components/table.astro b/src/pages/components/table.astro
@@ -8,11 +8,6 @@ const columns = {
 }
 ---
 
-<style>
-  * {
-    /* --astra-font-family: 'American Typewriter'; */
-  }
-</style>
 <Layout title="Astra-UI - Table Component">
   <h1 class="text-xl font-bold">light</h1>
   <div class="relative h-96 mb-2">

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -34,8 +34,10 @@ export default {
 
           // TABLE
           // background
-          table: 'var(--astra-table-background-color, rgba(255,255,255, 0))',
-          'table-dark': 'var(--astra-table-background-color, rgba(10,10,10, 0))',
+          table: 'var(--astra-table-background-color, rgba(255,255,255, 1))',
+          'table-dark': 'var(--astra-table-background-color-dark, rgba(0, 0, 0, 1))',
+          'table-row': 'var(--astra-table-row-background-color, rgba(255,255,255, 1))',
+          'table-row-dark': 'var(--astra-table-row-background-color-dark, rgba(0, 0, 0, 1))',
 
           // text
           'table-content': 'var(--astra-table-content-color, #000000)',
@@ -52,24 +54,20 @@ export default {
           'table-column-content-dark': 'var(--astra-table-column-header-content-color-dark, #ffffff)',
 
           // rows
-          'table-row-even': 'var(--astra-table-row-even-background-color, rgb(255,255,255))',
-          'table-row-even-dark': 'var(--astra-table-row-even-background-color-dark, rgb(0,0,0))',
-          'table-row-odd': 'var(--astra-table-row-even-background-color, rgb(255,255,255))',
-          'table-row-odd-dark': 'var(--astra-table-row-even-background-color-dark, rgb(0,0,0))',
           'table-row-new': 'var(--astra-table-row-new-background-color, #DDF0DF)',
           'table-row-new-dark': 'var(--astra-table-row-new-background-color-dark, #14532D)',
           'table-row-hover': 'var(--astra-table-row-hover-background-color, rgba(0,0,0,0.03))',
           'table-row-hover-dark': 'var(--astra-table-row-hover-background-color-dark, rgb(30,30,30))',
           'table-row-selected': 'var(--astra-table-row-selected-background-color, rgba(245, 245, 245, 1))',
-          'table-row-selected-dark': 'var(--astra-table-row-selected-background-color-dark, rgb(23 23 23))',
+          'table-row-selected-dark': 'var(--astra-table-row-selected-background-color-dark, rgb(23, 23, 23))',
           'table-row-selected-hover': 'var(--astra-table-row-selected-hover-background-color, rgba(229, 229, 229, 1))',
-          'table-row-selected-hover-dark': 'var(--astra-table-row-selected-hover-background-color-dark, rgb(38 38 38))',
+          'table-row-selected-hover-dark': 'var(--astra-table-row-selected-hover-background-color-dark, rgb(38, 38, 38))',
 
           // editing cells
           'table-cell-mutating-background': 'var(--astra-cell-mutating-background-color, rgb(239 246 255))',
           'table-cell-mutating-background-dark': 'var(--astra-cell-mutating-background-color-dark, rgb(23 37 84))',
-          'table-cell-mutating-content': 'var(--astra-cell-mutating-content-color, rgb(0,0,255))',
-          'table-cell-mutating-content-dark': 'var(--astra-cell-mutating-content-color-dark, rgb(255,0,255))',
+          'table-cell-mutating-content': 'var(--astra-cell-mutating-content-color, rgb(0,0,0))',
+          'table-cell-mutating-content-dark': 'var(--astra-cell-mutating-content-color-dark, rgb(255,255,255))',
 
           // dirty cells
           'table-cell-dirty': 'var(--astra-cell-dirty-background-color, rgb(253 230 138))',