@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
209 lines • 7.94 kB
JavaScript
/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
/* eslint-disable @atlaskit/ui-styling-standard/no-exported-styles */
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css, keyframes } from '@emotion/react';
const pulseIn = keyframes({
'0%, 100%': {
transform: 'scaleX(0)',
opacity: 0
},
'10%': {
transform: 'scaleX(1.4)',
opacity: 1
},
'15%, 85%': {
transform: 'scaleX(1)',
opacity: 1
}
});
const pulseOut = keyframes({
'0%, 90%, 100%': {
transform: 'scaleX(1)',
opacity: 1
},
'10%, 80%': {
transform: 'scaleX(0)',
opacity: 0
}
});
const pulseInDuringTr = keyframes({
'0%, 95%': {
transform: 'scaleX(1)',
opacity: 1
},
'100%': {
transform: 'scaleX(0)',
opacity: 0
}
});
const pulseOutDuringTr = keyframes({
'100%': {
transform: 'scaleX(1)',
opacity: 1
},
'0%, 90%': {
transform: 'scaleX(0)',
opacity: 0
}
});
export const telepointerColorAndCommonStyle = css({
'.ProseMirror .telepointer': {
position: 'relative',
transition: 'opacity 200ms',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'&.telepointer-selection:not(.inlineNodeView)': {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1.2,
pointerEvents: 'none',
userSelect: 'none'
},
'&.telepointer-dim': {
opacity: 0.2
},
'&.color-0': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-red-bolder, #C9372C)"
},
'&.color-1': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-blue-bolder, #1868DB)"
},
'&.color-2': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-green-bolder, #1F845A)"
},
'&.color-3': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-bolder, #946F00)"
},
'&.color-4': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-purple-bolder, #964AC0)"
},
'&.color-5': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-bolder, #AE4787)"
},
'&.color-6': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-teal-bolder, #227D9B)"
},
'&.color-7': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-orange-bolder, #BD5B00)"
},
'&.color-8': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-lime-bolder, #5B7F24)"
},
'&.color-9': {
'--telepointer-participant-text-color': "var(--ds-text-inverse, #FFFFFF)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-gray-bolder, #6B6E76)"
},
'&.color-10': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-blue-subtle, #669DF1)"
},
'&.color-11': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-red-subtle, #F87168)"
},
'&.color-12': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-orange-subtle, #FCA700)"
},
'&.color-13': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-yellow-subtle, #EED12B)"
},
'&.color-14': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-green-subtle, #4BCE97)"
},
'&.color-15': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-teal-subtle, #6CC3E0)"
},
'&.color-16': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-purple-subtle, #C97CF4)"
},
'&.color-17': {
'--telepointer-participant-text-color': "var(--ds-text-accent-gray-bolder, #1E1F21)",
'--telepointer-participant-bg-color': "var(--ds-background-accent-magenta-subtle, #E774BB)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'html:not([data-color-mode=dark]) &': {
'--telepointer-participant-background-first-stop': '-850000%',
'--telepointer-participant-background-second-stop': '150000%'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'html[data-color-mode=dark] &': {
'--telepointer-participant-background-first-stop': '-800000%',
'--telepointer-participant-background-second-stop': '200000%'
},
'&[class*="color-"]': {
background: 'linear-gradient(to bottom, var(--telepointer-participant-bg-color) var(--telepointer-participant-background-first-stop), transparent var(--telepointer-participant-background-second-stop))',
'&::after': {
backgroundColor: 'var(--telepointer-participant-bg-color)',
color: 'var(--telepointer-participant-text-color)',
borderColor: 'var(--telepointer-participant-bg-color)'
}
}
}
});
export const telepointerStyle = css({
'.ProseMirror .telepointer': {
'&.telepointer-selection-badge': {
'.telepointer-initial, .telepointer-fullname': {
position: 'absolute',
display: 'block',
userSelect: 'none',
whiteSpace: 'pre',
top: -14,
left: 0,
font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
paddingLeft: "var(--ds-space-050, 4px)",
paddingRight: "var(--ds-space-050, 4px)",
borderRadius: `0 ${"var(--ds-radius-xsmall, 2px)"} ${"var(--ds-radius-xsmall, 2px)"} 0`
},
'.telepointer-initial': {
opacity: 1,
transition: 'opacity 0.15s ease-out'
},
'.telepointer-fullname': {
opacity: 0,
transform: 'scaleX(0)',
transformOrigin: 'top left',
transition: 'transform 0.15s ease-out, opacity 0.15s ease-out'
}
},
'&.telepointer-pulse-animate': {
'.telepointer-initial': {
animation: `${pulseOut} 2.5s ease-in-out`
},
'.telepointer-fullname': {
animation: `${pulseIn} 2.5s ease-in-out`
}
},
'&.telepointer-pulse-during-tr': {
'.telepointer-initial': {
animation: `${pulseOutDuringTr} 7500ms ease-in-out`
},
'.telepointer-fullname': {
animation: `${pulseInDuringTr} 7500ms ease-in-out`
}
},
'&:hover': {
'.telepointer-initial': {
opacity: 0,
transitionDelay: '150ms'
},
'.telepointer-fullname': {
transform: 'scaleX(1)',
opacity: 1,
zIndex: 1
}
}
}
});