Design System by Exmed 😎
Instale no seu projeto:
npm i @exmed/dexter-ds
Neste repositório, você encontrará
Utilize as cores individuais ou o conjunto completo:
import { individual } from "@exmed/dexter-ds/lib/colors"
individual[0]; // "#B1EFE8"
... // ...
individual[40]; // "#D0F5F1"
import * as colors from '@exmed/dexter-ds/lib/colors';
colors; // { individual: {...}, empresas: {...}, ... }
colors.empresas[0]; // "#6161FF"
Utilize os ícones de acordo com a sua plataforma
index.jsx
import { IcClose } from '@exmed/dexter-ds/lib/icons';
<Container>
<IcClose />
</Container>;
styles.js
import styled from 'styled-components';
import { neutral } from '@exmed/dexter-ds/lib/colors';
const Container = styled.div`
color: ${neutral[90]}; // #141414
svg {
${neutral[0]}; // #FFFFFF
}
`;
// A cor do ícone será sempre herdada do seu pai, caso não seja definida diretamente.
styles.js
import styled from "styled-components";
import { neutral } from "@exmed/dexter-ds/lib/colors"
---
import { IcClose } from "@exmed/dexter-ds/lib/icons/svg";
const Icon = styled(Close)`
color: ${neutral[90]}; // #141414
`
As imagens podem ser acessadas pelo diretório /lib/images
import BrFlag from "@exmed/dexter-ds/lib/images/flag_for_brasil.svg";
import NoRequisition from "@exmed/dexter-ds/lib/images/empty-states/report.svg";