mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-15 00:56:26 +08:00
fix(core): replace most --affine with cssVar (#5728)
using a [babel plugin](https://gist.github.com/pengx17/49e24ae8a5a609bdaff122ee8c679d1c) to transform all var(--affine-xxx) to cssVar Some issues: - tried ast-grep but it seems to be not easy to add imports conditionally - current work does not work well with ts with types because babel will strip them out
This commit is contained in:
Peng Xiao
@@ -1,6 +1,6 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, globalStyle, keyframes, style } from '@vanilla-extract/css';
|
||||
export const sizeVar = createVar('sizeVar');
|
||||
|
||||
const bottomAnimation = keyframes({
|
||||
'0%': {
|
||||
top: '-44%',
|
||||
@@ -75,7 +75,6 @@ const middleAnimation = keyframes({
|
||||
transform: 'matrix(-0.48, -0.88, 0.8, -0.6, 0, 0)',
|
||||
},
|
||||
});
|
||||
|
||||
export const DefaultAvatarContainerStyle = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@@ -83,7 +82,6 @@ export const DefaultAvatarContainerStyle = style({
|
||||
borderRadius: '50%',
|
||||
overflow: 'hidden',
|
||||
});
|
||||
|
||||
export const DefaultAvatarMiddleItemStyle = style({
|
||||
width: '83%',
|
||||
height: '81%',
|
||||
@@ -128,7 +126,6 @@ export const DefaultAvatarTopItemStyle = style({
|
||||
transform: 'matrix(-0.28, -0.96, 0.93, -0.37, 0, 0)',
|
||||
transformOrigin: 'center center',
|
||||
});
|
||||
|
||||
export const avatarRoot = style({
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
@@ -148,14 +145,12 @@ export const avatarWrapper = style({
|
||||
userSelect: 'none',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const avatarImage = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
borderRadius: '50%',
|
||||
});
|
||||
|
||||
export const avatarFallback = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@@ -163,12 +158,11 @@ export const avatarFallback = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'var(--affine-primary-color)',
|
||||
color: 'var(--affine-white)',
|
||||
backgroundColor: cssVar('primaryColor'),
|
||||
color: cssVar('white'),
|
||||
lineHeight: '1',
|
||||
fontWeight: '500',
|
||||
});
|
||||
|
||||
export const hoverWrapper = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@@ -179,7 +173,7 @@ export const hoverWrapper = style({
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'rgba(60, 61, 63, 0.5)',
|
||||
zIndex: '1',
|
||||
color: 'var(--affine-white)',
|
||||
color: cssVar('white'),
|
||||
opacity: 0,
|
||||
transition: 'opacity .15s',
|
||||
cursor: 'pointer',
|
||||
@@ -189,7 +183,6 @@ export const hoverWrapper = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const removeButton = style({
|
||||
position: 'absolute',
|
||||
right: '-8px',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const button = style({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
@@ -11,43 +11,42 @@ export const button = style({
|
||||
border: '1px solid',
|
||||
padding: '0 18px',
|
||||
borderRadius: '8px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
transition: 'all .3s',
|
||||
['WebkitAppRegion' as string]: 'no-drag',
|
||||
cursor: 'pointer',
|
||||
|
||||
// changeable
|
||||
height: '28px',
|
||||
background: 'var(--affine-white)',
|
||||
borderColor: 'var(--affine-border-color)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
|
||||
background: cssVar('white'),
|
||||
borderColor: cssVar('borderColor'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
selectors: {
|
||||
'&.text-bold': {
|
||||
fontWeight: 600,
|
||||
},
|
||||
'&:not(.without-hover):hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.loading': {
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
|
||||
{
|
||||
background: 'inherit',
|
||||
},
|
||||
|
||||
'&.block': { display: 'flex', width: '100%' },
|
||||
|
||||
'&.block': {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
},
|
||||
'&.circle': {
|
||||
borderRadius: '50%',
|
||||
},
|
||||
@@ -57,7 +56,7 @@ export const button = style({
|
||||
// size
|
||||
'&.large': {
|
||||
height: '32px',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
fontWeight: 600,
|
||||
},
|
||||
'&.round.large': {
|
||||
@@ -65,127 +64,124 @@ export const button = style({
|
||||
},
|
||||
'&.extraLarge': {
|
||||
height: '40px',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
fontWeight: 700,
|
||||
},
|
||||
'&.extraLarge.primary': {
|
||||
boxShadow: 'var(--affine-large-button-effect) !important',
|
||||
boxShadow: `${cssVar('largeButtonEffect')} !important`,
|
||||
},
|
||||
'&.round.extraLarge': {
|
||||
borderRadius: '20px',
|
||||
},
|
||||
|
||||
// type
|
||||
'&.plain': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderColor: 'transparent',
|
||||
background: 'transparent',
|
||||
},
|
||||
|
||||
'&.primary': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-primary-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('primaryColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.primary:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'primaryColor'
|
||||
)}`,
|
||||
},
|
||||
'&.primary.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.primary.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-primary-color)',
|
||||
background: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&.error': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-error-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('errorColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.error:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'errorColor'
|
||||
)}`,
|
||||
},
|
||||
'&.error.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.error.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-error-color)',
|
||||
background: cssVar('errorColor'),
|
||||
},
|
||||
|
||||
'&.warning': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-warning-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('warningColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.warning:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'warningColor'
|
||||
)}`,
|
||||
},
|
||||
'&.warning.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.warning.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-warning-color)',
|
||||
background: cssVar('warningColor'),
|
||||
},
|
||||
|
||||
'&.success': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-success-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('successColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.success:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'successColor'
|
||||
)}`,
|
||||
},
|
||||
'&.success.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.success.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-success-color)',
|
||||
background: cssVar('successColor'),
|
||||
},
|
||||
|
||||
'&.processing': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-processing-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('processingColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.processing:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'processingColor'
|
||||
)}`,
|
||||
},
|
||||
'&.processing.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.processing.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-processing-color)',
|
||||
background: cssVar('processingColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${button} > span`, {
|
||||
// flex: 1,
|
||||
lineHeight: 1,
|
||||
padding: '0 4px',
|
||||
});
|
||||
|
||||
export const buttonIcon = style({
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
fontSize: '16px',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
@@ -207,11 +203,10 @@ export const buttonIcon = style({
|
||||
height: '20px',
|
||||
},
|
||||
'&.color-white': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
color: cssVar('pureWhite'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const iconButton = style({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
@@ -224,41 +219,38 @@ export const iconButton = style({
|
||||
transition: 'all .3s',
|
||||
['WebkitAppRegion' as string]: 'no-drag',
|
||||
cursor: 'pointer',
|
||||
background: 'var(--affine-white)',
|
||||
|
||||
background: cssVar('white'),
|
||||
// changeable
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
fontSize: '20px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
borderColor: 'var(--affine-border-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderColor: cssVar('borderColor'),
|
||||
selectors: {
|
||||
'&.without-padding': {
|
||||
margin: '-2px',
|
||||
},
|
||||
'&.active': {
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&:not(.without-hover):hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.loading': {
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
|
||||
{
|
||||
background: 'inherit',
|
||||
},
|
||||
|
||||
// size
|
||||
'&.large': {
|
||||
width: '32px',
|
||||
@@ -268,107 +260,114 @@ export const iconButton = style({
|
||||
'&.large.without-padding': {
|
||||
margin: '-4px',
|
||||
},
|
||||
'&.small': { width: '20px', height: '20px', fontSize: '16px' },
|
||||
'&.extra-small': { width: '16px', height: '16px', fontSize: '12px' },
|
||||
|
||||
'&.small': {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
fontSize: '16px',
|
||||
},
|
||||
'&.extra-small': {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
fontSize: '12px',
|
||||
},
|
||||
// type
|
||||
'&.plain': {
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
borderColor: 'transparent',
|
||||
background: 'transparent',
|
||||
},
|
||||
'&.plain.active': {
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&.primary': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-primary-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('primaryColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.primary:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'primaryColor'
|
||||
)}`,
|
||||
},
|
||||
'&.primary.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.primary.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-primary-color)',
|
||||
background: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&.error': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-error-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('errorColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.error:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'errorColor'
|
||||
)}`,
|
||||
},
|
||||
'&.error.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.error.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-error-color)',
|
||||
background: cssVar('errorColor'),
|
||||
},
|
||||
|
||||
'&.warning': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-warning-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('warningColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.warning:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'warningColor'
|
||||
)}`,
|
||||
},
|
||||
'&.warning.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.warning.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-warning-color)',
|
||||
background: cssVar('warningColor'),
|
||||
},
|
||||
|
||||
'&.success': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-success-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('successColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.success:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'successColor'
|
||||
)}`,
|
||||
},
|
||||
'&.success.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.success.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-success-color)',
|
||||
background: cssVar('successColor'),
|
||||
},
|
||||
|
||||
'&.processing': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-processing-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('processingColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.processing:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'processingColor'
|
||||
)}`,
|
||||
},
|
||||
'&.processing.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.processing.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-processing-color)',
|
||||
background: cssVar('processingColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const dropdownBtn = style({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
@@ -7,12 +7,12 @@ export const dropdownBtn = style({
|
||||
padding: '0 10px',
|
||||
// fix dropdown button click area
|
||||
paddingRight: 0,
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontWeight: 600,
|
||||
background: 'var(--affine-background-primary-color)',
|
||||
border: '1px solid var(--affine-border-color)',
|
||||
background: cssVar('backgroundPrimaryColor'),
|
||||
border: `1px solid ${cssVar('borderColor')}`,
|
||||
borderRadius: '8px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
// width: '100%',
|
||||
height: '32px',
|
||||
userSelect: 'none',
|
||||
@@ -20,7 +20,7 @@ export const dropdownBtn = style({
|
||||
cursor: 'pointer',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
},
|
||||
'&[data-size=default]': {
|
||||
height: 32,
|
||||
@@ -30,16 +30,14 @@ export const dropdownBtn = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const divider = style({
|
||||
width: '0.5px',
|
||||
height: '16px',
|
||||
background: 'var(--affine-divider-color)',
|
||||
background: cssVar('dividerColor'),
|
||||
// fix dropdown button click area
|
||||
margin: '0 4px',
|
||||
marginRight: 0,
|
||||
});
|
||||
|
||||
export const dropdownWrapper = style({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@@ -49,16 +47,14 @@ export const dropdownWrapper = style({
|
||||
paddingLeft: '4px',
|
||||
paddingRight: '10px',
|
||||
});
|
||||
|
||||
export const dropdownIcon = style({
|
||||
borderRadius: '4px',
|
||||
selectors: {
|
||||
[`${dropdownWrapper}:hover &`]: {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const radioButton = style({
|
||||
flexGrow: 1,
|
||||
flex: 1,
|
||||
@@ -69,7 +65,7 @@ export const radioButton = style({
|
||||
},
|
||||
});
|
||||
export const radioButtonContent = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
@@ -80,21 +76,19 @@ export const radioButtonContent = style({
|
||||
whiteSpace: 'nowrap',
|
||||
userSelect: 'none',
|
||||
fontWeight: 600,
|
||||
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&[data-state="checked"]': {
|
||||
background: 'var(--affine-white)',
|
||||
background: cssVar('white'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const radioUncheckedButton = style([
|
||||
radioButtonContent,
|
||||
{
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
filter: 'none',
|
||||
selectors: {
|
||||
'[data-state="checked"] > &': {
|
||||
@@ -103,18 +97,16 @@ export const radioUncheckedButton = style([
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const radioButtonGroup = style({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
background: 'var(--affine-hover-color-filled)',
|
||||
background: cssVar('hoverColorFilled'),
|
||||
borderRadius: '10px',
|
||||
padding: '2px',
|
||||
// @ts-expect-error - fix electron drag
|
||||
WebkitAppRegion: 'no-drag',
|
||||
});
|
||||
|
||||
export const button = style({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
@@ -125,42 +117,41 @@ export const button = style({
|
||||
border: '1px solid',
|
||||
padding: '0 18px',
|
||||
borderRadius: '8px',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
transition: 'all .3s',
|
||||
['WebkitAppRegion' as string]: 'no-drag',
|
||||
fontWeight: 600,
|
||||
|
||||
// changeable
|
||||
height: '28px',
|
||||
background: 'var(--affine-white)',
|
||||
borderColor: 'var(--affine-border-color)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
|
||||
background: cssVar('white'),
|
||||
borderColor: cssVar('borderColor'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
selectors: {
|
||||
'&.text-bold': {
|
||||
fontWeight: 600,
|
||||
},
|
||||
'&:not(.without-hover):hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.loading': {
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
|
||||
{
|
||||
background: 'inherit',
|
||||
},
|
||||
|
||||
'&.block': { display: 'flex', width: '100%' },
|
||||
|
||||
'&.block': {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
},
|
||||
'&.circle': {
|
||||
borderRadius: '50%',
|
||||
},
|
||||
@@ -180,118 +171,115 @@ export const button = style({
|
||||
'&.round.extraLarge': {
|
||||
borderRadius: '20px',
|
||||
},
|
||||
|
||||
// type
|
||||
'&.plain': {
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderColor: 'transparent',
|
||||
background: 'transparent',
|
||||
},
|
||||
|
||||
'&.primary': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-primary-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('primaryColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.primary:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'primaryColor'
|
||||
)}`,
|
||||
},
|
||||
'&.primary.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.primary.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-primary-color)',
|
||||
background: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&.error': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-error-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('errorColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.error:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'errorColor'
|
||||
)}`,
|
||||
},
|
||||
'&.error.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.error.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-error-color)',
|
||||
background: cssVar('errorColor'),
|
||||
},
|
||||
|
||||
'&.warning': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-warning-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('warningColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.warning:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'warningColor'
|
||||
)}`,
|
||||
},
|
||||
'&.warning.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.warning.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-warning-color)',
|
||||
background: cssVar('warningColor'),
|
||||
},
|
||||
|
||||
'&.success': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-success-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('successColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.success:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'successColor'
|
||||
)}`,
|
||||
},
|
||||
'&.success.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.success.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-success-color)',
|
||||
background: cssVar('successColor'),
|
||||
},
|
||||
|
||||
'&.processing': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-processing-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-button-inner-shadow)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('processingColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: cssVar('buttonInnerShadow'),
|
||||
},
|
||||
'&.processing:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'processingColor'
|
||||
)}`,
|
||||
},
|
||||
'&.processing.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.processing.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-processing-color)',
|
||||
background: cssVar('processingColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${button} > span`, {
|
||||
// flex: 1,
|
||||
lineHeight: 1,
|
||||
padding: '0 4px',
|
||||
});
|
||||
|
||||
export const buttonIcon = style({
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
fontSize: '16px',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
@@ -313,11 +301,10 @@ export const buttonIcon = style({
|
||||
height: '20px',
|
||||
},
|
||||
'&.color-white': {
|
||||
color: 'var(--affine-white)',
|
||||
color: cssVar('white'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const iconButton = style({
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
@@ -329,40 +316,37 @@ export const iconButton = style({
|
||||
borderRadius: '4px',
|
||||
transition: 'all .3s',
|
||||
['WebkitAppRegion' as string]: 'no-drag',
|
||||
|
||||
// changeable
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
fontSize: '20px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
borderColor: 'var(--affine-border-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderColor: cssVar('borderColor'),
|
||||
selectors: {
|
||||
'&.without-padding': {
|
||||
margin: '-2px',
|
||||
},
|
||||
'&.active': {
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&:not(.without-hover):hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.loading': {
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
'&.disabled:not(.without-hover):hover, &.loading:not(.without-hover):hover':
|
||||
{
|
||||
background: 'inherit',
|
||||
},
|
||||
|
||||
// size
|
||||
'&.large': {
|
||||
width: '32px',
|
||||
@@ -372,107 +356,114 @@ export const iconButton = style({
|
||||
'&.large.without-padding': {
|
||||
margin: '-4px',
|
||||
},
|
||||
'&.small': { width: '20px', height: '20px', fontSize: '16px' },
|
||||
'&.extra-small': { width: '16px', height: '16px', fontSize: '12px' },
|
||||
|
||||
'&.small': {
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
fontSize: '16px',
|
||||
},
|
||||
'&.extra-small': {
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
fontSize: '12px',
|
||||
},
|
||||
// type
|
||||
'&.plain': {
|
||||
color: 'var(--affine-icon-color)',
|
||||
color: cssVar('iconColor'),
|
||||
borderColor: 'transparent',
|
||||
background: 'transparent',
|
||||
},
|
||||
'&.plain.active': {
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&.primary': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-primary-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('primaryColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.primary:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-primary-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'primaryColor'
|
||||
)}`,
|
||||
},
|
||||
'&.primary.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.primary.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-primary-color)',
|
||||
background: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
'&.error': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-error-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('errorColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.error:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-error-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'errorColor'
|
||||
)}`,
|
||||
},
|
||||
'&.error.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.error.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-error-color)',
|
||||
background: cssVar('errorColor'),
|
||||
},
|
||||
|
||||
'&.warning': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-warning-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('warningColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.warning:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-warning-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'warningColor'
|
||||
)}`,
|
||||
},
|
||||
'&.warning.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.warning.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-warning-color)',
|
||||
background: cssVar('warningColor'),
|
||||
},
|
||||
|
||||
'&.success': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-success-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('successColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.success:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-success-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'successColor'
|
||||
)}`,
|
||||
},
|
||||
'&.success.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.success.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-success-color)',
|
||||
background: cssVar('successColor'),
|
||||
},
|
||||
|
||||
'&.processing': {
|
||||
color: 'var(--affine-white)',
|
||||
background: 'var(--affine-processing-color)',
|
||||
borderColor: 'var(--affine-black-10)',
|
||||
color: cssVar('white'),
|
||||
background: cssVar('processingColor'),
|
||||
borderColor: cssVar('black10'),
|
||||
boxShadow: '0px 1px 2px 0px rgba(255, 255, 255, 0.25) inset',
|
||||
},
|
||||
'&.processing:not(.without-hover):hover': {
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), var(--affine-processing-color)',
|
||||
background: `linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.04) 100%), ${cssVar(
|
||||
'processingColor'
|
||||
)}`,
|
||||
},
|
||||
'&.processing.disabled': {
|
||||
opacity: '.4',
|
||||
cursor: 'default',
|
||||
},
|
||||
'&.processing.disabled:not(.without-hover):hover': {
|
||||
background: 'var(--affine-processing-color)',
|
||||
background: cssVar('processingColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,24 +1,19 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
globalStyle(`${root}:hover svg`, {
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
globalStyle(`${root}:active svg`, {
|
||||
opacity: 0.9,
|
||||
});
|
||||
|
||||
export const disabled = style({
|
||||
opacity: 0.5,
|
||||
pointerEvents: 'none',
|
||||
});
|
||||
|
||||
export const input = style({
|
||||
opacity: 0,
|
||||
position: 'absolute',
|
||||
@@ -27,7 +22,6 @@ export const input = style({
|
||||
inset: 0,
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
|
||||
cursor: 'pointer',
|
||||
fontSize: 'inherit',
|
||||
});
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
/**
|
||||
@@ -6,7 +7,6 @@ import { globalStyle, style } from '@vanilla-extract/css';
|
||||
globalStyle('.react-datepicker__aria-live', {
|
||||
display: 'none',
|
||||
});
|
||||
|
||||
export const basicCell = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -32,9 +32,8 @@ export const headerLayoutCellOrigin = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const inputStyle = style({
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
width: '50px',
|
||||
fontWeight: '600',
|
||||
display: 'flex',
|
||||
@@ -43,20 +42,19 @@ export const inputStyle = style({
|
||||
height: '22px',
|
||||
textAlign: 'center',
|
||||
':hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
borderRadius: '4px',
|
||||
},
|
||||
});
|
||||
export const popperStyle = style({
|
||||
boxShadow: 'var(--affine-shadow-2)',
|
||||
boxShadow: cssVar('shadow2'),
|
||||
// TODO: for menu offset, need to be optimized
|
||||
marginTop: '16px',
|
||||
background: 'var(--affine-background-overlay-panel-color)',
|
||||
background: cssVar('backgroundOverlayPanelColor'),
|
||||
borderRadius: '12px',
|
||||
width: '300px',
|
||||
zIndex: 'var(--affine-z-index-popover)',
|
||||
zIndex: cssVar('zIndexPopover'),
|
||||
});
|
||||
|
||||
globalStyle('.react-datepicker__header', {
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
@@ -80,20 +78,20 @@ export const monthHeaderStyle = style({
|
||||
marginBottom: '18px',
|
||||
});
|
||||
export const monthTitleStyle = style({
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontWeight: '600',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
});
|
||||
export const yearStyle = style({
|
||||
marginLeft: '8px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontWeight: '600',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
});
|
||||
export const mouthStyle = style({
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
fontWeight: '600',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center',
|
||||
});
|
||||
@@ -110,7 +108,6 @@ export const headerAction = style({
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
});
|
||||
|
||||
globalStyle('.react-datepicker__day-names, .react-datepicker__week', {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -128,9 +125,9 @@ export const weekStyle = style([
|
||||
basicCell,
|
||||
{
|
||||
height: '28px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
fontWeight: 500,
|
||||
color: 'var(--affine-text-secondary-color)',
|
||||
color: cssVar('textSecondaryColor'),
|
||||
},
|
||||
]);
|
||||
export const calendarStyle = style({
|
||||
@@ -139,37 +136,35 @@ export const calendarStyle = style({
|
||||
width: '100%',
|
||||
padding: '20px',
|
||||
});
|
||||
|
||||
export const dayStyle = style([
|
||||
basicCell,
|
||||
{
|
||||
height: '28px',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
cursor: 'pointer',
|
||||
|
||||
fontWeight: '400',
|
||||
borderRadius: '8px',
|
||||
selectors: {
|
||||
'&[aria-selected="false"]:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
borderRadius: '8px',
|
||||
transition: 'background-color 0.3s ease-in-out',
|
||||
},
|
||||
'&[aria-selected="true"]': {
|
||||
color: 'var(--affine-pure-white)',
|
||||
background: 'var(--affine-primary-color)',
|
||||
color: cssVar('pureWhite'),
|
||||
background: cssVar('primaryColor'),
|
||||
fontWeight: '500',
|
||||
},
|
||||
'&[tabindex="0"][aria-selected="false"]': {
|
||||
background: 'var(--affine-background-overlay-panel-color)',
|
||||
background: cssVar('backgroundOverlayPanelColor'),
|
||||
},
|
||||
'&.react-datepicker__day--today[aria-selected="false"]': {
|
||||
fontWeight: '600',
|
||||
color: 'var(--affine-primary-color)',
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
'&.react-datepicker__day--outside-month[aria-selected="false"]': {
|
||||
color: 'var(--affine-text-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -178,13 +173,13 @@ export const arrowDownStyle = style({
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
marginLeft: '4px',
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
color: cssVar('iconColor'),
|
||||
fontSize: cssVar('fontSm'),
|
||||
cursor: 'pointer',
|
||||
});
|
||||
export const mouthsStyle = style({
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
color: cssVar('textPrimaryColor'),
|
||||
display: 'inline-block',
|
||||
lineHeight: '22px',
|
||||
padding: '6px 16px',
|
||||
@@ -192,32 +187,31 @@ export const mouthsStyle = style({
|
||||
borderRadius: '8px',
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
transition: 'background-color 0.3s ease-in-out',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
'&[aria-selected="true"]': {
|
||||
color: 'var(--affine-black)',
|
||||
background: 'var(--affine-hover-color)',
|
||||
color: cssVar('black'),
|
||||
background: cssVar('hoverColor'),
|
||||
fontWeight: '400',
|
||||
},
|
||||
'&[aria-selected="true"]:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&[tabindex="0"][aria-selected="false"]': {
|
||||
background: 'var(--affine-background-overlay-panel-color)',
|
||||
background: cssVar('backgroundOverlayPanelColor'),
|
||||
},
|
||||
'&.react-datepicker__month-text--today[aria-selected="false"]': {
|
||||
background: 'var(--affine-primary-color)',
|
||||
color: 'var(--affine-palette-line-white)',
|
||||
background: cssVar('primaryColor'),
|
||||
color: cssVar('paletteLineWhite'),
|
||||
},
|
||||
'&.react-datepicker__month-text--today[aria-selected="false"]:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
color: 'var(--affine-black)',
|
||||
background: cssVar('hoverColor'),
|
||||
color: cssVar('black'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
globalStyle(`${calendarStyle} .react-datepicker__month-container`, {
|
||||
float: 'none',
|
||||
width: '100%',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const divider = style({
|
||||
height: '1px',
|
||||
backgroundColor: 'var(--affine-border-color)',
|
||||
backgroundColor: cssVar('borderColor'),
|
||||
borderRadius: '8px',
|
||||
margin: '8px 0',
|
||||
width: '100%',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const inlineEditWrapper = style({
|
||||
position: 'relative',
|
||||
borderRadius: 4,
|
||||
@@ -11,13 +10,10 @@ export const inlineEditWrapper = style({
|
||||
export const inlineEdit = style({
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
|
||||
whiteSpace: 'pre',
|
||||
wordWrap: 'break-word',
|
||||
|
||||
// to avoid shrinking when <input /> show up
|
||||
border: '1px solid transparent',
|
||||
|
||||
selectors: {
|
||||
[`.${inlineEditWrapper}[data-editing="true"] &`]: {
|
||||
opacity: 0,
|
||||
@@ -25,18 +21,15 @@ export const inlineEdit = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const inlineEditInput = style({
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
left: 0,
|
||||
top: 0,
|
||||
|
||||
opacity: 0,
|
||||
visibility: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
|
||||
selectors: {
|
||||
[`.${inlineEditWrapper}[data-editing="true"] &`]: {
|
||||
opacity: 1,
|
||||
@@ -45,7 +38,6 @@ export const inlineEditInput = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const placeholder = style({
|
||||
opacity: 0.8,
|
||||
});
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const inputWrapper = style({
|
||||
width: '100%',
|
||||
height: 28,
|
||||
lineHeight: '22px',
|
||||
padding: '0 10px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
border: '1px solid',
|
||||
backgroundColor: 'var(--affine-white)',
|
||||
backgroundColor: cssVar('white'),
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
boxSizing: 'border-box',
|
||||
|
||||
selectors: {
|
||||
'&.no-border': {
|
||||
border: 'unset',
|
||||
@@ -29,27 +28,26 @@ export const inputWrapper = style({
|
||||
},
|
||||
// color
|
||||
'&.disabled': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&.error': {
|
||||
borderColor: 'var(--affine-error-color)',
|
||||
borderColor: cssVar('errorColor'),
|
||||
},
|
||||
'&.success': {
|
||||
borderColor: 'var(--affine-success-color)',
|
||||
borderColor: cssVar('successColor'),
|
||||
},
|
||||
'&.warning': {
|
||||
borderColor: 'var(--affine-warning-color)',
|
||||
borderColor: cssVar('warningColor'),
|
||||
},
|
||||
'&.default': {
|
||||
borderColor: 'var(--affine-border-color)',
|
||||
borderColor: cssVar('borderColor'),
|
||||
},
|
||||
'&.default.focus': {
|
||||
borderColor: 'var(--affine-primary-color)',
|
||||
borderColor: cssVar('primaryColor'),
|
||||
boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const input = style({
|
||||
height: '100%',
|
||||
width: '0',
|
||||
@@ -61,13 +59,12 @@ export const input = style({
|
||||
outline: 'none',
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
|
||||
selectors: {
|
||||
'&::placeholder': {
|
||||
color: 'var(--affine-placeholder-color)',
|
||||
color: cssVar('placeholderColor'),
|
||||
},
|
||||
'&:disabled': {
|
||||
color: 'var(--affine-text-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,11 +1,15 @@
|
||||
import { createVar, keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
export const speedVar = createVar('speedVar');
|
||||
|
||||
const rotate = keyframes({
|
||||
'0%': { transform: 'rotate(0deg)' },
|
||||
'50%': { transform: 'rotate(180deg)' },
|
||||
'100%': { transform: 'rotate(360deg)' },
|
||||
'0%': {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
'50%': {
|
||||
transform: 'rotate(180deg)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'rotate(360deg)',
|
||||
},
|
||||
});
|
||||
export const loading = style({
|
||||
vars: {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const root = style({
|
||||
width: '1em',
|
||||
height: '1em',
|
||||
@@ -7,13 +6,10 @@ export const root = style({
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
});
|
||||
|
||||
const magicColor = `rgb(119,117,125)`;
|
||||
|
||||
globalStyle(`${root} path[stroke="${magicColor}"]`, {
|
||||
stroke: 'currentColor',
|
||||
});
|
||||
|
||||
globalStyle(`${root} path[fill="${magicColor}"]`, {
|
||||
fill: 'currentColor',
|
||||
});
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
export const triggerWidthVar = createVar('triggerWidthVar');
|
||||
|
||||
export const menuContent = style({
|
||||
minWidth: '180px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderRadius: '8px',
|
||||
padding: '8px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: '400',
|
||||
backgroundColor: 'var(--affine-background-overlay-panel-color)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
||||
export const menuItem = style({
|
||||
maxWidth: '296px',
|
||||
display: 'flex',
|
||||
@@ -29,36 +28,34 @@ export const menuItem = style({
|
||||
'&:not(:last-of-type)': {
|
||||
marginBottom: '4px',
|
||||
},
|
||||
'&.block': { maxWidth: '100%' },
|
||||
'&.block': {
|
||||
maxWidth: '100%',
|
||||
},
|
||||
'&[data-disabled]': {
|
||||
color: 'var(--affine-text-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
'&[data-highlighted]': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
|
||||
'&:hover': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
},
|
||||
'&.danger:hover': {
|
||||
color: 'var(--affine-error-color)',
|
||||
backgroundColor: 'var(--affine-background-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
backgroundColor: cssVar('backgroundErrorColor'),
|
||||
},
|
||||
|
||||
'&.warning:hover': {
|
||||
color: 'var(--affine-warning-color)',
|
||||
backgroundColor: 'var(--affine-background-warning-color)',
|
||||
color: cssVar('warningColor'),
|
||||
backgroundColor: cssVar('backgroundWarningColor'),
|
||||
},
|
||||
|
||||
'&.selected, &.checked': {
|
||||
backgroundColor: 'var(--affine-hover-color)',
|
||||
color: 'var(--affine-primary-color)',
|
||||
backgroundColor: cssVar('hoverColor'),
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const menuSpan = style({
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
@@ -69,31 +66,32 @@ export const menuSpan = style({
|
||||
export const menuItemIcon = style({
|
||||
display: 'flex',
|
||||
flexShrink: 0,
|
||||
fontSize: 'var(--affine-font-h-5)',
|
||||
color: 'var(--affine-icon-color)',
|
||||
fontSize: cssVar('fontH5'),
|
||||
color: cssVar('iconColor'),
|
||||
selectors: {
|
||||
'&.start': { marginRight: '8px' },
|
||||
'&.end': { marginLeft: '8px' },
|
||||
'&.selected, &.checked': {
|
||||
color: 'var(--affine-primary-color)',
|
||||
'&.start': {
|
||||
marginRight: '8px',
|
||||
},
|
||||
'&.end': {
|
||||
marginLeft: '8px',
|
||||
},
|
||||
'&.selected, &.checked': {
|
||||
color: cssVar('primaryColor'),
|
||||
},
|
||||
|
||||
[`${menuItem}.danger:hover &`]: {
|
||||
color: 'var(--affine-error-color)',
|
||||
color: cssVar('errorColor'),
|
||||
},
|
||||
[`${menuItem}.warning:hover &`]: {
|
||||
color: 'var(--affine-warning-color)',
|
||||
color: cssVar('warningColor'),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const menuSeparator = style({
|
||||
height: '1px',
|
||||
backgroundColor: 'var(--affine-border-color)',
|
||||
backgroundColor: cssVar('borderColor'),
|
||||
marginTop: '12px',
|
||||
marginBottom: '8px',
|
||||
});
|
||||
|
||||
export const menuTrigger = style({
|
||||
vars: {
|
||||
[triggerWidthVar]: 'auto',
|
||||
@@ -102,22 +100,21 @@ export const menuTrigger = style({
|
||||
height: 28,
|
||||
lineHeight: '22px',
|
||||
padding: '0 10px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
border: '1px solid',
|
||||
backgroundColor: 'var(--affine-white)',
|
||||
backgroundColor: cssVar('white'),
|
||||
borderRadius: 8,
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
fontSize: 'var(--affine-font-xs)',
|
||||
fontSize: cssVar('fontXs'),
|
||||
cursor: 'pointer',
|
||||
['WebkitAppRegion' as string]: 'no-drag',
|
||||
borderColor: 'var(--affine-border-color)',
|
||||
borderColor: cssVar('borderColor'),
|
||||
outline: 'none',
|
||||
|
||||
selectors: {
|
||||
'&:hover': {
|
||||
background: 'var(--affine-hover-color)',
|
||||
background: cssVar('hoverColor'),
|
||||
},
|
||||
'&.no-border': {
|
||||
border: 'unset',
|
||||
@@ -137,7 +134,7 @@ export const menuTrigger = style({
|
||||
// color
|
||||
'&.disabled': {
|
||||
cursor: 'default',
|
||||
color: 'var(--affine-disable-color)',
|
||||
color: cssVar('textDisableColor'),
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
// TODO: wait for design
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { createVar, style } from '@vanilla-extract/css';
|
||||
|
||||
export const widthVar = createVar('widthVar');
|
||||
export const heightVar = createVar('heightVar');
|
||||
export const minHeightVar = createVar('minHeightVar');
|
||||
|
||||
export const modalOverlay = style({
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundColor: 'var(--affine-background-modal-color)',
|
||||
zIndex: 'var(--affine-z-index-modal)',
|
||||
backgroundColor: cssVar('backgroundModalColor'),
|
||||
zIndex: cssVar('zIndexModal'),
|
||||
});
|
||||
|
||||
export const modalContentWrapper = style({
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 'var(--affine-z-index-modal)',
|
||||
zIndex: cssVar('zIndexModal'),
|
||||
});
|
||||
|
||||
export const modalContent = style({
|
||||
vars: {
|
||||
[widthVar]: '',
|
||||
@@ -30,27 +27,25 @@ export const modalContent = style({
|
||||
height: heightVar,
|
||||
minHeight: minHeightVar,
|
||||
boxSizing: 'border-box',
|
||||
fontSize: 'var(--affine-font-base)',
|
||||
fontSize: cssVar('fontBase'),
|
||||
fontWeight: '400',
|
||||
lineHeight: '1.6',
|
||||
padding: '20px 24px',
|
||||
position: 'relative',
|
||||
backgroundColor: 'var(--affine-background-overlay-panel-color)',
|
||||
boxShadow: 'var(--affine-popover-shadow)',
|
||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
||||
boxShadow: cssVar('popoverShadow'),
|
||||
borderRadius: '12px',
|
||||
maxHeight: 'calc(100vh - 32px)',
|
||||
// :focus-visible will set outline
|
||||
outline: 'none',
|
||||
});
|
||||
|
||||
export const closeButton = style({
|
||||
position: 'absolute',
|
||||
top: '22px',
|
||||
right: '20px',
|
||||
});
|
||||
|
||||
export const modalHeader = style({
|
||||
fontSize: 'var(--affine-font-h-6)',
|
||||
fontSize: cssVar('fontH6'),
|
||||
fontWeight: '600',
|
||||
lineHeight: '1.45',
|
||||
marginBottom: '12px',
|
||||
@@ -58,7 +53,6 @@ export const modalHeader = style({
|
||||
export const modalDescription = style({
|
||||
// marginBottom: '20px',
|
||||
});
|
||||
|
||||
export const modalFooter = style({
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
@@ -72,12 +66,10 @@ export const modalFooter = style({
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const confirmModalContent = style({
|
||||
marginTop: '12px',
|
||||
marginBottom: '20px',
|
||||
});
|
||||
|
||||
export const confirmModalContainer = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const popoverContent = style({
|
||||
minWidth: '180px',
|
||||
color: 'var(--affine-text-primary-color)',
|
||||
color: cssVar('textPrimaryColor'),
|
||||
borderRadius: '8px',
|
||||
padding: '8px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
fontWeight: '400',
|
||||
backgroundColor: 'var(--affine-background-overlay-panel-color)',
|
||||
boxShadow: 'var(--affine-menu-shadow)',
|
||||
backgroundColor: cssVar('backgroundOverlayPanelColor'),
|
||||
boxShadow: cssVar('menuShadow'),
|
||||
userSelect: 'none',
|
||||
});
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
const HANDLE_SIZE = 24;
|
||||
|
||||
export const container = style({
|
||||
position: 'relative',
|
||||
border: '1px solid rgba(100, 100, 100, 0.2)',
|
||||
@@ -9,18 +7,15 @@ export const container = style({
|
||||
borderRadius: 4,
|
||||
borderBottomRightRadius: HANDLE_SIZE / 2,
|
||||
});
|
||||
|
||||
export const cornerHandle = style({
|
||||
position: 'absolute',
|
||||
top: `calc(100% - ${HANDLE_SIZE / 1.5}px)`,
|
||||
left: `calc(100% - ${HANDLE_SIZE / 1.5}px)`,
|
||||
width: HANDLE_SIZE,
|
||||
height: HANDLE_SIZE,
|
||||
|
||||
borderRadius: '50%',
|
||||
border: '2px solid transparent',
|
||||
borderRightColor: 'rgba(100, 100, 100, 0.3)',
|
||||
transform: 'rotate(45deg)',
|
||||
|
||||
cursor: 'nwse-resize',
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { globalStyle, style } from '@vanilla-extract/css';
|
||||
|
||||
export const scrollableContainerRoot = style({
|
||||
width: '100%',
|
||||
vars: {
|
||||
@@ -7,7 +7,6 @@ export const scrollableContainerRoot = style({
|
||||
},
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const scrollTopBorder = style({
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
@@ -16,27 +15,23 @@ export const scrollTopBorder = style({
|
||||
height: '1px',
|
||||
transition: 'opacity .3s .2s',
|
||||
opacity: 0,
|
||||
background: 'var(--affine-border-color)',
|
||||
background: cssVar('borderColor'),
|
||||
selectors: {
|
||||
'&[data-has-scroll-top="true"]': {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const scrollableViewport = style({
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
globalStyle(`${scrollableViewport} > div`, {
|
||||
display: 'contents !important',
|
||||
});
|
||||
|
||||
export const scrollableContainer = style({
|
||||
height: '100%',
|
||||
});
|
||||
|
||||
export const scrollbar = style({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -47,9 +42,9 @@ export const scrollbar = style({
|
||||
opacity: 1,
|
||||
transition: 'width .15s',
|
||||
':hover': {
|
||||
background: 'var(--affine-background-secondary-color)',
|
||||
background: cssVar('backgroundSecondaryColor'),
|
||||
width: 'calc(var(--scrollbar-width) + 3px)',
|
||||
borderLeft: '1px solid var(--affine-border-color)',
|
||||
borderLeft: `1px solid ${cssVar('borderColor')}`,
|
||||
},
|
||||
selectors: {
|
||||
'&[data-state="hidden"]': {
|
||||
@@ -62,15 +57,14 @@ export const TableScrollbar = style({
|
||||
height: 'calc(100% - 120px)',
|
||||
borderRadius: '4px',
|
||||
});
|
||||
|
||||
export const scrollbarThumb = style({
|
||||
position: 'relative',
|
||||
background: 'var(--affine-divider-color)',
|
||||
background: cssVar('dividerColor'),
|
||||
width: '50%',
|
||||
overflow: 'hidden',
|
||||
borderRadius: '4px',
|
||||
':hover': {
|
||||
background: 'var(--affine-icon-color)',
|
||||
background: cssVar('iconColor'),
|
||||
},
|
||||
selectors: {
|
||||
'&::before': {
|
||||
|
||||
@@ -1,30 +1,36 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { keyframes, style } from '@vanilla-extract/css';
|
||||
|
||||
import type { PickStringFromUnion, SkeletonProps } from './types';
|
||||
|
||||
// variables
|
||||
const bg = 'var(--affine-placeholder-color)';
|
||||
const bg = cssVar('placeholderColor');
|
||||
const highlight = 'rgba(255, 255, 255, 0.4)';
|
||||
const defaultHeight = '32px';
|
||||
|
||||
const pulseKeyframes = keyframes({
|
||||
'0%': { opacity: 1 },
|
||||
'50%': { opacity: 0.5 },
|
||||
'100%': { opacity: 1 },
|
||||
'0%': {
|
||||
opacity: 1,
|
||||
},
|
||||
'50%': {
|
||||
opacity: 0.5,
|
||||
},
|
||||
'100%': {
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
|
||||
const waveKeyframes = keyframes({
|
||||
'0%': { transform: 'translateX(-100%)' },
|
||||
'50%': { transform: 'translateX(100%)' },
|
||||
'100%': { transform: 'translateX(100%)' },
|
||||
'0%': {
|
||||
transform: 'translateX(-100%)',
|
||||
},
|
||||
'50%': {
|
||||
transform: 'translateX(100%)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translateX(100%)',
|
||||
},
|
||||
});
|
||||
|
||||
export const root = style({
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
height: defaultHeight,
|
||||
flexShrink: 0,
|
||||
|
||||
/**
|
||||
* paint background in ::before,
|
||||
* so that we can use opacity to control the color
|
||||
@@ -39,8 +45,7 @@ export const root = style({
|
||||
backgroundColor: bg,
|
||||
},
|
||||
});
|
||||
|
||||
export const variant: Record<string, string> = {
|
||||
export const variant = {
|
||||
circular: style({
|
||||
width: defaultHeight,
|
||||
borderRadius: '50%',
|
||||
@@ -58,21 +63,15 @@ export const variant: Record<string, string> = {
|
||||
marginBottom: '0.2em',
|
||||
}),
|
||||
};
|
||||
|
||||
export const animation: Record<
|
||||
PickStringFromUnion<SkeletonProps['animation']>,
|
||||
string
|
||||
> = {
|
||||
export const animation = {
|
||||
pulse: style({
|
||||
animation: `${pulseKeyframes} 2s ease-in-out 0.5s infinite`,
|
||||
}),
|
||||
wave: style({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
|
||||
/* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
|
||||
WebkitMaskImage: '-webkit-radial-gradient(white, black)',
|
||||
|
||||
'::after': {
|
||||
animation: `${waveKeyframes} 2s linear 0.5s infinite`,
|
||||
background: `linear-gradient(
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const labelStyle = style({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -14,11 +14,11 @@ export const switchStyle = style({
|
||||
position: 'relative',
|
||||
width: '46px',
|
||||
height: '26px',
|
||||
background: 'var(--affine-toggle-disable-background-color)',
|
||||
background: cssVar('toggleDisableBackgroundColor'),
|
||||
borderRadius: '37px',
|
||||
transition: '200ms all',
|
||||
border: '1px solid var(--affine-black-10)',
|
||||
boxShadow: 'var(--affine-toggle-circle-shadow)',
|
||||
border: `1px solid ${cssVar('black10')}`,
|
||||
boxShadow: cssVar('toggleCircleShadow'),
|
||||
selectors: {
|
||||
'&:before': {
|
||||
transition: 'all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51)',
|
||||
@@ -28,17 +28,17 @@ export const switchStyle = style({
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
top: '50%',
|
||||
border: '1px solid var(--affine-black-10)',
|
||||
background: 'var(--affine-toggle-circle-background-color)',
|
||||
border: `1px solid ${cssVar('black10')}`,
|
||||
background: cssVar('toggleCircleBackgroundColor'),
|
||||
transform: 'translate(1px, -50%)',
|
||||
},
|
||||
},
|
||||
});
|
||||
export const switchCheckedStyle = style({
|
||||
background: 'var(--affine-primary-color)',
|
||||
background: cssVar('primaryColor'),
|
||||
selectors: {
|
||||
'&:before': {
|
||||
borderColor: 'var(--affine-pure-black-10)',
|
||||
borderColor: cssVar('pureBlack10'),
|
||||
transform: 'translate(21px,-50%)',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { cssVar } from '@toeverything/theme';
|
||||
import { style } from '@vanilla-extract/css';
|
||||
|
||||
export const tooltipContent = style({
|
||||
backgroundColor: 'var(--affine-tooltip)',
|
||||
color: 'var(--affine-white)',
|
||||
backgroundColor: cssVar('tooltip'),
|
||||
color: cssVar('white'),
|
||||
padding: '5px 12px',
|
||||
fontSize: 'var(--affine-font-sm)',
|
||||
fontSize: cssVar('fontSm'),
|
||||
lineHeight: '22px',
|
||||
borderRadius: '4px',
|
||||
maxWidth: '280px',
|
||||
|
||||
Reference in New Issue
Block a user