@skopon-cool/form-sdk 0.1.9 → 0.2.1

package/src/styles/tokens.css

@@ -0,0 +1,224 @@
+/**
+ * VidTempl 设计令牌
+ * 基础色阶：@radix-ui/colors（Gray 中性 + Jade 墨绿品牌）
+ * 语义变量：供全局 CSS 与自定义组件使用
+ */
+
+@import '@radix-ui/colors/gray.css';
+@import '@radix-ui/colors/jade.css';
+@import '@radix-ui/colors/green.css';
+@import '@radix-ui/colors/red.css';
+@import '@radix-ui/colors/amber.css';
+
+:root,
+.light,
+.light-theme {
+  /* —— 品牌色（墨绿 · Radix Jade）—— */
+  --brand-1: var(--jade-1);
+  --brand-2: var(--jade-2);
+  --brand-3: var(--jade-3);
+  --brand-4: var(--jade-4);
+  --brand-5: var(--jade-5);
+  --brand-6: var(--jade-6);
+  --brand-7: var(--jade-7);
+  --brand-8: var(--jade-8);
+  --brand-9: var(--jade-9);
+  --brand-10: var(--jade-10);
+  --brand-11: var(--jade-11);
+  --brand-12: var(--jade-12);
+
+  /* —— 中性色（Radix Gray）—— */
+  --neutral-1: var(--gray-1);
+  --neutral-2: var(--gray-2);
+  --neutral-3: var(--gray-3);
+  --neutral-4: var(--gray-4);
+  --neutral-5: var(--gray-5);
+  --neutral-6: var(--gray-6);
+  --neutral-7: var(--gray-7);
+  --neutral-8: var(--gray-8);
+  --neutral-9: var(--gray-9);
+  --neutral-10: var(--gray-10);
+  --neutral-11: var(--gray-11);
+  --neutral-12: var(--gray-12);
+
+  /* —— 功能色 —— */
+  --success-9: var(--green-9);
+  --success-11: var(--green-11);
+  --danger-9: var(--red-9);
+  --danger-11: var(--red-11);
+  --danger-3: var(--red-3);
+  --warning-9: var(--amber-9);
+  --warning-11: var(--amber-11);
+
+  /* —— 语义色（交互设计统一引用）—— */
+  --color-primary: var(--brand-11);
+  --color-primary-hover: var(--brand-10);
+  --color-primary-active: var(--brand-12);
+  /* 实心底：与 --color-primary 同为 Jade 11，供按钮 / Sider 等大面积铺色 */
+  --color-primary-solid: var(--brand-11);
+  --color-primary-subtle: var(--brand-3);
+  --color-primary-muted: var(--brand-4);
+  --color-on-primary: #ffffff;
+
+  --color-bg: var(--neutral-1);
+  --color-bg-subtle: var(--neutral-2);
+  --color-bg-muted: var(--neutral-3);
+  --color-surface: #ffffff;
+  --color-surface-raised: var(--neutral-2);
+
+  --color-border: var(--neutral-6);
+  --color-border-subtle: var(--neutral-4);
+  --color-border-strong: var(--neutral-8);
+
+  --color-text: var(--neutral-12);
+  --color-text-secondary: var(--neutral-11);
+  --color-text-muted: var(--neutral-9);
+  --color-text-placeholder: var(--neutral-9);
+  --color-text-disabled: var(--neutral-8);
+
+  --color-success: var(--success-9);
+  --color-success-text: var(--success-11);
+  --color-danger: var(--danger-9);
+  --color-danger-text: var(--danger-11);
+  --color-danger-subtle: var(--danger-3);
+  --color-warning: var(--warning-9);
+  --color-warning-text: var(--warning-11);
+  --color-warning-solid: var(--amber-9);
+  --color-warning-solid-hover: var(--amber-10);
+  --color-on-warning: var(--neutral-12);
+
+  --color-focus-ring: color-mix(in srgb, var(--brand-11) 35%, transparent);
+
+  /* —— 间距（4px 基准刻度）—— */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+  /* 语义间距 */
+  --space-page-x: var(--space-5);
+  --space-page-y: var(--space-5);
+  --space-section: var(--space-5);
+  --space-card: var(--space-4);
+  --space-form-item: var(--space-5);
+  --space-inline: var(--space-2);
+  --space-stack-sm: var(--space-3);
+  --space-stack-md: var(--space-4);
+  --space-stack-lg: var(--space-5);
+
+  /* —— 圆角 —— */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  /** 胶囊形（按钮）：两侧半圆，等效 border-radius: 50% / 9999px */
+  --radius-pill: 9999px;
+  --radius-button: var(--radius-pill);
+
+  /* —— 阴影 —— */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --shadow-focus: 0 0 0 2px var(--color-focus-ring);
+
+  /* —— 字体 —— */
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    'Noto Sans SC', sans-serif;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-size-xs: 11px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --line-height-tight: 1.25;
+  --line-height-base: 1.5715;
+  --line-height-relaxed: 1.6;
+
+  /* —— 按钮尺寸 —— */
+  --button-height-sm: 28px;
+  --button-height-md: 36px;
+  --button-height-lg: 40px;
+  --button-padding-x-sm: 12px;
+  --button-padding-x-md: 16px;
+  --button-padding-x-lg: 20px;
+  --button-font-size-sm: 13px;
+  --button-font-size-md: 14px;
+  --button-font-size-lg: 16px;
+  --button-icon-sm: 14px;
+  --button-icon-md: 16px;
+  --button-icon-lg: 18px;
+  --button-font-weight: var(--font-weight-semibold);
+  --button-icon-stroke-width: 2.5px;
+
+  /* —— 布局（design/ui/UI规范.md §12）—— */
+  /* 列表页不设 max-width；流程编辑 1400px；窄表单 800px */
+  --layout-sider-width: 60px;
+  --layout-sider-width-expanded: 158px;
+  --layout-sider-capsule-radius: calc(var(--layout-sider-width) / 2);
+  --layout-sider-inset: var(--space-3);
+  --layout-sider-rail-width: calc(var(--layout-sider-width) + 2 * var(--layout-sider-inset));
+  --layout-sider-rail-width-expanded: calc(
+    var(--layout-sider-width-expanded) + 2 * var(--layout-sider-inset)
+  );
+  --layout-header-height: 56px;
+  --layout-bottom-nav-height: 56px;
+  --layout-sider-mobile-inset: var(--layout-sider-inset);
+  --layout-sider-mobile-padding-y: var(--layout-sider-padding-y);
+  --layout-sider-mobile-padding-x: var(--layout-sider-padding-y);
+  --layout-sider-mobile-clearance: calc(
+    var(--layout-sider-nav-size) + 2 * var(--layout-sider-mobile-padding-y) +
+      var(--layout-sider-mobile-inset) + env(safe-area-inset-bottom, 0px)
+  );
+  --layout-content-gap: var(--space-section);
+  --layout-kpi-min-height: 96px;
+  --layout-chart-min-height: 320px;
+  --layout-sider-logo-size: 36px;
+  --layout-sider-padding-y: var(--space-3);
+  --layout-sider-padding-x: 0;
+  --layout-sider-gap: var(--space-2);
+  /** Logo → 首导航项；退出登录 → 头像（须一致） */
+  --layout-sider-logo-gap: var(--space-4);
+  --layout-sider-nav-size: 36px;
+  /** 展开态 icon 与 label 间距 */
+  --layout-sider-icon-label-gap: 10px;
+  /** 侧栏未选中导航 / 退出图标不透明度 69%（选中、hover 为 1） */
+  --layout-sider-nav-icon-opacity-idle: 0.69;
+  --color-nav-bg: var(--color-primary-solid);
+  --color-nav-icon: var(--color-on-primary);
+  --color-nav-logo-bg: #ffffff;
+  --color-nav-logo-icon: var(--color-primary);
+
+  /* —— 动效 —— */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* 断点参考（design/ui/UI规范.md §8.1）：640 / 768 / 992 px */
+}
+
+@media (max-width: 768px) {
+  :root {
+    --space-page-x: var(--space-4);
+    --space-page-y: var(--space-4);
+    --space-section: var(--space-4);
+    --space-card: var(--space-3);
+    --layout-sider-mobile-inset: var(--space-5);
+    --layout-sider-mobile-padding-y: var(--space-3);
+    --layout-sider-mobile-padding-x: var(--space-3);
+    --layout-sider-mobile-clearance: calc(
+      var(--layout-sider-nav-size) + 2 * var(--layout-sider-mobile-padding-y) +
+        var(--layout-sider-mobile-inset) + env(safe-area-inset-bottom, 0px)
+    );
+    --layout-flow-artifact-fab-bottom: calc(
+      var(--layout-sider-mobile-clearance) + var(--space-5)
+    );
+    --layout-flow-artifact-panel-bottom: calc(
+      var(--layout-flow-artifact-fab-bottom) + 48px + var(--space-3)
+    );
+  }
+}

