UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

112 lines (109 loc) 2.21 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: { rgba: primaryHoverColor }, 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 } } }, shape: { button: { borderRadius: buttonBorderRadius } } } = tokens; const primary = mergeDeepRight(button, { typography: { color: primaryColor }, border: { type: 'border', style: 'solid', width: '1px', color: primaryColor, radius: `var(--eds_button__radius, ${buttonBorderRadius})` }, states: { hover: { typography: { color: primaryHoverColor }, background: primaryHoverAltColor, border: { style: 'solid', type: 'border', width: '1px', color: primaryHoverColor } }, disabled: { background: 'transparent' } } }); const secondary = mergeDeepRight(primary, { typography: { color: secondaryColor }, border: { color: secondaryColor }, states: { hover: { background: secondaryHoverAltColor, typography: { color: secondaryHoverColor }, border: { color: secondaryHoverColor } } } }); const danger = mergeDeepRight(primary, { typography: { color: dangerColor }, border: { color: dangerColor }, states: { hover: { background: dangerHoverAltColor, typography: { color: dangerHoverColor }, border: { color: dangerHoverColor } } } }); export { danger, primary, secondary };