UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

129 lines (126 loc) 2.77 kB
import { tokens } from '@equinor/eds-tokens'; import { button } from './button.js'; import mergeDeepRight from '../../../node_modules/.pnpm/ramda@0.30.1/node_modules/ramda/es/mergeDeepRight.js'; const { colors: { interactive: { primary__resting: { rgba: primaryColor }, primary__hover_alt: { rgba: primaryHoverAltColor }, secondary__resting: { rgba: secondaryColor }, secondary__link_hover: { rgba: secondaryHoverColor }, secondary__highlight: { rgba: secondaryHoverAltColor }, danger__resting: { rgba: dangerColor }, danger__hover: { rgba: dangerHoverColor }, danger__highlight: { rgba: dangerHoverAltColor } } }, clickbounds: { default__base: clicboundHeight, compact__standard: compactClickboundHeight }, shape, interactions: { focused: { width: focusOutlineWidth } } } = tokens; const primary = mergeDeepRight(button, { height: shape.icon_button.minHeight, width: shape.icon_button.minWidth, typography: { color: primaryColor }, border: { width: '0px', radius: '50%' }, background: 'transparent', spacings: { left: '0', right: '0' }, clickbound: { width: clicboundHeight, offset: { top: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px`, left: `${(parseInt(clicboundHeight) - parseInt(shape.icon_button.minWidth)) / 2}px` } }, states: { hover: { background: primaryHoverAltColor, border: { width: '0px', radius: '50%' } }, disabled: { background: 'transparent', border: { color: 'transparent' } }, focus: { outline: { offset: `-${parseInt(focusOutlineWidth)}px` } } }, modes: { compact: { height: shape._modes.compact.icon_button.minHeight, width: shape._modes.compact.icon_button.minWidth, clickbound: { width: compactClickboundHeight, offset: { top: '0', left: `${(parseInt(compactClickboundHeight) - parseInt(shape._modes.compact.icon_button.minWidth)) / 2}px` } } } } }); const secondary = mergeDeepRight(primary, { typography: { color: secondaryColor }, states: { hover: { background: secondaryHoverAltColor, typography: { color: secondaryHoverColor } } } }); const danger = mergeDeepRight(primary, { typography: { color: dangerColor }, states: { hover: { background: dangerHoverAltColor, typography: { color: dangerHoverColor } } } }); export { danger, primary, secondary };