mm
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@dg/css",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"sideEffects": [
|
||||
"*.css"
|
||||
],
|
||||
"module": "./dist/index.es.js",
|
||||
"main": "./dist/index.cjs.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"style": "./dist/index.css",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.es.js",
|
||||
"require": "./dist/index.cjs.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
},
|
||||
"./index.css": "./dist/index.css"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"gen-index": "ts-node scripts/gen-index.ts",
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@types/node": "^25.6.0",
|
||||
"tinyglobby": "^0.2.16",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^6.0.3",
|
||||
"vite": "^8.0.10"
|
||||
}
|
||||
}
|
||||
@@ -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 状态码退出
|
||||
}
|
||||
@@ -330,28 +330,46 @@
|
||||
--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;
|
||||
@@ -362,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",
|
||||
@@ -377,26 +395,31 @@
|
||||
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;
|
||||
|
||||
--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';
|
||||
@@ -0,0 +1,10 @@
|
||||
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';
|
||||
@@ -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",
|
||||
},
|
||||
],
|
||||
});
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
import { cvr } from "../utils/cvr";
|
||||
|
||||
export const brandRecipe = cvr({
|
||||
variants: {
|
||||
@@ -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",
|
||||
},
|
||||
},
|
||||
});
|
||||
+21
-7
@@ -1,15 +1,16 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
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 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",
|
||||
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",
|
||||
@@ -20,8 +21,19 @@ export const itemSizeRecipe = cvr({
|
||||
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" },
|
||||
@@ -29,6 +41,7 @@ export const itemSizeRecipe = cvr({
|
||||
{ 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" },
|
||||
@@ -36,5 +49,6 @@ export const itemSizeRecipe = cvr({
|
||||
{ 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" },
|
||||
],
|
||||
});
|
||||
+16
-2
@@ -1,6 +1,6 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
import { cvr } from "../utils/cvr";
|
||||
|
||||
export const variantRecipe = cvr({
|
||||
export const itemVariantRecipe = cvr({
|
||||
variants: {
|
||||
variant: {
|
||||
filled: "",
|
||||
@@ -12,6 +12,10 @@ export const variantRecipe = cvr({
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
clickable: {
|
||||
true: "",
|
||||
false: "",
|
||||
},
|
||||
},
|
||||
compoundVariants: [
|
||||
{
|
||||
@@ -54,5 +58,15 @@ export const variantRecipe = cvr({
|
||||
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: "",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
@layer utility {
|
||||
.bg--red {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@layer utility {
|
||||
.color--white {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
+3
@@ -23,4 +23,7 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
+7
-3
@@ -22,11 +22,12 @@
|
||||
.my--xl {
|
||||
margin-block: var(--margin-xl);
|
||||
}
|
||||
|
||||
.my--2xl {
|
||||
margin-block: var(--margin-2xl);
|
||||
}
|
||||
|
||||
.my--3xl {
|
||||
margin-block: var(--margin-3xl);
|
||||
}
|
||||
/* ======================== */
|
||||
|
||||
.mx--none {
|
||||
@@ -56,4 +57,7 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@layer utility {
|
||||
.px--long-xs {
|
||||
padding-inline: var(--padding-long-xs);
|
||||
}
|
||||
.px--long-sm {
|
||||
padding-inline: var(--padding-long-sm);
|
||||
}
|
||||
.px--long-md {
|
||||
padding-inline: var(--padding-long-md);
|
||||
}
|
||||
.px--long-lg {
|
||||
padding-inline: var(--padding-long-lg);
|
||||
}
|
||||
.px--long-xl {
|
||||
padding-inline: var(--padding-long-xl);
|
||||
}
|
||||
.px--long-2xl {
|
||||
padding-inline: var(--padding-long-2xl);
|
||||
}
|
||||
}
|
||||
+7
-46
@@ -2,90 +2,51 @@
|
||||
.px--none {
|
||||
padding-inline: 0px;
|
||||
}
|
||||
|
||||
.px--xs {
|
||||
/* 4px, 24px - 16px = 8px */
|
||||
padding-inline: var(--padding-xs);
|
||||
}
|
||||
|
||||
.px--sm {
|
||||
/* 4px, 28px - 20px = 8px */
|
||||
padding-inline: var(--padding-sm);
|
||||
}
|
||||
|
||||
.px--md {
|
||||
/* 10px */
|
||||
padding-inline: var(--padding-md);
|
||||
}
|
||||
|
||||
.px--lg {
|
||||
/* 16px */
|
||||
padding-inline: var(--padding-lg);
|
||||
}
|
||||
|
||||
.px--xl {
|
||||
padding-inline: var(--padding-xl);
|
||||
}
|
||||
|
||||
.px--2xl {
|
||||
padding-inline: var(--padding-2xl);
|
||||
}
|
||||
.px--3xl {
|
||||
padding-inline: var(--padding-3xl);
|
||||
}
|
||||
/* =================================================== */
|
||||
|
||||
/* ------------------------ */
|
||||
.py--none {
|
||||
padding-block: 0px;
|
||||
}
|
||||
|
||||
.py--xs {
|
||||
padding-block: var(--padding-xs);
|
||||
}
|
||||
|
||||
.py--sm {
|
||||
padding-block: var(--padding-sm);
|
||||
}
|
||||
|
||||
.py--md {
|
||||
padding-block: var(--padding-md);
|
||||
}
|
||||
|
||||
.py--lg {
|
||||
padding-block: var(--padding-lg);
|
||||
}
|
||||
|
||||
.py--xl {
|
||||
padding-block: var(--padding-xl);
|
||||
}
|
||||
|
||||
.py--2xl {
|
||||
padding-block: var(--padding-2xl);
|
||||
}
|
||||
|
||||
/* ========================== */
|
||||
.px--long-xs {
|
||||
/* 6px */
|
||||
padding-inline: var(--padding-long-xs);
|
||||
.py--3xl {
|
||||
padding-block: var(--padding-3xl);
|
||||
}
|
||||
|
||||
.px--long-sm {
|
||||
/* 8px */
|
||||
padding-inline: var(--padding-long-sm);
|
||||
}
|
||||
|
||||
.px--long-md {
|
||||
/* 10px */
|
||||
padding-inline: var(--padding-long-md);
|
||||
}
|
||||
|
||||
.px--long-lg {
|
||||
/* 16px */
|
||||
padding-inline: var(--padding-long-lg);
|
||||
}
|
||||
|
||||
.px--long-xl {
|
||||
padding-inline: var(--padding-long-xl);
|
||||
}
|
||||
|
||||
.px--long-2xl {
|
||||
padding-inline: var(--padding-long-2xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
-25
@@ -28,29 +28,4 @@
|
||||
/* 64px navigation bar */
|
||||
width: var(--height-item-2xl);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------- */
|
||||
.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,41 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"noEmit": false,
|
||||
"emitDeclarationOnly": true,
|
||||
"declaration": true,
|
||||
"rootDir": "./src",
|
||||
"outDir": "./dist",
|
||||
"declarationDir": "./dist"
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"dist",
|
||||
".turbo/**/*",
|
||||
".cache/**/*",
|
||||
".vite/**/*",
|
||||
"vite.config.ts",
|
||||
"*.config.ts",
|
||||
"*.config.js",
|
||||
"tsconfig.*.json",
|
||||
"__tests__/**/*",
|
||||
"test/**/*",
|
||||
"tests/**/*",
|
||||
"**/*.test.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.ts",
|
||||
"**/*.spec.tsx",
|
||||
".storybook/**/*",
|
||||
"stories/**/*",
|
||||
"example/**/*",
|
||||
"examples/**/*",
|
||||
"scripts/**/*",
|
||||
".env",
|
||||
".env.*",
|
||||
"public/**/*",
|
||||
"docs/**/*",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2025",
|
||||
"lib": [
|
||||
"ES2025",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"module": "ESNext",
|
||||
"types": [
|
||||
"node",
|
||||
"vite/client"
|
||||
],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
"scripts",
|
||||
"vite.config.ts",
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import path from "path";
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [],
|
||||
|
||||
build: {
|
||||
cssMinify: false,
|
||||
|
||||
lib: {
|
||||
entry: path.resolve(import.meta.dirname, "src/index.ts"),
|
||||
formats: ["es", "cjs"],
|
||||
fileName: (format) => `index.${format}.js`,
|
||||
},
|
||||
|
||||
rolldownOptions: {
|
||||
external: ["react", "react-dom", "react/jsx-runtime"],
|
||||
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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
emptyOutDir: true,
|
||||
sourcemap: true,
|
||||
cssCodeSplit: false,
|
||||
outDir: "dist",
|
||||
},
|
||||
});
|
||||
@@ -26,7 +26,9 @@
|
||||
"gen-dts": "tsc -p tsconfig.build.json",
|
||||
"build": "pnpm gen-index && vite build && pnpm gen-dts"
|
||||
},
|
||||
"dependencies": {},
|
||||
"dependencies": {
|
||||
"@dg/css": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^25.6.0",
|
||||
"@types/react": "^19.2.14",
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
export const CloseSvg = (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="M18 6L6 18M6 6l12 12"
|
||||
></path>
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,61 @@
|
||||
import {
|
||||
forwardRef,
|
||||
type ComponentPropsWithoutRef,
|
||||
type CSSProperties,
|
||||
} from "react";
|
||||
import { cpm } from "../../styles/utils/cpm";
|
||||
import { dotSizeRecipe } from "../../recipes/dotSizeRecipe";
|
||||
import { addonSizeRecipe } from "../../recipes/addonSizeRecipe";
|
||||
|
||||
export type BadgeProps = ComponentPropsWithoutRef<"div"> & {
|
||||
size?: "xs" | "sm" | "md" | "lg";
|
||||
} & {
|
||||
forceDot?: boolean;
|
||||
indicatorContent?: string;
|
||||
};
|
||||
|
||||
export const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
|
||||
const {
|
||||
indicatorContent = "",
|
||||
forceDot = false,
|
||||
size = "md",
|
||||
children,
|
||||
className = "",
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const wrapperStyle: CSSProperties = {
|
||||
position: "relative",
|
||||
height: "fit",
|
||||
width: "fit",
|
||||
};
|
||||
|
||||
const indicatorStyle: CSSProperties = {
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
transform: "translate(50%,-50%)",
|
||||
borderRadius: "9999px",
|
||||
};
|
||||
const isNotHaveContent =
|
||||
indicatorContent == "" || indicatorContent == undefined;
|
||||
const isDot = isNotHaveContent || forceDot == true;
|
||||
const isCircle = indicatorContent.length == 1;
|
||||
|
||||
let indicatorClass;
|
||||
|
||||
if (isDot) {
|
||||
indicatorClass = cpm(dotSizeRecipe({ size }), className);
|
||||
} else {
|
||||
indicatorClass = cpm(addonSizeRecipe({ size, isCircle }), className);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={ref} style={wrapperStyle} {...rest}>
|
||||
{children}
|
||||
<div className={indicatorClass} style={indicatorStyle}>
|
||||
{indicatorContent}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@@ -6,11 +6,6 @@ import {
|
||||
|
||||
import { Icon } from "../Icon/Icon";
|
||||
import { SpinnerSvg } from "../../assets/svg/SpinnerSvg";
|
||||
import { cpm } from "../../styles/utils/cpm";
|
||||
import { itemSizeRecipe } from "../../recipes/itemSizeRecipe";
|
||||
import { variantRecipe } from "../../recipes/variantRecipe";
|
||||
import { brandRecipe } from "../../recipes/brandRecipe";
|
||||
import { inlineSizeRecipe } from "../../recipes/inlineSizeRecipe";
|
||||
|
||||
export type ButtonSize = "xs" | "sm" | "md" | "lg";
|
||||
|
||||
@@ -50,7 +45,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
} = props;
|
||||
|
||||
const mergedClass = cpm(
|
||||
itemSizeRecipe({ size, shape, iconOnly }),
|
||||
itemSizeRecipe({ size, shape, iconOnly, longPadding: false }),
|
||||
variantRecipe({ variant, disabled }),
|
||||
brandRecipe({ brand }),
|
||||
className,
|
||||
|
||||
@@ -1,20 +1,26 @@
|
||||
import { forwardRef, type ComponentPropsWithoutRef } from "react";
|
||||
import { Slot } from "../../utils/Slot";
|
||||
import { forwardRef } from "react";
|
||||
import { inlineSizeRecipe } from "../../recipes/inlineSizeRecipe";
|
||||
import { cpm } from "../../styles/utils/cpm";
|
||||
import type { CommonProps } from "../../utils/CommonProps";
|
||||
import { Slot } from "../../utils/Slot";
|
||||
import { variantRecipe } from "../../recipes/variantRecipe";
|
||||
|
||||
export type IconProps = {
|
||||
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
} & ComponentPropsWithoutRef<"svg">;
|
||||
export type IconProps = CommonProps & {
|
||||
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
|
||||
shape?: "square" | "circle";
|
||||
} & {
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export const Icon = forwardRef<HTMLOrSVGElement, IconProps>((props, ref) => {
|
||||
const { size = "md", className = "", children, ...rest } = props;
|
||||
const mergedClass = cpm(inlineSizeRecipe({ size }), className);
|
||||
export const Icon = forwardRef<HTMLSpanElement, IconProps>((props, ref) => {
|
||||
const { size = "md", className = "", children, shape, ...rest } = props;
|
||||
|
||||
const mergedClass = cpm(inlineSizeRecipe({ size, shape }), className);
|
||||
|
||||
return (
|
||||
<Slot ref={ref} className={mergedClass} {...rest}>
|
||||
{children}
|
||||
</Slot>
|
||||
<span ref={ref} {...rest}>
|
||||
<Slot className={mergedClass}>{children}</Slot>
|
||||
</span>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import { cpm } from "../../styles/utils/cpm";
|
||||
import { brandRecipe } from "../../recipes/brandRecipe";
|
||||
import { variantRecipe } from "../../recipes/variantRecipe";
|
||||
import { downSizeXsTo3xl } from "../../utils/downSizeSmTo2xl";
|
||||
import { itemSizeRecipe } from "../../recipes/itemSizeRecipe";
|
||||
import { Icon } from "../Icon/Icon";
|
||||
import { CloseSvg } from "../../assets/svg/CloseSvg";
|
||||
import type { CommonProps } from "../../utils/CommonProps";
|
||||
|
||||
export type TagProps = CommonProps & {
|
||||
size?: "sm" | "md" | "lg";
|
||||
variant?: "filled" | "outline";
|
||||
brand?: "success" | "danger" | "info" | "warning" | "emphasize";
|
||||
} & {
|
||||
checkable?: boolean;
|
||||
checked?: boolean;
|
||||
onCheck?: (checked: boolean) => void;
|
||||
} & {
|
||||
closable?: boolean;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
export const Tag = (props: TagProps) => {
|
||||
const {
|
||||
className = "",
|
||||
children,
|
||||
size: defaultSize = "md",
|
||||
brand = "info",
|
||||
disabled = false,
|
||||
onClose,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const size = downSizeXsTo3xl(defaultSize, 1);
|
||||
|
||||
const mergedClass = cpm(
|
||||
itemSizeRecipe({ size }),
|
||||
variantRecipe({ variant: "subtle", disabled, clickable: false }),
|
||||
brandRecipe({ brand }),
|
||||
"rounded--full",
|
||||
className,
|
||||
);
|
||||
|
||||
const closeIconClase = cpm(
|
||||
variantRecipe({ variant: "ghost", disabled }),
|
||||
brandRecipe({ brand: "emphasize" }),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={mergedClass} {...rest}>
|
||||
{children}
|
||||
<Icon
|
||||
className={closeIconClase}
|
||||
size={size}
|
||||
onClick={onClose}
|
||||
shape={"circle"}
|
||||
>
|
||||
<CloseSvg />
|
||||
</Icon>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -3,12 +3,14 @@
|
||||
@import './styles/utility/size-insensitive/align-items';
|
||||
@import './styles/utility/size-insensitive/align-self';
|
||||
@import './styles/utility/size-insensitive/animation';
|
||||
@import './styles/utility/size-insensitive/background';
|
||||
@import './styles/utility/size-insensitive/box-decoration';
|
||||
@import './styles/utility/size-insensitive/box-inside';
|
||||
@import './styles/utility/size-insensitive/box-sizing';
|
||||
@import './styles/utility/size-insensitive/brand';
|
||||
@import './styles/utility/size-insensitive/break-after';
|
||||
@import './styles/utility/size-insensitive/break-before';
|
||||
@import './styles/utility/size-insensitive/color';
|
||||
@import './styles/utility/size-insensitive/cursor';
|
||||
@import './styles/utility/size-insensitive/display';
|
||||
@import './styles/utility/size-insensitive/drop-shadow';
|
||||
@@ -33,5 +35,6 @@
|
||||
@import './styles/utility/size-sensitive/gap';
|
||||
@import './styles/utility/size-sensitive/height';
|
||||
@import './styles/utility/size-sensitive/margin';
|
||||
@import './styles/utility/size-sensitive/min-width';
|
||||
@import './styles/utility/size-sensitive/padding';
|
||||
@import './styles/utility/size-sensitive/width';
|
||||
@@ -2,6 +2,7 @@ import './index.css';
|
||||
export * from './assets/svg/BoldSvg';
|
||||
export * from './assets/svg/CheckIndicatorSvg';
|
||||
export * from './assets/svg/ChevronRightSvg';
|
||||
export * from './assets/svg/CloseSvg';
|
||||
export * from './assets/svg/CutSvg';
|
||||
export * from './assets/svg/DownloadSvg';
|
||||
export * from './assets/svg/FileSvg';
|
||||
@@ -18,15 +19,20 @@ export * from './assets/svg/UserSvg';
|
||||
export * from './assets/svg/VolumeHighSvg';
|
||||
export * from './assets/svg/VolumeLowSvg';
|
||||
export * from './assets/svg/VolumeMuteSvg';
|
||||
export * from './componnets/Badge/Badge';
|
||||
export * from './componnets/Button/Button';
|
||||
export * from './componnets/Icon/Icon';
|
||||
export * from './componnets/Tag/Tag';
|
||||
export * from './recipes/addonSizeRecipe';
|
||||
export * from './recipes/brandRecipe';
|
||||
export * from './recipes/dotSizeRecipe';
|
||||
export * from './recipes/inlineSizeRecipe';
|
||||
export * from './recipes/itemSizeRecipe';
|
||||
export * from './recipes/variantRecipe';
|
||||
export * from './styles/utils/cpm';
|
||||
export * from './styles/utils/cvr';
|
||||
export * from './utils/camelToKebab';
|
||||
export * from './utils/CommonProps';
|
||||
export * from './utils/downSizeSmTo2xl';
|
||||
export * from './utils/mergeProps';
|
||||
export * from './utils/Slot';
|
||||
export * from './utils/useSlotsRegistry';
|
||||
export * from './utils/Slot';
|
||||
@@ -1,15 +0,0 @@
|
||||
import { cvr } from "../styles/utils/cvr";
|
||||
|
||||
export const inlineSizeRecipe = cvr({
|
||||
base: "display--flex flex--nowrap justify--center items--center",
|
||||
variants: {
|
||||
size: {
|
||||
xs: "text--xs h--inline-xs gap--xs",
|
||||
sm: "text--sm h--inline-sm gap--sm",
|
||||
md: "text--md h--inline-md gap--md",
|
||||
lg: "text--lg h--inline-lg gap--lg",
|
||||
xl: "text--xl h--inline-xl gap--xl",
|
||||
"2xl": "text--2xl h--inline-2xl gap--2xl",
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,206 +0,0 @@
|
||||
@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);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--filled-bg-hover);
|
||||
color: var(--filled-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--outline-bg-hover);
|
||||
color: var(--outline-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--subtle-bg-hover);
|
||||
color: var(--subtle-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background-color: var(--ghost-bg-hover);
|
||||
color: var(--ghost-fg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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) * 4);
|
||||
}
|
||||
.gap--xl {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap--2xl {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
@@ -1,58 +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));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
|
||||
export type CommonProps = {
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
children?: ReactNode;
|
||||
disabled?: boolean;
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
type xsTo3xl = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
|
||||
|
||||
export function downSizeXsTo3xl(
|
||||
size: "sm" | "md" | "lg" | "xl" | "2xl",
|
||||
downLevel: 1 | 2,
|
||||
): xsTo3xl {
|
||||
const sizeList = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
|
||||
const index = sizeList.indexOf(size);
|
||||
const returnIndex = index - downLevel;
|
||||
return sizeList[returnIndex] as xsTo3xl;
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
export type UseSlotsRegistryReturn<Names extends readonly string[]> = {
|
||||
slots: Partial<SlotRecord<Names>>;
|
||||
canRender: boolean;
|
||||
generateId: (prefix: string) => string;
|
||||
registerSlot: (
|
||||
id: string,
|
||||
slotName: Names[number],
|
||||
content: React.ReactNode,
|
||||
) => void;
|
||||
markReady: (id: string) => void;
|
||||
};
|
||||
|
||||
type SlotRecord<Names extends readonly string[]> = {
|
||||
[K in Names[number]]: React.ReactNode[];
|
||||
};
|
||||
|
||||
export function useSlotsRegistry<
|
||||
const Names extends readonly string[],
|
||||
>(): UseSlotsRegistryReturn<Names> {
|
||||
type SlotName = Names[number];
|
||||
|
||||
const [slots, setSlots] = useState<Partial<SlotRecord<Names>>>({});
|
||||
const readySet = useRef(new Set<string>());
|
||||
const totalSet = useRef(new Set<string>());
|
||||
const [canRender, setCanRender] = useState(false);
|
||||
const [ids, setIds] = useState<string[]>([]);
|
||||
|
||||
const generateId = (prefix: string): string => {
|
||||
while (true) {
|
||||
const rand = Math.random().toString(36).slice(2, 8);
|
||||
const id = `${prefix}-${rand}`;
|
||||
if (!ids.includes(id)) {
|
||||
setIds((prev) => [...prev, id]);
|
||||
return id;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const registerSlot = (
|
||||
id: string,
|
||||
slotName: SlotName,
|
||||
content: React.ReactNode,
|
||||
) => {
|
||||
totalSet.current.add(id);
|
||||
|
||||
setSlots((prev) => ({
|
||||
...prev,
|
||||
[slotName]: [...(prev[slotName] ?? []), content],
|
||||
}));
|
||||
};
|
||||
|
||||
const markReady = (id: string) => {
|
||||
readySet.current.add(id);
|
||||
|
||||
if (readySet.current.size === totalSet.current.size) {
|
||||
setCanRender(true);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
slots,
|
||||
canRender,
|
||||
generateId,
|
||||
registerSlot,
|
||||
markReady,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user