@exmed/dexter-ds

Dexter

Design System by Exmed 😎

Como utilizar

Instale no seu projeto:

npm i @exmed/dexter-ds

Neste repositório, você encontrará

• Cores
• Ícones

Cores

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"

Ícones

Utilize os ícones de acordo com a sua plataforma

React web

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.

React Native

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
`

Imagens

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";

Bons códigos 🧑‍💻🖥️⚙️