feat: manually mirror opencoze's code from bytedance
Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf
This commit is contained in:
fanlv
276
frontend/config/tailwind-config/README.md
Normal file
276
frontend/config/tailwind-config/README.md
Normal file
@@ -0,0 +1,276 @@
|
||||
# @coze-arch/tailwind-config
|
||||
|
||||
A comprehensive Tailwind CSS configuration package for the Coze design system, providing consistent theming, color palettes, and semantic design tokens across all applications.
|
||||
|
||||
## Features
|
||||
|
||||
- 🎨 **Complete Design System**: Pre-configured colors, spacing, typography, and component styles
|
||||
- 🌙 **Dark Mode Support**: Built-in light/dark theme switching with CSS variables
|
||||
- 🎯 **Semantic Classes**: Meaningful utility classes like `coz-fg-primary`, `coz-bg-secondary`
|
||||
- 🧩 **Component-Ready**: Pre-defined styles for buttons, inputs, and other UI components
|
||||
- 🎨 **Rich Color Palette**: Extensive color system including brand, functional, and semantic colors
|
||||
- 📐 **Consistent Spacing**: Standardized spacing system across all dimensions
|
||||
- 🔧 **Design Token Integration**: Support for converting design tokens to Tailwind config
|
||||
|
||||
## Get Started
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# Install the package in your workspace
|
||||
pnpm add @coze-arch/tailwind-config@workspace:*
|
||||
|
||||
# Update Rush to install dependencies
|
||||
rush update
|
||||
```
|
||||
|
||||
### Basic Usage
|
||||
|
||||
In your `tailwind.config.js`:
|
||||
|
||||
```javascript
|
||||
const cozeConfig = require('@coze-arch/tailwind-config');
|
||||
|
||||
module.exports = {
|
||||
...cozeConfig,
|
||||
content: [
|
||||
'./src/**/*.{js,ts,jsx,tsx}',
|
||||
// your content paths
|
||||
],
|
||||
// extend or override as needed
|
||||
theme: {
|
||||
extend: {
|
||||
...cozeConfig.theme.extend,
|
||||
// your custom extensions
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Using the Coze Plugin
|
||||
|
||||
For semantic utilities and CSS variables:
|
||||
|
||||
```javascript
|
||||
const cozePlugin = require('@coze-arch/tailwind-config/coze');
|
||||
|
||||
module.exports = {
|
||||
// ... your config
|
||||
plugins: [
|
||||
cozePlugin,
|
||||
// other plugins
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Design Token Integration
|
||||
|
||||
Convert design tokens to Tailwind configuration:
|
||||
|
||||
```javascript
|
||||
import { designTokenToTailwindConfig, getPackagesContents } from '@coze-arch/tailwind-config/design-token';
|
||||
|
||||
const tokenConfig = designTokenToTailwindConfig(yourDesignTokens);
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/**/*.{js,ts,jsx,tsx}',
|
||||
...getPackagesContents(), // Auto-discover package contents
|
||||
],
|
||||
theme: {
|
||||
extend: tokenConfig,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Main Configuration
|
||||
|
||||
The default export provides a complete Tailwind configuration with:
|
||||
|
||||
#### Colors
|
||||
|
||||
```javascript
|
||||
// Brand colors
|
||||
'text-brand-5' // Primary brand color
|
||||
'bg-brand-1' // Light brand background
|
||||
'border-brand-3' // Brand border
|
||||
|
||||
// Semantic colors
|
||||
'text-foreground-3' // Primary text
|
||||
'text-foreground-2' // Secondary text
|
||||
'bg-background-1' // Primary background
|
||||
'bg-background-0' // Secondary background
|
||||
|
||||
// Functional colors
|
||||
'text-red-5' // Error/danger
|
||||
'text-yellow-5' // Warning
|
||||
'text-green-5' // Success
|
||||
```
|
||||
|
||||
#### Spacing & Sizing
|
||||
|
||||
```javascript
|
||||
// Semantic spacing
|
||||
'p-normal' // 32px padding
|
||||
'm-small' // 20px margin
|
||||
'gap-mini' // 16px gap
|
||||
|
||||
// Precise spacing
|
||||
'w-320px' // 320px width
|
||||
'h-240px' // 240px height
|
||||
'p-24px' // 24px padding
|
||||
```
|
||||
|
||||
#### Typography
|
||||
|
||||
```javascript
|
||||
// Font sizes
|
||||
'text-mini' // 10px
|
||||
'text-base' // 12px
|
||||
'text-lg' // 14px
|
||||
'text-xl' // 15px
|
||||
'text-xxl' // 16px
|
||||
'text-24px' // 24px
|
||||
```
|
||||
|
||||
### Coze Plugin
|
||||
|
||||
The Coze plugin adds semantic utility classes and CSS variables:
|
||||
|
||||
```javascript
|
||||
// Semantic foreground classes
|
||||
'coz-fg-primary' // Primary text color
|
||||
'coz-fg-secondary' // Secondary text color
|
||||
'coz-fg-hglt' // Highlight text color
|
||||
|
||||
// Semantic background classes
|
||||
'coz-bg-primary' // Primary background
|
||||
'coz-bg-secondary' // Secondary background
|
||||
'coz-mg-hglt' // Highlight background
|
||||
|
||||
// Component-specific classes
|
||||
'coz-btn-rounded-normal' // Button border radius
|
||||
'coz-input-height-large' // Input height
|
||||
'coz-shadow-large' // Large shadow
|
||||
```
|
||||
|
||||
### Design Token Functions
|
||||
|
||||
#### `designTokenToTailwindConfig(tokenJson)`
|
||||
|
||||
Converts design tokens to Tailwind configuration:
|
||||
|
||||
```javascript
|
||||
const tokenConfig = designTokenToTailwindConfig({
|
||||
palette: {
|
||||
light: { 'primary-500': '#3b82f6' },
|
||||
dark: { 'primary-500': '#60a5fa' }
|
||||
},
|
||||
tokens: {
|
||||
color: {
|
||||
light: { 'primary-color': 'var(primary-500)' },
|
||||
dark: { 'primary-color': 'var(primary-500)' }
|
||||
},
|
||||
spacing: {
|
||||
'spacing-sm': '8px',
|
||||
'spacing-md': '16px'
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### `getPackagesContents(subPath?)`
|
||||
|
||||
Auto-discovers package source files for content configuration:
|
||||
|
||||
```javascript
|
||||
const contents = getPackagesContents();
|
||||
// Returns: [
|
||||
// '/path/to/package1/src/**/*.{ts,tsx}',
|
||||
// '/path/to/package2/src/**/*.{ts,tsx}',
|
||||
// ...
|
||||
// ]
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
### Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── index.js # Main Tailwind configuration
|
||||
├── coze.js # Coze plugin with semantic utilities
|
||||
├── design-token.ts # Design token conversion utilities
|
||||
├── light.js # Light theme CSS variables
|
||||
└── dark.js # Dark theme CSS variables
|
||||
```
|
||||
|
||||
### Theme System
|
||||
|
||||
The package uses CSS variables for theming:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--coze-brand-5: 81, 71, 255;
|
||||
--coze-fg-3: 15, 21, 40;
|
||||
--coze-bg-1: 247, 247, 252;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--coze-brand-5: 166, 166, 255;
|
||||
--coze-fg-3: 255, 255, 255;
|
||||
--coze-bg-1: 24, 28, 43;
|
||||
}
|
||||
```
|
||||
|
||||
Colors are defined as RGB values to support alpha transparency:
|
||||
|
||||
```css
|
||||
.text-brand-5 {
|
||||
color: rgba(var(--coze-brand-5), 1);
|
||||
}
|
||||
|
||||
.bg-brand-1 {
|
||||
background-color: rgba(var(--coze-brand-1), var(--coze-brand-1-alpha));
|
||||
}
|
||||
```
|
||||
|
||||
### Adding New Colors
|
||||
|
||||
1. Add the RGB values to `light.js` and `dark.js`
|
||||
2. Add alpha values for transparency support
|
||||
3. Update the main configuration in `index.js`
|
||||
4. Add semantic classes to `coze.js` if needed
|
||||
|
||||
### Testing
|
||||
|
||||
```bash
|
||||
# Run linting
|
||||
pnpm lint
|
||||
|
||||
# Build (no-op for this package)
|
||||
pnpm build
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
### Runtime Dependencies
|
||||
|
||||
- **tailwindcss** (~3.3.3) - Core Tailwind CSS framework
|
||||
- **@tailwindcss/forms** (^0.5.7) - Form styling plugin
|
||||
- **@tailwindcss/nesting** (latest) - CSS nesting support
|
||||
- **postcss** (^8.4.32) - CSS transformation tool
|
||||
- **postcss-loader** (^7.3.3) - Webpack PostCSS loader
|
||||
- **autoprefixer** (^10.4.16) - CSS vendor prefixing
|
||||
|
||||
### Development Dependencies
|
||||
|
||||
- **@coze-arch/eslint-config** (workspace:*) - Shared ESLint configuration
|
||||
- **@coze-arch/ts-config** (workspace:*) - Shared TypeScript configuration
|
||||
- **@types/node** (^18) - Node.js type definitions
|
||||
|
||||
## License
|
||||
|
||||
This package is part of the Coze architecture and follows the project's licensing terms.
|
||||
8
frontend/config/tailwind-config/config/rush-project.json
Normal file
8
frontend/config/tailwind-config/config/rush-project.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"operationSettings": [
|
||||
{
|
||||
"operationName": "ts-check",
|
||||
"outputFolderNames": ["dist"]
|
||||
}
|
||||
]
|
||||
}
|
||||
7
frontend/config/tailwind-config/eslint.config.js
Normal file
7
frontend/config/tailwind-config/eslint.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
const { defineConfig } = require('@coze-arch/eslint-config');
|
||||
|
||||
module.exports = defineConfig({
|
||||
preset: 'node',
|
||||
packageRoot: __dirname,
|
||||
rules: {},
|
||||
});
|
||||
35
frontend/config/tailwind-config/package.json
Normal file
35
frontend/config/tailwind-config/package.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "@coze-arch/tailwind-config",
|
||||
"version": "0.0.1",
|
||||
"author": "huangjian@bytedance.com",
|
||||
"maintainers": [],
|
||||
"exports": {
|
||||
".": "./src/index.js",
|
||||
"./coze": "./src/coze.js",
|
||||
"./design-token": "./src/design-token.ts"
|
||||
},
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"build": "exit",
|
||||
"dev": "npm run build -- -w",
|
||||
"lint": "eslint ./ --cache --quiet",
|
||||
"test": "exit",
|
||||
"test:cov": "exit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@coze-arch/monorepo-kits": "workspace:*",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"@tailwindcss/nesting": "latest",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"fast-glob": "^3.2.11",
|
||||
"postcss": "^8.4.32",
|
||||
"postcss-loader": "^7.3.3",
|
||||
"tailwindcss": "~3.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@coze-arch/eslint-config": "workspace:*",
|
||||
"@coze-arch/ts-config": "workspace:*",
|
||||
"@types/node": "^18"
|
||||
}
|
||||
}
|
||||
|
||||
258
frontend/config/tailwind-config/src/coze.js
Normal file
258
frontend/config/tailwind-config/src/coze.js
Normal file
@@ -0,0 +1,258 @@
|
||||
// tailwindcss-plugin.js
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
// theme colors
|
||||
const lightModeVariables = require('./light');
|
||||
const darkModeVariables = require('./dark');
|
||||
|
||||
// 用于生成 CSS 变量的帮助函数
|
||||
function generateCssVariables(variables, theme) {
|
||||
return Object.entries(variables).reduce((acc, [key, value]) => {
|
||||
acc[`--${key}`] = theme ? theme(value) : value;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
// 样式语义化
|
||||
function generateSemanticVariables(semantics, theme, property) {
|
||||
return Object.entries(semantics).map(([key, value]) => ({
|
||||
[`.${key}`]: {
|
||||
[property]: theme(value),
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
const semanticForeground = {
|
||||
/* Theme */
|
||||
'coz-fg-hglt-plus': 'colors.foreground.5',
|
||||
'coz-fg-hglt-plus-dim': 'colors.foreground.5',
|
||||
'coz-fg-hglt': 'colors.brand.5',
|
||||
'coz-fg-hglt-dim': 'colors.brand.3',
|
||||
'coz-fg-plus': 'colors.foreground.4',
|
||||
'coz-fg': 'colors.foreground.3',
|
||||
'coz-fg-primary': 'colors.foreground.3',
|
||||
'coz-fg-secondary': 'colors.foreground.2',
|
||||
'coz-fg-dim': 'colors.foreground.1',
|
||||
'coz-fg-white': 'colors.foreground.7',
|
||||
'coz-fg-white-dim': 'colors.foreground.white',
|
||||
'coz-fg-hglt-ai': 'colors.purple.5',
|
||||
'coz-fg-hglt-ai-dim': 'colors.purple.3',
|
||||
/* Functional Color */
|
||||
'coz-fg-hglt-red': 'colors.red.5',
|
||||
'coz-fg-hglt-red-dim': 'colors.red.3',
|
||||
'coz-fg-hglt-yellow': 'colors.yellow.5',
|
||||
'coz-fg-hglt-yellow-dim': 'colors.yellow.3',
|
||||
'coz-fg-hglt-green': 'colors.green.5',
|
||||
'coz-fg-hglt-green-dim': 'colors.green.3',
|
||||
/* Chart, Tag Only */
|
||||
'coz-fg-color-orange': 'colors.yellow.5',
|
||||
'coz-fg-color-orange-dim': 'colors.yellow.3',
|
||||
'coz-fg-color-emerald': 'colors.green.5',
|
||||
'coz-fg-color-emerald-dim': 'colors.green.3',
|
||||
'coz-fg-color-cyan': 'colors.cyan.50',
|
||||
'coz-fg-color-cyan-dim': 'colors.cyan.30',
|
||||
'coz-fg-color-blue': 'colors.blue.50',
|
||||
'coz-fg-color-blue-dim': 'colors.blue.30',
|
||||
'coz-fg-color-purple': 'colors.purple.50',
|
||||
'coz-fg-color-purple-dim': 'colors.purple.30',
|
||||
'coz-fg-color-magenta': 'colors.magenta.50',
|
||||
'coz-fg-color-magenta-dim': 'colors.magenta.3',
|
||||
'coz-fg-color-yellow': 'colors.yellow.50',
|
||||
'coz-fg-color-yellow-dim': 'colors.yellow.30',
|
||||
/* Code Only */
|
||||
'coz-fg-hglt-orange': 'colors.orange.5',
|
||||
'coz-fg-hglt-orange-dim': 'colors.orange.3',
|
||||
'coz-fg-hglt-emerald': 'colors.emerald.5',
|
||||
'coz-fg-hglt-emerald-dim': 'colors.emerald.3',
|
||||
'coz-fg-hglt-cyan': 'colors.cyan.5',
|
||||
'coz-fg-hglt-cyan-dim': 'colors.cyan.3',
|
||||
'coz-fg-hglt-blue': 'colors.blue.5',
|
||||
'coz-fg-hglt-blue-dim': 'colors.blue.3',
|
||||
'coz-fg-hglt-purple': 'colors.purple.5',
|
||||
'coz-fg-hglt-purple-dim': 'colors.purple.3',
|
||||
'coz-fg-hglt-magenta': 'colors.magenta.5',
|
||||
'coz-fg-hglt-magenta-dim': 'colors.magenta.3',
|
||||
/* branding Only */
|
||||
'coz-fg-color-brand': 'colors.brand.50',
|
||||
'coz-fg-color-brand-dim': 'colors.brand.30',
|
||||
'coz-fg-color-alternative': 'colors.alternative.50',
|
||||
'coz-fg-color-alternative-dim': 'colors.alternative.30',
|
||||
};
|
||||
|
||||
const semanticMiddleground = {
|
||||
/* Theme */
|
||||
'coz-mg-hglt-plus-pressed': 'colors.brand.7',
|
||||
'coz-mg-hglt-plus-hovered': 'colors.brand.6',
|
||||
'coz-mg-hglt-plus': 'colors.brand.5',
|
||||
'coz-mg-hglt-plus-dim': 'colors.brand.3',
|
||||
'coz-mg-hglt-secondary-pressed': 'colors.brand.2',
|
||||
'coz-mg-hglt-secondary-hovered': 'colors.brand.1',
|
||||
'coz-mg-hglt-secondary': 'colors.brand.0',
|
||||
'coz-mg-hglt-secondary-red': 'colors.red.0',
|
||||
'coz-mg-hglt-secondary-yellow': 'colors.yellow.0',
|
||||
'coz-mg-hglt-secondary-green': 'colors.green.0',
|
||||
'coz-mg-plus-pressed': 'colors.background.8',
|
||||
'coz-mg-plus-hovered': 'colors.background.7',
|
||||
'coz-mg-plus': 'colors.background.6',
|
||||
'coz-mg-hglt-pressed': 'colors.brand.3',
|
||||
'coz-mg-hglt-hovered': 'colors.brand.2',
|
||||
'coz-mg-hglt-plus-ai-pressed': 'colors.purple.7',
|
||||
'coz-mg-hglt-plus-ai-hovered': 'colors.purple.6',
|
||||
'coz-mg-hglt-plus-ai': 'colors.purple.5',
|
||||
'coz-mg-hglt-plus-ai-dim': 'colors.purple.3',
|
||||
'coz-mg-hglt': 'colors.brand.1',
|
||||
'coz-mg-hglt-ai-pressed': 'colors.purple.3',
|
||||
'coz-mg-hglt-ai-hovered': 'colors.purple.2',
|
||||
'coz-mg-hglt-ai': 'colors.purple.1',
|
||||
/* Functional Color */
|
||||
'coz-mg-hglt-plus-red-pressed': 'colors.red.7',
|
||||
'coz-mg-hglt-plus-red-hovered': 'colors.red.6',
|
||||
'coz-mg-hglt-plus-red': 'colors.red.5',
|
||||
'coz-mg-hglt-plus-red-dim': 'colors.red.3',
|
||||
'coz-mg-hglt-plus-yellow-pressed': 'colors.yellow.7',
|
||||
'coz-mg-hglt-plus-yellow-hovered': 'colors.yellow.6',
|
||||
'coz-mg-hglt-plus-yellow': 'colors.yellow.5',
|
||||
'coz-mg-hglt-plus-yellow-dim': 'colors.yellow.3',
|
||||
'coz-mg-hglt-plus-green-pressed': 'colors.green.7',
|
||||
'coz-mg-hglt-plus-green-hovered': 'colors.green.6',
|
||||
'coz-mg-hglt-plus-green': 'colors.green.5',
|
||||
'coz-mg-hglt-plus-green-dim': 'colors.green.3',
|
||||
'coz-mg-hglt-red-pressed': 'colors.red.3',
|
||||
'coz-mg-hglt-red-hovered': 'colors.red.2',
|
||||
'coz-mg-hglt-red': 'colors.red.1',
|
||||
'coz-mg-hglt-yellow-pressed': 'colors.yellow.3',
|
||||
'coz-mg-hglt-yellow-hovered': 'colors.yellow.2',
|
||||
'coz-mg-hglt-yellow': 'colors.yellow.1',
|
||||
'coz-mg-hglt-green-pressed': 'colors.green.3',
|
||||
'coz-mg-hglt-green-hovered': 'colors.green.2',
|
||||
'coz-mg-hglt-green': 'colors.green.1',
|
||||
/* Card, Tag, Avatar Only */
|
||||
'coz-mg-color-plus-orange': 'colors.yellow.5',
|
||||
'coz-mg-color-plus-emerald': 'colors.green.5',
|
||||
'coz-mg-color-plus-cyan': 'colors.cyan.50',
|
||||
'coz-mg-color-plus-blue': 'colors.blue.50',
|
||||
'coz-mg-color-plus-purple': 'colors.purple.50',
|
||||
'coz-mg-color-plus-magenta': 'colors.magenta.50',
|
||||
'coz-mg-color-plus-yellow': 'colors.yellow.50',
|
||||
'coz-mg-color-orange-pressed': 'colors.yellow.3',
|
||||
'coz-mg-color-orange-hovered': 'colors.yellow.2',
|
||||
'coz-mg-color-orange': 'colors.yellow.1',
|
||||
'coz-mg-color-emerald-pressed': 'colors.green.3',
|
||||
'coz-mg-color-emerald-hovered': 'colors.green.2',
|
||||
'coz-mg-color-emerald': 'colors.green.1',
|
||||
'coz-mg-color-cyan-pressed': 'colors.cyan.30',
|
||||
'coz-mg-color-cyan-hovered': 'colors.cyan.20',
|
||||
'coz-mg-color-cyan': 'colors.cyan.10',
|
||||
'coz-mg-color-blue-pressed': 'colors.blue.30',
|
||||
'coz-mg-color-blue-hovered': 'colors.blue.20',
|
||||
'coz-mg-color-blue': 'colors.blue.10',
|
||||
'coz-mg-color-purple-pressed': 'colors.purple.30',
|
||||
'coz-mg-color-purple-hovered': 'colors.purple.20',
|
||||
'coz-mg-color-purple': 'colors.purple.10',
|
||||
'coz-mg-color-magenta-pressed': 'colors.magenta.30',
|
||||
'coz-mg-color-magenta-hovered': 'colors.magenta.20',
|
||||
'coz-mg-color-magenta': 'colors.magenta.10',
|
||||
'coz-mg-primary-pressed': 'colors.background.7',
|
||||
'coz-mg-primary-hovered': 'colors.background.6',
|
||||
'coz-mg-primary': 'colors.background.5',
|
||||
'coz-mg-secondary-pressed': 'colors.background.6',
|
||||
'coz-mg-secondary-hovered': 'colors.background.5',
|
||||
'coz-mg-secondary': 'colors.background.4',
|
||||
'coz-mg': 'colors.background.4',
|
||||
'coz-mg-mask': 'colors.mask.5',
|
||||
'coz-mg-table-fixed-hovered': 'colors.background.0',
|
||||
'coz-mg-card-pressed': 'colors.background.3',
|
||||
'coz-mg-card-hovered': 'colors.background.3',
|
||||
'coz-mg-card': 'colors.background.3',
|
||||
/** brand */
|
||||
'coz-mg-color-plus-brand': 'colors.brand.50',
|
||||
};
|
||||
|
||||
const semanticBackground = {
|
||||
'coz-bg-max': 'colors.background.3',
|
||||
'coz-bg-plus': 'colors.background.2',
|
||||
'coz-bg-primary': 'colors.background.1',
|
||||
'coz-bg': 'colors.background.1',
|
||||
'coz-bg-secondary': 'colors.background.0',
|
||||
};
|
||||
|
||||
const semanticShadow = {
|
||||
'coz-shadow': 'boxShadow.normal',
|
||||
'coz-shadow-large': 'boxShadow.large',
|
||||
'coz-shadow-default': 'boxShadow.normal',
|
||||
'coz-shadow-small': 'boxShadow.small',
|
||||
};
|
||||
|
||||
// Add button rounded definitions
|
||||
const buttonRounded = {
|
||||
'coz-btn-rounded-large': 'btnBorderRadius.large',
|
||||
'coz-btn-rounded-normal': 'btnBorderRadius.normal',
|
||||
'coz-btn-rounded-small': 'btnBorderRadius.small',
|
||||
'coz-btn-rounded-mini': 'btnBorderRadius.mini',
|
||||
};
|
||||
|
||||
const inputRounded = {
|
||||
'coz-input-rounded-large': 'inputBorderRadius.large',
|
||||
'coz-input-rounded-normal': 'inputBorderRadius.normal',
|
||||
'coz-input-rounded-small': 'inputBorderRadius.small',
|
||||
};
|
||||
|
||||
const inputHeight = {
|
||||
'coz-input-height-large': 'inputHeight.large',
|
||||
'coz-input-height-normal': 'inputHeight.normal',
|
||||
'coz-input-height-small': 'inputHeight.small',
|
||||
};
|
||||
|
||||
const semanticStroke = {
|
||||
'coz-stroke-hglt': 'colors.brand.5',
|
||||
'coz-stroke-plus': 'colors.stroke.6',
|
||||
'coz-stroke-primary': 'colors.stroke.5',
|
||||
'coz-stroke-hglt-red': 'colors.red.5',
|
||||
'coz-stroke-hglt-yellow': 'colors.yellow.5',
|
||||
'coz-stroke-hglt-green': 'colors.green.5',
|
||||
'coz-stroke-color-orange': 'colors.yellow.5',
|
||||
'coz-stroke-color-emerald': 'colors.green.5',
|
||||
'coz-stroke-color-cyan': 'colors.cyan.50',
|
||||
'coz-stroke-color-blue': 'colors.blue.50',
|
||||
'coz-stroke-color-purple': 'colors.purple.50',
|
||||
'coz-stroke-color-magenta': 'colors.magenta.50',
|
||||
'coz-stroke-color-yellow': 'colors.yellow.50',
|
||||
'coz-stroke-color-brand': 'colors.brand.50',
|
||||
'coz-stroke-opaque': 'colors.stroke.opaque',
|
||||
'coz-stroke-max': 'colors.stroke.max',
|
||||
};
|
||||
|
||||
module.exports = plugin(function ({ addBase, addUtilities, theme }) {
|
||||
addBase({
|
||||
':root': generateCssVariables(lightModeVariables),
|
||||
'.dark': generateCssVariables(darkModeVariables),
|
||||
});
|
||||
|
||||
addBase({
|
||||
':root': {
|
||||
...generateCssVariables(semanticForeground, theme),
|
||||
...generateCssVariables(semanticMiddleground, theme),
|
||||
...generateCssVariables(semanticBackground, theme),
|
||||
...generateCssVariables(semanticStroke, theme),
|
||||
...generateCssVariables(semanticShadow, theme),
|
||||
...generateCssVariables(buttonRounded, theme),
|
||||
...generateCssVariables(inputRounded, theme),
|
||||
...generateCssVariables(inputHeight, theme),
|
||||
},
|
||||
});
|
||||
|
||||
addUtilities([
|
||||
...generateSemanticVariables(semanticForeground, theme, 'color'),
|
||||
...generateSemanticVariables(
|
||||
semanticMiddleground,
|
||||
theme,
|
||||
'background-color',
|
||||
),
|
||||
...generateSemanticVariables(semanticBackground, theme, 'background-color'),
|
||||
...generateSemanticVariables(semanticStroke, theme, 'border-color'),
|
||||
...generateSemanticVariables(semanticShadow, theme, 'box-shadow'),
|
||||
...generateSemanticVariables(buttonRounded, theme, 'border-radius'),
|
||||
...generateSemanticVariables(inputRounded, theme, 'border-radius'),
|
||||
...generateSemanticVariables(inputHeight, theme, 'height'),
|
||||
]);
|
||||
});
|
||||
180
frontend/config/tailwind-config/src/dark.js
Normal file
180
frontend/config/tailwind-config/src/dark.js
Normal file
@@ -0,0 +1,180 @@
|
||||
// 暗色模式的 CSS 变量
|
||||
const darkModeVariables = {
|
||||
background: '2, 8, 23',
|
||||
foreground: '249, 249, 249',
|
||||
icon: '221, 0%, 90%',
|
||||
'icon-dark': '221, 0%, 10%',
|
||||
'icon-gray': '221, 0%, 100%',
|
||||
'coze-fg-revert': '0, 0, 0',
|
||||
'coze-fg-white': '255, 255, 255',
|
||||
'coze-fg-7': '255, 255, 255',
|
||||
'coze-fg-6': '0, 0, 0',
|
||||
'coze-fg-5': '0, 0, 0',
|
||||
'coze-fg-4': '255, 255, 255',
|
||||
'coze-fg-3': '255, 255, 255',
|
||||
'coze-fg-2': '255, 255, 255',
|
||||
'coze-fg-1': '255, 255, 255',
|
||||
'coze-bg-9': '255, 255, 255',
|
||||
'coze-bg-8': '237, 240, 255',
|
||||
'coze-bg-7': '237, 240, 255',
|
||||
'coze-bg-6': '237, 240, 255',
|
||||
'coze-bg-5': '241, 243, 255',
|
||||
'coze-bg-4': '241, 243, 255',
|
||||
'coze-bg-3': '39, 43, 58',
|
||||
'coze-bg-2': '28, 32, 48',
|
||||
'coze-bg-1': '24, 28, 43',
|
||||
'coze-bg-0': '20 ,24, 37',
|
||||
'coze-stroke-5': '153, 182, 255',
|
||||
'coze-stroke-6': '153, 182, 255',
|
||||
'coze-stroke-7': '233, 237, 255',
|
||||
'coze-stroke-opaque': '41, 45, 60',
|
||||
'coze-mask-5': '0, 0, 0',
|
||||
'coze-shadow-0': '0, 0, 0',
|
||||
'coze-brand-50': '85, 91, 255',
|
||||
'coze-brand-30': '66, 88, 255',
|
||||
'coze-brand-7': '194, 194, 255',
|
||||
'coze-brand-6': '184, 184, 255',
|
||||
'coze-brand-5': '166, 166, 255',
|
||||
'coze-brand-3': '94, 94, 255',
|
||||
'coze-brand-2': '89, 89, 255',
|
||||
'coze-brand-1': '76, 76, 255',
|
||||
'coze-brand-0': '76, 76, 255',
|
||||
'coze-red-7': '255, 97, 110',
|
||||
'coze-red-6': '255, 82, 96',
|
||||
'coze-red-5': '255, 38, 56',
|
||||
'coze-red-3': '245, 37, 54',
|
||||
'coze-red-2': '245, 37, 54',
|
||||
'coze-red-1': '242, 36, 53',
|
||||
'coze-yellow-50': '255, 191, 0',
|
||||
'coze-yellow-30': '156, 117, 0',
|
||||
'coze-yellow-7': '255, 161, 84',
|
||||
'coze-yellow-6': '255, 148, 61',
|
||||
'coze-yellow-5': '255, 122, 13',
|
||||
'coze-yellow-3': '194, 88, 2',
|
||||
'coze-yellow-2': '191, 87, 2',
|
||||
'coze-yellow-1': '178, 80, 0',
|
||||
'coze-green-7': '0, 219, 69',
|
||||
'coze-green-6': '0, 209, 66',
|
||||
'coze-green-5': '0, 191, 64',
|
||||
'coze-green-3': '0, 133, 53',
|
||||
'coze-green-2': '0, 128, 51',
|
||||
'coze-green-1': '0, 122, 41',
|
||||
'coze-orange-5': '251, 173, 115',
|
||||
'coze-orange-3': '199, 93, 18',
|
||||
'coze-emerald-5': '48, 242, 161',
|
||||
'coze-emerald-3': '6, 140, 102',
|
||||
'coze-emerald-50': '0, 191, 128',
|
||||
'coze-emerald-30': '0, 133, 88',
|
||||
'coze-emerald-20': '0, 128, 85',
|
||||
'coze-emerald-10': '0, 115, 76',
|
||||
'coze-cyan-5': '57, 215, 229',
|
||||
'coze-cyan-3': '8, 130, 163',
|
||||
'coze-cyan-50': '0, 170, 204',
|
||||
'coze-cyan-30': '0, 125, 150',
|
||||
'coze-cyan-20': '0, 121, 145',
|
||||
'coze-cyan-10': '0, 110, 133',
|
||||
'coze-blue-5': '120, 176, 255',
|
||||
'coze-blue-3': '60, 111, 229',
|
||||
'coze-blue-50': '64, 128, 255',
|
||||
'coze-blue-30': '23, 100, 255',
|
||||
'coze-blue-20': '18, 97, 255',
|
||||
'coze-blue-10': '8, 91, 255',
|
||||
'coze-purple-7': '233, 189, 255',
|
||||
'coze-purple-6': '229, 176, 255',
|
||||
'coze-purple-5': '221, 153, 255',
|
||||
'coze-purple-3': '189, 56, 255',
|
||||
'coze-purple-2': '187, 51, 255',
|
||||
'coze-purple-1': '181, 33, 255',
|
||||
'coze-purple-50': '202, 97, 255',
|
||||
'coze-purple-30': '185, 46, 255',
|
||||
'coze-purple-20': '184, 41, 255',
|
||||
'coze-purple-10': '180, 31, 255',
|
||||
'coze-magenta-5': '255, 148, 210',
|
||||
'coze-magenta-3': '250, 30, 188',
|
||||
'coze-magenta-50': '255, 77, 195',
|
||||
'coze-magenta-30': '255, 15, 175',
|
||||
'coze-magenta-20': '255, 10, 173',
|
||||
'coze-magenta-10': '255, 0, 169',
|
||||
'coze-alternative-50': '202, 242, 0',
|
||||
'coze-alternative-30': '111, 133, 0',
|
||||
|
||||
/* alpha */
|
||||
'coze-fg-1-alpha': '0.22',
|
||||
'coze-fg-2-alpha': '0.39',
|
||||
'coze-fg-3-alpha': '0.79',
|
||||
'coze-fg-4-alpha': '1',
|
||||
'coze-fg-5-alpha': '1',
|
||||
'coze-fg-6-alpha': '0.22',
|
||||
'coze-fg-7-alpha': '1',
|
||||
'coze-fg-revert-alpha': '1',
|
||||
'coze-fg-white-alpha': '0.22',
|
||||
'coze-bg-0-alpha': '1',
|
||||
'coze-bg-1-alpha': '1',
|
||||
'coze-bg-2-alpha': '1',
|
||||
'coze-bg-3-alpha': '1',
|
||||
'coze-bg-4-alpha': '0.02',
|
||||
'coze-bg-5-alpha': '0.05',
|
||||
'coze-bg-6-alpha': '0.08',
|
||||
'coze-bg-7-alpha': '0.11',
|
||||
'coze-bg-8-alpha': '0.14',
|
||||
'coze-bg-9-alpha': '0.17',
|
||||
'coze-stroke-5-alpha': '0.12',
|
||||
'coze-stroke-6-alpha': '0.17',
|
||||
'coze-stroke-7-alpha': '0.21',
|
||||
'coze-brand-0-alpha': '0.2',
|
||||
'coze-brand-1-alpha': '0.2',
|
||||
'coze-brand-2-alpha': '0.32',
|
||||
'coze-brand-3-alpha': '0.37',
|
||||
'coze-brand-30-alpha': '0.41',
|
||||
'coze-brand-50-alpha': '1',
|
||||
'coze-red-1-alpha': '0.20',
|
||||
'coze-red-2-alpha': '0.33',
|
||||
'coze-red-3-alpha': '0.39',
|
||||
'coze-yellow-50-alpha': '1',
|
||||
'coze-yellow-30-alpha': '0.36',
|
||||
'coze-yellow-1-alpha': '0.20',
|
||||
'coze-yellow-2-alpha': '0.32',
|
||||
'coze-yellow-3-alpha': '0.37',
|
||||
'coze-green-1-alpha': '0.20',
|
||||
'coze-green-2-alpha': '0.34',
|
||||
'coze-green-3-alpha': '0.39',
|
||||
'coze-orange-3-alpha': '0.36',
|
||||
'coze-orange-5-alpha': '0.36',
|
||||
'coze-emerald-5-alpha': '1',
|
||||
'coze-emerald-3-alpha': '0.35',
|
||||
'coze-emerald-50-alpha': '1',
|
||||
'coze-emerald-30-alpha': '0.38',
|
||||
'coze-emerald-20-alpha': '0.33',
|
||||
'coze-emerald-10-alpha': '0.2',
|
||||
'coze-cyan-5-alpha': '1',
|
||||
'coze-cyan-3-alpha': '0.36',
|
||||
'coze-cyan-50-alpha': '1',
|
||||
'coze-cyan-30-alpha': '0.39',
|
||||
'coze-cyan-20-alpha': '0.33',
|
||||
'coze-cyan-10-alpha': '0.20',
|
||||
'coze-blue-5-alpha': '1',
|
||||
'coze-blue-3-alpha': '0.37',
|
||||
'coze-blue-50-alpha': '1',
|
||||
'coze-blue-30-alpha': '0.4',
|
||||
'coze-blue-20-alpha': '0.34',
|
||||
'coze-blue-10-alpha': '0.2',
|
||||
'coze-purple-7-alpha': '1',
|
||||
'coze-purple-6-alpha': '1',
|
||||
'coze-purple-5-alpha': '1',
|
||||
'coze-purple-3-alpha': '0.36',
|
||||
'coze-purple-2-alpha': '0.31',
|
||||
'coze-purple-1-alpha': '0.2',
|
||||
'coze-purple-50-alpha': '1',
|
||||
'coze-purple-30-alpha': '0.38',
|
||||
'coze-purple-20-alpha': '0.33',
|
||||
'coze-purple-10-alpha': '0.2',
|
||||
'coze-magenta-5-alpha': '1',
|
||||
'coze-magenta-3-alpha': '0.35',
|
||||
'coze-magenta-50-alpha': '1',
|
||||
'coze-magenta-30-alpha': '0.36',
|
||||
'coze-magenta-20-alpha': '0.31',
|
||||
'coze-magenta-10-alpha': '0.2',
|
||||
'coze-alternative-30-alpha': '0.34',
|
||||
};
|
||||
|
||||
module.exports = darkModeVariables;
|
||||
108
frontend/config/tailwind-config/src/design-token.ts
Normal file
108
frontend/config/tailwind-config/src/design-token.ts
Normal file
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
* Copyright 2025 coze-dev Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
// 消费者和生产者公共的 tailwind 配置和工具函数
|
||||
|
||||
export function designTokenToTailwindConfig(
|
||||
tokenJson: Record<string, unknown>,
|
||||
) {
|
||||
const res = {
|
||||
colors: {},
|
||||
spacing: {},
|
||||
borderRadius: {},
|
||||
};
|
||||
const palette = tokenJson.palette ?? {};
|
||||
const tokens = tokenJson.tokens ?? {};
|
||||
for (const [k, v] of Object.entries(tokens)) {
|
||||
switch (k) {
|
||||
case 'color': {
|
||||
res.colors = colorTransformer(
|
||||
v,
|
||||
genColorValueFormatter(
|
||||
palette as Record<string, Record<string, string>>,
|
||||
),
|
||||
);
|
||||
break;
|
||||
}
|
||||
case 'spacing': {
|
||||
res.spacing = spacingTransformer(v);
|
||||
break;
|
||||
}
|
||||
case 'border-radius': {
|
||||
res.borderRadius = borderRadiusTransformer(v);
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function colorTransformer(
|
||||
colorObj: Record<string, Record<string, string>>,
|
||||
valueFormatter: (theme: string, colorValue: string) => string,
|
||||
) {
|
||||
const res = {};
|
||||
for (const theme of Object.keys(colorObj)) {
|
||||
const valueObj = colorObj[theme];
|
||||
for (const [colorKey, colorValue] of Object.entries(valueObj)) {
|
||||
const newColorKey = `${colorKey.split('-color-')?.[1] ?? ''}-${theme}`;
|
||||
res[newColorKey] = valueFormatter(theme, colorValue);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function genColorValueFormatter(
|
||||
palette: Record<string, Record<string, string>>,
|
||||
) {
|
||||
return (theme: string, colorValue: string) => {
|
||||
const re = /var\((.+?)\)/;
|
||||
const match = colorValue.match(re);
|
||||
const whole = match?.[0] ?? '';
|
||||
if (!whole) {
|
||||
return colorValue;
|
||||
}
|
||||
const key = match?.[1] ?? '';
|
||||
const valueObj = palette[theme];
|
||||
const v = valueObj[key];
|
||||
return colorValue.replace(whole, v);
|
||||
};
|
||||
}
|
||||
|
||||
function spacingTransformer(spacingObj: Record<string, string>) {
|
||||
const res = {};
|
||||
for (const [k, v] of Object.entries(spacingObj)) {
|
||||
const newKey = `${k.replace('$spacing-', '')}`;
|
||||
res[newKey] = v;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
function borderRadiusTransformer(borderRadiusObj: Record<string, string>) {
|
||||
const res = {};
|
||||
for (const [k, v] of Object.entries(borderRadiusObj)) {
|
||||
const newKey = `${k.replace('--semi-border-radius-', '')}`;
|
||||
res[newKey] = v;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// 获取其他packages，并且拼接上 /src/**/*.{ts,tsx}
|
||||
|
||||
export { getTailwindContents } from './tailwind-contents';
|
||||
387
frontend/config/tailwind-config/src/index.js
Normal file
387
frontend/config/tailwind-config/src/index.js
Normal file
@@ -0,0 +1,387 @@
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
prefix: '',
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
foreground: {
|
||||
DEFAULT: 'rgba(var(--foreground), 1)',
|
||||
revert: 'rgba(var(--coze-fg-revert), var(--coze-fg-revert-alpha))',
|
||||
white: 'rgba(var(--coze-fg-white), var(--coze-fg-white-alpha))',
|
||||
7: 'rgba(var(--coze-fg-7), 1)',
|
||||
6: 'rgba(var(--coze-fg-6), 1)',
|
||||
5: 'rgba(var(--coze-fg-5), var(--coze-fg-5-alpha))',
|
||||
4: 'rgba(var(--coze-fg-4), var(--coze-fg-4-alpha))',
|
||||
3: 'rgba(var(--coze-fg-3), var(--coze-fg-3-alpha))',
|
||||
2: 'rgba(var(--coze-fg-2), var(--coze-fg-2-alpha))',
|
||||
1: 'rgba(var(--coze-fg-1), var(--coze-fg-1-alpha))',
|
||||
},
|
||||
background: {
|
||||
DEFAULT: 'rgba(var(--background), 1)',
|
||||
9: 'rgba(var(--coze-bg-9), var(--coze-bg-9-alpha))',
|
||||
8: 'rgba(var(--coze-bg-8), var(--coze-bg-8-alpha))',
|
||||
7: 'rgba(var(--coze-bg-7), var(--coze-bg-7-alpha))',
|
||||
6: 'rgba(var(--coze-bg-6), var(--coze-bg-6-alpha))',
|
||||
5: 'rgba(var(--coze-bg-5), var(--coze-bg-5-alpha))',
|
||||
4: 'rgba(var(--coze-bg-4), var(--coze-bg-4-alpha))',
|
||||
3: 'rgba(var(--coze-bg-3), var(--coze-bg-3-alpha))',
|
||||
2: 'rgba(var(--coze-bg-2), var(--coze-bg-2-alpha))',
|
||||
1: 'rgba(var(--coze-bg-1), var(--coze-bg-1-alpha))',
|
||||
0: 'rgba(var(--coze-bg-0), 1)',
|
||||
},
|
||||
brand: {
|
||||
DEFAULT: 'rgba(var(--coze-brand-7), 1)',
|
||||
linear: 'rgba(var(--coze-brand-5), 0)',
|
||||
50: 'rgba(var(--coze-brand-50), var(--coze-brand-50-alpha))',
|
||||
30: 'rgba(var(--coze-brand-30), var(--coze-brand-30-alpha))',
|
||||
7: 'rgba(var(--coze-brand-7), 1)',
|
||||
6: 'rgba(var(--coze-brand-6), 1)',
|
||||
5: 'rgba(var(--coze-brand-5), 1)',
|
||||
3: 'rgba(var(--coze-brand-3), var(--coze-brand-3-alpha))',
|
||||
2: 'rgba(var(--coze-brand-2), var(--coze-brand-2-alpha))',
|
||||
1: 'rgba(var(--coze-brand-1), var(--coze-brand-1-alpha))',
|
||||
0: 'rgba(var(--coze-brand-0), var(--coze-brand-0-alpha))',
|
||||
},
|
||||
red: {
|
||||
DEFAULT: 'rgba(var(--coze-red-7), 1)',
|
||||
linear: 'rgba(var(--coze-red-5), 0)',
|
||||
7: 'rgba(var(--coze-red-7), 1)',
|
||||
6: 'rgba(var(--coze-red-6), 1)',
|
||||
5: 'rgba(var(--coze-red-5), 1)',
|
||||
3: 'rgba(var(--coze-red-3), var(--coze-red-3-alpha))',
|
||||
2: 'rgba(var(--coze-red-2), var(--coze-red-2-alpha))',
|
||||
1: 'rgba(var(--coze-red-1), var(--coze-red-1-alpha))',
|
||||
0: 'rgba(var(--coze-red-0), var(--coze-red-0-alpha))',
|
||||
},
|
||||
yellow: {
|
||||
DEFAULT: 'rgba(var(--coze-yellow-7), 1)',
|
||||
linear: 'rgba(var(--coze-yellow-5), 0)',
|
||||
50: 'rgba(var(--coze-yellow-50), var(--coze-yellow-50-alpha))',
|
||||
30: 'rgba(var(--coze-yellow-30), var(--coze-yellow-30-alpha))',
|
||||
7: 'rgba(var(--coze-yellow-7), 1)',
|
||||
6: 'rgba(var(--coze-yellow-6), 1)',
|
||||
5: 'rgba(var(--coze-yellow-5), 1)',
|
||||
3: 'rgba(var(--coze-yellow-3), var(--coze-yellow-3-alpha))',
|
||||
2: 'rgba(var(--coze-yellow-2), var(--coze-yellow-2-alpha))',
|
||||
1: 'rgba(var(--coze-yellow-1), var(--coze-yellow-1-alpha))',
|
||||
0: 'rgba(var(--coze-yellow-0), var(--coze-yellow-0-alpha))',
|
||||
},
|
||||
green: {
|
||||
DEFAULT: 'rgba(var(--coze-green-7), 1)',
|
||||
linear: 'rgba(var(--coze-green-5), 0)',
|
||||
7: 'rgba(var(--coze-green-7), 1)',
|
||||
6: 'rgba(var(--coze-green-6), 1)',
|
||||
5: 'rgba(var(--coze-green-5), 1)',
|
||||
3: 'rgba(var(--coze-green-3), var(--coze-green-3-alpha))',
|
||||
2: 'rgba(var(--coze-green-2), var(--coze-green-2-alpha))',
|
||||
1: 'rgba(var(--coze-green-1), var(--coze-green-1-alpha))',
|
||||
0: 'rgba(var(--coze-green-0), var(--coze-green-0-alpha))',
|
||||
},
|
||||
emerald: {
|
||||
DEFAULT: 'rgba(var(--coze-emerald-5), 1)',
|
||||
linear: 'rgba(var(--coze-emerald-5), 0)',
|
||||
50: 'rgba(var(--coze-emerald-50), var(--coze-emerald-50-alpha))',
|
||||
30: 'rgba(var(--coze-emerald-30), var(--coze-emerald-30-alpha))',
|
||||
20: 'rgba(var(--coze-emerald-20), 1)',
|
||||
10: 'rgba(var(--coze-emerald-10), 1)',
|
||||
5: 'rgba(var(--coze-emerald-5), 1)',
|
||||
3: 'rgba(var(--coze-emerald-3), var(--coze-emerald-3-alpha))',
|
||||
},
|
||||
orange: {
|
||||
DEFAULT: 'rgba(var(--coze-orange-5), 1)',
|
||||
linear: 'rgba(var(--coze-orange-5), 0)',
|
||||
5: 'rgba(var(--coze-orange-5), 1)',
|
||||
3: 'rgba(var(--coze-orange-3), var(--coze-orange-3-alpha))',
|
||||
1: 'rgba(var(--coze-orange-1), var(--coze-orange-1-alpha))',
|
||||
},
|
||||
alternative: {
|
||||
DEFAULT: 'rgba(var(--coze-alternative-50), 1)',
|
||||
50: 'rgba(var(--coze-alternative-50), 1)',
|
||||
30: 'rgba(var(--coze-alternative-30), var(--coze-alternative-30-alpha))',
|
||||
},
|
||||
cyan: {
|
||||
DEFAULT: 'rgba(var(--coze-cyan-5), 1)',
|
||||
linear: 'rgba(var(--coze-cyan-5), 0)',
|
||||
50: 'rgba(var(--coze-cyan-50), var(--coze-cyan-50-alpha))',
|
||||
30: 'rgba(var(--coze-cyan-30), var(--coze-cyan-30-alpha))',
|
||||
20: 'rgba(var(--coze-cyan-20), var(--coze-cyan-20-alpha))',
|
||||
10: 'rgba(var(--coze-cyan-10), var(--coze-cyan-10-alpha))',
|
||||
5: 'rgba(var(--coze-cyan-5), 1)',
|
||||
3: 'rgba(var(--coze-cyan-3), var(--coze-cyan-3-alpha))',
|
||||
},
|
||||
blue: {
|
||||
DEFAULT: 'rgba(var(--coze-blue-5), 1)',
|
||||
linear: 'rgba(var(--coze-blue-5), 0)',
|
||||
50: 'rgba(var(--coze-blue-50), var(--coze-blue-50-alpha))',
|
||||
30: 'rgba(var(--coze-blue-30), var(--coze-blue-30-alpha))',
|
||||
20: 'rgba(var(--coze-blue-20), var(--coze-blue-20-alpha))',
|
||||
10: 'rgba(var(--coze-blue-10), var(--coze-blue-10-alpha))',
|
||||
5: 'rgba(var(--coze-blue-5), var(--coze-blue-5-alpha))',
|
||||
3: 'rgba(var(--coze-blue-3), var(--coze-blue-3-alpha))',
|
||||
},
|
||||
purple: {
|
||||
DEFAULT: 'rgba(var(--coze-purple-5), 1)',
|
||||
linear: 'rgba(var(--coze-purple-5), 0)',
|
||||
50: 'rgba(var(--coze-purple-50), var(--coze-purple-50-alpha))',
|
||||
30: 'rgba(var(--coze-purple-30), var(--coze-purple-30-alpha))',
|
||||
20: 'rgba(var(--coze-purple-20), var(--coze-purple-20-alpha))',
|
||||
10: 'rgba(var(--coze-purple-10), var(--coze-purple-10-alpha))',
|
||||
7: 'rgba(var(--coze-purple-7), 1)',
|
||||
6: 'rgba(var(--coze-purple-6), 1)',
|
||||
5: 'rgba(var(--coze-purple-5), 1)',
|
||||
3: 'rgba(var(--coze-purple-3), var(--coze-purple-3-alpha))',
|
||||
2: 'rgba(var(--coze-purple-2), var(--coze-purple-2-alpha))',
|
||||
1: 'rgba(var(--coze-purple-1), var(--coze-purple-1-alpha))',
|
||||
},
|
||||
magenta: {
|
||||
DEFAULT: 'rgba(var(--coze-magenta-5), 1)',
|
||||
linear: 'rgba(var(--coze-magenta-5), 0)',
|
||||
50: 'rgba(var(--coze-magenta-50), var(--coze-magenta-50-alpha))',
|
||||
30: 'rgba(var(--coze-magenta-30), var(--coze-magenta-30-alpha))',
|
||||
20: 'rgba(var(--coze-magenta-20), var(--coze-magenta-20-alpha))',
|
||||
10: 'rgba(var(--coze-magenta-10), var(--coze-magenta-10-alpha))',
|
||||
5: 'rgba(var(--coze-magenta-5), 1)',
|
||||
3: 'rgba(var(--coze-magenta-3), var(--coze-magenta-3-alpha))',
|
||||
},
|
||||
black: {
|
||||
DEFAULT: 'rgb(var(--black-6))',
|
||||
7: 'rgb(var(--black-7))',
|
||||
6: 'rgb(var(--black-6))',
|
||||
5: 'rgb(var(--black-5))',
|
||||
4: 'rgb(var(--black-4))',
|
||||
3: 'rgb(var(--black-3))',
|
||||
2: 'rgb(var(--black-2))',
|
||||
1: 'rgb(var(--black-1))',
|
||||
},
|
||||
white: {
|
||||
DEFAULT: 'rgb(var(--white-1))',
|
||||
6: 'rgb(var(--white-6))',
|
||||
5: 'rgb(var(--white-5))',
|
||||
4: 'rgb(var(--white-4))',
|
||||
3: 'rgb(var(--white-3))',
|
||||
2: 'rgb(var(--white-2))',
|
||||
1: 'rgb(var(--white-1))',
|
||||
},
|
||||
stroke: {
|
||||
DEFAULT: 'rgba(var(--coze-stroke-5), var(--coze-stroke-5-alpha))',
|
||||
max: 'rgba(var(--coze-stroke-7), var(--coze-stroke-7-alpha))',
|
||||
6: 'rgba(var(--coze-stroke-6), var(--coze-stroke-6-alpha))',
|
||||
5: 'rgba(var(--coze-stroke-5), var(--coze-stroke-5-alpha))',
|
||||
opaque: 'rgb(var(--coze-stroke-opaque))',
|
||||
},
|
||||
mask: {
|
||||
DEFAULT: 'rgba(var(--coze-mask-5), 0.4)',
|
||||
5: 'rgba(var(--coze-mask-5), 0.4)',
|
||||
},
|
||||
icon: {
|
||||
DEFAULT: 'hsl(var(--icon))',
|
||||
gray: 'hsl(var(--icon-gray))',
|
||||
dark: 'hsl(var(--icon-dark))',
|
||||
},
|
||||
fornax: {
|
||||
DEFAULT: 'rgba(var(--coze-fornax-7), 1)',
|
||||
7: 'var(--coze-fornax-7)',
|
||||
},
|
||||
},
|
||||
fontSize: {
|
||||
mini: 'var(--coze-10)',
|
||||
base: 'var(--coze-12)',
|
||||
lg: 'var(--coze-14)',
|
||||
xl: 'var(--coze-15)',
|
||||
xxl: 'var(--coze-16)',
|
||||
'18px': 'var(--coze-18)',
|
||||
'20px': 'var(--coze-20)',
|
||||
'22px': 'var(--coze-22)',
|
||||
'24px': 'var(--coze-24)',
|
||||
'26px': 'var(--coze-26)',
|
||||
'28px': 'var(--coze-28)',
|
||||
'30px': 'var(--coze-30)',
|
||||
'32px': 'var(--coze-32)',
|
||||
'36px': 'var(--coze-36)',
|
||||
'48px': 'var(--coze-48)',
|
||||
'64px': 'var(--coze-64)',
|
||||
},
|
||||
spacing: {
|
||||
DEFAULT: 'var(--coze-8)',
|
||||
xxl: 'var(--coze-96)',
|
||||
xl: 'var(--coze-80)',
|
||||
md: 'var(--coze-64)',
|
||||
mm: 'var(--coze-48)',
|
||||
large: 'var(--coze-40)',
|
||||
normal: 'var(--coze-32)',
|
||||
small: 'var(--coze-20)',
|
||||
mini: 'var(--coze-16)',
|
||||
'1080px': 'var(--coze-1080)',
|
||||
'800px': 'var(--coze-800)',
|
||||
'640px': 'var(--coze-640)',
|
||||
'480px': 'var(--coze-480)',
|
||||
'320px': 'var(--coze-320)',
|
||||
'240px': 'var(--coze-240)',
|
||||
'200px': 'var(--coze-200)',
|
||||
'160px': 'var(--coze-160)',
|
||||
'120px': 'var(--coze-120)',
|
||||
'96px': 'var(--coze-96)',
|
||||
'80px': 'var(--coze-80)',
|
||||
'64px': 'var(--coze-64)',
|
||||
'48px': 'var(--coze-48)',
|
||||
'40px': 'var(--coze-40)',
|
||||
'32px': 'var(--coze-32)',
|
||||
'30px': 'var(--coze-30)',
|
||||
'28px': 'var(--coze-28)',
|
||||
'26px': 'var(--coze-26)',
|
||||
'24px': 'var(--coze-24)',
|
||||
'22px': 'var(--coze-22)',
|
||||
'20px': 'var(--coze-20)',
|
||||
'18px': 'var(--coze-18)',
|
||||
'16px': 'var(--coze-16)',
|
||||
'15px': 'var(--coze-15)',
|
||||
'14px': 'var(--coze-14)',
|
||||
'12px': 'var(--coze-12)',
|
||||
'10px': 'var(--coze-10)',
|
||||
'9px': 'var(--coze-9)',
|
||||
'8px': 'var(--coze-8)',
|
||||
'6px': 'var(--coze-6)',
|
||||
'5px': 'var(--coze-5)',
|
||||
'4px': 'var(--coze-4)',
|
||||
'3px': 'var(--coze-3)',
|
||||
'2px': 'var(--coze-2)',
|
||||
'1px': 'var(--coze-1)',
|
||||
},
|
||||
borderWidth: {
|
||||
DEFAULT: 'var(--coze-1)',
|
||||
normal: 'var(--coze-1)',
|
||||
half: 'var(--coze-0-5)',
|
||||
},
|
||||
borderRadius: {
|
||||
DEFAULT: 'var(--coze-8)',
|
||||
ultra: 'var(--coze-40)',
|
||||
xxl: 'var(--coze-24)',
|
||||
xl: 'var(--coze-16)',
|
||||
md: 'var(--coze-12)',
|
||||
m: 'var(--coze-10)',
|
||||
normal: 'var(--coze-8)',
|
||||
small: 'var(--coze-6)',
|
||||
little: 'var(--coze-5)',
|
||||
mini: 'var(--coze-4)',
|
||||
tiny: 'var(--coze-2)',
|
||||
},
|
||||
btnBorderRadius: {
|
||||
large: 'var(--coze-10)',
|
||||
normal: 'var(--coze-8)',
|
||||
small: 'var(--coze-5)',
|
||||
mini: 'var(--coze-4)',
|
||||
},
|
||||
inputBorderRadius: {
|
||||
large: 'var(--coze-10)',
|
||||
normal: 'var(--coze-8)',
|
||||
small: 'var(--coze-6)',
|
||||
},
|
||||
inputHeight: {
|
||||
large: 'var(--coze-40)',
|
||||
normal: 'var(--coze-32)',
|
||||
small: 'var(--coze-24)',
|
||||
},
|
||||
height: {
|
||||
DEFAULT: 'var(--coze-32)',
|
||||
'1080px': 'var(--coze-1080)',
|
||||
'800px': 'var(--coze-800)',
|
||||
'640px': 'var(--coze-640)',
|
||||
'480px': 'var(--coze-480)',
|
||||
'320px': 'var(--coze-320)',
|
||||
'240px': 'var(--coze-240)',
|
||||
'200px': 'var(--coze-200)',
|
||||
'160px': 'var(--coze-160)',
|
||||
'120px': 'var(--coze-120)',
|
||||
xxl: 'var(--coze-96)',
|
||||
xl: 'var(--coze-80)',
|
||||
md: 'var(--coze-64)',
|
||||
m: 'var(--coze-48)',
|
||||
large: 'var(--coze-40)',
|
||||
normal: 'var(--coze-32)',
|
||||
small: 'var(--coze-24)',
|
||||
petite: 'var(--coze-18)',
|
||||
mini: 'var(--coze-16)',
|
||||
},
|
||||
minHeight: {
|
||||
large: 'var(--coze-40)',
|
||||
normal: 'var(--coze-32)',
|
||||
small: 'var(--coze-24)',
|
||||
petite: 'var(--coze-18)',
|
||||
mini: 'var(--coze-16)',
|
||||
},
|
||||
lineHeight: {
|
||||
mini: 'var(--coze-16)',
|
||||
'12px': 'var(--coze-12)',
|
||||
'14px': 'var(--coze-14)',
|
||||
'16px': 'var(--coze-16)',
|
||||
'20px': 'var(--coze-20)',
|
||||
'22px': 'var(--coze-22)',
|
||||
'24px': 'var(--coze-24)',
|
||||
'28px': 'var(--coze-28)',
|
||||
'36px': 'var(--coze-36)',
|
||||
},
|
||||
width: {
|
||||
DEFAULT: 'var(--coze-32)',
|
||||
'1080px': 'var(--coze-1080)',
|
||||
'800px': 'var(--coze-800)',
|
||||
'640px': 'var(--coze-640)',
|
||||
'480px': 'var(--coze-480)',
|
||||
'320px': 'var(--coze-320)',
|
||||
'240px': 'var(--coze-240)',
|
||||
'200px': 'var(--coze-200)',
|
||||
'160px': 'var(--coze-160)',
|
||||
'120px': 'var(--coze-120)',
|
||||
xxl: 'var(--coze-96)',
|
||||
xl: 'var(--coze-80)',
|
||||
md: 'var(--coze-64)',
|
||||
m: 'var(--coze-48)',
|
||||
large: 'var(--coze-40)',
|
||||
normal: 'var(--coze-32)',
|
||||
small: 'var(--coze-24)',
|
||||
petite: 'var(--coze-18)',
|
||||
mini: 'var(--coze-16)',
|
||||
},
|
||||
minWidth: {
|
||||
large: 'var(--coze-40)',
|
||||
normal: 'var(--coze-32)',
|
||||
small: 'var(--coze-24)',
|
||||
petite: 'var(--coze-18)',
|
||||
mini: 'var(--coze-16)',
|
||||
},
|
||||
fill: theme => ({
|
||||
DEFAULT: theme('colors.foreground.5'),
|
||||
dark: theme('colors.foreground.5'),
|
||||
light: theme('colors.foreground.3'),
|
||||
black: theme('colors.black'),
|
||||
white: theme('colors.white'),
|
||||
}),
|
||||
boxShadow: {
|
||||
DEFAULT:
|
||||
'0 4px 12px 0px rgba(var(--coze-shadow-0), 0.08), 0px 8px 24px 0px rgba(var(--coze-shadow-0), 0.04)',
|
||||
small:
|
||||
'0px 2px 6px 0px rgba(var(--coze-shadow-0), 0.04), 0px 4px 12px 0px rgba(var(--coze-shadow-0), 0.02)',
|
||||
normal:
|
||||
'0 4px 12px 0px rgba(var(--coze-shadow-0), 0.08), 0px 8px 24px 0px rgba(var(--coze-shadow-0), 0.04)',
|
||||
large:
|
||||
'0px 8px 24px 0px rgba(var(--coze-shadow-0), 0.16), 0px 16px 48px 0px rgba(var(--coze-shadow-0), 0.08)',
|
||||
},
|
||||
keyframes: {
|
||||
'icon-down': {
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'100%': { transform: 'rotate(90deg)' },
|
||||
},
|
||||
'icon-up': {
|
||||
'0%': { transform: 'rotate(90deg)' },
|
||||
'100%': { transform: 'rotate(0deg)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'icon-down': 'icon-down 0.2s ease-out',
|
||||
'icon-up': 'icon-up 0.2s ease-out',
|
||||
loading: '',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
251
frontend/config/tailwind-config/src/light.js
Normal file
251
frontend/config/tailwind-config/src/light.js
Normal file
@@ -0,0 +1,251 @@
|
||||
// 浅色模式的 CSS 变量
|
||||
const lightModeVariables = {
|
||||
background: '255, 255, 255',
|
||||
foreground: '28, 28, 35',
|
||||
icon: '221, 0%, 10%',
|
||||
'icon-dark': '221, 0%, 10%',
|
||||
'icon-gray': '221, 0%, 90%',
|
||||
'black-7': '0, 0, 0',
|
||||
'black-6': '16, 16, 16',
|
||||
'black-5': '54, 61, 77',
|
||||
'black-4': '102, 102, 104',
|
||||
'black-3': '149, 149, 151',
|
||||
'black-2': '173, 173, 175',
|
||||
'black-1': '220, 220, 222',
|
||||
'white-6': '209, 209, 211',
|
||||
'white-5': '219, 219, 220',
|
||||
'white-4': '228, 228, 230',
|
||||
'white-3': '238, 238, 239',
|
||||
'white-2': '248, 248, 248',
|
||||
'white-1': '255, 255, 255',
|
||||
'coze-fg-revert': '255, 255, 255',
|
||||
'coze-fg-white': '255, 255, 255',
|
||||
'coze-fg-7': '255, 255, 255',
|
||||
'coze-fg-6': '255, 255, 255',
|
||||
'coze-fg-5': '255, 255, 255',
|
||||
'coze-fg-4': '8, 13, 30',
|
||||
'coze-fg-3': '15, 21, 40',
|
||||
'coze-fg-2': '32, 41, 69',
|
||||
'coze-fg-1': '55, 67, 106',
|
||||
// TODO: 需要删除bg9
|
||||
'coze-bg-9': '6, 7, 9',
|
||||
'coze-bg-8': '68, 83, 130',
|
||||
'coze-bg-7': '75, 90, 140',
|
||||
'coze-bg-6': '82, 100, 154',
|
||||
'coze-bg-5': '87, 104, 161',
|
||||
'coze-bg-4': '90, 108, 167',
|
||||
'coze-bg-3': '255, 255, 255',
|
||||
'coze-bg-2': '252, 252, 255',
|
||||
'coze-bg-1': '247, 247, 252',
|
||||
'coze-bg-0': '240, 240, 247',
|
||||
'coze-stroke-5': '82, 100, 154',
|
||||
'coze-stroke-6': '68, 83, 130',
|
||||
'coze-stroke-7': '55, 67, 106',
|
||||
'coze-stroke-opaque': '226, 228, 239',
|
||||
'coze-mask-5': '0, 0, 0',
|
||||
'coze-shadow-0': '0, 0, 0',
|
||||
'coze-brand-50': '102, 108, 255',
|
||||
'coze-brand-30': '163, 166, 255',
|
||||
'coze-brand-7': '65, 43, 255',
|
||||
'coze-brand-6': '69, 56, 255',
|
||||
'coze-brand-5': '81, 71, 255',
|
||||
'coze-brand-3': '150, 159, 255',
|
||||
'coze-brand-2': '161, 170, 255',
|
||||
'coze-brand-1': '171, 181, 255',
|
||||
'coze-brand-0': '181, 191, 255',
|
||||
'coze-red-7': '222, 22, 39',
|
||||
'coze-red-6': '227, 36, 52',
|
||||
'coze-red-5': '229, 50, 65',
|
||||
'coze-red-3': '250, 138, 148',
|
||||
'coze-red-2': '252, 149, 157',
|
||||
'coze-red-1': '255, 163, 171',
|
||||
'coze-red-0': '255, 173, 180',
|
||||
'coze-yellow-50': '242, 182, 0',
|
||||
'coze-yellow-30': '245, 184, 0',
|
||||
'coze-yellow-7': '229, 104, 0',
|
||||
'coze-yellow-6': '242, 109, 0',
|
||||
'coze-yellow-5': '255, 115, 0',
|
||||
'coze-yellow-3': '242, 161, 94',
|
||||
'coze-yellow-2': '242, 169, 109',
|
||||
'coze-yellow-1': '240, 174, 120',
|
||||
'coze-yellow-0': '239, 179, 130',
|
||||
'coze-green-7': '0, 161, 54',
|
||||
'coze-green-6': '0, 168, 56',
|
||||
'coze-green-5': '0, 178, 60',
|
||||
'coze-green-3': '79, 201, 120',
|
||||
'coze-green-2': '93, 207, 131',
|
||||
'coze-green-1': '105, 209, 140',
|
||||
'coze-green-0': '116, 212, 149',
|
||||
'coze-orange-5': '199, 66, 0',
|
||||
'coze-orange-3': '242, 148, 65',
|
||||
'coze-emerald-5': '0, 128, 74',
|
||||
'coze-emerald-3': '41, 204, 114',
|
||||
'coze-emerald-50': '0, 184, 122',
|
||||
'coze-emerald-30': '54, 209, 158',
|
||||
'coze-emerald-20': '66, 214, 165',
|
||||
'coze-emerald-10': '103, 229, 188',
|
||||
'coze-cyan-5': '0, 124, 135',
|
||||
'coze-cyan-3': '47, 196, 189',
|
||||
'coze-cyan-50': '0, 163, 163',
|
||||
'coze-cyan-30': '62, 199, 199',
|
||||
'coze-cyan-20': '73, 204, 204',
|
||||
'coze-cyan-10': '84, 209, 209',
|
||||
'coze-blue-5': '43, 87, 217',
|
||||
'coze-blue-3': '120, 170, 250',
|
||||
'coze-blue-50': '61, 121, 242',
|
||||
'coze-blue-30': '131, 172, 252',
|
||||
'coze-blue-20': '141, 178, 252',
|
||||
'coze-blue-10': '153, 187, 255',
|
||||
'coze-purple-7': '148, 0, 222',
|
||||
'coze-purple-6': '157, 0, 235',
|
||||
'coze-purple-5': '167, 0, 250',
|
||||
'coze-purple-3': '213, 128, 255',
|
||||
'coze-purple-2': '218, 145, 255',
|
||||
'coze-purple-1': '224, 163, 255',
|
||||
'coze-purple-50': '192, 66, 255',
|
||||
'coze-purple-30': '217, 143, 255',
|
||||
'coze-purple-20': '221, 153, 255',
|
||||
'coze-purple-10': '224, 163, 255',
|
||||
'coze-magenta-5': '209, 0, 157',
|
||||
'coze-magenta-3': '245, 120, 197',
|
||||
'coze-magenta-50': '242, 48, 177',
|
||||
'coze-magenta-30': '252, 134, 213',
|
||||
'coze-magenta-20': '252, 144, 216',
|
||||
'coze-magenta-10': '255, 158, 222',
|
||||
'coze-alternative-50': '191, 229, 0',
|
||||
'coze-alternative-30': '175, 209, 0',
|
||||
'coze-1080': '1080px',
|
||||
'coze-800': '800px',
|
||||
'coze-640': '640px',
|
||||
'coze-480': '480px',
|
||||
'coze-320': '320px',
|
||||
'coze-240': '240px',
|
||||
'coze-200': '200px',
|
||||
'coze-160': '160px',
|
||||
'coze-120': '120px',
|
||||
'coze-96': '96px',
|
||||
'coze-80': '80px',
|
||||
'coze-64': '64px',
|
||||
'coze-48': '48px',
|
||||
'coze-40': '40px',
|
||||
'coze-38': '38px',
|
||||
'coze-36': '36px',
|
||||
'coze-32': '32px',
|
||||
'coze-30': '30px',
|
||||
'coze-28': '28px',
|
||||
'coze-26': '26px',
|
||||
'coze-24': '24px',
|
||||
'coze-22': '22px',
|
||||
'coze-20': '20px',
|
||||
'coze-18': '18px',
|
||||
'coze-16': '16px',
|
||||
'coze-15': '15px',
|
||||
'coze-14': '14px',
|
||||
'coze-12': '12px',
|
||||
'coze-10': '10px',
|
||||
'coze-9': '9px',
|
||||
'coze-8': '8px',
|
||||
'coze-6': '6px',
|
||||
'coze-5': '5px',
|
||||
'coze-4': '4px',
|
||||
'coze-3': '3px',
|
||||
'coze-2': '2px',
|
||||
'coze-1': '1px',
|
||||
// TODO: rspress编译不出来，需要通过一些工具处理，目前没有用到，暂时注释处理
|
||||
// 'coze-0.5': '0.5px',
|
||||
'coze-0-5': '0.5px',
|
||||
|
||||
/* alpha */
|
||||
'coze-fg-1-alpha': '0.38',
|
||||
'coze-fg-2-alpha': '0.62',
|
||||
'coze-fg-3-alpha': '0.82',
|
||||
'coze-fg-4-alpha': '0.9',
|
||||
'coze-fg-5-alpha': '1',
|
||||
'coze-fg-6-alpha': '1',
|
||||
'coze-fg-7-alpha': '1',
|
||||
'coze-fg-revert-alpha': '1',
|
||||
'coze-fg-white-alpha': '1',
|
||||
'coze-bg-0-alpha': '1',
|
||||
'coze-bg-1-alpha': '1',
|
||||
'coze-bg-2-alpha': '1',
|
||||
'coze-bg-3-alpha': '1',
|
||||
'coze-bg-4-alpha': '0.04',
|
||||
'coze-bg-5-alpha': '0.08',
|
||||
'coze-bg-6-alpha': '0.13',
|
||||
'coze-bg-7-alpha': '0.19',
|
||||
'coze-bg-8-alpha': '0.25',
|
||||
// TODO: 需要删除bg9
|
||||
'coze-bg-9-alpha': '0.16',
|
||||
'coze-stroke-5-alpha': '0.13',
|
||||
'coze-stroke-6-alpha': '0.25',
|
||||
'coze-stroke-7-alpha': '0.38',
|
||||
'coze-brand-0-alpha': '0.23',
|
||||
'coze-brand-1-alpha': '0.3',
|
||||
'coze-brand-2-alpha': '0.38',
|
||||
'coze-brand-3-alpha': '0.45',
|
||||
'coze-brand-5-alpha': '1',
|
||||
'coze-brand-6-alpha': '1',
|
||||
'coze-brand-7-alpha': '1',
|
||||
'coze-brand-30-alpha': '0.45',
|
||||
'coze-brand-50-alpha': '1',
|
||||
'coze-red-0-alpha': '0.23',
|
||||
'coze-red-1-alpha': '0.3',
|
||||
'coze-red-2-alpha': '0.38',
|
||||
'coze-red-3-alpha': '0.45',
|
||||
'coze-yellow-50-alpha': '1',
|
||||
'coze-yellow-30-alpha': '0.45',
|
||||
'coze-yellow-0-alpha': '0.23',
|
||||
'coze-yellow-1-alpha': '0.3',
|
||||
'coze-yellow-2-alpha': '0.38',
|
||||
'coze-yellow-3-alpha': '0.45',
|
||||
'coze-yellow-5-alpha': '1',
|
||||
'coze-yellow-6-alpha': '1',
|
||||
'coze-yellow-7-alpha': '1',
|
||||
'coze-green-0-alpha': '0.23',
|
||||
'coze-green-1-alpha': '0.3',
|
||||
'coze-green-2-alpha': '0.38',
|
||||
'coze-green-3-alpha': '0.45',
|
||||
'coze-green-5-alpha': '1',
|
||||
'coze-green-6-alpha': '1',
|
||||
'coze-green-7-alpha': '1',
|
||||
'coze-orange-5-alpha': '1',
|
||||
'coze-orange-3-alpha': '0.45',
|
||||
'coze-emerald-5-alpha': '1',
|
||||
'coze-emerald-3-alpha': '0.45',
|
||||
'coze-emerald-50-alpha': '1',
|
||||
'coze-emerald-30-alpha': '0.55',
|
||||
'coze-emerald-20-alpha': '0.45',
|
||||
'coze-emerald-10-alpha': '0.2',
|
||||
'coze-cyan-5-alpha': '1',
|
||||
'coze-cyan-3-alpha': '0.45',
|
||||
'coze-cyan-50-alpha': '1',
|
||||
'coze-cyan-30-alpha': '0.45',
|
||||
'coze-cyan-20-alpha': '0.38',
|
||||
'coze-cyan-10-alpha': '0.3',
|
||||
'coze-blue-5-alpha': '1',
|
||||
'coze-blue-3-alpha': '0.45',
|
||||
'coze-blue-50-alpha': '1',
|
||||
'coze-blue-30-alpha': '0.45',
|
||||
'coze-blue-20-alpha': '0.38',
|
||||
'coze-blue-10-alpha': '0.3',
|
||||
'coze-purple-7-alpha': '1',
|
||||
'coze-purple-6-alpha': '1',
|
||||
'coze-purple-5-alpha': '1',
|
||||
'coze-purple-3-alpha': '0.45',
|
||||
'coze-purple-2-alpha': '0.38',
|
||||
'coze-purple-1-alpha': '0.3',
|
||||
'coze-purple-50-alpha': '1',
|
||||
'coze-purple-30-alpha': '0.45',
|
||||
'coze-purple-20-alpha': '0.38',
|
||||
'coze-purple-10-alpha': '0.3',
|
||||
'coze-magenta-5-alpha': '1',
|
||||
'coze-magenta-3-alpha': '0.45',
|
||||
'coze-magenta-50-alpha': '1',
|
||||
'coze-magenta-30-alpha': '0.45',
|
||||
'coze-magenta-20-alpha': '0.38',
|
||||
'coze-magenta-10-alpha': '0.3',
|
||||
'coze-alternative-30-alpha': '0.45',
|
||||
'coze-alternative-50-alpha': '1',
|
||||
};
|
||||
|
||||
module.exports = lightModeVariables;
|
||||
55
frontend/config/tailwind-config/src/tailwind-contents.ts
Normal file
55
frontend/config/tailwind-config/src/tailwind-contents.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
/*
|
||||
* Copyright 2025 coze-dev Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import path from 'path';
|
||||
|
||||
import glob from 'fast-glob';
|
||||
import {
|
||||
lookupSubPackages,
|
||||
getPackageLocation,
|
||||
getPackageJson,
|
||||
} from '@coze-arch/monorepo-kits';
|
||||
|
||||
export const getTailwindContents = (projectRoot: string) => {
|
||||
if (!projectRoot) {
|
||||
throw new Error('projectRoot is required');
|
||||
}
|
||||
const contents = [path.resolve(__dirname, '../src/**/*.{tsx,ts}')];
|
||||
|
||||
const subPackages = lookupSubPackages(projectRoot);
|
||||
const packageLocations = subPackages
|
||||
.filter(p => {
|
||||
const packageJson = getPackageJson(p);
|
||||
const deps = [
|
||||
...Object.keys(packageJson.dependencies || {}),
|
||||
...Object.keys(packageJson.devDependencies || {}),
|
||||
...Object.keys(packageJson.peerDependencies || {}),
|
||||
];
|
||||
return deps.includes('react');
|
||||
})
|
||||
.map(getPackageLocation);
|
||||
contents.push(
|
||||
...packageLocations
|
||||
.filter(r => !!r)
|
||||
.map(location => path.resolve(location, 'src/**/*.{ts,tsx}'))
|
||||
.filter(pattern => glob.sync(pattern).length > 0),
|
||||
);
|
||||
|
||||
// 兼容 coze-design 内部 tailwind 样式
|
||||
contents.push('./node_modules/@coze-arch/coze-design/**/*.{js,jsx}');
|
||||
|
||||
return contents;
|
||||
};
|
||||
25
frontend/config/tailwind-config/tsconfig.build.json
Normal file
25
frontend/config/tailwind-config/tsconfig.build.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"extends": "@coze-arch/ts-config/tsconfig.node.json",
|
||||
"compilerOptions": {
|
||||
"sourceMap": false,
|
||||
"esModuleInterop": true,
|
||||
"types": [],
|
||||
"rootDir": "./src",
|
||||
"outDir": "dist",
|
||||
"allowJs": true,
|
||||
"tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
|
||||
},
|
||||
"include": ["./src/**/*.ts", "./src/**/*.json"],
|
||||
"references": [
|
||||
{
|
||||
"path": "../eslint-config/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../../infra/utils/monorepo-kits/tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "../ts-config/tsconfig.build.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
15
frontend/config/tailwind-config/tsconfig.json
Normal file
15
frontend/config/tailwind-config/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"compilerOptions": {
|
||||
"composite": true
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.build.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.misc.json"
|
||||
}
|
||||
],
|
||||
"exclude": ["**/*"]
|
||||
}
|
||||
17
frontend/config/tailwind-config/tsconfig.misc.json
Normal file
17
frontend/config/tailwind-config/tsconfig.misc.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "@coze-arch/ts-config/tsconfig.node.json",
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"include": ["__tests__", "vitest.config.ts"],
|
||||
"exclude": ["./dist"],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.build.json"
|
||||
}
|
||||
],
|
||||
"compilerOptions": {
|
||||
"rootDir": "./",
|
||||
"outDir": "./dist",
|
||||
"sourceMap": false,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user