mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
0abadbe7bb
```[tasklist] ### Tasks - [x] Migrate components from [design](https://github.com/toeverything/design) - [x] Replace all imports from `@toeverything/components` - [x] Clean up `@toeverything/components` dependencies - [x] Storybook ``` ### Influence Here are all the components that are influenced by `@toeverything/components` - `@affine/component` - App update `Button` `Tooltip` - App sidebar header `IconButton`, `Tooltip` - Back `Button` - Auth - Change email page save `Button` - Change password page all `Button`s (Save, Later, Open) - Confirm change email `Button` - Set password page `Button` - Sign in success page `Button` - Sign up page `Button` - Auth `Modal` - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton` - Share - Disable shared public link `Modal` - Import page `IconButton`, `Tooltip` - Accept invite page `Avatar`, `Button` - Invite member `Modal` - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip` - Notification center `IconButton` - Page list - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip` - tags more `Menu` - favorite `IconButton`, `Tooltip` - new page dropdown `Menu` - filter `Menu`, `Button`, `IconButton` - Page operation `Menu` - export `MenuItem` - move to trash `MenuItem`, `ConfirmModal` - Workspace header filter `Menu`, `Button` - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*) - Collection operation `Menu`, `MenuItem` - Create collection `Modal`, `Button` - Edit collection `Modal`, `Button` - Page mode filter `Menu` - Page mode `Button`, `Menu` - Setting modal - storage usage progress `Button`, `Tooltip` - On boarding tour `Modal` - `@affine/core` - Bookmark `Menu` - Affine error boundary `Button` - After sign in send email `Button` - After sign up send email `Button` - Send email `Button` - Sign in `Button` - Subscription redirect `Loading`, `Button` - Setting `Modal` - User plan button `Tooltip` - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu` - Profile `Button`, `Avatar` - Workspace - publish panel `Button`, `Tooltip` - export panel `Button` - storage panel `Button`, `Tooltip` - delete `ConfirmModal` - Language `Menu` - Account setting `Avatar`, `Button` - Date format setting `Menu` - Billing `Button`, `IconButton`, `Loading` - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip` - Create workspace `Modal`, `ConfirmModal`, `Button` - Payment disabled `ConfirmModal` - Share/Export `Menu`, `Button`, `Divider` - Sign out `ConfirmModal` - Temp disable affine cloud `Modal` - Page detail operation `Menu` - Blocksuite mode switch `Tooltip` - Login card `Avatar` - Help island `Tooltip` - `plugin` - copilot - hello world - image preview - outline
158 lines
3.7 KiB
TypeScript
158 lines
3.7 KiB
TypeScript
import { createVar, style } from '@vanilla-extract/css';
|
|
export const triggerWidthVar = createVar('triggerWidthVar');
|
|
|
|
export const menuContent = style({
|
|
minWidth: '180px',
|
|
color: 'var(--affine-text-primary-color)',
|
|
borderRadius: '8px',
|
|
padding: '8px',
|
|
fontSize: 'var(--affine-font-sm)',
|
|
fontWeight: '400',
|
|
backgroundColor: 'var(--affine-background-overlay-panel-color)',
|
|
boxShadow: 'var(--affine-menu-shadow)',
|
|
userSelect: 'none',
|
|
});
|
|
|
|
export const menuItem = style({
|
|
maxWidth: '296px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
padding: '4px 12px',
|
|
borderRadius: '4px',
|
|
lineHeight: '22px',
|
|
border: 'none',
|
|
outline: 'none',
|
|
cursor: 'pointer',
|
|
boxSizing: 'border-box',
|
|
selectors: {
|
|
'&:not(:last-of-type)': {
|
|
marginBottom: '4px',
|
|
},
|
|
'&.block': { maxWidth: '100%' },
|
|
'&[data-disabled]': {
|
|
color: 'var(--affine-text-disable-color)',
|
|
pointerEvents: 'none',
|
|
cursor: 'not-allowed',
|
|
},
|
|
'&[data-highlighted]': {
|
|
backgroundColor: 'var(--affine-hover-color)',
|
|
},
|
|
|
|
'&:hover': {
|
|
backgroundColor: 'var(--affine-hover-color)',
|
|
},
|
|
'&.danger:hover': {
|
|
color: 'var(--affine-error-color)',
|
|
backgroundColor: 'var(--affine-background-error-color)',
|
|
},
|
|
|
|
'&.warning:hover': {
|
|
color: 'var(--affine-warning-color)',
|
|
backgroundColor: 'var(--affine-background-warning-color)',
|
|
},
|
|
|
|
'&.selected, &.checked': {
|
|
backgroundColor: 'var(--affine-hover-color)',
|
|
color: 'var(--affine-primary-color)',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const menuSpan = style({
|
|
flex: 1,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'left',
|
|
});
|
|
export const menuItemIcon = style({
|
|
display: 'flex',
|
|
flexShrink: 0,
|
|
fontSize: 'var(--affine-font-h-5)',
|
|
color: 'var(--affine-icon-color)',
|
|
selectors: {
|
|
'&.start': { marginRight: '8px' },
|
|
'&.end': { marginLeft: '8px' },
|
|
'&.selected, &.checked': {
|
|
color: 'var(--affine-primary-color)',
|
|
},
|
|
|
|
[`${menuItem}.danger:hover &`]: {
|
|
color: 'var(--affine-error-color)',
|
|
},
|
|
[`${menuItem}.warning:hover &`]: {
|
|
color: 'var(--affine-warning-color)',
|
|
},
|
|
},
|
|
});
|
|
|
|
export const menuSeparator = style({
|
|
height: '1px',
|
|
backgroundColor: 'var(--affine-border-color)',
|
|
marginTop: '12px',
|
|
marginBottom: '8px',
|
|
});
|
|
|
|
export const menuTrigger = style({
|
|
vars: {
|
|
[triggerWidthVar]: 'auto',
|
|
},
|
|
width: triggerWidthVar,
|
|
height: 28,
|
|
lineHeight: '22px',
|
|
padding: '0 10px',
|
|
color: 'var(--affine-text-primary-color)',
|
|
border: '1px solid',
|
|
backgroundColor: 'var(--affine-white)',
|
|
borderRadius: 8,
|
|
display: 'inline-flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
fontSize: 'var(--affine-font-xs)',
|
|
cursor: 'pointer',
|
|
['WebkitAppRegion' as string]: 'no-drag',
|
|
borderColor: 'var(--affine-border-color)',
|
|
outline: 'none',
|
|
|
|
selectors: {
|
|
'&:hover': {
|
|
background: 'var(--affine-hover-color)',
|
|
},
|
|
'&.no-border': {
|
|
border: 'unset',
|
|
},
|
|
'&.block': {
|
|
display: 'flex',
|
|
width: '100%',
|
|
},
|
|
// size
|
|
'&.large': {
|
|
height: 32,
|
|
},
|
|
'&.extra-large': {
|
|
height: 40,
|
|
fontWeight: 600,
|
|
},
|
|
// color
|
|
'&.disabled': {
|
|
cursor: 'default',
|
|
color: 'var(--affine-disable-color)',
|
|
pointerEvents: 'none',
|
|
},
|
|
// TODO: wait for design
|
|
'&.error': {
|
|
// borderColor: 'var(--affine-error-color)',
|
|
},
|
|
'&.success': {
|
|
// borderColor: 'var(--affine-success-color)',
|
|
},
|
|
'&.warning': {
|
|
// borderColor: 'var(--affine-warning-color)',
|
|
},
|
|
'&.default': {
|
|
// borderColor: 'var(--affine-border-color)',
|
|
},
|
|
},
|
|
});
|