create-yss-spec 1.1.2 → 1.1.4

package/template/.codex/skills/data-analytics/src/analytics-app/tables/data-table.css

@@ -0,0 +1,327 @@
+.shared-table-shell {
+  display: grid;
+  gap: 0;
+  min-width: 0;
+  width: 100%;
+}
+
+.table-wrap {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: clip;
+  padding: 0 0 10px;
+  scrollbar-gutter: stable;
+}
+
+.data-table {
+  width: 100%;
+  min-width: 100%;
+  border-collapse: collapse;
+  color: var(--ds-text);
+  font-size: 14px;
+  table-layout: auto;
+}
+
+.data-table-resizable {
+  table-layout: fixed;
+}
+
+.data-table-resizable.is-column-resizing {
+  cursor: col-resize;
+}
+
+.data-table th,
+.data-table td {
+  border-bottom: 1px solid var(--ds-border-subtle);
+  max-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+
+.data-table th {
+  position: relative;
+  height: 30px;
+  overflow: visible;
+  padding: 0;
+  background: transparent;
+  color: var(--ds-text-tertiary);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  letter-spacing: 0;
+}
+
+.data-table th.numeric,
+.data-table td.table-cell-number {
+  text-align: right;
+}
+
+.data-table th.center,
+.data-table td.center {
+  text-align: center;
+}
+
+.table-sort-button {
+  display: flex;
+  max-width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3px;
+  width: 100%;
+  height: 100%;
+  min-height: 30px;
+  border: 0;
+  padding: 0 16px 0 0;
+  border-radius: 0;
+  background: transparent;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  white-space: normal;
+}
+
+.data-table th:last-child .table-sort-button {
+  padding-right: 0;
+}
+
+.data-table th.numeric .table-sort-button {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.data-table th.left .table-sort-button {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.data-table th.numeric .table-sort-button span {
+  text-align: right;
+}
+
+.data-table th.center .table-sort-button {
+  justify-content: center;
+  text-align: center;
+}
+
+.table-sort-button span {
+  min-width: 0;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+.table-sort-button:hover,
+.table-sort-button:focus-visible {
+  border-radius: 0;
+  background: var(--ds-menu-hover-bg);
+}
+
+.table-column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -9px;
+  bottom: 0;
+  z-index: 2;
+  width: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.table-column-resize-handle:hover {
+  cursor: col-resize;
+}
+
+.report-stack-item .table-column-resize-handle,
+.table-column-resize-handle:hover {
+  cursor: col-resize;
+}
+
+.table-column-resize-handle::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px;
+  border-radius: 999px;
+  background: var(--ds-border-subtle);
+  content: "";
+  cursor: col-resize;
+  pointer-events: none;
+  opacity: 0;
+  transition: background 120ms ease, opacity 120ms ease, width 120ms ease;
+}
+
+.data-table-resizable th:hover .table-column-resize-handle::after {
+  opacity: 0.65;
+}
+
+.table-column-resize-handle:hover::after,
+.table-column-resize-handle:focus-visible::after,
+.data-table-resizable.is-column-resizing .table-column-resize-handle::after {
+  background: var(--ds-border-strong);
+  opacity: 1;
+  width: 2px;
+}
+
+.table-column-resize-handle:focus-visible {
+  outline: 2px solid var(--ds-blue-bright);
+  outline-offset: -3px;
+}
+
+.table-sort-icon {
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.table-sort-button svg {
+  color: var(--ds-text-secondary);
+}
+
+.table-arrow-button svg {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.data-table td {
+  padding: 8px 16px 8px 0;
+  color: var(--ds-text-secondary);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.14px;
+  white-space: normal;
+}
+
+.data-table td:first-child {
+  color: var(--ds-text-primary);
+}
+
+.table-wrap.table-density-dense .data-table td {
+  height: 40px;
+  padding: 0 8px;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.table-wrap.table-density-dense .data-table th {
+  height: 30px;
+}
+
+.table-wrap.table-density-dense .data-table .table-sort-button {
+  padding: 0 8px;
+}
+
+.table-wrap.table-density-dense .data-table th:first-child .table-sort-button {
+  padding-left: 0;
+}
+
+.table-wrap.table-density-dense .data-table th:last-child .table-sort-button {
+  padding-right: 0;
+}
+
+.table-wrap.table-density-dense .data-table td:first-child {
+  padding-left: 0;
+}
+
+.table-wrap.table-density-dense .data-table td:last-child {
+  padding-right: 0;
+}
+
+.data-table tbody tr:hover td {
+  background: var(--ds-menu-hover-bg);
+}
+
+.data-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.data-table td.table-cell-movement {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1, "lnum" 1;
+}
+
+.data-table td.table-cell-movement-positive {
+  color: var(--ds-green);
+}
+
+.data-table td.table-cell-movement-negative {
+  color: var(--ds-red);
+}
+
+.shared-table-footer,
+.table-page-control,
+.table-page-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.shared-table-footer {
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 38px;
+  padding: 0;
+  border-top: 1px solid var(--ds-border-subtle);
+  color: var(--ds-text-muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.table-result-count {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  color: var(--ds-text-tertiary);
+}
+
+.table-page-control,
+.table-page-buttons {
+  gap: 8px;
+}
+
+.shared-table-footer > .table-page-control:first-child {
+  margin-left: auto;
+}
+
+.table-arrow-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--ds-border);
+  border-radius: var(--ds-radius-pill);
+  background: transparent;
+  color: var(--ds-text);
+  cursor: pointer;
+}
+
+.table-arrow-button:hover:not(:disabled),
+.table-arrow-button:focus-visible:not(:disabled) {
+  background: var(--ds-menu-hover-bg);
+}
+
+.table-arrow-button:disabled {
+  color: var(--ds-text-tertiary);
+  cursor: default;
+  opacity: 0.55;
+}

package/template/.codex/skills/data-analytics/src/analytics-app/tokens.css

@@ -0,0 +1,225 @@
+@font-face {
+  font-family: "System Sans";
+  font-style: normal;
+  font-weight: 300 800;
+  font-display: swap;
+  src: url("./fonts/SystemSansVariableVF.woff2") format("woff2");
+}
+
+:root,
+:root[data-theme="light"] {
+  color-scheme: light;
+  --ds-bg: var(--codex-bg);
+  --ds-surface: var(--codex-panel);
+  --ds-surface-secondary: var(--codex-bg-under);
+  --ds-surface-tertiary: var(--codex-control);
+  --ds-border-subtle: var(--codex-border-light);
+  --ds-border: var(--codex-border);
+  --ds-border-strong: var(--codex-border-heavy);
+  --ds-text-primary: var(--codex-text);
+  --ds-text: var(--codex-text);
+  --ds-text-secondary: var(--codex-text-secondary);
+  --ds-text-muted: var(--codex-text-secondary);
+  --ds-text-tertiary: var(--codex-text-tertiary);
+  --ds-blue-25: var(--blue-25, #f5faff);
+  --ds-blue-50: var(--blue-50, #e5f3ff);
+  --ds-blue-75: var(--blue-75, #cce6ff);
+  --ds-blue-100: var(--blue-100, #99ceff);
+  --ds-blue-200: var(--blue-200, #66b5ff);
+  --ds-blue-300: var(--blue-300, #339cff);
+  --ds-blue-400: var(--blue-400, #0285ff);
+  --ds-blue-500: var(--blue-500, #0169cc);
+  --ds-blue-600: var(--blue-600, #004f99);
+  --ds-blue-700: var(--blue-700, #003f7a);
+  --ds-blue-800: var(--blue-800, #013566);
+  --ds-blue-900: var(--blue-900, #00284d);
+  --ds-blue-950: var(--blue-950, #000e1a);
+  --ds-blue: var(--color-text-info, var(--ds-blue-700));
+  --ds-blue-bright: var(--codex-accent);
+  --ds-purple-200: var(--purple-200, #be95fa);
+  --ds-purple-300: var(--purple-300, #ad7bf9);
+  --ds-purple-500: var(--purple-500, #8046d9);
+  --ds-purple-600: var(--purple-600, #6b3ab4);
+  --ds-purple-700: var(--purple-700, #532d8d);
+  --ds-purple: var(--purple-600, #6d5bd0);
+  --ds-green: var(--color-text-success-surface, var(--green-700, #00692a));
+  --ds-green-bg: var(--color-background-success-surface, var(--green-25, #edfaf2));
+  --ds-red: var(--color-text-danger-surface, var(--red-600, #ba2623));
+  --ds-red-bg: var(--color-background-danger-surface, var(--red-25, #fff0f0));
+  --ds-yellow: var(--color-text-caution-surface, var(--yellow-700, #916f00));
+  --ds-yellow-bg: var(--color-background-caution-surface, var(--yellow-25, #fffbed));
+  --ds-orange: var(--color-text-warning-surface, var(--orange-700, #923b0f));
+  --ds-pink: var(--pink-600, #ba437a);
+  --ds-neutral: var(--color-text-tertiary, var(--gray-400, #8f8f8f));
+  --ds-edit-hover-bg: rgb(232 232 232 / 20%);
+  --ds-edit-active-border: var(--color-border-primary, var(--ds-text-primary));
+  --ds-menu-button-border: rgba(13, 13, 13, 0.05);
+  --ds-overlay-bg: #ffffff;
+  --ds-menu-bg: var(--ds-overlay-bg);
+  --ds-menu-text: var(--color-token-dropdown-foreground, var(--color-text-foreground, var(--ds-text)));
+  --ds-menu-border: var(--color-token-dropdown-border, var(--color-border, var(--ds-border-subtle)));
+  --ds-menu-hover-bg: rgb(13 13 13 / 4%);
+  --ds-menu-selected-bg: var(--color-token-list-hover-background, var(--codex-control-hover));
+  --ds-table-row-text: #5d5d5d;
+  --ds-drag-preview-bg: var(--color-background-button-secondary-hover, rgb(232 232 232 / 58%));
+  --ds-drag-preview-border: var(--color-border, rgba(13, 13, 13, 0.1));
+  --ds-shadow: var(--codex-shadow-lg);
+  --ds-font: var(--codex-font-sans);
+  --ds-radius-xs: var(--codex-radius-xs);
+  --ds-radius-sm: var(--codex-radius-md);
+  --ds-radius-panel: var(--codex-radius-2xl);
+  --ds-radius-pill: var(--codex-radius-pill);
+  --ds-gutter: var(--codex-space-8);
+  --ds-panel-padding: var(--codex-space-6);
+  --ds-section-gap: var(--codex-space-8);
+  --ds-dashboard-section-gap: 32px;
+  --ds-report-content-max-width: 768px;
+  --ds-report-content-half-width: 384px;
+  --ds-dashboard-content-max-width: none;
+  --ds-chart-body-height: 240px;
+  --ds-chart-card-height: 280px;
+  --ds-font-heading: var(--ds-font);
+  --ds-dropdown-radius: var(--codex-radius-md);
+  --ds-dropdown-padding: var(--codex-space-1);
+  --ds-dropdown-row-radius: var(--codex-radius-sm);
+  --ds-dropdown-row-height: var(--codex-button-height);
+  --ds-field-menu-width: 220px;
+  --viz-surface: var(--ds-surface-secondary);
+  --viz-panel: var(--ds-surface);
+  --viz-ink: var(--ds-text);
+  --viz-muted: var(--ds-text-tertiary);
+  --viz-grid: var(--ds-border-subtle);
+  --viz-axis: var(--ds-border-subtle);
+  --viz-neutral-xlight: var(--ds-surface-secondary);
+  --viz-neutral-light: var(--ds-surface-tertiary);
+  --viz-neutral-base: var(--ds-border-strong);
+  --viz-neutral-mid: var(--ds-neutral);
+  --viz-neutral-dark: var(--ds-text-secondary);
+  --viz-blue-xlight: var(--ds-blue-50);
+  --viz-blue-light: var(--ds-blue-100);
+  --viz-blue-base: var(--ds-blue);
+  --viz-blue-mid: var(--ds-blue-500);
+  --viz-blue-dark: var(--ds-blue-700);
+  --viz-purple-base: var(--ds-purple);
+  --viz-purple-dark: var(--ds-purple-700);
+  --viz-gold-xlight: var(--ds-surface-secondary);
+  --viz-gold-light: var(--ds-blue-75);
+  --viz-gold-base: var(--ds-blue-500);
+  --viz-gold-mid: var(--ds-blue-600);
+  --viz-gold-dark: var(--ds-blue-800);
+  --viz-orange-xlight: var(--ds-surface-secondary);
+  --viz-orange-light: var(--ds-blue-100);
+  --viz-orange-base: var(--ds-orange);
+  --viz-orange-mid: var(--ds-blue-600);
+  --viz-orange-dark: var(--ds-blue-800);
+  --viz-olive-xlight: var(--ds-surface-secondary);
+  --viz-olive-light: var(--ds-blue-75);
+  --viz-olive-base: var(--ds-green);
+  --viz-olive-mid: var(--ds-blue-600);
+  --viz-olive-dark: var(--ds-blue-800);
+  --viz-pink-xlight: var(--ds-surface-secondary);
+  --viz-pink-light: var(--ds-purple-200);
+  --viz-pink-base: var(--ds-pink);
+  --viz-pink-mid: var(--ds-purple-500);
+  --viz-pink-dark: var(--ds-purple-700);
+  --surface: var(--ds-bg);
+  --card: var(--ds-surface);
+  --foreground: var(--ds-text);
+  --muted: var(--ds-text-muted);
+  --subtle: var(--ds-text-tertiary);
+  --border: var(--ds-border);
+  --grid: var(--viz-grid);
+  --axis: var(--viz-axis);
+  --soft: var(--ds-surface-secondary);
+  --blue-base: var(--viz-blue-base);
+  --blue-mid: var(--viz-blue-mid);
+  --pink-light: var(--viz-pink-light);
+  --orange-base: var(--viz-orange-base);
+  --olive-base: var(--viz-olive-base);
+  --stack-primary: var(--viz-blue-base);
+  --stack-secondary: var(--viz-gold-base);
+  --stack-tertiary: var(--viz-olive-base);
+  --negative: var(--viz-orange-base);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --ds-bg: #181818;
+    --ds-surface: var(--color-surface, #212121);
+    --ds-surface-secondary: var(--color-surface-secondary, #181818);
+    --ds-surface-tertiary: var(--color-surface-tertiary, #131313);
+    --ds-border-subtle: var(--color-border-subtle, rgba(255, 255, 255, 0.05));
+    --ds-border: var(--color-border, rgba(255, 255, 255, 0.1));
+    --ds-border-strong: var(--color-border-strong, rgba(255, 255, 255, 0.15));
+    --ds-text-primary: var(--color-text-primary, #ffffff);
+    --ds-text: var(--color-text, #dfdfdf);
+    --ds-text-secondary: var(--color-text-secondary, #cdcdcd);
+    --ds-text-muted: var(--color-text-secondary, #cdcdcd);
+    --ds-text-tertiary: var(--color-text-tertiary, #afafaf);
+    --ds-blue: var(--color-text-info, var(--ds-blue-300));
+    --ds-blue-bright: var(--color-ring, var(--ds-blue-300));
+    --ds-purple: var(--color-text-discovery-surface, var(--ds-purple-300));
+    --ds-green: var(--color-text-success-surface, var(--green-400, #04b84c));
+    --ds-green-bg: var(--color-background-success-surface, rgba(4, 184, 76, 0.15));
+    --ds-red: var(--color-text-danger-surface, var(--red-400, #fa423e));
+    --ds-red-bg: var(--color-background-danger-surface, rgba(250, 66, 62, 0.16));
+    --ds-yellow: var(--color-text-caution-surface, var(--yellow-400, #ffc300));
+    --ds-yellow-bg: var(--color-background-caution-surface, rgba(255, 195, 0, 0.15));
+    --ds-orange: var(--color-text-warning-surface, var(--orange-400, #fb6a22));
+    --ds-pink: var(--pink-500, #e04c91);
+    --ds-neutral: var(--color-text-tertiary, #afafaf);
+    --ds-edit-hover-bg: var(--color-background-primary-ghost-hover, rgb(255 255 255 / 8%));
+    --ds-menu-button-border: var(--color-border-subtle, rgba(255, 255, 255, 0.05));
+    --ds-overlay-bg: var(--codex-panel, var(--color-background-primary, #212121));
+    --ds-menu-bg: var(--ds-overlay-bg);
+    --ds-menu-text: var(--color-token-dropdown-foreground, var(--color-text-foreground, var(--ds-text-primary)));
+    --ds-menu-border: var(--color-token-dropdown-border, var(--color-border, rgba(255, 255, 255, 0.1)));
+    --ds-menu-hover-bg: rgb(255 255 255 / 8%);
+    --ds-menu-selected-bg: rgb(255 255 255 / 8%);
+    --ds-edit-hover-bg: rgb(255 255 255 / 8%);
+    --ds-drag-preview-bg: var(--color-background-button-secondary-hover, rgb(255 255 255 / 10%));
+    --ds-drag-preview-border: var(--color-border, rgba(255, 255, 255, 0.14));
+    --ds-shadow: var(--codex-shadow-lg);
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --ds-bg: #181818;
+  --ds-surface: var(--codex-panel);
+  --ds-surface-secondary: var(--codex-bg-under);
+  --ds-surface-tertiary: var(--codex-control);
+  --ds-border-subtle: var(--codex-border-light);
+  --ds-border: var(--codex-border);
+  --ds-border-strong: var(--codex-border-heavy);
+  --ds-text-primary: var(--codex-text);
+  --ds-text: var(--codex-text);
+  --ds-text-secondary: var(--codex-text-secondary);
+  --ds-text-muted: var(--codex-text-secondary);
+  --ds-text-tertiary: var(--codex-text-tertiary);
+  --ds-blue: var(--color-text-info, var(--ds-blue-300));
+  --ds-blue-bright: var(--codex-accent);
+  --ds-purple: var(--color-text-discovery-surface, var(--ds-purple-300));
+  --ds-green: var(--color-text-success-surface, var(--green-400, #04b84c));
+  --ds-green-bg: var(--color-background-success-surface, rgba(4, 184, 76, 0.15));
+  --ds-red: var(--color-text-danger-surface, var(--red-400, #fa423e));
+  --ds-red-bg: var(--color-background-danger-surface, rgba(250, 66, 62, 0.16));
+  --ds-yellow: var(--color-text-caution-surface, var(--yellow-400, #ffc300));
+  --ds-yellow-bg: var(--color-background-caution-surface, rgba(255, 195, 0, 0.15));
+  --ds-orange: var(--color-text-warning-surface, var(--orange-400, #fb6a22));
+  --ds-pink: var(--pink-500, #e04c91);
+  --ds-neutral: var(--color-text-tertiary, #afafaf);
+  --ds-edit-hover-bg: var(--color-background-primary-ghost-hover, rgb(255 255 255 / 8%));
+  --ds-menu-button-border: var(--color-border-subtle, rgba(255, 255, 255, 0.05));
+  --ds-overlay-bg: #212121;
+  --ds-menu-bg: var(--ds-overlay-bg);
+  --ds-menu-text: var(--color-token-dropdown-foreground, var(--color-text-foreground, var(--ds-text-primary)));
+  --ds-menu-border: var(--color-token-dropdown-border, var(--color-border, rgba(255, 255, 255, 0.1)));
+  --ds-menu-hover-bg: rgb(255 255 255 / 8%);
+  --ds-menu-selected-bg: rgb(255 255 255 / 8%);
+  --ds-table-row-text: #c9c9c9;
+  --ds-drag-preview-bg: var(--color-background-button-secondary-hover, rgb(255 255 255 / 10%));
+  --ds-drag-preview-border: var(--color-border, rgba(255, 255, 255, 0.14));
+  --ds-shadow: var(--codex-shadow-lg);
+}