mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-16 17:46:18 +08:00
CatsJuice
3d855647c7
## Button
- Remove props withoutHoverStyle
refactor hover impl with independent layer, so that hover-color won't affect the background even if is overridden outside
- Update `type` (renamed to `variant`):
- remove `processing` and `warning`
- rename `default` with `secondary`
- Remove `shape` props
- Remove `icon` and `iconPosition`, replaced with `prefix: ReactNode` and `suffix: ReactNode`
- Integrate tooltip for more convenient usage
- New Storybook document
- Focus style
## IconButton
- A Wrapper base on `<Button />`
- Override Button size and variant
- size: `'12' | '14' | '16' | '20' | '24' | number`
These presets size are referenced from the design system.
- variant: `'plain' | 'solid' | 'danger' | 'custom'`
- Inset icon via Button 's prefix
## Fix
- fix some button related issues
- close AF-1159, AF-1160, AF-1161, AF-1162, AF-1163, AF-1158, AF-1157
## Storybook
62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { globalStyle, style } from '@vanilla-extract/css';
|
|
|
|
// table
|
|
export const table = style({
|
|
vars: { '--border-color': '#974FFF' },
|
|
});
|
|
globalStyle(`${table} thead td, ${table} tbody tr td:nth-child(1)`, {
|
|
backgroundColor: '#974FFF10',
|
|
padding: '16px',
|
|
fontWeight: 600,
|
|
fontSize: 12,
|
|
color: 'var(--border-color)',
|
|
});
|
|
globalStyle(`${table} td`, {
|
|
textAlign: 'center',
|
|
border: '0.5px dashed var(--border-color)',
|
|
borderTopColor: 'transparent',
|
|
borderBottomColor: 'transparent',
|
|
padding: '16px 8px',
|
|
});
|
|
globalStyle(`${table} thead td`, {
|
|
borderTopColor: 'var(--border-color)',
|
|
});
|
|
globalStyle(`${table} tbody tr:last-child td`, {
|
|
borderBottomColor: 'var(--border-color)',
|
|
});
|
|
|
|
export const settings = style({
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: '8px 100px',
|
|
marginBottom: 40,
|
|
});
|
|
globalStyle(`${settings} > section`, {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
});
|
|
globalStyle(`${settings} > section > span`, {
|
|
display: 'inline-block',
|
|
width: 200,
|
|
});
|
|
|
|
export const overrideBackground = style({
|
|
background: 'cyan',
|
|
});
|
|
export const overrideTextColor = style({
|
|
color: 'red',
|
|
});
|
|
export const overrideBorder = style({
|
|
borderColor: 'green',
|
|
});
|
|
export const overrideFontSize = style({
|
|
fontSize: 24,
|
|
});
|
|
export const overrideIconSize = style({
|
|
width: 60,
|
|
height: 60,
|
|
});
|
|
export const overrideIconColor = style({
|
|
color: 'forestgreen',
|
|
});
|