simple-table-core 3.8.5 → 3.8.7

package/src/styles/base.css

@@ -61,42 +61,10 @@
   --st-neutral-800: #262626;
   --st-neutral-900: #171717;
 
-  /* Stone colors - used in violet theme */
-  --st-stone-100: #f5f5f4;
-  --st-stone-200: #e7e5e4;
-  --st-stone-300: #d6d3d1;
-  --st-stone-400: #a8a29e;
-  --st-stone-500: #78716c;
-  --st-stone-700: #44403c;
-
   /* Red colors - used for warnings/errors */
   --st-red-300: #fca5a5;
   --st-red-400: #f87171;
 
-  /* Orange colors - used in sky theme warnings */
-  --st-orange-400: #fb923c;
-
-  /* Amber colors - used in violet theme */
-  --st-amber-50: #fffbeb;
-  --st-amber-100: #fef3c7;
-  --st-amber-200: #fde68a;
-
-  /* Emerald colors - used for charts */
-  --st-emerald-400: #34d399;
-  --st-emerald-500: #10b981;
-  --st-emerald-600: #059669;
-
-  /* Teal colors - used for charts */
-  --st-teal-400: #2dd4bf;
-  --st-teal-500: #14b8a6;
-  --st-teal-600: #0d9488;
-
-  /* Sky colors - used in sky theme */
-  --st-sky-100: #e0f2fe;
-  --st-sky-200: #bae6fd;
-  --st-sky-300: #7dd3fc;
-  --st-sky-400: #38bdf8;
-
   /* Blue colors - used across multiple themes */
   --st-blue-50: #eff6ff;
   --st-blue-100: #dbeafe;
@@ -108,15 +76,6 @@
   --st-blue-800: #1e40af;
   --st-blue-900: #1e3a8a;
   --st-blue-950: #172554;
-
-  /* Violet colors - used in violet theme */
-  --st-violet-50: #f5f3ff;
-  --st-violet-100: #ede9fe;
-  --st-violet-200: #ddd6fe;
-  --st-violet-400: #a78bfa;
-  --st-violet-500: #8b5cf6;
-  --st-violet-600: #7c3aed;
-  --st-violet-800: #5b21b6;
 }
 
 .simple-table-root * {
@@ -124,7 +83,6 @@
   /* Scrollbar thumb color */
   scrollbar-color: var(--st-scrollbar-thumb-color) var(--st-scrollbar-bg-color);
   scrollbar-width: var(--st-scrollbar-width);
-  scrollbar-thumb-border-radius: var(--st-scrollbar-thumb-border-radius);
   font-family: inherit;
 }
 
@@ -199,6 +157,18 @@ input {
   top: calc(var(--st-calculated-header-height, 0px) - var(--st-external-scroll-padding-top, 0px));
 }
 
