@tpeix/tribu-design-system 1.0.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 +36 -0
- package/dist/index.d.mts +50 -0
- package/dist/index.d.ts +50 -0
- package/dist/index.js +574 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +522 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +72 -0
- package/src/styles.css +148 -0
package/src/styles.css
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
TRIBU ALI-MENTE DESIGN SYSTEM
|
|
3
|
+
Paleta: Wellness, cálida, natural, orgánica
|
|
4
|
+
|
|
5
|
+
Uso: @import '@tpeix/tribu-design-system/styles.css';
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
/* Base radius - generoso para sensación orgánica */
|
|
10
|
+
--radius: 0.75rem;
|
|
11
|
+
|
|
12
|
+
/* ========================================
|
|
13
|
+
TRIBU ALI-MENTE BRAND COLORS
|
|
14
|
+
Extraídos del sitio web oficial
|
|
15
|
+
======================================== */
|
|
16
|
+
|
|
17
|
+
/* Naranja Principal - CTAs y elementos destacados */
|
|
18
|
+
--tribu-orange: #E07A3D;
|
|
19
|
+
--tribu-orange-light: #F5A962;
|
|
20
|
+
--tribu-orange-dark: #C45A20;
|
|
21
|
+
|
|
22
|
+
/* Verde Salvia - Naturaleza y equilibrio */
|
|
23
|
+
--tribu-green: #8B9B6E;
|
|
24
|
+
--tribu-green-light: #A8B78E;
|
|
25
|
+
--tribu-green-dark: #6B7A4F;
|
|
26
|
+
|
|
27
|
+
/* Neutros Cálidos */
|
|
28
|
+
--tribu-cream: #FDF8F3;
|
|
29
|
+
--tribu-beige: #FEF6E9;
|
|
30
|
+
--tribu-earth: #5C4A3D;
|
|
31
|
+
--tribu-white: #FFFDF9;
|
|
32
|
+
|
|
33
|
+
/* ========================================
|
|
34
|
+
SEMANTIC COLOR TOKENS
|
|
35
|
+
======================================== */
|
|
36
|
+
|
|
37
|
+
/* Background: Beige cálido */
|
|
38
|
+
--background: #FDF8F3;
|
|
39
|
+
--foreground: #5C4A3D;
|
|
40
|
+
|
|
41
|
+
/* Cards: Crema suave */
|
|
42
|
+
--card: #FFFDF9;
|
|
43
|
+
--card-foreground: #5C4A3D;
|
|
44
|
+
|
|
45
|
+
/* Popover */
|
|
46
|
+
--popover: #FFFDF9;
|
|
47
|
+
--popover-foreground: #5C4A3D;
|
|
48
|
+
|
|
49
|
+
/* Primary: Naranja cálido */
|
|
50
|
+
--primary: #E07A3D;
|
|
51
|
+
--primary-foreground: #FFFDF9;
|
|
52
|
+
|
|
53
|
+
/* Secondary: Verde salvia */
|
|
54
|
+
--secondary: #8B9B6E;
|
|
55
|
+
--secondary-foreground: #FFFDF9;
|
|
56
|
+
|
|
57
|
+
/* Muted: Tonos suaves */
|
|
58
|
+
--muted: #FEF6E9;
|
|
59
|
+
--muted-foreground: #7A6A5C;
|
|
60
|
+
|
|
61
|
+
/* Accent: Naranja suave */
|
|
62
|
+
--accent: #F5A962;
|
|
63
|
+
--accent-foreground: #5C4A3D;
|
|
64
|
+
|
|
65
|
+
/* Destructive: Rojo cálido */
|
|
66
|
+
--destructive: #C75A4D;
|
|
67
|
+
|
|
68
|
+
/* Borders: Suaves y cálidos */
|
|
69
|
+
--border: #E8DFD4;
|
|
70
|
+
--input: #E8DFD4;
|
|
71
|
+
--ring: #E07A3D;
|
|
72
|
+
|
|
73
|
+
/* Charts - Paleta wellness */
|
|
74
|
+
--chart-1: #E07A3D;
|
|
75
|
+
--chart-2: #8B9B6E;
|
|
76
|
+
--chart-3: #F5A962;
|
|
77
|
+
--chart-4: #6B7A4F;
|
|
78
|
+
--chart-5: #C45A20;
|
|
79
|
+
|
|
80
|
+
/* Sidebar */
|
|
81
|
+
--sidebar: #FEF6E9;
|
|
82
|
+
--sidebar-foreground: #5C4A3D;
|
|
83
|
+
--sidebar-primary: #E07A3D;
|
|
84
|
+
--sidebar-primary-foreground: #FFFDF9;
|
|
85
|
+
--sidebar-accent: #F5A962;
|
|
86
|
+
--sidebar-accent-foreground: #5C4A3D;
|
|
87
|
+
--sidebar-border: #E8DFD4;
|
|
88
|
+
--sidebar-ring: #E07A3D;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.dark {
|
|
92
|
+
/* ========================================
|
|
93
|
+
DARK MODE - Warm & Cozy
|
|
94
|
+
======================================== */
|
|
95
|
+
|
|
96
|
+
/* Background: Marrón tierra profundo */
|
|
97
|
+
--background: #2C2420;
|
|
98
|
+
--foreground: #FDF8F3;
|
|
99
|
+
|
|
100
|
+
/* Cards: Marrón más claro */
|
|
101
|
+
--card: #3D342E;
|
|
102
|
+
--card-foreground: #FDF8F3;
|
|
103
|
+
|
|
104
|
+
/* Popover */
|
|
105
|
+
--popover: #3D342E;
|
|
106
|
+
--popover-foreground: #FDF8F3;
|
|
107
|
+
|
|
108
|
+
/* Primary: Naranja más brillante en dark */
|
|
109
|
+
--primary: #F5A962;
|
|
110
|
+
--primary-foreground: #2C2420;
|
|
111
|
+
|
|
112
|
+
/* Secondary: Verde más claro */
|
|
113
|
+
--secondary: #A8B78E;
|
|
114
|
+
--secondary-foreground: #2C2420;
|
|
115
|
+
|
|
116
|
+
/* Muted */
|
|
117
|
+
--muted: #4A3F38;
|
|
118
|
+
--muted-foreground: #C4B5A5;
|
|
119
|
+
|
|
120
|
+
/* Accent */
|
|
121
|
+
--accent: #E07A3D;
|
|
122
|
+
--accent-foreground: #FDF8F3;
|
|
123
|
+
|
|
124
|
+
/* Destructive */
|
|
125
|
+
--destructive: #E07060;
|
|
126
|
+
|
|
127
|
+
/* Borders */
|
|
128
|
+
--border: #5C4A3D;
|
|
129
|
+
--input: #5C4A3D;
|
|
130
|
+
--ring: #F5A962;
|
|
131
|
+
|
|
132
|
+
/* Charts - Más vibrantes para dark mode */
|
|
133
|
+
--chart-1: #F5A962;
|
|
134
|
+
--chart-2: #A8B78E;
|
|
135
|
+
--chart-3: #E07A3D;
|
|
136
|
+
--chart-4: #8B9B6E;
|
|
137
|
+
--chart-5: #C45A20;
|
|
138
|
+
|
|
139
|
+
/* Sidebar */
|
|
140
|
+
--sidebar: #3D342E;
|
|
141
|
+
--sidebar-foreground: #FDF8F3;
|
|
142
|
+
--sidebar-primary: #F5A962;
|
|
143
|
+
--sidebar-primary-foreground: #2C2420;
|
|
144
|
+
--sidebar-accent: #E07A3D;
|
|
145
|
+
--sidebar-accent-foreground: #FDF8F3;
|
|
146
|
+
--sidebar-border: #5C4A3D;
|
|
147
|
+
--sidebar-ring: #F5A962;
|
|
148
|
+
}
|