@stcn52/pro 0.0.0-stage → 0.2.1

package/dist/tokens.css

@@ -0,0 +1,322 @@
+/* =============================================================================
+ * @stcn52/pro — design tokens
+ *
+ * The scale values are lifted verbatim from PingCode's own theme stylesheet
+ * (`.portal{--gray-*:…}`, `:root[theme=dark]`) so the restored Ship surface
+ * matches the product it reproduces. Everything above the raw scale is named by
+ * purpose, per the Klun front-end rules: `--surface-*`, `--fg-*`, `--accent`.
+ *
+ * Theme is selected with `data-theme="light" | "dark"` on any ancestor
+ * (usually <html>). `prefers-color-scheme` is honoured only when the host sets
+ * `data-theme="auto"`.
+ * ========================================================================== */
+
+:root,
+[data-theme='light'] {
+  /* ---- raw scale (PingCode) ------------------------------------------- */
+  --gray-10: #fff;
+  --gray-70: #f7f7f7;
+  --gray-80: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eee;
+  --gray-300: #ddd;
+  --gray-400: #cacaca;
+  --gray-500: #aaa;
+  --gray-600: #999;
+  --gray-700: #666;
+  --gray-800: #333;
+  --gray-900: #1f1f1f;
+
+  --brand-50: #f2f6ff;
+  --brand-100: #e6edff;
+  --brand-200: #c9dbff;
+  --brand-300: #9dbcff;
+  --brand-400: #80a8ff;
+  --brand-500: #6698ff; /* PingCode --primary */
+  --brand-600: #4c7fe6;
+  --brand-700: #3563bf;
+
+  --green-500: #73d897; /* --success */
+  --cyan-500: #5dcfff; /* --info    */
+  --amber-500: #ffcd5d; /* --warning */
+  /* The Marketplace's favourite star — measured rgb(255,159,115) on the live
+   * application cards. Not the amber warning tone. */
+  --star: #ff9f73;
+  --red-500: #ff7575; /* --danger  */
+
+  /* status palette used by Ship tags (sampled from the live product) */
+  --status-pending: #56abfb;
+  --status-completed: #73d897;
+  --status-in-progress: #fdc45c;
+  --status-blocked: #ff7575;
+  --status-todo: #cacaca;
+  --status-review: #9d8cff;
+
+  /* ---- semantic: brand ------------------------------------------------- */
+  --accent: var(--brand-500);
+  --accent-hover: var(--brand-400);
+  --accent-active: var(--brand-600);
+  --accent-soft: rgba(102, 152, 255, 0.1);
+  --accent-soft-hover: rgba(102, 152, 255, 0.16);
+  --accent-contrast: #fff;
+
+  /* ---- semantic: surfaces --------------------------------------------- */
+  --surface-app: #fff;
+  --surface-default: #fff;
+  --surface-panel: #fbfbfb;
+  --surface-float: #fff;
+  --surface-sunken: var(--gray-80);
+  --surface-header: #fff;
+  --surface-rail: #4a525b;
+  --surface-rail-hover: #56616d;
+  --surface-rail-active: #39414c; /* measured on the live rail's active item */
+  --surface-hover: var(--gray-100);
+  --surface-active: var(--gray-200);
+  --surface-selected: var(--accent-soft);
+  --surface-scrim: rgba(0, 0, 0, 0.55);
+  --surface-table-head: var(--gray-80);
+  --surface-table-row-hover: var(--gray-70);
+  /* The product's grid tints a selected row with the head's neutral tone and
+   * leaves the accent to the checkbox, so a row can be selected and still read as
+   * a row (measured off the reference: #fafafa under a #57abfb box). */
+  --surface-table-row-selected: var(--gray-80);
+
+  /* ---- semantic: foreground -------------------------------------------- */
+  --fg: #333;
+  --fg-strong: #1f1f1f;
+  --fg-muted: #666666; /* 5.74:1 on white */
+  /* The live grid's header text is #aaa; kept verbatim for fidelity even
+     though it is below AA. Use --fg-subtle (or --fg-muted) for anything that
+     must pass contrast. */
+  --fg-th: #aaaaaa;
+
+  --fg-subtle: #767676; /* 4.54:1 — PingCode's #999 fails AA, so the token is deepened */
+  --fg-label: #999999; /* the live sidebar group label; below AA, like --fg-th */
+  --fg-disabled: var(--gray-400);
+  --fg-on-rail: #ddd;
+  --fg-on-rail-muted: #9aa4af;
+  --fg-on-accent: #fff;
+  --fg-link: #3d6fd0; /* 4.79:1 on white; --accent is a fill, not a text colour */
+
+  /* ---- semantic: borders ----------------------------------------------- */
+  --border: var(--gray-200);
+  --border-strong: var(--gray-300);
+  --border-input: var(--gray-300);
+  --border-input-hover: var(--gray-400);
+  --border-divider: var(--gray-200);
+
+  /* ---- elevation -------------------------------------------------------- */
+  --shadow-header: 0 4px 8px 0 rgba(0, 0, 0, 0.03);
+  --shadow-popover: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
+  --shadow-dialog: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
+  --shadow-float-btn: 0 0 10px rgba(0, 0, 0, 0.1);
+  --shadow-float-btn-hover: 0 0 10px rgba(0, 0, 0, 0.25);
+  --shadow-table-fixed-left: 6px 0 6px 0 rgba(0, 0, 0, 0.05);
+  --shadow-table-fixed-right: -6px 0 6px 0 rgba(0, 0, 0, 0.05);
+  --shadow-switch-knob: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+  /* ---- typography ------------------------------------------------------- */
+  --font-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Helvetica Neue', 'Noto Sans',
+    'Noto Sans CJK SC', 'Microsoft Yahei', Arial, 'Hiragino Sans GB', sans-serif;
+  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+
+  --text-xs: 12px;
+  --text-sm: 13px;
+  --text-base: 14px;
+  --text-md: 15px;
+  --text-lg: 16px;
+  --text-xl: 20px;
+  --text-2xl: 24px;
+
+  --leading-tight: 1.3;
+  --leading-base: 1.5715; /* 22px @ 14px, PingCode's rhythm */
+  --leading-relaxed: 1.72;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-bold: 600;
+
+  /* ---- spacing / sizing ------------------------------------------------- */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+
+  /* The grid's header row and the selection bar that stands in for it are one
+   * measurement: the bar is not a different thing, it is that row. */
+  --table-head-height: 44px;
+
+  --radius-sm: 2px;
+  --radius: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  /* Search fields. The live top bar measures 16px on a 32px box (i.e. a full
+   * stadium); this restoration deliberately uses 8px so the box reads as a
+   * rounded rectangle — an agreed deviation, see docs/measurements.md. The
+   * page/list toolbar field keeps the measured 4.8px. */
+  --radius-search-header: 8px;
+  --radius-search-field: 4.8px;
+  --radius-pill: 999px;
+
+  /* Ship chrome geometry — measured from the live product */
+  --rail-width: 60px;
+  --rail-item: 60px;
+  --header-height: 52px;
+  --toolbar-height: 48px;
+  --footer-height: 48px;
+  --sidebar-width: 300px;
+
+  --sidebar-width-old: 260px; /* measured on the live product */
+  --sidebar-min-width: 220px;
+  --sidebar-max-width: 420px;
+
+  --control-height-sm: 24px;
+  --control-height: 32px;
+  --control-height-lg: 36px;
+
+  --z-popover: 1000;
+  --z-dialog: 1100;
+  --z-toast: 1200;
+  --z-tooltip: 1300;
+
+  --duration-fast: 120ms;
+  --duration: 180ms;
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+  color-scheme: light;
+}
+
+/* ---- dark theme --------------------------------------------------------- */
+:root[data-theme='dark'],
+[data-theme='dark'] {
+  --fg-th: #8b96a3;
+
+  --gray-10: #2a2e34;
+  --gray-70: #32363d;
+  --gray-80: #30353c;
+  --gray-100: #393e46;
+  --gray-200: #3c414a;
+  --gray-300: #464c57;
+  --gray-400: #5b6370;
+  --gray-500: #666e7d;
+  --gray-600: #6f7a8a;
+  --gray-700: #87909e;
+  --gray-800: #bcc4d1;
+  --gray-900: #d9dee6;
+
+  --brand-50: #323844;
+  --brand-100: #38414f;
+  --brand-200: #435066;
+  --brand-300: #4f6080;
+  --brand-400: #5c7bb8;
+  --brand-500: #6698ff;
+  --brand-600: #82aaff;
+  --brand-700: #a3c0ff;
+
+  --surface-app: #2a2e34;
+  --surface-default: #2a2e34;
+  --surface-panel: #30353c;
+  --surface-float: #393e46;
+  --surface-sunken: #32363d;
+  --surface-header: #30353c;
+  --surface-rail: #23272c;
+  --surface-rail-hover: #32373e;
+  --surface-rail-active: #2c3138;
+  --surface-hover: #3c414a;
+  --surface-active: #464c57;
+  --surface-selected: rgba(102, 152, 255, 0.16);
+  --surface-scrim: rgba(0, 0, 0, 0.65);
+  --surface-table-head: #32363d;
+  --surface-table-row-hover: #343941;
+  --surface-table-row-selected: #32363d;
+
+  --fg: #bcc4d1; /* 7.77:1 on --surface-app */
+  --fg-strong: #e4e9f0;
+  --fg-muted: #a2adbb; /* 6.00:1 */
+  --fg-subtle: #93a0b0; /* 5.13:1, 4.64:1 on the panel surface */
+  --fg-disabled: #5b6370;
+  --fg-on-rail: #bcc4d1;
+  --fg-on-rail-muted: #6f7a8a;
+  --fg-link: #82aaff;
+
+  --border: #3c414a;
+  --border-strong: #464c57;
+  --border-input: #464c57;
+  --border-input-hover: #5b6370;
+  --border-divider: #3c414a;
+
+  --shadow-header: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+  --shadow-popover: 0 2px 12px 0 rgba(0, 0, 0, 0.45);
+  --shadow-dialog: 0 8px 32px 0 rgba(0, 0, 0, 0.55);
+  --shadow-float-btn: 0 0 10px rgba(0, 0, 0, 0.25);
+  --shadow-float-btn-hover: 0 0 10px rgba(0, 0, 0, 0.45);
+  --shadow-table-fixed-left: 6px 0 6px 0 rgba(0, 0, 0, 0.1);
+  --shadow-table-fixed-right: -6px 0 6px 0 rgba(0, 0, 0, 0.1);
+  --shadow-switch-knob: 0 1px 3px rgba(0, 0, 0, 0.5);
+
+  --status-todo: #5b6370;
+
+  color-scheme: dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-theme='auto'] {
+    --gray-10: #2a2e34;
+    --gray-70: #32363d;
+    --gray-80: #30353c;
+    --gray-100: #393e46;
+    --gray-200: #3c414a;
+    --gray-300: #464c57;
+    --gray-400: #5b6370;
+    --gray-500: #666e7d;
+    --gray-600: #6f7a8a;
+    --gray-700: #87909e;
+    --gray-800: #bcc4d1;
+    --gray-900: #d9dee6;
+
+    --surface-app: #2a2e34;
+    --surface-default: #2a2e34;
+    --surface-panel: #30353c;
+    --surface-float: #393e46;
+    --surface-sunken: #32363d;
+    --surface-header: #30353c;
+    --surface-rail: #23272c;
+    --surface-rail-hover: #32373e;
+    --surface-rail-active: #2c3138;
+    --surface-hover: #3c414a;
+    --surface-active: #464c57;
+    --surface-selected: rgba(102, 152, 255, 0.16);
+    --surface-scrim: rgba(0, 0, 0, 0.65);
+    --surface-table-head: #32363d;
+    --surface-table-row-hover: #343941;
+
+    --fg: #bcc4d1;
+    --fg-strong: #e4e9f0;
+    --fg-muted: #a2adbb;
+    --fg-subtle: #93a0b0;
+    --fg-disabled: #5b6370;
+    --fg-link: #82aaff;
+
+    --border: #3c414a;
+    --border-strong: #464c57;
+    --border-input: #464c57;
+    --border-input-hover: #5b6370;
+    --border-divider: #3c414a;
+
+    --shadow-header: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    --shadow-popover: 0 2px 12px 0 rgba(0, 0, 0, 0.45);
+    --shadow-dialog: 0 8px 32px 0 rgba(0, 0, 0, 0.55);
+    --shadow-table-fixed-left: 6px 0 6px 0 rgba(0, 0, 0, 0.1);
+    --shadow-table-fixed-right: -6px 0 6px 0 rgba(0, 0, 0, 0.1);
+
+    --status-todo: #5b6370;
+
+    color-scheme: dark;
+  }
+}