@grupor5/raya 0.2.3 → 0.2.4
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/package.json +6 -3
- package/tailwind.config.js +293 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@grupor5/raya",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.4",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -35,10 +35,13 @@
|
|
|
35
35
|
"import": "./dist/tokens/*.mjs",
|
|
36
36
|
"require": "./dist/tokens/*.js"
|
|
37
37
|
},
|
|
38
|
-
"./styles/*": "./dist/styles/*"
|
|
38
|
+
"./styles/*": "./dist/styles/*",
|
|
39
|
+
"./dist/tailwind.css": "./dist/tailwind.css",
|
|
40
|
+
"./tailwind.config.js": "./tailwind.config.js"
|
|
39
41
|
},
|
|
40
42
|
"files": [
|
|
41
|
-
"dist"
|
|
43
|
+
"dist",
|
|
44
|
+
"tailwind.config.js"
|
|
42
45
|
],
|
|
43
46
|
"publishConfig": {
|
|
44
47
|
"access": "public"
|
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
const { badgeTokens } = require('./src/tokens/badge');
|
|
2
|
+
const { tagTokens } = require('./src/tokens/tag');
|
|
3
|
+
const { tab } = require('./src/tokens/tab');
|
|
4
|
+
const { colors } = require('./src/tokens/colors');
|
|
5
|
+
const { progressBarTokens } = require('./src/tokens/progress-bar');
|
|
6
|
+
|
|
7
|
+
const tagColorUtilities = Object.entries(tagTokens.colors).reduce(
|
|
8
|
+
(acc, [variant, colorSet]) => {
|
|
9
|
+
acc[variant] = {
|
|
10
|
+
background: colorSet.background,
|
|
11
|
+
text: colorSet.text,
|
|
12
|
+
bullet: colorSet.bullet,
|
|
13
|
+
'close-icon-border': colorSet.closeIconBorder,
|
|
14
|
+
'hover-background': colorSet.hover.background,
|
|
15
|
+
'hover-close-icon-border': colorSet.hover.closeIconBorder,
|
|
16
|
+
};
|
|
17
|
+
return acc;
|
|
18
|
+
},
|
|
19
|
+
{}
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
const tabColorUtilities = {
|
|
23
|
+
background: tab.background,
|
|
24
|
+
text: tab.text,
|
|
25
|
+
border: tab.border,
|
|
26
|
+
badge: tab.badge,
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
/** @type {import('tailwindcss').Config} */
|
|
30
|
+
module.exports = {
|
|
31
|
+
darkMode: ["class"],
|
|
32
|
+
content: [
|
|
33
|
+
'./pages/**/*.{ts,tsx}',
|
|
34
|
+
'./components/**/*.{ts,tsx}',
|
|
35
|
+
'./app/**/*.{ts,tsx}',
|
|
36
|
+
'./src/**/*.{ts,tsx}',
|
|
37
|
+
'./stories/**/*.{ts,tsx}',
|
|
38
|
+
],
|
|
39
|
+
prefix: "",
|
|
40
|
+
theme: {
|
|
41
|
+
container: {
|
|
42
|
+
center: true,
|
|
43
|
+
padding: {
|
|
44
|
+
DEFAULT: 'var(--grid-margin-mobile)',
|
|
45
|
+
md: 'var(--grid-margin-tablet)',
|
|
46
|
+
lg: 'var(--grid-margin-desktop)',
|
|
47
|
+
},
|
|
48
|
+
screens: {
|
|
49
|
+
sm: 'var(--container-sm)',
|
|
50
|
+
md: 'var(--container-md)',
|
|
51
|
+
lg: 'var(--container-lg)',
|
|
52
|
+
xl: 'var(--container-xl)',
|
|
53
|
+
'2xl': 'var(--container-2xl)',
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
screens: {
|
|
57
|
+
'sm': '640px',
|
|
58
|
+
'md': '768px',
|
|
59
|
+
'lg': '1024px',
|
|
60
|
+
'xl': '1280px',
|
|
61
|
+
'2xl': '1536px',
|
|
62
|
+
},
|
|
63
|
+
extend: {
|
|
64
|
+
colors: {
|
|
65
|
+
header: colors.primary[100],
|
|
66
|
+
border: "hsl(var(--border))",
|
|
67
|
+
input: "hsl(var(--input))",
|
|
68
|
+
ring: "hsl(var(--ring))",
|
|
69
|
+
background: "hsl(var(--background))",
|
|
70
|
+
foreground: "hsl(var(--foreground))",
|
|
71
|
+
primary: {
|
|
72
|
+
...colors.primary,
|
|
73
|
+
DEFAULT: "hsl(var(--primary))",
|
|
74
|
+
foreground: "hsl(var(--primary-foreground))",
|
|
75
|
+
},
|
|
76
|
+
secondary: {
|
|
77
|
+
...colors.secondary,
|
|
78
|
+
DEFAULT: "hsl(var(--secondary))",
|
|
79
|
+
foreground: "hsl(var(--secondary-foreground))",
|
|
80
|
+
},
|
|
81
|
+
destructive: {
|
|
82
|
+
...colors.red,
|
|
83
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
84
|
+
foreground: "hsl(var(--destructive-foreground))",
|
|
85
|
+
},
|
|
86
|
+
muted: {
|
|
87
|
+
...colors.neutral,
|
|
88
|
+
DEFAULT: "hsl(var(--muted))",
|
|
89
|
+
foreground: "hsl(var(--muted-foreground))",
|
|
90
|
+
},
|
|
91
|
+
accent: {
|
|
92
|
+
DEFAULT: "hsl(var(--accent))",
|
|
93
|
+
foreground: "hsl(var(--accent-foreground))",
|
|
94
|
+
},
|
|
95
|
+
popover: {
|
|
96
|
+
DEFAULT: "hsl(var(--popover))",
|
|
97
|
+
foreground: "hsl(var(--popover-foreground))",
|
|
98
|
+
},
|
|
99
|
+
card: {
|
|
100
|
+
DEFAULT: "hsl(var(--card))",
|
|
101
|
+
foreground: "hsl(var(--card-foreground))",
|
|
102
|
+
},
|
|
103
|
+
green: colors.green,
|
|
104
|
+
yellow: colors.yellow,
|
|
105
|
+
neutral: colors.neutral,
|
|
106
|
+
badge: {
|
|
107
|
+
'in-progress': {
|
|
108
|
+
text: badgeTokens.colors.inProgress.text,
|
|
109
|
+
background: badgeTokens.colors.inProgress.background,
|
|
110
|
+
},
|
|
111
|
+
success: {
|
|
112
|
+
text: badgeTokens.colors.success.text,
|
|
113
|
+
background: badgeTokens.colors.success.background,
|
|
114
|
+
},
|
|
115
|
+
pending: {
|
|
116
|
+
text: badgeTokens.colors.pending.text,
|
|
117
|
+
background: badgeTokens.colors.pending.background,
|
|
118
|
+
},
|
|
119
|
+
danger: {
|
|
120
|
+
text: badgeTokens.colors.danger.text,
|
|
121
|
+
background: badgeTokens.colors.danger.background,
|
|
122
|
+
},
|
|
123
|
+
default: {
|
|
124
|
+
text: badgeTokens.colors.default.text,
|
|
125
|
+
background: badgeTokens.colors.default.background,
|
|
126
|
+
'text-on-solid': badgeTokens.colors.default.textOnSolid,
|
|
127
|
+
},
|
|
128
|
+
},
|
|
129
|
+
tag: tagColorUtilities,
|
|
130
|
+
tab: tabColorUtilities,
|
|
131
|
+
'progress-bar': {
|
|
132
|
+
track: progressBarTokens.colors.trackBackground,
|
|
133
|
+
indicator: progressBarTokens.colors.indicatorBackground,
|
|
134
|
+
label: progressBarTokens.colors.label,
|
|
135
|
+
},
|
|
136
|
+
pagination: {
|
|
137
|
+
current: "#592269",
|
|
138
|
+
hover: "#F2E4F6",
|
|
139
|
+
},
|
|
140
|
+
scrollbar: {
|
|
141
|
+
thumb: "#423E4E",
|
|
142
|
+
track: "#DBD9E1",
|
|
143
|
+
},
|
|
144
|
+
},
|
|
145
|
+
height: {
|
|
146
|
+
'progress-bar-sm': progressBarTokens.height.sm,
|
|
147
|
+
'progress-bar-md': progressBarTokens.height.md,
|
|
148
|
+
'progress-bar-lg': progressBarTokens.height.lg,
|
|
149
|
+
},
|
|
150
|
+
fontFamily: {
|
|
151
|
+
primary: ['Rubik', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'sans-serif'],
|
|
152
|
+
sans: ['Rubik', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'sans-serif'],
|
|
153
|
+
},
|
|
154
|
+
fontWeight: {
|
|
155
|
+
light: 'var(--font-weight-light)',
|
|
156
|
+
regular: 'var(--font-weight-regular)',
|
|
157
|
+
medium: 'var(--font-weight-medium)',
|
|
158
|
+
semibold: 'var(--font-weight-semibold)',
|
|
159
|
+
bold: 'var(--font-weight-bold)',
|
|
160
|
+
},
|
|
161
|
+
fontSize: {
|
|
162
|
+
// Display Scale - CORREGIDO SEGÚN FIGMA
|
|
163
|
+
'display-l': ['var(--text-display-l)', { lineHeight: 'var(--leading-display-l)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
164
|
+
|
|
165
|
+
// Heading Scale - CORREGIDO SEGÚN FIGMA - Todos usan Bold (700)
|
|
166
|
+
'heading-xl': ['var(--text-heading-xl)', { lineHeight: 'var(--leading-heading-xl)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
167
|
+
'heading-lg': ['var(--text-heading-lg)', { lineHeight: 'var(--leading-heading-lg)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
168
|
+
'heading-md': ['var(--text-heading-md)', { lineHeight: 'var(--leading-heading-md)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
169
|
+
'heading-sm': ['var(--text-heading-sm)', { lineHeight: 'var(--leading-heading-sm)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
170
|
+
|
|
171
|
+
// Subheading Scale - NUEVO SEGÚN FIGMA - Todos usan Bold (700)
|
|
172
|
+
'subheading-lg': ['var(--text-subheading-lg)', { lineHeight: 'var(--leading-subheading-lg)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
173
|
+
'subheading-md': ['var(--text-subheading-md)', { lineHeight: 'var(--leading-subheading-md)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
174
|
+
'subheading-sm': ['var(--text-subheading-sm)', { lineHeight: 'var(--leading-subheading-sm)', fontWeight: 'var(--font-weight-bold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
175
|
+
|
|
176
|
+
// Body Bold Scale - NUEVO SEGÚN FIGMA - Usan Semi-bold (600)
|
|
177
|
+
'body-bold-lg': ['var(--text-body-bold-lg)', { lineHeight: 'var(--leading-body-lg)', fontWeight: 'var(--font-weight-semibold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
178
|
+
'body-bold-md': ['var(--text-body-bold-md)', { lineHeight: 'var(--leading-body-md)', fontWeight: 'var(--font-weight-semibold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
179
|
+
'body-bold-sm': ['var(--text-body-bold-sm)', { lineHeight: 'var(--leading-body-sm)', fontWeight: 'var(--font-weight-semibold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
180
|
+
'body-bold-xs': ['var(--text-body-bold-xs)', { lineHeight: 'var(--leading-body-xs)', fontWeight: 'var(--font-weight-semibold)', letterSpacing: 'var(--tracking-normal)' }],
|
|
181
|
+
|
|
182
|
+
// Body Regular Scale - CORREGIDO SEGÚN FIGMA - Usan Regular (400)
|
|
183
|
+
'body-lg': ['var(--text-body-lg)', { lineHeight: 'var(--leading-body-lg)', fontWeight: 'var(--font-weight-regular)', letterSpacing: 'var(--tracking-normal)' }],
|
|
184
|
+
'body-md': ['var(--text-body-md)', { lineHeight: 'var(--leading-body-md)', fontWeight: 'var(--font-weight-regular)', letterSpacing: 'var(--tracking-normal)' }],
|
|
185
|
+
'body-sm': ['var(--text-body-sm)', { lineHeight: 'var(--leading-body-sm)', fontWeight: 'var(--font-weight-regular)', letterSpacing: 'var(--tracking-normal)' }],
|
|
186
|
+
'body-xs': ['var(--text-body-xs)', { lineHeight: 'var(--leading-body-xs)', fontWeight: 'var(--font-weight-regular)', letterSpacing: 'var(--tracking-normal)' }],
|
|
187
|
+
|
|
188
|
+
// Caption Scale - CORREGIDO SEGÚN FIGMA
|
|
189
|
+
'caption-c1': ['var(--text-caption-c1)', { lineHeight: 'var(--leading-caption-c1)', fontWeight: 'var(--font-weight-regular)', letterSpacing: 'var(--tracking-caption)' }],
|
|
190
|
+
|
|
191
|
+
// Component-specific font sizes
|
|
192
|
+
'badge-sm': ['12px'],
|
|
193
|
+
'badge-md': ['14px'],
|
|
194
|
+
'badge-lg': ['16px'],
|
|
195
|
+
'tag': [tagTokens.fontSize],
|
|
196
|
+
'tab': [tab.font.size, { fontWeight: tab.font.weight }],
|
|
197
|
+
'progress-bar-sm': [progressBarTokens.typography.sm.fontSize, { lineHeight: progressBarTokens.typography.sm.lineHeight, fontWeight: progressBarTokens.typography.sm.fontWeight }],
|
|
198
|
+
'progress-bar-md': [progressBarTokens.typography.md.fontSize, { lineHeight: progressBarTokens.typography.md.lineHeight, fontWeight: progressBarTokens.typography.md.fontWeight }],
|
|
199
|
+
'progress-bar-lg': [progressBarTokens.typography.lg.fontSize, { lineHeight: progressBarTokens.typography.lg.lineHeight, fontWeight: progressBarTokens.typography.lg.fontWeight }],
|
|
200
|
+
},
|
|
201
|
+
letterSpacing: {
|
|
202
|
+
normal: 'var(--tracking-normal)',
|
|
203
|
+
caption: 'var(--tracking-caption)',
|
|
204
|
+
},
|
|
205
|
+
spacing: {
|
|
206
|
+
'xs': 'var(--spacing-xs)',
|
|
207
|
+
's': 'var(--spacing-s)',
|
|
208
|
+
'm': 'var(--spacing-m)',
|
|
209
|
+
'l': 'var(--spacing-l)',
|
|
210
|
+
'xl': 'var(--spacing-xl)',
|
|
211
|
+
'2xl': 'var(--spacing-2xl)',
|
|
212
|
+
'3xl': 'var(--spacing-3xl)',
|
|
213
|
+
'4xl': 'var(--spacing-4xl)',
|
|
214
|
+
// Badge Padding
|
|
215
|
+
'badge-y': '4px',
|
|
216
|
+
'badge-x': '12px',
|
|
217
|
+
'tag-y': tagTokens.padding.y,
|
|
218
|
+
'tag-x': tagTokens.padding.x,
|
|
219
|
+
'tab-y': tab.padding.y,
|
|
220
|
+
'tab-x': tab.padding.x,
|
|
221
|
+
},
|
|
222
|
+
boxShadow: {
|
|
223
|
+
'effect-s': 'var(--effect-s)',
|
|
224
|
+
'effect-m': 'var(--effect-m)',
|
|
225
|
+
'effect-l': 'var(--effect-l)',
|
|
226
|
+
'focus': `0 0 0 2px ${colors.secondary[300]}`,
|
|
227
|
+
'pressed': `0 0 0 2px ${colors.primary[300]}`,
|
|
228
|
+
'destructive': `0 0 0 2px ${colors.red[300]}`,
|
|
229
|
+
},
|
|
230
|
+
dropShadow: {
|
|
231
|
+
'effect-s': '0 1px 2px rgba(0, 0, 0, 0.05)',
|
|
232
|
+
'effect-m': ['0 4px 6px rgba(0, 0, 0, 0.1)', '0 2px 4px rgba(0, 0, 0, 0.06)'],
|
|
233
|
+
'effect-l': ['0 10px 15px rgba(0, 0, 0, 0.1)', '0 4px 6px rgba(0, 0, 0, 0.05)'],
|
|
234
|
+
},
|
|
235
|
+
borderWidth: {
|
|
236
|
+
'stroke-1': 'var(--stroke-1)',
|
|
237
|
+
'stroke-2': 'var(--stroke-2)',
|
|
238
|
+
},
|
|
239
|
+
outlineWidth: {
|
|
240
|
+
'stroke-1': 'var(--stroke-1)',
|
|
241
|
+
'stroke-2': 'var(--stroke-2)',
|
|
242
|
+
},
|
|
243
|
+
borderRadius: {
|
|
244
|
+
lg: "var(--radius)",
|
|
245
|
+
md: "calc(var(--radius) - 2px)",
|
|
246
|
+
sm: "calc(var(--radius) - 4px)",
|
|
247
|
+
badge: '8px',
|
|
248
|
+
tag: tagTokens.borderRadius,
|
|
249
|
+
},
|
|
250
|
+
|
|
251
|
+
// Grid System Extensions
|
|
252
|
+
gridTemplateColumns: {
|
|
253
|
+
// Responsive grid templates
|
|
254
|
+
'mobile': 'repeat(4, 1fr)',
|
|
255
|
+
'tablet': 'repeat(8, 1fr)',
|
|
256
|
+
'desktop': 'repeat(12, 1fr)',
|
|
257
|
+
// Additional column counts
|
|
258
|
+
'13': 'repeat(13, 1fr)',
|
|
259
|
+
'14': 'repeat(14, 1fr)',
|
|
260
|
+
'15': 'repeat(15, 1fr)',
|
|
261
|
+
'16': 'repeat(16, 1fr)',
|
|
262
|
+
},
|
|
263
|
+
|
|
264
|
+
gridColumn: {
|
|
265
|
+
'span-13': 'span 13 / span 13',
|
|
266
|
+
'span-14': 'span 14 / span 14',
|
|
267
|
+
'span-15': 'span 15 / span 15',
|
|
268
|
+
'span-16': 'span 16 / span 16',
|
|
269
|
+
},
|
|
270
|
+
|
|
271
|
+
gap: {
|
|
272
|
+
'grid-mobile': 'var(--grid-gutter-mobile)',
|
|
273
|
+
'grid-tablet': 'var(--grid-gutter-tablet)',
|
|
274
|
+
'grid-desktop': 'var(--grid-gutter-desktop)',
|
|
275
|
+
},
|
|
276
|
+
keyframes: {
|
|
277
|
+
"accordion-down": {
|
|
278
|
+
from: { height: "0" },
|
|
279
|
+
to: { height: "var(--radix-accordion-content-height)" },
|
|
280
|
+
},
|
|
281
|
+
"accordion-up": {
|
|
282
|
+
from: { height: "var(--radix-accordion-content-height)" },
|
|
283
|
+
to: { height: "0" },
|
|
284
|
+
},
|
|
285
|
+
},
|
|
286
|
+
animation: {
|
|
287
|
+
"accordion-down": "accordion-down 0.2s ease-out",
|
|
288
|
+
"accordion-up": "accordion-up 0.2s ease-out",
|
|
289
|
+
},
|
|
290
|
+
},
|
|
291
|
+
},
|
|
292
|
+
plugins: [require("tailwindcss-animate")],
|
|
293
|
+
};
|