chart-factory 0.1.2

package/src/table/tokens.css

@@ -0,0 +1,157 @@
+/**
+ * D3Table - Table-Specific Design Tokens
+ *
+ * These tokens extend the core tokens for table-specific styling.
+ * Import after core tokens:
+ *
+ *   @import 'chart-factory/core/tokens.css';
+ *   @import 'chart-factory/table/tokens.css';
+ */
+
+:root {
+  /* ===========================
+     TABLE TYPOGRAPHY
+     =========================== */
+  --table-font-size: var(--font-size-lg);
+  --table-header-font-size: var(--font-size-sm);
+
+  /* Cell type font sizes (generic names) */
+  --table-primary-font-size: var(--font-size-xl);    /* Bold key column */
+  --table-secondary-font-size: var(--font-size-md);  /* Muted index column */
+
+  /* Key-column font family — column-width measurement honors it, so themes
+     can retarget the primary cells' face without breaking layout */
+  --table-primary-font: var(--font-family);
+
+  /* Legacy aliases (for backwards compatibility) */
+  --table-team-font-size: var(--table-primary-font-size);
+  --table-rank-font-size: var(--table-secondary-font-size);
+
+  /* ===========================
+     TABLE LAYOUT
+     =========================== */
+  --table-cell-height: var(--space-7);
+  --table-cell-padding-y: var(--space-1);
+  --table-cell-padding-x: var(--space-5);
+  --table-cell-padding-near: var(--space-2);  /* Small padding on aligned edge */
+  --table-header-padding-y: var(--space-2);
+  --table-header-padding-bottom: var(--space-1);
+
+  --table-header-border: 2px solid var(--color-border-header);
+  --table-row-border: 1px solid var(--color-border-row);
+
+  /* ===========================
+     TABLE BAR CHARTS
+     =========================== */
+  --bar-margin-y: 3px;
+  --table-bar-border-radius: 2px; /* renamed from --bar-border-radius, which collided with core tokens */
+  --bar-opacity: 0.85;
+  --bar-max-width-percent: 70;           /* Max bar width as percentage of cell */
+  --bar-max-width-percent-highlighted: 65; /* Slightly smaller when highlighted */
+  --bar-label-max-position: 75;          /* Max label position as percentage */
+  --bar-label-margin: 2%;
+  --bar-text-padding: var(--space-1);
+  --bar-column-min-width: 130px;
+  --bar-column-max-width: 250px;
+
+  /* Wrapped text cells (column config wrap: true) */
+  --table-wrap-line-height: 1.35;
+  --table-wrap-min-width: 110px;   /* fill-layout floor for wrap columns */
+
+  /* Sorted-column highlight (neutral wash on the user-sorted column) */
+  --table-sorted-column-bg: rgba(0, 0, 0, 0.03);
+  --table-sorted-column-bg-hover: rgba(0, 0, 0, 0.05);
+
+  /* ===========================
+     TABLE STICKY / CAP / TOTALS
+     =========================== */
+  --table-sticky-bg: #ffffff;              /* opaque backing for stuck header/column cells */
+  --table-sticky-edge-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.18);
+  --table-total-border: 2px solid var(--color-black);
+
+  /* Column group header rule (inset from cell edges to gap adjacent groups) */
+  --table-group-rule-color: var(--color-border-row);
+  --table-group-rule-width: 1px;
+  --table-group-rule-inset: 10px;
+
+  /* ===========================
+     TABLE EXPANDABLE SUB-ROWS
+     =========================== */
+  --table-toggle-width: 14px;
+  --table-subrow-indent: 22px;
+
+  /* ===========================
+     TABLE IMAGES (logos / flags / headshots)
+     =========================== */
+  --table-image-size: 22px;
+  --table-image-gap: var(--space-2);
+  --table-image-radius: 4px;
+
+  /* ===========================
+     TABLE HEATMAP
+     =========================== */
+  --heatmap-box-padding: var(--space-2);
+  --heatmap-box-height: 25px;
+  --heatmap-box-min-width: 40px;
+  --heatmap-box-border-radius: var(--table-bar-border-radius);
+
+  /* ===========================
+     TABLE COLUMN WIDTHS
+     =========================== */
+  --col-primary-max-width: 250px;
+  --col-secondary-max-width: 40px;
+  --col-default-max-width: 150px;
+  --col-padding-total: 28px;
+  --col-padding-secondary: 10px;
+
+  /* Secondary/rank column constraints */
+  --col-secondary-min: 18px;
+
+  /* Legacy aliases */
+  --col-rank-min: var(--col-secondary-min);
+  --col-rank-max: var(--col-secondary-max-width);
+
+  /* ===========================
+     TABLE SORTING
+     =========================== */
+  --sort-indicator-size: 10px;
+  --sort-indicator-color: var(--color-text-muted);
+  --sort-indicator-active-color: var(--color-black);
+  --sort-hover-bg: var(--color-bg-hover);
+  --sort-transition-duration: var(--animation-duration-fast);
+  /* CSS-drawn chevron on the active sort column (idle columns show nothing) */
+  --sort-chevron-size: 5px;
+  --sort-chevron-stroke: 1.5px;
+  --sort-indicator-opacity: 0.5;
+
+  /* ===========================
+     FILL LAYOUT (readable floor)
+     Per-column minimums summed into the table's min-width;
+     below that floor the wrapper scrolls horizontally.
+     =========================== */
+  --table-min-col-width: 48px;
+  --table-min-col-width-primary: 110px;
+  --table-min-col-width-secondary: 28px;
+
+  /* ===========================
+     TABLE RESPONSIVE
+     =========================== */
+  --table-font-size-mobile: var(--font-size-md);
+  --table-header-font-size-mobile: var(--font-size-xs);
+}
+
+/* ===========================
+   DARK THEME
+   ===========================
+   Companion to the core tokens' [data-theme="dark"] block — most table
+   tokens reference core tokens and flip automatically; only the literal
+   light-mode values are overridden here. */
+:root[data-theme="dark"] {
+  /* White-based wash — the light theme's black-based rgba would vanish */
+  --table-sorted-column-bg: rgba(255, 255, 255, 0.045);
+  --table-sorted-column-bg-hover: rgba(255, 255, 255, 0.07);
+
+  /* Opaque backing for stuck header/column cells */
+  --table-sticky-bg: var(--color-bg-container);
+  --table-sticky-edge-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.7);
+}