design-system-toshyro v1.0.91
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
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
8 months ago
7 months ago
7 months ago
9 months ago
7 months ago
9 months ago
5 months ago
9 months ago
7 months ago
8 months ago
7 months ago
7 months ago
9 months ago
5 months ago
7 months ago
8 months ago
7 months ago
9 months ago
8 months ago
7 months ago
9 months ago
7 months ago
9 months ago
7 months ago
7 months ago
7 months ago
9 months ago
5 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
5 months ago
6 months ago
7 months ago
5 months ago
8 months ago
5 months ago
7 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago