import { action, spacing } from '@preply/ds-core';
import { getTokenVar as t } from '@preply/ds-web-core';
import styled from 'styled-components';

interface Props {
    padding: 's' | 'm' | 'l';
}

export const MyStyledComponentWithTokens = styled.div<Props>`
    padding: ${({ padding }) => t(spacing[padding])};
    color: ${t(action.variant.primary.color)};
    background-color: ${t(action.variant.primary.bgColor)};
    border-radius: ${t(action.base.borderRadius)};
`;
