period-ui 0.6.3 → 0.7.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 +30 -0
- package/dist/index.css +3 -7
- package/dist/index.css.map +1 -1
- package/package.json +9 -3
- package/tailwind.preset.cjs +60 -0
- package/tailwind.preset.d.cts +5 -0
package/README.md
CHANGED
|
@@ -62,6 +62,36 @@ import 'period-ui/dist/index.css';
|
|
|
62
62
|
|
|
63
63
|
o bien puedes usar `@import` en tu propio archivo CSS, igual que arriba.
|
|
64
64
|
|
|
65
|
+
### 3. Configura Tailwind (obligatorio desde 0.7.0):
|
|
66
|
+
|
|
67
|
+
`dist/index.css` **no** incluye las directivas `@tailwind`: las declara tu app, una sola vez,
|
|
68
|
+
después de importar el CSS de period-ui. En tu hoja global:
|
|
69
|
+
|
|
70
|
+
```scss
|
|
71
|
+
@import '../../node_modules/period-ui/dist/index.css';
|
|
72
|
+
|
|
73
|
+
@tailwind base;
|
|
74
|
+
@tailwind components;
|
|
75
|
+
@tailwind utilities;
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
En tu `tailwind.config.js`, extiende el preset con el theme de period-ui (colores, `fontFamily.sans`,
|
|
79
|
+
`boxShadow`) y agrega los archivos de period-ui al `content` para que se generen las clases que usan
|
|
80
|
+
sus componentes:
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
module.exports = {
|
|
84
|
+
presets: [require('period-ui/tailwind-preset')],
|
|
85
|
+
content: [
|
|
86
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
87
|
+
'./node_modules/period-ui/dist/**/*.{js,mjs}',
|
|
88
|
+
],
|
|
89
|
+
};
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
No copies los tokens del preset a tu config: el preset es la única fuente de verdad. `content` y
|
|
93
|
+
`screens` no forman parte del preset — son responsabilidad de cada app.
|
|
94
|
+
|
|
65
95
|
---
|
|
66
96
|
|
|
67
97
|
## 📚 Storybook (Probar localmente)
|
package/dist/index.css
CHANGED
|
@@ -11,14 +11,10 @@
|
|
|
11
11
|
font-variant-numeric: tabular-nums lining-nums;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
@tailwind utilities;
|
|
17
|
-
@layer base {
|
|
18
|
-
html {
|
|
19
|
-
font-variant-numeric: tabular-nums lining-nums;
|
|
20
|
-
}
|
|
14
|
+
html {
|
|
15
|
+
font-variant-numeric: tabular-nums lining-nums;
|
|
21
16
|
}
|
|
17
|
+
|
|
22
18
|
@font-face {
|
|
23
19
|
font-family: "billo-icons";
|
|
24
20
|
src: url("./fonts/billo-icons.eot?fpp649");
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/styles/_preamble.scss","../src/styles/settings/_icons.scss","../src/styles/settings/_scroll.scss","../src/styles/components/_progress-indicator.scss","../src/styles/components/_signature.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAGF;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/styles/_preamble.scss","../src/styles/settings/_icons.scss","../src/styles/settings/_scroll.scss","../src/styles/components/_progress-indicator.scss","../src/styles/components/_signature.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACbF;EACE;EACA;EACA;EAMA;EACA;EACA;;AAGF;AAAA;AAEE;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;;;AAgHE;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AA6GJ;EACE,SA9GE;;;AC5BR;EACE;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAGF;IACE;IACA;;EAGF;IACE;;;ACrBJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;EACA;EACA;;;AClBF;EACE","file":"index.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "period-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -9,9 +9,11 @@
|
|
|
9
9
|
"sideEffects": false,
|
|
10
10
|
"files": [
|
|
11
11
|
"dist",
|
|
12
|
+
"dist/fonts",
|
|
13
|
+
"tailwind.preset.cjs",
|
|
14
|
+
"tailwind.preset.d.cts",
|
|
12
15
|
"README.md",
|
|
13
|
-
"LICENSE"
|
|
14
|
-
"dist/fonts"
|
|
16
|
+
"LICENSE"
|
|
15
17
|
],
|
|
16
18
|
"scripts": {
|
|
17
19
|
"build": "vite build && tsc -p tsconfig.build.json && tsc-alias && yarn build:css",
|
|
@@ -103,6 +105,10 @@
|
|
|
103
105
|
"style": "./dist/index.css",
|
|
104
106
|
"import": "./dist/index.mjs",
|
|
105
107
|
"require": "./dist/index.js"
|
|
108
|
+
},
|
|
109
|
+
"./tailwind-preset": {
|
|
110
|
+
"types": "./tailwind.preset.d.cts",
|
|
111
|
+
"default": "./tailwind.preset.cjs"
|
|
106
112
|
}
|
|
107
113
|
},
|
|
108
114
|
"packageManager": "yarn@4.18.0+sha512.fcb8716fe7cd0eece141ffc18b92193a9df9204c1ba83189c288835223fc0bbe64af473bab0d5e9927a7daeb5caf2bb07eb2787cc9338ca040ea125f2a1f2f7e"
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/** @type {import('tailwindcss').Config} */
|
|
2
|
+
module.exports = {
|
|
3
|
+
theme: {
|
|
4
|
+
extend: {
|
|
5
|
+
fontFamily: {
|
|
6
|
+
sans: ['Geist', 'sans-serif'],
|
|
7
|
+
},
|
|
8
|
+
colors: {
|
|
9
|
+
white: '#FFFFFF',
|
|
10
|
+
gray: {
|
|
11
|
+
'01': '#292929',
|
|
12
|
+
'02': '#737373',
|
|
13
|
+
'03': '#B3B3B3',
|
|
14
|
+
'04': '#E3E3E3',
|
|
15
|
+
'05': '#F4F4F5',
|
|
16
|
+
'06': '#FAFBFC',
|
|
17
|
+
},
|
|
18
|
+
blue: {
|
|
19
|
+
'00': '#002CD3',
|
|
20
|
+
'01': '#0066FF',
|
|
21
|
+
'02': '#3385FF',
|
|
22
|
+
'03': '#B3D1FF',
|
|
23
|
+
'04': '#E6F0FF',
|
|
24
|
+
},
|
|
25
|
+
green: {
|
|
26
|
+
'00': '#1F4D00',
|
|
27
|
+
'01': '#338000',
|
|
28
|
+
'02': '#47B300',
|
|
29
|
+
'03': '#B5E198',
|
|
30
|
+
'04': '#F0FFE6',
|
|
31
|
+
},
|
|
32
|
+
yellow: {
|
|
33
|
+
'01': '#995C00',
|
|
34
|
+
'02': '#F5BC21',
|
|
35
|
+
'03': '#F7DD96',
|
|
36
|
+
'04': '#FFF9E5',
|
|
37
|
+
},
|
|
38
|
+
red: {
|
|
39
|
+
'00': '#800D00',
|
|
40
|
+
'01': '#CC1400',
|
|
41
|
+
'02': '#FF4733',
|
|
42
|
+
'03': '#FFD1CC',
|
|
43
|
+
'04': '#FFE8E6',
|
|
44
|
+
},
|
|
45
|
+
purple: {
|
|
46
|
+
'01': '#971CD3',
|
|
47
|
+
'02': '#AA34E5',
|
|
48
|
+
'04': '#F6E8FC',
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
boxShadow: {
|
|
52
|
+
'white-two': '0px 1px 4px 0px rgba(0, 0, 0, 0.24)',
|
|
53
|
+
'white-tree': '0px 2px 6px 0px rgba(0, 0, 0, 0.16)',
|
|
54
|
+
'blue-two': '0px 1px 4px 0px rgba(0, 0, 0, 0.52)',
|
|
55
|
+
'red-two': '0px 1px 4px 0px rgba(0, 0, 0, 0.44)',
|
|
56
|
+
'black-tree': '0px 1px 4px 0px rgba(0, 0, 0, 0.4)',
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
};
|