20261008173212

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

@@ -5,17 +5,26 @@
   "license": "UNLICENSED",
   "type": "module",
   "files": [
+    "dist",
     "src"
   ],
   "sideEffects": [
-    "*.css"
+    "**/*.css",
+    "**/*.scss"
   ],
+  "scripts": {
+    "build": "sass src/index.scss dist/index.css --no-source-map --style=expanded",
+    "watch": "sass --watch src/index.scss:dist/index.css --no-source-map"
+  },
   "exports": {
-    ".": "./src/index.css",
-    "./tokens.css": "./src/tokens.css",
-    "./dark.css": "./src/dark.css",
+    ".": "./dist/index.css",
+    "./scss": "./src/scss/api.scss",
+    "./scss/theme": "./src/scss/theme.scss",
     "./package.json": "./package.json"
   },
+  "devDependencies": {
+    "sass": "catalog:"
+  },
   "publishConfig": {
     "access": "restricted"
   }

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

@@ -1,21 +0,0 @@
-/**
- * 暗色主题：只覆盖变量值，不改变量名。
- * 启用方式：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

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

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

@@ -0,0 +1,4 @@
+// 设计变量总入口（CSS 产物）。
+// 组件样式一律引用 var(--g3-*)，取值只在本包内定义。
+// 换肤 / 客户定制 = 覆盖同名变量，不需要改任何组件代码。
+@use 'scss/theme';

code/g3soft-libs/packages/tokens/src/scss/_config.scss

@@ -0,0 +1,21 @@
+// 命名空间单一事实源。
+//
+// 类名前缀、状态类前缀、CSS 变量前缀、@keyframes 名全部由它派生；
+// 运行时 useNamespace() / build-time __G3_NAMESPACE__ 也以此为准。
+// 消费方换前缀（示例，见 README）：
+//   @forward '@g3soft/tokens/scss' with ($namespace: 'xx');
+$namespace: 'g3' !default;
+
+// 状态类前缀（is-disabled 里的 is），全局唯一。
+$state-prefix: 'is' !default;
+
+// 唯一的主色输入（默认参考 shadcn：zinc-900 #18181b）。
+// 主色族（色阶 / 交互态 / on-primary / 氛围 / 中性灰）
+// 由运行时 derivePalette 在显式传入 theme.primary 时派生；
+// 未配置主题时以 theme.scss 的静态值为准。
+$seed-primary: #18181b !default;
+
+// 独立固定语义色：不参与主色派生。
+$success: #45b114 !default;
+$warning: #e79a0d !default;
+$danger: #ec4246 !default;

code/g3soft-libs/packages/tokens/src/scss/_functions.scss

@@ -0,0 +1,38 @@
+@use 'sass:string';
+@use 'config';
+
+// BEM + 变量助手：与运行时 useNamespace() 1:1 对应。
+// 编译期用它们拼类名 / 变量名，保证 <style> 选择器与运行时 class 前缀一致。
+
+@function b($block) {
+  @return '#{config.$namespace}-#{$block}';
+}
+
+@function e($block, $el) {
+  @return '#{config.$namespace}-#{$block}__#{$el}';
+}
+
+@function m($block, $mod) {
+  @return '#{config.$namespace}-#{$block}--#{$mod}';
+}
+
+@function em($block, $el, $mod) {
+  @return '#{config.$namespace}-#{$block}__#{$el}--#{$mod}';
+}
+
+@function is($state) {
+  @return '#{config.$state-prefix}-#{$state}';
+}
+
+// CSS 变量名：前缀强制跟随 $namespace，不允许单独配置。
+@function css-var($name) {
+  @return '--#{config.$namespace}-#{$name}';
+}
+
+// 引用一个令牌变量，强制渲染 fallback，保证未加载 @g3soft/tokens 时组件仍可用。
+@function v($name, $fallback: null) {
+  @if $fallback == null {
+    @return string.unquote('var(#{css-var($name)})');
+  }
+  @return string.unquote('var(#{css-var($name)}, #{$fallback})');
+}

code/g3soft-libs/packages/tokens/src/scss/_mixins.scss

@@ -0,0 +1,7 @@
+@use 'functions' as fn;
+
+// 键盘焦点环（a11y 基线：焦点可见），颜色走主色令牌。
+@mixin focus-ring($width: 2px, $offset: 1px) {
+  outline: $width solid fn.v('color-primary', #18181b);
+  outline-offset: $offset;
+}

code/g3soft-libs/packages/tokens/src/scss/api.scss

@@ -0,0 +1,6 @@
+// 组件消费入口：只 @forward，绝不 emit CSS。
+// 若这里带了 CSS，每个 .vue 的 <style> 都会重复输出 :root{}。
+// 需要 CSS 的场景请用 './theme'，且在整个 app 中只导入一次。
+@forward 'config';
+@forward 'functions';
+@forward 'mixins';

code/g3soft-libs/packages/tokens/src/scss/theme.scss

@@ -0,0 +1,90 @@
+// 默认主题（浅色）—— 未配置主题时的权威来源。
+// 唯一 emit CSS 的文件，整个 app 只导入一次（见 src/index.scss）。
+// 变量名全部经 fn.css-var() 生成，故 CSS 变量前缀强制跟随 $namespace。
+//
+// 换肤 = 覆盖同名变量，不需要改任何组件代码。
+@forward 'config';
+
+@use 'config';
+@use 'functions' as fn;
+
+// 暗色主色（shadcn dark: oklch(0.922 0 0) ≈ #e5e5e5）
+$dark-primary: #e5e5e5;
+
+:root {
+  /* ---------- 品牌色（shadcn 风格：hover/active 用主色透明度）---------- */
+  #{fn.css-var('color-primary')}: config.$seed-primary;
+  #{fn.css-var('color-primary-hover')}: rgba(config.$seed-primary, 0.9);
+  #{fn.css-var('color-primary-active')}: rgba(config.$seed-primary, 0.8);
+  #{fn.css-var('color-primary-on')}: #fafafa;
+  #{fn.css-var('color-success')}: config.$success;
+  #{fn.css-var('color-warning')}: config.$warning;
+  #{fn.css-var('color-danger')}: config.$danger;
+
+  /* ---------- 文本 ---------- */
+  #{fn.css-var('text-1')}: rgba(0, 0, 0, 0.88);
+  #{fn.css-var('text-2')}: rgba(0, 0, 0, 0.65);
+  #{fn.css-var('text-3')}: rgba(0, 0, 0, 0.45);
+  #{fn.css-var('text-disabled')}: rgba(0, 0, 0, 0.25);
+  #{fn.css-var('text-inverse')}: #ffffff;
+
+  /* ---------- 容器与边框 ---------- */
+  #{fn.css-var('bg-container')}: #ffffff;
+  #{fn.css-var('bg-disabled')}: rgba(0, 0, 0, 0.04);
+  #{fn.css-var('border-color')}: #d9d9d9;
+
+  /* ---------- 圆角 ---------- */
+  #{fn.css-var('radius-sm')}: 4px;
+  #{fn.css-var('radius')}: 6px;
+  #{fn.css-var('radius-lg')}: 8px;
+
+  /* ---------- 间距 ---------- */
+  #{fn.css-var('space-1')}: 4px;
+  #{fn.css-var('space-2')}: 8px;
+  #{fn.css-var('space-3')}: 12px;
+  #{fn.css-var('space-4')}: 16px;
+  #{fn.css-var('space-5')}: 24px;
+  #{fn.css-var('space-6')}: 32px;
+
+  /* ---------- 控件尺寸与字号 ---------- */
+  #{fn.css-var('control-height-sm')}: 24px;
+  #{fn.css-var('control-height')}: 32px;
+  #{fn.css-var('control-height-lg')}: 40px;
+  #{fn.css-var('font-size-sm')}: 12px;
+  #{fn.css-var('font-size')}: 14px;
+  #{fn.css-var('font-size-lg')}: 16px;
+
+  /* ---------- 字体 ---------- */
+  #{fn.css-var('font-family')}: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  #{fn.css-var('font-family-mono')}: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono',
+    Menlo, Consolas, monospace;
+
+  /* ---------- 动效 ---------- */
+  #{fn.css-var('duration')}: 0.2s;
+  #{fn.css-var('ease')}: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  /* ---------- 阴影 ---------- */
+  #{fn.css-var('shadow')}: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+// 暗色主题：只覆盖变量值，不改变量名。
+// 启用方式：document.documentElement.dataset.g3Theme = 'dark'（前缀随 $namespace）。
+html[data-#{config.$namespace}-theme='dark'] {
+  #{fn.css-var('color-primary')}: $dark-primary;
+  #{fn.css-var('color-primary-hover')}: rgba($dark-primary, 0.9);
+  #{fn.css-var('color-primary-active')}: rgba($dark-primary, 0.8);
+  #{fn.css-var('color-primary-on')}: #18181b;
+
+  #{fn.css-var('text-1')}: rgba(255, 255, 255, 0.88);
+  #{fn.css-var('text-2')}: rgba(255, 255, 255, 0.65);
+  #{fn.css-var('text-3')}: rgba(255, 255, 255, 0.45);
+  #{fn.css-var('text-disabled')}: rgba(255, 255, 255, 0.3);
+  #{fn.css-var('text-inverse')}: #ffffff;
+
+  #{fn.css-var('bg-container')}: #141414;
+  #{fn.css-var('bg-disabled')}: rgba(255, 255, 255, 0.08);
+  #{fn.css-var('border-color')}: #424242;
+
+  #{fn.css-var('shadow')}: 0 2px 8px rgba(0, 0, 0, 0.45);
+}

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

@@ -1,62 +0,0 @@
-/**
- * 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);
-}