DS Toshyro
Status: Developing
Requisitos:
- Ter o tailwind instalado
Para pegar a estilização:
Adicione o seguinte trecho no diretório tailwind.config.js, dentro de module.exports na aba content[]:
const customColors = require("design-system-toshyro/lib/customColors");
module.exports = {
content: [
// ...
"./node_modules/design-system-toshyro/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {
colors: {
default: {
50: 'hsl(240, 6%, 10%)',
100: 'hsl(240, 4%, 16%)',
200: 'hsl(240, 5%, 26%)',
300: 'hsl(240, 5%, 34%)',
400: 'hsl(240, 4%, 46%)',
500: 'hsl(240, 5%, 65%)',
600: 'hsl(240, 5%, 84%)',
700: 'hsl(240, 6%, 90%)',
800: 'hsl(240, 5%, 96%)',
900: 'hsl(0, 0%, 98%)',
DEFAULT: 'hsl(240, 5%, 26%)',
},
primary: {
50: 'hsl(212, 100%, 10%)',
100: 'hsl(212, 100%, 19%)',
200: 'hsl(212, 100%, 29%)',
300: 'hsl(212, 100%, 38%)',
400: 'hsl(212, 100%, 47%)',
500: 'hsl(212, 92%, 58%)',
600: 'hsl(212, 92%, 69%)',
700: 'hsl(212, 92%, 79%)',
800: 'hsl(212, 92%, 90%)',
900: 'hsl(213, 92%, 95%)',
DEFAULT: 'hsl(212, 100%, 47%)',
},
secondary: {
50: 'hsl(270, 67%, 9%)',
100: 'hsl(270, 67%, 19%)',
200: 'hsl(270, 67%, 28%)',
300: 'hsl(270, 67%, 38%)',
400: 'hsl(270, 67%, 47%)',
500: 'hsl(270, 59%, 58%)',
600: 'hsl(270, 59%, 68%)',
700: 'hsl(270, 59%, 79%)',
800: 'hsl(270, 59%, 89%)',
900: 'hsl(270, 62%, 95%)',
DEFAULT: 'hsl(270, 59%, 58%)',
},
success: {
50: 'hsl(146, 78%, 9%)',
100: 'hsl(146, 80%, 17%)',
200: 'hsl(146, 79%, 26%)',
300: 'hsl(146, 80%, 35%)',
400: 'hsl(146, 79%, 44%)',
500: 'hsl(146, 62%, 55%)',
600: 'hsl(146, 63%, 66%)',
700: 'hsl(146, 62%, 77%)',
800: 'hsl(146, 61%, 89%)',
900: 'hsl(147, 64%, 95%)',
DEFAULT: 'hsl(146, 79%, 44%)',
},
warning: {
50: 'hsl(37, 75%, 11%)',
100: 'hsl(37, 75%, 22%)',
200: 'hsl(37, 74%, 33%)',
300: 'hsl(37, 74%, 44%)',
400: 'hsl(37, 91%, 55%)',
500: 'hsl(37, 91%, 64%)',
600: 'hsl(37, 91%, 73%)',
700: 'hsl(37, 91%, 82%)',
800: 'hsl(37, 91%, 91%)',
900: 'hsl(55, 92%, 95%)',
DEFAULT: 'hsl(37, 91%, 55%)',
},
danger: {
50: 'hsl(340, 85%, 10%)',
100: 'hsl(339, 87%, 20%)',
200: 'hsl(339, 86%, 31%)',
300: 'hsl(339, 87%, 41%)',
400: 'hsl(339, 90%, 51%)',
500: 'hsl(339, 90%, 61%)',
600: 'hsl(339, 91%, 71%)',
700: 'hsl(339, 90%, 80%)',
800: 'hsl(340, 92%, 90%)',
900: 'hsl(339, 92%, 95%)',
DEFAULT: 'hsl(339, 90%, 51%)',
},
// ...
}
},
},
plugins: [
require('tailwind-scrollbar'),
],
variants: {
scrollbar: ['rounded']
},
darkMode: "class",
...
}
Estrutura padrão:
- Todos os componentes precisam estar sendo envolvidos por Form ou um ResetForm:
<Form> ou <ResetForm>
...
</Form> ou </ResetForm>
Estrutura de Login exemplo:
<Form>
<Input
name="user"
label="Usuário"
/>
<Input
name="pass"
label="Senha"
type="password"
/>
<Button
name="submit"
onSubmit={(e)=>console.log(e)}
>
Entrar
</Button>
</Form>
Button
- O componente Button recebe os seguintes parâmetros:
<Button
onSubmit = executa a função passada dentro de um "handleSubmit(<aqui>)"
onClick = executa a função passada quando o botão for clicado
variant = enum Variant
disabled = boolean
full = boolean
loading = boolean
leftIcon = <Icone />
rightIcon = <Icone />
>
{title}
</Button>
Input
- O componente Input recebe os seguintes parâmetros:
<Input
name = string
label = Texto do Input
validation = Validação
mask = string //e.g. "99999-999"
//'*' - letras e números
//'9' - apenas números
//'A' - apenas letras
variant = enum Variant
saveMask = boolean
maskChar = string
loading = boolean
...
[configurações padrões dos inputs]
/>
Select
- O componente Select recebe os seguintes parâmetros:
<Select
name = string
label = string
options = AutocompleteOption[]
placeholder = string;
validation = Validação
variant = enum Variant
loading = boolean
defaultValue = string | number
/>
Autocomplete
- O componente Autocomplete recebe os seguintes parâmetros:
<Autocomplete
name = string
label = string
options = AutocompleteOption[]
placeholder = string;
validation = Validação
variant = enum Variant
loading = boolean
defaultValue = string | number
/>
Também temos os exemplos de cada componente no Design System Toshyro