@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
85 lines (82 loc) • 1.7 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
}
}
}
} = tokens;
const primary = mergeDeepRight(button, {
typography: {
color: primaryColor
},
states: {
hover: {
background: primaryHoverAltColor,
typography: {
color: primaryHoverColor
}
},
disabled: {
background: 'transparent',
border: {
color: 'transparent'
}
}
}
});
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 };