@kupola/kupola 1.2.0

package/css/scaffold.css

@@ -0,0 +1,145 @@
+/*
+ * scaffold.css - Layout, reset, typography utilities, shared atoms
+ * Provides the page chrome consumed by preview/component-*.html and
+ * ui_kits/*.html. Component-specific styles live in components.css.
+ */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  background: var(--bg-base-default);
+  color: var(--text-default);
+  font-family: var(--body-base-font-family);
+  font-size: var(--body-base-font-size);
+  line-height: var(--body-base-line-height);
+  font-weight: var(--body-base-font-weight);
+  min-height: 100%;
+}
+html, body { overflow-x: hidden; max-width: 100%; }
+body { padding: 0; }
+img, svg, video, canvas { max-width: 100%; }
+img.icon {
+  opacity: 1;
+  filter: var(--icon-filter, none);
+}
+a { color: var(--text-default); text-decoration: none; }
+a:hover { color: var(--text-default-hover); }
+hr { border: 0; border-top: 1px solid var(--border-neutral-l1); margin: var(--spacer-24) 0; }
+
+/* Section / heading helpers */
+.h1 { font-family: var(--heading-2xl-font-family); font-size: var(--heading-2xl-font-size); line-height: var(--heading-2xl-line-height); font-weight: var(--heading-2xl-font-weight); color: var(--text-default); }
+.h2 { font-family: var(--heading-md-font-family); font-size: var(--heading-md-font-size); line-height: var(--heading-md-line-height); font-weight: var(--heading-md-font-weight); color: var(--text-default); }
+.h3 { font-family: var(--heading-sm-font-family); font-size: var(--heading-sm-font-size); line-height: var(--heading-sm-line-height); font-weight: var(--heading-sm-font-weight); color: var(--text-default); }
+.eyebrow { font-size: var(--body-xs-font-size); line-height: var(--body-xs-line-height); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }
+.text-secondary { color: var(--text-secondary); }
+.text-tertiary { color: var(--text-tertiary); }
+
+/* ===== Hero / brand title =====
+ * Display title for marketing heroes ("The Real AI Engineer"-style). Each
+ * brand-led letter (T / R / A / E or "T"-"R"-"A"-"E") gets its own brand
+ * accent. Use the .ds-hero-title element with .brand1-.brand4 children.
+ * Numerics inside any hero MUST inherit the body sans (NOT mono) — heroes
+ * are typeset content, not data.
+ */
+.ds-hero-title {
+  font-family: var(--heading-3xl-font-family);
+  font-size: clamp(40px, 6vw, 72px);
+  line-height: 1.04;
+  font-weight: var(--heading-3xl-font-weight, 600);
+  letter-spacing: -0.03em;
+  color: var(--text-default);
+}
+.ds-hero-title .brand1 { color: var(--bg-brand); }
+.ds-hero-title .brand2 { color: var(--text-default); }
+.ds-hero-title .brand3 { color: var(--bg-brand); }
+.ds-hero-title .brand4 { color: var(--text-default); }
+.ds-hero-title__sub {
+  display: block;
+  margin-top: var(--spacer-12);
+  font-size: clamp(28px, 4vw, 56px);
+  color: var(--text-secondary);
+  letter-spacing: -0.02em;
+}
+
+/* ===== Section title with mono index =====
+ * Pattern: [00] brand-mono index above a 2-line section heading.
+ * Reference: trae.ai value-section card titles.
+ */
+.ds-section-title__index {
+  display: block;
+  font-family: var(--code-editor-font-family, 'JetBrains Mono', ui-monospace, monospace);
+  font-size: var(--body-sm-font-size, 14px);
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--bg-brand);
+  margin-bottom: var(--spacer-16);
+}
+.ds-section-title {
+  font-family: var(--heading-xl-font-family, var(--heading-3xl-font-family));
+  font-size: clamp(24px, 2.4vw, 32px);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--text-default);
+  font-weight: var(--font-weight-strong, 600);
+  margin: 0;
+}
+
+/* ===== Layout helpers ===== */
+.row { display: flex; gap: var(--spacer-12); flex-wrap: wrap; align-items: center; }
+.col { display: flex; flex-direction: column; gap: var(--spacer-12); }
+.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacer-16); }
+.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacer-16); }
+.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacer-16); }
+.stack-8 { display: flex; flex-direction: column; gap: var(--spacer-8); }
+.stack-12 { display: flex; flex-direction: column; gap: var(--spacer-12); }
+.stack-16 { display: flex; flex-direction: column; gap: var(--spacer-16); }
+.stack-24 { display: flex; flex-direction: column; gap: var(--spacer-24); }
+.stack-40 { display: flex; flex-direction: column; gap: var(--spacer-40); }
+
+/* preview header (per page) */
+.pv-header { margin-bottom: var(--spacer-32); padding-bottom: var(--spacer-16); border-bottom: 1px solid var(--border-neutral-l1); }
+.pv-header h1 { font-size: var(--heading-lg-font-size); line-height: var(--heading-lg-line-height); font-weight: var(--heading-lg-font-weight); margin-bottom: var(--spacer-4); }
+.pv-header p { color: var(--text-secondary); font-size: var(--body-sm-font-size); }
+
+.pv-section { margin-bottom: var(--spacer-32); }
+.pv-section__title { font-size: var(--heading-xs-font-size); font-weight: var(--heading-xs-font-weight); margin-bottom: var(--spacer-12); color: var(--text-default); }
+.pv-section__sub { font-size: var(--body-xs-font-size); color: var(--text-tertiary); margin-bottom: var(--spacer-12); }
+
+/* ===== Popover ===== */
+.ds-popover {
+  background: var(--bg-overlay-l1);
+  border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4);
+  padding: var(--spacer-12);
+  box-shadow: 0 12px 32px rgba(0,0,0,.36);
+}
+
+/* ===== Code block ===== */
+.ds-code {
+  background: var(--bg-overlay-l1);
+  border: 1px solid var(--border-neutral-l1);
+  border-radius: var(--radius-4);
+  padding: var(--spacer-12) var(--spacer-16);
+  color: var(--text-default);
+  font-family: var(--code-editor-font-family);
+  font-size: var(--code-editor-font-size);
+  line-height: var(--code-editor-line-height);
+  white-space: pre;
+  overflow: auto;
+}
+
+/* ===== Kbd =====
+ * Defined in components.css (see ── Kbd ─ section). Avoid duplicating here.
+ */
+
+/* ===== Mono / Numeric utilities =====
+ * Anything code-like or numeric (counts, currencies, percentages, IDs,
+ * tabular cells, kbd, code) MUST use the mono token + tabular figures.
+ */
+.mono,
+.num,
+code, kbd, samp, pre {
+  font-family: var(--code-editor-font-family);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1, "lnum" 1;
+}

