Compare commits
10 Commits
92e4fd11f1
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 folinhilo
|
e618f6e04d | ||
|
folinhilo
|
2a0326683d | ||
|
folinhilo
|
b9d65d1cc8 | ||
|
folinhilo
|
b4f5d5d7c0 | ||
|
folinhilo
|
5094d341fa | ||
|
folinhilo
|
542615a941 | ||
|
folinhilo
|
f2d8ad0de2 | ||
|
folinhilo
|
8351498071 | ||
|
folinhilo
|
3bee6aaf18 | ||
|
folinhilo
|
0f23a8f7a0 |
Vendored
+4
-1
@@ -1,6 +1,9 @@
|
||||
{
|
||||
"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": {
|
||||
"strings": "on"
|
||||
|
||||
@@ -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
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
@@ -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>,
|
||||
)
|
||||
Vendored
-4
@@ -1,4 +0,0 @@
|
||||
declare module '*.css' {
|
||||
const content: { [className: string]: string };
|
||||
export default content;
|
||||
}
|
||||
Vendored
-51
@@ -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;
|
||||
}
|
||||
@@ -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: { },
|
||||
},
|
||||
});
|
||||
+3
-3
@@ -3,8 +3,8 @@
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "turbo run build",
|
||||
"dev": "turbo run dev"
|
||||
"dev": "turbo run dev",
|
||||
"build": "turbo run build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"turbo": "^2.8.0"
|
||||
@@ -12,5 +12,5 @@
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38"
|
||||
"packageManager": "pnpm@11.13.1+sha512.b2fc7683b8a6525414e7d13e1ba28caaddde96bf66ec540bfaeb7e702b81f3e0be4d1f295edf7f9fe0396740a8dce4509c582ddf79891f4543fea32d37645f25"
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
@@ -1,5 +0,0 @@
|
||||
import browser from "webextension-polyfill";
|
||||
|
||||
export type Account = { id: string; email: string; password: string };
|
||||
|
||||
export type BookmarkTreeNode = browser.Bookmarks.BookmarkTreeNode;
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@defgov/css",
|
||||
"name": "@dg/css",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
@@ -24,21 +24,14 @@
|
||||
"scripts": {
|
||||
"gen-index": "ts-node scripts/gen-index.ts",
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"dev": "pnpm gen-index && vite build --watch",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@types/node": "^25.6.0",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"tinyglobby": "^0.2.16",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^6.0.3",
|
||||
"vite": "^8.0.10",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19",
|
||||
"react-dom": "^19"
|
||||
"vite": "^8.0.10"
|
||||
}
|
||||
}
|
||||
|
||||
+223
-116
@@ -1,147 +1,254 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
// 1. 引入 tinyglobby
|
||||
import { globSync } from "tinyglobby";
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
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;
|
||||
outputFilenameWithExt: string;
|
||||
outputFile: string;
|
||||
scanDirs: string[];
|
||||
importPrefix: string;
|
||||
predefineStatements: string[];
|
||||
includeExtensions: string[];
|
||||
excludeDirs: string[];
|
||||
excludeFileExtensions: string[];
|
||||
excludePatterns: 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)\./],
|
||||
preamble?: string[];
|
||||
importPrefix?: string;
|
||||
entryFilePatterns?: RegExp[];
|
||||
barrelFirstMode?: boolean;
|
||||
includeFilePatterns?: RegExp[];
|
||||
excludeFilePatterns?: RegExp[];
|
||||
excludeDirPatterns?: RegExp[];
|
||||
};
|
||||
|
||||
const tsConfig: Config = {
|
||||
outputDir: "src",
|
||||
outputFilenameWithExt: "index.ts",
|
||||
outputFile: "index.ts",
|
||||
scanDirs: ["src"],
|
||||
importPrefix: "export * from",
|
||||
predefineStatements: ["import './index.css'"],
|
||||
includeExtensions: [".ts", "tsx", "js", "jsx"],
|
||||
excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
|
||||
excludeFileExtensions: [".d.ts"],
|
||||
excludePatterns: [
|
||||
/^index\.(ts|tsx|js|jsx)$/,
|
||||
/\.(test|spec)\./,
|
||||
/\.(story|stories)\./,
|
||||
],
|
||||
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 normalizePath = (p: string) => p.replace(/\\/g, "/");
|
||||
|
||||
const isExcludeDir = (filePath: string, excludeDirs: string[]) => {
|
||||
const normalized = normalizePath(filePath);
|
||||
return excludeDirs.some((dir) => normalized.includes(`/${dir}/`));
|
||||
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,
|
||||
};
|
||||
|
||||
const isExcludeFileExtensions = (
|
||||
filePath: string,
|
||||
excludeFileExtensions: string[],
|
||||
) => excludeFileExtensions.some((ext) => filePath.endsWith(ext));
|
||||
function isEntryFile(fileName: string, config: Config): boolean {
|
||||
const regExps = config.entryFilePatterns;
|
||||
|
||||
const isExcludePattern = (fileName: string, excludePatterns: RegExp[]) =>
|
||||
excludePatterns.some((pattern) => pattern.test(fileName));
|
||||
if (!regExps || regExps.length === 0) return false;
|
||||
|
||||
// ----------------------------------------
|
||||
function isValidFile(filePath: string, config: Config): boolean {
|
||||
const fileName = filePath.split(/[\\/]/).pop()!;
|
||||
return regExps.some((regExp) => regExp.test(fileName));
|
||||
}
|
||||
|
||||
if (isExcludeDir(filePath, config.excludeDirs)) return false;
|
||||
if (isExcludeFileExtensions(filePath, config.excludeFileExtensions))
|
||||
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;
|
||||
if (isExcludePattern(fileName, config.excludePatterns)) return false;
|
||||
|
||||
const ext = path.extname(filePath);
|
||||
return config.includeExtensions.includes(ext);
|
||||
}
|
||||
// -----------------------------------------
|
||||
function generateIndexFile(config: Config) {
|
||||
const currentPath = process.cwd();
|
||||
const outputPath = path.resolve(currentPath, config.outputDir);
|
||||
let exportStatements: string[] = [];
|
||||
return true;
|
||||
}
|
||||
|
||||
// ------ scanDirs forEach start ------------------------
|
||||
config.scanDirs.forEach((dir) => {
|
||||
// 2. 路径模式保持不变，tinyglobby 能够正确处理
|
||||
const scanPattern = path.resolve(currentPath, dir, "**", "*.*");
|
||||
function isValidFile(fileName: string, config: Config): boolean {
|
||||
if (isIncludeFile(fileName, config) && !isExcludeFile(fileName, config)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const allFilePath = globSync(scanPattern, {
|
||||
absolute: true,
|
||||
// 3. 移除了 windowsPathsNoEscape，tinyglobby 默认处理路径更智能
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
const validFiles = allFilePath.filter((filePath) => {
|
||||
return isValidFile(filePath, config);
|
||||
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}`);
|
||||
}
|
||||
});
|
||||
|
||||
if (validFiles.length === 0) {
|
||||
console.log(
|
||||
`⚠️ 未找到符合条件的文件，跳过生成 ${config.outputFilenameWithExt}`,
|
||||
);
|
||||
return;
|
||||
// 拼接最终的文件内容：前言 + 导出语句（使用 Set 自动去重）
|
||||
const fileContent = [
|
||||
...(config.preamble ?? []),
|
||||
...Array.from(new Set(allExports)),
|
||||
].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) => {
|
||||
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;
|
||||
}
|
||||
console.log(`✨ 成功生成入口文件: ${outputFilePath}`);
|
||||
}
|
||||
|
||||
fs.writeFileSync(indexFilePath, indexFileContent, "utf8");
|
||||
console.log(`✅ 成功生成 ${config.outputFilenameWithExt}: ${indexFilePath}`);
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
|
||||
// ================= 脚本执行入口 =================
|
||||
try {
|
||||
console.log(`🚀 [gen-index] 开始扫描`);
|
||||
generateIndexFile(cssConfig);
|
||||
generateIndexFile(tsConfig);
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
console.error(`❌ [gen-index] 执行失败: ${msg}`);
|
||||
process.exit(1);
|
||||
console.log("🚀 开始扫描并生成入口文件...");
|
||||
await genIndexFile(cssConfig);
|
||||
await genIndexFile(tsConfig);
|
||||
console.log("✅ 脚本执行完毕！");
|
||||
} catch (error) {
|
||||
console.error("❌ 脚本执行失败:", error);
|
||||
process.exit(1); // 如果报错，让进程以非 0 状态码退出
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@layer utility;
|
||||
|
||||
:root {
|
||||
--color-red-50: oklch(97.1% 0.013 17.38);
|
||||
--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-active: var(--color-yellow-300);
|
||||
|
||||
--default-bg: var(--color-neutral-600);
|
||||
--default-bg-hover: var(--color-neutral-500);
|
||||
--default-bg-active: var(--color-neutral-400);
|
||||
--default-bg-low: var(--color-neutral-100);
|
||||
--default-bg-low-hover: var(--color-neutral-200);
|
||||
--default-bg-low-active: var(--color-neutral-300);
|
||||
--emphasize-bg: var(--color-neutral-600);
|
||||
--emphasize-bg-hover: var(--color-neutral-500);
|
||||
--emphasize-bg-active: var(--color-neutral-400);
|
||||
--emphasize-bg-low: var(--color-neutral-100);
|
||||
--emphasize-bg-low-hover: var(--color-neutral-200);
|
||||
--emphasize-bg-low-active: var(--color-neutral-300);
|
||||
|
||||
--disabled-fg: var(--color-gray-400);
|
||||
--disabled-bg: var(--color-gray-100);
|
||||
--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;
|
||||
--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: 1.4;
|
||||
|
||||
--line-height-xs: 1.33;
|
||||
--line-height-sm: 1.42;
|
||||
--line-height-md: 1.5;
|
||||
--line-height-lg: 1.55;
|
||||
--line-height-xl: 1.33;
|
||||
--line-height-2xl: 1.2;
|
||||
/* x button in tag */
|
||||
--height-item-xs: 20px;
|
||||
/* text line */
|
||||
--height-item-sm: 24px;
|
||||
/* normal desktop button */
|
||||
--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;
|
||||
--height-item-sm: 1.75rem;
|
||||
--height-item-md: 2.125rem;
|
||||
--height-item-lg: 2.75rem;
|
||||
--height-item-xl: 4rem;
|
||||
--height-item-2xl: 4rem;
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--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-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-out-up: fade-out-up 0.5s ease-in both;
|
||||
|
||||
--radius-xs: 0.125rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--radius-2xl: 1rem;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-extranormal: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
|
||||
--font-sans:
|
||||
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",
|
||||
"Courier New", monospace;
|
||||
|
||||
--margin-xs: calc(var(--spacing) * 2);
|
||||
--margin-sm: calc(var(--spacing) * 4);
|
||||
--margin-xs: 4px;
|
||||
--margin-sm: 8px;
|
||||
--margin-md: calc(var(--spacing) * 2);
|
||||
--margin-lg: calc(var(--spacing) * 2);
|
||||
--margin-xl: 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-sm: calc(var(--spacing) * 4);
|
||||
--padding-long-md: calc(var(--spacing) * 5);
|
||||
--padding-long-lg: calc(var(--spacing) * 8);
|
||||
--padding-long-xl: calc(var(--spacing) * 2);
|
||||
--padding-long-2xl: calc(var(--spacing) * 2);
|
||||
--padding-long-xs: 12px;
|
||||
--padding-long-sm: 14px;
|
||||
--padding-long-md: 18px;
|
||||
--padding-long-lg: 26px;
|
||||
--padding-long-xl: 2px;
|
||||
--padding-long-2xl: 2px;
|
||||
--padding-long-3xl: 2px;
|
||||
|
||||
--padding-xs: calc(var(--spacing) * 2);
|
||||
--padding-sm: calc(var(--spacing) * 4);
|
||||
--padding-md: calc(var(--spacing) * 2);
|
||||
--padding-lg: calc(var(--spacing) * 2);
|
||||
--padding-xl: calc(var(--spacing) * 2);
|
||||
--padding-2xl: calc(var(--spacing) * 2);
|
||||
--height-addon-xs: 16px;
|
||||
--height-addon-sm: 17px;
|
||||
--height-addon-md: 18px;
|
||||
--height-addon-lg: 20px;
|
||||
|
||||
--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));
|
||||
}
|
||||
|
||||
@@ -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';
|
||||
@@ -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';
|
||||
@@ -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",
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -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" },
|
||||
],
|
||||
});
|
||||
@@ -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",
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1,14 @@
|
||||
import { cvr } from "../utils/cvr";
|
||||
|
||||
export const tabVariantRecipe = cvr({
|
||||
variants: {
|
||||
variant: {
|
||||
outline: "",
|
||||
ghost: "",
|
||||
},
|
||||
isAcitve: {
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
+9
-9
@@ -1,37 +1,37 @@
|
||||
@layer utility {
|
||||
.align-content-normal {
|
||||
.align-content--normal {
|
||||
align-content: normal;
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
.align-content--center {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.align-content-start {
|
||||
.align-content--start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-content-end {
|
||||
.align-content--end {
|
||||
align-content: flex-end;
|
||||
}
|
||||
|
||||
.align-content-between {
|
||||
.align-content--between {
|
||||
align-content: space-between;
|
||||
}
|
||||
|
||||
.align-content-around {
|
||||
.align-content--around {
|
||||
align-content: space-around;
|
||||
}
|
||||
|
||||
.align-content-evenly {
|
||||
.align-content--evenly {
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
||||
.align-content-baseline {
|
||||
.align-content--baseline {
|
||||
align-content: baseline;
|
||||
}
|
||||
|
||||
.align-content-stretch {
|
||||
.align-content--stretch {
|
||||
align-content: stretch;
|
||||
}
|
||||
}
|
||||
+8
-8
@@ -1,33 +1,33 @@
|
||||
@layer utility {
|
||||
.items-start {
|
||||
.items--start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
.items--end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.items-end-safe {
|
||||
.items-end--safe {
|
||||
align-items: safe flex-end;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
.items--center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.items-center-safe {
|
||||
.items--center-safe {
|
||||
align-items: safe center;
|
||||
}
|
||||
|
||||
.items-baseline {
|
||||
.items--baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.items-baseline-last {
|
||||
.items--baseline-last {
|
||||
align-items: last baseline;
|
||||
}
|
||||
|
||||
.items-stretch {
|
||||
.items--stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
+9
-9
@@ -1,37 +1,37 @@
|
||||
@layer utility {
|
||||
.align-self-auto {
|
||||
.align-self--auto {
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
.align-self--start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
.align-self--end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.align-self-end-safe {
|
||||
.align-self--end-safe {
|
||||
align-self: safe flex-end;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
.align-self--center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.align-self-center-safe {
|
||||
.align-self--center-safe {
|
||||
align-self: safe center;
|
||||
}
|
||||
|
||||
.align-self-stretch {
|
||||
.align-self--stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.align-self-baseline {
|
||||
.align-self--baseline {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.align-self-baseline-last {
|
||||
.align-self--baseline-last {
|
||||
align-self: last baseline;
|
||||
}
|
||||
}
|
||||
+9
-9
@@ -1,5 +1,5 @@
|
||||
@layer utility {
|
||||
.animate-fade-in-down {
|
||||
.animate--fade-in-down {
|
||||
animation: var(--animate-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);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
.animate-fade-in-up {
|
||||
.animate--fade-in-up {
|
||||
animation: var(--animate-fade-in-up);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.animate-fade-out-up {
|
||||
.animate--fade-out-up {
|
||||
animation: var(--animate-fade-out-up);
|
||||
}
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
.animate-spin {
|
||||
.animate--spin {
|
||||
animation: var(--animate-spin);
|
||||
|
||||
@keyframes spin {
|
||||
@@ -64,7 +64,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-ping {
|
||||
.animate--ping {
|
||||
animation: var(--animate-ping);
|
||||
|
||||
@keyframes ping {
|
||||
@@ -75,7 +75,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-pulse {
|
||||
.animate--pulse {
|
||||
animation: var(--animate-pulse);
|
||||
|
||||
@keyframes pulse {
|
||||
@@ -84,7 +84,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-bounce {
|
||||
.animate--bounce {
|
||||
animation: var(--animate-bounce); /* bounce 1s infinite */
|
||||
|
||||
@keyframes bounce {
|
||||
@@ -99,7 +99,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.animate-none {
|
||||
.animate--none {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@layer utility {
|
||||
.bg--red {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,9 +1,9 @@
|
||||
@layer utility {
|
||||
.box-decoration-clone {
|
||||
.box-decoration--clone {
|
||||
box-decoration-break: clone;
|
||||
}
|
||||
|
||||
.box-decoration-slice {
|
||||
.box-decoration--slice {
|
||||
box-decoration-break: slice;
|
||||
}
|
||||
}
|
||||
+4
-4
@@ -1,17 +1,17 @@
|
||||
@layer utility {
|
||||
.break-inside-auto {
|
||||
.break-inside--auto {
|
||||
break-inside: auto;
|
||||
}
|
||||
|
||||
.break-inside-avoid {
|
||||
.break-inside--avoid {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.break-inside-avoid-page {
|
||||
.break-inside--avoid-page {
|
||||
break-inside: avoid-page;
|
||||
}
|
||||
|
||||
.break-inside-avoid-column {
|
||||
.break-inside--avoid-column {
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,9 +1,9 @@
|
||||
@layer utility {
|
||||
.box-sizing-border {
|
||||
.box-sizing--border {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.box-sizing-content {
|
||||
.box-sizing--content {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
+15
-11
@@ -1,5 +1,5 @@
|
||||
@layer utility {
|
||||
.brand-info {
|
||||
.brand--info {
|
||||
--brand-bg: var(--info-bg);
|
||||
--brand-bg-hover: var(--info-bg-hover);
|
||||
--brand-bg-active: var(--info-bg-active);
|
||||
@@ -7,7 +7,8 @@
|
||||
--brand-bg-low-hover: var(--info-bg-low-hover);
|
||||
--brand-bg-low-active: var(--info-bg-low-active);
|
||||
}
|
||||
.brand-danger {
|
||||
|
||||
.brand--danger {
|
||||
--brand-bg: var(--danger-bg);
|
||||
--brand-bg-hover: var(--danger-bg-hover);
|
||||
--brand-bg-active: var(--danger-bg-active);
|
||||
@@ -15,7 +16,8 @@
|
||||
--brand-bg-low-hover: var(--danger-bg-low-hover);
|
||||
--brand-bg-low-active: var(--danger-bg-low-active);
|
||||
}
|
||||
.brand-success {
|
||||
|
||||
.brand--success {
|
||||
--brand-bg: var(--success-bg);
|
||||
--brand-bg-hover: var(--success-bg-hover);
|
||||
--brand-bg-active: var(--success-bg-active);
|
||||
@@ -23,7 +25,8 @@
|
||||
--brand-bg-low-hover: var(--success-bg-low-hover);
|
||||
--brand-bg-low-active: var(--success-bg-low-active);
|
||||
}
|
||||
.brand-warning {
|
||||
|
||||
.brand--warning {
|
||||
--brand-bg: var(--warning-bg);
|
||||
--brand-bg-hover: var(--warning-bg-hover);
|
||||
--brand-bg-active: var(--warning-bg-active);
|
||||
@@ -31,12 +34,13 @@
|
||||
--brand-bg-low-hover: var(--warning-bg-low-hover);
|
||||
--brand-bg-low-active: var(--warning-bg-low-active);
|
||||
}
|
||||
.brand-default {
|
||||
--brand-bg: var(--default-bg);
|
||||
--brand-bg-hover: var(--default-bg-hover);
|
||||
--brand-bg-active: var(--default-bg-active);
|
||||
--brand-bg-low: var(--default-bg-low);
|
||||
--brand-bg-low-hover: var(--default-bg-low-hover);
|
||||
--brand-bg-low-active: var(--default-bg-low-active);
|
||||
|
||||
.brand--emphasize {
|
||||
--brand-bg: var(--emphasize-bg);
|
||||
--brand-bg-hover: var(--emphasize-bg-hover);
|
||||
--brand-bg-active: var(--emphasize-bg-active);
|
||||
--brand-bg-low: var(--emphasize-bg-low);
|
||||
--brand-bg-low-hover: var(--emphasize-bg-low-hover);
|
||||
--brand-bg-low-active: var(--emphasize-bg-low-active);
|
||||
}
|
||||
}
|
||||
+8
-8
@@ -1,33 +1,33 @@
|
||||
@layer utility {
|
||||
.break-after-auto {
|
||||
.break-after--auto {
|
||||
break-after: auto;
|
||||
}
|
||||
|
||||
.break-after-avoid {
|
||||
.break-after--avoid {
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
.break-after-all {
|
||||
.break-after--all {
|
||||
break-after: all;
|
||||
}
|
||||
|
||||
.break-after-avoid-page {
|
||||
.break-after--avoid-page {
|
||||
break-after: avoid-page;
|
||||
}
|
||||
|
||||
.break-after-page {
|
||||
.break-after--page {
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
.break-after-left {
|
||||
.break-after--left {
|
||||
break-after: left;
|
||||
}
|
||||
|
||||
.break-after-right {
|
||||
.break-after--right {
|
||||
break-after: right;
|
||||
}
|
||||
|
||||
.break-after-column {
|
||||
.break-after--column {
|
||||
break-after: column;
|
||||
}
|
||||
}
|
||||
+8
-8
@@ -1,33 +1,33 @@
|
||||
@layer utility {
|
||||
.break-before-auto {
|
||||
.break-before--auto {
|
||||
break-before: auto;
|
||||
}
|
||||
|
||||
.break-before-avoid {
|
||||
.break-before--avoid {
|
||||
break-before: avoid;
|
||||
}
|
||||
|
||||
.break-before-all {
|
||||
.break-before--all {
|
||||
break-before: all;
|
||||
}
|
||||
|
||||
.break-before-avoid-page {
|
||||
.break-before--avoid-page {
|
||||
break-before: avoid-page;
|
||||
}
|
||||
|
||||
.break-before-page {
|
||||
.break-before--page {
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
.break-before-left {
|
||||
.break-before--left {
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
.break-before-right {
|
||||
.break-before--right {
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
.break-before-column {
|
||||
.break-before--column {
|
||||
break-before: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@layer utility {
|
||||
.color--white {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
+33
-33
@@ -1,111 +1,111 @@
|
||||
@layer utility {
|
||||
/* ===== 基础光标 ===== */
|
||||
.cursor-auto {
|
||||
.cursor--auto {
|
||||
cursor: auto;
|
||||
}
|
||||
.cursor-default {
|
||||
.cursor--default {
|
||||
cursor: default;
|
||||
}
|
||||
.cursor-pointer {
|
||||
.cursor--pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cursor-wait {
|
||||
.cursor--wait {
|
||||
cursor: wait;
|
||||
}
|
||||
.cursor-text {
|
||||
.cursor--text {
|
||||
cursor: text;
|
||||
}
|
||||
.cursor-move {
|
||||
.cursor--move {
|
||||
cursor: move;
|
||||
}
|
||||
.cursor-help {
|
||||
.cursor--help {
|
||||
cursor: help;
|
||||
}
|
||||
.cursor-not-allowed {
|
||||
.cursor--not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== 拖拽 / 抓取 ===== */
|
||||
.cursor-grab {
|
||||
.cursor--grab {
|
||||
cursor: grab;
|
||||
}
|
||||
.cursor-grabbing {
|
||||
.cursor--grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* ===== 调整大小（通用 & 方向）===== */
|
||||
.cursor-resize {
|
||||
.cursor--resize {
|
||||
cursor: resize;
|
||||
}
|
||||
.cursor-ew-resize {
|
||||
.cursor--ew-resize {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.cursor-ns-resize {
|
||||
.cursor--ns-resize {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
.cursor-nesw-resize {
|
||||
.cursor--nesw-resize {
|
||||
cursor: nesw-resize;
|
||||
}
|
||||
.cursor-nwse-resize {
|
||||
.cursor--nwse-resize {
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.cursor-col-resize {
|
||||
.cursor--col-resize {
|
||||
cursor: col-resize;
|
||||
}
|
||||
.cursor-row-resize {
|
||||
.cursor--row-resize {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.cursor-n-resize {
|
||||
.cursor--n-resize {
|
||||
cursor: n-resize;
|
||||
}
|
||||
.cursor-e-resize {
|
||||
.cursor--e-resize {
|
||||
cursor: e-resize;
|
||||
}
|
||||
.cursor-s-resize {
|
||||
.cursor--s-resize {
|
||||
cursor: s-resize;
|
||||
}
|
||||
.cursor-w-resize {
|
||||
.cursor--w-resize {
|
||||
cursor: w-resize;
|
||||
}
|
||||
.cursor-ne-resize {
|
||||
.cursor--ne-resize {
|
||||
cursor: ne-resize;
|
||||
}
|
||||
.cursor-nw-resize {
|
||||
.cursor--nw-resize {
|
||||
cursor: nw-resize;
|
||||
}
|
||||
.cursor-se-resize {
|
||||
.cursor--se-resize {
|
||||
cursor: se-resize;
|
||||
}
|
||||
.cursor-sw-resize {
|
||||
.cursor--sw-resize {
|
||||
cursor: sw-resize;
|
||||
}
|
||||
|
||||
/* ===== 视觉反馈 ===== */
|
||||
.cursor-crosshair {
|
||||
.cursor--crosshair {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.cursor-progress {
|
||||
.cursor--progress {
|
||||
cursor: progress;
|
||||
}
|
||||
.cursor-no-drop {
|
||||
.cursor--no-drop {
|
||||
cursor: no-drop;
|
||||
}
|
||||
.cursor-vertical-text {
|
||||
.cursor--vertical-text {
|
||||
cursor: vertical-text;
|
||||
}
|
||||
|
||||
/* ===== 现代 / 扩展光标 ===== */
|
||||
.cursor-zoom-in {
|
||||
.cursor--zoom-in {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.cursor-zoom-out {
|
||||
.cursor--zoom-out {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
.cursor-alias {
|
||||
.cursor--alias {
|
||||
cursor: alias;
|
||||
}
|
||||
.cursor-copy {
|
||||
.cursor--copy {
|
||||
cursor: copy;
|
||||
}
|
||||
}
|
||||
+21
-21
@@ -1,90 +1,90 @@
|
||||
@layer utility {
|
||||
/* 基础 display */
|
||||
.display-inline {
|
||||
.display--inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
.display--block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.display-inline-block {
|
||||
.display--inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.display-flow-root {
|
||||
.display--flow-root {
|
||||
display: flow-root;
|
||||
}
|
||||
|
||||
.display-contents {
|
||||
.display--contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.display-none {
|
||||
.display--none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Flex */
|
||||
.display-flex {
|
||||
.display--flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.display-inline-flex {
|
||||
.display--inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.display-grid {
|
||||
.display--grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.display-inline-grid {
|
||||
.display--inline-grid {
|
||||
display: inline-grid;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
.display-table {
|
||||
.display--table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.display-inline-table {
|
||||
.display--inline-table {
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.display-table-caption {
|
||||
.display--table-caption {
|
||||
display: table-caption;
|
||||
}
|
||||
|
||||
.display-table-cell {
|
||||
.display--table-cell {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.display-table-column {
|
||||
.display--table-column {
|
||||
display: table-column;
|
||||
}
|
||||
|
||||
.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-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 {
|
||||
.display--table-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
/* List */
|
||||
.display-list-item {
|
||||
.display--list-item {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@layer utility {
|
||||
.drop-shadow--md {
|
||||
filter: var(--drop-shadow-md);
|
||||
}
|
||||
}
|
||||
+4
-4
@@ -1,14 +1,14 @@
|
||||
@layer utility {
|
||||
.flex-direction-row {
|
||||
.flex-direction--row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-direction-row-reverse {
|
||||
.flex-direction--row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.flex-direction-col {
|
||||
.flex-direction--col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-direction-col-reverse {
|
||||
.flex-direction--col-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
+3
-3
@@ -1,13 +1,13 @@
|
||||
@layer utility {
|
||||
.flex-nowrap {
|
||||
.flex--nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
.flex--wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-wrap-reverse {
|
||||
.flex--wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
+3
-3
@@ -1,11 +1,11 @@
|
||||
@layer utility {
|
||||
.font-family-sans {
|
||||
.font-family--sans {
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.font-family-serif {
|
||||
.font-family--serif {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
.font-family-mono {
|
||||
.font-family--mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
+11
-11
@@ -1,45 +1,45 @@
|
||||
@layer utility {
|
||||
.justify-start {
|
||||
.justify--start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
.justify--end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-end-safe {
|
||||
.justify--end-safe {
|
||||
justify-content: safe flex-end;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
.justify--center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-center-safe {
|
||||
.justify--center-safe {
|
||||
justify-content: safe center;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
.justify--between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.justify-around {
|
||||
.justify--around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.justify-evenly {
|
||||
.justify--evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.justify-stretch {
|
||||
.justify--stretch {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.justify-baseline {
|
||||
.justify--baseline {
|
||||
justify-content: baseline;
|
||||
}
|
||||
|
||||
.justify-normal {
|
||||
.justify--normal {
|
||||
justify-content: normal;
|
||||
}
|
||||
}
|
||||
+7
-7
@@ -1,29 +1,29 @@
|
||||
@layer utility {
|
||||
.justify-items-start {
|
||||
.justify-items--start {
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
.justify-items-end {
|
||||
.justify-items--end {
|
||||
justify-items: end;
|
||||
}
|
||||
|
||||
.justify-items-end-safe {
|
||||
.justify-items--end-safe {
|
||||
justify-items: safe end;
|
||||
}
|
||||
|
||||
.justify-items-center {
|
||||
.justify-items--center {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.justify-items-center-safe {
|
||||
.justify-items--center-safe {
|
||||
justify-items: safe center;
|
||||
}
|
||||
|
||||
.justify-items-stretch {
|
||||
.justify-items--stretch {
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.justify-items-normal {
|
||||
.justify-items--normal {
|
||||
justify-items: normal;
|
||||
}
|
||||
}
|
||||
+7
-7
@@ -1,29 +1,29 @@
|
||||
@layer utility {
|
||||
.justify-self-auto {
|
||||
.justify-self--auto {
|
||||
justify-self: auto;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
.justify-self--start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
.justify-self--center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-center-safe {
|
||||
.justify-self--center-safe {
|
||||
justify-self: safe center;
|
||||
}
|
||||
|
||||
.justify-self-end {
|
||||
.justify-self--end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.justify-self-end-safe {
|
||||
.justify-self--end-safe {
|
||||
justify-self: safe end;
|
||||
}
|
||||
|
||||
.justify-self-stretch {
|
||||
.justify-self--stretch {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
+15
-15
@@ -1,61 +1,61 @@
|
||||
@layer utility {
|
||||
.overflow-auto {
|
||||
.overflow--auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
.overflow--hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-clip {
|
||||
.overflow--clip {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.overflow-visible {
|
||||
.overflow--visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
.overflow--scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.overflow-x-auto {
|
||||
.overflow--x--auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
.overflow--y--auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.overflow-x-hidden {
|
||||
.overflow--x--hidden {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-hidden {
|
||||
.overflow--y--hidden {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.overflow-x-clip {
|
||||
.overflow--x--clip {
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.overflow-y-clip {
|
||||
.overflow--y--clip {
|
||||
overflow-y: clip;
|
||||
}
|
||||
|
||||
.overflow-x-visible {
|
||||
.overflow--x--visible {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.overflow-y-visible {
|
||||
.overflow--y--visible {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.overflow-x-scroll {
|
||||
.overflow--x--scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.overflow-y-scroll {
|
||||
.overflow--y--scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
+9
-9
@@ -1,37 +1,37 @@
|
||||
@layer utility {
|
||||
.overscroll-auto {
|
||||
.overscroll--auto {
|
||||
overscroll-behavior: auto;
|
||||
}
|
||||
|
||||
.overscroll-contain {
|
||||
.overscroll--contain {
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.overscroll-none {
|
||||
.overscroll--none {
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
.overscroll-x-auto {
|
||||
.overscroll--x-auto {
|
||||
overscroll-behavior-x: auto;
|
||||
}
|
||||
|
||||
.overscroll-x-contain {
|
||||
.overscroll--x-contain {
|
||||
overscroll-behavior-x: contain;
|
||||
}
|
||||
|
||||
.overscroll-x-none {
|
||||
.overscroll--x-none {
|
||||
overscroll-behavior-x: none;
|
||||
}
|
||||
|
||||
.overscroll-y-auto {
|
||||
.overscroll--y-auto {
|
||||
overscroll-behavior-y: auto;
|
||||
}
|
||||
|
||||
.overscroll-y-contain {
|
||||
.overscroll--y-contain {
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.overscroll-y-none {
|
||||
.overscroll--y-none {
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.position--static {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.position--fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.position--absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.position--relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.position--sticky {
|
||||
position: sticky;
|
||||
}
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
.sr-only-cancel {
|
||||
.sr-only--cancel {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
+2
-2
@@ -1,10 +1,10 @@
|
||||
@layer utility {
|
||||
.theme-light {
|
||||
.theme--light {
|
||||
--base-fg: var(--color-gray-950);
|
||||
--base-bg: var(--color-white);
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
.theme--dark {
|
||||
--base-fg: var(--color-gray-50);
|
||||
--base-bg: var(--color-black);
|
||||
}
|
||||
+4
-4
@@ -1,14 +1,14 @@
|
||||
@layer utility {
|
||||
.select-none {
|
||||
.select--none {
|
||||
user-select: none;
|
||||
}
|
||||
.select-text {
|
||||
.select--text {
|
||||
user-select: text;
|
||||
}
|
||||
.select-all {
|
||||
.select--all {
|
||||
user-select: all;
|
||||
}
|
||||
.select-auto {
|
||||
.select--auto {
|
||||
user-select: auto;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@layer utility {
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.visible--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.visible--collapse {
|
||||
visibility: collapse;
|
||||
}
|
||||
}
|
||||
+22
-12
@@ -1,43 +1,53 @@
|
||||
@layer utility {
|
||||
|
||||
/* 自动 & 零 */
|
||||
.z-auto {
|
||||
.z--auto {
|
||||
z-index: auto;
|
||||
}
|
||||
.z-0 {
|
||||
|
||||
.z--0 {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 正值 */
|
||||
.z-10 {
|
||||
.z--10 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z-20 {
|
||||
|
||||
.z--20 {
|
||||
z-index: 20;
|
||||
}
|
||||
.z-30 {
|
||||
|
||||
.z--30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.z-40 {
|
||||
|
||||
.z--40 {
|
||||
z-index: 40;
|
||||
}
|
||||
.z-50 {
|
||||
|
||||
.z--50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
/* 负值（negative） */
|
||||
.z-n-10 {
|
||||
.z--n-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
.z-n-20 {
|
||||
|
||||
.z--n-20 {
|
||||
z-index: -20;
|
||||
}
|
||||
.z-n-30 {
|
||||
|
||||
.z--n-30 {
|
||||
z-index: -30;
|
||||
}
|
||||
.z-n-40 {
|
||||
|
||||
.z--n-40 {
|
||||
z-index: -40;
|
||||
}
|
||||
.z-n-50 {
|
||||
|
||||
.z--n-50 {
|
||||
z-index: -50;
|
||||
}
|
||||
}
|
||||
+11
-8
@@ -1,26 +1,29 @@
|
||||
@layer utility {
|
||||
.rounded-full {
|
||||
.rounded--full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
.rounded-none {
|
||||
.rounded--none {
|
||||
border-radius: 0;
|
||||
}
|
||||
.rounded-xs {
|
||||
.rounded--xs {
|
||||
border-radius: var(--radius-xs);
|
||||
}
|
||||
.rounded-sm {
|
||||
.rounded--sm {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.rounded-md {
|
||||
.rounded--md {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.rounded-lg {
|
||||
.rounded--lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.rounded-xl {
|
||||
.rounded--xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.rounded-2xl {
|
||||
.rounded--2xl {
|
||||
border-radius: var(--radius-2xl);
|
||||
}
|
||||
.rounded--3xl {
|
||||
border-radius: var(--radius-3xl);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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))
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
+6
-10
@@ -1,24 +1,20 @@
|
||||
@layer utility {
|
||||
.px-long-xs {
|
||||
/* 6px */
|
||||
.px--long-xs {
|
||||
padding-inline: var(--padding-long-xs);
|
||||
}
|
||||
.px-long-sm {
|
||||
/* 8px */
|
||||
.px--long-sm {
|
||||
padding-inline: var(--padding-long-sm);
|
||||
}
|
||||
.px-long-md {
|
||||
/* 10px */
|
||||
.px--long-md {
|
||||
padding-inline: var(--padding-long-md);
|
||||
}
|
||||
.px-long-lg {
|
||||
/* 16px */
|
||||
.px--long-lg {
|
||||
padding-inline: var(--padding-long-lg);
|
||||
}
|
||||
.px-long-xl {
|
||||
.px--long-xl {
|
||||
padding-inline: var(--padding-long-xl);
|
||||
}
|
||||
.px-long-2xl {
|
||||
.px--long-2xl {
|
||||
padding-inline: var(--padding-long-2xl);
|
||||
}
|
||||
}
|
||||
+22
-19
@@ -1,49 +1,52 @@
|
||||
@layer utility {
|
||||
.px-none {
|
||||
.px--none {
|
||||
padding-inline: 0px;
|
||||
}
|
||||
.px-xs {
|
||||
/* 4px, 24px - 16px = 8px */
|
||||
.px--xs {
|
||||
padding-inline: var(--padding-xs);
|
||||
}
|
||||
.px-sm {
|
||||
/* 4px, 28px - 20px = 8px */
|
||||
.px--sm {
|
||||
padding-inline: var(--padding-sm);
|
||||
}
|
||||
.px-md {
|
||||
/* 10px */
|
||||
.px--md {
|
||||
padding-inline: var(--padding-md);
|
||||
}
|
||||
.px-lg {
|
||||
/* 16px */
|
||||
.px--lg {
|
||||
padding-inline: var(--padding-lg);
|
||||
}
|
||||
.px-xl {
|
||||
.px--xl {
|
||||
padding-inline: var(--padding-xl);
|
||||
}
|
||||
.px-2xl {
|
||||
.px--2xl {
|
||||
padding-inline: var(--padding-2xl);
|
||||
}
|
||||
/* ------------------------ */
|
||||
.py-none {
|
||||
.px--3xl {
|
||||
padding-inline: var(--padding-3xl);
|
||||
}
|
||||
/* =================================================== */
|
||||
|
||||
.py--none {
|
||||
padding-block: 0px;
|
||||
}
|
||||
.py-xs {
|
||||
.py--xs {
|
||||
padding-block: var(--padding-xs);
|
||||
}
|
||||
.py-sm {
|
||||
.py--sm {
|
||||
padding-block: var(--padding-sm);
|
||||
}
|
||||
.py-md {
|
||||
.py--md {
|
||||
padding-block: var(--padding-md);
|
||||
}
|
||||
.py-lg {
|
||||
.py--lg {
|
||||
padding-block: var(--padding-lg);
|
||||
}
|
||||
.py-xl {
|
||||
.py--xl {
|
||||
padding-block: var(--padding-xl);
|
||||
}
|
||||
.py-2xl {
|
||||
.py--2xl {
|
||||
padding-block: var(--padding-2xl);
|
||||
}
|
||||
.py--3xl {
|
||||
padding-block: var(--padding-3xl);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
@layer utility {
|
||||
.drop-shadow {
|
||||
filter: var(--drop-shadow);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
@@ -1,61 +1,30 @@
|
||||
import { defaultPrefixList } from "./prefix-list";
|
||||
|
||||
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 {
|
||||
export function cpm(...classes: (string[] | string)[]) {
|
||||
const map = new Map<string, string>();
|
||||
|
||||
let options: { extendedPrefixList?: string[] } = {};
|
||||
let classes: Array<string | string[]>;
|
||||
function dealClass(cls: string) {
|
||||
const clsArr = cls.trim().split(/\s+/);
|
||||
// 提取前缀
|
||||
clsArr.forEach((i) => {
|
||||
const prifix = i.trim().split("--")[0];
|
||||
|
||||
if (typeof arg1 === "object" && !Array.isArray(arg1)) {
|
||||
options = arg1 as { extendedPrefixList?: string[] };
|
||||
classes = rest;
|
||||
} else {
|
||||
classes = [arg1, ...rest];
|
||||
// 使用set覆盖（自动新建），而不是push
|
||||
map.set(prifix, i);
|
||||
});
|
||||
}
|
||||
|
||||
const mergedPrefixList: string[] = [
|
||||
...new Set([...(options.extendedPrefixList ?? []), ...defaultPrefixList]),
|
||||
];
|
||||
|
||||
classes.forEach((item) => {
|
||||
if (Array.isArray(item)) {
|
||||
item.forEach((i) => {
|
||||
const bestPrefix = matchLongestPrefix(i, mergedPrefixList);
|
||||
map.set(bestPrefix, i);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果是 string 直接处理
|
||||
if (typeof item === "string") {
|
||||
const bestPrefix = matchLongestPrefix(item, mergedPrefixList);
|
||||
map.set(bestPrefix, item);
|
||||
dealClass(item);
|
||||
} else {
|
||||
// 否则肯定是 string[]
|
||||
item.forEach((i) => {
|
||||
dealClass(i);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return Object.values(map).join(" ");
|
||||
const resultString = Array.from(map.values()).join(" ");
|
||||
|
||||
return resultString;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
|
||||
|
||||
import { cpm } from "./cpm";
|
||||
|
||||
// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
|
||||
// 但底层存储我们统一视为字符串处理
|
||||
type VariantValue = string | boolean;
|
||||
|
||||
|
||||
@@ -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",
|
||||
];
|
||||
@@ -4,9 +4,9 @@
|
||||
"noEmit": false,
|
||||
"emitDeclarationOnly": true,
|
||||
"declaration": true,
|
||||
"declarationDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist"
|
||||
"outDir": "./dist",
|
||||
"declarationDir": "./dist"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": [
|
||||
|
||||
+14
-10
@@ -1,13 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2025",
|
||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||
"lib": [
|
||||
"ES2025",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"types": ["node", "vite/client"],
|
||||
"types": [
|
||||
"node",
|
||||
"vite/client"
|
||||
],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
@@ -15,12 +21,10 @@
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src", "scripts", "vite.config.ts"]
|
||||
"include": [
|
||||
"src",
|
||||
"scripts",
|
||||
"vite.config.ts",
|
||||
]
|
||||
}
|
||||
+15
-16
@@ -1,29 +1,28 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
// d.ts 由 tsc 完成，使用专门配置 tsconfig.build.json
|
||||
// 转换由 oxc 完成
|
||||
// 打包由 rolldown 完成
|
||||
plugins: [react()],
|
||||
plugins: [],
|
||||
|
||||
build: {
|
||||
cssMinify: false,
|
||||
|
||||
lib: {
|
||||
entry: path.resolve(import.meta.dirname, "src/index.ts"),
|
||||
// 不写 vite 默认是 index.mjs 和 index.js，不方便识别
|
||||
formats: ["es", "cjs"],
|
||||
// package.json 管别人怎么使用，
|
||||
// build.lib 管怎么打包，生成什么
|
||||
// 如果不一致，就会报错，指向文件不存在
|
||||
fileName: (format) => `index.${format}.js`,
|
||||
},
|
||||
|
||||
rolldownOptions: {
|
||||
// 避免这些被打包，peerDependencies 对 rolldown 是无效的，不会自动 external
|
||||
external: ["react", "react-dom", "react/jsx-runtime"],
|
||||
// 专门给 UMD / IIFE 的映射表
|
||||
output: {
|
||||
// 强制将生成的 CSS 命名为 index.css
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.name && assetInfo.name.endsWith(".css")) {
|
||||
return "index.css";
|
||||
}
|
||||
return "[name].[hash][extname]";
|
||||
},
|
||||
globals: {
|
||||
react: "React",
|
||||
"react-dom": "ReactDOM",
|
||||
@@ -31,9 +30,9 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
|
||||
emptyOutDir: true, // 防止旧产物残留
|
||||
sourcemap: true, // 方便调试
|
||||
cssCodeSplit: false, // 合并成一个css文件
|
||||
outDir: "dist", // 专管打包输出目录，tsconfig.build.json 中的 outDir 管的是 d.ts 输出目录
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
cssCodeSplit: false,
|
||||
outDir: "dist",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@defgov/ui-web-headless",
|
||||
"name": "@dg/ui-react",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
@@ -24,18 +24,21 @@
|
||||
"scripts": {
|
||||
"gen-index": "ts-node scripts/gen-index.ts",
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"dev": "pnpm gen-index && vite build --watch",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dg/css": "workspace:*",
|
||||
"@floating-ui/react": "^0.27.20"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"tinyglobby": "^0.2.16",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^6.0.3",
|
||||
"vite": "^8.0.10",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3"
|
||||
"vite": "^8.0.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^19",
|
||||
@@ -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 状态码退出
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
@@ -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
Reference in New Issue
Block a user