@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
101 lines (98 loc) • 1.81 kB
JavaScript
import { tokens } from '@equinor/eds-tokens';
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor
},
primary__hover_alt: {
rgba: primaryHoverAlt
},
focus: {
rgba: focusOutlineColor
},
disabled__text: {
rgba: disabledText
}
}
},
typography: {
navigation: {
menu_title: labelTypography
}
},
spacings: {
comfortable: {
medium_small,
x_small,
x_large,
xx_large
}
},
clickbounds: {
default__base: clicboundSize,
compact__standard: compactClickboundSize
},
interactions: {
focused: {
width: focusOutlineWidth
}
}
} = tokens;
const comfortable = {
background: primaryColor,
typography: labelTypography,
width: xx_large,
spacings: {
bottom: medium_small,
top: medium_small,
left: medium_small,
right: medium_small
},
clickbound: {
height: clicboundSize
},
states: {
hover: {
background: primaryHoverAlt
},
disabled: {
background: disabledText
},
focus: {
outline: {
type: 'outline',
style: 'dashed',
width: focusOutlineWidth,
color: focusOutlineColor,
offset: '10px'
}
}
},
modes: {
compact: {
width: x_large,
spacings: {
bottom: x_small,
top: x_small,
left: x_small,
right: x_small
},
clickbound: {
height: compactClickboundSize
},
states: {
focus: {
outline: {
type: 'outline',
style: 'dashed',
width: focusOutlineWidth,
color: focusOutlineColor,
offset: '2px'
}
}
}
}
}
};
export { comfortable };