package/src/theme/antd-theme.ts

@@ -0,0 +1,93 @@
+import type { ThemeConfig } from 'antd'
+import { brandColors } from './brand-colors'
+
+/**
+ * Ant Design 主题映射（与 design/ui/UI规范.md §2.4、§2.5 一致）
+ * 品牌主色 hex 仅来自 ./brand-colors.ts
+ */
+export const antdTheme: ThemeConfig = {
+  cssVar: { key: 'vidtempl' },
+  token: {
+    colorPrimary: brandColors.primarySolid,
+    colorPrimaryHover: brandColors.primaryHover,
+    colorPrimaryActive: brandColors.primaryActive,
+    colorLink: brandColors.primary,
+    colorLinkHover: brandColors.primaryHover,
+    colorSuccess: brandColors.jade9,
+    colorWarning: '#f5a623',
+    gold6: '#f5a623',
+    gold7: '#e6951a',
+    colorError: '#e5484d',
+    colorInfo: brandColors.primary,
+    colorBgLayout: '#f9f9f9',
+    colorBgContainer: '#ffffff',
+    colorBgElevated: '#ffffff',
+    colorBorder: '#d9d9d9',
+    colorBorderSecondary: '#f0f0f0',
+    colorText: '#202020',
+    colorTextSecondary: '#646464',
+    colorTextTertiary: '#8d8d8d',
+    colorTextQuaternary: '#bbbbbb',
+    borderRadius: 8,
+    borderRadiusSM: 4,
+    borderRadiusLG: 12,
+    fontFamily:
+      "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif",
+    fontSize: 14,
+    fontSizeLG: 16,
+    fontSizeSM: 13,
+    fontWeightStrong: 600,
+    lineHeight: 1.5715,
+    lineHeightLG: 1.5,
+    lineHeightSM: 1.5715,
+    controlHeight: 36,
+    controlHeightLG: 40,
+    controlHeightSM: 28,
+    paddingContentHorizontal: 16,
+    paddingContentHorizontalLG: 20,
+    paddingContentHorizontalSM: 12,
+    marginLG: 24,
+    marginMD: 16,
+    marginSM: 12,
+    marginXS: 8,
+  },
+  components: {
+    Button: {
+      borderRadius: 9999,
+      borderRadiusSM: 9999,
+      borderRadiusLG: 9999,
+      controlHeight: 36,
+      controlHeightLG: 40,
+      controlHeightSM: 28,
+      paddingInline: 16,
+      paddingInlineLG: 20,
+      paddingInlineSM: 12,
+      fontSize: 14,
+      fontSizeLG: 16,
+      fontSizeSM: 13,
+      fontWeight: 600,
+      primaryShadow: 'none',
+      defaultShadow: 'none',
+      dangerShadow: 'none',
+    },
+    Card: {
+      borderRadiusLG: 8,
+    },
+    Layout: {
+      headerBg: '#ffffff',
+      bodyBg: '#f9f9f9',
+    },
+    Tag: {
+      defaultBg: '#e6f7ed',
+      defaultColor: brandColors.primary,
+      fontSizeSM: 13,
+    },
+    Form: {
+      itemMarginBottom: 24,
+    },
+    Typography: {
+      titleMarginBottom: 16,
+      titleMarginTop: 0,
+    },
+  },
+}

package/src/theme/brand-colors.ts

@@ -0,0 +1,18 @@
+/**
+ * 品牌墨绿（Jade）唯一 hex 源
+ * CSS 侧通过 Radix --jade-* / 语义变量 --color-* 引用；Ant Design 从此文件同步
+ * 规范：front/design/ui/UI规范.md §2.2、§2.5
+ */
+export const brandColors = {
+  jade9: '#29a383',
+  jade10: '#26997b',
+  jade11: '#208368',
+  jade12: '#1d3b31',
+  /** 链接、边框、Logo 图形、实心底（与 primarySolid 同色） */
+  primary: '#208368',
+  /** Primary 实心按钮、Sider 胶囊、发布等 type="primary" */
+  primarySolid: '#208368',
+  primaryHover: '#26997b',
+  primaryActive: '#1d3b31',
+  onPrimary: '#ffffff',
+} as const