@neatui/css 4.2.0 → 4.2.2

package/package.json

@@ -1,18 +1,69 @@
 {
   "name": "@neatui/css",
-  "version": "4.2.0",
-  "description": "neatui",
+  "version": "4.2.2",
+  "description": "NeatUI constrained atomic design system — SCSS source for production themes, plus preview CSS with default light/dark",
   "main": "./neatui.scss",
+  "sass": "./neatui.scss",
+  "style": "./dist/neatui.preview.min.css",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "author": "xiaojunbo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/neatui/neatui.git",
+    "directory": "@neatui/css"
+  },
+  "homepage": "https://neatui.fekit.cn",
+  "bugs": {
+    "url": "https://gitlab.com/neatui/neatui/issues"
+  },
+  "keywords": [
+    "neatui",
+    "atomic-css",
+    "design-system",
+    "scss",
+    "theme",
+    "css",
+    "preview"
+  ],
+  "files": [
+    "core",
+    "components",
+    "tokens",
+    "dist",
+    "neatui.scss",
+    "preview.scss",
+    "index.scss",
+    "index.js",
+    "GUIDE.md",
+    "MIGRATION-4.0.md",
+    "MIGRATION-4.1.md",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "sass": "./neatui.scss",
+      "style": "./dist/neatui.preview.min.css",
+      "default": "./neatui.scss"
+    },
+    "./neatui.scss": "./neatui.scss",
+    "./preview.scss": "./preview.scss",
+    "./preview": "./dist/neatui.preview.min.css",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "build": "yarn build:scss && yarn build:optimize && yarn build:minify",
+    "build": "yarn build:scss && yarn build:preview && yarn build:optimize && yarn build:minify",
     "build:scss": "sass neatui.scss dist/neatui.css --no-source-map",