+/* External scroll mode: pin the column editor's vertical label to the top of
+   the scroll viewport so it stays visible as the page scrolls (mirrors the
+   sticky header). The label normally stretches the full bar height
+   (flex-grow), which leaves sticky no travel room — collapse it to its content
+   height and align to the top so it has the full bar height to stick within. */
+.simple-table-root.st-external-scroll .st-column-editor-text {
+  position: sticky;
+  top: calc(-1 * var(--st-external-scroll-padding-top, 0px));
+  align-self: flex-start;
+  flex-grow: 0;
+}
+
 .st-wrapper-container {
   position: relative;
   display: flex;
@@ -352,7 +322,7 @@ input {
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  color: var(--st-header-text-color);
+  color: var(--st-header-icon-color);
   opacity: 0.6;
   font-size: 0.9em;
 }
@@ -448,6 +418,7 @@ input {
 
 .st-cell-content {
   display: flex;
+  font-size: 14px;
 }
 
 .st-row.odd .st-cell-content {
@@ -491,7 +462,8 @@ input {
 .st-header-cell {
   top: 0;
   background-color: var(--st-header-background-color);
-  font-weight: var(--st-font-weight-bold);
+  font-weight: 500;
+  font-size: 14px;
 
   display: flex;
   align-items: center;
@@ -961,10 +933,10 @@ input {
   align-items: center;
   min-height: var(--st-footer-height, 49px);
   background-color: var(--st-footer-background-color);
-  padding: var(--st-spacing-medium);
+  padding: 12px 16px;
   border-top: var(--st-border-width) solid var(--st-border-color);
   flex-shrink: 0;
-  gap: var(--st-spacing-medium);
+  gap: 12px;
 }
 
 .simple-table-root.st-footer-position-top .st-footer {
@@ -979,8 +951,8 @@ input {
 }
 
 .st-footer-results-text {
-  color: var(--st-cell-color);
-  font-size: 0.9em;
+  color: var(--st-footer-text-color, var(--st-cell-color));
+  font-size: 14px;
   white-space: nowrap;
 }
 
@@ -988,13 +960,18 @@ input {
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  gap: 2px;
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 
 .st-next-prev-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--st-spacing-small);
+  padding: 6px 8px;
+  margin-left: 4px;
+  flex-shrink: 0;
   cursor: pointer;
   background-color: transparent;
   border: none;
@@ -1019,13 +996,16 @@ input {
 }
 
 .st-page-btn {
-  margin-right: var(--st-spacing-small);
-  padding: var(--st-spacing-small);
+  padding: 6px 8px;
+  min-width: 36px;
+  flex-shrink: 0;
   cursor: pointer;
   background-color: transparent;
   color: var(--st-page-btn-color);
   border: none;
   border-radius: var(--st-border-radius);
+  font-size: 13px;
+  font-weight: 500;
   transition: background-color var(--st-transition-duration) var(--st-transition-ease);
   display: inline-flex;
   align-items: center;
@@ -1043,7 +1023,8 @@ input {
 
 .st-page-btn.active {
   background-color: var(--st-button-active-background-color);
-  color: white;
+  color: var(--st-header-selected-label-color, var(--st-white));
+  font-weight: 600;
 }
 
 /* Set by createTableFooter when page controls exceed MAX_COMPACT_VISIBLE_PAGE_BUTTONS */
@@ -1055,10 +1036,9 @@ input {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--st-spacing-small);
-  margin: 0 var(--st-spacing-small);
-  color: var(--st-cell-color);
-  font-weight: bold;
+  padding: 0 4px;
+  color: var(--st-next-prev-btn-color);
+  font-weight: 400;
 }
 
 .editable-cell-input {
@@ -1066,7 +1046,7 @@ input {
   top: 0;
   left: 0;
   border: var(--st-border-width) solid var(--st-border-color);
-  box-shadow: var(--st-edit-cell-shadow-color);
+  box-shadow: var(--st-edit-cell-shadow);
   z-index: 1;
   outline: none;
   height: 100%;
@@ -1191,7 +1171,7 @@ input {
 }
 
 .st-column-editor-reset-btn:hover {
-  background-color: var(--st-hover-background-color);
+  background-color: var(--st-button-hover-background-color);
 }
 
 .st-column-pin-btn {
@@ -1399,9 +1379,9 @@ input {
   justify-content: center;
   min-width: 16px;
   min-height: 16px;
-  border: var(--st-border-width) solid var(--st-checkbox-border-color);
+  border: 1.5px solid var(--st-checkbox-border-color);
   border-radius: var(--st-border-radius);
-  background-color: white;
+  background-color: var(--st-checkbox-background-color, var(--st-white));
   transition:
     background-color var(--st-transition-duration) var(--st-transition-ease),
     border-color var(--st-transition-duration) var(--st-transition-ease);
@@ -1444,7 +1424,7 @@ input {
   align-items: center;
   border-bottom: var(--st-border-width) solid var(--st-border-color);
   color: var(--st-cell-color);
-  font-weight: var(--st-font-weight-bold);
+  font-weight: 500;
   transition: background-color var(--st-transition-duration) var(--st-transition-ease);
 }
 
@@ -1468,7 +1448,7 @@ input {
 }
 
 .st-group-name {
-  font-weight: var(--st-font-weight-bold);
+  font-weight: 600;
 }
 
 .st-group-count {
@@ -2181,7 +2161,7 @@ input {
   color: var(--st-tooltip-text-color);
   padding: var(--st-tooltip-padding);
   border-radius: var(--st-tooltip-border-radius);
-  font-size: 0.8em;
+  font-size: var(--st-tooltip-font-size, 12px);
   line-height: 1.4;
   max-width: 300px;
   word-wrap: break-word;
@@ -2232,13 +2212,10 @@ input {
 /* Chart Styles */
 /* ========================================== */
 
-/* Crisp, pixel-perfect chart rendering */
+/* Charts render in pixel space (viewBox matches rendered size), so default
+   anti-aliased rendering stays crisp; avoid crispEdges which jags rounded
+   corners and diagonal lines. */
 .st-line-area-chart,
 .st-bar-chart {
-  image-rendering: -webkit-optimize-contrast;
-  image-rendering: crisp-edges;
-}
-
-.st-bar-chart rect {
-  shape-rendering: crispEdges;
+  overflow: visible;
 }

package/src/styles/themes/dark.css

@@ -12,17 +12,18 @@
   --st-scrollbar-bg-color: var(--st-gray-900);
   --st-scrollbar-thumb-color: var(--st-gray-600);
   --st-scrollbar-width: thin;
-  --st-scrollbar-thumb-border-radius: 4px;
 
   /* Base/Structural colors */
   --st-border-color: var(--st-gray-700);
+  --st-body-background-color: var(--st-gray-900);
   --st-footer-background-color: var(--st-gray-900);
+  --st-footer-text-color: var(--st-gray-300);
   --st-last-group-row-separator-border-color: var(--st-gray-500);
 
   /* Row colors */
   --st-odd-row-background-color: var(--st-gray-800);
   --st-even-row-background-color: var(--st-gray-900);
-  --st-hover-row-background-color: var(--st-gray-600);
+  --st-hover-row-background-color: var(--st-gray-700);
   --st-selected-row-background-color: var(--st-blue-950);
 
   /* Column colors */
@@ -70,6 +71,7 @@
   --st-page-btn-hover-background-color: var(--st-gray-600);
 
   /* Checkbox colors */
+  --st-checkbox-background-color: var(--st-gray-800);
   --st-checkbox-checked-background-color: var(--st-blue-500);
   --st-checkbox-checked-border-color: var(--st-blue-500);
   --st-checkbox-border-color: var(--st-gray-600);
@@ -86,7 +88,7 @@
   --st-filter-button-disabled-text-color: var(--st-gray-500);
 
   /* Flash/Animation colors */
-  --st-cell-flash-color: var(--st-gray-500);
+  --st-cell-flash-color: var(--st-gray-600);
   --st-copy-flash-color: var(--st-blue-500);
   --st-warning-flash-color: var(--st-red-400);
 
@@ -94,8 +96,8 @@
   --st-tooltip-background-color: var(--st-gray-100);
   --st-tooltip-text-color: var(--st-gray-900);
   --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 8px 12px;
-  --st-tooltip-font-size: 13px;
+  --st-tooltip-padding: 6px 10px;
+  --st-tooltip-font-size: 12px;
   --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 
   /* Header selection colors */

package/src/styles/themes/light.css

@@ -15,7 +15,9 @@
 
   /* Base/Structural colors */
   --st-border-color: var(--st-slate-300);
+  --st-body-background-color: var(--st-white);
   --st-footer-background-color: var(--st-slate-50);
+  --st-footer-text-color: var(--st-slate-600);
   --st-last-group-row-separator-border-color: var(--st-slate-400);
 
   /* Row colors */
@@ -93,8 +95,8 @@
   --st-tooltip-background-color: var(--st-slate-900);
   --st-tooltip-text-color: var(--st-white);
   --st-tooltip-border-radius: 6px;
-  --st-tooltip-padding: 8px 12px;
-  --st-tooltip-font-size: 13px;
+  --st-tooltip-padding: 6px 10px;
+  --st-tooltip-font-size: 12px;
   --st-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 
   /* Header selection colors */

package/src/styles/themes/modern-dark.css

@@ -11,6 +11,9 @@
  * - Lightweight visual hierarchy
  * 
  * Inspired by: GitHub dark mode, VS Code, and modern dark UIs
+ *
+ * All structural rules (footer, pagination, typography) live in base.css and
+ * are driven by these tokens, so this theme is a pure token set.
  */
 .theme-modern-dark {
   /* Layout/Structure variables - Tighter, more compact */
@@ -29,12 +32,12 @@
   /* Base/Structural colors - Subtle dark borders */
   --st-border-color: #374151;
   --st-footer-background-color: #1f2937;
+  --st-footer-text-color: #d1d5db;
   --st-last-group-row-separator-border-color: #4b5563;
 
-  /* Row colors - Dark background; when useOddEvenRowBackground is on, even
-   * rows lift slightly to keep the table readable on a dark canvas. */
+  /* Row colors - Dark background, hover instead of stripes */
   --st-odd-row-background-color: #1f2937;
-  --st-even-row-background-color: #232f3f;
+  --st-even-row-background-color: #1f2937;
   --st-hover-row-background-color: #374151;
   --st-selected-row-background-color: #1e3a5f;
 
@@ -83,6 +86,7 @@
   --st-page-btn-hover-background-color: #374151;
 
   /* Checkbox colors */
+  --st-checkbox-background-color: #1f2937;
   --st-checkbox-checked-background-color: #3b82f6;
   --st-checkbox-checked-border-color: #3b82f6;
   --st-checkbox-border-color: #4b5563;
@@ -129,146 +133,3 @@
   /* Body background for state rows */
   --st-body-background-color: #1f2937;
 }
-
-/* Modern Dark theme specific overrides for even cleaner look */
-.theme-modern-dark .st-wrapper {
-  border: 1px solid #374151;
-}
-
-/* Subtle header border */
-.theme-modern-dark .st-header-pinned-left,
-.theme-modern-dark .st-header-main,
-.theme-modern-dark .st-header-pinned-right {
-  border-bottom: 1px solid #374151;
-}
-
-/* Remove heavy borders on pinned sections */
-.theme-modern-dark .st-header-pinned-left,
-.theme-modern-dark .st-body-pinned-left {
-  border-right: 1px solid #374151;
-}
-
-.theme-modern-dark .st-header-pinned-right,
-.theme-modern-dark .st-body-pinned-right {
-  border-left: 1px solid #374151;
-}
-
-/* Cleaner row separators */
-.theme-modern-dark .st-row-separator {
-  background-color: #374151;
-}
-
-/* Lighter header cell styling */
-.theme-modern-dark .st-header-cell {
-  font-weight: 500;
-  font-size: 14px;
-  color: #d1d5db;
-}
-
-/* Cleaner cell text */
-.theme-modern-dark .st-cell-content {
-  font-size: 14px;
-  color: #f3f4f6;
-}
-
-/* Subtle hover effect */
-.theme-modern-dark .st-row.hovered {
-  transition: background-color 0.15s ease;
-}
-
-/* Modern footer styling */
-.theme-modern-dark .st-footer {
-  border-top: 1px solid #374151;
-  background-color: #1f2937;
-  padding: 12px 16px;
-  gap: 12px;
-}
-
-/* Footer text color */
-.theme-modern-dark .st-footer-results-text {
-  color: #d1d5db;
-  font-size: 14px;
-}
-
-/* Footer pagination container - hide extra buttons on smaller screens */
-.theme-modern-dark .st-footer-pagination {
-  gap: 2px;
-  flex-wrap: nowrap;
-  overflow: hidden;
-}
-
-/* Pagination ellipsis */
-.theme-modern-dark .st-page-ellipsis {
-  color: #9ca3af;
-  font-weight: 400;
-  padding: 0 4px;
-}
-
-/* Cleaner pagination buttons - more compact */
-.theme-modern-dark .st-page-btn {
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #d1d5db;
-  padding: 6px 8px;
-  min-width: 36px;
-  transition: all 0.15s ease;
-  margin-right: 0;
-  flex-shrink: 0;
-}
-
-.theme-modern-dark .st-page-btn:hover {
-  background-color: #374151;
-}
-
-.theme-modern-dark .st-page-btn.active {
-  background-color: #3b82f6;
-  color: white;
-  font-weight: 600;
-}
-
-/* Next/Prev buttons */
-.theme-modern-dark .st-next-prev-btn {
-  padding: 6px 8px;
-  border-radius: 4px;
-  transition: all 0.15s ease;
-  margin-left: 4px;
-  flex-shrink: 0;
-}
-
-.theme-modern-dark .st-next-prev-btn:not(.disabled):hover {
-  background-color: #374151;
-}
-
-.theme-modern-dark .st-next-prev-btn.disabled > * {
-  fill: #4b5563;
-}
-
-/* Modern scrollbar */
-.theme-modern-dark .st-horizontal-scrollbar-container {
-  border-top: 1px solid #374151;
-  background-color: #111827;
-}
-
-/* Cleaner group headers */
-.theme-modern-dark .st-group-header {
-  border-bottom: 1px solid #374151;
-  font-weight: 500;
-}
-
-/* Modern checkbox styling */
-.theme-modern-dark .st-checkbox-custom {
-  border-radius: 4px;
-  border: 1.5px solid #4b5563;
-  background-color: #1f2937;
-}
-
-.theme-modern-dark .st-checkbox-custom.st-checked {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
-}
-
-/* Empty state styling */
-.theme-modern-dark .st-empty-state {
-  color: #9ca3af;
-}

package/src/styles/themes/modern-light.css

@@ -11,8 +11,14 @@
  * - Lightweight visual hierarchy
  * 
  * Inspired by: Tailwind UI, Shadcn UI, and modern SaaS dashboards
+ *
+ * `.theme-custom` shares these tokens: it is the baseline for the theme
+ * builder (`theme="custom"`), which overrides individual tokens inline.
+ * All structural rules (footer, pagination, typography) live in base.css
+ * and are driven by these tokens, so themes are pure token sets.
  */
-.theme-modern-light {
+.theme-modern-light,
+.theme-custom {
   /* Layout/Structure variables - Tighter, more compact */
   --st-border-radius: 4px;
   --st-cell-padding: 12px;
@@ -29,12 +35,12 @@
   /* Base/Structural colors - Visible but still light (gray-200) */
   --st-border-color: #e5e7eb;
   --st-footer-background-color: var(--st-white);
+  --st-footer-text-color: #6b7280;
   --st-last-group-row-separator-border-color: #e5e7eb;
 
-  /* Row colors - Clean white background; when useOddEvenRowBackground is on,
-   * even rows pick up a very subtle off-white band for readable striping. */
+  /* Row colors - Clean white background, hover instead of stripes */
   --st-odd-row-background-color: var(--st-white);
-  --st-even-row-background-color: #fafafa;
+  --st-even-row-background-color: var(--st-white);
   --st-hover-row-background-color: #f3f4f6;
   --st-selected-row-background-color: #eff6ff;
 
@@ -79,7 +85,7 @@
   --st-button-active-background-color: #3b82f6;
   --st-next-prev-btn-color: #6b7280;
   --st-next-prev-btn-disabled-color: #d1d5db;
-  --st-page-btn-color: #6b7280;
+  --st-page-btn-color: #374151;
   --st-page-btn-hover-background-color: #f3f4f6;
 
   /* Checkbox colors */
@@ -129,136 +135,3 @@
   /* Body background for state rows */
   --st-body-background-color: var(--st-white);
 }
-
-/* Modern Light theme specific overrides for even cleaner look */
-.theme-modern-light .st-wrapper {
-  border: 1px solid var(--st-border-color);
-}
-
-/* Subtle header border */
-.theme-modern-light .st-header-pinned-left,
-.theme-modern-light .st-header-main,
-.theme-modern-light .st-header-pinned-right {
-  border-bottom: 1px solid var(--st-border-color);
-}
-
-/* Remove heavy borders on pinned sections */
-.theme-modern-light .st-header-pinned-left,
-.theme-modern-light .st-body-pinned-left {
-  border-right: 1px solid var(--st-border-color);
-}
-
-.theme-modern-light .st-header-pinned-right,
-.theme-modern-light .st-body-pinned-right {
-  border-left: 1px solid var(--st-border-color);
-}
-
-/* Row separators — match grid lines for readable horizontal breaks */
-.theme-modern-light .st-row-separator {
-  background-color: var(--st-border-color);
-}
-
-/* Lighter header cell styling */
-.theme-modern-light .st-header-cell {
-  font-weight: 500;
-  font-size: 14px;
-  color: #6b7280;
-}
-
-/* Cleaner cell text */
-.theme-modern-light .st-cell-content {
-  font-size: 14px;
-  color: #111827;
-}
-
-/* Subtle hover effect */
-.theme-modern-light .st-row.hovered {
-  transition: background-color 0.15s ease;
-}
-
-/* Modern footer styling */
-.theme-modern-light .st-footer {
-  border-top: 1px solid var(--st-border-color);
-  background-color: var(--st-white);
-  padding: 12px 16px;
-  gap: 12px;
-}
-
-/* Footer text styling */
-.theme-modern-light .st-footer-results-text {
-  color: #6b7280;
-  font-size: 14px;
-}
-
-/* Footer pagination container - hide extra buttons on smaller screens */
-.theme-modern-light .st-footer-pagination {
-  gap: 2px;
-  flex-wrap: nowrap;
-  overflow: hidden;
-}
-
-/* Pagination ellipsis */
-.theme-modern-light .st-page-ellipsis {
-  color: #9ca3af;
-  font-weight: 400;
-  padding: 0 4px;
-}
-
-/* Cleaner pagination buttons - more compact */
-.theme-modern-light .st-page-btn {
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #374151;
-  padding: 6px 8px;
-  min-width: 36px;
-  transition: all 0.15s ease;
-  margin-right: 0;
-  flex-shrink: 0;
-}
-
-.theme-modern-light .st-page-btn:hover {
-  background-color: #f3f4f6;
-}
-
-.theme-modern-light .st-page-btn.active {
-  background-color: #3b82f6;
-  color: white;
-  font-weight: 600;
-}
-
-/* Next/Prev buttons */
-.theme-modern-light .st-next-prev-btn {
-  padding: 6px 8px;
-  border-radius: 4px;
-  transition: all 0.15s ease;
-  margin-left: 4px;
-  flex-shrink: 0;
-}
-
-.theme-modern-light .st-next-prev-btn:not(.disabled):hover {
-  background-color: #f3f4f6;
-}
-
-/* Modern scrollbar */
-.theme-modern-light .st-horizontal-scrollbar-container {
-  border-top: 1px solid var(--st-border-color);
-  background-color: #fafafa;
-}
-
-/* Cleaner group headers */
-.theme-modern-light .st-group-header {
-  border-bottom: 1px solid var(--st-border-color);
-  font-weight: 500;
-}
-
-/* Modern checkbox styling */
-.theme-modern-light .st-checkbox-custom {
-  border-radius: 4px;
-  border: 1.5px solid #d1d5db;
-}
-
-.theme-modern-light .st-checkbox-custom.st-checked {
-  background-color: #3b82f6;
-  border-color: #3b82f6;
-}