@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
64 lines • 1.66 kB
JavaScript
import { hexToRgba } from '@atlaskit/adf-schema';
import { B75, DN400, N30A, N400, R400 } from '@atlaskit/theme/colors';
export const iconOnlySpacing = {
'&&': {
padding: '0px',
/**
Increased specificity here because css for .hyperlink-open-link defined in
packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
overrides padding left-right 2px with 4px.
*/
'&&[href]': {
padding: '0 2px'
}
},
'& > span': {
margin: '0px'
}
};
const getStyles = (property, {
appearance = 'default',
state = 'default',
mode = 'light'
}) => {
if (!property[appearance] || !property[appearance][state]) {
return 'initial';
}
return property[appearance][state][mode];
};
const background = {
danger: {
default: {
light: 'inherit',
dark: 'inherit'
},
hover: {
light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
},
active: {
light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(B75, 0.6)}`})`,
dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(B75, 0.6)}`})`
}
}
};
const color = {
danger: {
default: {
light: `var(--ds-icon, ${N400})`,
dark: `var(--ds-icon, ${DN400})`
},
hover: {
light: `var(--ds-icon-danger, ${R400})`,
dark: `var(--ds-icon-danger, ${R400})`
},
active: {
light: `var(--ds-icon-danger, ${R400})`,
dark: `var(--ds-icon-danger, ${R400})`
}
}
};
export const getButtonStyles = props => ({
background: getStyles(background, props),
color: getStyles(color, props)
});