-    "build:optimize": "postcss dist/neatui.css -o dist/neatui.css --no-map",
-    "build:minify": "cleancss -o dist/neatui.min.css dist/neatui.css"
+    "build:preview": "sass preview.scss dist/neatui.preview.css --no-source-map",
+    "build:optimize": "postcss dist/neatui.css -o dist/neatui.css --no-map && postcss dist/neatui.preview.css -o dist/neatui.preview.css --no-map",
+    "build:minify": "cleancss -o dist/neatui.min.css dist/neatui.css && cleancss -o dist/neatui.preview.min.css dist/neatui.preview.css",
+    "tokens:generate": "node scripts/generate-vscode-snapshot.mjs && node scripts/generate-docs-index.mjs",
+    "tokens:check": "node scripts/generate-vscode-snapshot.mjs --check",
+    "tokens:docs": "node scripts/generate-docs-index.mjs",
+    "prepublishOnly": "yarn build"
   },
   "peerDependencies": {},
   "devDependencies": {

package/preview.scss

@@ -0,0 +1,10 @@
+// Preview bundle for trial / CDN demos.
+// Includes official default light + dark themes.
+// Production projects should use SCSS:
+//   $theme: (...);
+//   @use '@neatui/css' as *;
+//   @include theme($theme);
+
+@use './neatui.scss' as *;
+
+@include theme();

package/tokens/neatui.tokens.json

@@ -0,0 +1,489 @@
+{
+  "schemaVersion": 1,
+  "cssVersion": "4.2.1",
+  "name": "neatui-tokens",
+  "description": "NeatUI constrained design tokens — single source for grades, semantic colors, flex coordinates, breakpoints, and core attribute values. Does not enumerate project theme color names.",
+  "grades": [
+    {
+      "value": "no",
+      "intent": "零档 / 归零。"
+    },
+    {
+      "value": "xs",
+      "intent": "极小档。"
+    },
+    {
+      "value": "ss",
+      "intent": "小档偏小。"
+    },
+    {
+      "value": "sm",
+      "intent": "小档居中。"
+    },
+    {
+      "value": "sl",
+      "intent": "小档偏大。"
+    },
+    {
+      "value": "ms",
+      "intent": "中档偏小。"
+    },
+    {
+      "value": "mm",
+      "intent": "中档中心（默认心智锚点）。"
+    },
+    {
+      "value": "ml",
+      "intent": "中档偏大。"
+    },
+    {
+      "value": "ls",
+      "intent": "大档偏小。"
+    },
+    {
+      "value": "lm",
+      "intent": "大档居中。"
+    },
+    {
+      "value": "ll",
+      "intent": "大档偏大。"
+    },
+    {
+      "value": "xl",
+      "intent": "超大档。"
+    },
+    {
+      "value": "xx",
+      "intent": "特大档。"
+    }
+  ],
+  "semanticColors": [
+    {
+      "value": "main",
+      "intent": "主色 / 品牌主意图。"
+    },
+    {
+      "value": "vice",
+      "intent": "辅助主色。"
+    },
+    {
+      "value": "text",
+      "intent": "主文字色。"
+    },
+    {
+      "value": "fore",
+      "intent": "前景面（卡片/浮层底）。"
+    },
+    {
+      "value": "back",
+      "intent": "页面背景。"
+    },
+    {
+      "value": "link",
+      "intent": "链接意图色。"
+    },
+    {
+      "value": "code",
+      "intent": "代码/高亮意图色。"
+    },
+    {
+      "value": "well",
+      "intent": "成功/正向意图。"
+    },
+    {
+      "value": "warn",
+      "intent": "警告意图。"
+    },
+    {
+      "value": "risk",
+      "intent": "危险/错误意图。"
+    },
+    {
+      "value": "info",
+      "intent": "信息提示意图。"
+    },
+    {
+      "value": "read",
+      "intent": "正文可读色（由 text/fore 推导）。"
+    },
+    {
+      "value": "desc",
+      "intent": "次级描述色（由 text/fore 推导）。"
+    },
+    {
+      "value": "note",
+      "intent": "弱提示色（由 text/fore 推导）。"
+    },
+    {
+      "value": "case",
+      "intent": "更弱提示色（由 text/fore 推导）。"
+    },
+    {
+      "value": "line",
+      "intent": "分割线色（由 text/fore 推导）。"
+    },
+    {
+      "value": "weak",
+      "intent": "弱底色（由 text/fore 推导）。"
+    },
+    {
+      "value": "deep",
+      "intent": "加深背景（由 back 推导）。"
+    }
+  ],
+  "flex": {
+    "intent": "用排列方向、空间坐标和有限行为表达 Flex 布局意图。",
+    "directions": [
+      {
+        "value": "row",
+        "intent": "横向排列。"
+      },
+      {
+        "value": "col",
+        "intent": "纵向排列。"
+      }
+    ],
+    "behaviors": [
+      {
+        "value": "wrap",
+        "intent": "允许换行。"
+      },
+      {
+        "value": "reverse",
+        "intent": "反转排列方向。"
+      },
+      {
+        "value": "inline",
+        "intent": "使用 inline-flex。"
+      },
+      {
+        "value": "block",
+        "intent": "直接子元素等比分配剩余空间。"
+      },
+      {
+        "value": "fixed",
+        "intent": "直接子元素保持固有尺寸。"
+      }
+    ],
+    "coordinates": [
+      {
+        "value": "lt",
+        "intent": "左上对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ct",
+        "intent": "水平居中、顶部对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "rt",
+        "intent": "右上对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "lm",
+        "intent": "左侧、垂直居中。",
+        "group": "coordinate"
+      },
+      {
+        "value": "cm",
+        "intent": "水平和垂直居中。",
+        "group": "coordinate"
+      },
+      {
+        "value": "rm",
+        "intent": "右侧、垂直居中。",
+        "group": "coordinate"
+      },
+      {
+        "value": "lb",
+        "intent": "左下对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "cb",
+        "intent": "水平居中、底部对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "rb",
+        "intent": "右下对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "xt",
+        "intent": "两端分布、顶部对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "xm",
+        "intent": "两端分布、垂直居中。",
+        "group": "coordinate"
+      },
+      {
+        "value": "xb",
+        "intent": "两端分布、底部对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "xd",
+        "intent": "两端分布、纵轴拉伸/平均（随 row/col 语义）。",
+        "group": "coordinate"
+      },
+      {
+        "value": "xy",
+        "intent": "两端分布（双轴）。",
+        "group": "coordinate"
+      },
+      {
+        "value": "at",
+        "intent": "环绕分布、顶部对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "am",
+        "intent": "环绕分布、垂直居中。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ab",
+        "intent": "环绕分布、底部对齐。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ad",
+        "intent": "环绕分布（双轴）。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ay",
+        "intent": "环绕分布、纵轴两端。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ld",
+        "intent": "左侧、纵轴分布变体。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ly",
+        "intent": "左侧、纵轴两端。",
+        "group": "coordinate"
+      },
+      {
+        "value": "cd",
+        "intent": "水平居中、纵轴分布变体。",
+        "group": "coordinate"
+      },
+      {
+        "value": "cy",
+        "intent": "水平居中、纵轴两端。",
+        "group": "coordinate"
+      },
+      {
+        "value": "rd",
+        "intent": "右侧、纵轴分布变体。",
+        "group": "coordinate"
+      },
+      {
+        "value": "ry",
+        "intent": "右侧、纵轴两端。",
+        "group": "coordinate"
+      }
+    ]
+  },
+  "breakpoints": {
+    "intent": "9 档响应断点：设备 mob/pad/dpc × 尺寸 s/m/l。",
+    "devices": [
+      "mob",
+      "pad",
+      "dpc"
+    ],
+    "sizes": [
+      "s",
+      "m",
+      "l"
+    ],
+    "values": [
+      {
+        "value": "mob-s",
+        "cssValue": "320px",
+        "intent": "手机小档。"
+      },
+      {
+        "value": "mob-m",
+        "cssValue": "480px",
+        "intent": "手机中档。"
+      },
+      {
+        "value": "mob-l",
+        "cssValue": "640px",
+        "intent": "手机大档。"
+      },
+      {
+        "value": "pad-s",
+        "cssValue": "800px",
+        "intent": "平板小档。"
+      },
+      {
+        "value": "pad-m",
+        "cssValue": "960px",
+        "intent": "平板中档。"
+      },
+      {
+        "value": "pad-l",
+        "cssValue": "1120px",
+        "intent": "平板大档。"
+      },
+      {
+        "value": "dpc-s",
+        "cssValue": "1280px",
+        "intent": "桌面小档。"
+      },
+      {
+        "value": "dpc-m",
+        "cssValue": "1440px",
+        "intent": "桌面中档。"
+      },
+      {
+        "value": "dpc-l",
+        "cssValue": "1600px",
+        "intent": "桌面大档。"
+      }
+    ],
+    "attributeResponsivePrefixes": [
+      "mob",
+      "pad"
+    ]
+  },
+  "attributes": {
+    "ui-flex": {
+      "intent": "用排列方向、空间坐标和有限行为表达 Flex 布局意图。",
+      "managed": true,
+      "valueGroups": [
+        "flex.directions",
+        "flex.behaviors",
+        "flex.coordinates"
+      ],
+      "expandResponsivePrefixes": true
+    },
+    "size": {
+      "intent": "设置 NeatUI 全局或局部尺寸倍率。",
+      "managed": true,
+      "values": [
+        {
+          "value": "xs",
+          "intent": "极小尺寸倍率。"
+        },
+        {
+          "value": "s",
+          "intent": "小尺寸倍率。"
+        },
+        {
+          "value": "m",
+          "intent": "中尺寸倍率。"
+        },
+        {
+          "value": "l",
+          "intent": "大尺寸倍率。"
+        },
+        {
+          "value": "xl",
+          "intent": "超大尺寸倍率。"
+        }
+      ]
+    },
+    "ui-size": {
+      "intent": "设置 UI 组件尺寸倍率。",
+      "managed": true,
+      "values": [
+        {
+          "value": "xs",
+          "intent": "极小组件尺寸。"
+        },
+        {
+          "value": "s",
+          "intent": "小组件尺寸。"
+        },
+        {
+          "value": "m",
+          "intent": "中组件尺寸。"
+        },
+        {
+          "value": "l",
+          "intent": "大组件尺寸。"
+        },
+        {
+          "value": "xl",
+          "intent": "超大组件尺寸。"
+        }
+      ]
+    },
+    "theme": {
+      "intent": "设置 NeatUI 全局或局部主题。主题名称由项目 $theme 色卡定义；预览包提供 light/dark。",
+      "managed": true,
+      "values": [
+        {
+          "value": "light",
+          "intent": "官方预览 / 常用浅色主题名。"
+        },
+        {
+          "value": "dark",
+          "intent": "官方预览 / 常用深色主题名。"
+        }
+      ],
+      "openEnded": true
+    }
+  },
+  "classPatterns": [
+    {
+      "id": "spacing-padding",
+      "pattern": "^(?:n|nx|ny|nt|nr|nb|nl)-({grade})$",
+      "intent": "内边距等级（S/M/L 分形档位）。",
+      "example": "n-mm"
+    },
+    {
+      "id": "spacing-margin",
+      "pattern": "^-?(?:m|mx|my|mt|mr|mb|ml)-({grade})$",
+      "intent": "外边距等级（S/M/L 分形档位）。",
+      "example": "m-sm"
+    },
+    {
+      "id": "radius",
+      "pattern": "^r-({grade})$",
+      "intent": "圆角等级。",
+      "example": "r-mm"
+    },
+    {
+      "id": "font-size",
+      "pattern": "^fs-({grade})(?:\\*[sml])?(?:-sub)?$",
+      "intent": "字号等级；可选 *s/*m/*l 展示段与 -sub。",
+      "example": "fs-mm"
+    },
+    {
+      "id": "color-text",
+      "pattern": "^co-({semanticColor})(?:-o-({grade})|-w-({grade})|-b-({grade}))?(?::(?:hover|active))?$",
+      "intent": "语义文字色；颜色名来自主题色卡（可扩展）。",
+      "example": "co-risk"
+    },
+    {
+      "id": "color-bg",
+      "pattern": "^bg-({semanticColor})(?:-o-({grade}))?(?::(?:hover|active))?$",
+      "intent": "语义背景色。",
+      "example": "bg-main"
+    },
+    {
+      "id": "width",
+      "pattern": "^(?:w|min-w|max-w)-({grade})(?:\\*[sml])?$",
+      "intent": "宽度等级；可选容器段 *s/*m/*l。",
+      "example": "w-lm"
+    },
+    {
+      "id": "height",
+      "pattern": "^(?:h|min-h|max-h)-({grade})(?:\\*[sml])?$",
+      "intent": "高度等级。",
+      "example": "h-mm"
+    }
+  ]
+}

package/postcss.config.js

@@ -1,20 +0,0 @@
-module.exports = {
-  plugins: [
-    require('cssnano')({
-      preset: ['default', {
-        mergeLonghand: true,
-        mergeRules: true,
-        discardComments: {
-          removeAll: false
-        },
-        normalizeWhitespace: false,
-        colormin: true,
-        minifySelectors: true,
-        minifyParams: true,
-        uniqueSelectors: true,
-        reduceIdents: false,
-        discardUnused: false
-      }]
-    })
-  ]
-};