create-yss-spec 3.5.2 → 3.5.3

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

@@ -1,327 +0,0 @@
-.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

@@ -1,225 +0,0 @@
-@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);
-}