package/css/states.css

@@ -0,0 +1,316 @@
+/* ===== Component States ===== */
+
+/* Loading State */
+.ds-loading {
+  position: relative;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+.ds-loading::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(224, 226, 242, 0.1), transparent);
+  animation: loading-shimmer 1.5s infinite;
+}
+
+@keyframes loading-shimmer {
+  100% { left: 100%; }
+}
+
+.ds-btn--loading {
+  color: transparent !important;
+}
+
+.ds-btn--loading::after {
+  content: '';
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: loading-spin 0.8s linear infinite;
+}
+
+@keyframes loading-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Disabled State */
+.ds-btn[disabled],
+.ds-input[disabled],
+.ds-select__trigger[disabled],
+.ds-textarea[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Focus State */
+.ds-btn:focus-visible,
+.ds-input:focus-within,
+.ds-select__trigger:focus-visible,
+.ds-textarea:focus {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+/* Error State */
+.ds-input--error {
+  border-color: var(--status-error-default) !important;
+}
+
+.ds-input--error:focus-within {
+  border-color: var(--status-error-default) !important;
+  background: var(--status-error-surface-l1) !important;
+}
+
+.ds-field__error {
+  font-size: var(--body-xs-font-size);
+  color: var(--status-error-default);
+  margin-top: var(--spacer-4);
+}
+
+/* Success State */
+.ds-input--success {
+  border-color: var(--status-success-default);
+}
+
+.ds-input--success:focus-within {
+  border-color: var(--status-success-default);
+  background: var(--status-success-surface-l1);
+}
+
+/* Warning State */
+.ds-input--warning {
+  border-color: var(--status-warning-default);
+}
+
+.ds-input--warning:focus-within {
+  border-color: var(--status-warning-default);
+  background: var(--status-warning-surface-l1);
+}
+
+/* Progress Circle States */
+.ds-progress-circle.ds-loading {
+  opacity: 0.6;
+}
+
+.ds-progress-circle.ds-loading .ds-progress-circle__bar {
+  animation: loading-spin 2s linear infinite;
+}
+
+/* Slider States */
+.ds-slider__input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-slider__input:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 4px;
+}
+
+.ds-slider.ds-loading .ds-slider__track {
+  opacity: 0.6;
+}
+
+/* Date Picker States */
+.ds-datepicker[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ds-datepicker__input-wrap[aria-invalid="true"] {
+  border-color: var(--status-error-default);
+}
+
+.ds-datepicker__nav[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* File Upload States */
+.ds-fileupload__dropzone[aria-disabled="true"],
+.ds-fileupload--disabled .ds-fileupload__dropzone {
+  opacity: 0.6;
+  cursor: not-allowed;
+  border-style: solid;
+  border-color: var(--border-neutral-l3);
+  background-color: var(--bg-overlay-l3);
+}
+
+.ds-fileupload__dropzone.is-error {
+  border-color: var(--status-error-default);
+  background-color: var(--status-error-surface-l1);
+}
+
+.ds-fileupload__dropzone.is-success {
+  border-color: var(--status-success-default);
+  background-color: var(--status-success-surface-l1);
+}
+
+/* Timeline States */
+.ds-timeline__item[aria-current="true"] .ds-timeline__marker {
+  box-shadow: 0 0 0 4px var(--bg-brand-popup);
+}
+
+.ds-timeline__item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Activity Rail States */
+.ds-activityrail__item[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-activityrail__item:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+/* Chat Composer States */
+.ds-chatcomposer__input[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Editor Tabs States */
+.ds-editortabs__tab[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-editortabs__close:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+/* Setting Row States */
+.ds-settingrow[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Status Bar States */
+.ds-statusbar__item[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-statusbar__item:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+/* Table Panel States */
+.ds-tablepanel.ds-loading {
+  opacity: 0.6;
+}
+
+.ds-tablepanel__table[aria-busy="true"] {
+  position: relative;
+}
+
+.ds-tablepanel__table[aria-busy="true"]::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.1);
+  z-index: 1;
+}
+
+/* Workbench Titlebar States */
+.ds-titlebar__traffic-btn:focus-visible {
+  outline: 2px solid var(--border-brand);
+  outline-offset: 2px;
+}
+
+.ds-titlebar__project[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Button Active State */
+.ds-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.ds-btn--sm:active:not(:disabled) {
+  transform: translateY(0.5px);
+}
+
+.ds-btn--lg:active:not(:disabled) {
+  transform: translateY(1.5px);
+}
+
+/* Input Hover State */
+.ds-input:hover:not([disabled]) {
+  border-color: var(--border-neutral-l3);
+}
+
+/* Card Hover State */
+.ds-card:hover {
+  border-color: var(--border-neutral-l2);
+}
+
+/* Tag Hover State */
+.ds-tag:hover {
+  opacity: 0.8;
+}
+
+/* Alert Hover State */
+.ds-alert:hover {
+  background-color: var(--bg-overlay-l1);
+}
+
+/* Nav List Item Active State */
+.ds-navlist__item:active {
+  background-color: var(--bg-overlay-l2);
+}
+
+.ds-navlist__item.is-active:active {
+  background-color: var(--bg-brand);
+}
+
+/* File Tree Row Active State */
+.ds-filetree__row:active {
+  background-color: var(--bg-overlay-l2);
+}
+
+/* Pagination Item Active State */
+.ds-pagination__item:active:not(:disabled) {
+  background-color: var(--bg-overlay-l2);
+}
+
+/* Toggle Active State */
+.ds-toggle input:checked + .ds-toggle__track {
+  background-color: var(--bg-brand);
+}
+
+/* Badge Pulse State */
+.ds-badge--pulse {
+  animation: badge-pulse 2s infinite;
+}
+
+@keyframes badge-pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(50, 240, 140, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(50, 240, 140, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(50, 240, 140, 0);
+  }
+}