@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
132 lines (129 loc) • 2.84 kB
JavaScript
import { tokens } from '@equinor/eds-tokens';
const {
typography: {
table: {
cell_header: cellTypography
},
_modes: {
compact: compactTypography
}
},
colors: {
text: {
static_icons__default: {
rgba: typographyColor
}
},
ui: {
background__medium: {
rgba: borderColor
}
},
interactive: {
table__header__fill_resting: {
rgba: backgroundColor
},
table__header__fill_hover: {
rgba: hoverBackgroundColor
},
table__header__fill_activated: {
rgba: activeBackgroundColor
},
primary__resting: {
rgba: primaryRestingColor
},
disabled__text: {
rgba: disabledTextColor
},
disabled__border: {
rgba: disabledBorderColor
},
focus: {
rgba: focusColor
}
}
},
spacings: {
comfortable: {
medium
}
}
} = tokens;
const token = {
height: 'var(--eds_table__cell__height, 48px)',
background: backgroundColor,
align: {
vertical: 'var(--eds_table__cell__vertical_align, inherit)'
},
typography: {
...cellTypography,
color: typographyColor,
fontSize: `var(--eds_table__font_size, ${cellTypography.fontSize})`
},
border: {
type: 'bordergroup',
bottom: {
type: 'border',
width: '2px',
color: borderColor,
style: 'solid'
}
},
spacings: {
top: 'var(--eds_table__cell__padding_y, 0)',
bottom: 'var(--eds_table__cell__padding_y, 0)',
left: `var(--eds_table__cell__padding_x, ${medium})`,
right: `var(--eds_table__cell__padding_x, ${medium})`
},
states: {
active: {
background: activeBackgroundColor,
typography: {
...cellTypography,
color: primaryRestingColor
},
border: {
type: 'bordergroup',
bottom: {
color: primaryRestingColor
}
}
},
disabled: {
typography: {
...cellTypography,
color: disabledTextColor
},
border: {
type: 'bordergroup',
bottom: {
color: disabledBorderColor
}
}
},
focus: {
outline: {
type: 'outline',
color: focusColor,
width: '1px',
style: 'dashed'
}
},
hover: {
background: hoverBackgroundColor
}
},
modes: {
compact: {
height: 'var(--eds_table__cell__height_compact, 32px)',
typography: compactTypography.table.cell_header,
spacings: {
top: 'var(--eds_table__cell__padding_y_compact, 0)',
bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
left: `var(--eds_table__cell__padding_x_compact, ${medium})`,
right: `var(--eds_table__cell__padding_x_compact, ${medium})`
}
}
}
};
export { token };