npm

@exmed/dexter-ds
TypeScript icon, indicating that this package has built-in type declarations

1.11.0 • Public • Published

Dexter

Design System by Exmed 😎

version semantic-release

Logo

Como utilizar

Instale no seu projeto:

npm i @exmed/dexter-ds

Neste repositório, você encontrará

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 🧑‍💻🖥️⚙️

Readme

Keywords

Package Sidebar

Install

npm i @exmed/dexter-ds

Weekly Downloads

18

Version

1.11.0

License

MIT

Unpacked Size

2.52 MB

Total Files

4486

Last publish

Collaborators

  • gestaoti-exmed