@lensui/lens-table 0.1.49 → 0.1.51

package/dist/index.cjs

@@ -1161,13 +1161,13 @@ function paintGrid(options) {
             label = "Render error";
           }
           if (label) {
-            const padding = 10;
+            const padding = 4;
             const textX = column.align === "right" ? x + cellWidth - padding : column.align === "center" ? x + cellWidth / 2 : x + padding;
             ctx.save();
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isColumnDropTarget ? colors.text : isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : isColumnDropTarget ? colors.text : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -2353,7 +2353,7 @@ function TableInner({
       // regular and drag fills intentionally differ, but odd rows should
       // continue to use the dedicated stripe color in both states.
       axisSelectionStripeFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-stripe-fill", "#dfeeff"),
-      axisSelectionText: isSelectedColumnDrag || isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
+      axisSelectionText: isSelectedColumnDrag || isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#fff") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),

package/dist/index.css

@@ -19,7 +19,7 @@
   --rvg-color-axis-selection-stripe-fill: #dfeeff;
   --rvg-color-axis-selection-text: var(--rvg-color-text);
   --rvg-color-axis-selection-drag-fill: #d8e8f8;
-  --rvg-color-axis-selection-drag-text: #325b88;
+  --rvg-color-axis-selection-drag-text: #fff;
   --rvg-color-column-drop-target-fill: #e2edf9;
   --rvg-color-range-fill: #e8f1ff;
   --rvg-color-row-hover-fill: #f6f9fc;
@@ -207,7 +207,7 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  padding: 0 10px;
+  padding: 0 4px;
   overflow: hidden;
   color: var(--rvg-color-text);
   font-family:
@@ -254,7 +254,7 @@
   z-index: 1;
   display: flex;
   min-width: 0;
-  padding: 0 10px;
+  padding: 0 4px;
   align-items: center;
   overflow: hidden;
   color: var(--rvg-color-text);
@@ -2051,48 +2051,59 @@
 .rvg-date-editor [data-part=trigger] {
   position: absolute;
   top: 50%;
-  right: 4px;
+  right: 3px;
   display: grid;
-  width: 23px;
-  height: 23px;
+  width: 20px;
+  height: 20px;
   padding: 0;
   place-items: center;
-  border: 0;
-  border-radius: 3px;
+  border: 1px solid transparent;
+  border-radius: 50%;
   background: transparent;
-  color: #70757a;
+  color: var(--rvg-color-subtle);
   cursor: pointer;
   transform: translateY(-50%);
-  transition: background-color 120ms ease, color 120ms ease;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
 }
 .rvg-clear-trigger {
   position: absolute;
   top: 50%;
-  right: 4px;
+  right: 3px;
   display: grid;
-  width: 23px;
-  height: 23px;
+  width: 20px;
+  height: 20px;
   padding: 0;
   place-items: center;
-  border: 0;
-  border-radius: 3px;
+  border: 1px solid transparent;
+  border-radius: 50%;
   background: transparent;
-  color: #9aa0a6;
+  color: var(--rvg-color-subtle);
   cursor: pointer;
   transform: translateY(-50%);
-  transition: background-color 120ms ease, color 120ms ease;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease;
 }
 .rvg-clear-trigger:hover {
+  border-color: var(--rvg-color-border);
   background: var(--rvg-color-hover-muted);
-  color: #3c4043;
+  color: var(--rvg-color-text);
+}
+.rvg-clear-trigger:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--rvg-color-primary) 45%, transparent);
+  outline-offset: 1px;
 }
 .rvg-clear-icon {
   display: block;
-  width: 14px;
-  height: 14px;
+  width: 11px;
+  height: 11px;
   fill: none;
   stroke: currentColor;
-  stroke-width: 1.7;
+  stroke-width: 1.8;
   stroke-linecap: round;
 }
 .rvg-date-editor [data-part=trigger]:hover {
@@ -2109,12 +2120,15 @@
   stroke-linejoin: round;
   paint-order: stroke fill;
 }
-.rvg-choice-editor [data-part=trigger]:hover [data-part=indicator] {
-  color: #3c4043;
+.rvg-choice-editor [data-part=trigger]:hover [data-part=indicator],
+.rvg-date-editor [data-part=trigger]:hover {
+  border-color: var(--rvg-color-border);
+  background: var(--rvg-color-hover-muted);
+  color: var(--rvg-color-text);
 }
 .rvg-choice-chevron {
-  width: 16px;
-  height: 16px;
+  width: 13px;
+  height: 13px;
   transition: transform 160ms ease;
 }
 .rvg-choice-chevron path,

package/dist/index.js

@@ -1131,13 +1131,13 @@ function paintGrid(options) {
             label = "Render error";
           }
           if (label) {
-            const padding = 10;
+            const padding = 4;
             const textX = column.align === "right" ? x + cellWidth - padding : column.align === "center" ? x + cellWidth / 2 : x + padding;
             ctx.save();
             ctx.beginPath();
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
-            ctx.fillStyle = isColumnDropTarget ? colors.text : isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? rowStyle?.color ?? colors.text;
+            ctx.fillStyle = isAxisSelected ? colors.axisSelectionText : isColumnDropTarget ? colors.text : cellStyle?.color ?? rowStyle?.color ?? colors.text;
             ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -2323,7 +2323,7 @@ function TableInner({
       // regular and drag fills intentionally differ, but odd rows should
       // continue to use the dedicated stripe color in both states.
       axisSelectionStripeFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-stripe-fill", "#dfeeff"),
-      axisSelectionText: isSelectedColumnDrag || isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
+      axisSelectionText: isSelectedColumnDrag || isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#fff") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
       rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
       editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
       insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.49",
+  "version": "0.1.51",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",