folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: folinhilo/defgov:92e4fd11f11fcdc1303f34e99344294c31cd74c9
Branches Tags
folinhilo/defgov:main
..
compare: folinhilo/defgov:main
Branches Tags
folinhilo/defgov:main

10 Commits
92e4fd11f1 .. main

Author SHA1 Message Date
folinhilo e618f6e04d fix 2026-08-05 02:07:02 +08:00
folinhilo 2a0326683d mm 2026-07-18 15:03:04 +08:00
folinhilo b9d65d1cc8 mm 2026-07-17 14:30:10 +08:00
folinhilo b4f5d5d7c0 mm 2026-06-23 00:44:16 +08:00
folinhilo 5094d341fa mm 2026-06-14 23:29:30 +08:00
folinhilo 542615a941 mm 2026-06-08 13:04:13 +08:00
folinhilo f2d8ad0de2 mm 2026-06-08 04:19:23 +08:00
folinhilo 8351498071 mm 2026-05-24 05:15:53 +08:00
folinhilo 3bee6aaf18 mm 2026-05-16 05:33:26 +08:00
folinhilo 0f23a8f7a0 mm 2026-05-16 00:51:11 +08:00
186 changed files with 3829 additions and 3201 deletions
Expand all files Collapse all files
.vscode/settings.json
Vendored
+4 -1
View File
@@ -1,6 +1,9 @@
{ {
"files.associations": { "files.associations": {
"packages/ui-web/**/*.css": "tailwindcss" "packages/ui-web-tw/**/*.css": "tailwindcss"
},
"tailwindCSS.experimental.configFile": {
"packages/ui-web-tw/src/index.css": "packages/ui-web-tw/src/**"
}, },
"editor.quickSuggestions": { "editor.quickSuggestions": {
"strings": "on" "strings": "on"
apps/vite-project/src/App.tsx
-122
View File
@@ -1,122 +0,0 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<section id="center">
<div className="hero">
<img src={heroImg} className="base" width="170" height="179" alt="" />
<img src={reactLogo} className="framework" alt="React logo" />
<img src={viteLogo} className="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
</p>
</div>
<button
type="button"
className="counter"
onClick={() => setCount((count) => count + 1)}
>
Count is {count}
</button>
</section>
<div className="ticks"></div>
<section id="next-steps">
<div id="docs">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#documentation-icon"></use>
</svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img className="logo" src={viteLogo} alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://react.dev/" target="_blank">
<img className="button-icon" src={reactLogo} alt="" />
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#social-icon"></use>
</svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li>
<a href="https://github.com/vitejs/vite" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#github-icon"></use>
</svg>
GitHub
</a>
</li>
<li>
<a href="https://chat.vite.dev/" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#discord-icon"></use>
</svg>
Discord
</a>
</li>
<li>
<a href="https://x.com/vite_js" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#x-icon"></use>
</svg>
X.com
</a>
</li>
<li>
<a href="https://bsky.app/profile/vite.dev" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#bluesky-icon"></use>
</svg>
Bluesky
</a>
</li>
</ul>
</div>
</section>
<div className="ticks"></div>
<section id="spacer"></section>
</>
)
}
export default App
apps/vite-project/src/common/InnerWrapper.tsx
-16
View File
@@ -1,16 +0,0 @@
import { type ReactNode } from "react";
export const InnerWrapper = ({ children }: { children: ReactNode }) => {
return (
<div
style={{
gap: "10px",
display: "flex",
flexWrap: "nowrap",
alignItems: "center",
}}
>
{children}
</div>
);
};
apps/vite-project/src/gallery/ButtonGallery.tsx
-251
View File
@@ -1,251 +0,0 @@
import { Button, DownloadSvg } from "@defgov/ui-web-tw";
import { InnerWrapper } from "../common/InnerWrapper";
import { OuterWrapper } from "../common/OuterWrapper";
export const ButtonGallery = () => {
return (
<OuterWrapper>
<InnerWrapper>
<Button size="xs">xsmall</Button>
<Button size="xs" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
xsmall
</Button>
<Button size="sm">small</Button>
<Button size="sm" iconSvg={<DownloadSvg />}>
small
</Button>
<Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md">medium</Button>
<Button size="md" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
medium
</Button>
<Button size="lg">large</Button>
<Button size="lg" iconSvg={<DownloadSvg />}>
large
</Button>
<Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="xs" variant="outline">
xsmall
</Button>
<Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="outline">
small
</Button>
<Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="outline">
medium
</Button>
<Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="outline">
large
</Button>
<Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="outline"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="xs" variant="subtle">
xsmall
</Button>
<Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="subtle">
small
</Button>
<Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="subtle">
medium
</Button>
<Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="subtle">
large
</Button>
<Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="subtle"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
{/* ------------------------------------- */}
<InnerWrapper>
<Button size="xs" variant="ghost">
xsmall
</Button>
<Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
xsmall
</Button>
<Button
size="xs"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
xsmall
</Button>
<Button size="sm" variant="ghost">
small
</Button>
<Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
small
</Button>
<Button
size="sm"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
small
</Button>
</InnerWrapper>
<InnerWrapper>
<Button size="md" variant="ghost">
medium
</Button>
<Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
medium
</Button>
<Button
size="md"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
medium
</Button>
<Button size="lg" variant="ghost">
large
</Button>
<Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
large
</Button>
<Button
size="lg"
variant="ghost"
iconSvg={<DownloadSvg />}
iconOnly={true}
>
large
</Button>
</InnerWrapper>
<InnerWrapper>
<Button variant="filled" brand="info">
button
</Button>
<Button variant="outline" brand="info">
button
</Button>
<Button variant="subtle" brand="info">
button
</Button>
<Button variant="ghost" brand="info">
button
</Button>
</InnerWrapper>
<InnerWrapper>
<Button variant="filled" disabled>
button
</Button>
<Button variant="outline" disabled>
button
</Button>
<Button variant="subtle" disabled>
button
</Button>
<Button variant="ghost" disabled>
button
</Button>
</InnerWrapper>
</OuterWrapper>
);
};
apps/vite-project/src/main.tsx
-9
View File
@@ -1,9 +0,0 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
apps/vite-project/src/types/css.d.ts
Vendored
-4
View File
@@ -1,4 +0,0 @@
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
apps/vite-project/src/types/env.d.ts
Vendored
-51
View File
@@ -1,51 +0,0 @@
/// <reference types="vite/client" />
declare module "*.svg" {
import * as React from "react";
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
declare module "*.png" {
const src: string;
export default src;
}
declare module "*.jpg" {
const src: string;
export default src;
}
declare module "*.jpeg" {
const src: string;
export default src;
}
declare module "*.gif" {
const src: string;
export default src;
}
declare module "*.webp" {
const src: string;
export default src;
}
interface ImportMetaEnv {
readonly MODE: "development" | "production" | "test";
readonly BASE_URL: string;
readonly PROD: boolean;
readonly DEV: boolean;
readonly SSR: boolean;
// ===== 业务环境变量 =====
readonly VITE_API_BASE: string;
readonly VITE_UPLOAD_URL?: string;
readonly VITE_ENABLE_MOCK?: "true" | "false";
readonly VITE_SENTRY_DSN?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
apps/vite-project/vite.config.ts
-11
View File
@@ -1,11 +0,0 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rolldownOptions: { },
},
});
package.json
+3 -3
View File
@@ -3,8 +3,8 @@
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
"build": "turbo run build", "dev": "turbo run dev",
"dev": "turbo run dev" "build": "turbo run build"
}, },
"devDependencies": { "devDependencies": {
"turbo": "^2.8.0" "turbo": "^2.8.0"
@@ -12,5 +12,5 @@
"engines": { "engines": {
"node": ">=20" "node": ">=20"
}, },
"packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38" "packageManager": "pnpm@11.13.1+sha512.b2fc7683b8a6525414e7d13e1ba28caaddde96bf66ec540bfaeb7e702b81f3e0be4d1f295edf7f9fe0396740a8dce4509c582ddf79891f4543fea32d37645f25"
} }
packages/bookmark-sync/manifest.json
-19
View File
@@ -1,19 +0,0 @@
{
"name": "@defgov/bookmark-sync",
"version": "1.0",
"manifest_version": 3,
"permissions": ["bookmarks", "storage"],
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "controller.js"
},
"browser_specific_settings": {
"gecko": {
"id": "bookmark-sync@example.com",
"strict_min_version": "109.0"
}
}
}
packages/bookmark-sync/package.json
-15
View File
@@ -1,15 +0,0 @@
{
"name": "defgov-bookmark-sync",
"version": "0.0.0",
"private": true,
"dependencies": {
"typescript": "^6.0.3"
},
"devDependencies": {
"@types/chrome": "^0.1.40",
"@types/firefox-webext-browser": "^143.0.0",
"@types/node": "^25.6.0",
"@types/webextension-polyfill": "^0.12.5",
"webextension-polyfill": "^0.12.0"
}
}
packages/bookmark-sync/src/controller.ts
-79
View File
@@ -1,79 +0,0 @@
import browser from "webextension-polyfill";
export class Controller {
/**
* 书签栏 (Bookmarks Bar) 固定ID为 "1"
*
* 其他书签 (Other Bookmarks) 固定ID为 "2"
*
* 移动设备书签 (Mobile Bookmarks) 固定ID为 "3"
*/
rootFolder: string;
constructor(rootFolder: string = "1") {
this.rootFolder = rootFolder;
}
init() {}
setRootFolder(rootFolder: string) {
this.rootFolder = rootFolder;
}
async createBookmark(parentId: string, title: string, url?: string) {
try {
await browser.bookmarks.create({
parentId: parentId,
title: title,
url: url,
type: "bookmark",
});
} catch (error) {
console.error("❌ 创建书签失败:", error);
}
}
async createFolder(parentId: string, title: string, url?: string) {
try {
await browser.bookmarks.create({
parentId: parentId,
title: title,
url: url,
type: "folder",
});
} catch (error) {
console.error(error);
}
}
async createSeparator(parentId: string) {
try {
await browser.bookmarks.create({
parentId: parentId,
type: "separator",
});
} catch (error) {
console.error(error);
}
}
async deleteNode(id: string) {
const results = await browser.bookmarks.get(id);
if (results[0].type === "bookmark" || results[0].type === "separator") {
deleteBookmarkOrSeparator(id);
} else if (results[0].type === "folder") {
deleteFolder(id);
}
}
async moveNode(id: string, destinationId: string, index: number) {
try {
await browser.bookmarks.move(id, {
parentId: destinationId,
index: index,
});
} catch (error) {
console.error(error);
}
}
}
packages/bookmark-sync/src/custom-bookmark-bar/newtab.html
-47
View File
@@ -1,47 +0,0 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的自定义书签</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
background: #f5f5f5;
}
#bookmark-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}
.bookmark-item {
display: block;
width: 120px;
padding: 15px;
background: white;
border-radius: 8px;
text-decoration: none;
color: #333;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
.bookmark-item:hover {
background: #e0e0e0;
}
</style>
</head>
<body>
<h2>我的书签管理器</h2>
<!-- 文件夹切换下拉框 -->
<select id="folder-selector">
<option value="1">书签栏 (ID: 1)</option>
<!-- 其他文件夹可以通过代码动态加载到这里 -->
</select>
<!-- 书签渲染容器 -->
<div id="bookmark-container"></div>
<script src="popup.js"></script>
</body>
</html>
packages/bookmark-sync/src/custom-bookmark-bar/popup.ts
-76
View File
@@ -1,76 +0,0 @@
// 递归提取某个节点下的所有书签 URL（防止文件夹嵌套）
function extractUrls(
bookmarkNode: chrome.bookmarks.BookmarkTreeNode[],
): string[] {
let urls: string[] = [];
for (const node of bookmarkNode) {
if (node.url) {
urls.push(node.url);
} else if (node.children) {
urls = urls.concat(extractUrls(node.children));
}
}
return urls;
}
// 渲染指定 ID 文件夹下的书签
async function renderBookmarksByFolderId(folderId: string) {
try {
const results = await chrome.bookmarks.getSubTree(folderId);
const folderNode = results[0];
if (!folderNode || !folderNode.children) return;
const container = document.getElementById("bookmark-container");
if (container) container.innerHTML = "";
// 遍历直接子节点
folderNode.children.forEach((bookmark) => {
if (bookmark.url) {
const link = document.createElement("a");
link.className = "bookmark-item";
link.href = bookmark.url;
link.textContent = bookmark.title || bookmark.url;
// 自动获取网站 favicon 图标
const faviconUrl = `https://www.google.com/s2/favicons?domain=${new URL(bookmark.url).hostname}&sz=32`;
link.innerHTML = `<img src="${faviconUrl}" style="vertical-align: middle; margin-right: 5px;">${bookmark.title}`;
container?.appendChild(link);
}
});
} catch (error) {
console.error("获取书签失败:", error);
}
}
// 初始化：自动获取所有一级文件夹并填充到下拉框
async function initFolderSelector() {
const results = await chrome.bookmarks.getTree();
const bookmarkBar = results[0].children?.[0]; // ID为1的书签栏
const selector = document.getElementById(
"folder-selector",
) as HTMLSelectElement;
if (bookmarkBar && bookmarkBar.children) {
bookmarkBar.children.forEach((folder) => {
// 只把文件夹加到下拉框里
if (!folder.url && folder.id !== "1") {
const option = document.createElement("option");
option.value = folder.id || "";
option.textContent = folder.title || "未命名文件夹";
selector.appendChild(option);
}
});
}
// 绑定切换事件
selector.addEventListener("change", (e) => {
const targetId = (e.target as HTMLSelectElement).value;
renderBookmarksByFolderId(targetId);
});
// 默认渲染书签栏
renderBookmarksByFolderId("1");
}
// 页面加载完成后启动
document.addEventListener("DOMContentLoaded", initFolderSelector);
packages/bookmark-sync/src/types.ts
-5
View File
@@ -1,5 +0,0 @@
import browser from "webextension-polyfill";
export type Account = { id: string; email: string; password: string };
export type BookmarkTreeNode = browser.Bookmarks.BookmarkTreeNode;
packages/bookmark-sync/src/utils.ts
-20
View File
@@ -1,20 +0,0 @@
async function getLastIndex(parentId: string) {
const children = await browser.bookmarks.getChildren(parentId);
return children.length > 0 ? children[children.length - 1].index : 0;
}
async function deleteBookmarkOrSeparator(id: string) {
try {
await browser.bookmarks.remove(id);
} catch (error) {
console.error(error);
}
}
async function deleteFolder(id: string) {
try {
await browser.bookmarks.removeTree(id);
} catch (error) {
console.error(error);
}
}
packages/bookmark-sync/tsconfig.json
-118
View File
@@ -1,118 +0,0 @@
{
// tsconfig.lib.json
// 直接复制本文件内容到子项目的 tsconfig.json 即可，不要用 entends 继承本文件
"extends": "../../tsconfig.base.json",
"compilerOptions": {
/**
* Browser api，需要加 "DOM"，"DOM.Iterable"
* Node api，需要加 "ES2025"，始终使用带版本号的最新版本
* NextJs api，属于同构，server 端会预处理 DOM，计算url，三个都需要 "ES2025", "DOM", "DOM.Iterable"
*/
"lib": ["ES2025", "DOM", "DOM.Iterable"],
/**
* React JSX 编译模式
* - 使用 React 17+ 新 JSX Transform
* - 不需要手动 import React
*/
"jsx": "react-jsx",
/**
* 编译输出目录
* - tsc / tsc -b 都会用到
*/
"outDir": "./dist",
/**
* 源码根目录
* - 确保 dist 结构与 src 一致
* - 对 declaration 路径至关重要
*/
"rootDir": "./src",
/**
* 生成 .d.ts 类型声明文件
* - 组件库 / npm 包发布必需
* - 对应用项目无害，仅影响类型输出
*/
"declaration": true,
/**
* 只做类型检查，不生成 JS 输出
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
* - 防止 tsc 与构建工具重复 emit
*/
"noEmit": true,
/**
* 强制单文件可独立编译
* - 适配 esbuild / SWC / bundler 编译模型
* - 禁止依赖跨文件类型推断（enum / namespace 等）
*/
"isolatedModules": true,
/**
* 允许在 import 中显式使用 .ts / .tsx 后缀
* - 兼容 Node ESM / bundler 对文件扩展名的严格要求
* - 避免 `import './foo'` 在 TS + ESM 下歧义
*/
"allowImportingTsExtensions": true
},
/**
* 参与类型检查和编译的文件
* - 只扫描 src
* - 其它目录通过 exclude 排除
*/
"include": ["src", "scripts"],
/**
* 明确排除非源码内容
* - 避免污染类型系统
* - 防止误入 dist / test / config
* - 保证发布包干净
*/
"exclude": [
"scripts",
"node_modules",
"dist",
// ---------- build / cache ----------
".turbo/**/*",
".cache/**/*",
".vite/**/*",
// ---------- 配置文件 ----------
"vite.config.ts",
"*.config.ts",
"*.config.js",
"tsconfig.*.json",
// ---------- 测试相关 ----------
"__tests__/**/*",
"test/**/*",
"tests/**/*",
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
// ---------- Storybook ----------
".storybook/**/*",
"stories/**/*",
// ---------- 示例 / 脚本 ----------
"example/**/*",
"examples/**/*",
"scripts/**/*",
// ---------- 环境与静态资源 ----------
".env",
".env.*",
"public/**/*",
// ---------- 文档 ----------
"docs/**/*",
"README.md",
"LICENSE"
]
}
packages/css/package.json
+3 -10
View File
@@ -1,5 +1,5 @@
{ {
"name": "@defgov/css", "name": "@dg/css",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"type": "module", "type": "module",
@@ -24,21 +24,14 @@
"scripts": { "scripts": {
"gen-index": "ts-node scripts/gen-index.ts", "gen-index": "ts-node scripts/gen-index.ts",
"gen-dts": "tsc -p tsconfig.build.json", "gen-dts": "tsc -p tsconfig.build.json",
"dev": "pnpm gen-index && vite build --watch",
"build": "pnpm gen-index && vite build && pnpm gen-dts" "build": "pnpm gen-index && vite build && pnpm gen-dts"
}, },
"dependencies": {},
"devDependencies": { "devDependencies": {
"@types/node": "^25.6.0", "@types/node": "^25.6.0",
"@vitejs/plugin-react": "^6.0.1",
"tinyglobby": "^0.2.16", "tinyglobby": "^0.2.16",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"typescript": "^6.0.3", "typescript": "^6.0.3",
"vite": "^8.0.10", "vite": "^8.0.10"
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3"
},
"peerDependencies": {
"react": "^19",
"react-dom": "^19"
} }
} }
packages/css/scripts/gen-index.ts
+223 -116
View File
@@ -1,147 +1,254 @@
import fs from "fs"; import * as fs from "fs";
import path from "path"; import * as path from "path";
// 1. 引入 tinyglobby
import { globSync } from "tinyglobby";
interface Config { /**
* 默认测试 / story / example / fixture / type 文件匹配规则
* 仅用于“识别”，不直接决定是否排除
*/
const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
// =========================
// Test / Spec
// =========================
/\.(test|spec)\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
// =========================
// E2E / Playwright / Cypress
// =========================
/\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
// =========================
// Storybook
// =========================
/\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
// =========================
// Snapshot / Mock / Fixture
// =========================
/\.snap$/,
/\.mock\.(ts|tsx|js|jsx)$/,
/\.fixture\.(ts|tsx|js|jsx)$/,
// =========================
// Type declarations
// =========================
/\.d\.ts$/,
// =========================
// Examples / Demos / Docs
// =========================
/\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
];
/**
* 测试 / 辅助目录（目录级排除）
*/
const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
/[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
/[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
/[/\\](story|stories|\.storybook)[\/\\]/,
/[/\\](types|type|typings|interfaces)[\/\\]/,
/[/\\](examples|example|demo|demos|docs)[\/\\]/,
];
type Config = {
outputDir: string; outputDir: string;
outputFilenameWithExt: string; outputFile: string;
scanDirs: string[]; scanDirs: string[];
importPrefix: string; preamble?: string[];
predefineStatements: string[]; importPrefix?: string;
includeExtensions: string[]; entryFilePatterns?: RegExp[];
excludeDirs: string[]; barrelFirstMode?: boolean;
excludeFileExtensions: string[]; includeFilePatterns?: RegExp[];
excludePatterns: RegExp[]; excludeFilePatterns?: RegExp[];
} excludeDirPatterns?: RegExp[];
const cssConfig: Config = {
outputDir: "src",
outputFilenameWithExt: "index.css",
scanDirs: ["src"],
importPrefix: "@import",
predefineStatements: [],
includeExtensions: [".css"],
excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
excludeFileExtensions: [],
excludePatterns: [/^index\.(css)$/, /\.(test|spec)\./, /\.(story|stories)\./],
}; };
const tsConfig: Config = { const tsConfig: Config = {
outputDir: "src", outputDir: "src",
outputFilenameWithExt: "index.ts", outputFile: "index.ts",
scanDirs: ["src"], scanDirs: ["src"],
importPrefix: "export * from", importPrefix: "export * from",
predefineStatements: ["import './index.css'"], barrelFirstMode: true,
includeExtensions: [".ts", "tsx", "js", "jsx"], preamble: ["import './index.css';"],
excludeDirs: ["__tests__", "tests", "story", "stories", "types"], entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
excludeFileExtensions: [".d.ts"], includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
excludePatterns: [ excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
/^index\.(ts|tsx|js|jsx)$/, excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
/\.(test|spec)\./,
/\.(story|stories)\./,
],
}; };
const normalizePath = (p: string) => p.replace(/\\/g, "/"); const cssConfig: Config = {
outputDir: "src",
const isExcludeDir = (filePath: string, excludeDirs: string[]) => { outputFile: "index.css",
const normalized = normalizePath(filePath); scanDirs: ["src"],
return excludeDirs.some((dir) => normalized.includes(`/${dir}/`)); importPrefix: "@import",
barrelFirstMode: false,
entryFilePatterns: [/^index\.(css)$/],
includeFilePatterns: [/\.(css)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
}; };
const isExcludeFileExtensions = ( function isEntryFile(fileName: string, config: Config): boolean {
filePath: string, const regExps = config.entryFilePatterns;
excludeFileExtensions: string[],
) => excludeFileExtensions.some((ext) => filePath.endsWith(ext));
const isExcludePattern = (fileName: string, excludePatterns: RegExp[]) => if (!regExps || regExps.length === 0) return false;
excludePatterns.some((pattern) => pattern.test(fileName));
// ---------------------------------------- return regExps.some((regExp) => regExp.test(fileName));
function isValidFile(filePath: string, config: Config): boolean { }
const fileName = filePath.split(/[\\/]/).pop()!;
if (isExcludeDir(filePath, config.excludeDirs)) return false; function isIncludeFile(fileName: string, config: Config): boolean {
if (isExcludeFileExtensions(filePath, config.excludeFileExtensions)) const regExps = config.includeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeFile(fileName: string, config: Config): boolean {
const regExps = config.excludeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeDir(filePath: string, config: Config): boolean {
const regExps = config.excludeDirPatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(filePath));
}
function isValidDir(filePath: string, config: Config): boolean {
if (isExcludeDir(filePath, config)) {
return false; return false;
if (isExcludePattern(fileName, config.excludePatterns)) return false;
const ext = path.extname(filePath);
return config.includeExtensions.includes(ext);
} }
// ----------------------------------------- return true;
function generateIndexFile(config: Config) { }
const currentPath = process.cwd();
const outputPath = path.resolve(currentPath, config.outputDir);
let exportStatements: string[] = [];
// ------ scanDirs forEach start ------------------------ function isValidFile(fileName: string, config: Config): boolean {
config.scanDirs.forEach((dir) => { if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
// 2. 路径模式保持不变，tinyglobby 能够正确处理 return true;
const scanPattern = path.resolve(currentPath, dir, "**", "*.*"); }
const allFilePath = globSync(scanPattern, { return false;
absolute: true, }
// 3. 移除了 windowsPathsNoEscape，tinyglobby 默认处理路径更智能
const buildExportStatement = (filePath: string, config: Config) => {
// 文件夹（不是文件）与目标文件的相对路径
let exportFilePath = path.relative(config.outputDir, filePath);
// 去除扩展名，并且转化成正斜杠
const exportFilePathWithoutExt = path
.join(
path.dirname(exportFilePath),
path.basename(exportFilePath, path.extname(exportFilePath)),
)
.replace(/\\/g, "/");
// 加上 ./ 前缀
return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
};
function isOutputEntry(filePath: string, config: Config) {
const outputFilePath = path.resolve(config.outputDir, config.outputFile);
const targetFilePath = path.resolve(filePath);
return outputFilePath === targetFilePath;
}
function generateExports(dirPath: string, config: Config): string[] {
const fileNames = fs.readdirSync(dirPath);
const exports: string[] = [];
// =========================
// 逻辑分支：Barrel First Mode
// =========================
if (config.barrelFirstMode) {
// 查找当前目录有没有 index.ts
const entryFileName = fileNames.find((fileName) => {
const filePath = path.join(dirPath, fileName);
return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
});
// 如果有
if (entryFileName) {
const entryFilePath = path.join(dirPath, entryFileName);
// 如果是 outputFile 自身，则跳过
if (isOutputEntry(entryFilePath, config)) {
console.log(`⏭️ 跳过自身入口文件: ${entryFilePath}`);
} else {
exports.push(buildExportStatement(entryFilePath, config));
}
}
}
// =========================
// 逻辑分支：index.ts 不存在，则继续正常遍历与递归
// =========================
fileNames.forEach((fileName) => {
const filePath = path.join(dirPath, fileName);
const stat = fs.statSync(filePath);
// 情况1：是文件，且通过了校验
if (
stat.isFile() &&
isValidFile(fileName, config) &&
!isEntryFile(fileName, config)
) {
exports.push(buildExportStatement(filePath, config));
}
// 情况2：是文件夹，且通过了校验，递归扫描子文件夹
else if (stat.isDirectory() && isValidDir(filePath, config)) {
const subExports = generateExports(filePath, config);
exports.push(...subExports);
}
}); });
const validFiles = allFilePath.filter((filePath) => { return exports;
return isValidFile(filePath, config); }
async function genIndexFile(config: Config) {
const allExports: string[] = [];
// 遍历所有需要扫描的根目录
config.scanDirs.forEach((scanDir) => {
// 只有当目录真实存在时才进行扫描
if (fs.existsSync(scanDir)) {
const exports = generateExports(scanDir, config);
allExports.push(...exports);
} else {
console.warn(`⚠️ 警告：扫描目录不存在，已跳过 -> ${scanDir}`);
}
}); });
if (validFiles.length === 0) { // 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
console.log( const fileContent = [
`⚠️ 未找到符合条件的文件，跳过生成 ${config.outputFilenameWithExt}`, ...(config.preamble ?? []),
); ...Array.from(new Set(allExports)),
return; ].join("\n");
// 写入之前，确保输出目录存在，如果不存在就递归创建
if (!fs.existsSync(config.outputDir)) {
fs.mkdirSync(config.outputDir, { recursive: true });
} }
validFiles.sort(); // 将内容写入到最终的 index.ts 文件中
const outputFilePath = path.join(config.outputDir, config.outputFile);
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
validFiles.forEach((file) => { console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
const relativePath = path.relative(outputPath, file);
const importPath = `./${relativePath.replace(/\\/g, "/")}`;
exportStatements.push(`${config.importPrefix} '${importPath}';`);
});
});
// --------- scanDirs forEach end ----------------
const indexFileContent = `
${config.predefineStatements.join("\n")}
${exportStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(
currentPath,
config.outputDir,
config.outputFilenameWithExt,
);
// ✅ 内容比对，避免重复写入
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexFileContent) {
console.log(
`✅ ${config.outputFilenameWithExt} 内容无变化，无需重新生成`,
);
return;
}
} }
fs.writeFileSync(indexFilePath, indexFileContent, "utf8"); // ================= 脚本执行入口 =================
console.log(`✅ 成功生成 ${config.outputFilenameWithExt}: ${indexFilePath}`);
}
// --------------------------------------------------
try { try {
console.log(`🚀 [gen-index] 开始扫描`); console.log("🚀 开始扫描并生成入口文件...");
generateIndexFile(cssConfig); await genIndexFile(cssConfig);
generateIndexFile(tsConfig); await genIndexFile(tsConfig);
} catch (err) { console.log("✅ 脚本执行完毕！");
const msg = err instanceof Error ? err.message : String(err); } catch (error) {
console.error(`❌ [gen-index] 执行失败: ${msg}`); console.error("❌ 脚本执行失败:", error);
process.exit(1); process.exit(1); // 如果报错，让进程以非 0 状态码退出
} }
packages/css/src/base/root.css
+71 -46
View File
@@ -1,3 +1,5 @@
@layer utility;
:root { :root {
--color-red-50: oklch(97.1% 0.013 17.38); --color-red-50: oklch(97.1% 0.013 17.38);
--color-red-100: oklch(93.6% 0.032 17.717); --color-red-100: oklch(93.6% 0.032 17.717);
@@ -317,39 +319,57 @@
--warning-bg-low-hover: var(--color-yellow-200); --warning-bg-low-hover: var(--color-yellow-200);
--warning-bg-low-active: var(--color-yellow-300); --warning-bg-low-active: var(--color-yellow-300);
--default-bg: var(--color-neutral-600); --emphasize-bg: var(--color-neutral-600);
--default-bg-hover: var(--color-neutral-500); --emphasize-bg-hover: var(--color-neutral-500);
--default-bg-active: var(--color-neutral-400); --emphasize-bg-active: var(--color-neutral-400);
--default-bg-low: var(--color-neutral-100); --emphasize-bg-low: var(--color-neutral-100);
--default-bg-low-hover: var(--color-neutral-200); --emphasize-bg-low-hover: var(--color-neutral-200);
--default-bg-low-active: var(--color-neutral-300); --emphasize-bg-low-active: var(--color-neutral-300);
--disabled-fg: var(--color-gray-400); --disabled-fg: var(--color-gray-400);
--disabled-bg: var(--color-gray-100); --disabled-bg: var(--color-gray-100);
--disabled-border-color: var(--color-gray-300); --disabled-border-color: var(--color-gray-300);
--spacing: 2px; --font-size-xs: 12px;
--font-size-sm: 12px;
--font-size-md: 14px;
--font-size-lg: 14px;
--font-size-xl: 16px;
--font-size-2xl: 24px;
--font-size-3xl: 30px;
--font-size-xs: 0.75rem; --line-height: 1.4;
--font-size-sm: 0.875rem;
--font-size-md: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.5rem;
--font-size-2xl: 1.875rem;
--line-height-xs: 1.33; /* x button in tag */
--line-height-sm: 1.42; --height-item-xs: 20px;
--line-height-md: 1.5; /* text line */
--line-height-lg: 1.55; --height-item-sm: 24px;
--line-height-xl: 1.33; /* normal desktop button */
--line-height-2xl: 1.2; --height-item-md: 28px;
/* tab */
--height-item-lg: 34px;
/* mobile button */
--height-item-xl: 44px;
/* navigation bar */
--height-item-2xl: 56px;
/* header bar */
--height-item-3xl: 64px;
--height-item-xs: 1.5rem; --radius-xs: 2px;
--height-item-sm: 1.75rem; --radius-sm: 2px;
--height-item-md: 2.125rem; --radius-md: 4px;
--height-item-lg: 2.75rem; --radius-lg: 6px;
--height-item-xl: 4rem; --radius-xl: 8px;
--height-item-2xl: 4rem; --radius-2xl: 12px;
--radius-3xl: 16px;
--padding-xs: 6px;
--padding-sm: 8px;
--padding-md: 10px;
--padding-lg: 12px;
--padding-xl: 16px;
--padding-2xl: 2px;
--padding-3xl: 2px;
--animate-spin: spin 1s linear infinite; --animate-spin: spin 1s linear infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@@ -360,12 +380,12 @@
--animate-fade-in-up: fade-in-up 0.5s ease-out both; --animate-fade-in-up: fade-in-up 0.5s ease-out both;
--animate-fade-out-up: fade-out-up 0.5s ease-in both; --animate-fade-out-up: fade-out-up 0.5s ease-in both;
--radius-xs: 0.125rem; --font-weight-light: 300;
--radius-sm: 0.25rem; --font-weight-normal: 400;
--radius-md: 0.375rem; --font-weight-extranormal: 500;
--radius-lg: 0.5rem; --font-weight-semibold: 600;
--radius-xl: 0.75rem; --font-weight-bold: 700;
--radius-2xl: 1rem; --font-weight-extrabold: 800;
--font-sans: --font-sans:
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -375,27 +395,32 @@
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace; "Courier New", monospace;
--margin-xs: calc(var(--spacing) * 2); --margin-xs: 4px;
--margin-sm: calc(var(--spacing) * 4); --margin-sm: 8px;
--margin-md: calc(var(--spacing) * 2); --margin-md: calc(var(--spacing) * 2);
--margin-lg: calc(var(--spacing) * 2); --margin-lg: calc(var(--spacing) * 2);
--margin-xl: calc(var(--spacing) * 2); --margin-xl: calc(var(--spacing) * 2);
--margin-2xl: calc(var(--spacing) * 2); --margin-2xl: calc(var(--spacing) * 2);
--margin-3xl: calc(var(--spacing) * 2);
--padding-long-xs: calc(var(--spacing) * 3); --padding-long-xs: 12px;
--padding-long-sm: calc(var(--spacing) * 4); --padding-long-sm: 14px;
--padding-long-md: calc(var(--spacing) * 5); --padding-long-md: 18px;
--padding-long-lg: calc(var(--spacing) * 8); --padding-long-lg: 26px;
--padding-long-xl: calc(var(--spacing) * 2); --padding-long-xl: 2px;
--padding-long-2xl: calc(var(--spacing) * 2); --padding-long-2xl: 2px;
--padding-long-3xl: 2px;
--padding-xs: calc(var(--spacing) * 2); --height-addon-xs: 16px;
--padding-sm: calc(var(--spacing) * 4); --height-addon-sm: 17px;
--padding-md: calc(var(--spacing) * 2); --height-addon-md: 18px;
--padding-lg: calc(var(--spacing) * 2); --height-addon-lg: 20px;
--padding-xl: calc(var(--spacing) * 2);
--padding-2xl: calc(var(--spacing) * 2);
--drop-shadow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12)) --px-addon-xs: 6px;
--px-addon-sm: 6px;
--px-addon-md: 10px;
--px-addon-lg: 12px;
--drop-shadow-md: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14)); drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
} }
packages/css/src/index.css
+52
View File
@@ -0,0 +1,52 @@
@import './base/root';
@import './utility-size-insensitive/align-content';
@import './utility-size-insensitive/align-items';
@import './utility-size-insensitive/align-self';
@import './utility-size-insensitive/animation';
@import './utility-size-insensitive/background';
@import './utility-size-insensitive/box-decoration';
@import './utility-size-insensitive/box-inside';
@import './utility-size-insensitive/box-sizing';
@import './utility-size-insensitive/brand';
@import './utility-size-insensitive/break-after';
@import './utility-size-insensitive/break-before';
@import './utility-size-insensitive/color';
@import './utility-size-insensitive/cursor';
@import './utility-size-insensitive/display';
@import './utility-size-insensitive/drop-shadow';
@import './utility-size-insensitive/flex-direction';
@import './utility-size-insensitive/flex-wrap';
@import './utility-size-insensitive/font-family';
@import './utility-size-insensitive/justify-content';
@import './utility-size-insensitive/justify-items';
@import './utility-size-insensitive/justify-self';
@import './utility-size-insensitive/overflow';
@import './utility-size-insensitive/overscroll-behavior';
@import './utility-size-insensitive/position';
@import './utility-size-insensitive/screen-reader';
@import './utility-size-insensitive/theme';
@import './utility-size-insensitive/user-select';
@import './utility-size-insensitive/variant-can-hover';
@import './utility-size-insensitive/variant-disabled';
@import './utility-size-insensitive/variant-non-clickable';
@import './utility-size-insensitive/variant';
@import './utility-size-insensitive/visibility';
@import './utility-size-insensitive/z-index';
@import './utility-size-sensitive/border-radius';
@import './utility-size-sensitive/font-size-addon';
@import './utility-size-sensitive/font-size';
@import './utility-size-sensitive/font-weight';
@import './utility-size-sensitive/gap';
@import './utility-size-sensitive/height-addon';
@import './utility-size-sensitive/height-dot';
@import './utility-size-sensitive/height-inline';
@import './utility-size-sensitive/height-item';
@import './utility-size-sensitive/margin';
@import './utility-size-sensitive/min-width';
@import './utility-size-sensitive/padding-addon';
@import './utility-size-sensitive/padding-long';
@import './utility-size-sensitive/padding';
@import './utility-size-sensitive/width-addon';
@import './utility-size-sensitive/width-dot';
@import './utility-size-sensitive/width-inline';
@import './utility-size-sensitive/width-item';
packages/css/src/index.ts
+10 -1
View File
@@ -1 +1,10 @@
import './index.css' import './index.css';
export * from './recipes/badgeSizeRecipe';
export * from './recipes/brandRecipe';
export * from './recipes/dotSizeRecipe';
export * from './recipes/inlineSizeRecipe';
export * from './recipes/itemSizeRecipe';
export * from './recipes/itemVariantRecipe';
export * from './recipes/tabVariantRecipe';
export * from './utils/cpm';
export * from './utils/cvr';
packages/css/src/recipe/itemSizeRecipe.ts
-89
View File
@@ -1,89 +0,0 @@
import { cvr } from "../utils/cvr";
export const itemSizeRecipe = cvr({
base: "relative select-none flex flex-nowrap justify-center items-center",
variants: {
size: {
xs: "text-xs h-item-xs gap-xs px-xs",
sm: "text-sm h-item-sm gap-sm px-sm",
md: "text-md h-item-md gap-md px-md",
lg: "text-lg h-item-lg gap-lg px-lg",
xl: "text-xl h-item-xl gap-xl px-xl",
"2xl": "text-2xl h-item-2xl gap-2xl px-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
iconOnly: {
true: "px-none",
false: "",
},
},
compoundVariants: [
{ iconOnly: false, size: "xs", class: "px-xs" },
{ iconOnly: false, size: "sm", class: "px-sm" },
{ iconOnly: false, size: "md", class: "px-md" },
{ iconOnly: false, size: "lg", class: "px-lg" },
{ iconOnly: false, size: "xl", class: "px-xl" },
{ iconOnly: false, size: "2xl", class: "px-2xl" },
{ shape: "rounded", size: "xs", class: "rounded-sm" },
{
shape: "rounded",
size: "sm",
class: "rounded-md",
},
{
shape: "rounded",
size: "md",
class: "rounded-lg",
},
{
shape: "rounded",
size: "lg",
class: "rounded-xl",
},
{
shape: "rounded",
size: "xl",
class: "rounded-2xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-3xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-item-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-item-sm",
},
{
iconOnly: true,
size: "md",
class: "w-item-md",
},
{
iconOnly: true,
size: "lg",
class: "w-item-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-item-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-item-2xl",
},
],
});
packages/css/src/recipes/badgeSizeRecipe.ts
+23
View File
@@ -0,0 +1,23 @@
import { cvr } from "../utils/cvr";
export const badgeSizeRecipe = cvr({
base: "display--flex flex--nowrap justify--center items--center select--none bg--red color--white",
variants: {
size: {
xs: "text--addon-xs h--addon-xs w--addon-xs px--addon-xs",
sm: "text--addon-sm h--addon-sm w--addon-sm px--addon-sm",
md: "text--addon-md h--addon-md w--addon-md px--addon-md",
lg: "text--addon-lg h--addon-lg w--addon-lg px--addon-lg",
},
isCircle: {
true: "",
false: "",
},
},
compoundVariants: [
{
isCircle: true,
class: "px--none",
},
],
});
packages/css/src/recipes/brandRecipe.ts
+13
View File
@@ -0,0 +1,13 @@
import { cvr } from "../utils/cvr";
export const brandRecipe = cvr({
variants: {
brand: {
success: "brand--success",
danger: "brand--danger",
info: "brand--info",
warning: "brand--warning",
emphasize: "brand--emphasize",
},
},
});
packages/css/src/recipes/dotSizeRecipe.ts
+13
View File
@@ -0,0 +1,13 @@
import { cvr } from "../utils/cvr";
export const dotSizeRecipe = cvr({
base: "display--flex flex--nowrap justify--center items--center select--none bg--red color--white",
variants: {
size: {
xs: "h--dot-xs w--dot-xs",
sm: "h--dot-sm w--dot-sm",
md: "h--dot-md w--dot-md",
lg: "h--dot-lg w--dot-lg",
},
},
});
packages/css/src/recipes/inlineSizeRecipe.ts
+20
View File
@@ -0,0 +1,20 @@
import { cvr } from "../utils/cvr";
export const inlineSizeRecipe = cvr({
base: "display--flex flex--nowrap justify--center items--center",
variants: {
size: {
xs: "text--xs font-weight--xs h--inline-xs gap--xs",
sm: "text--sm font-weight--sm h--inline-sm gap--sm",
md: "text--md font-weight--md h--inline-md gap--md",
lg: "text--lg font-weight--lg h--inline-lg gap--lg",
xl: "text--xl font-weight--xl h--inline-xl gap--xl",
"2xl": "text--2xl font-weight--2xl h--inline-2xl gap--2xl",
"3xl": "text--3xl font-weight--3xl h--inline-3xl gap--3xl",
},
shape: {
square: "rounded--none",
circle: "rounded--full",
},
},
});
packages/css/src/recipes/itemSizeRecipe.ts
+54
View File
@@ -0,0 +1,54 @@
import { cvr } from "../utils/cvr";
export const itemSizeRecipe = cvr({
base: "select--none display--flex flex--nowrap justify--center items--center",
variants: {
size: {
xs: "text--xs font-weight--xs h--item-xs gap--xs px--xs",
sm: "text--sm font-weight--sm h--item-sm gap--sm px--sm",
md: "text--md font-weight--md h--item-md gap--md px--md",
lg: "text--lg font-weight--lg h--item-lg gap--lg px--lg",
xl: "text--xl font-weight--xl h--item-xl gap--xl px--xl",
"2xl": "text--2xl font-weight--2xl h--item-2xl gap--2xl px--2xl",
"3xl": "text--3xl font-weight--3xl h--item-3xl gap--3xl px--3xl",
},
shape: {
square: "rounded--none",
rounded: "",
circle: "rounded--full",
},
iconOnly: {
true: "px--none",
false: "",
},
longPadding: {
true: "",
false: "",
},
},
compoundVariants: [
{ size: "xs", longPadding: true, class: "px--long-xs" },
{ size: "sm", longPadding: true, class: "px--long-sm" },
{ size: "md", longPadding: true, class: "px--long-md" },
{ size: "lg", longPadding: true, class: "px--long-lg" },
{ size: "xl", longPadding: true, class: "px--long-xl" },
{ size: "2xl", longPadding: true, class: "px--long-2xl" },
{ size: "3xl", longPadding: true, class: "px--long-3xl" },
// ==================================================
{ shape: "rounded", size: "xs", class: "rounded--xs" },
{ shape: "rounded", size: "sm", class: "rounded--sm" },
{ shape: "rounded", size: "md", class: "rounded--md" },
{ shape: "rounded", size: "lg", class: "rounded--lg" },
{ shape: "rounded", size: "xl", class: "rounded--xl" },
{ shape: "rounded", size: "2xl", class: "rounded--2xl" },
{ shape: "rounded", size: "3xl", class: "rounded--3xl" },
// ==================================================
{ iconOnly: true, size: "xs", class: "w--item-xs" },
{ iconOnly: true, size: "sm", class: "w--item-sm" },
{ iconOnly: true, size: "md", class: "w--item-md" },
{ iconOnly: true, size: "lg", class: "w--item-lg" },
{ iconOnly: true, size: "xl", class: "w--item-xl" },
{ iconOnly: true, size: "2xl", class: "w--item-2xl" },
{ iconOnly: true, size: "3xl", class: "w--item-3xl" },
],
});
packages/css/src/recipes/itemVariantRecipe.ts
+72
View File
@@ -0,0 +1,72 @@
import { cvr } from "../utils/cvr";
export const itemVariantRecipe = cvr({
variants: {
variant: {
filled: "",
outline: "",
subtle: "",
ghost: "",
},
disabled: {
true: "",
false: "",
},
clickable: {
true: "",
false: "",
},
},
compoundVariants: [
{
disabled: false,
variant: "filled",
class: "variant--filled",
},
{
disabled: false,
variant: "outline",
class: "variant--outline",
},
{
disabled: false,
variant: "subtle",
class: "variant--subtle",
},
{
disabled: false,
variant: "ghost",
class: "variant--ghost",
},
{
disabled: true,
variant: "filled",
class: "variant--filled-disabled",
},
{
disabled: true,
variant: "outline",
class: "variant--outline-disabled",
},
{
disabled: true,
variant: "subtle",
class: "variant--subtle-disabled",
},
{
disabled: true,
variant: "ghost",
class: "variant--ghost-disabled",
},
{
variant: "filled",
clickable: false,
class: "variant--filled-non-clickable",
},
{
variant: "outline",
clickable: false,
class: "variant--outline-non-clickable",
},
],
});
packages/css/src/recipes/tabVariantRecipe.ts
+14
View File
@@ -0,0 +1,14 @@
import { cvr } from "../utils/cvr";
export const tabVariantRecipe = cvr({
variants: {
variant: {
outline: "",
ghost: "",
},
isAcitve: {
true: "",
false: "",
},
},
});
packages/css/src/utility/size-insensitive/align-content.css → packages/css/src/utility-size-insensitive/align-content.css
+9 -9
View File
@@ -1,37 +1,37 @@
@layer utility { @layer utility {
.align-content-normal { .align-content--normal {
align-content: normal; align-content: normal;
} }
.align-content-center { .align-content--center {
align-content: center; align-content: center;
} }
.align-content-start { .align-content--start {
align-content: flex-start; align-content: flex-start;
} }
.align-content-end { .align-content--end {
align-content: flex-end; align-content: flex-end;
} }
.align-content-between { .align-content--between {
align-content: space-between; align-content: space-between;
} }
.align-content-around { .align-content--around {
align-content: space-around; align-content: space-around;
} }
.align-content-evenly { .align-content--evenly {
align-content: space-evenly; align-content: space-evenly;
} }
.align-content-baseline { .align-content--baseline {
align-content: baseline; align-content: baseline;
} }
.align-content-stretch { .align-content--stretch {
align-content: stretch; align-content: stretch;
} }
} }
packages/css/src/utility/size-insensitive/align-items.css → packages/css/src/utility-size-insensitive/align-items.css
+8 -8
View File
@@ -1,33 +1,33 @@
@layer utility { @layer utility {
.items-start { .items--start {
align-items: flex-start; align-items: flex-start;
} }
.items-end { .items--end {
align-items: flex-end; align-items: flex-end;
} }
.items-end-safe { .items-end--safe {
align-items: safe flex-end; align-items: safe flex-end;
} }
.items-center { .items--center {
align-items: center; align-items: center;
} }
.items-center-safe { .items--center-safe {
align-items: safe center; align-items: safe center;
} }
.items-baseline { .items--baseline {
align-items: baseline; align-items: baseline;
} }
.items-baseline-last { .items--baseline-last {
align-items: last baseline; align-items: last baseline;
} }
.items-stretch { .items--stretch {
align-items: stretch; align-items: stretch;
} }
} }
packages/css/src/utility/size-insensitive/align-self.css → packages/css/src/utility-size-insensitive/align-self.css
+9 -9
View File
@@ -1,37 +1,37 @@
@layer utility { @layer utility {
.align-self-auto { .align-self--auto {
align-self: auto; align-self: auto;
} }
.align-self-start { .align-self--start {
align-self: flex-start; align-self: flex-start;
} }
.align-self-end { .align-self--end {
align-self: flex-end; align-self: flex-end;
} }
.align-self-end-safe { .align-self--end-safe {
align-self: safe flex-end; align-self: safe flex-end;
} }
.align-self-center { .align-self--center {
align-self: center; align-self: center;
} }
.align-self-center-safe { .align-self--center-safe {
align-self: safe center; align-self: safe center;
} }
.align-self-stretch { .align-self--stretch {
align-self: stretch; align-self: stretch;
} }
.align-self-baseline { .align-self--baseline {
align-self: baseline; align-self: baseline;
} }
.align-self-baseline-last { .align-self--baseline-last {
align-self: last baseline; align-self: last baseline;
} }
} }
packages/css/src/utility/size-insensitive/animation.css → packages/css/src/utility-size-insensitive/animation.css
+9 -9
View File
@@ -1,5 +1,5 @@
@layer utility { @layer utility {
.animate-fade-in-down { .animate--fade-in-down {
animation: var(--animate-fade-in-down); animation: var(--animate-fade-in-down);
@keyframes fade-in-down { @keyframes fade-in-down {
@@ -13,7 +13,7 @@
} }
} }
} }
.animate-fade-out-down { .animate--fade-out-down {
animation: var(--animate-fade-out-down); animation: var(--animate-fade-out-down);
} }
@@ -27,7 +27,7 @@
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} }
} }
.animate-fade-in-up { .animate--fade-in-up {
animation: var(--animate-fade-in-up); animation: var(--animate-fade-in-up);
} }
@@ -41,7 +41,7 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
} }
.animate-fade-out-up { .animate--fade-out-up {
animation: var(--animate-fade-out-up); animation: var(--animate-fade-out-up);
} }
@@ -55,7 +55,7 @@
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
} }
} }
.animate-spin { .animate--spin {
animation: var(--animate-spin); animation: var(--animate-spin);
@keyframes spin { @keyframes spin {
@@ -64,7 +64,7 @@
} }
} }
} }
.animate-ping { .animate--ping {
animation: var(--animate-ping); animation: var(--animate-ping);
@keyframes ping { @keyframes ping {
@@ -75,7 +75,7 @@
} }
} }
} }
.animate-pulse { .animate--pulse {
animation: var(--animate-pulse); animation: var(--animate-pulse);
@keyframes pulse { @keyframes pulse {
@@ -84,7 +84,7 @@
} }
} }
} }
.animate-bounce { .animate--bounce {
animation: var(--animate-bounce); /* bounce 1s infinite */ animation: var(--animate-bounce); /* bounce 1s infinite */
@keyframes bounce { @keyframes bounce {
@@ -99,7 +99,7 @@
} }
} }
} }
.animate-none { .animate--none {
animation: none; animation: none;
} }
} }
packages/css/src/utility-size-insensitive/background.css
+5
View File
@@ -0,0 +1,5 @@
@layer utility {
.bg--red {
background-color: red;
}
}
packages/css/src/utility/size-insensitive/box-decoration.css → packages/css/src/utility-size-insensitive/box-decoration.css
+2 -2
View File
@@ -1,9 +1,9 @@
@layer utility { @layer utility {
.box-decoration-clone { .box-decoration--clone {
box-decoration-break: clone; box-decoration-break: clone;
} }
.box-decoration-slice { .box-decoration--slice {
box-decoration-break: slice; box-decoration-break: slice;
} }
} }
packages/css/src/utility/size-insensitive/box-inside.css → packages/css/src/utility-size-insensitive/box-inside.css
+4 -4
View File
@@ -1,17 +1,17 @@
@layer utility { @layer utility {
.break-inside-auto { .break-inside--auto {
break-inside: auto; break-inside: auto;
} }
.break-inside-avoid { .break-inside--avoid {
break-inside: avoid; break-inside: avoid;
} }
.break-inside-avoid-page { .break-inside--avoid-page {
break-inside: avoid-page; break-inside: avoid-page;
} }
.break-inside-avoid-column { .break-inside--avoid-column {
break-inside: avoid-column; break-inside: avoid-column;
} }
} }
packages/css/src/utility/size-insensitive/box-sizing.css → packages/css/src/utility-size-insensitive/box-sizing.css
+2 -2
View File
@@ -1,9 +1,9 @@
@layer utility { @layer utility {
.box-sizing-border { .box-sizing--border {
box-sizing: border-box; box-sizing: border-box;
} }
.box-sizing-content { .box-sizing--content {
box-sizing: content-box; box-sizing: content-box;
} }
} }
packages/css/src/utility/size-insensitive/brand.css → packages/css/src/utility-size-insensitive/brand.css
+15 -11
View File
@@ -1,5 +1,5 @@
@layer utility { @layer utility {
.brand-info { .brand--info {
--brand-bg: var(--info-bg); --brand-bg: var(--info-bg);
--brand-bg-hover: var(--info-bg-hover); --brand-bg-hover: var(--info-bg-hover);
--brand-bg-active: var(--info-bg-active); --brand-bg-active: var(--info-bg-active);
@@ -7,7 +7,8 @@
--brand-bg-low-hover: var(--info-bg-low-hover); --brand-bg-low-hover: var(--info-bg-low-hover);
--brand-bg-low-active: var(--info-bg-low-active); --brand-bg-low-active: var(--info-bg-low-active);
} }
.brand-danger {
.brand--danger {
--brand-bg: var(--danger-bg); --brand-bg: var(--danger-bg);
--brand-bg-hover: var(--danger-bg-hover); --brand-bg-hover: var(--danger-bg-hover);
--brand-bg-active: var(--danger-bg-active); --brand-bg-active: var(--danger-bg-active);
@@ -15,7 +16,8 @@
--brand-bg-low-hover: var(--danger-bg-low-hover); --brand-bg-low-hover: var(--danger-bg-low-hover);
--brand-bg-low-active: var(--danger-bg-low-active); --brand-bg-low-active: var(--danger-bg-low-active);
} }
.brand-success {
.brand--success {
--brand-bg: var(--success-bg); --brand-bg: var(--success-bg);
--brand-bg-hover: var(--success-bg-hover); --brand-bg-hover: var(--success-bg-hover);
--brand-bg-active: var(--success-bg-active); --brand-bg-active: var(--success-bg-active);
@@ -23,7 +25,8 @@
--brand-bg-low-hover: var(--success-bg-low-hover); --brand-bg-low-hover: var(--success-bg-low-hover);
--brand-bg-low-active: var(--success-bg-low-active); --brand-bg-low-active: var(--success-bg-low-active);
} }
.brand-warning {
.brand--warning {
--brand-bg: var(--warning-bg); --brand-bg: var(--warning-bg);
--brand-bg-hover: var(--warning-bg-hover); --brand-bg-hover: var(--warning-bg-hover);
--brand-bg-active: var(--warning-bg-active); --brand-bg-active: var(--warning-bg-active);
@@ -31,12 +34,13 @@
--brand-bg-low-hover: var(--warning-bg-low-hover); --brand-bg-low-hover: var(--warning-bg-low-hover);
--brand-bg-low-active: var(--warning-bg-low-active); --brand-bg-low-active: var(--warning-bg-low-active);
} }
.brand-default {
--brand-bg: var(--default-bg); .brand--emphasize {
--brand-bg-hover: var(--default-bg-hover); --brand-bg: var(--emphasize-bg);
--brand-bg-active: var(--default-bg-active); --brand-bg-hover: var(--emphasize-bg-hover);
--brand-bg-low: var(--default-bg-low); --brand-bg-active: var(--emphasize-bg-active);
--brand-bg-low-hover: var(--default-bg-low-hover); --brand-bg-low: var(--emphasize-bg-low);
--brand-bg-low-active: var(--default-bg-low-active); --brand-bg-low-hover: var(--emphasize-bg-low-hover);
--brand-bg-low-active: var(--emphasize-bg-low-active);
} }
} }
packages/css/src/utility/size-insensitive/break-after.css → packages/css/src/utility-size-insensitive/break-after.css
+8 -8
View File
@@ -1,33 +1,33 @@
@layer utility { @layer utility {
.break-after-auto { .break-after--auto {
break-after: auto; break-after: auto;
} }
.break-after-avoid { .break-after--avoid {
break-after: avoid; break-after: avoid;
} }
.break-after-all { .break-after--all {
break-after: all; break-after: all;
} }
.break-after-avoid-page { .break-after--avoid-page {
break-after: avoid-page; break-after: avoid-page;
} }
.break-after-page { .break-after--page {
break-after: page; break-after: page;
} }
.break-after-left { .break-after--left {
break-after: left; break-after: left;
} }
.break-after-right { .break-after--right {
break-after: right; break-after: right;
} }
.break-after-column { .break-after--column {
break-after: column; break-after: column;
} }
} }
packages/css/src/utility/size-insensitive/break-before.css → packages/css/src/utility-size-insensitive/break-before.css
+8 -8
View File
@@ -1,33 +1,33 @@
@layer utility { @layer utility {
.break-before-auto { .break-before--auto {
break-before: auto; break-before: auto;
} }
.break-before-avoid { .break-before--avoid {
break-before: avoid; break-before: avoid;
} }
.break-before-all { .break-before--all {
break-before: all; break-before: all;
} }
.break-before-avoid-page { .break-before--avoid-page {
break-before: avoid-page; break-before: avoid-page;
} }
.break-before-page { .break-before--page {
break-before: page; break-before: page;
} }
.break-before-left { .break-before--left {
break-before: left; break-before: left;
} }
.break-before-right { .break-before--right {
break-before: right; break-before: right;
} }
.break-before-column { .break-before--column {
break-before: column; break-before: column;
} }
} }
packages/css/src/utility-size-insensitive/color.css
+5
View File
@@ -0,0 +1,5 @@
@layer utility {
.color--white {
color: white;
}
}
packages/css/src/utility/size-insensitive/cursor.css → packages/css/src/utility-size-insensitive/cursor.css
+33 -33
View File
@@ -1,111 +1,111 @@
@layer utility { @layer utility {
/* ===== 基础光标 ===== */ /* ===== 基础光标 ===== */
.cursor-auto { .cursor--auto {
cursor: auto; cursor: auto;
} }
.cursor-default { .cursor--default {
cursor: default; cursor: default;
} }
.cursor-pointer { .cursor--pointer {
cursor: pointer; cursor: pointer;
} }
.cursor-wait { .cursor--wait {
cursor: wait; cursor: wait;
} }
.cursor-text { .cursor--text {
cursor: text; cursor: text;
} }
.cursor-move { .cursor--move {
cursor: move; cursor: move;
} }
.cursor-help { .cursor--help {
cursor: help; cursor: help;
} }
.cursor-not-allowed { .cursor--not-allowed {
cursor: not-allowed; cursor: not-allowed;
} }
/* ===== 拖拽 / 抓取 ===== */ /* ===== 拖拽 / 抓取 ===== */
.cursor-grab { .cursor--grab {
cursor: grab; cursor: grab;
} }
.cursor-grabbing { .cursor--grabbing {
cursor: grabbing; cursor: grabbing;
} }
/* ===== 调整大小（通用 & 方向）===== */ /* ===== 调整大小（通用 & 方向）===== */
.cursor-resize { .cursor--resize {
cursor: resize; cursor: resize;
} }
.cursor-ew-resize { .cursor--ew-resize {
cursor: ew-resize; cursor: ew-resize;
} }
.cursor-ns-resize { .cursor--ns-resize {
cursor: ns-resize; cursor: ns-resize;
} }
.cursor-nesw-resize { .cursor--nesw-resize {
cursor: nesw-resize; cursor: nesw-resize;
} }
.cursor-nwse-resize { .cursor--nwse-resize {
cursor: nwse-resize; cursor: nwse-resize;
} }
.cursor-col-resize { .cursor--col-resize {
cursor: col-resize; cursor: col-resize;
} }
.cursor-row-resize { .cursor--row-resize {
cursor: row-resize; cursor: row-resize;
} }
.cursor-n-resize { .cursor--n-resize {
cursor: n-resize; cursor: n-resize;
} }
.cursor-e-resize { .cursor--e-resize {
cursor: e-resize; cursor: e-resize;
} }
.cursor-s-resize { .cursor--s-resize {
cursor: s-resize; cursor: s-resize;
} }
.cursor-w-resize { .cursor--w-resize {
cursor: w-resize; cursor: w-resize;
} }
.cursor-ne-resize { .cursor--ne-resize {
cursor: ne-resize; cursor: ne-resize;
} }
.cursor-nw-resize { .cursor--nw-resize {
cursor: nw-resize; cursor: nw-resize;
} }
.cursor-se-resize { .cursor--se-resize {
cursor: se-resize; cursor: se-resize;
} }
.cursor-sw-resize { .cursor--sw-resize {
cursor: sw-resize; cursor: sw-resize;
} }
/* ===== 视觉反馈 ===== */ /* ===== 视觉反馈 ===== */
.cursor-crosshair { .cursor--crosshair {
cursor: crosshair; cursor: crosshair;
} }
.cursor-progress { .cursor--progress {
cursor: progress; cursor: progress;
} }
.cursor-no-drop { .cursor--no-drop {
cursor: no-drop; cursor: no-drop;
} }
.cursor-vertical-text { .cursor--vertical-text {
cursor: vertical-text; cursor: vertical-text;
} }
/* ===== 现代 / 扩展光标 ===== */ /* ===== 现代 / 扩展光标 ===== */
.cursor-zoom-in { .cursor--zoom-in {
cursor: zoom-in; cursor: zoom-in;
} }
.cursor-zoom-out { .cursor--zoom-out {
cursor: zoom-out; cursor: zoom-out;
} }
.cursor-alias { .cursor--alias {
cursor: alias; cursor: alias;
} }
.cursor-copy { .cursor--copy {
cursor: copy; cursor: copy;
} }
} }
packages/css/src/utility/size-insensitive/display.css → packages/css/src/utility-size-insensitive/display.css
+21 -21
View File
@@ -1,90 +1,90 @@
@layer utility { @layer utility {
/* 基础 display */ /* 基础 display */
.display-inline { .display--inline {
display: inline; display: inline;
} }
.display-block { .display--block {
display: block; display: block;
} }
.display-inline-block { .display--inline-block {
display: inline-block; display: inline-block;
} }
.display-flow-root { .display--flow-root {
display: flow-root; display: flow-root;
} }
.display-contents { .display--contents {
display: contents; display: contents;
} }
.display-none { .display--none {
display: none; display: none;
} }
/* Flex */ /* Flex */
.display-flex { .display--flex {
display: flex; display: flex;
} }
.display-inline-flex { .display--inline-flex {
display: inline-flex; display: inline-flex;
} }
/* Grid */ /* Grid */
.display-grid { .display--grid {
display: grid; display: grid;
} }
.display-inline-grid { .display--inline-grid {
display: inline-grid; display: inline-grid;
} }
/* Table */ /* Table */
.display-table { .display--table {
display: table; display: table;
} }
.display-inline-table { .display--inline-table {
display: inline-table; display: inline-table;
} }
.display-table-caption { .display--table-caption {
display: table-caption; display: table-caption;
} }
.display-table-cell { .display--table-cell {
display: table-cell; display: table-cell;
} }
.display-table-column { .display--table-column {
display: table-column; display: table-column;
} }
.display-table-column-group { .display--table-column-group {
display: table-column-group; display: table-column-group;
} }
.display-table-footer-group { .display--table-footer-group {
display: table-footer-group; display: table-footer-group;
} }
.display-table-header-group { .display--table-header-group {
display: table-header-group; display: table-header-group;
} }
.display-table-row-group { .display--table-row-group {
display: table-row-group; display: table-row-group;
} }
.display-table-row { .display--table-row {
display: table-row; display: table-row;
} }
/* List */ /* List */
.display-list-item { .display--list-item {
display: list-item; display: list-item;
} }
} }
packages/css/src/utility-size-insensitive/drop-shadow.css
+5
View File
@@ -0,0 +1,5 @@
@layer utility {
.drop-shadow--md {
filter: var(--drop-shadow-md);
}
}
packages/css/src/utility/size-insensitive/flex-direction.css → packages/css/src/utility-size-insensitive/flex-direction.css
+4 -4
View File
@@ -1,14 +1,14 @@
@layer utility { @layer utility {
.flex-direction-row { .flex-direction--row {
flex-direction: row; flex-direction: row;
} }
.flex-direction-row-reverse { .flex-direction--row-reverse {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.flex-direction-col { .flex-direction--col {
flex-direction: column; flex-direction: column;
} }
.flex-direction-col-reverse { .flex-direction--col-reverse {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
} }
packages/css/src/utility/size-insensitive/flex-wrap.css → packages/css/src/utility-size-insensitive/flex-wrap.css
+3 -3
View File
@@ -1,13 +1,13 @@
@layer utility { @layer utility {
.flex-nowrap { .flex--nowrap {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.flex-wrap { .flex--wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-wrap-reverse { .flex--wrap-reverse {
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
} }
} }
packages/css/src/utility/size-insensitive/font-family.css → packages/css/src/utility-size-insensitive/font-family.css
+3 -3
View File
@@ -1,11 +1,11 @@
@layer utility { @layer utility {
.font-family-sans { .font-family--sans {
font-family: var(--font-sans); font-family: var(--font-sans);
} }
.font-family-serif { .font-family--serif {
font-family: var(--font-serif); font-family: var(--font-serif);
} }
.font-family-mono { .font-family--mono {
font-family: var(--font-mono); font-family: var(--font-mono);
} }
} }
packages/css/src/utility/size-insensitive/justify-content.css → packages/css/src/utility-size-insensitive/justify-content.css
+11 -11
View File
@@ -1,45 +1,45 @@
@layer utility { @layer utility {
.justify-start { .justify--start {
justify-content: flex-start; justify-content: flex-start;
} }
.justify-end { .justify--end {
justify-content: flex-end; justify-content: flex-end;
} }
.justify-end-safe { .justify--end-safe {
justify-content: safe flex-end; justify-content: safe flex-end;
} }
.justify-center { .justify--center {
justify-content: center; justify-content: center;
} }
.justify-center-safe { .justify--center-safe {
justify-content: safe center; justify-content: safe center;
} }
.justify-between { .justify--between {
justify-content: space-between; justify-content: space-between;
} }
.justify-around { .justify--around {
justify-content: space-around; justify-content: space-around;
} }
.justify-evenly { .justify--evenly {
justify-content: space-evenly; justify-content: space-evenly;
} }
.justify-stretch { .justify--stretch {
justify-content: stretch; justify-content: stretch;
} }
.justify-baseline { .justify--baseline {
justify-content: baseline; justify-content: baseline;
} }
.justify-normal { .justify--normal {
justify-content: normal; justify-content: normal;
} }
} }
packages/css/src/utility/size-insensitive/justify-items.css → packages/css/src/utility-size-insensitive/justify-items.css
+7 -7
View File
@@ -1,29 +1,29 @@
@layer utility { @layer utility {
.justify-items-start { .justify-items--start {
justify-items: start; justify-items: start;
} }
.justify-items-end { .justify-items--end {
justify-items: end; justify-items: end;
} }
.justify-items-end-safe { .justify-items--end-safe {
justify-items: safe end; justify-items: safe end;
} }
.justify-items-center { .justify-items--center {
justify-items: center; justify-items: center;
} }
.justify-items-center-safe { .justify-items--center-safe {
justify-items: safe center; justify-items: safe center;
} }
.justify-items-stretch { .justify-items--stretch {
justify-items: stretch; justify-items: stretch;
} }
.justify-items-normal { .justify-items--normal {
justify-items: normal; justify-items: normal;
} }
} }
packages/css/src/utility/size-insensitive/justify-self.css → packages/css/src/utility-size-insensitive/justify-self.css
+7 -7
View File
@@ -1,29 +1,29 @@
@layer utility { @layer utility {
.justify-self-auto { .justify-self--auto {
justify-self: auto; justify-self: auto;
} }
.justify-self-start { .justify-self--start {
justify-self: start; justify-self: start;
} }
.justify-self-center { .justify-self--center {
justify-self: center; justify-self: center;
} }
.justify-self-center-safe { .justify-self--center-safe {
justify-self: safe center; justify-self: safe center;
} }
.justify-self-end { .justify-self--end {
justify-self: end; justify-self: end;
} }
.justify-self-end-safe { .justify-self--end-safe {
justify-self: safe end; justify-self: safe end;
} }
.justify-self-stretch { .justify-self--stretch {
justify-self: stretch; justify-self: stretch;
} }
} }
packages/css/src/utility/size-insensitive/overflow.css → packages/css/src/utility-size-insensitive/overflow.css
+15 -15
View File
@@ -1,61 +1,61 @@
@layer utility { @layer utility {
.overflow-auto { .overflow--auto {
overflow: auto; overflow: auto;
} }
.overflow-hidden { .overflow--hidden {
overflow: hidden; overflow: hidden;
} }
.overflow-clip { .overflow--clip {
overflow: clip; overflow: clip;
} }
.overflow-visible { .overflow--visible {
overflow: visible; overflow: visible;
} }
.overflow-scroll { .overflow--scroll {
overflow: scroll; overflow: scroll;
} }
.overflow-x-auto { .overflow--x--auto {
overflow-x: auto; overflow-x: auto;
} }
.overflow-y-auto { .overflow--y--auto {
overflow-y: auto; overflow-y: auto;
} }
.overflow-x-hidden { .overflow--x--hidden {
overflow-x: hidden; overflow-x: hidden;
} }
.overflow-y-hidden { .overflow--y--hidden {
overflow-y: hidden; overflow-y: hidden;
} }
.overflow-x-clip { .overflow--x--clip {
overflow-x: clip; overflow-x: clip;
} }
.overflow-y-clip { .overflow--y--clip {
overflow-y: clip; overflow-y: clip;
} }
.overflow-x-visible { .overflow--x--visible {
overflow-x: visible; overflow-x: visible;
} }
.overflow-y-visible { .overflow--y--visible {
overflow-y: visible; overflow-y: visible;
} }
.overflow-x-scroll { .overflow--x--scroll {
overflow-x: scroll; overflow-x: scroll;
} }
.overflow-y-scroll { .overflow--y--scroll {
overflow-y: scroll; overflow-y: scroll;
} }
} }
packages/css/src/utility/size-insensitive/overscroll-behavior.css → packages/css/src/utility-size-insensitive/overscroll-behavior.css
+9 -9
View File
@@ -1,37 +1,37 @@
@layer utility { @layer utility {
.overscroll-auto { .overscroll--auto {
overscroll-behavior: auto; overscroll-behavior: auto;
} }
.overscroll-contain { .overscroll--contain {
overscroll-behavior: contain; overscroll-behavior: contain;
} }
.overscroll-none { .overscroll--none {
overscroll-behavior: none; overscroll-behavior: none;
} }
.overscroll-x-auto { .overscroll--x-auto {
overscroll-behavior-x: auto; overscroll-behavior-x: auto;
} }
.overscroll-x-contain { .overscroll--x-contain {
overscroll-behavior-x: contain; overscroll-behavior-x: contain;
} }
.overscroll-x-none { .overscroll--x-none {
overscroll-behavior-x: none; overscroll-behavior-x: none;
} }
.overscroll-y-auto { .overscroll--y-auto {
overscroll-behavior-y: auto; overscroll-behavior-y: auto;
} }
.overscroll-y-contain { .overscroll--y-contain {
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
} }
.overscroll-y-none { .overscroll--y-none {
overscroll-behavior-y: none; overscroll-behavior-y: none;
} }
} }
packages/css/src/utility-size-insensitive/position.css
+19
View File
@@ -0,0 +1,19 @@
.position--static {
position: static;
}
.position--fixed {
position: fixed;
}
.position--absolute {
position: absolute;
}
.position--relative {
position: relative;
}
.position--sticky {
position: sticky;
}
packages/css/src/utility/size-insensitive/screen-reader.css → packages/css/src/utility-size-insensitive/screen-reader.css
+1 -1
View File
@@ -10,7 +10,7 @@
white-space: nowrap; white-space: nowrap;
border-width: 0; border-width: 0;
} }
.sr-only-cancel { .sr-only--cancel {
position: static; position: static;
width: auto; width: auto;
height: auto; height: auto;
packages/css/src/utility/size-insensitive/theme.css → packages/css/src/utility-size-insensitive/theme.css
+2 -2
View File
@@ -1,10 +1,10 @@
@layer utility { @layer utility {
.theme-light { .theme--light {
--base-fg: var(--color-gray-950); --base-fg: var(--color-gray-950);
--base-bg: var(--color-white); --base-bg: var(--color-white);
} }
.theme-dark { .theme--dark {
--base-fg: var(--color-gray-50); --base-fg: var(--color-gray-50);
--base-bg: var(--color-black); --base-bg: var(--color-black);
} }
packages/css/src/utility/size-insensitive/user-select.css → packages/css/src/utility-size-insensitive/user-select.css
+4 -4
View File
@@ -1,14 +1,14 @@
@layer utility { @layer utility {
.select-none { .select--none {
user-select: none; user-select: none;
} }
.select-text { .select--text {
user-select: text; user-select: text;
} }
.select-all { .select--all {
user-select: all; user-select: all;
} }
.select-auto { .select--auto {
user-select: auto; user-select: auto;
} }
} }
packages/css/src/utility-size-insensitive/variant-can-hover.css
+51
View File
@@ -0,0 +1,51 @@
@layer utility {
.variant--outline-can-hover {
--outline-fg: var(--brand-bg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low);
--outline-bg-active: var(--brand-bg-low-hover);
--outline-border-color: var(--brand-bg);
color: var(--outline-fg);
background-color: var(--outline-bg);
border: solid 1px;
border-color: var(--outline-border-color);
&:hover {
background-color: var(--outline-bg-hover);
color: var(--outline-fg-hover);
}
}
.variant--outline-active {
&:active {
background-color: var(--outline-bg-active);
color: var(--outline-fg-active);
}
}
.variant--ghost-can-hover {
--ghost-fg: var(--brand-bg);
--ghost-fg-hover: var(--brand-bg);
--ghost-fg-active: var(--brand-bg);
--ghost-bg: var(--color-transparent);
--ghost-bg-hover: var(--brand-bg-low);
--ghost-bg-active: var(--brand-bg-low-hover);
--ghost-border-color: var(--color-transparent);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
&:hover {
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
}
.variant--ghost-active {
&:active {
background-color: var(--ghost-bg-active);
color: var(--ghost-fg-active);
}
}
}
packages/css/src/utility-size-insensitive/variant-disabled.css
+89
View File
@@ -0,0 +1,89 @@
@layer utility {
.variant--filled-disabled {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
&:hover {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:active {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:focus-visible {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
}
.variant--outline-disabled {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
&:hover {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:active {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
&:focus-visible {
color: var(--disabled-fg);
background-color: var(--disabled-bg);
border: solid 1px;
border-color: var(--disabled-border-color);
filter: grayscale(100%);
}
}
.variant--ghost-disabled {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
&:hover {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:active {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
&:focus-visible {
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
filter: grayscale(50%);
}
}
}
packages/css/src/utility-size-insensitive/variant-non-clickable.css
+55
View File
@@ -0,0 +1,55 @@
@layer utility {
.variant--filled-non-clickable {
--filled-fg: var(--color-white);
--filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-hover);
--filled-bg-active: var(--brand-bg-active);
--filled-border-color: var(--color-transparent);
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
}
.variant--outline-non-clickable {
--outline-fg: var(--brand-bg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low);
--outline-bg-active: var(--brand-bg-low-hover);
--outline-border-color: var(--brand-bg);
color: var(--outline-fg);
background-color: var(--outline-bg);
border: solid 1px;
border-color: var(--outline-border-color);
}
.variant--subtle-non-clickable {
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--brand-bg-low);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
}
.variant--ghost-non-clickable {
--ghost-fg: var(--brand-bg);
--ghost-fg-hover: var(--brand-bg);
--ghost-fg-active: var(--brand-bg);
--ghost-bg: var(--color-transparent);
--ghost-bg-hover: var(--brand-bg-low);
--ghost-bg-active: var(--brand-bg-low-hover);
--ghost-border-color: var(--color-transparent);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
}
}
packages/css/src/utility-size-insensitive/variant.css
+98
View File
@@ -0,0 +1,98 @@
@layer utility {
.variant--filled {
--filled-fg: var(--color-white);
--filled-fg-hover: var(--color-white);
--filled-fg-active: var(--color-white);
--filled-bg: var(--brand-bg);
--filled-bg-hover: var(--brand-bg-hover);
--filled-bg-active: var(--brand-bg-active);
--filled-border-color: var(--color-transparent);
color: var(--filled-fg);
background-color: var(--filled-bg);
border-color: var(--filled-border-color);
&:hover {
background-color: var(--filled-bg-hover);
color: var(--filled-fg-hover);
}
&:active {
background-color: var(--filled-bg-active);
color: var(--filled-fg-active);
}
}
.variant--outline {
--outline-fg: var(--brand-bg);
--outline-fg-hover: var(--brand-bg);
--outline-fg-active: var(--brand-bg);
--outline-bg: var(--color-transparent);
--outline-bg-hover: var(--brand-bg-low);
--outline-bg-active: var(--brand-bg-low-hover);
--outline-border-color: var(--brand-bg);
color: var(--outline-fg);
background-color: var(--outline-bg);
border: solid 1px;
border-color: var(--outline-border-color);
&:hover {
background-color: var(--outline-bg-hover);
color: var(--outline-fg-hover);
}
&:active {
background-color: var(--outline-bg-active);
color: var(--outline-fg-active);
}
}
.variant--subtle {
--subtle-fg: var(--brand-bg);
--subtle-fg-hover: var(--brand-bg);
--subtle-fg-active: var(--brand-bg);
--subtle-bg: var(--brand-bg-low);
--subtle-bg-hover: var(--brand-bg-low-hover);
--subtle-bg-active: var(--brand-bg-low-active);
--subtle-border-color: var(--color-transparent);
color: var(--subtle-fg);
background-color: var(--subtle-bg);
border-color: var(--subtle-border-color);
&:hover {
background-color: var(--subtle-bg-hover);
color: var(--subtle-fg-hover);
}
&:active {
background-color: var(--subtle-bg-active);
color: var(--subtle-fg-active);
}
}
.variant--ghost {
--ghost-fg: var(--brand-bg);
--ghost-fg-hover: var(--brand-bg);
--ghost-fg-active: var(--brand-bg);
--ghost-bg: var(--color-transparent);
--ghost-bg-hover: var(--brand-bg-low);
--ghost-bg-active: var(--brand-bg-low-hover);
--ghost-border-color: var(--color-transparent);
color: var(--ghost-fg);
background-color: var(--ghost-bg);
border-color: var(--ghost-border-color);
&:hover {
background-color: var(--ghost-bg-hover);
color: var(--ghost-fg-hover);
}
&:active {
background-color: var(--ghost-bg-active);
color: var(--ghost-fg-active);
}
}
}
packages/css/src/utility-size-insensitive/visibility.css
+11
View File
@@ -0,0 +1,11 @@
@layer utility {
.visible {
visibility: visible;
}
.visible--hidden {
visibility: hidden;
}
.visible--collapse {
visibility: collapse;
}
}
packages/css/src/utility/size-insensitive/z-index.css → packages/css/src/utility-size-insensitive/z-index.css
+22 -12
View File
@@ -1,43 +1,53 @@
@layer utility { @layer utility {
/* 自动 & 零 */ /* 自动 & 零 */
.z-auto { .z--auto {
z-index: auto; z-index: auto;
} }
.z-0 {
.z--0 {
z-index: 0; z-index: 0;
} }
/* 正值 */ /* 正值 */
.z-10 { .z--10 {
z-index: 10; z-index: 10;
} }
.z-20 {
.z--20 {
z-index: 20; z-index: 20;
} }
.z-30 {
.z--30 {
z-index: 30; z-index: 30;
} }
.z-40 {
.z--40 {
z-index: 40; z-index: 40;
} }
.z-50 {
.z--50 {
z-index: 50; z-index: 50;
} }
/* 负值（negative） */ /* 负值（negative） */
.z-n-10 { .z--n-10 {
z-index: -10; z-index: -10;
} }
.z-n-20 {
.z--n-20 {
z-index: -20; z-index: -20;
} }
.z-n-30 {
.z--n-30 {
z-index: -30; z-index: -30;
} }
.z-n-40 {
.z--n-40 {
z-index: -40; z-index: -40;
} }
.z-n-50 {
.z--n-50 {
z-index: -50; z-index: -50;
} }
} }
packages/css/src/utility/size-sensitive/border-radius.css → packages/css/src/utility-size-sensitive/border-radius.css
+11 -8
View File
@@ -1,26 +1,29 @@
@layer utility { @layer utility {
.rounded-full { .rounded--full {
border-radius: 9999px; border-radius: 9999px;
} }
.rounded-none { .rounded--none {
border-radius: 0; border-radius: 0;
} }
.rounded-xs { .rounded--xs {
border-radius: var(--radius-xs); border-radius: var(--radius-xs);
} }
.rounded-sm { .rounded--sm {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.rounded-md { .rounded--md {
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
.rounded-lg { .rounded--lg {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
.rounded-xl { .rounded--xl {
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
} }
.rounded-2xl { .rounded--2xl {
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
} }
.rounded--3xl {
border-radius: var(--radius-3xl);
}
} }
packages/css/src/utility-size-sensitive/font-size-addon.css
+22
View File
@@ -0,0 +1,22 @@
@layer utility {
.text--addon-xs {
font-size: 12px;
line-height: var(--line-height);
font-weight: 400;
}
.text--addon-sm {
font-size: 13px;
line-height: var(--line-height);
font-weight: 400;
}
.text--addon-md {
font-size: 14px;
line-height: var(--line-height);
font-weight: 500;
}
.text--addon-lg {
font-size: 16px;
line-height: var(--line-height);
font-weight: 500;
}
}
packages/css/src/utility-size-sensitive/font-size.css
+30
View File
@@ -0,0 +1,30 @@
@layer utility {
.text--xs {
font-size: var(--font-size-xs);
line-height: var(--line-height);
}
.text--sm {
font-size: var(--font-size-sm);
line-height: var(--line-height);
}
.text--md {
font-size: var(--font-size-md);
line-height: var(--line-height);
}
.text--lg {
font-size: var(--font-size-lg);
line-height: var(--line-height);
}
.text--xl {
font-size: var(--font-size-2xl);
line-height: var(--line-height);
}
.text--2xl {
font-size: var(--font-size-2xl);
line-height: var(--line-height);
}
.text--3xl {
font-size: var(--font-size-3xl);
line-height: var(--line-height);
}
}
packages/css/src/utility-size-sensitive/font-weight.css
+44
View File
@@ -0,0 +1,44 @@
@layer utility {
.font-weight--light {
font-weight: var(--font-weight-light);
}
.font-weight--normal {
font-weight: var(--font-weight-normal);
}
.font-weight--extranormal {
font-weight: var(--font-weight-extranormal);
}
.font-weight--semibold {
font-weight: var(--font-weight-semibold);
}
.font-weight--bold {
font-weight: var(--font-weight-bold);
}
.font-weight--extrabold {
font-weight: var(--font-weight-extrabold);
}
/* ================== */
.font-weight--xs {
font-weight: var(--font-weight-normal);
}
.font-weight--sm {
font-weight: var(--font-weight-normal);
}
.font-weight--md {
font-weight: var(--font-weight-extranormal);
}
.font-weight--lg {
font-weight: var(--font-weight-semibold);
}
.font-weight--xl {
font-weight: var(--font-weight-semibold);
}
.font-weight--2xl {
font-weight: var(--font-weight-semibold);
}
.font-weight--3xl {
font-weight: var(--font-weight-bold);
}
}
packages/css/src/utility-size-sensitive/gap.css
+23
View File
@@ -0,0 +1,23 @@
@layer utility {
.gap--xs {
gap: 2px;
}
.gap--sm {
gap: 4px;
}
.gap--md {
gap: 6px;
}
.gap--lg {
gap: 8px;
}
.gap--xl {
gap: 10px;
}
.gap--2xl {
gap: 12px;
}
.gap--3xl {
gap: 14px;
}
}
packages/css/src/utility-size-sensitive/height-addon.css
+14
View File
@@ -0,0 +1,14 @@
@layer utility {
.h--addon-xs {
height: var(--height-addon-xs);
}
.h--addon-sm {
height: var(--height-addon-sm);
}
.h--addon-md {
height: var(--height-addon-md);
}
.h--addon-lg {
height: var(--height-addon-lg);
}
}
packages/css/src/utility-size-sensitive/height-dot.css
+14
View File
@@ -0,0 +1,14 @@
@layer utility {
.h--dot-xs {
height: calc(var(--font-size-xs) / 2);
}
.h--dot-sm {
height: calc(var(--font-size-sm) / 2);
}
.h--dot-md {
height: calc(var(--font-size-md) / 2);
}
.h--dot-lg {
height: calc(var(--font-size-lg) / 2);
}
}
packages/css/src/utility-size-sensitive/height-inline.css
+25
View File
@@ -0,0 +1,25 @@
@layer utility {
.h--inline-xs {
height: calc(var(--font-size-xs) * var(--line-height));
}
.h--inline-sm {
height: calc(var(--font-size-sm) * var(--line-height));
}
.h--inline-md {
height: calc(var(--font-size-md) * var(--line-height));
}
.h--inline-lg {
height: calc(var(--font-size-lg) * var(--line-height));
}
.h--inline-xl {
height: calc(var(--font-size-xl) * var(--line-height));
}
.h--inline-2xl {
height: calc(var(--font-size-2xl) * var(--line-height));
}
}
packages/css/src/utility-size-sensitive/height-item.css
+23
View File
@@ -0,0 +1,23 @@
@layer utility {
.h--item-xs {
height: var(--height-item-xs);
}
.h--item-sm {
height: var(--height-item-sm);
}
.h--item-md {
height: var(--height-item-md);
}
.h--item-lg {
height: var(--height-item-lg);
}
.h--item-xl {
height: var(--height-item-xl);
}
.h--item-2xl {
height: var(--height-item-2xl);
}
.h--item-3xl {
height: var(--height-item-3xl);
}
}
packages/css/src/utility-size-sensitive/margin.css
+63
View File
@@ -0,0 +1,63 @@
@layer utility {
.my--none {
margin-block: 0;
}
.my--xs {
margin-block: var(--margin-xs);
}
.my--sm {
margin-block: var(--margin-sm);
}
.my--md {
margin-block: var(--margin-md);
}
.my--lg {
margin-block: var(--margin-lg);
}
.my--xl {
margin-block: var(--margin-xl);
}
.my--2xl {
margin-block: var(--margin-2xl);
}
.my--3xl {
margin-block: var(--margin-3xl);
}
/* ======================== */
.mx--none {
margin-inline: 0;
}
.mx--xs {
margin-inline: var(--margin-xs);
}
.mx--sm {
margin-inline: var(--margin-sm);
}
.mx--md {
margin-inline: var(--margin-md);
}
.mx--lg {
margin-inline: var(--margin-lg);
}
.mx--xl {
margin-inline: var(--margin-xl);
}
.mx--2xl {
margin-inline: var(--margin-2xl);
}
.mx--3xl {
margin-inline: var(--margin-3xl);
}
}
packages/css/src/utility-size-sensitive/min-width.css
+26
View File
@@ -0,0 +1,26 @@
@layer utility {
.min-w--addon-xs {
min-width: calc(
calc(var(--font-size-addon-xs) * var(--line-height)) -
calc(2 * var(--padding-addon-xs))
);
}
.min-w--addon-sm {
min-width: calc(
calc(var(--font-size-addon-sm) * var(--line-height)) -
calc(2 * var(--padding-addon-sm))
);
}
.min-w--addon-md {
min-width: calc(
calc(var(--font-size-addon-md) * var(--line-height)) -
calc(2 * var(--padding-addon-md))
);
}
.min-w--addon-lg {
min-width: calc(
calc(var(--font-size-addon-lg) * var(--line-height)) -
calc(2 * var(--padding-addon-lg))
);
}
}
packages/css/src/utility-size-sensitive/padding-addon.css
+14
View File
@@ -0,0 +1,14 @@
@layer utility {
.px--addon-xs {
padding-inline: var(--px-addon-xs);
}
.px--addon-sm {
padding-inline: var(--px-addon-sm);
}
.px--addon-md {
padding-inline: var(--px-addon-md);
}
.px--addon-lg {
padding-inline: var(--px-addon-lg);
}
}
packages/css/src/utility/size-sensitive/padding-long.css → packages/css/src/utility-size-sensitive/padding-long.css
+6 -10
View File
@@ -1,24 +1,20 @@
@layer utility { @layer utility {
.px-long-xs { .px--long-xs {
/* 6px */
padding-inline: var(--padding-long-xs); padding-inline: var(--padding-long-xs);
} }
.px-long-sm { .px--long-sm {
/* 8px */
padding-inline: var(--padding-long-sm); padding-inline: var(--padding-long-sm);
} }
.px-long-md { .px--long-md {
/* 10px */
padding-inline: var(--padding-long-md); padding-inline: var(--padding-long-md);
} }
.px-long-lg { .px--long-lg {
/* 16px */
padding-inline: var(--padding-long-lg); padding-inline: var(--padding-long-lg);
} }
.px-long-xl { .px--long-xl {
padding-inline: var(--padding-long-xl); padding-inline: var(--padding-long-xl);
} }
.px-long-2xl { .px--long-2xl {
padding-inline: var(--padding-long-2xl); padding-inline: var(--padding-long-2xl);
} }
} }
packages/css/src/utility/size-sensitive/padding-short.css → packages/css/src/utility-size-sensitive/padding.css
+22 -19
View File
@@ -1,49 +1,52 @@
@layer utility { @layer utility {
.px-none { .px--none {
padding-inline: 0px; padding-inline: 0px;
} }
.px-xs { .px--xs {
/* 4px, 24px - 16px = 8px */
padding-inline: var(--padding-xs); padding-inline: var(--padding-xs);
} }
.px-sm { .px--sm {
/* 4px, 28px - 20px = 8px */
padding-inline: var(--padding-sm); padding-inline: var(--padding-sm);
} }
.px-md { .px--md {
/* 10px */
padding-inline: var(--padding-md); padding-inline: var(--padding-md);
} }
.px-lg { .px--lg {
/* 16px */
padding-inline: var(--padding-lg); padding-inline: var(--padding-lg);
} }
.px-xl { .px--xl {
padding-inline: var(--padding-xl); padding-inline: var(--padding-xl);
} }
.px-2xl { .px--2xl {
padding-inline: var(--padding-2xl); padding-inline: var(--padding-2xl);
} }
/* ------------------------ */ .px--3xl {
.py-none { padding-inline: var(--padding-3xl);
}
/* =================================================== */
.py--none {
padding-block: 0px; padding-block: 0px;
} }
.py-xs { .py--xs {
padding-block: var(--padding-xs); padding-block: var(--padding-xs);
} }
.py-sm { .py--sm {
padding-block: var(--padding-sm); padding-block: var(--padding-sm);
} }
.py-md { .py--md {
padding-block: var(--padding-md); padding-block: var(--padding-md);
} }
.py-lg { .py--lg {
padding-block: var(--padding-lg); padding-block: var(--padding-lg);
} }
.py-xl { .py--xl {
padding-block: var(--padding-xl); padding-block: var(--padding-xl);
} }
.py-2xl { .py--2xl {
padding-block: var(--padding-2xl); padding-block: var(--padding-2xl);
} }
.py--3xl {
padding-block: var(--padding-3xl);
}
} }
packages/css/src/utility-size-sensitive/width-addon.css
+14
View File
@@ -0,0 +1,14 @@
@layer utility {
.w--addon-xs {
width: var(--height-addon-xs);
}
.w--addon-sm {
width: var(--height-addon-sm);
}
.w--addon-md {
width: var(--height-addon-md);
}
.w--addon-lg {
width: var(--height-addon-lg);
}
}
packages/css/src/utility-size-sensitive/width-dot.css
+14
View File
@@ -0,0 +1,14 @@
@layer utility {
.w--dot-xs {
width: calc(var(--font-size-xs) / 2);
}
.w--dot-sm {
width: calc(var(--font-size-sm) / 2);
}
.w--dot-md {
width: calc(var(--font-size-md) / 2);
}
.w--dot-lg {
width: calc(var(--font-size-lg) / 2);
}
}
packages/css/src/utility-size-sensitive/width-inline.css
+25
View File
@@ -0,0 +1,25 @@
@layer utility {
.w--inline-xs {
width: calc(var(--font-size-xs) * var(--line-height-xs));
}
.w--inline-sm {
width: calc(var(--font-size-sm) * var(--line-height-sm));
}
.w--inline-md {
width: calc(var(--font-size-md) * var(--line-height-md));
}
.w--inline-lg {
width: calc(var(--font-size-lg) * var(--line-height-lg));
}
.w--inline-xl {
width: calc(var(--font-size-xl) * var(--line-height-xl));
}
.w--inline-xl {
width: calc(var(--font-size-2xl) * var(--line-height-2xl));
}
}
packages/css/src/utility-size-sensitive/width-item.css
+31
View File
@@ -0,0 +1,31 @@
@layer utility {
.w--item-xs {
/* 24px minimum touch size for text line */
width: var(--height-item-xs);
}
.w--item-sm {
/* 30px save space for most used size */
width: var(--height-item-sm);
}
.w--item-md {
/* 34px most used size */
width: var(--height-item-md);
}
.w--item-lg {
/* 44px maximum touch size without waste */
width: var(--height-item-lg);
}
.w--item-xl {
/* 56px section-header bar */
width: var(--height-item-xl);
}
.w--item--2xl {
/* 64px navigation bar */
width: var(--height-item-2xl);
}
}
packages/css/src/utility/size-insensitive/drop-shadow.css
-5
View File
@@ -1,5 +0,0 @@
@layer utility {
.drop-shadow {
filter: var(--drop-shadow);
}
}
packages/css/src/utility/size-insensitive/position.css
-21
View File
@@ -1,21 +0,0 @@
@layer utility {
.position-static {
position: static;
}
.position-fixed {
position: fixed;
}
.position-absolute {
position: absolute;
}
.position-relative {
position: relative;
}
.position-sticky {
position: sticky;
}
}
packages/css/src/utility/size-sensitive/font-size.css
-38
View File
@@ -1,38 +0,0 @@
@layer utility {
.text-xs {
/* 12px 支持rem字体放大 */
font-size: var(--font-size-xs);
/* 不能超过 16px */
line-height: var(--line-height-xs);
}
.text-sm {
/* 14px 支持rem字体放大 */
font-size: var(--font-size-sm);
/* 不能超过 20px */
line-height: var(--line-height-sm);
}
.text-md {
/* 16px 支持rem字体放大 */
font-size: var(--font-size-md);
/* 不能超过 24px */
line-height: var(--line-height-md);
}
.text-lg {
/* 18px 支持rem字体放大 */
font-size: var(--font-size-lg);
/* 不能超过 28px */
line-height: var(--line-height-lg);
}
.text-xl {
/* 24px 支持rem字体放大 */
font-size: var(--font-size-2xl);
/* 不能超过 32px */
line-height: var(--line-height-2xl);
}
.text-2xl {
/* 30px 支持rem字体放大 */
font-size: var(--font-size-2xl);
/* 不能超过 36px */
line-height: var(--line-height-2xl);
}
}
packages/css/src/utility/size-sensitive/font-weight.css
-20
View File
@@ -1,20 +0,0 @@
@layer utility {
.font-weight-light {
font-weight: 300;
}
.font-weight-normal {
font-weight: 400;
}
.font-weight-extranormal {
font-weight: 500;
}
.font-weight-semibold {
font-weight: 600;
}
.font-weight-bold {
font-weight: 700;
}
.font-weight-extrabold {
font-weight: 700;
}
}
packages/css/src/utility/size-sensitive/gap.css
-23
View File
@@ -1,23 +0,0 @@
@layer utility {
.gap-xs {
/* 2px */
gap: calc(var(--spacing));
}
.gap-sm {
/* 4px */
gap: calc(var(--spacing) * 2);
}
.gap-md {
/* 6px */
gap: calc(var(--spacing) * 3);
}
.gap-lg {
gap: calc(var(--spacing) * 2);
}
.gap-xl {
gap: calc(var(--spacing) * 2.5);
}
.gap-2xl {
gap: calc(var(--spacing) * 2.5);
}
}
packages/css/src/utility/size-sensitive/height.css
-47
View File
@@ -1,47 +0,0 @@
@layer utility {
.h-item-xs {
/* 24px minimum touch size for text line */
height: var(--height-item-xs);
}
.h-item-sm {
/* 28px save space for most used size */
height: var(--height-item-sm);
}
.h-item-md {
/* 34px most used size */
height: var(--height-item-md);
}
.h-item-lg {
/* 44px maximum touch size without waste */
height: var(--height-item-lg);
}
.h-item-xl {
/* 56px section-header bar */
height: var(--height-item-xl);
}
.h-item-2xl {
/* 64px navigation bar */
height: var(--height-item-2xl);
}
/* -------------- */
.h-inline-xs {
/* 16px */
height: calc(var(--font-size-xs) * var(--line-height-xs));
}
.h-inline-sm {
/* 20px */
height: calc(var(--font-size-sm) * var(--line-height-sm));
}
.h-inline-md {
height: calc(var(--font-size-md) * var(--line-height-md));
}
.h-inline-lg {
height: calc(var(--font-size-lg) * var(--line-height-lg));
}
.h-inline-xl {
height: calc(var(--font-size-xl) * var(--line-height-xl));
}
.h-inline-2xl {
height: calc(var(--font-size-2xl) * var(--line-height-2xl));
}
}
packages/css/src/utility/size-sensitive/margin-block.css
-67
View File
@@ -1,67 +0,0 @@
@layer utility {
.my-e-none {
margin-block-end: 0;
}
.my-e-xs {
margin-block-end: var(--margin-xs);
}
.my-e-sm {
margin-block-end: var(--margin-sm);
}
.my-e-md {
margin-block-end: var(--margin-md);
}
.my-e-lg {
margin-block-end: var(--margin-lg);
}
.my-e-xl {
margin-block-end: var(--margin-xl);
}
.my-e-2xl {
margin-block-end: var(--margin-2xl);
}
/* ------------------ */
.my-s-none {
margin-block-start: 0;
}
.my-s-xs {
margin-block-start: var(--margin-xs);
}
.my-s-sm {
margin-block-start: var(--margin-sm);
}
.my-s-md {
margin-block-start: var(--margin-md);
}
.my-s-lg {
margin-block-start: var(--margin-lg);
}
.my-s-xl {
margin-block-start: var(--margin-xl);
}
.my-s-2xl {
margin-block-start: var(--margin-2xl);
}
/* --------------------- */
.my-none {
margin-block: 0;
}
.my-xs {
margin-block: var(--margin-xs);
}
.my-sm {
margin-block: var(--margin-sm);
}
.my-md {
margin-block: var(--margin-md);
}
.my-lg {
margin-block: var(--margin-lg);
}
.my-xl {
margin-block: var(--margin-xl);
}
.my-2xl {
margin-block: var(--margin-2xl);
}
}
packages/css/src/utility/size-sensitive/margin-inline.css
-67
View File
@@ -1,67 +0,0 @@
@layer utility {
.mx-e-none {
margin-inline-end: 0;
}
.mx-e-xs {
margin-inline-end: var(--margin-xs);
}
.mx-e-sm {
margin-inline-end: var(--margin-sm);
}
.mx-e-md {
margin-inline-end: var(--margin-md);
}
.mx-e-lg {
margin-inline-end: var(--margin-lg);
}
.mx-e-xl {
margin-inline-end: var(--margin-xl);
}
.mx-e-2xl {
margin-inline-end: var(--margin-2xl);
}
/* ------------------ */
.mx-s-none {
margin-inline-start: 0;
}
.mx-s-xs {
margin-inline-start: var(--margin-xs);
}
.mx-s-sm {
margin-inline-start: var(--margin-sm);
}
.mx-s-md {
margin-inline-start: var(--margin-md);
}
.mx-s-lg {
margin-inline-start: var(--margin-lg);
}
.mx-s-xl {
margin-inline-start: var(--margin-xl);
}
.mx-s-2xl {
margin-inline-start: var(--margin-2xl);
}
/* --------------------- */
.mx-none {
margin-inline: 0;
}
.mx-xs {
margin-inline: var(--margin-xs);
}
.mx-sm {
margin-inline: var(--margin-sm);
}
.mx-md {
margin-inline: var(--margin-md);
}
.mx-lg {
margin-inline: var(--margin-lg);
}
.mx-xl {
margin-inline: var(--margin-xl);
}
.mx-2xl {
margin-inline: var(--margin-2xl);
}
}
packages/css/src/utility/size-sensitive/width.css
-45
View File
@@ -1,45 +0,0 @@
@layer utility {
.w-item-xs {
/* 24px minimum touch size for text line */
width: var(--height-item-xs);
}
.w-item-sm {
/* 30px save space for most used size */
width: var(--height-item-sm);
}
.w-item-md {
/* 34px most used size */
width: var(--height-item-lg);
}
.w-item-lg {
/* 44px maximum touch size without waste */
width: var(--height-item-lg);
}
.w-item-xl {
/* 56px section-header bar */
width: var(--height-item-xl);
}
.w-item-2xl {
/* 64px navigation bar */
width: var(--height-item-xl);
}
/* ---------------------------------------------------- */
.w-inline-xs {
width: calc(var(--font-size-xs) * var(--line-height-xs));
}
.w-inline-sm {
width: calc(var(--font-size-sm) * var(--line-height-sm));
}
.w-inline-md {
width: calc(var(--font-size-md) * var(--line-height-md));
}
.w-inline-lg {
width: calc(var(--font-size-lg) * var(--line-height-lg));
}
.w-inline-xl {
width: calc(var(--font-size-xl) * var(--line-height-xl));
}
.w-inline-xl {
width: calc(var(--font-size-2xl) * var(--line-height-2xl));
}
}
packages/css/src/utils/cpm.ts
+19 -50
View File
@@ -1,61 +1,30 @@
import { defaultPrefixList } from "./prefix-list"; export function cpm(...classes: (string[] | string)[]) {
function matchLongestPrefix(cls: string, prefixList: string[]): string {
let bestPrefix: string | undefined;
for (const prefix of prefixList) {
const reg = new RegExp(`^${prefix}(?:-|$)`);
if (reg.test(cls) && (!bestPrefix || prefix.length > bestPrefix.length)) {
bestPrefix = prefix;
}
}
return bestPrefix ?? cls;
}
// 重载 1
export function cpm(...classes: Array<string | string[]>): string;
// 重载 2
export function cpm(
options: { extendedPrefixList?: string[] },
...classes: Array<string | string[]>
): string;
export function cpm(
arg1: { extendedPrefixList?: string[] } | string | string[],
...rest: Array<string | string[]>
): string {
const map = new Map<string, string>(); const map = new Map<string, string>();
let options: { extendedPrefixList?: string[] } = {}; function dealClass(cls: string) {
let classes: Array<string | string[]>; const clsArr = cls.trim().split(/\s+/);
// 提取前缀
clsArr.forEach((i) => {
const prifix = i.trim().split("--")[0];
if (typeof arg1 === "object" && !Array.isArray(arg1)) { // 使用set覆盖（自动新建），而不是push
options = arg1 as { extendedPrefixList?: string[] }; map.set(prifix, i);
classes = rest; });
} else {
classes = [arg1, ...rest];
} }
const mergedPrefixList: string[] = [
...new Set([...(options.extendedPrefixList ?? []), ...defaultPrefixList]),
];
classes.forEach((item) => { classes.forEach((item) => {
if (Array.isArray(item)) { // 如果是 string 直接处理
item.forEach((i) => {
const bestPrefix = matchLongestPrefix(i, mergedPrefixList);
map.set(bestPrefix, i);
});
return;
}
if (typeof item === "string") { if (typeof item === "string") {
const bestPrefix = matchLongestPrefix(item, mergedPrefixList); dealClass(item);
map.set(bestPrefix, item); } else {
// 否则肯定是 string[]
item.forEach((i) => {
dealClass(i);
});
} }
}); });
return Object.values(map).join(" "); const resultString = Array.from(map.values()).join(" ");
return resultString;
} }
packages/css/src/utils/cvr.ts
+2 -1
View File
@@ -1,6 +1,7 @@
// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
import { cpm } from "./cpm"; import { cpm } from "./cpm";
// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
// 但底层存储我们统一视为字符串处理 // 但底层存储我们统一视为字符串处理
type VariantValue = string | boolean; type VariantValue = string | boolean;
packages/css/src/utils/prefix-list.ts
-38
View File
@@ -1,38 +0,0 @@
export const defaultPrefixList = [
"align-content",
"items",
"align-self",
"animate",
"rounded",
"box-decoration",
"break-inside",
"box-sizing",
"brand",
"break-after",
"break-before",
"cursor",
"display",
"flex-direction",
"flex",
"font-family",
"font-weight",
"text",
"gap",
"h",
"justify",
"justify-items",
"justify-self",
"mx",
"my",
"px",
"py",
"overflow",
"overscroll",
"position",
"sr",
"theme",
"w",
"z",
"drop-shadow",
"select",
];
packages/css/tsconfig.build.json
+2 -2
View File
@@ -4,9 +4,9 @@
"noEmit": false, "noEmit": false,
"emitDeclarationOnly": true, "emitDeclarationOnly": true,
"declaration": true, "declaration": true,
"declarationDir": "./dist",
"rootDir": "./src", "rootDir": "./src",
"outDir": "./dist" "outDir": "./dist",
"declarationDir": "./dist"
}, },
"include": ["src"], "include": ["src"],
"exclude": [ "exclude": [
packages/css/tsconfig.json
+14 -10
View File
@@ -1,13 +1,19 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es2025", "target": "es2025",
"lib": ["ES2025", "DOM", "DOM.Iterable"], "lib": [
"ES2025",
"DOM",
"DOM.Iterable"
],
"module": "ESNext", "module": "ESNext",
"types": ["node", "vite/client"], "types": [
"node",
"vite/client"
],
"strict": true, "strict": true,
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
@@ -15,12 +21,10 @@
"moduleDetection": "force", "moduleDetection": "force",
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
/* Linting */
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true
}, },
"include": ["src", "scripts", "vite.config.ts"] "include": [
"src",
"scripts",
"vite.config.ts",
]
} }
packages/css/vite.config.ts
+15 -16
View File
@@ -1,29 +1,28 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path"; import path from "path";
import { defineConfig } from "vite";
export default defineConfig({ export default defineConfig({
// d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json plugins: [],
// 转换由 oxc 完成
// 打包由 rolldown 完成
plugins: [react()],
build: { build: {
cssMinify: false, cssMinify: false,
lib: { lib: {
entry: path.resolve(import.meta.dirname, "src/index.ts"), entry: path.resolve(import.meta.dirname, "src/index.ts"),
// 不写 vite 默认是 index.mjs 和 index.js，不方便识别
formats: ["es", "cjs"], formats: ["es", "cjs"],
// package.json 管别人怎么使用，
// build.lib 管怎么打包，生成什么
// 如果不一致，就会报错，指向文件不存在
fileName: (format) => `index.${format}.js`, fileName: (format) => `index.${format}.js`,
}, },
rolldownOptions: { rolldownOptions: {
// 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external
external: ["react", "react-dom", "react/jsx-runtime"], external: ["react", "react-dom", "react/jsx-runtime"],
// 专门给 UMD / IIFE​ 的映射表
output: { output: {
// 强制将生成的 CSS 命名为 index.css
assetFileNames: (assetInfo) => {
if (assetInfo.name && assetInfo.name.endsWith(".css")) {
return "index.css";
}
return "[name].[hash][extname]";
},
globals: { globals: {
react: "React", react: "React",
"react-dom": "ReactDOM", "react-dom": "ReactDOM",
@@ -31,9 +30,9 @@ export default defineConfig({
}, },
}, },
emptyOutDir: true, // 防止旧产物残留 emptyOutDir: true,
sourcemap: true, // 方便调试 sourcemap: true,
cssCodeSplit: false, // 合并成一个css文件 cssCodeSplit: false,
outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录 outDir: "dist",
}, },
}); });
packages/ui-web-headless/package.json → packages/ui-react/package.json
+8 -5
View File
@@ -1,5 +1,5 @@
{ {
"name": "@defgov/ui-web-headless", "name": "@dg/ui-react",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"type": "module", "type": "module",
@@ -24,18 +24,21 @@
"scripts": { "scripts": {
"gen-index": "ts-node scripts/gen-index.ts", "gen-index": "ts-node scripts/gen-index.ts",
"gen-dts": "tsc -p tsconfig.build.json", "gen-dts": "tsc -p tsconfig.build.json",
"dev": "pnpm gen-index && vite build --watch",
"build": "pnpm gen-index && vite build && pnpm gen-dts" "build": "pnpm gen-index && vite build && pnpm gen-dts"
}, },
"dependencies": {
"@dg/css": "workspace:*",
"@floating-ui/react": "^0.27.20"
},
"devDependencies": { "devDependencies": {
"@types/node": "^25.6.0", "@types/node": "^25.6.0",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1", "@vitejs/plugin-react": "^6.0.1",
"tinyglobby": "^0.2.16", "tinyglobby": "^0.2.16",
"ts-node": "^10.9.2", "ts-node": "^10.9.2",
"typescript": "^6.0.3", "typescript": "^6.0.3",
"vite": "^8.0.10", "vite": "^8.0.10"
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^19", "react": "^19",
packages/ui-react/scripts/gen-index.ts
+254
View File
@@ -0,0 +1,254 @@
import * as fs from "fs";
import * as path from "path";
/**
* 默认测试 / story / example / fixture / type 文件匹配规则
* 仅用于“识别”，不直接决定是否排除
*/
const DEFAULT_TEST_FILE_PATTERNS: RegExp[] = [
// =========================
// Test / Spec
// =========================
/\.(test|spec)\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\.(ts|tsx|js|jsx)\?.*$/, // query param safe
// =========================
// E2E / Playwright / Cypress
// =========================
/\.(cy|playwright|e2e)\.(ts|tsx|js|jsx)$/,
// =========================
// Storybook
// =========================
/\.(story|stories)\.(ts|tsx|js|jsx|mdx)$/,
// =========================
// Snapshot / Mock / Fixture
// =========================
/\.snap$/,
/\.mock\.(ts|tsx|js|jsx)$/,
/\.fixture\.(ts|tsx|js|jsx)$/,
// =========================
// Type declarations
// =========================
/\.d\.ts$/,
// =========================
// Examples / Demos / Docs
// =========================
/\.(example|demo|docs)\.(ts|tsx|js|jsx)$/,
];
/**
* 测试 / 辅助目录（目录级排除）
*/
const DEFAULT_TEST_DIR_PATTERNS: RegExp[] = [
/[/\\](__tests__|tests|test|spec|__mocks__|__fixtures__|__snapshots__)[\/\\]/,
/[/\\](cypress|playwright|e2e|__e2e__|__playwright__)[\/\\]/,
/[/\\](story|stories|\.storybook)[\/\\]/,
/[/\\](types|type|typings|interfaces)[\/\\]/,
/[/\\](examples|example|demo|demos|docs)[\/\\]/,
];
type Config = {
outputDir: string;
outputFile: string;
scanDirs: string[];
preamble?: string[];
importPrefix?: string;
entryFilePatterns?: RegExp[];
barrelFirstMode?: boolean;
includeFilePatterns?: RegExp[];
excludeFilePatterns?: RegExp[];
excludeDirPatterns?: RegExp[];
};
const tsConfig: Config = {
outputDir: "src",
outputFile: "index.ts",
scanDirs: ["src"],
importPrefix: "export * from",
barrelFirstMode: true,
preamble: ["import './index.css';"],
entryFilePatterns: [/^index\.(js|ts|jsx|tsx)$/],
includeFilePatterns: [/\.(js|ts|jsx|tsx)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
};
const cssConfig: Config = {
outputDir: "src",
outputFile: "index.css",
scanDirs: ["src"],
importPrefix: "@import",
barrelFirstMode: false,
entryFilePatterns: [/^index\.(css)$/],
includeFilePatterns: [/\.(css)$/],
excludeFilePatterns: DEFAULT_TEST_FILE_PATTERNS,
excludeDirPatterns: DEFAULT_TEST_DIR_PATTERNS,
};
function isEntryFile(fileName: string, config: Config): boolean {
const regExps = config.entryFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isIncludeFile(fileName: string, config: Config): boolean {
const regExps = config.includeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeFile(fileName: string, config: Config): boolean {
const regExps = config.excludeFilePatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(fileName));
}
function isExcludeDir(filePath: string, config: Config): boolean {
const regExps = config.excludeDirPatterns;
if (!regExps || regExps.length === 0) return false;
return regExps.some((regExp) => regExp.test(filePath));
}
function isValidDir(filePath: string, config: Config): boolean {
if (isExcludeDir(filePath, config)) {
return false;
}
return true;
}
function isValidFile(fileName: string, config: Config): boolean {
if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
return true;
}
return false;
}
const buildExportStatement = (filePath: string, config: Config) => {
// 文件夹（不是文件）与目标文件的相对路径
let exportFilePath = path.relative(config.outputDir, filePath);
// 去除扩展名，并且转化成正斜杠
const exportFilePathWithoutExt = path
.join(
path.dirname(exportFilePath),
path.basename(exportFilePath, path.extname(exportFilePath)),
)
.replace(/\\/g, "/");
// 加上 ./ 前缀
return `${config.importPrefix} './${exportFilePathWithoutExt}';`;
};
function isOutputEntry(filePath: string, config: Config) {
const outputFilePath = path.resolve(config.outputDir, config.outputFile);
const targetFilePath = path.resolve(filePath);
return outputFilePath === targetFilePath;
}
function generateExports(dirPath: string, config: Config): string[] {
const fileNames = fs.readdirSync(dirPath);
const exports: string[] = [];
// =========================
// 逻辑分支：Barrel First Mode
// =========================
if (config.barrelFirstMode) {
// 查找当前目录有没有 index.ts
const entryFileName = fileNames.find((fileName) => {
const filePath = path.join(dirPath, fileName);
return fs.statSync(filePath).isFile() && isEntryFile(fileName, config);
});
// 如果有
if (entryFileName) {
const entryFilePath = path.join(dirPath, entryFileName);
// 如果是 outputFile 自身，则跳过
if (isOutputEntry(entryFilePath, config)) {
console.log(`⏭️ 跳过自身入口文件: ${entryFilePath}`);
} else {
exports.push(buildExportStatement(entryFilePath, config));
}
}
}
// =========================
// 逻辑分支：index.ts 不存在，则继续正常遍历与递归
// =========================
fileNames.forEach((fileName) => {
const filePath = path.join(dirPath, fileName);
const stat = fs.statSync(filePath);
// 情况1：是文件，且通过了校验
if (
stat.isFile() &&
isValidFile(fileName, config) &&
!isEntryFile(fileName, config)
) {
exports.push(buildExportStatement(filePath, config));
}
// 情况2：是文件夹，且通过了校验，递归扫描子文件夹
else if (stat.isDirectory() && isValidDir(filePath, config)) {
const subExports = generateExports(filePath, config);
exports.push(...subExports);
}
});
return exports;
}
async function genIndexFile(config: Config) {
const allExports: string[] = [];
// 遍历所有需要扫描的根目录
config.scanDirs.forEach((scanDir) => {
// 只有当目录真实存在时才进行扫描
if (fs.existsSync(scanDir)) {
const exports = generateExports(scanDir, config);
allExports.push(...exports);
} else {
console.warn(`⚠️ 警告：扫描目录不存在，已跳过 -> ${scanDir}`);
}
});
// 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
const fileContent = [
...(config.preamble ?? []),
...Array.from(new Set(allExports)),
].join("\n");
// 写入之前，确保输出目录存在，如果不存在就递归创建
if (!fs.existsSync(config.outputDir)) {
fs.mkdirSync(config.outputDir, { recursive: true });
}
// 将内容写入到最终的 index.ts 文件中
const outputFilePath = path.join(config.outputDir, config.outputFile);
fs.writeFileSync(outputFilePath, fileContent, "utf-8");
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
}
// ================= 脚本执行入口 =================
try {
console.log("🚀 开始扫描并生成入口文件...");
await genIndexFile(cssConfig);
await genIndexFile(tsConfig);
console.log("✅ 脚本执行完毕！");
} catch (error) {
console.error("❌ 脚本执行失败:", error);
process.exit(1); // 如果报错，让进程以非 0 状态码退出
}
packages/ui-react/src/assets/svg/BoldSvg.tsx
+12
View File
@@ -0,0 +1,12 @@
export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
/>
</svg>
);
packages/ui-react/src/assets/svg/CheckIndicatorSvg.tsx
+8
View File
@@ -0,0 +1,8 @@
export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path
fill="currentColor"
d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
/>
</svg>
);

Some files were not shown because too many files have changed in this diff Show More