UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

166 lines (163 loc) 3.07 kB
import { tokens } from '@equinor/eds-tokens'; const { colors: { ui: { background__medium: { rgba: backgroundColorMedium } }, interactive: { primary__hover_alt: { rgba: primaryHoverAlt }, primary__hover: { rgba: primaryHover }, primary__selected_highlight: { rgba: activeColor }, primary__resting: { rgba: primaryResting }, disabled__fill: { rgba: backgroundDisabled }, focus: { rgba: focusOutlineColor }, icon_on_interactive_colors: { rgba: iconInteractive } }, text: { static_icons__tertiary: { rgba: iconTertiary } } }, typography: { navigation: { menu_title: labelTypography } }, clickbounds, elevation: { raised: boxShadow }, spacings: { comfortable: { medium_small } }, shape: { circle, _modes: { compact: { icon_button: compactIconButton } } }, interactions: { focused: { width: focusOutlineWidth } } } = tokens; const comfortable = { typography: labelTypography, height: circle.minHeight, width: circle.minWidth, clickbound: { height: clickbounds.default__base, width: clickbounds.default__base }, entities: { label: { spacings: { left: medium_small } }, track: { width: '32px', height: '8px', background: backgroundColorMedium, border: { type: 'border', radius: '4px' }, states: { active: { background: activeColor }, hover: { background: primaryHover } } }, handle: { height: '16px', width: '16px', boxShadow, background: iconTertiary, states: { active: { background: primaryResting }, hover: { background: primaryHoverAlt } } } }, modes: { compact: { height: compactIconButton.minHeight, width: compactIconButton.minWidth, clickbound: { height: clickbounds.compact__standard, width: clickbounds.compact__standard }, entities: { track: { width: '20px', height: '10px', states: { disabled: { background: iconTertiary }, active: { background: primaryResting } } }, handle: { height: '6px', width: '6px', background: iconInteractive } } } }, states: { disabled: { background: backgroundDisabled }, focus: { outline: { width: focusOutlineWidth, type: 'outline', style: 'dashed', color: focusOutlineColor } }, hover: { background: primaryHoverAlt, entities: { handle: { background: primaryHover } } } } }; export { comfortable };