@autional-cn/tokens 0.1.0-rc

package/primitives.css

@@ -0,0 +1,525 @@
+/**
+ * Autional canonical primitives — hand-maintained (not generated).
+ *
+ * Content-site brand surfaces and documentation patterns, consolidated from
+ * legacy/styles/{website,docs-site,developer-site}-global.css.
+ * Consumes only CSS variables from @autional-cn/tokens, so the visual result
+ * follows whichever profile stylesheet is loaded (docs / developer / marketing).
+ */
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  /* Full-page wash. Sits on top of the body background-color set by tokens.css,
+     so the dark variant needs only .dark — no per-profile override. */
+  body {
+    background-image: var(--image-page-light);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-body-md);
+  }
+
+  .dark body {
+    background-image: var(--image-page-dark);
+  }
+
+  ::selection {
+    background: color-mix(in srgb, var(--color-sky-500) 35%, transparent);
+    color: var(--color-text-primary);
+  }
+}
+
+@layer components {
+  /* ── 页面模式层（P6）────────────────────────────────────────────────────────
+     U66 的**根因项**：「canonical 只到 primitives ⇒ 10 个内容站各自重写一遍 =
+     漂移重新长出」。参考站的美全手写在 sites/web/src/pages/index.astro 里
+     （hero 版式 / 产品框 / 统计带 / 收尾 CTA），而 primitives 在此之前只有
+     按钮、卡片这类**零件**，没有「一页长什么样」。
+
+     零件统一了、页面没统一，各站就会用同样的零件搭出不同的页面——这正是
+     「看起来不像同一个产品」在最上层的原因。
+
+     这里给出页面级的三件事：节奏、hero 版式、三类文字角色。
+     只吃令牌，所以跟着 profile 与主题走。 */
+  /* 用 margin-block-start 而不是 padding-block：
+     第一版写成 padding-block，结果是**相邻两节各留 48px = 96px**，
+     而各站原来的写法是 mt-16（64px 的间隙）。令牌的名字就叫 section-**gap**
+     ——它是「两节之间留多少」，不是「每节上下各留多少」。写成 padding 等于
+     把语义理解错了一次，而且方向是**变松**，与收敛的意图相反。
+     :first-child 清零，避免首节前面平白多一段。 */
+  .page-section {
+    margin-block-start: var(--space-section-gap);
+  }
+
+  .page-section:first-child {
+    margin-block-start: 0;
+  }
+
+  /* 眉标**不在这里重复定义**：primitives 已有 .brand-kicker（胶囊徽标，带边框与底色），
+     各站的小节眉标用的就是它。我一开始顺手加了个 .page-eyebrow，写完才发现它与
+     .brand-kicker 是同一个角色——只是少了胶囊外壳。这正是我一路在批评的
+     「同一个东西两种说法」，所以删掉自己刚加的那个，而不是留下两个。
+     真需要「无外壳的眉标」时再加，那时它会有实际使用场景。 */
+
+  /* 小节标题。实测 developer 一个站就手写了 6 遍
+     `mt-4 text-3xl font-bold tracking-[...] text-primary-900` —— 这正是
+     「canonical 只到 primitives，各站自己重写一遍」的样子。
+     heading-lg 是设计系统里为此准备的档位（30px / 1.35 / 700 / -0.01em）。 */
+  .page-heading {
+    font-size: var(--font-size-heading-lg);
+    line-height: var(--line-height-heading-lg);
+    font-weight: 700;
+    letter-spacing: var(--letter-spacing-heading-lg);
+    color: var(--color-text-primary);
+  }
+
+  /* .page-hero 与 .page-title 已删除 —— 它们是**没有落地过**的定义。
+     按我自己定的标准（「定义了一个类不等于统一了页面」），没有采用者就该删掉，
+     而不是留着等哪天有人误用。
+
+     删之前查了证据，不是凭感觉：
+       · .page-title 用 display-lg(40px)，而全舰队 h1 实际是 text-5xl(48px) +
+         sm:text-6xl(60px)——**没有任何站点用 40px 做 h1**。而且 60px 这一档
+         设计系统里根本没有（只有 48 和 72），要匹配得先补一档，那是另一个决定。
+       · .page-hero 设 padding-block，而 developer 的 hero 本来就不带上下内边距
+         （间距由布局给）。同样是凭空造的。
+
+     .page-lead 保留但**改了颜色**：原写 --color-text-secondary（= primary-600，偏蓝），
+     而全舰队 lead 段落用的是 text-neutral-600（灰）。设计系统里有 --color-text-muted
+     (#64748d)，与站点在用的 neutral-600 (#64748b) 几乎同色——按「把舰队已收敛的事实
+     定义下来」的原则，用后者。 */
+  /* 刻意**不设 max-width**：第一版设成了 prose-width(768px)，结果采用它的那个
+     引导段落从 max-w-2xl(672px) 被撑宽到 768px，整段重排，视觉回归差 8.385%。
+     而我在提交里把这次改动描述成「颜色肉眼看不出差」——**描述与事实不符**。
+     一个类该管排版（字号/行高/颜色），不该顺手替调用方决定行宽：
+     引导段落的行宽是编辑决策（短引导用更窄的行更易读），不是排版令牌能定的。
+     现在调用方自己带 max-w-*。 */
+  .page-lead {
+    font-size: var(--font-size-body-lg);
+    line-height: var(--line-height-body-lg);
+    color: var(--color-text-muted);
+  }
+
+  /* ── 站点顶栏（P5.4）────────────────────────────────────────────────────────
+     14 个门户此前各写各的顶栏。实测：高度跨度 48–117px、position 分 static/sticky
+     两派、品牌标有三种形态（logo-mark.svg / 内联 svg / status 拿一枚 lucide 的
+     activity 状态图标当 logo）。
+
+     顶栏是每个页面都出现的第一条水平线——高度、位置、品牌标不一致，是最容易被
+     一眼看穿的「不像同一个产品」。图标套件已经统一（第 12 道闸门守住），顶栏是
+     紧接着的第二条。
+
+     这里统一的是**高度 / 位置 / 底边 / 品牌标尺寸**，不是内容：控制台的租户切换器
+     与文档站的导航链接本来就该不同，强行统一内容反而是错的。消费方挂 class 即可，
+     不要再各写 height 与 position。 */
+  .site-header {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+    height: var(--layout-header-height);
+    display: flex;
+    align-items: center;
+    background-color: var(--color-bg-surface);
+    border-bottom: 1px solid var(--color-border-subtle);
+  }
+
+  .site-header__inner {
+    display: flex;
+    align-items: center;
+    gap: var(--space-6);
+    width: 100%;
+    max-width: var(--layout-max-width);
+    height: 100%;
+    margin-inline: auto;
+    padding-inline: var(--space-6);
+  }
+
+  /* 品牌标：唯一允许的形态是 logo-mark 资产。status 此前用 lucide 的 activity
+     图标充当 logo——那是状态图标，不是品牌标。 */
+  .site-header__brand {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    height: 100%;
+    flex-shrink: 0;
+    text-decoration: none;
+  }
+
+  .site-header__brand img,
+  .site-header__brand > svg {
+    height: 32px;
+    width: auto;
+    display: block;
+  }
+
+  .site-header__title {
+    font-size: var(--font-size-body-md);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    color: var(--color-text-primary);
+  }
+
+  .site-header__nav {
+    display: flex;
+    align-items: center;
+    gap: var(--space-5);
+    height: 100%;
+    margin-inline-start: auto;
+  }
+
+  /* 半透明毛玻璃变体：营销与文档站此前各写 bg-white/80 + backdrop-blur-xl。
+     观感保留，但底色与模糊量改由令牌给，不再每站手填。 */
+  .site-header--translucent {
+    background-color: color-mix(in srgb, var(--color-bg-surface) 80%, transparent);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+  }
+
+  @media (max-width: 767px) {
+    .site-header { height: var(--layout-header-height-compact); }
+    .site-header__inner { padding-inline: var(--space-4); }
+  }
+
+  /* ── Shared brand surfaces ── */
+  .brand-shell {
+    border-radius: var(--radius-xl);
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: var(--shadow-brand);
+    -webkit-backdrop-filter: blur(24px);
+    backdrop-filter: blur(24px);
+  }
+
+  .dark .brand-shell {
+    border-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .brand-card {
+    border-radius: var(--radius-lg);
+    border: 1px solid color-mix(in srgb, var(--color-primary-100) 90%, transparent);
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: var(--shadow-card);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+  }
+
+  .dark .brand-card {
+    border-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .brand-button-primary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    border-radius: var(--radius-full);
+    background-color: var(--color-primary-700);
+    padding: 12px 24px;
+    min-height: var(--a11y-touch-target);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: 600;
+    color: #ffffff;
+    box-shadow: var(--shadow-soft);
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--motion-duration-fast);
+  }
+
+  .brand-button-primary:hover {
+    transform: translateY(-2px);
+    background-color: var(--color-primary-600);
+  }
+
+  .brand-button-secondary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    border-radius: var(--radius-full);
+    border: 1px solid var(--color-primary-200);
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 12px 24px;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: 600;
+    color: var(--color-primary-700);
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--motion-duration-fast);
+  }
+
+  .brand-button-secondary:hover {
+    transform: translateY(-2px);
+    border-color: var(--color-primary-300);
+    background-color: var(--color-sky-50);
+  }
+
+  .dark .brand-button-secondary {
+    border-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.05);
+    color: #ffffff;
+  }
+
+  .dark .brand-button-secondary:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .brand-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    border-radius: var(--radius-full);
+    border: 1px solid var(--color-primary-100);
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 6px 16px;
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-label-caps);
+    color: var(--color-primary-700);
+    box-shadow: var(--shadow-soft);
+  }
+
+  .dark .brand-kicker {
+    border-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.05);
+    color: var(--color-sky-200);
+  }
+
+  .brand-grid {
+    background-image: var(--image-brand-grid);
+    background-position: center;
+    background-size: 28px 28px;
+  }
+
+  .dark .brand-grid {
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  }
+
+  /* ── Documentation ──
+     Ported from the docs-site global sheet. These classes assume a light surface
+     (docs/reference/wiki ship light-only), so heading/link colors go through the
+     semantic text tokens — identical values in light, and they follow `.dark`. */
+  .docs-nav-link {
+    display: block;
+    border-radius: var(--radius-md);
+    padding: 12px 16px;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: 500;
+    color: var(--color-neutral-600);
+    transition-property: color, background-color, border-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .docs-nav-link:hover {
+    background-color: var(--color-primary-50);
+    color: var(--color-primary-700);
+  }
+
+  .docs-nav-link[data-active='true'] {
+    background-color: var(--color-primary-700);
+    color: #ffffff;
+    box-shadow: var(--shadow-soft);
+  }
+
+  .docs-prose > :first-child {
+    margin-top: 0;
+  }
+
+  .docs-prose {
+    max-width: var(--layout-prose-width);
+    color: var(--color-text-primary);
+  }
+
+  .docs-prose h1 {
+    margin-top: 0;
+    margin-bottom: 24px;
+    font-size: var(--font-size-4xl);
+    line-height: var(--line-height-display-lg);
+    font-weight: 800;
+    letter-spacing: var(--letter-spacing-display-xl);
+    color: var(--color-text-primary);
+  }
+
+  @media (min-width: 640px) {
+    .docs-prose h1 {
+      font-size: var(--font-size-display-xl);
+      line-height: var(--line-height-display-xl);
+    }
+  }
+
+  .docs-prose h2 {
+    margin-top: 48px;
+    margin-bottom: 16px;
+    font-size: var(--font-size-2xl);
+    line-height: var(--line-height-2xl);
+    font-weight: 700;
+    letter-spacing: var(--letter-spacing-heading-lg);
+    color: var(--color-text-primary);
+  }
+
+  .docs-prose h3 {
+    margin-top: 36px;
+    margin-bottom: 12px;
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+
+  .docs-prose p {
+    margin-top: 20px;
+    margin-bottom: 0;
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-body-md);
+    color: var(--color-neutral-600);
+  }
+
+  .docs-prose ul,
+  .docs-prose ol {
+    margin-top: 16px;
+    padding-left: 24px;
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-body-md);
+    color: var(--color-neutral-600);
+  }
+
+  .docs-prose li + li {
+    margin-top: 8px;
+  }
+
+  .docs-prose li::marker {
+    color: var(--color-primary-500);
+  }
+
+  .docs-prose a {
+    font-weight: 500;
+    color: var(--color-brand);
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-primary-200);
+    text-underline-offset: 4px;
+  }
+
+  .docs-prose pre {
+    margin-top: 20px;
+    overflow-x: auto;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-developer);
+    padding: 16px 20px;
+    font-size: var(--font-size-code-md);
+    line-height: var(--line-height-code-md);
+    color: var(--color-text-inverse);
+    box-shadow: var(--shadow-code);
+  }
+
+  .docs-prose code:not(pre code) {
+    border-radius: var(--radius-sm);
+    background-color: var(--color-primary-50);
+    padding: 2px 6px;
+    font-size: 0.92em;
+    color: var(--color-primary-800);
+  }
+
+  .docs-prose table {
+    margin-top: 20px;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-primary-100);
+    background-color: #ffffff;
+    text-align: left;
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    box-shadow: var(--shadow-soft);
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .docs-prose thead tr {
+    background-color: var(--color-primary-900);
+    color: #ffffff;
+  }
+
+  .docs-prose th,
+  .docs-prose td {
+    border-bottom: 1px solid var(--color-primary-100);
+    padding: 12px 16px;
+    vertical-align: top;
+  }
+
+  .docs-prose tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  .docs-prose blockquote {
+    margin-top: 20px;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-sky-100);
+    background-color: color-mix(in srgb, var(--color-sky-50) 80%, transparent);
+    padding: 16px 20px;
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-lg);
+    color: var(--color-neutral-700);
+  }
+
+  /* ── Developer portal ── */
+  .developer-panel {
+    border-radius: var(--radius-xxl);
+    border: 1px solid color-mix(in srgb, var(--color-bg-developer) 90%, transparent);
+    background-color: var(--color-bg-developer);
+    color: var(--color-text-inverse);
+    box-shadow: var(--shadow-deep);
+  }
+
+  .developer-code {
+    display: block;
+    overflow-x: auto;
+    border-radius: var(--radius-md);
+    background-color: var(--color-bg-developer);
+    padding: 16px 20px;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-code-md);
+    line-height: var(--line-height-lg);
+    color: var(--color-text-inverse);
+  }
+
+  .developer-chip {
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-full);
+    border: 1px solid var(--color-primary-100);
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 4px 12px;
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    font-weight: 500;
+    color: var(--color-neutral-600);
+  }
+
+  .developer-nav-link {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    font-weight: 500;
+    color: var(--color-neutral-500);
+    transition-property: color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .developer-nav-link:hover,
+  .developer-nav-link[data-active='true'] {
+    color: var(--color-primary-700);
+  }
+}

package/profiles/developer.css

@@ -0,0 +1,48 @@
+/**
+ * Autional profile: developer — GENERATED FILE — DO NOT EDIT. Source: tokens/tokens.json · Regenerate: pnpm gen · v0.1.0-rc
+ * Load AFTER @autional-cn/tokens/tokens.css.
+ */
+
+:root {
+/* ── color ── */
+--color-primary-50: #e9f3f9;
+--color-primary-100: #d1e5f2;
+--color-primary-200: #9ec2db;
+--color-primary-300: #6a9fbe;
+--color-primary-400: #3c779a;
+--color-primary-500: #235f84;
+--color-primary-600: #124b70;
+--color-primary-700: #003153;
+--color-primary-800: #032845;
+--color-primary-900: #021c31;
+--color-sky-50: #eef9fd;
+--color-sky-100: #d6f0fa;
+--color-sky-200: #b4e3f6;
+--color-sky-300: #87ceeb;
+--color-sky-400: #59bcde;
+--color-sky-500: #3094b8;
+--color-sky-600: #24778f;
+--color-sky-700: #1f6173;
+--color-sky-800: #1d505f;
+--color-sky-900: #1d434f;
+--color-amber-50: #fff8e6;
+--color-amber-100: #ffefbf;
+--color-amber-200: #ffdf80;
+--color-amber-300: #ffcf40;
+--color-amber-400: #ffc71a;
+--color-amber-500: #ffbf00;
+--color-amber-600: #d69f00;
+--color-amber-700: #a67800;
+--color-amber-800: #755400;
+--color-amber-900: #4a3500;
+
+/* ── shadow ── */
+--shadow-soft: 0 16px 40px rgba(0, 49, 83, 0.10);
+--shadow-card: 0 20px 60px rgba(3, 20, 37, 0.08);
+--shadow-brand: 0 32px 100px rgba(3, 20, 37, 0.12);
+}
+
+:root:not(.dark):not([data-theme="dark"]):not([data-theme="authenticator"]) {
+/* ── color ── */
+--color-border-subtle: var(--color-primary-100);
+}

