20261007220117

code/g3soft-libs/packages/tokens/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@g3soft/tokens",
+  "version": "0.0.1",
+  "description": "G3Soft 设计变量（颜色 / 间距 / 圆角 / 字体 / 动效），组件库与文档站共用",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.css",
+    "./tokens.css": "./src/tokens.css",
+    "./dark.css": "./src/dark.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  }
+}

code/g3soft-libs/packages/tokens/src/dark.css

@@ -0,0 +1,21 @@
+/**
+ * 暗色主题：只覆盖变量值，不改变量名。
+ * 启用方式：document.documentElement.dataset.g3Theme = 'dark'
+ */
+html[data-g3-theme='dark'] {
+  --g3-color-primary: #4096ff;
+  --g3-color-primary-hover: #69b1ff;
+  --g3-color-primary-active: #1677ff;
+
+  --g3-text-1: rgba(255, 255, 255, 0.88);
+  --g3-text-2: rgba(255, 255, 255, 0.65);
+  --g3-text-3: rgba(255, 255, 255, 0.45);
+  --g3-text-disabled: rgba(255, 255, 255, 0.3);
+  --g3-text-inverse: #ffffff;
+
+  --g3-bg-container: #141414;
+  --g3-bg-disabled: rgba(255, 255, 255, 0.08);
+  --g3-border-color: #424242;
+
+  --g3-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
+}

code/g3soft-libs/packages/tokens/src/index.css

@@ -0,0 +1,7 @@
+/**
+ * 设计变量总入口。
+ * 组件样式一律引用 var(--g3-*)，取值只在本包内定义。
+ * 换肤 / 客户定制 = 覆盖同名变量，不需要改任何组件代码。
+ */
+@import './tokens.css';
+@import './dark.css';

code/g3soft-libs/packages/tokens/src/tokens.css

@@ -0,0 +1,62 @@
+/**
+ * G3Soft 设计变量（浅色主题 / 默认值）
+ *
+ * 命名规则：--g3-{类别}-{属性}[-{状态}]
+ * 组件不得写死颜色与尺寸，必须引用本文件中的变量。
+ */
+:root {
+  /* ---------- 品牌色 ---------- */
+  --g3-color-primary: #1677ff;
+  --g3-color-primary-hover: #4096ff;
+  --g3-color-primary-active: #0958d9;
+  --g3-color-success: #52c41a;
+  --g3-color-warning: #faad14;
+  --g3-color-danger: #ff4d4f;
+
+  /* ---------- 文本 ---------- */
+  --g3-text-1: rgba(0, 0, 0, 0.88);
+  --g3-text-2: rgba(0, 0, 0, 0.65);
+  --g3-text-3: rgba(0, 0, 0, 0.45);
+  --g3-text-disabled: rgba(0, 0, 0, 0.25);
+  --g3-text-inverse: #ffffff;
+
+  /* ---------- 容器与边框 ---------- */
+  --g3-bg-container: #ffffff;
+  --g3-bg-disabled: rgba(0, 0, 0, 0.04);
+  --g3-border-color: #d9d9d9;
+
+  /* ---------- 圆角 ---------- */
+  --g3-radius-sm: 4px;
+  --g3-radius: 6px;
+  --g3-radius-lg: 8px;
+
+  /* ---------- 间距 ---------- */
+  --g3-space-1: 4px;
+  --g3-space-2: 8px;
+  --g3-space-3: 12px;
+  --g3-space-4: 16px;
+  --g3-space-5: 24px;
+  --g3-space-6: 32px;
+
+  /* ---------- 控件尺寸与字号 ---------- */
+  --g3-control-height-sm: 24px;
+  --g3-control-height: 32px;
+  --g3-control-height-lg: 40px;
+  --g3-font-size-sm: 12px;
+  --g3-font-size: 14px;
+  --g3-font-size-lg: 16px;
+
+  /* ---------- 字体 ---------- */
+  --g3-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  --g3-font-family-mono:
+    ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
+
+  /* ---------- 动效 ---------- */
+  --g3-duration: 0.2s;
+  --g3-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  /* ---------- 阴影 ---------- */
+  --g3-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}