@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
112 lines (109 loc) • 2.21 kB
JavaScript
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 };