@beryl-ui/tokens 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/index.d.mts +91 -0
- package/dist/index.d.ts +91 -0
- package/dist/index.js +138 -0
- package/dist/index.mjs +105 -0
- package/package.json +34 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @beryl-ui/tokens
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://www.npmjs.com/package/@beryl-ui/tokens">
|
|
5
|
+
<img alt="NPM Version" src="https://img.shields.io/npm/v/@beryl-ui/tokens?color=8257E5&label=%40beryl-ui%2Ftokens">
|
|
6
|
+
</a>
|
|
7
|
+
<img alt="License" src="https://img.shields.io/github/license/Robson16/beryl-ui?color=8257E5">
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
Design tokens centralizados do **beryl-ui** que definem a identidade visual completa do sistema. Eles servem como fonte única da verdade para cores, espaçamentos, tipografia, bordas e demais valores de design.
|
|
11
|
+
|
|
12
|
+
## ✨ Tokens Incluídos
|
|
13
|
+
|
|
14
|
+
* **Cores**: Paleta de cores primárias, secundárias, neutras, etc.
|
|
15
|
+
* **Espaçamentos**: Valores para margens, paddings e gaps.
|
|
16
|
+
* **Tipografia**: Famílias de fontes, tamanhos, pesos e alturas de linha.
|
|
17
|
+
* **Bordas**: Raio de borda (border-radius).
|
|
18
|
+
* **Fontes**: Famílias de fontes.
|
|
19
|
+
* **Line Heights**: Alturas de linha.
|
|
20
|
+
* **Font Sizes**: Tamanhos de fonte.
|
|
21
|
+
|
|
22
|
+
## 🚀 Instalação
|
|
23
|
+
|
|
24
|
+
Instale este pacote em seus projetos que precisam acessar os valores de design:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @beryl-ui/tokens
|
|
28
|
+
# ou
|
|
29
|
+
yarn add @beryl-ui/tokens
|
|
30
|
+
# ou
|
|
31
|
+
pnpm add @beryl-ui/tokens
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## ⚙️ Uso
|
|
35
|
+
|
|
36
|
+
Você pode importar e usar os tokens diretamente em seu código JavaScript/TypeScript, especialmente útil com bibliotecas de CSS-in-JS como `styled-components`.
|
|
37
|
+
|
|
38
|
+
```javascript
|
|
39
|
+
// Exemplo de uso em um arquivo JavaScript/TypeScript
|
|
40
|
+
import { colors, fontSizes, space } from '@beryl-ui/tokens'
|
|
41
|
+
|
|
42
|
+
console.log(colors.gray800) // #202024
|
|
43
|
+
console.log(fontSizes.md) // 1rem
|
|
44
|
+
console.log(space[4]) // 1rem
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## 📄 Licença
|
|
48
|
+
|
|
49
|
+
Este pacote está sob a licença MIT. Veja o arquivo LICENSE.md na raiz do repositório para mais detalhes.
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
declare const colors: {
|
|
2
|
+
white: string;
|
|
3
|
+
black: string;
|
|
4
|
+
gray100: string;
|
|
5
|
+
gray200: string;
|
|
6
|
+
gray300: string;
|
|
7
|
+
gray400: string;
|
|
8
|
+
gray500: string;
|
|
9
|
+
gray600: string;
|
|
10
|
+
gray700: string;
|
|
11
|
+
gray800: string;
|
|
12
|
+
gray900: string;
|
|
13
|
+
emerald100: string;
|
|
14
|
+
emerald200: string;
|
|
15
|
+
emerald300: string;
|
|
16
|
+
emerald400: string;
|
|
17
|
+
emerald500: string;
|
|
18
|
+
emerald600: string;
|
|
19
|
+
emerald700: string;
|
|
20
|
+
emerald800: string;
|
|
21
|
+
emerald900: string;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
declare const fontSizes: {
|
|
25
|
+
xxs: string;
|
|
26
|
+
xs: string;
|
|
27
|
+
sm: string;
|
|
28
|
+
md: string;
|
|
29
|
+
lg: string;
|
|
30
|
+
xl: string;
|
|
31
|
+
'2xl': string;
|
|
32
|
+
'4xl': string;
|
|
33
|
+
'5xl': string;
|
|
34
|
+
'6xl': string;
|
|
35
|
+
'7xl': string;
|
|
36
|
+
'8xl': string;
|
|
37
|
+
'9xl': string;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare const fontWeights: {
|
|
41
|
+
thin: string;
|
|
42
|
+
'extra-light': string;
|
|
43
|
+
light: string;
|
|
44
|
+
regular: string;
|
|
45
|
+
medium: string;
|
|
46
|
+
'semi-bold': string;
|
|
47
|
+
bold: string;
|
|
48
|
+
'extra-bold': string;
|
|
49
|
+
black: string;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
declare const fonts: {
|
|
53
|
+
default: string;
|
|
54
|
+
code: string;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
declare const lineHeights: {
|
|
58
|
+
shorter: string;
|
|
59
|
+
short: string;
|
|
60
|
+
base: string;
|
|
61
|
+
tall: string;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
declare const radii: {
|
|
65
|
+
px: string;
|
|
66
|
+
xs: string;
|
|
67
|
+
sm: string;
|
|
68
|
+
md: string;
|
|
69
|
+
lg: string;
|
|
70
|
+
full: string;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
declare const space: {
|
|
74
|
+
1: string;
|
|
75
|
+
2: string;
|
|
76
|
+
3: string;
|
|
77
|
+
4: string;
|
|
78
|
+
5: string;
|
|
79
|
+
6: string;
|
|
80
|
+
7: string;
|
|
81
|
+
8: string;
|
|
82
|
+
10: string;
|
|
83
|
+
12: string;
|
|
84
|
+
16: string;
|
|
85
|
+
20: string;
|
|
86
|
+
40: string;
|
|
87
|
+
64: string;
|
|
88
|
+
80: string;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export { colors, fontSizes, fontWeights, fonts, lineHeights, radii, space };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
declare const colors: {
|
|
2
|
+
white: string;
|
|
3
|
+
black: string;
|
|
4
|
+
gray100: string;
|
|
5
|
+
gray200: string;
|
|
6
|
+
gray300: string;
|
|
7
|
+
gray400: string;
|
|
8
|
+
gray500: string;
|
|
9
|
+
gray600: string;
|
|
10
|
+
gray700: string;
|
|
11
|
+
gray800: string;
|
|
12
|
+
gray900: string;
|
|
13
|
+
emerald100: string;
|
|
14
|
+
emerald200: string;
|
|
15
|
+
emerald300: string;
|
|
16
|
+
emerald400: string;
|
|
17
|
+
emerald500: string;
|
|
18
|
+
emerald600: string;
|
|
19
|
+
emerald700: string;
|
|
20
|
+
emerald800: string;
|
|
21
|
+
emerald900: string;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
declare const fontSizes: {
|
|
25
|
+
xxs: string;
|
|
26
|
+
xs: string;
|
|
27
|
+
sm: string;
|
|
28
|
+
md: string;
|
|
29
|
+
lg: string;
|
|
30
|
+
xl: string;
|
|
31
|
+
'2xl': string;
|
|
32
|
+
'4xl': string;
|
|
33
|
+
'5xl': string;
|
|
34
|
+
'6xl': string;
|
|
35
|
+
'7xl': string;
|
|
36
|
+
'8xl': string;
|
|
37
|
+
'9xl': string;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
declare const fontWeights: {
|
|
41
|
+
thin: string;
|
|
42
|
+
'extra-light': string;
|
|
43
|
+
light: string;
|
|
44
|
+
regular: string;
|
|
45
|
+
medium: string;
|
|
46
|
+
'semi-bold': string;
|
|
47
|
+
bold: string;
|
|
48
|
+
'extra-bold': string;
|
|
49
|
+
black: string;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
declare const fonts: {
|
|
53
|
+
default: string;
|
|
54
|
+
code: string;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
declare const lineHeights: {
|
|
58
|
+
shorter: string;
|
|
59
|
+
short: string;
|
|
60
|
+
base: string;
|
|
61
|
+
tall: string;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
declare const radii: {
|
|
65
|
+
px: string;
|
|
66
|
+
xs: string;
|
|
67
|
+
sm: string;
|
|
68
|
+
md: string;
|
|
69
|
+
lg: string;
|
|
70
|
+
full: string;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
declare const space: {
|
|
74
|
+
1: string;
|
|
75
|
+
2: string;
|
|
76
|
+
3: string;
|
|
77
|
+
4: string;
|
|
78
|
+
5: string;
|
|
79
|
+
6: string;
|
|
80
|
+
7: string;
|
|
81
|
+
8: string;
|
|
82
|
+
10: string;
|
|
83
|
+
12: string;
|
|
84
|
+
16: string;
|
|
85
|
+
20: string;
|
|
86
|
+
40: string;
|
|
87
|
+
64: string;
|
|
88
|
+
80: string;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export { colors, fontSizes, fontWeights, fonts, lineHeights, radii, space };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
colors: () => colors,
|
|
24
|
+
fontSizes: () => fontSizes,
|
|
25
|
+
fontWeights: () => fontWeights,
|
|
26
|
+
fonts: () => fonts,
|
|
27
|
+
lineHeights: () => lineHeights,
|
|
28
|
+
radii: () => radii,
|
|
29
|
+
space: () => space
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(index_exports);
|
|
32
|
+
|
|
33
|
+
// src/colors.ts
|
|
34
|
+
var colors = {
|
|
35
|
+
white: "#FFF",
|
|
36
|
+
black: "#000",
|
|
37
|
+
gray100: "#E1E1E6",
|
|
38
|
+
gray200: "#A9A9B2",
|
|
39
|
+
gray300: "#8D8D99",
|
|
40
|
+
gray400: "#7C7C8A",
|
|
41
|
+
gray500: "#505059",
|
|
42
|
+
gray600: "#323238",
|
|
43
|
+
gray700: "#29292E",
|
|
44
|
+
gray800: "#202024",
|
|
45
|
+
gray900: "#121214",
|
|
46
|
+
emerald100: "#00DF9D",
|
|
47
|
+
emerald200: "#00C98D",
|
|
48
|
+
emerald300: "#00B37E",
|
|
49
|
+
emerald400: "#009D6E",
|
|
50
|
+
emerald500: "#00875F",
|
|
51
|
+
emerald600: "#007351",
|
|
52
|
+
emerald700: "#015F43",
|
|
53
|
+
emerald800: "#004430",
|
|
54
|
+
emerald900: "#00291D"
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
// src/font-sizes.ts
|
|
58
|
+
var fontSizes = {
|
|
59
|
+
xxs: "0.625rem",
|
|
60
|
+
xs: "0.75rem",
|
|
61
|
+
sm: "0.875rem",
|
|
62
|
+
md: "1rem",
|
|
63
|
+
lg: "1.125rem",
|
|
64
|
+
xl: "1.25rem",
|
|
65
|
+
"2xl": "1.5rem",
|
|
66
|
+
"4xl": "2rem",
|
|
67
|
+
"5xl": "2.25rem",
|
|
68
|
+
"6xl": "3rem",
|
|
69
|
+
"7xl": "4rem",
|
|
70
|
+
"8xl": "4.5rem",
|
|
71
|
+
"9xl": "6rem"
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// src/font-weights.ts
|
|
75
|
+
var fontWeights = {
|
|
76
|
+
thin: "100",
|
|
77
|
+
"extra-light": "200",
|
|
78
|
+
light: "300",
|
|
79
|
+
regular: "400",
|
|
80
|
+
medium: "500",
|
|
81
|
+
"semi-bold": "600",
|
|
82
|
+
bold: "700",
|
|
83
|
+
"extra-bold": "800",
|
|
84
|
+
black: "900"
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// src/fonts.ts
|
|
88
|
+
var fonts = {
|
|
89
|
+
default: "Roboto, sans-serif",
|
|
90
|
+
code: "monospace"
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
// src/line-heights.ts
|
|
94
|
+
var lineHeights = {
|
|
95
|
+
shorter: "125%",
|
|
96
|
+
short: "140%",
|
|
97
|
+
base: "160%",
|
|
98
|
+
tall: "180%"
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
// src/radii.ts
|
|
102
|
+
var radii = {
|
|
103
|
+
px: "1px",
|
|
104
|
+
xs: "4px",
|
|
105
|
+
sm: "6px",
|
|
106
|
+
md: "8px",
|
|
107
|
+
lg: "16px",
|
|
108
|
+
full: "99999px"
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
// src/space.ts
|
|
112
|
+
var space = {
|
|
113
|
+
1: "0.25rem",
|
|
114
|
+
2: "0.5rem",
|
|
115
|
+
3: "0.75rem",
|
|
116
|
+
4: "1rem",
|
|
117
|
+
5: "1.25rem",
|
|
118
|
+
6: "1.5rem",
|
|
119
|
+
7: "1.75rem",
|
|
120
|
+
8: "2rem",
|
|
121
|
+
10: "2.5rem",
|
|
122
|
+
12: "3rem",
|
|
123
|
+
16: "4rem",
|
|
124
|
+
20: "5rem",
|
|
125
|
+
40: "10rem",
|
|
126
|
+
64: "16rem",
|
|
127
|
+
80: "20rem"
|
|
128
|
+
};
|
|
129
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
130
|
+
0 && (module.exports = {
|
|
131
|
+
colors,
|
|
132
|
+
fontSizes,
|
|
133
|
+
fontWeights,
|
|
134
|
+
fonts,
|
|
135
|
+
lineHeights,
|
|
136
|
+
radii,
|
|
137
|
+
space
|
|
138
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
// src/colors.ts
|
|
2
|
+
var colors = {
|
|
3
|
+
white: "#FFF",
|
|
4
|
+
black: "#000",
|
|
5
|
+
gray100: "#E1E1E6",
|
|
6
|
+
gray200: "#A9A9B2",
|
|
7
|
+
gray300: "#8D8D99",
|
|
8
|
+
gray400: "#7C7C8A",
|
|
9
|
+
gray500: "#505059",
|
|
10
|
+
gray600: "#323238",
|
|
11
|
+
gray700: "#29292E",
|
|
12
|
+
gray800: "#202024",
|
|
13
|
+
gray900: "#121214",
|
|
14
|
+
emerald100: "#00DF9D",
|
|
15
|
+
emerald200: "#00C98D",
|
|
16
|
+
emerald300: "#00B37E",
|
|
17
|
+
emerald400: "#009D6E",
|
|
18
|
+
emerald500: "#00875F",
|
|
19
|
+
emerald600: "#007351",
|
|
20
|
+
emerald700: "#015F43",
|
|
21
|
+
emerald800: "#004430",
|
|
22
|
+
emerald900: "#00291D"
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
// src/font-sizes.ts
|
|
26
|
+
var fontSizes = {
|
|
27
|
+
xxs: "0.625rem",
|
|
28
|
+
xs: "0.75rem",
|
|
29
|
+
sm: "0.875rem",
|
|
30
|
+
md: "1rem",
|
|
31
|
+
lg: "1.125rem",
|
|
32
|
+
xl: "1.25rem",
|
|
33
|
+
"2xl": "1.5rem",
|
|
34
|
+
"4xl": "2rem",
|
|
35
|
+
"5xl": "2.25rem",
|
|
36
|
+
"6xl": "3rem",
|
|
37
|
+
"7xl": "4rem",
|
|
38
|
+
"8xl": "4.5rem",
|
|
39
|
+
"9xl": "6rem"
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// src/font-weights.ts
|
|
43
|
+
var fontWeights = {
|
|
44
|
+
thin: "100",
|
|
45
|
+
"extra-light": "200",
|
|
46
|
+
light: "300",
|
|
47
|
+
regular: "400",
|
|
48
|
+
medium: "500",
|
|
49
|
+
"semi-bold": "600",
|
|
50
|
+
bold: "700",
|
|
51
|
+
"extra-bold": "800",
|
|
52
|
+
black: "900"
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
// src/fonts.ts
|
|
56
|
+
var fonts = {
|
|
57
|
+
default: "Roboto, sans-serif",
|
|
58
|
+
code: "monospace"
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
// src/line-heights.ts
|
|
62
|
+
var lineHeights = {
|
|
63
|
+
shorter: "125%",
|
|
64
|
+
short: "140%",
|
|
65
|
+
base: "160%",
|
|
66
|
+
tall: "180%"
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
// src/radii.ts
|
|
70
|
+
var radii = {
|
|
71
|
+
px: "1px",
|
|
72
|
+
xs: "4px",
|
|
73
|
+
sm: "6px",
|
|
74
|
+
md: "8px",
|
|
75
|
+
lg: "16px",
|
|
76
|
+
full: "99999px"
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
// src/space.ts
|
|
80
|
+
var space = {
|
|
81
|
+
1: "0.25rem",
|
|
82
|
+
2: "0.5rem",
|
|
83
|
+
3: "0.75rem",
|
|
84
|
+
4: "1rem",
|
|
85
|
+
5: "1.25rem",
|
|
86
|
+
6: "1.5rem",
|
|
87
|
+
7: "1.75rem",
|
|
88
|
+
8: "2rem",
|
|
89
|
+
10: "2.5rem",
|
|
90
|
+
12: "3rem",
|
|
91
|
+
16: "4rem",
|
|
92
|
+
20: "5rem",
|
|
93
|
+
40: "10rem",
|
|
94
|
+
64: "16rem",
|
|
95
|
+
80: "20rem"
|
|
96
|
+
};
|
|
97
|
+
export {
|
|
98
|
+
colors,
|
|
99
|
+
fontSizes,
|
|
100
|
+
fontWeights,
|
|
101
|
+
fonts,
|
|
102
|
+
lineHeights,
|
|
103
|
+
radii,
|
|
104
|
+
space
|
|
105
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@beryl-ui/tokens",
|
|
3
|
+
"version": "2.1.0",
|
|
4
|
+
"description": "Design tokens for the beryl-ui Design System.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"author": {
|
|
13
|
+
"name": "Robson H. Rodrigues",
|
|
14
|
+
"url": "https://github.com/Robson16"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"beryl",
|
|
18
|
+
"emerald",
|
|
19
|
+
"typescript"
|
|
20
|
+
],
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
23
|
+
"dev": "tsup src/index.ts --format esm,cjs --dts --watch",
|
|
24
|
+
"lint": "eslint src/**/*.ts* --fix"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@beryl-ui/eslint-config": "*",
|
|
28
|
+
"@beryl-ui/prettier-config": "*",
|
|
29
|
+
"@beryl-ui/ts-config": "*",
|
|
30
|
+
"eslint": "^8.57.1",
|
|
31
|
+
"tsup": "^8.5.1",
|
|
32
|
+
"typescript": "^5.5.4"
|
|
33
|
+
}
|
|
34
|
+
}
|