@autional-cn/tokens 0.1.0-rc

package/tokens.css

@@ -0,0 +1,384 @@
+/**
+ * Autional Design Tokens — GENERATED FILE — DO NOT EDIT. Source: tokens/tokens.json · Regenerate: pnpm gen · v0.1.0-rc
+ */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('./fonts/inter-latin-wght-normal.woff2') format('woff2');
+}
+
+:root {
+/* ── color ── */
+--color-primary-50: #e8f1f8;
+--color-primary-100: #d1e3f1;
+--color-primary-200: #a3c7e3;
+--color-primary-300: #75abd5;
+--color-primary-400: #478fc7;
+--color-primary-500: #235f84;
+--color-primary-600: #004565;
+--color-primary-700: #003153;
+--color-primary-800: #002540;
+--color-primary-900: #041d31;
+--color-sky-50: #f2fafd;
+--color-sky-100: #eef9fd;
+--color-sky-200: #d5f0f9;
+--color-sky-300: #bde6f5;
+--color-sky-400: #a2dcf0;
+--color-sky-500: #87ceeb;
+--color-sky-600: #64b4d8;
+--color-sky-700: #429bc5;
+--color-sky-800: #2d7ca3;
+--color-sky-900: #1c5d7e;
+--color-amber-50: #fffcf0;
+--color-amber-100: #fff8e6;
+--color-amber-200: #ffefb3;
+--color-amber-300: #ffe480;
+--color-amber-400: #ffd94d;
+--color-amber-500: #ffbf00;
+--color-amber-600: #d9a300;
+--color-amber-700: #b38700;
+--color-amber-800: #8c6b00;
+--color-amber-900: #664f00;
+--color-neutral-0: #ffffff;
+--color-neutral-50: #fafbfc;
+--color-neutral-100: #f7fafd;
+--color-neutral-200: #eef2f6;
+--color-neutral-300: #dce3ea;
+--color-neutral-400: #b0bcc8;
+--color-neutral-500: #8896a6;
+--color-neutral-600: #64748b;
+--color-neutral-700: #475569;
+--color-neutral-800: #334155;
+--color-neutral-900: #1e293b;
+--color-success: #52c41a;
+--color-warning: #faad14;
+--color-danger: #ff4d4f;
+--color-danger-text: #c62828;
+--color-success-text: #2e7213;
+--color-success-soft: #ebfbe5;
+--color-warning-soft: #fef4e1;
+--color-danger-soft: #fce4e4;
+--color-warning-text: #966003;
+--color-text-disabled: var(--color-neutral-400);
+--color-info: #1890ff;
+--color-chart-1: #003153;
+--color-chart-2: #235f84;
+--color-chart-3: #429bc5;
+--color-chart-4: #b38700;
+--color-chart-5: #664f00;
+--color-chart-6: #059669;
+--color-chart-7: #8b5cf6;
+--color-chart-8: #ef4444;
+--color-method-get: var(--color-primary-600);
+--color-method-post: var(--color-success);
+--color-method-put: var(--color-amber-600);
+--color-method-patch: var(--color-sky-600);
+--color-method-delete: var(--color-danger);
+--color-method-head: var(--color-neutral-500);
+--color-bg-primary: var(--color-neutral-50);
+--color-bg-surface: var(--color-neutral-0);
+--color-bg-elevated: var(--color-neutral-0);
+--color-bg-muted: #f8fbfe;
+--color-bg-developer: #031425;
+--color-text-primary: var(--color-primary-900);
+--color-text-secondary: var(--color-primary-600);
+--color-text-muted: #64748d;
+--color-text-inverse: #f8fbfe;
+--color-border: var(--color-border-subtle);
+--color-border-subtle: var(--color-primary-200);
+--color-border-strong: #2d7ca3;
+--color-brand-base: var(--color-primary-700);
+--color-brand-hover-base: var(--color-primary-600);
+--color-brand-dark: var(--color-sky-500);
+--color-brand-dark-hover: var(--color-sky-400);
+--color-on-brand-base: #ffffff;
+--color-on-brand: var(--color-on-brand-base);
+--color-on-brand-dark: #0a0f1a;
+--color-brand: var(--color-brand-base);
+--color-brand-hover: var(--color-brand-hover-base);
+--color-brand-soft: var(--color-sky-300);
+--color-brand-active: var(--color-primary-800);
+--color-accent: var(--color-amber-500);
+
+/* ── font ── */
+--font-sans: Inter, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
+--font-serif: 'Source Han Serif SC', 'Noto Serif SC', serif;
+--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+
+/* ── font-size ── */
+--font-size-xs: 12px;
+--line-height-xs: 16px;
+--font-size-sm: 14px;
+--line-height-sm: 20px;
+--font-size-base: 16px;
+--line-height-base: 24px;
+--font-size-lg: 18px;
+--line-height-lg: 28px;
+--font-weight-lg: 500;
+--font-size-xl: 20px;
+--line-height-xl: 28px;
+--font-weight-xl: 600;
+--font-size-2xl: 24px;
+--line-height-2xl: 32px;
+--font-weight-2xl: 700;
+--font-size-3xl: 30px;
+--line-height-3xl: 36px;
+--font-weight-3xl: 700;
+--font-size-4xl: 36px;
+--line-height-4xl: 40px;
+--font-size-display-2xl: 72px;
+--line-height-display-2xl: 1.16;
+--font-weight-display-2xl: 800;
+--letter-spacing-display-2xl: -0.02em;
+--font-size-display-xl: 48px;
+--line-height-display-xl: 1.16;
+--font-weight-display-xl: 800;
+--letter-spacing-display-xl: -0.02em;
+--font-size-display-lg: 40px;
+--line-height-display-lg: 1.2;
+--font-weight-display-lg: 800;
+--letter-spacing-display-lg: -0.015em;
+--font-size-heading-lg: 30px;
+--line-height-heading-lg: 1.35;
+--font-weight-heading-lg: 700;
+--letter-spacing-heading-lg: -0.01em;
+--font-size-heading-md: 22px;
+--line-height-heading-md: 1.45;
+--font-weight-heading-md: 700;
+--letter-spacing-heading-md: 0;
+--font-size-body-lg: 18px;
+--line-height-body-lg: 1.75;
+--font-size-body-md: 16px;
+--line-height-body-md: 1.75;
+--font-size-body-sm: 14px;
+--line-height-body-sm: 1.6;
+--font-size-label-md: 14px;
+--line-height-label-md: 1.43;
+--font-weight-label-md: 600;
+--font-size-label-caps: 12px;
+--line-height-label-caps: 1.35;
+--font-weight-label-caps: 600;
+--letter-spacing-label-caps: 0.12em;
+--font-size-code-md: 14px;
+--line-height-code-md: 1.75;
+
+/* ── space ── */
+--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;
+--space-hero-gap: 40px;
+--space-section-gap: 48px;
+
+/* ── radius ── */
+--radius-sm: 8px;
+--radius-md: 16px;
+--radius-lg: 24px;
+--radius-xl: 28px;
+--radius-xxl: 32px;
+--radius-full: 9999px;
+
+/* ── shadow ── */
+--shadow-soft: 0 8px 20px rgba(0, 49, 83, 0.08);
+--shadow-card: 0 12px 36px rgba(0, 49, 83, 0.10);
+--shadow-brand: 0 24px 80px rgba(0, 49, 83, 0.14);
+--shadow-code: 0 24px 60px rgba(3, 20, 37, 0.18);
+--shadow-deep: 0 32px 120px rgba(3, 20, 37, 0.38);
+
+/* ── motion ── */
+--motion-duration-instant: 100ms;
+--motion-duration-fast: 150ms;
+--motion-duration-base: 200ms;
+--motion-duration-slow: 300ms;
+--motion-duration-slower: 500ms;
+--motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+--motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+--motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+/* ── focus ── */
+--focus-ring-width: 2px;
+--focus-ring-offset: 2px;
+--focus-ring-color: var(--color-primary-500);
+
+/* ── z ── */
+--z-base: 0;
+--z-dropdown: 1000;
+--z-sticky: 1020;
+--z-fixed: 1030;
+--z-modal-backdrop: 1040;
+--z-modal: 1050;
+--z-popover: 1060;
+--z-toast: 1070;
+--z-tooltip: 1080;
+
+/* ── layout ── */
+--layout-header-height: 64px;
+--layout-header-height-compact: 56px;
+--layout-max-width: 1280px;
+--layout-prose-width: 768px;
+--layout-breakpoint-sm: 640px;
+--layout-breakpoint-md: 768px;
+--layout-breakpoint-lg: 1024px;
+--layout-breakpoint-xl: 1280px;
+--layout-breakpoint-2xl: 1536px;
+
+/* ── a11y ── */
+--a11y-touch-target: 44px;
+
+/* ── image ── */
+--image-brand-radial: radial-gradient(circle at top, rgba(135, 206, 235, 0.22), transparent 44%);
+--image-brand-grid: linear-gradient(rgba(0, 49, 83, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 49, 83, 0.08) 1px, transparent 1px);
+--image-page-light: radial-gradient(circle at top left, rgba(135, 206, 235, 0.18), transparent 28%), radial-gradient(circle at top right, rgba(255, 191, 0, 0.10), transparent 22%), linear-gradient(180deg, #f8fbfe 0%, #ffffff 26%, #f7fafd 100%);
+--image-page-dark: radial-gradient(circle at top left, rgba(135, 206, 235, 0.12), transparent 28%), radial-gradient(circle at top right, rgba(255, 191, 0, 0.08), transparent 20%), linear-gradient(180deg, #041d31 0%, #031425 45%, #020b14 100%);
+}
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    margin: 0;
+  }
+  :focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+}
+
+[data-theme="portal"] {
+/* ── color ── */
+--color-bg-primary: var(--color-neutral-0);
+--color-brand: var(--color-brand-base, var(--color-primary-600));
+--color-brand-hover: var(--color-brand-hover-base, var(--color-primary-500));
+--color-brand-soft: var(--color-sky-400);
+}
+
+[data-theme="auth"] {
+/* ── color ── */
+--color-bg-primary: var(--color-neutral-0);
+--color-brand: var(--color-brand-base, var(--color-primary-600));
+--color-brand-hover: var(--color-brand-hover-base, var(--color-primary-500));
+}
+
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+
+/* ── color ── */
+--color-neutral-0: #0a0f1a;
+--color-neutral-50: #0f1a2e;
+--color-neutral-100: #142238;
+--color-neutral-200: #1a2a42;
+--color-neutral-300: #1f3350;
+--color-neutral-400: #2a4060;
+--color-neutral-500: #4a6585;
+--color-neutral-600: #6b8caa;
+--color-neutral-700: #8fb0cc;
+--color-neutral-800: #b5d0e6;
+--color-neutral-900: #e2edf5;
+--color-bg-primary: var(--color-primary-900);
+--color-bg-surface: #0a2940;
+--color-bg-elevated: #0f3348;
+--color-bg-muted: #0a1f30;
+--color-text-primary: #f8fbfe;
+--color-text-secondary: #87ceeb;
+--color-text-muted: #8896a6;
+--color-border-subtle: #1a4a65;
+--color-border-strong: #429bc5;
+--color-border: var(--color-border-strong);
+--color-danger-text: #ff4d4f;
+--color-success-text: var(--color-success);
+--color-success-soft: #1c460b;
+--color-warning-soft: #503302;
+--color-danger-soft: #490909;
+--color-warning-text: var(--color-warning);
+--color-text-disabled: var(--color-neutral-500);
+--color-brand: var(--color-brand-dark);
+--color-brand-hover: var(--color-brand-dark-hover);
+--color-on-brand: var(--color-on-brand-dark);
+--color-brand-soft: var(--color-sky-700);
+--color-chart-1: #75abd5;
+--color-chart-2: #bde6f5;
+--color-chart-3: #87ceeb;
+--color-chart-4: #ffe480;
+--color-chart-5: #ffbf00;
+--color-chart-6: #6ee7b7;
+--color-chart-7: #a78bfa;
+--color-chart-8: #f87171;
+
+/* ── focus ── */
+--focus-ring-color: var(--color-sky-500);
+}
+
+[data-theme="authenticator"] {
+  color-scheme: dark;
+
+/* ── color ── */
+--color-neutral-0: #0a0f1a;
+--color-neutral-50: #0f1a2e;
+--color-neutral-100: #142238;
+--color-neutral-200: #1a2a42;
+--color-neutral-300: #1f3350;
+--color-neutral-400: #2a4060;
+--color-neutral-500: #4a6585;
+--color-neutral-600: #6b8caa;
+--color-neutral-700: #8fb0cc;
+--color-neutral-800: #b5d0e6;
+--color-neutral-900: #e2edf5;
+--color-bg-primary: #0a0a0a;
+--color-bg-surface: #141414;
+--color-bg-elevated: #1f1f1f;
+--color-bg-muted: #0a1f30;
+--color-text-primary: #f5f5f5;
+--color-text-secondary: #a3a3a3;
+--color-text-muted: #8896a6;
+--color-border-subtle: #2a2a2a;
+--color-border-strong: #666666;
+--color-border: var(--color-border-strong);
+--color-danger-text: #ff4d4f;
+--color-success-text: var(--color-success);
+--color-success-soft: #1c460b;
+--color-warning-soft: #503302;
+--color-danger-soft: #490909;
+--color-warning-text: var(--color-warning);
+--color-text-disabled: var(--color-neutral-500);
+--color-brand: var(--color-primary-500);
+--color-brand-hover: var(--color-primary-400);
+--color-on-brand: var(--color-on-brand-dark);
+--color-brand-soft: var(--color-sky-700);
+--color-chart-1: #75abd5;
+--color-chart-2: #bde6f5;
+--color-chart-3: #87ceeb;
+--color-chart-4: #ffe480;
+--color-chart-5: #ffbf00;
+--color-chart-6: #6ee7b7;
+--color-chart-7: #a78bfa;
+--color-chart-8: #f87171;
+
+/* ── focus ── */
+--focus-ring-color: var(--color-sky-500);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}