mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-11 08:19:01 +08:00
chore: remove unused CSS files and update Storybook configurations
- Deleted the todocss.css file as it was no longer needed. - Updated Storybook main.ts to include path aliasing for better module resolution. - Removed deprecated stories and components, streamlining the codebase. - Added new stories for CodeEditor, Ellipsis, ExpandableText, and other components to enhance documentation and showcase functionality.
This commit is contained in:
MyPrototypeWhat
parent
e56edbaa4f
commit
292f7f7b75
@ -1,4 +1,5 @@
|
|||||||
import type { StorybookConfig } from '@storybook/react-vite'
|
import type { StorybookConfig } from '@storybook/react-vite'
|
||||||
|
import { resolve } from 'path'
|
||||||
|
|
||||||
const config: StorybookConfig = {
|
const config: StorybookConfig = {
|
||||||
stories: ['../stories/components/**/*.stories.@(js|jsx|ts|tsx)'],
|
stories: ['../stories/components/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||||
@ -6,10 +7,15 @@ const config: StorybookConfig = {
|
|||||||
framework: '@storybook/react-vite',
|
framework: '@storybook/react-vite',
|
||||||
viteFinal: async (config) => {
|
viteFinal: async (config) => {
|
||||||
const { mergeConfig } = await import('vite')
|
const { mergeConfig } = await import('vite')
|
||||||
// 动态导入 @tailwindcss/vite 以避免 ESM/CJS 兼容性问题
|
|
||||||
const tailwindPlugin = (await import('@tailwindcss/vite')).default
|
const tailwindPlugin = (await import('@tailwindcss/vite')).default
|
||||||
|
console.log('aliasaliasaliasaliasalias', resolve('src/index.ts'))
|
||||||
return mergeConfig(config, {
|
return mergeConfig(config, {
|
||||||
plugins: [tailwindPlugin()]
|
plugins: [tailwindPlugin()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@cherrystudio/ui': resolve('src')
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -54,19 +54,17 @@ function Button({
|
|||||||
}) {
|
}) {
|
||||||
const Comp = asChild ? Slot : 'button'
|
const Comp = asChild ? Slot : 'button'
|
||||||
|
|
||||||
// 根据按钮尺寸确定 spinner 大小
|
// Determine spinner size based on button size
|
||||||
const getSpinnerSize = () => {
|
const getSpinnerSize = () => {
|
||||||
if (size === 'sm' || size === 'icon-sm') return 14
|
if (size === 'sm' || size === 'icon-sm') return 14
|
||||||
if (size === 'lg' || size === 'icon-lg') return 18
|
if (size === 'lg' || size === 'icon-lg') return 18
|
||||||
return 16
|
return 16
|
||||||
}
|
}
|
||||||
|
|
||||||
// 默认 loading icon
|
// Default loading icon
|
||||||
const defaultLoadingIcon = (
|
const defaultLoadingIcon = <Loader className={cn('animate-spin', loadingIconClassName)} size={getSpinnerSize()} />
|
||||||
<Loader className={cn('animate-spin', loadingIconClassName)} size={getSpinnerSize()} />
|
|
||||||
)
|
|
||||||
|
|
||||||
// 使用自定义 icon 或默认 icon
|
// Use custom icon or default icon
|
||||||
const spinnerElement = loadingIcon ?? defaultLoadingIcon
|
const spinnerElement = loadingIcon ?? defaultLoadingIcon
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -75,8 +73,15 @@ function Button({
|
|||||||
className={cn(buttonVariants({ variant, size, className }))}
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
disabled={disabled || loading}
|
disabled={disabled || loading}
|
||||||
{...props}>
|
{...props}>
|
||||||
{loading && spinnerElement}
|
{/* asChild mode does not support loading because Slot requires a single child element */}
|
||||||
{children}
|
{asChild ? (
|
||||||
|
children
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{loading && spinnerElement}
|
||||||
|
{children}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</Comp>
|
</Comp>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,157 +0,0 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
|
||||||
|
|
||||||
import { Button } from '../../../src/components'
|
|
||||||
|
|
||||||
const meta: Meta<typeof Button> = {
|
|
||||||
title: 'Components/Primitives/Button',
|
|
||||||
component: Button,
|
|
||||||
parameters: {
|
|
||||||
layout: 'centered'
|
|
||||||
},
|
|
||||||
tags: ['autodocs'],
|
|
||||||
argTypes: {
|
|
||||||
variant: {
|
|
||||||
control: { type: 'select' },
|
|
||||||
options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link']
|
|
||||||
},
|
|
||||||
size: {
|
|
||||||
control: { type: 'select' },
|
|
||||||
options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg']
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
control: { type: 'boolean' }
|
|
||||||
},
|
|
||||||
asChild: {
|
|
||||||
control: { type: 'boolean' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default meta
|
|
||||||
type Story = StoryObj<typeof meta>
|
|
||||||
|
|
||||||
// 基础按钮
|
|
||||||
export const Default: Story = {
|
|
||||||
args: {
|
|
||||||
children: 'Button'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 不同变体
|
|
||||||
export const Variants: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button variant="default">Default</Button>
|
|
||||||
<Button variant="secondary">Secondary</Button>
|
|
||||||
<Button variant="destructive">Destructive</Button>
|
|
||||||
<Button variant="outline">Outline</Button>
|
|
||||||
<Button variant="ghost">Ghost</Button>
|
|
||||||
<Button variant="link">Link</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 不同尺寸
|
|
||||||
export const Sizes: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex gap-2 items-center flex-wrap">
|
|
||||||
<Button size="sm">Small</Button>
|
|
||||||
<Button size="default">Default</Button>
|
|
||||||
<Button size="lg">Large</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 图标按钮
|
|
||||||
export const IconButtons: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex gap-2 items-center flex-wrap">
|
|
||||||
<Button size="icon-sm">🔍</Button>
|
|
||||||
<Button size="icon">🔍</Button>
|
|
||||||
<Button size="icon-lg">🔍</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 状态
|
|
||||||
export const States: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button>Normal</Button>
|
|
||||||
<Button disabled>Disabled</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 带图标
|
|
||||||
export const WithIcons: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button>
|
|
||||||
<span className="mr-2">📧</span>
|
|
||||||
Email
|
|
||||||
</Button>
|
|
||||||
<Button>
|
|
||||||
Next
|
|
||||||
<span className="ml-2">→</span>
|
|
||||||
</Button>
|
|
||||||
<Button size="icon">🔍</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全宽按钮
|
|
||||||
export const FullWidth: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="w-96">
|
|
||||||
<Button className="w-full">Full Width Button</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 交互示例
|
|
||||||
export const Interactive: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button onClick={() => alert('Button clicked!')}>Click Me</Button>
|
|
||||||
<Button onClick={() => console.log('Primary action')} variant="default">
|
|
||||||
Primary Action
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 组合示例
|
|
||||||
export const Combinations: Story = {
|
|
||||||
render: () => (
|
|
||||||
<div className="flex flex-col gap-4">
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button variant="default" size="sm">
|
|
||||||
Small Default
|
|
||||||
</Button>
|
|
||||||
<Button variant="destructive" size="sm">
|
|
||||||
Small Destructive
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="sm">
|
|
||||||
Small Outline
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button variant="default">Default</Button>
|
|
||||||
<Button variant="destructive">Destructive</Button>
|
|
||||||
<Button variant="outline">Outline</Button>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2 flex-wrap">
|
|
||||||
<Button variant="default" size="lg">
|
|
||||||
Large Default
|
|
||||||
</Button>
|
|
||||||
<Button variant="destructive" size="lg">
|
|
||||||
Large Destructive
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" size="lg">
|
|
||||||
Large Outline
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||||
import { action } from 'storybook/actions'
|
import { action } from 'storybook/actions'
|
||||||
|
|
||||||
import type { LanguageConfig } from '../../../src/components/composites/CodeEditor'
|
import type { LanguageConfig } from '../../../src/components'
|
||||||
import CodeEditor, { getCmThemeByName, getCmThemeNames } from '../../../src/components/composites/CodeEditor'
|
import CodeEditor, { getCmThemeByName, getCmThemeNames } from '../../../src/components'
|
||||||
|
|
||||||
// 示例语言配置 - 为 Storybook 提供更丰富的语言支持演示
|
// 示例语言配置 - 为 Storybook 提供更丰富的语言支持演示
|
||||||
const exampleLanguageConfig: LanguageConfig = {
|
const exampleLanguageConfig: LanguageConfig = {
|
||||||
@ -51,7 +51,7 @@ const exampleLanguageConfig: LanguageConfig = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const meta: Meta<typeof CodeEditor> = {
|
const meta: Meta<typeof CodeEditor> = {
|
||||||
title: 'Interactive/CodeEditor',
|
title: 'Components/Composites/CodeEditor',
|
||||||
component: CodeEditor,
|
component: CodeEditor,
|
||||||
parameters: { layout: 'centered' },
|
parameters: { layout: 'centered' },
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import Ellipsis from '../../../src/components/composites/Ellipsis'
|
import { Ellipsis } from '../../../src/components'
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Display/Ellipsis',
|
title: 'Components/Composites/Ellipsis',
|
||||||
component: Ellipsis,
|
component: Ellipsis,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered',
|
layout: 'centered',
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import ExpandableText from '../../../src/components/composites/ExpandableText'
|
import { ExpandableText } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof ExpandableText> = {
|
const meta: Meta<typeof ExpandableText> = {
|
||||||
title: 'Display/ExpandableText',
|
title: 'Components/Composites/ExpandableText',
|
||||||
component: ExpandableText,
|
component: ExpandableText,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,10 +1,10 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import HorizontalScrollContainer from '../../../src/components/composites/HorizontalScrollContainer'
|
import { HorizontalScrollContainer } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof HorizontalScrollContainer> = {
|
const meta: Meta<typeof HorizontalScrollContainer> = {
|
||||||
title: 'Layout/HorizontalScrollContainer',
|
title: 'Components/Composites/HorizontalScrollContainer',
|
||||||
component: HorizontalScrollContainer,
|
component: HorizontalScrollContainer,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,4 +1,3 @@
|
|||||||
import { Button } from '@heroui/react'
|
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
import {
|
import {
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
@ -16,10 +15,10 @@ import {
|
|||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { action } from 'storybook/actions'
|
import { action } from 'storybook/actions'
|
||||||
|
|
||||||
import ListItem from '../../../src/components/composites/ListItem'
|
import { Button, ListItem } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof ListItem> = {
|
const meta: Meta<typeof ListItem> = {
|
||||||
title: 'Display/ListItem',
|
title: 'Components/Composites/ListItem',
|
||||||
component: ListItem,
|
component: ListItem,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered',
|
layout: 'centered',
|
||||||
@ -78,7 +77,7 @@ export const Default: Story = {
|
|||||||
args: {
|
args: {
|
||||||
title: '默认列表项'
|
title: '默认列表项'
|
||||||
},
|
},
|
||||||
render: (args) => (
|
render: (args: any) => (
|
||||||
<div className="w-80">
|
<div className="w-80">
|
||||||
<ListItem {...args} />
|
<ListItem {...args} />
|
||||||
</div>
|
</div>
|
||||||
@ -92,7 +91,7 @@ export const WithIcon: Story = {
|
|||||||
title: '带图标的列表项',
|
title: '带图标的列表项',
|
||||||
subtitle: '这是一个副标题'
|
subtitle: '这是一个副标题'
|
||||||
},
|
},
|
||||||
render: (args) => (
|
render: (args: any) => (
|
||||||
<div className="w-80">
|
<div className="w-80">
|
||||||
<ListItem {...args} />
|
<ListItem {...args} />
|
||||||
</div>
|
</div>
|
||||||
@ -107,7 +106,7 @@ export const Active: Story = {
|
|||||||
subtitle: '当前选中项',
|
subtitle: '当前选中项',
|
||||||
active: true
|
active: true
|
||||||
},
|
},
|
||||||
render: (args) => (
|
render: (args: any) => (
|
||||||
<div className="w-80">
|
<div className="w-80">
|
||||||
<ListItem {...args} />
|
<ListItem {...args} />
|
||||||
</div>
|
</div>
|
||||||
@ -122,7 +121,7 @@ export const WithRightContent: Story = {
|
|||||||
subtitle: '右侧有附加信息',
|
subtitle: '右侧有附加信息',
|
||||||
rightContent: <ChevronRight size={16} className="text-gray-400" />
|
rightContent: <ChevronRight size={16} className="text-gray-400" />
|
||||||
},
|
},
|
||||||
render: (args) => (
|
render: (args: any) => (
|
||||||
<div className="w-80">
|
<div className="w-80">
|
||||||
<ListItem {...args} />
|
<ListItem {...args} />
|
||||||
</div>
|
</div>
|
||||||
@ -195,7 +194,7 @@ export const DifferentRightContent: Story = {
|
|||||||
title="带按钮"
|
title="带按钮"
|
||||||
subtitle="操作类型"
|
subtitle="操作类型"
|
||||||
rightContent={
|
rightContent={
|
||||||
<Button size="sm" variant="ghost" isIconOnly>
|
<Button size="icon-sm" variant="ghost">
|
||||||
<MoreHorizontal size={16} />
|
<MoreHorizontal size={16} />
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
@ -212,10 +211,10 @@ export const DifferentRightContent: Story = {
|
|||||||
subtitle="复合操作"
|
subtitle="复合操作"
|
||||||
rightContent={
|
rightContent={
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
<Button size="sm" variant="ghost" isIconOnly>
|
<Button size="icon-sm" variant="ghost">
|
||||||
<Edit size={14} />
|
<Edit size={14} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm" variant="ghost" isIconOnly color="danger">
|
<Button size="icon-sm" variant="destructive">
|
||||||
<Trash2 size={14} />
|
<Trash2 size={14} />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
@ -1,19 +1,20 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import MaxContextCount from '../../../src/components/composites/MaxContextCount'
|
import { MaxContextCount } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof MaxContextCount> = {
|
const meta: Meta<typeof MaxContextCount> = {
|
||||||
title: 'Display/MaxContextCount',
|
title: 'Components/Composites/MaxContextCount',
|
||||||
component: MaxContextCount,
|
component: MaxContextCount,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered',
|
layout: 'centered',
|
||||||
docs: {
|
docs: {
|
||||||
description: {
|
description: {
|
||||||
component: '一个用于显示最大上下文数量的组件。当数量达到100时显示无限符号，否则显示具体数字。'
|
component:
|
||||||
|
'⚠️ **已废弃** - 此组件使用频率仅为 1 次，不符合 UI 库提取标准（需 ≥3 次）。计划在未来版本中移除。此组件与业务逻辑耦合，不适合通用 UI 库。\n\n一个用于显示最大上下文数量的组件。当数量达到100时显示无限符号，否则显示具体数字。'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs', 'deprecated'],
|
||||||
argTypes: {
|
argTypes: {
|
||||||
maxContext: {
|
maxContext: {
|
||||||
control: { type: 'number', min: 0, max: 100, step: 1 },
|
control: { type: 'number', min: 0, max: 100, step: 1 },
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||||
|
|
||||||
import Scrollbar from '../../../src/components/composites/Scrollbar'
|
import { Scrollbar } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof Scrollbar> = {
|
const meta: Meta<typeof Scrollbar> = {
|
||||||
title: 'Layout/Scrollbar',
|
title: 'Components/Composites/Scrollbar',
|
||||||
component: Scrollbar,
|
component: Scrollbar,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,10 +1,10 @@
|
|||||||
import type { Meta } from '@storybook/react'
|
import type { Meta } from '@storybook/react'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import Selector from '../../../src/components/primitives/Selector'
|
import { Selector } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof Selector> = {
|
const meta: Meta<typeof Selector> = {
|
||||||
title: 'Interactive/Selector',
|
title: 'Components/Composites/Selector',
|
||||||
component: Selector,
|
component: Selector,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'padded'
|
layout: 'padded'
|
||||||
@ -1,8 +1,8 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react-vite'
|
import type { Meta, StoryObj } from '@storybook/react-vite'
|
||||||
import clsx from 'clsx'
|
import { clsx } from 'clsx'
|
||||||
import { useMemo, useState } from 'react'
|
import { useMemo, useState } from 'react'
|
||||||
|
|
||||||
import { Sortable } from '../../../src/components/composites/Sortable'
|
import { Sortable } from '../../../src/components'
|
||||||
import { useDndReorder } from '../../../src/hooks'
|
import { useDndReorder } from '../../../src/hooks'
|
||||||
|
|
||||||
type ExampleItem = { id: number; label: string }
|
type ExampleItem = { id: number; label: string }
|
||||||
@ -13,7 +13,7 @@ const initialItems: ExampleItem[] = Array.from({ length: 18 }).map((_, i) => ({
|
|||||||
}))
|
}))
|
||||||
|
|
||||||
const meta: Meta<typeof Sortable> = {
|
const meta: Meta<typeof Sortable> = {
|
||||||
title: 'Interactive/Sortable',
|
title: 'Components/Composites/Sortable',
|
||||||
component: Sortable,
|
component: Sortable,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'padded',
|
layout: 'padded',
|
||||||
@ -1,21 +1,22 @@
|
|||||||
import { Button } from '@heroui/react'
|
import { Button } from '../../../src/components'
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
import { useEffect, useMemo, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
|
||||||
import ThinkingEffect from '../../../src/components/composites/ThinkingEffect'
|
import { ThinkingEffect } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof ThinkingEffect> = {
|
const meta: Meta<typeof ThinkingEffect> = {
|
||||||
title: 'Display/ThinkingEffect',
|
title: 'Components/Composites/ThinkingEffect',
|
||||||
component: ThinkingEffect,
|
component: ThinkingEffect,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered',
|
layout: 'centered',
|
||||||
docs: {
|
docs: {
|
||||||
description: {
|
description: {
|
||||||
component: '一个用于显示AI思考过程的动画组件，包含灯泡动画、思考内容滚动展示和展开收缩功能。'
|
component:
|
||||||
|
'⚠️ **已废弃** - 此组件使用频率仅为 1 次，不符合 UI 库提取标准（需 ≥3 次）。计划在未来版本中移除。此组件是 AI 思考特效，可能需要保留在主项目中而不是 UI 库。\n\n一个用于显示AI思考过程的动画组件，包含灯泡动画、思考内容滚动展示和展开收缩功能。'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs', 'deprecated'],
|
||||||
argTypes: {
|
argTypes: {
|
||||||
isThinking: {
|
isThinking: {
|
||||||
control: { type: 'boolean' },
|
control: { type: 'boolean' },
|
||||||
@ -6,7 +6,7 @@ import { FilePngIcon, FileSvgIcon } from '../../../src/components/icons/FileIcon
|
|||||||
const FileIconsShowcase = () => <div />
|
const FileIconsShowcase = () => <div />
|
||||||
|
|
||||||
const meta: Meta<typeof FileIconsShowcase> = {
|
const meta: Meta<typeof FileIconsShowcase> = {
|
||||||
title: 'Icons/FileIcons',
|
title: 'Components/Icons/FileIcons',
|
||||||
component: FileIconsShowcase,
|
component: FileIconsShowcase,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
|
|||||||
@ -20,7 +20,7 @@ import {
|
|||||||
const IconShowcase = () => <div />
|
const IconShowcase = () => <div />
|
||||||
|
|
||||||
const meta: Meta<typeof IconShowcase> = {
|
const meta: Meta<typeof IconShowcase> = {
|
||||||
title: 'Icons/Icon',
|
title: 'Components/Icons/Icon',
|
||||||
component: IconShowcase,
|
component: IconShowcase,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
|
|||||||
@ -3,12 +3,18 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||||||
import SvgSpinners180Ring from '../../../src/components/icons/SvgSpinners180Ring'
|
import SvgSpinners180Ring from '../../../src/components/icons/SvgSpinners180Ring'
|
||||||
|
|
||||||
const meta: Meta<typeof SvgSpinners180Ring> = {
|
const meta: Meta<typeof SvgSpinners180Ring> = {
|
||||||
title: 'Icons/SvgSpinners180Ring',
|
title: 'Components/Icons/SvgSpinners180Ring',
|
||||||
component: SvgSpinners180Ring,
|
component: SvgSpinners180Ring,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered',
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component:
|
||||||
|
'⚠️ **已废弃** - 此组件使用频率为 0 次，不符合 UI 库提取标准（需 ≥3 次）。计划在未来版本中移除。虽然主项目中有本地副本，但完全未被导入使用。'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs', 'deprecated'],
|
||||||
argTypes: {
|
argTypes: {
|
||||||
size: {
|
size: {
|
||||||
description: '加载图标大小',
|
description: '加载图标大小',
|
||||||
|
|||||||
@ -3,12 +3,18 @@ import type { Meta, StoryObj } from '@storybook/react'
|
|||||||
import ToolsCallingIcon from '../../../src/components/icons/ToolsCallingIcon'
|
import ToolsCallingIcon from '../../../src/components/icons/ToolsCallingIcon'
|
||||||
|
|
||||||
const meta: Meta<typeof ToolsCallingIcon> = {
|
const meta: Meta<typeof ToolsCallingIcon> = {
|
||||||
title: 'Icons/ToolsCallingIcon',
|
title: 'Components/Icons/ToolsCallingIcon',
|
||||||
component: ToolsCallingIcon,
|
component: ToolsCallingIcon,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered',
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component:
|
||||||
|
'⚠️ **已废弃** - 此组件使用频率仅为 1 次，不符合 UI 库提取标准（需 ≥3 次）。计划在未来版本中移除。建议直接使用 lucide-react 的 Wrench 图标。'
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs', 'deprecated'],
|
||||||
argTypes: {
|
argTypes: {
|
||||||
className: {
|
className: {
|
||||||
description: '容器的自定义 CSS 类名',
|
description: '容器的自定义 CSS 类名',
|
||||||
|
|||||||
345
packages/ui/stories/components/primitives/Button.stories.tsx
Normal file
345
packages/ui/stories/components/primitives/Button.stories.tsx
Normal file
@ -0,0 +1,345 @@
|
|||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
import { ChevronRight, Loader2, Mail } from 'lucide-react'
|
||||||
|
|
||||||
|
import { Button } from '../../../src/components'
|
||||||
|
|
||||||
|
const meta: Meta<typeof Button> = {
|
||||||
|
title: 'Components/Primitives/Button',
|
||||||
|
component: Button,
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
docs: {
|
||||||
|
description: {
|
||||||
|
component: 'Displays a button or a component that looks like a button. Based on shadcn/ui.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tags: ['autodocs'],
|
||||||
|
argTypes: {
|
||||||
|
variant: {
|
||||||
|
control: { type: 'select' },
|
||||||
|
options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
|
||||||
|
description: 'The visual style variant of the button'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
control: { type: 'select' },
|
||||||
|
options: ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'],
|
||||||
|
description: 'The size of the button'
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
control: { type: 'boolean' },
|
||||||
|
description: 'Whether the button is disabled'
|
||||||
|
},
|
||||||
|
asChild: {
|
||||||
|
control: { type: 'boolean' },
|
||||||
|
description: 'Render as a child element'
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
control: { type: 'text' },
|
||||||
|
description: 'Additional CSS classes'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
type Story = StoryObj<typeof meta>
|
||||||
|
|
||||||
|
// Default
|
||||||
|
export const Default: Story = {
|
||||||
|
args: {
|
||||||
|
children: 'Button'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Variants
|
||||||
|
export const Secondary: Story = {
|
||||||
|
args: {
|
||||||
|
variant: 'secondary',
|
||||||
|
children: 'Secondary'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Destructive: Story = {
|
||||||
|
args: {
|
||||||
|
variant: 'destructive',
|
||||||
|
children: 'Destructive'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Outline: Story = {
|
||||||
|
args: {
|
||||||
|
variant: 'outline',
|
||||||
|
children: 'Outline'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Ghost: Story = {
|
||||||
|
args: {
|
||||||
|
variant: 'ghost',
|
||||||
|
children: 'Ghost'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Link: Story = {
|
||||||
|
args: {
|
||||||
|
variant: 'link',
|
||||||
|
children: 'Link'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// All Variants
|
||||||
|
export const AllVariants: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button variant="default">Default</Button>
|
||||||
|
<Button variant="secondary">Secondary</Button>
|
||||||
|
<Button variant="destructive">Destructive</Button>
|
||||||
|
<Button variant="outline">Outline</Button>
|
||||||
|
<Button variant="ghost">Ghost</Button>
|
||||||
|
<Button variant="link">Link</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sizes
|
||||||
|
export const Small: Story = {
|
||||||
|
args: {
|
||||||
|
size: 'sm',
|
||||||
|
children: 'Small'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Large: Story = {
|
||||||
|
args: {
|
||||||
|
size: 'lg',
|
||||||
|
children: 'Large'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AllSizes: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button size="sm">Small</Button>
|
||||||
|
<Button size="default">Default</Button>
|
||||||
|
<Button size="lg">Large</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Icon Buttons
|
||||||
|
export const IconButton: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Button variant="outline" size="icon" aria-label="Icon button">
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AllIconSizes: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button size="icon-sm" variant="outline" aria-label="Small icon button">
|
||||||
|
<ChevronRight className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
<Button size="icon" variant="outline" aria-label="Default icon button">
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button size="icon-lg" variant="outline" aria-label="Large icon button">
|
||||||
|
<ChevronRight className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// With Icon
|
||||||
|
export const WithIcon: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
<Mail className="h-3 w-3" />
|
||||||
|
Login with Email
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
Login with Email
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="lg">
|
||||||
|
<Mail className="h-5 w-5" />
|
||||||
|
Login with Email
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading
|
||||||
|
export const Loading: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button disabled>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Please wait
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" disabled>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Loading...
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rounded
|
||||||
|
export const Rounded: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button className="rounded-full">Rounded</Button>
|
||||||
|
<Button variant="outline" className="rounded-full">
|
||||||
|
Rounded Outline
|
||||||
|
</Button>
|
||||||
|
<Button size="icon" variant="outline" className="rounded-full" aria-label="Rounded icon">
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// States
|
||||||
|
export const Disabled: Story = {
|
||||||
|
args: {
|
||||||
|
disabled: true,
|
||||||
|
children: 'Disabled'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AllStates: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Button>Normal</Button>
|
||||||
|
<Button disabled>Disabled</Button>
|
||||||
|
<Button variant="outline">Normal Outline</Button>
|
||||||
|
<Button variant="outline" disabled>
|
||||||
|
Disabled Outline
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Full Width
|
||||||
|
export const FullWidth: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="w-96">
|
||||||
|
<Button className="w-full">Full Width Button</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// As Child - Composition Pattern
|
||||||
|
// Note: asChild uses Radix UI's Slot component to merge Button's props
|
||||||
|
// with a single child element. The child must support prop spreading.
|
||||||
|
// Warning: asChild does NOT support loading prop (Slot requires single child)
|
||||||
|
export const AsChild: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div>
|
||||||
|
<p className="mb-2 text-sm text-muted-foreground">Using asChild to render as an anchor tag:</p>
|
||||||
|
<Button asChild variant="outline">
|
||||||
|
<a href="https://github.com" target="_blank" rel="noopener noreferrer">
|
||||||
|
Go to GitHub
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="mb-2 text-sm text-muted-foreground">Using asChild with link variant:</p>
|
||||||
|
<Button variant="link" asChild>
|
||||||
|
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
|
||||||
|
Example Link
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 rounded-md border border-yellow-200 bg-yellow-50 p-3 dark:border-yellow-900 dark:bg-yellow-950">
|
||||||
|
<p className="text-sm text-yellow-800 dark:text-yellow-200">
|
||||||
|
<strong>Note:</strong> The{' '}
|
||||||
|
<code className="rounded bg-yellow-100 px-1 py-0.5 dark:bg-yellow-900">asChild</code> prop does not work with{' '}
|
||||||
|
<code className="rounded bg-yellow-100 px-1 py-0.5 dark:bg-yellow-900">loading</code> because Radix Slot
|
||||||
|
requires a single child element.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Real World Examples
|
||||||
|
export const RealWorldExamples: Story = {
|
||||||
|
render: () => (
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
{/* Action Buttons */}
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Action Buttons</h3>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button>Save Changes</Button>
|
||||||
|
<Button variant="secondary">Cancel</Button>
|
||||||
|
<Button variant="destructive">Delete</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Icon Buttons */}
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Icon Buttons</h3>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button size="icon" variant="outline" aria-label="Next page">
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button size="icon" variant="ghost" aria-label="Send email">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button size="icon" variant="destructive" aria-label="Delete item">
|
||||||
|
<span className="text-lg">×</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading States */}
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Loading States</h3>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button disabled>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Processing
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" disabled>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Uploading...
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* With Icons */}
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Buttons with Icons</h3>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button variant="outline">
|
||||||
|
<Mail className="h-4 w-4" />
|
||||||
|
Login with Email
|
||||||
|
</Button>
|
||||||
|
<Button>
|
||||||
|
<ChevronRight className="h-4 w-4" />
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rounded Variants */}
|
||||||
|
<div>
|
||||||
|
<h3 className="mb-3 text-sm font-semibold">Rounded Buttons</h3>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button className="rounded-full">Get Started</Button>
|
||||||
|
<Button variant="outline" className="rounded-full">
|
||||||
|
Learn More
|
||||||
|
</Button>
|
||||||
|
<Button size="icon" className="rounded-full" variant="outline" aria-label="Add item">
|
||||||
|
+
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import CopyButton from '../../../src/components/primitives/copyButton'
|
import { CopyButton } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof CopyButton> = {
|
const meta: Meta<typeof CopyButton> = {
|
||||||
title: 'Base/CopyButton',
|
title: 'Components/Primitives/CopyButton',
|
||||||
component: CopyButton,
|
component: CopyButton,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -2,10 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
|
|||||||
import { AlertTriangleIcon, StarIcon } from 'lucide-react'
|
import { AlertTriangleIcon, StarIcon } from 'lucide-react'
|
||||||
import { action } from 'storybook/actions'
|
import { action } from 'storybook/actions'
|
||||||
|
|
||||||
import CustomTag from '../../../src/components/primitives/customTag'
|
import { CustomTag } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof CustomTag> = {
|
const meta: Meta<typeof CustomTag> = {
|
||||||
title: 'Base/CustomTag',
|
title: 'Components/Primitives/CustomTag',
|
||||||
component: CustomTag,
|
component: CustomTag,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import DividerWithText from '../../../src/components/primitives/dividerWithText'
|
import { DividerWithText } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof DividerWithText> = {
|
const meta: Meta<typeof DividerWithText> = {
|
||||||
title: 'Base/DividerWithText',
|
title: 'Components/Primitives/DividerWithText',
|
||||||
component: DividerWithText,
|
component: DividerWithText,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'padded'
|
layout: 'padded'
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import EmojiAvatar from '../../../src/components/primitives/Avatar/EmojiAvatar'
|
import { EmojiAvatar } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof EmojiAvatar> = {
|
const meta: Meta<typeof EmojiAvatar> = {
|
||||||
title: 'Display/EmojiAvatar',
|
title: 'Components/Primitives/EmojiAvatar',
|
||||||
component: EmojiAvatar,
|
component: EmojiAvatar,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import EmojiIcon from '../../../src/components/primitives/emojiIcon'
|
import { EmojiIcon } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof EmojiIcon> = {
|
const meta: Meta<typeof EmojiIcon> = {
|
||||||
title: 'Base/EmojiIcon',
|
title: 'Components/Primitives/EmojiIcon',
|
||||||
component: EmojiIcon,
|
component: EmojiIcon,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import { Button } from '@heroui/react'
|
import { Button } from '../../../src/components'
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import type { CustomFallbackProps } from '../../../src/components/primitives/ErrorBoundary'
|
import type { CustomFallbackProps } from '../../../src/components'
|
||||||
import { ErrorBoundary } from '../../../src/components/primitives/ErrorBoundary'
|
import { ErrorBoundary } from '../../../src/components'
|
||||||
|
|
||||||
// 错误组件 - 用于触发错误
|
// 错误组件 - 用于触发错误
|
||||||
const ThrowErrorComponent = ({ shouldThrow = false, errorMessage = '这是一个模拟错误' }) => {
|
const ThrowErrorComponent = ({ shouldThrow = false, errorMessage = '这是一个模拟错误' }) => {
|
||||||
@ -36,7 +36,7 @@ const AsyncErrorComponent = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const meta: Meta<typeof ErrorBoundary> = {
|
const meta: Meta<typeof ErrorBoundary> = {
|
||||||
title: 'Base/ErrorBoundary',
|
title: 'Components/Primitives/ErrorBoundary',
|
||||||
component: ErrorBoundary,
|
component: ErrorBoundary,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'padded'
|
layout: 'padded'
|
||||||
@ -1,9 +1,9 @@
|
|||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
import IndicatorLight from '../../../src/components/primitives/indicatorLight'
|
import { IndicatorLight } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof IndicatorLight> = {
|
const meta: Meta<typeof IndicatorLight> = {
|
||||||
title: 'Base/IndicatorLight',
|
title: 'Components/Primitives/IndicatorLight',
|
||||||
component: IndicatorLight,
|
component: IndicatorLight,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,11 +1,11 @@
|
|||||||
import { Button } from '@heroui/react'
|
import { Button } from '../../../src/components'
|
||||||
import type { Meta, StoryObj } from '@storybook/react'
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
|
||||||
import Spinner from '../../../src/components/primitives/spinner'
|
import { Spinner } from '../../../src/components'
|
||||||
|
|
||||||
const meta: Meta<typeof Spinner> = {
|
const meta: Meta<typeof Spinner> = {
|
||||||
title: 'Base/Spinner',
|
title: 'Components/Primitives/Spinner',
|
||||||
component: Spinner,
|
component: Spinner,
|
||||||
parameters: {
|
parameters: {
|
||||||
layout: 'centered'
|
layout: 'centered'
|
||||||
@ -1,3 +0,0 @@
|
|||||||
// hero.ts
|
|
||||||
import { heroui } from '@heroui/react'
|
|
||||||
export default heroui()
|
|
||||||
@ -1,5 +1,6 @@
|
|||||||
/* Storybook 专用的 Tailwind CSS 配置 */
|
/* Storybook 专用的 Tailwind CSS 配置 */
|
||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
|
@import '../src/styles/theme.css';
|
||||||
|
|
||||||
/* 扫描组件文件 */
|
/* 扫描组件文件 */
|
||||||
@source '../src/components/**/*.{js,ts,jsx,tsx}';
|
@source '../src/components/**/*.{js,ts,jsx,tsx}';
|
||||||
@ -7,7 +8,5 @@
|
|||||||
/* 扫描 stories 文件 */
|
/* 扫描 stories 文件 */
|
||||||
@source './components/**/*.{js,ts,jsx,tsx}';
|
@source './components/**/*.{js,ts,jsx,tsx}';
|
||||||
|
|
||||||
/* HeroUI 组件样式 */
|
/* Dark mode support */
|
||||||
@plugin './hero.ts';
|
|
||||||
@source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|||||||
@ -1,870 +0,0 @@
|
|||||||
:root {
|
|
||||||
/* Typography: Desktop mode */
|
|
||||||
--Font_family--Heading: Inter;
|
|
||||||
--Font_weight--Regular: 400px;
|
|
||||||
--Font_size--Heading--2xl: 60px;
|
|
||||||
--Font_size--Heading--xl: 48px;
|
|
||||||
--Font_size--Heading--lg: 40px;
|
|
||||||
--Font_size--Heading--md: 32px;
|
|
||||||
--Font_size--Heading--sm: 24px;
|
|
||||||
--Font_size--Heading--xs: 20px;
|
|
||||||
--Line_height--Heading--xl: 80px;
|
|
||||||
--Line_height--Body--lg: 28px;
|
|
||||||
--Line_height--Body--md: 24px;
|
|
||||||
--Line_height--Body--sm: 24px;
|
|
||||||
--Line_height--Body--xs: 20px;
|
|
||||||
--Paragraph_spacing--Body--lg: 18px;
|
|
||||||
--Paragraph_spacing--Body--md: 16px;
|
|
||||||
--Paragraph_spacing--Body--sm: 14px;
|
|
||||||
--Paragraph_spacing--Body--xs: 12px;
|
|
||||||
--Line_height--Heading--lg: 60px;
|
|
||||||
--Line_height--Heading--md: 48px;
|
|
||||||
--Line_height--Heading--sm: 40px;
|
|
||||||
--Line_height--Heading--xs: 32px;
|
|
||||||
--Font_size--Body--lg: 18px;
|
|
||||||
--Font_size--Body--md: 16px;
|
|
||||||
--Font_size--Body--sm: 14px;
|
|
||||||
--Font_size--Body--xs: 12px;
|
|
||||||
--Font_weight--Italic: 400px;
|
|
||||||
--Font_weight--Medium: 500px;
|
|
||||||
--Font_weight--Bold: 700px;
|
|
||||||
--Font_family--Body: Inter;
|
|
||||||
--Paragraph_spacing--Heading--2xl: 60px;
|
|
||||||
--Paragraph_spacing--Heading--xl: 48px;
|
|
||||||
--Paragraph_spacing--Heading--lg: 40px;
|
|
||||||
--Paragraph_spacing--Heading--md: 32px;
|
|
||||||
--Paragraph_spacing--Heading--sm: 24px;
|
|
||||||
--Paragraph_spacing--Heading--xs: 20px;
|
|
||||||
--typography_components--h1--font-family: Inter;
|
|
||||||
--typography_components--h2--font-family: Inter;
|
|
||||||
--typography_components--h2--font-size: 30px;
|
|
||||||
--typography_components--h2--line-height: 36px;
|
|
||||||
--typography_components--h2--font-weight: 600;
|
|
||||||
--typography_components--h2--letter-spacing: -0.4000000059604645px;
|
|
||||||
--typography_components--h1--font-size: 36px;
|
|
||||||
--typography_components--h1--font-size-lg: 48px;
|
|
||||||
--typography_components--h1--line-height: 40px;
|
|
||||||
--typography_components--h1--font-weight: 800;
|
|
||||||
--typography_components--h1--letter-spacing: -0.4000000059604645px;
|
|
||||||
--typography_components--h3--font-family: Inter;
|
|
||||||
--typography_components--h3--font-size: 24px;
|
|
||||||
--typography_components--h3--line-height: 32px;
|
|
||||||
--typography_components--h3--font-weight: 600;
|
|
||||||
--typography_components--h3--letter-spacing: -0.4000000059604645px;
|
|
||||||
--typography_components--h4--font-family: Inter;
|
|
||||||
--typography_components--h4--font-size: 20px;
|
|
||||||
--typography_components--h4--line-height: 28px;
|
|
||||||
--typography_components--h4--font-weight: 600;
|
|
||||||
--typography_components--h4--letter-spacing: -0.4000000059604645px;
|
|
||||||
--typography_components--p--font-family: Inter;
|
|
||||||
--typography_components--p--font-size: 16px;
|
|
||||||
--typography_components--p--line-height: 28px;
|
|
||||||
--typography_components--p--font-weight: 400;
|
|
||||||
--typography_components--p--letter-spacing: 0px;
|
|
||||||
--typography_components--blockquote--font-family: Inter;
|
|
||||||
--typography_components--blockquote--font-size: 16px;
|
|
||||||
--typography_components--blockquote--line-height: 24px;
|
|
||||||
--typography_components--blockquote--letter-spacing: 0px;
|
|
||||||
--typography_components--blockquote--font-style: italic;
|
|
||||||
--typography_components--list--font-family: Inter;
|
|
||||||
--typography_components--list--font-size: 16px;
|
|
||||||
--typography_components--list--line-height: 28px;
|
|
||||||
--typography_components--list--letter-spacing: 0px;
|
|
||||||
--typography_components--inline_code--font-family: Menlo;
|
|
||||||
--typography_components--inline_code--font-size: 14px;
|
|
||||||
--typography_components--inline_code--line-height: 20px;
|
|
||||||
--typography_components--inline_code--font-weight: 600;
|
|
||||||
--typography_components--inline_code--letter-spacing: 0px;
|
|
||||||
--typography_components--lead--font-family: Inter;
|
|
||||||
--typography_components--lead--font-size: 20px;
|
|
||||||
--typography_components--lead--line-height: 28px;
|
|
||||||
--typography_components--lead--font-weight: 400;
|
|
||||||
--typography_components--lead--letter-spacing: 0px;
|
|
||||||
--typography_components--large--font-family: Inter;
|
|
||||||
--typography_components--large--font-size: 18px;
|
|
||||||
--typography_components--large--line-height: 28px;
|
|
||||||
--typography_components--large--font-weight: 600;
|
|
||||||
--typography_components--large--letter-spacing: 0px;
|
|
||||||
--typography_components--small--font-family: Inter;
|
|
||||||
--typography_components--small--font-size: 14px;
|
|
||||||
--typography_components--small--line-height: 14px;
|
|
||||||
--typography_components--small--font-weight: 500;
|
|
||||||
--typography_components--table--font-family: Inter;
|
|
||||||
--typography_components--table--font-size: 16px;
|
|
||||||
--typography_components--table--font-weight: 400;
|
|
||||||
--typography_components--table--font-weight-bold: 700;
|
|
||||||
--typography_components--table--letter-spacing: 0px;
|
|
||||||
|
|
||||||
/* Spacing and sizing: Desktop */
|
|
||||||
--Border_width--sm: 1px;
|
|
||||||
--Border_width--md: 2px;
|
|
||||||
--Border_width--lg: 3px;
|
|
||||||
--Radius--4xs: 4px;
|
|
||||||
--Radius--3xs: 8px;
|
|
||||||
--Radius--2xs: 12px;
|
|
||||||
--Radius--xs: 16px;
|
|
||||||
--Radius--sm: 24px;
|
|
||||||
--Radius--md: 32px;
|
|
||||||
--Radius--lg: 40px;
|
|
||||||
--Radius--xl: 48px;
|
|
||||||
--Radius--2xl: 56px;
|
|
||||||
--Radius--3xl: 64px;
|
|
||||||
--Radius--round: 999px;
|
|
||||||
--Spacing--5xs: 4px;
|
|
||||||
--Spacing--4xs: 8px;
|
|
||||||
--Spacing--3xs: 12px;
|
|
||||||
--Spacing--2xs: 16px;
|
|
||||||
--Spacing--xs: 24px;
|
|
||||||
--Spacing--sm: 32px;
|
|
||||||
--Spacing--md: 40px;
|
|
||||||
--Spacing--lg: 48px;
|
|
||||||
--Spacing--xl: 56px;
|
|
||||||
--Spacing--2xl: 64px;
|
|
||||||
--Spacing--3xl: 72px;
|
|
||||||
--Spacing--4xl: 80px;
|
|
||||||
--Spacing--5xl: 88px;
|
|
||||||
--Spacing--6xl: 96px;
|
|
||||||
--Spacing--7xl: 104px;
|
|
||||||
--Spacing--8xl: 112px;
|
|
||||||
--Sizing--5xs: 4px;
|
|
||||||
--Sizing--4xs: 8px;
|
|
||||||
--Sizing--3xs: 12px;
|
|
||||||
--Sizing--2xs: 16px;
|
|
||||||
--Sizing--xs: 24px;
|
|
||||||
--Sizing--sm: 32px;
|
|
||||||
--Sizing--md: 40px;
|
|
||||||
--Sizing--lg: 48px;
|
|
||||||
--Sizing--xl: 56px;
|
|
||||||
--Sizing--2xl: 64px;
|
|
||||||
--Sizing--3xl: 72px;
|
|
||||||
--Sizing--4xl: 80px;
|
|
||||||
--Sizing--5xl: 88px;
|
|
||||||
|
|
||||||
/* Color: Light mode */
|
|
||||||
--Opacity--Red--Red-100: var(--Primitive--Red--600);
|
|
||||||
--Opacity--Red--Red-80: hsla(0, 72%, 51%, 0.8);
|
|
||||||
--Opacity--Red--Red-60: hsla(0, 72%, 51%, 0.6);
|
|
||||||
--Opacity--Red--Red-40: hsla(0, 72%, 51%, 0.4);
|
|
||||||
--Opacity--Red--Red-20: hsla(0, 72%, 51%, 0.2);
|
|
||||||
--Opacity--Red--Red-10: hsla(0, 72%, 51%, 0.1);
|
|
||||||
--Opacity--Green--Green-100: var(--Primitive--Green--600);
|
|
||||||
--Opacity--Green--Green-80: hsla(142, 76%, 36%, 0.8);
|
|
||||||
--Opacity--Green--Green-60: hsla(142, 76%, 36%, 0.6);
|
|
||||||
--Opacity--Green--Green-40: hsla(142, 76%, 36%, 0.4);
|
|
||||||
--Opacity--Green--Green-20: hsla(142, 76%, 36%, 0.2);
|
|
||||||
--Opacity--Green--Green-10: hsla(142, 76%, 36%, 0.1);
|
|
||||||
--Opacity--Yellow--Yellow-100: var(--Primitive--Amber--400);
|
|
||||||
--Opacity--Yellow--Yellow-80: hsla(48, 96%, 53%, 0.8);
|
|
||||||
--Opacity--Yellow--Yellow-60: hsla(48, 96%, 53%, 0.6);
|
|
||||||
--Opacity--Yellow--Yellow-40: hsla(48, 96%, 53%, 0.4);
|
|
||||||
--Opacity--Yellow--Yellow-20: hsla(48, 96%, 53%, 0.2);
|
|
||||||
--Opacity--Yellow--Yellow-10: hsla(48, 96%, 53%, 0.1);
|
|
||||||
--Opacity--Violet--Violet-100: var(--Primitive--Violet--500);
|
|
||||||
--Opacity--Violet--Violet-80: hsla(258, 90%, 66%, 0.8);
|
|
||||||
--Opacity--Violet--Violet-60: hsla(258, 90%, 66%, 0.6);
|
|
||||||
--Opacity--Violet--Violet-40: hsla(258, 90%, 66%, 0.4);
|
|
||||||
--Opacity--Violet--Violet-20: hsla(258, 90%, 66%, 0.2);
|
|
||||||
--Opacity--Violet--Violet-10: hsla(258, 90%, 66%, 0.1);
|
|
||||||
--Opacity--Indigo--Indigo-100: var(--Primitive--Indigo--500);
|
|
||||||
--Opacity--Indigo--Indigo-80: hsla(239, 84%, 67%, 0.8);
|
|
||||||
--Opacity--Indigo--Indigo-60: hsla(239, 84%, 67%, 0.6);
|
|
||||||
--Opacity--Indigo--Indigo-40: hsla(239, 84%, 67%, 0.4);
|
|
||||||
--Opacity--Indigo--Indigo-20: hsla(239, 84%, 67%, 0.2);
|
|
||||||
--Opacity--Indigo--Indigo-10: hsla(239, 84%, 67%, 0.1);
|
|
||||||
--Opacity--Blue--Blue-100: var(--Primitive--Blue--500);
|
|
||||||
--Opacity--Blue--Blue-80: hsla(217, 91%, 60%, 0.8);
|
|
||||||
--Opacity--Blue--Blue-60: hsla(217, 91%, 60%, 0.6);
|
|
||||||
--Opacity--Blue--Blue-40: hsla(217, 91%, 60%, 0.4);
|
|
||||||
--Opacity--Blue--Blue-20: hsla(217, 91%, 60%, 0.2);
|
|
||||||
--Opacity--Blue--Blue-10: hsla(217, 91%, 60%, 0.1);
|
|
||||||
--Opacity--Grey--Grey-100: var(--Primitive--Gray--500);
|
|
||||||
--Opacity--Grey--Grey-80: hsla(220, 9%, 46%, 0.8);
|
|
||||||
--Opacity--Grey--Grey-60: hsla(220, 9%, 46%, 0.6);
|
|
||||||
--Opacity--Grey--Grey-40: hsla(220, 9%, 46%, 0.4);
|
|
||||||
--Opacity--Grey--Grey-20: hsla(220, 9%, 46%, 0.2);
|
|
||||||
--Opacity--Grey--Grey-10: hsla(220, 9%, 46%, 0.1);
|
|
||||||
--Opacity--White--White-100: var(--Primitive--White);
|
|
||||||
--Opacity--White--White-80: hsla(0, 0%, 100%, 0.8);
|
|
||||||
--Opacity--White--White-60: hsla(0, 0%, 100%, 0.6);
|
|
||||||
--Opacity--White--White-40: hsla(0, 0%, 100%, 0.4);
|
|
||||||
--Opacity--White--White-20: hsla(0, 0%, 100%, 0.2);
|
|
||||||
--Opacity--White--White-10: hsla(0, 0%, 100%, 0.1);
|
|
||||||
--Opacity--White--White-0: hsla(0, 0%, 100%, 0);
|
|
||||||
--Status--Error--colorErrorBg: var(--color--Red--50);
|
|
||||||
--Status--Error--colorErrorBgHover: var(--color--Red--100);
|
|
||||||
--Status--Error--colorErrorBorder: var(--color--Red--200);
|
|
||||||
--Status--Error--colorErrorBorderHover: var(--color--Red--300);
|
|
||||||
--Status--Error--colorErrorBase: var(--color--Red--500);
|
|
||||||
--Status--Error--colorErrorActive: var(--color--Red--600);
|
|
||||||
--Status--Error--colorErrorTextHover: var(--color--Red--700);
|
|
||||||
--Status--Error--colorErrorText: var(--color--Red--800);
|
|
||||||
--Status--Success--colorSuccessBg: var(--color--Green--50);
|
|
||||||
--Status--Success--colorSuccessBgHover: var(--color--Green--100);
|
|
||||||
--Status--Success--colorSuccessBase: var(--color--Green--500);
|
|
||||||
--Status--Success--colorSuccessTextHover: var(--color--Green--700);
|
|
||||||
--Status--Warning--colorWarningBg: var(--color--Yellow--50);
|
|
||||||
--Status--Warning--colorWarningBgHover: var(--color--Yellow--100);
|
|
||||||
--Status--Warning--colorWarningBase: var(--color--Yellow--500);
|
|
||||||
--Status--Warning--colorWarningActive: var(--color--Yellow--600);
|
|
||||||
--Status--Warning--colorWarningTextHover: var(--color--Yellow--700);
|
|
||||||
--Primitive--Black: hsla(0, 0%, 0%, 1);
|
|
||||||
--Primitive--White: hsla(0, 0%, 100%, 1);
|
|
||||||
--Brand--Base_Colors--Primary: var(--Primitive--Lime--500);
|
|
||||||
--Primitive--Neutral--50: hsla(0, 0%, 98%, 1);
|
|
||||||
--Primitive--Neutral--100: hsla(0, 0%, 96%, 1);
|
|
||||||
--Primitive--Neutral--200: hsla(0, 0%, 90%, 1);
|
|
||||||
--Primitive--Neutral--300: hsla(0, 0%, 83%, 1);
|
|
||||||
--Primitive--Neutral--400: hsla(0, 0%, 64%, 1);
|
|
||||||
--Primitive--Neutral--500: hsla(0, 0%, 45%, 1);
|
|
||||||
--Primitive--Neutral--600: hsla(215, 14%, 34%, 1);
|
|
||||||
--Primitive--Neutral--700: hsla(0, 0%, 25%, 1);
|
|
||||||
--Primitive--Neutral--800: hsla(0, 0%, 15%, 1);
|
|
||||||
--Primitive--Neutral--900: hsla(0, 0%, 9%, 1);
|
|
||||||
--Primitive--Neutral--950: hsla(0, 0%, 4%, 1);
|
|
||||||
--Primitive--Stone--50: hsla(60, 9%, 98%, 1);
|
|
||||||
--Primitive--Stone--100: hsla(60, 5%, 96%, 1);
|
|
||||||
--Primitive--Stone--200: hsla(20, 6%, 90%, 1);
|
|
||||||
--Primitive--Stone--300: hsla(24, 6%, 83%, 1);
|
|
||||||
--Primitive--Stone--400: hsla(24, 5%, 64%, 1);
|
|
||||||
--Primitive--Stone--500: hsla(25, 5%, 45%, 1);
|
|
||||||
--Primitive--Stone--600: hsla(33, 5%, 32%, 1);
|
|
||||||
--Primitive--Stone--700: hsla(30, 6%, 25%, 1);
|
|
||||||
--Primitive--Stone--800: hsla(12, 6%, 15%, 1);
|
|
||||||
--Primitive--Stone--900: hsla(24, 10%, 10%, 1);
|
|
||||||
--Primitive--Stone--950: hsla(20, 14%, 4%, 1);
|
|
||||||
--Primitive--Zinc--50: hsla(0, 0%, 98%, 1);
|
|
||||||
--Primitive--Zinc--100: hsla(240, 5%, 96%, 1);
|
|
||||||
--Primitive--Zinc--200: hsla(240, 6%, 90%, 1);
|
|
||||||
--Primitive--Zinc--300: hsla(240, 5%, 84%, 1);
|
|
||||||
--Primitive--Zinc--400: hsla(240, 5%, 65%, 1);
|
|
||||||
--Primitive--Zinc--500: hsla(240, 4%, 46%, 1);
|
|
||||||
--Primitive--Zinc--600: hsla(240, 5%, 34%, 1);
|
|
||||||
--Primitive--Zinc--700: hsla(240, 5%, 26%, 1);
|
|
||||||
--Primitive--Zinc--800: hsla(240, 4%, 16%, 1);
|
|
||||||
--Primitive--Zinc--900: hsla(240, 6%, 10%, 1);
|
|
||||||
--Primitive--Zinc--950: hsla(240, 10%, 4%, 1);
|
|
||||||
--Primitive--Slate--50: hsla(210, 40%, 98%, 1);
|
|
||||||
--Primitive--Slate--100: hsla(210, 40%, 96%, 1);
|
|
||||||
--Primitive--Slate--200: hsla(214, 32%, 91%, 1);
|
|
||||||
--Primitive--Slate--300: hsla(213, 27%, 84%, 1);
|
|
||||||
--Primitive--Slate--400: hsla(215, 20%, 65%, 1);
|
|
||||||
--Primitive--Slate--500: hsla(215, 16%, 47%, 1);
|
|
||||||
--Primitive--Slate--600: hsla(215, 19%, 35%, 1);
|
|
||||||
--Primitive--Slate--700: hsla(215, 25%, 27%, 1);
|
|
||||||
--Primitive--Slate--800: hsla(217, 33%, 17%, 1);
|
|
||||||
--Primitive--Slate--900: hsla(222, 47%, 11%, 1);
|
|
||||||
--Primitive--Slate--950: hsla(229, 84%, 5%, 1);
|
|
||||||
--Primitive--Gray--50: hsla(210, 20%, 98%, 1);
|
|
||||||
--Primitive--Gray--100: hsla(220, 14%, 96%, 1);
|
|
||||||
--Primitive--Gray--200: hsla(220, 13%, 91%, 1);
|
|
||||||
--Primitive--Gray--300: hsla(216, 12%, 84%, 1);
|
|
||||||
--Primitive--Gray--400: hsla(218, 11%, 65%, 1);
|
|
||||||
--Primitive--Gray--500: hsla(220, 9%, 46%, 1);
|
|
||||||
--Primitive--Gray--600: hsla(0, 0%, 32%, 1);
|
|
||||||
--Primitive--Gray--700: hsla(217, 19%, 27%, 1);
|
|
||||||
--Primitive--Gray--800: hsla(215, 28%, 17%, 1);
|
|
||||||
--Primitive--Gray--900: hsla(221, 39%, 11%, 1);
|
|
||||||
--Primitive--Gray--950: hsla(224, 71%, 4%, 1);
|
|
||||||
--Primitive--Red--50: hsla(0, 86%, 97%, 1);
|
|
||||||
--Primitive--Red--100: hsla(0, 93%, 94%, 1);
|
|
||||||
--Primitive--Red--200: hsla(0, 96%, 89%, 1);
|
|
||||||
--Primitive--Red--300: hsla(0, 94%, 82%, 1);
|
|
||||||
--Primitive--Red--400: hsla(0, 91%, 71%, 1);
|
|
||||||
--Primitive--Red--500: hsla(0, 84%, 60%, 1);
|
|
||||||
--Primitive--Red--600: hsla(0, 72%, 51%, 1);
|
|
||||||
--Primitive--Red--700: hsla(0, 74%, 42%, 1);
|
|
||||||
--Primitive--Red--800: hsla(0, 70%, 35%, 1);
|
|
||||||
--Primitive--Red--900: hsla(0, 63%, 31%, 1);
|
|
||||||
--Primitive--Red--950: hsla(0, 75%, 15%, 1);
|
|
||||||
--Primitive--Orange--50: hsla(33, 100%, 96%, 1);
|
|
||||||
--Primitive--Orange--100: hsla(34, 100%, 92%, 1);
|
|
||||||
--Primitive--Orange--200: hsla(32, 98%, 83%, 1);
|
|
||||||
--Primitive--Orange--300: hsla(31, 97%, 72%, 1);
|
|
||||||
--Primitive--Orange--400: hsla(27, 96%, 61%, 1);
|
|
||||||
--Primitive--Orange--500: hsla(25, 95%, 53%, 1);
|
|
||||||
--Primitive--Orange--600: hsla(21, 90%, 48%, 1);
|
|
||||||
--Primitive--Orange--700: hsla(17, 88%, 40%, 1);
|
|
||||||
--Primitive--Orange--800: hsla(15, 79%, 34%, 1);
|
|
||||||
--Primitive--Orange--900: hsla(15, 75%, 28%, 1);
|
|
||||||
--Primitive--Orange--950: hsla(13, 81%, 15%, 1);
|
|
||||||
--Primitive--Amber--50: hsla(48, 100%, 96%, 1);
|
|
||||||
--Primitive--Amber--100: hsla(48, 96%, 89%, 1);
|
|
||||||
--Primitive--Amber--200: hsla(48, 97%, 77%, 1);
|
|
||||||
--Primitive--Amber--300: hsla(46, 97%, 65%, 1);
|
|
||||||
--Primitive--Amber--400: hsla(43, 96%, 56%, 1);
|
|
||||||
--Primitive--Amber--500: hsla(38, 92%, 50%, 1);
|
|
||||||
--Primitive--Amber--600: hsla(32, 95%, 44%, 1);
|
|
||||||
--Primitive--Amber--700: hsla(26, 90%, 37%, 1);
|
|
||||||
--Primitive--Amber--800: hsla(23, 83%, 31%, 1);
|
|
||||||
--Primitive--Amber--900: hsla(22, 78%, 26%, 1);
|
|
||||||
--Primitive--Amber--950: hsla(21, 92%, 14%, 1);
|
|
||||||
--Primitive--Yellow--50: hsla(55, 92%, 95%, 1);
|
|
||||||
--Primitive--Yellow--100: hsla(55, 97%, 88%, 1);
|
|
||||||
--Primitive--Yellow--200: hsla(53, 98%, 77%, 1);
|
|
||||||
--Primitive--Yellow--300: hsla(50, 98%, 64%, 1);
|
|
||||||
--Primitive--Yellow--400: hsla(48, 96%, 53%, 1);
|
|
||||||
--Primitive--Yellow--500: hsla(45, 93%, 47%, 1);
|
|
||||||
--Primitive--Yellow--600: hsla(41, 96%, 40%, 1);
|
|
||||||
--Primitive--Yellow--700: hsla(35, 92%, 33%, 1);
|
|
||||||
--Primitive--Yellow--800: hsla(32, 81%, 29%, 1);
|
|
||||||
--Primitive--Yellow--900: hsla(28, 73%, 26%, 1);
|
|
||||||
--Primitive--Yellow--950: hsla(26, 83%, 14%, 1);
|
|
||||||
--Primitive--Lime--50: hsla(78, 92%, 95%, 1);
|
|
||||||
--Primitive--Lime--100: hsla(80, 89%, 89%, 1);
|
|
||||||
--Primitive--Lime--200: hsla(81, 88%, 80%, 1);
|
|
||||||
--Primitive--Lime--300: hsla(82, 85%, 67%, 1);
|
|
||||||
--Primitive--Lime--400: hsla(83, 78%, 55%, 1);
|
|
||||||
--Primitive--Lime--500: hsla(84, 81%, 44%, 1);
|
|
||||||
--Primitive--Lime--600: hsla(85, 85%, 35%, 1);
|
|
||||||
--Primitive--Lime--700: hsla(86, 78%, 27%, 1);
|
|
||||||
--Primitive--Lime--800: hsla(86, 69%, 23%, 1);
|
|
||||||
--Primitive--Lime--900: hsla(88, 61%, 20%, 1);
|
|
||||||
--Primitive--Lime--950: hsla(89, 80%, 10%, 1);
|
|
||||||
--Primitive--Green--50: hsla(138, 76%, 97%, 1);
|
|
||||||
--Primitive--Green--100: hsla(141, 84%, 93%, 1);
|
|
||||||
--Primitive--Green--200: hsla(141, 79%, 85%, 1);
|
|
||||||
--Primitive--Green--300: hsla(142, 77%, 73%, 1);
|
|
||||||
--Primitive--Green--400: hsla(142, 69%, 58%, 1);
|
|
||||||
--Primitive--Green--500: hsla(142, 71%, 45%, 1);
|
|
||||||
--Primitive--Green--600: hsla(142, 76%, 36%, 1);
|
|
||||||
--Primitive--Green--700: hsla(142, 72%, 29%, 1);
|
|
||||||
--Primitive--Green--800: hsla(143, 64%, 24%, 1);
|
|
||||||
--Primitive--Green--900: hsla(144, 61%, 20%, 1);
|
|
||||||
--Primitive--Green--950: hsla(145, 80%, 10%, 1);
|
|
||||||
--Primitive--Emerald--50: hsla(152, 81%, 96%, 1);
|
|
||||||
--Primitive--Emerald--100: hsla(149, 80%, 90%, 1);
|
|
||||||
--Primitive--Emerald--200: hsla(152, 76%, 80%, 1);
|
|
||||||
--Primitive--Emerald--300: hsla(156, 72%, 67%, 1);
|
|
||||||
--Primitive--Emerald--400: hsla(158, 64%, 52%, 1);
|
|
||||||
--Primitive--Emerald--500: hsla(160, 84%, 39%, 1);
|
|
||||||
--Primitive--Emerald--600: hsla(161, 94%, 30%, 1);
|
|
||||||
--Primitive--Emerald--700: hsla(163, 94%, 24%, 1);
|
|
||||||
--Primitive--Emerald--800: hsla(163, 88%, 20%, 1);
|
|
||||||
--Primitive--Emerald--900: hsla(164, 86%, 16%, 1);
|
|
||||||
--Primitive--Emerald--950: hsla(166, 91%, 9%, 1);
|
|
||||||
--Primitive--Teal--50: hsla(166, 76%, 97%, 1);
|
|
||||||
--Primitive--Teal--100: hsla(167, 85%, 89%, 1);
|
|
||||||
--Primitive--Teal--200: hsla(168, 84%, 78%, 1);
|
|
||||||
--Primitive--Teal--300: hsla(171, 77%, 64%, 1);
|
|
||||||
--Primitive--Teal--400: hsla(172, 66%, 50%, 1);
|
|
||||||
--Primitive--Teal--500: hsla(173, 80%, 40%, 1);
|
|
||||||
--Primitive--Teal--600: hsla(175, 84%, 32%, 1);
|
|
||||||
--Primitive--Teal--700: hsla(175, 77%, 26%, 1);
|
|
||||||
--Primitive--Teal--800: hsla(176, 69%, 22%, 1);
|
|
||||||
--Primitive--Teal--900: hsla(176, 61%, 19%, 1);
|
|
||||||
--Primitive--Teal--950: hsla(179, 84%, 10%, 1);
|
|
||||||
--Primitive--Cyan--50: hsla(183, 100%, 96%, 1);
|
|
||||||
--Primitive--Cyan--100: hsla(185, 96%, 90%, 1);
|
|
||||||
--Primitive--Cyan--200: hsla(186, 94%, 82%, 1);
|
|
||||||
--Primitive--Cyan--300: hsla(187, 92%, 69%, 1);
|
|
||||||
--Primitive--Cyan--400: hsla(188, 86%, 53%, 1);
|
|
||||||
--Primitive--Cyan--500: hsla(189, 94%, 43%, 1);
|
|
||||||
--Primitive--Cyan--600: hsla(192, 91%, 36%, 1);
|
|
||||||
--Primitive--Cyan--700: hsla(193, 82%, 31%, 1);
|
|
||||||
--Primitive--Cyan--800: hsla(194, 70%, 27%, 1);
|
|
||||||
--Primitive--Cyan--900: hsla(196, 64%, 24%, 1);
|
|
||||||
--Primitive--Cyan--950: hsla(197, 79%, 15%, 1);
|
|
||||||
--Primitive--Sky--50: hsla(204, 100%, 97%, 1);
|
|
||||||
--Primitive--Sky--100: hsla(204, 94%, 94%, 1);
|
|
||||||
--Primitive--Sky--200: hsla(201, 94%, 86%, 1);
|
|
||||||
--Primitive--Sky--300: hsla(199, 95%, 74%, 1);
|
|
||||||
--Primitive--Sky--400: hsla(198, 93%, 60%, 1);
|
|
||||||
--Primitive--Sky--500: hsla(199, 89%, 48%, 1);
|
|
||||||
--Primitive--Sky--600: hsla(200, 98%, 39%, 1);
|
|
||||||
--Primitive--Sky--700: hsla(201, 96%, 32%, 1);
|
|
||||||
--Primitive--Sky--800: hsla(201, 90%, 27%, 1);
|
|
||||||
--Primitive--Sky--900: hsla(202, 80%, 24%, 1);
|
|
||||||
--Primitive--Sky--950: hsla(204, 80%, 16%, 1);
|
|
||||||
--Primitive--Blue--50: hsla(214, 100%, 97%, 1);
|
|
||||||
--Primitive--Blue--100: hsla(214, 95%, 93%, 1);
|
|
||||||
--Primitive--Blue--200: hsla(213, 97%, 87%, 1);
|
|
||||||
--Primitive--Blue--300: hsla(212, 96%, 78%, 1);
|
|
||||||
--Primitive--Blue--400: hsla(213, 94%, 68%, 1);
|
|
||||||
--Primitive--Blue--500: hsla(217, 91%, 60%, 1);
|
|
||||||
--Primitive--Blue--600: hsla(221, 83%, 53%, 1);
|
|
||||||
--Primitive--Blue--700: hsla(224, 76%, 48%, 1);
|
|
||||||
--Primitive--Blue--800: hsla(226, 71%, 40%, 1);
|
|
||||||
--Primitive--Blue--900: hsla(224, 64%, 33%, 1);
|
|
||||||
--Primitive--Blue--950: hsla(226, 57%, 21%, 1);
|
|
||||||
--Primitive--Indigo--50: hsla(226, 100%, 97%, 1);
|
|
||||||
--Primitive--Indigo--100: hsla(226, 100%, 94%, 1);
|
|
||||||
--Primitive--Indigo--200: hsla(228, 96%, 89%, 1);
|
|
||||||
--Primitive--Indigo--300: hsla(230, 94%, 82%, 1);
|
|
||||||
--Primitive--Indigo--400: hsla(234, 89%, 74%, 1);
|
|
||||||
--Primitive--Indigo--500: hsla(239, 84%, 67%, 1);
|
|
||||||
--Primitive--Indigo--600: hsla(243, 75%, 59%, 1);
|
|
||||||
--Primitive--Indigo--700: hsla(245, 58%, 51%, 1);
|
|
||||||
--Primitive--Indigo--800: hsla(244, 55%, 41%, 1);
|
|
||||||
--Primitive--Indigo--900: hsla(242, 47%, 34%, 1);
|
|
||||||
--Primitive--Indigo--950: hsla(244, 47%, 20%, 1);
|
|
||||||
--Primitive--Violet--50: hsla(250, 100%, 98%, 1);
|
|
||||||
--Primitive--Violet--100: hsla(251, 91%, 95%, 1);
|
|
||||||
--Primitive--Violet--200: hsla(251, 95%, 92%, 1);
|
|
||||||
--Primitive--Violet--300: hsla(253, 95%, 85%, 1);
|
|
||||||
--Primitive--Violet--400: hsla(255, 92%, 76%, 1);
|
|
||||||
--Primitive--Violet--500: hsla(258, 90%, 66%, 1);
|
|
||||||
--Primitive--Violet--600: hsla(262, 83%, 58%, 1);
|
|
||||||
--Primitive--Violet--700: hsla(263, 70%, 50%, 1);
|
|
||||||
--Primitive--Violet--800: hsla(263, 69%, 42%, 1);
|
|
||||||
--Primitive--Violet--900: hsla(264, 67%, 35%, 1);
|
|
||||||
--Primitive--Violet--950: hsla(262, 78%, 23%, 1);
|
|
||||||
--Primitive--Purple--50: hsla(270, 100%, 98%, 1);
|
|
||||||
--Primitive--Purple--100: hsla(269, 100%, 95%, 1);
|
|
||||||
--Primitive--Purple--200: hsla(269, 100%, 92%, 1);
|
|
||||||
--Primitive--Purple--300: hsla(269, 97%, 85%, 1);
|
|
||||||
--Primitive--Purple--400: hsla(270, 95%, 75%, 1);
|
|
||||||
--Primitive--Purple--500: hsla(271, 91%, 65%, 1);
|
|
||||||
--Primitive--Purple--600: hsla(271, 81%, 56%, 1);
|
|
||||||
--Primitive--Purple--700: hsla(272, 72%, 47%, 1);
|
|
||||||
--Primitive--Purple--800: hsla(273, 67%, 39%, 1);
|
|
||||||
--Primitive--Purple--900: hsla(274, 66%, 32%, 1);
|
|
||||||
--Primitive--Purple--950: hsla(274, 87%, 21%, 1);
|
|
||||||
--Primitive--Fuchsia--50: hsla(289, 100%, 98%, 1);
|
|
||||||
--Primitive--Fuchsia--100: hsla(287, 100%, 95%, 1);
|
|
||||||
--Primitive--Fuchsia--200: hsla(288, 96%, 91%, 1);
|
|
||||||
--Primitive--Fuchsia--300: hsla(291, 93%, 83%, 1);
|
|
||||||
--Primitive--Fuchsia--400: hsla(292, 91%, 73%, 1);
|
|
||||||
--Primitive--Fuchsia--500: hsla(292, 84%, 61%, 1);
|
|
||||||
--Primitive--Fuchsia--600: hsla(293, 69%, 49%, 1);
|
|
||||||
--Primitive--Fuchsia--700: hsla(295, 72%, 40%, 1);
|
|
||||||
--Primitive--Fuchsia--800: hsla(295, 70%, 33%, 1);
|
|
||||||
--Primitive--Fuchsia--900: hsla(297, 64%, 28%, 1);
|
|
||||||
--Primitive--Fuchsia--950: hsla(297, 90%, 16%, 1);
|
|
||||||
--Primitive--Pink--50: hsla(327, 73%, 97%, 1);
|
|
||||||
--Primitive--Pink--100: hsla(326, 78%, 95%, 1);
|
|
||||||
--Primitive--Pink--200: hsla(326, 85%, 90%, 1);
|
|
||||||
--Primitive--Pink--300: hsla(327, 87%, 82%, 1);
|
|
||||||
--Primitive--Pink--400: hsla(329, 86%, 70%, 1);
|
|
||||||
--Primitive--Pink--500: hsla(330, 81%, 60%, 1);
|
|
||||||
--Primitive--Pink--600: hsla(333, 71%, 51%, 1);
|
|
||||||
--Primitive--Pink--700: hsla(335, 78%, 42%, 1);
|
|
||||||
--Primitive--Pink--800: hsla(336, 74%, 35%, 1);
|
|
||||||
--Primitive--Pink--900: hsla(336, 69%, 30%, 1);
|
|
||||||
--Primitive--Pink--950: hsla(336, 84%, 17%, 1);
|
|
||||||
--Primitive--Rose--50: hsla(356, 100%, 97%, 1);
|
|
||||||
--Primitive--Rose--100: hsla(356, 100%, 95%, 1);
|
|
||||||
--Primitive--Rose--200: hsla(353, 96%, 90%, 1);
|
|
||||||
--Primitive--Rose--300: hsla(353, 96%, 82%, 1);
|
|
||||||
--Primitive--Rose--400: hsla(351, 95%, 71%, 1);
|
|
||||||
--Primitive--Rose--500: hsla(350, 89%, 60%, 1);
|
|
||||||
--Primitive--Rose--600: hsla(347, 77%, 50%, 1);
|
|
||||||
--Primitive--Rose--700: hsla(345, 83%, 41%, 1);
|
|
||||||
--Primitive--Rose--800: hsla(343, 80%, 35%, 1);
|
|
||||||
--Primitive--Rose--900: hsla(342, 75%, 30%, 1);
|
|
||||||
--Primitive--Rose--950: hsla(343, 88%, 16%, 1);
|
|
||||||
--Brand--Base_Colors--Destructive: var(--Primitive--Red--500);
|
|
||||||
--Brand--Base_Colors--Success: var(--Primitive--Green--500);
|
|
||||||
--Brand--Base_Colors--Warning: var(--Primitive--Amber--500);
|
|
||||||
--Brand--Base_Colors--White: var(--Primitive--White);
|
|
||||||
--Brand--Base_Colors--Black: var(--Primitive--Black);
|
|
||||||
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--50); /*页面背景色：应用在整个页面的最底层。*/
|
|
||||||
--Brand--Semantic_Colors--Background-subtle: hsla(
|
|
||||||
0,
|
|
||||||
0%,
|
|
||||||
0%,
|
|
||||||
0.02
|
|
||||||
); /*细微背景色：用于需要与主背景有微弱区分的区域，如代码块背景。*/
|
|
||||||
--Brand--Semantic_Colors--Foreground: hsla(0, 0%, 0%, 0.9); /*主要前景/文字色：用于正文、标题等。*/
|
|
||||||
--Brand--Semantic_Colors--Foreground-secondary: hsla(0, 0%, 0%, 0.6); /*次要前景/文字色：用于辅助性文本、描述。*/
|
|
||||||
--Brand--Semantic_Colors--Foreground-muted: hsla(0, 0%, 0%, 0.4); /*静默前景/文字色：用于禁用状态的文字、占位符。*/
|
|
||||||
--Brand--Semantic_Colors--Border: hsla(0, 0%, 0%, 0.1); /*默认边框色：用于卡片、输入框、分隔线。*/
|
|
||||||
--Brand--Semantic_Colors--Border-hover: hsla(0, 0%, 0%, 0.2); /*激活边框色：用于元素被按下或激活时的边框。*/
|
|
||||||
--Brand--Semantic_Colors--Border-active: hsla(0, 0%, 0%, 0.3); /*激活边框色：用于元素被按下或激活时的边框。*/
|
|
||||||
--Brand--Semantic_Colors--Ring: hsla(
|
|
||||||
84,
|
|
||||||
81%,
|
|
||||||
44%,
|
|
||||||
0.4
|
|
||||||
); /*聚焦环颜色：用于输入框等元素在聚焦 (Focus) 状态下的外发光。*/
|
|
||||||
--Brand--UI_Element_Colors--Modal--Backdrop: hsla(0, 0%, 0%, 0.4);
|
|
||||||
--Brand--UI_Element_Colors--Modal--Thumb: hsla(0, 0%, 0%, 0.2);
|
|
||||||
--Brand--UI_Element_Colors--Modal--Thumb_Hover: hsla(0, 0%, 0%, 0.3);
|
|
||||||
--Brand--UI_Element_Colors--Icon--Default: var(--Brand--Semantic_Colors--Foreground-secondary);
|
|
||||||
--Brand--UI_Element_Colors--Icon--Hover: var(--Brand--Semantic_Colors--Foreground);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Background: var(--Brand--Base_Colors--White);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Border: var(--Brand--Semantic_Colors--Border);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Border_Hover: var(--Brand--Semantic_Colors--Border-hover);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Border_Focus: var(--Brand--Base_Colors--Primary);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Background: var(--Brand--Base_Colors--Primary);
|
|
||||||
--Brand--UI_Element_Colors--Card_Container--Background: var(--Brand--Base_Colors--White);
|
|
||||||
--Brand--UI_Element_Colors--Card_Container--Border: var(--Brand--Semantic_Colors--Border);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Background: hsla(0, 0%, 0%, 0);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Text: var(--Brand--Semantic_Colors--Foreground);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Background_Hover: hsla(0, 0%, 0%, 0.05);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Background_Active: hsla(0, 0%, 0%, 0.1);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Background: hsla(0, 0%, 0%, 0.05);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Text: var(--Brand--Semantic_Colors--Foreground);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Background_Hover: hsla(0, 0%, 0%, 0.85);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Background_Active: hsla(0, 0%, 0%, 0.7);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Border: var(--Brand--Semantic_Colors--Border);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Text: var(--Brand--Base_Colors--White);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Background_Hover: hsla(84, 81%, 44%, 0.85);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--2nd_Background: hsla(84, 81%, 44%, 0.1);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--3rd_Background: hsla(84, 81%, 44%, 0.05);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Background_Active: hsla(84, 81%, 44%, 0.7);
|
|
||||||
--Boolean: false;
|
|
||||||
|
|
||||||
/* Color: Dark mode */
|
|
||||||
--Opacity--Red--Red-100: var(--Primitive--Red--600);
|
|
||||||
--Opacity--Red--Red-80: hsla(0, 72%, 51%, 0.8);
|
|
||||||
--Opacity--Red--Red-60: hsla(0, 72%, 51%, 0.6);
|
|
||||||
--Opacity--Red--Red-40: hsla(0, 72%, 51%, 0.4);
|
|
||||||
--Opacity--Red--Red-20: hsla(0, 72%, 51%, 0.2);
|
|
||||||
--Opacity--Red--Red-10: hsla(0, 72%, 51%, 0.1);
|
|
||||||
--Opacity--Green--Green-100: var(--Primitive--Green--600);
|
|
||||||
--Opacity--Green--Green-80: hsla(142, 76%, 36%, 0.8);
|
|
||||||
--Opacity--Green--Green-60: hsla(142, 76%, 36%, 0.6);
|
|
||||||
--Opacity--Green--Green-40: hsla(142, 76%, 36%, 0.4);
|
|
||||||
--Opacity--Green--Green-20: hsla(142, 76%, 36%, 0.2);
|
|
||||||
--Opacity--Green--Green-10: hsla(142, 76%, 36%, 0.1);
|
|
||||||
--Opacity--Yellow--Yellow-100: var(--Primitive--Yellow--400);
|
|
||||||
--Opacity--Yellow--Yellow-80: hsla(48, 96%, 53%, 0.8);
|
|
||||||
--Opacity--Yellow--Yellow-60: hsla(48, 96%, 53%, 0.6);
|
|
||||||
--Opacity--Yellow--Yellow-40: hsla(48, 96%, 53%, 0.4);
|
|
||||||
--Opacity--Yellow--Yellow-20: hsla(48, 96%, 53%, 0.2);
|
|
||||||
--Opacity--Yellow--Yellow-10: hsla(48, 96%, 53%, 0.1);
|
|
||||||
--Opacity--Violet--Violet-100: var(--Primitive--Violet--500);
|
|
||||||
--Opacity--Violet--Violet-80: hsla(258, 90%, 66%, 0.8);
|
|
||||||
--Opacity--Violet--Violet-60: hsla(258, 90%, 66%, 0.6);
|
|
||||||
--Opacity--Violet--Violet-40: hsla(258, 90%, 66%, 0.4);
|
|
||||||
--Opacity--Violet--Violet-20: hsla(258, 90%, 66%, 0.2);
|
|
||||||
--Opacity--Violet--Violet-10: hsla(258, 90%, 66%, 0.1);
|
|
||||||
--Opacity--Indigo--Indigo-100: var(--Primitive--Indigo--500);
|
|
||||||
--Opacity--Indigo--Indigo-80: hsla(239, 84%, 67%, 0.8);
|
|
||||||
--Opacity--Indigo--Indigo-60: hsla(239, 84%, 67%, 0.6);
|
|
||||||
--Opacity--Indigo--Indigo-40: hsla(239, 84%, 67%, 0.4);
|
|
||||||
--Opacity--Indigo--Indigo-20: hsla(239, 84%, 67%, 0.2);
|
|
||||||
--Opacity--Indigo--Indigo-10: hsla(239, 84%, 67%, 0.1);
|
|
||||||
--Opacity--Blue--Blue-100: var(--Primitive--Blue--500);
|
|
||||||
--Opacity--Blue--Blue-80: hsla(217, 91%, 60%, 0.8);
|
|
||||||
--Opacity--Blue--Blue-60: hsla(217, 91%, 60%, 0.6);
|
|
||||||
--Opacity--Blue--Blue-40: hsla(217, 91%, 60%, 0.4);
|
|
||||||
--Opacity--Blue--Blue-20: hsla(217, 91%, 60%, 0.2);
|
|
||||||
--Opacity--Blue--Blue-10: hsla(217, 91%, 60%, 0.1);
|
|
||||||
--Opacity--Grey--Grey-100: var(--Primitive--Gray--500);
|
|
||||||
--Opacity--Grey--Grey-80: hsla(220, 9%, 46%, 0.8);
|
|
||||||
--Opacity--Grey--Grey-60: hsla(220, 9%, 46%, 0.6);
|
|
||||||
--Opacity--Grey--Grey-40: hsla(220, 9%, 46%, 0.4);
|
|
||||||
--Opacity--Grey--Grey-20: hsla(220, 9%, 46%, 0.2);
|
|
||||||
--Opacity--Grey--Grey-10: hsla(220, 9%, 46%, 0.1);
|
|
||||||
--Opacity--White--White-100: var(--Primitive--White);
|
|
||||||
--Opacity--White--White-80: hsla(0, 0%, 100%, 0.8);
|
|
||||||
--Opacity--White--White-60: hsla(0, 0%, 100%, 0.6);
|
|
||||||
--Opacity--White--White-40: hsla(0, 0%, 100%, 0.4);
|
|
||||||
--Opacity--White--White-20: hsla(0, 0%, 100%, 0.2);
|
|
||||||
--Opacity--White--White-10: hsla(0, 0%, 100%, 0.1);
|
|
||||||
--Opacity--White--White-0: hsla(0, 0%, 100%, 0);
|
|
||||||
--Status--Error--colorErrorBg: var(--color--Red--900);
|
|
||||||
--Status--Error--colorErrorBgHover: var(--color--Red--800);
|
|
||||||
--Status--Error--colorErrorBorder: var(--color--Red--700);
|
|
||||||
--Status--Error--colorErrorBorderHover: var(--color--Red--600);
|
|
||||||
--Status--Error--colorErrorBase: var(--color--Red--400);
|
|
||||||
--Status--Error--colorErrorActive: var(--color--Red--300);
|
|
||||||
--Status--Error--colorErrorTextHover: var(--color--Red--200);
|
|
||||||
--Status--Error--colorErrorText: var(--color--Red--100);
|
|
||||||
--Status--Success--colorSuccessBg: var(--color--Green--900);
|
|
||||||
--Status--Success--colorSuccessBgHover: var(--color--Green--800);
|
|
||||||
--Status--Success--colorSuccessBase: var(--color--Green--400);
|
|
||||||
--Status--Success--colorSuccessTextHover: var(--color--Green--200);
|
|
||||||
--Status--Warning--colorWarningBg: var(--color--Yellow--900);
|
|
||||||
--Status--Warning--colorWarningBgHover: var(--color--Yellow--800);
|
|
||||||
--Status--Warning--colorWarningBase: var(--color--Yellow--400);
|
|
||||||
--Status--Warning--colorWarningActive: var(--color--Yellow--300);
|
|
||||||
--Status--Warning--colorWarningTextHover: var(--color--Yellow--200);
|
|
||||||
--Primitive--Black: hsla(0, 0%, 0%, 1);
|
|
||||||
--Primitive--White: hsla(0, 0%, 100%, 1);
|
|
||||||
--Brand--Base_Colors--Primary: var(--Primitive--Lime--500);
|
|
||||||
--Primitive--Neutral--50: hsla(0, 0%, 98%, 1);
|
|
||||||
--Primitive--Neutral--100: hsla(0, 0%, 96%, 1);
|
|
||||||
--Primitive--Neutral--200: hsla(0, 0%, 90%, 1);
|
|
||||||
--Primitive--Neutral--300: hsla(0, 0%, 83%, 1);
|
|
||||||
--Primitive--Neutral--400: hsla(0, 0%, 64%, 1);
|
|
||||||
--Primitive--Neutral--500: hsla(0, 0%, 45%, 1);
|
|
||||||
--Primitive--Neutral--600: hsla(215, 14%, 34%, 1);
|
|
||||||
--Primitive--Neutral--700: hsla(0, 0%, 25%, 1);
|
|
||||||
--Primitive--Neutral--800: hsla(0, 0%, 15%, 1);
|
|
||||||
--Primitive--Neutral--900: hsla(0, 0%, 9%, 1);
|
|
||||||
--Primitive--Neutral--950: hsla(0, 0%, 4%, 1);
|
|
||||||
--Primitive--Stone--50: hsla(60, 9%, 98%, 1);
|
|
||||||
--Primitive--Stone--100: hsla(60, 5%, 96%, 1);
|
|
||||||
--Primitive--Stone--200: hsla(20, 6%, 90%, 1);
|
|
||||||
--Primitive--Stone--300: hsla(24, 6%, 83%, 1);
|
|
||||||
--Primitive--Stone--400: hsla(24, 5%, 64%, 1);
|
|
||||||
--Primitive--Stone--500: hsla(25, 5%, 45%, 1);
|
|
||||||
--Primitive--Stone--600: hsla(33, 5%, 32%, 1);
|
|
||||||
--Primitive--Stone--700: hsla(30, 6%, 25%, 1);
|
|
||||||
--Primitive--Stone--800: hsla(12, 6%, 15%, 1);
|
|
||||||
--Primitive--Stone--900: hsla(24, 10%, 10%, 1);
|
|
||||||
--Primitive--Stone--950: hsla(20, 14%, 4%, 1);
|
|
||||||
--Primitive--Zinc--50: hsla(0, 0%, 98%, 1);
|
|
||||||
--Primitive--Zinc--100: hsla(240, 5%, 96%, 1);
|
|
||||||
--Primitive--Zinc--200: hsla(240, 6%, 90%, 1);
|
|
||||||
--Primitive--Zinc--300: hsla(240, 5%, 84%, 1);
|
|
||||||
--Primitive--Zinc--400: hsla(240, 5%, 65%, 1);
|
|
||||||
--Primitive--Zinc--500: hsla(240, 4%, 46%, 1);
|
|
||||||
--Primitive--Zinc--600: hsla(240, 5%, 34%, 1);
|
|
||||||
--Primitive--Zinc--700: hsla(240, 5%, 26%, 1);
|
|
||||||
--Primitive--Zinc--800: hsla(240, 4%, 16%, 1);
|
|
||||||
--Primitive--Zinc--900: hsla(240, 6%, 10%, 1);
|
|
||||||
--Primitive--Zinc--950: hsla(240, 10%, 4%, 1);
|
|
||||||
--Primitive--Slate--50: hsla(210, 40%, 98%, 1);
|
|
||||||
--Primitive--Slate--100: hsla(210, 40%, 96%, 1);
|
|
||||||
--Primitive--Slate--200: hsla(214, 32%, 91%, 1);
|
|
||||||
--Primitive--Slate--300: hsla(213, 27%, 84%, 1);
|
|
||||||
--Primitive--Slate--400: hsla(215, 20%, 65%, 1);
|
|
||||||
--Primitive--Slate--500: hsla(215, 16%, 47%, 1);
|
|
||||||
--Primitive--Slate--600: hsla(215, 19%, 35%, 1);
|
|
||||||
--Primitive--Slate--700: hsla(215, 25%, 27%, 1);
|
|
||||||
--Primitive--Slate--800: hsla(217, 33%, 17%, 1);
|
|
||||||
--Primitive--Slate--900: hsla(222, 47%, 11%, 1);
|
|
||||||
--Primitive--Slate--950: hsla(229, 84%, 5%, 1);
|
|
||||||
--Primitive--Gray--50: hsla(210, 20%, 98%, 1);
|
|
||||||
--Primitive--Gray--100: hsla(220, 14%, 96%, 1);
|
|
||||||
--Primitive--Gray--200: hsla(220, 13%, 91%, 1);
|
|
||||||
--Primitive--Gray--300: hsla(216, 12%, 84%, 1);
|
|
||||||
--Primitive--Gray--400: hsla(218, 11%, 65%, 1);
|
|
||||||
--Primitive--Gray--500: hsla(220, 9%, 46%, 1);
|
|
||||||
--Primitive--Gray--600: hsla(0, 0%, 32%, 1);
|
|
||||||
--Primitive--Gray--700: hsla(217, 19%, 27%, 1);
|
|
||||||
--Primitive--Gray--800: hsla(215, 28%, 17%, 1);
|
|
||||||
--Primitive--Gray--900: hsla(221, 39%, 11%, 1);
|
|
||||||
--Primitive--Gray--950: hsla(224, 71%, 4%, 1);
|
|
||||||
--Primitive--Red--50: hsla(0, 86%, 97%, 1);
|
|
||||||
--Primitive--Red--100: hsla(0, 93%, 94%, 1);
|
|
||||||
--Primitive--Red--200: hsla(0, 96%, 89%, 1);
|
|
||||||
--Primitive--Red--300: hsla(0, 94%, 82%, 1);
|
|
||||||
--Primitive--Red--400: hsla(0, 91%, 71%, 1);
|
|
||||||
--Primitive--Red--500: hsla(0, 84%, 60%, 1);
|
|
||||||
--Primitive--Red--600: hsla(0, 72%, 51%, 1);
|
|
||||||
--Primitive--Red--700: hsla(0, 74%, 42%, 1);
|
|
||||||
--Primitive--Red--800: hsla(0, 70%, 35%, 1);
|
|
||||||
--Primitive--Red--900: hsla(0, 63%, 31%, 1);
|
|
||||||
--Primitive--Red--950: hsla(0, 75%, 15%, 1);
|
|
||||||
--Primitive--Orange--50: hsla(33, 100%, 96%, 1);
|
|
||||||
--Primitive--Orange--100: hsla(34, 100%, 92%, 1);
|
|
||||||
--Primitive--Orange--200: hsla(32, 98%, 83%, 1);
|
|
||||||
--Primitive--Orange--300: hsla(31, 97%, 72%, 1);
|
|
||||||
--Primitive--Orange--400: hsla(27, 96%, 61%, 1);
|
|
||||||
--Primitive--Orange--500: hsla(25, 95%, 53%, 1);
|
|
||||||
--Primitive--Orange--600: hsla(21, 90%, 48%, 1);
|
|
||||||
--Primitive--Orange--700: hsla(17, 88%, 40%, 1);
|
|
||||||
--Primitive--Orange--800: hsla(15, 79%, 34%, 1);
|
|
||||||
--Primitive--Orange--900: hsla(15, 75%, 28%, 1);
|
|
||||||
--Primitive--Orange--950: hsla(13, 81%, 15%, 1);
|
|
||||||
--Primitive--Amber--50: hsla(48, 100%, 96%, 1);
|
|
||||||
--Primitive--Amber--100: hsla(48, 96%, 89%, 1);
|
|
||||||
--Primitive--Amber--200: hsla(48, 97%, 77%, 1);
|
|
||||||
--Primitive--Amber--300: hsla(46, 97%, 65%, 1);
|
|
||||||
--Primitive--Amber--400: hsla(43, 96%, 56%, 1);
|
|
||||||
--Primitive--Amber--500: hsla(38, 92%, 50%, 1);
|
|
||||||
--Primitive--Amber--600: hsla(32, 95%, 44%, 1);
|
|
||||||
--Primitive--Amber--700: hsla(26, 90%, 37%, 1);
|
|
||||||
--Primitive--Amber--800: hsla(23, 83%, 31%, 1);
|
|
||||||
--Primitive--Amber--900: hsla(22, 78%, 26%, 1);
|
|
||||||
--Primitive--Amber--950: hsla(21, 92%, 14%, 1);
|
|
||||||
--Primitive--Yellow--50: hsla(55, 92%, 95%, 1);
|
|
||||||
--Primitive--Yellow--100: hsla(55, 97%, 88%, 1);
|
|
||||||
--Primitive--Yellow--200: hsla(53, 98%, 77%, 1);
|
|
||||||
--Primitive--Yellow--300: hsla(50, 98%, 64%, 1);
|
|
||||||
--Primitive--Yellow--400: hsla(48, 96%, 53%, 1);
|
|
||||||
--Primitive--Yellow--500: hsla(45, 93%, 47%, 1);
|
|
||||||
--Primitive--Yellow--600: hsla(41, 96%, 40%, 1);
|
|
||||||
--Primitive--Yellow--700: hsla(35, 92%, 33%, 1);
|
|
||||||
--Primitive--Yellow--800: hsla(32, 81%, 29%, 1);
|
|
||||||
--Primitive--Yellow--900: hsla(28, 73%, 26%, 1);
|
|
||||||
--Primitive--Yellow--950: hsla(26, 83%, 14%, 1);
|
|
||||||
--Primitive--Lime--50: hsla(78, 92%, 95%, 1);
|
|
||||||
--Primitive--Lime--100: hsla(80, 89%, 89%, 1);
|
|
||||||
--Primitive--Lime--200: hsla(81, 88%, 80%, 1);
|
|
||||||
--Primitive--Lime--300: hsla(82, 85%, 67%, 1);
|
|
||||||
--Primitive--Lime--400: hsla(83, 78%, 55%, 1);
|
|
||||||
--Primitive--Lime--500: hsla(84, 81%, 44%, 1);
|
|
||||||
--Primitive--Lime--600: hsla(85, 85%, 35%, 1);
|
|
||||||
--Primitive--Lime--700: hsla(86, 78%, 27%, 1);
|
|
||||||
--Primitive--Lime--800: hsla(86, 69%, 23%, 1);
|
|
||||||
--Primitive--Lime--900: hsla(88, 61%, 20%, 1);
|
|
||||||
--Primitive--Lime--950: hsla(89, 80%, 10%, 1);
|
|
||||||
--Primitive--Green--50: hsla(138, 76%, 97%, 1);
|
|
||||||
--Primitive--Green--100: hsla(141, 84%, 93%, 1);
|
|
||||||
--Primitive--Green--200: hsla(141, 79%, 85%, 1);
|
|
||||||
--Primitive--Green--300: hsla(142, 77%, 73%, 1);
|
|
||||||
--Primitive--Green--400: hsla(142, 69%, 58%, 1);
|
|
||||||
--Primitive--Green--500: hsla(142, 71%, 45%, 1);
|
|
||||||
--Primitive--Green--600: hsla(142, 76%, 36%, 1);
|
|
||||||
--Primitive--Green--700: hsla(142, 72%, 29%, 1);
|
|
||||||
--Primitive--Green--800: hsla(143, 64%, 24%, 1);
|
|
||||||
--Primitive--Green--900: hsla(144, 61%, 20%, 1);
|
|
||||||
--Primitive--Green--950: hsla(145, 80%, 10%, 1);
|
|
||||||
--Primitive--Emerald--50: hsla(152, 81%, 96%, 1);
|
|
||||||
--Primitive--Emerald--100: hsla(149, 80%, 90%, 1);
|
|
||||||
--Primitive--Emerald--200: hsla(152, 76%, 80%, 1);
|
|
||||||
--Primitive--Emerald--300: hsla(156, 72%, 67%, 1);
|
|
||||||
--Primitive--Emerald--400: hsla(158, 64%, 52%, 1);
|
|
||||||
--Primitive--Emerald--500: hsla(160, 84%, 39%, 1);
|
|
||||||
--Primitive--Emerald--600: hsla(161, 94%, 30%, 1);
|
|
||||||
--Primitive--Emerald--700: hsla(163, 94%, 24%, 1);
|
|
||||||
--Primitive--Emerald--800: hsla(163, 88%, 20%, 1);
|
|
||||||
--Primitive--Emerald--900: hsla(164, 86%, 16%, 1);
|
|
||||||
--Primitive--Emerald--950: hsla(166, 91%, 9%, 1);
|
|
||||||
--Primitive--Teal--50: hsla(166, 76%, 97%, 1);
|
|
||||||
--Primitive--Teal--100: hsla(167, 85%, 89%, 1);
|
|
||||||
--Primitive--Teal--200: hsla(168, 84%, 78%, 1);
|
|
||||||
--Primitive--Teal--300: hsla(171, 77%, 64%, 1);
|
|
||||||
--Primitive--Teal--400: hsla(172, 66%, 50%, 1);
|
|
||||||
--Primitive--Teal--500: hsla(173, 80%, 40%, 1);
|
|
||||||
--Primitive--Teal--600: hsla(175, 84%, 32%, 1);
|
|
||||||
--Primitive--Teal--700: hsla(175, 77%, 26%, 1);
|
|
||||||
--Primitive--Teal--800: hsla(176, 69%, 22%, 1);
|
|
||||||
--Primitive--Teal--900: hsla(176, 61%, 19%, 1);
|
|
||||||
--Primitive--Teal--950: hsla(179, 84%, 10%, 1);
|
|
||||||
--Primitive--Cyan--50: hsla(183, 100%, 96%, 1);
|
|
||||||
--Primitive--Cyan--100: hsla(185, 96%, 90%, 1);
|
|
||||||
--Primitive--Cyan--200: hsla(186, 94%, 82%, 1);
|
|
||||||
--Primitive--Cyan--300: hsla(187, 92%, 69%, 1);
|
|
||||||
--Primitive--Cyan--400: hsla(188, 86%, 53%, 1);
|
|
||||||
--Primitive--Cyan--500: hsla(189, 94%, 43%, 1);
|
|
||||||
--Primitive--Cyan--600: hsla(192, 91%, 36%, 1);
|
|
||||||
--Primitive--Cyan--700: hsla(193, 82%, 31%, 1);
|
|
||||||
--Primitive--Cyan--800: hsla(194, 70%, 27%, 1);
|
|
||||||
--Primitive--Cyan--900: hsla(196, 64%, 24%, 1);
|
|
||||||
--Primitive--Cyan--950: hsla(197, 79%, 15%, 1);
|
|
||||||
--Primitive--Sky--50: hsla(204, 100%, 97%, 1);
|
|
||||||
--Primitive--Sky--100: hsla(204, 94%, 94%, 1);
|
|
||||||
--Primitive--Sky--200: hsla(201, 94%, 86%, 1);
|
|
||||||
--Primitive--Sky--300: hsla(199, 95%, 74%, 1);
|
|
||||||
--Primitive--Sky--400: hsla(198, 93%, 60%, 1);
|
|
||||||
--Primitive--Sky--500: hsla(199, 89%, 48%, 1);
|
|
||||||
--Primitive--Sky--600: hsla(200, 98%, 39%, 1);
|
|
||||||
--Primitive--Sky--700: hsla(201, 96%, 32%, 1);
|
|
||||||
--Primitive--Sky--800: hsla(201, 90%, 27%, 1);
|
|
||||||
--Primitive--Sky--900: hsla(202, 80%, 24%, 1);
|
|
||||||
--Primitive--Sky--950: hsla(204, 80%, 16%, 1);
|
|
||||||
--Primitive--Blue--50: hsla(214, 100%, 97%, 1);
|
|
||||||
--Primitive--Blue--100: hsla(214, 95%, 93%, 1);
|
|
||||||
--Primitive--Blue--200: hsla(213, 97%, 87%, 1);
|
|
||||||
--Primitive--Blue--300: hsla(212, 96%, 78%, 1);
|
|
||||||
--Primitive--Blue--400: hsla(213, 94%, 68%, 1);
|
|
||||||
--Primitive--Blue--500: hsla(217, 91%, 60%, 1);
|
|
||||||
--Primitive--Blue--600: hsla(221, 83%, 53%, 1);
|
|
||||||
--Primitive--Blue--700: hsla(224, 76%, 48%, 1);
|
|
||||||
--Primitive--Blue--800: hsla(226, 71%, 40%, 1);
|
|
||||||
--Primitive--Blue--900: hsla(224, 64%, 33%, 1);
|
|
||||||
--Primitive--Blue--950: hsla(226, 57%, 21%, 1);
|
|
||||||
--Primitive--Indigo--50: hsla(226, 100%, 97%, 1);
|
|
||||||
--Primitive--Indigo--100: hsla(226, 100%, 94%, 1);
|
|
||||||
--Primitive--Indigo--200: hsla(228, 96%, 89%, 1);
|
|
||||||
--Primitive--Indigo--300: hsla(230, 94%, 82%, 1);
|
|
||||||
--Primitive--Indigo--400: hsla(234, 89%, 74%, 1);
|
|
||||||
--Primitive--Indigo--500: hsla(239, 84%, 67%, 1);
|
|
||||||
--Primitive--Indigo--600: hsla(243, 75%, 59%, 1);
|
|
||||||
--Primitive--Indigo--700: hsla(245, 58%, 51%, 1);
|
|
||||||
--Primitive--Indigo--800: hsla(244, 55%, 41%, 1);
|
|
||||||
--Primitive--Indigo--900: hsla(242, 47%, 34%, 1);
|
|
||||||
--Primitive--Indigo--950: hsla(244, 47%, 20%, 1);
|
|
||||||
--Primitive--Violet--50: hsla(250, 100%, 98%, 1);
|
|
||||||
--Primitive--Violet--100: hsla(251, 91%, 95%, 1);
|
|
||||||
--Primitive--Violet--200: hsla(251, 95%, 92%, 1);
|
|
||||||
--Primitive--Violet--300: hsla(253, 95%, 85%, 1);
|
|
||||||
--Primitive--Violet--400: hsla(255, 92%, 76%, 1);
|
|
||||||
--Primitive--Violet--500: hsla(258, 90%, 66%, 1);
|
|
||||||
--Primitive--Violet--600: hsla(262, 83%, 58%, 1);
|
|
||||||
--Primitive--Violet--700: hsla(263, 70%, 50%, 1);
|
|
||||||
--Primitive--Violet--800: hsla(263, 69%, 42%, 1);
|
|
||||||
--Primitive--Violet--900: hsla(264, 67%, 35%, 1);
|
|
||||||
--Primitive--Violet--950: hsla(262, 78%, 23%, 1);
|
|
||||||
--Primitive--Purple--50: hsla(270, 100%, 98%, 1);
|
|
||||||
--Primitive--Purple--100: hsla(269, 100%, 95%, 1);
|
|
||||||
--Primitive--Purple--200: hsla(269, 100%, 92%, 1);
|
|
||||||
--Primitive--Purple--300: hsla(269, 97%, 85%, 1);
|
|
||||||
--Primitive--Purple--400: hsla(270, 95%, 75%, 1);
|
|
||||||
--Primitive--Purple--500: hsla(271, 91%, 65%, 1);
|
|
||||||
--Primitive--Purple--600: hsla(271, 81%, 56%, 1);
|
|
||||||
--Primitive--Purple--700: hsla(272, 72%, 47%, 1);
|
|
||||||
--Primitive--Purple--800: hsla(273, 67%, 39%, 1);
|
|
||||||
--Primitive--Purple--900: hsla(274, 66%, 32%, 1);
|
|
||||||
--Primitive--Purple--950: hsla(274, 87%, 21%, 1);
|
|
||||||
--Primitive--Fuchsia--50: hsla(289, 100%, 98%, 1);
|
|
||||||
--Primitive--Fuchsia--100: hsla(287, 100%, 95%, 1);
|
|
||||||
--Primitive--Fuchsia--200: hsla(288, 96%, 91%, 1);
|
|
||||||
--Primitive--Fuchsia--300: hsla(291, 93%, 83%, 1);
|
|
||||||
--Primitive--Fuchsia--400: hsla(292, 91%, 73%, 1);
|
|
||||||
--Primitive--Fuchsia--500: hsla(292, 84%, 61%, 1);
|
|
||||||
--Primitive--Fuchsia--600: hsla(293, 69%, 49%, 1);
|
|
||||||
--Primitive--Fuchsia--700: hsla(295, 72%, 40%, 1);
|
|
||||||
--Primitive--Fuchsia--800: hsla(295, 70%, 33%, 1);
|
|
||||||
--Primitive--Fuchsia--900: hsla(297, 64%, 28%, 1);
|
|
||||||
--Primitive--Fuchsia--950: hsla(297, 90%, 16%, 1);
|
|
||||||
--Primitive--Pink--50: hsla(327, 73%, 97%, 1);
|
|
||||||
--Primitive--Pink--100: hsla(326, 78%, 95%, 1);
|
|
||||||
--Primitive--Pink--200: hsla(326, 85%, 90%, 1);
|
|
||||||
--Primitive--Pink--300: hsla(327, 87%, 82%, 1);
|
|
||||||
--Primitive--Pink--400: hsla(329, 86%, 70%, 1);
|
|
||||||
--Primitive--Pink--500: hsla(330, 81%, 60%, 1);
|
|
||||||
--Primitive--Pink--600: hsla(333, 71%, 51%, 1);
|
|
||||||
--Primitive--Pink--700: hsla(335, 78%, 42%, 1);
|
|
||||||
--Primitive--Pink--800: hsla(336, 74%, 35%, 1);
|
|
||||||
--Primitive--Pink--900: hsla(336, 69%, 30%, 1);
|
|
||||||
--Primitive--Pink--950: hsla(336, 84%, 17%, 1);
|
|
||||||
--Primitive--Rose--50: hsla(356, 100%, 97%, 1);
|
|
||||||
--Primitive--Rose--100: hsla(356, 100%, 95%, 1);
|
|
||||||
--Primitive--Rose--200: hsla(353, 96%, 90%, 1);
|
|
||||||
--Primitive--Rose--300: hsla(353, 96%, 82%, 1);
|
|
||||||
--Primitive--Rose--400: hsla(351, 95%, 71%, 1);
|
|
||||||
--Primitive--Rose--500: hsla(350, 89%, 60%, 1);
|
|
||||||
--Primitive--Rose--600: hsla(347, 77%, 50%, 1);
|
|
||||||
--Primitive--Rose--700: hsla(345, 83%, 41%, 1);
|
|
||||||
--Primitive--Rose--800: hsla(343, 80%, 35%, 1);
|
|
||||||
--Primitive--Rose--900: hsla(342, 75%, 30%, 1);
|
|
||||||
--Primitive--Rose--950: hsla(343, 88%, 16%, 1);
|
|
||||||
--Brand--Base_Colors--Destructive: var(--Primitive--Red--500);
|
|
||||||
--Brand--Base_Colors--Success: var(--Primitive--Green--500);
|
|
||||||
--Brand--Base_Colors--Warning: var(--Primitive--Amber--500);
|
|
||||||
--Brand--Base_Colors--White: var(--Primitive--White);
|
|
||||||
--Brand--Base_Colors--Black: var(--Primitive--Black);
|
|
||||||
--Brand--Semantic_Colors--Background: var(--Primitive--Zinc--900); /*页面背景色：应用在整个页面的最底层。*/
|
|
||||||
--Brand--Semantic_Colors--Background-subtle: hsla(
|
|
||||||
0,
|
|
||||||
0%,
|
|
||||||
100%,
|
|
||||||
0.02
|
|
||||||
); /*细微背景色：用于需要与主背景有微弱区分的区域，如代码块背景。*/
|
|
||||||
--Brand--Semantic_Colors--Foreground: hsla(0, 0%, 100%, 0.9); /*主要前景/文字色：用于正文、标题等。*/
|
|
||||||
--Brand--Semantic_Colors--Foreground-secondary: hsla(0, 0%, 100%, 0.6); /*次要前景/文字色：用于辅助性文本、描述。*/
|
|
||||||
--Brand--Semantic_Colors--Foreground-muted: hsla(0, 0%, 100%, 0.4); /*静默前景/文字色：用于禁用状态的文字、占位符。*/
|
|
||||||
--Brand--Semantic_Colors--Border: hsla(0, 0%, 100%, 0.1); /*默认边框色：用于卡片、输入框、分隔线。*/
|
|
||||||
--Brand--Semantic_Colors--Border-hover: hsla(0, 0%, 100%, 0.2); /*激活边框色：用于元素被按下或激活时的边框。*/
|
|
||||||
--Brand--Semantic_Colors--Border-active: hsla(0, 0%, 100%, 0.3); /*激活边框色：用于元素被按下或激活时的边框。*/
|
|
||||||
--Brand--Semantic_Colors--Ring: hsla(
|
|
||||||
84,
|
|
||||||
81%,
|
|
||||||
44%,
|
|
||||||
0.4
|
|
||||||
); /*聚焦环颜色：用于输入框等元素在聚焦 (Focus) 状态下的外发光。*/
|
|
||||||
--Brand--UI_Element_Colors--Modal--Backdrop: hsla(0, 0%, 0%, 0.06);
|
|
||||||
--Brand--UI_Element_Colors--Modal--Thumb: hsla(0, 0%, 100%, 0.2);
|
|
||||||
--Brand--UI_Element_Colors--Modal--Thumb_Hover: hsla(0, 0%, 100%, 0.3);
|
|
||||||
--Brand--UI_Element_Colors--Icon--Default: var(--Brand--Semantic_Colors--Foreground-secondary);
|
|
||||||
--Brand--UI_Element_Colors--Icon--Hover: var(--Brand--Semantic_Colors--Foreground);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Background: var(--Brand--Base_Colors--Black);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Border: var(--Brand--Semantic_Colors--Border);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Border_Hover: var(--Brand--Semantic_Colors--Border-hover);
|
|
||||||
--Brand--UI_Element_Colors--Input_Select--Border_Focus: var(--Brand--Base_Colors--Primary);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Background: var(--Brand--Base_Colors--Primary);
|
|
||||||
--Brand--UI_Element_Colors--Card_Container--Background: var(--Brand--Base_Colors--Black);
|
|
||||||
--Brand--UI_Element_Colors--Card_Container--Border: var(--Brand--Semantic_Colors--Border);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Background: hsla(0, 0%, 100%, 0);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Text: var(--Brand--Semantic_Colors--Foreground);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Background_Hover: var(--Opacity--White--White-10);
|
|
||||||
--Brand--UI_Element_Colors--Ghost_Button--Background_Active: hsla(0, 0%, 100%, 0.15);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Background: var(--Opacity--White--White-10);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Text: var(--Brand--Semantic_Colors--Foreground);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Background_Hover: var(--Opacity--White--White-20);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Background_Active: hsla(0, 0%, 100%, 0.25);
|
|
||||||
--Brand--UI_Element_Colors--Secondary_Button--Border: var(--Brand--Semantic_Colors--Border);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Text: var(--Brand--Base_Colors--White);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Background_Hover: hsla(84, 81%, 44%, 0.85);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--2nd_Background: hsla(84, 81%, 44%, 0.1);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--3rd_Background: hsla(84, 81%, 44%, 0.05);
|
|
||||||
--Brand--UI_Element_Colors--Primary_Button--Background_Active: hsla(84, 81%, 44%, 0.7);
|
|
||||||
--Boolean: false;
|
|
||||||
}
|
|
||||||
@ -149,7 +149,7 @@ export function ToolPermissionRequestCard({ toolResponse }: Props) {
|
|||||||
|
|
||||||
<Button
|
<Button
|
||||||
aria-label={t('agent.toolPermission.aria.allowRequest')}
|
aria-label={t('agent.toolPermission.aria.allowRequest')}
|
||||||
className="h-8 px-3 bg-green-600 hover:bg-green-700 text-white"
|
className="h-8 bg-green-600 px-3 text-white hover:bg-green-700"
|
||||||
disabled={isSubmitting || isExpired}
|
disabled={isSubmitting || isExpired}
|
||||||
loading={isSubmittingAllow}
|
loading={isSubmittingAllow}
|
||||||
onClick={() => handleDecision('allow')}
|
onClick={() => handleDecision('allow')}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user