package/profiles/docs.css

@@ -0,0 +1,48 @@
+/**
+ * Autional profile: docs — GENERATED FILE — DO NOT EDIT. Source: tokens/tokens.json · Regenerate: pnpm gen · v0.1.0-rc
+ * Load AFTER @autional-cn/tokens/tokens.css.
+ */
+
+:root {
+/* ── color ── */
+--color-primary-50: #e9f3f9;
+--color-primary-100: #d1e5f2;
+--color-primary-200: #9ec2db;
+--color-primary-300: #6a9fbe;
+--color-primary-400: #3c779a;
+--color-primary-500: #235f84;
+--color-primary-600: #124b70;
+--color-primary-700: #003153;
+--color-primary-800: #032845;
+--color-primary-900: #021c31;
+--color-sky-50: #eef9fd;
+--color-sky-100: #d6f0fa;
+--color-sky-200: #b4e3f6;
+--color-sky-300: #87ceeb;
+--color-sky-400: #59bcde;
+--color-sky-500: #3094b8;
+--color-sky-600: #24778f;
+--color-sky-700: #1f6173;
+--color-sky-800: #1d505f;
+--color-sky-900: #1d434f;
+--color-amber-50: #fff8e6;
+--color-amber-100: #ffefbf;
+--color-amber-200: #ffdf80;
+--color-amber-300: #ffcf40;
+--color-amber-400: #ffc71a;
+--color-amber-500: #ffbf00;
+--color-amber-600: #d69f00;
+--color-amber-700: #a67800;
+--color-amber-800: #755400;
+--color-amber-900: #4a3500;
+
+/* ── shadow ── */
+--shadow-soft: 0 16px 40px rgba(0, 49, 83, 0.10);
+--shadow-card: 0 20px 60px rgba(3, 20, 37, 0.08);
+--shadow-brand: 0 32px 100px rgba(3, 20, 37, 0.12);
+}
+
+:root:not(.dark):not([data-theme="dark"]):not([data-theme="authenticator"]) {
+/* ── color ── */
+--color-border-subtle: var(--color-primary-100);
+}