@sector.siit/mlz-components 1.0.29 → 1.0.30
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/dist/styles.css +1 -1
- package/dist/theme.css +60 -0
- package/package.json +4 -2
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
:root{--mlz-primary-50:#eff6ff;--mlz-primary-100:#e5f0f9;--mlz-primary-200:#bfdbfe;--mlz-primary-300:#94c6e5;--mlz-primary-400:#5ba8d5;--mlz-primary-500:#3b82f6;--mlz-primary-600:#236999;--mlz-primary-700:#1d4ed8;--mlz-primary-800:#1e40af;--mlz-primary-900:#1e3a8a;--mlz-primary-950:#172554;--mlz-semantic-info:#006eff;--mlz-semantic-error-600:#ef284c;--mlz-semantic-success:#1d9c48;--mlz-secondary-50:#f8fafc;--mlz-secondary-100:#f1f5f9;--mlz-secondary-200:#e2e8f0;--mlz-secondary-300:#cbd5e1;--mlz-secondary-400:#94a3b8;--mlz-secondary-500:#64748b;--mlz-secondary-600:#475569;--mlz-secondary-700:#334155;--mlz-secondary-800:#1e293b;--mlz-secondary-900:#0f172a;--mlz-secondary-950:#020617;--mlz-spacing-xs:0.25rem;--mlz-spacing-sm:0.5rem;--mlz-spacing-md:1rem;--mlz-spacing-lg:1.5rem;--mlz-spacing-xl:2rem;--mlz-spacing-2xl:3rem;--mlz-border-radius-sm:0.25rem;--mlz-border-radius-md:0.375rem;--mlz-border-radius-lg:0.5rem;--mlz-border-radius-xl:0.75rem;--mlz-font-size-xs:0.75rem;--mlz-font-size-sm:0.875rem;--mlz-font-size-base:1rem;--mlz-font-size-lg:1.125rem;--mlz-font-size-xl:1.25rem;--mlz-input-border-color:#d1d5db;--mlz-input-label-color:#374151;--mlz-input-helper-color:#6b7280;--mlz-input-height-sm:2rem;--mlz-input-height-md:2.5rem;--mlz-input-height-lg:3rem;--mlz-input-padding-x-sm:0.75rem;--mlz-input-padding-y-sm:0.375rem;--mlz-input-padding-x-md:1rem;--mlz-input-padding-y-md:0.5rem;--mlz-input-padding-x-lg:1.25rem;--mlz-input-padding-y-lg:0.75rem;--mlz-input-font-size-sm:0.875rem;--mlz-input-font-size-md:1rem;--mlz-input-font-size-lg:1.125rem;--mlz-error-500:#ef4444;--mlz-error-600:#dc2626;--mlz-success-500:#22c55e;--mlz-success-600:#16a34a}@layer utilities{.mlz-btn-primary{background-color:var(--mlz-primary-600,#236999);color:#fff;&:hover{background-color:var(--mlz-primary-700,#1d4ed8)}}.mlz-btn-secondary{background-color:var(--mlz-secondary-600,#475569);color:#fff;&:hover{background-color:var(--mlz-secondary-700,#334155)}}.mlz-label-textarea{font-size:16px;font-style:normal;font-weight:700;letter-spacing:0;line-height:100%;vertical-align:middle}.mlz-error-color{color:var(--mlz-semantic-error-600,#ef284c)}.mlz-error-border{border-color:var(--mlz-semantic-error-600,#ef284c)}.mlz-error-bg{background-color:var(--mlz-semantic-error-600,#ef284c)}.mlz-toast-success-bg{background-color:#eaf9ef}.mlz-toast-success-border{border-color:var(--mlz-semantic-success,#22c55e)}.mlz-toast-success-text{color:var(--mlz-semantic-success,#22c55e)}.mlz-toast-success-icon-bg{background-color:#c5f5d5}.mlz-toast-info-bg{background-color:#eff6ff}.mlz-toast-info-border{border-color:#0058cc}.mlz-toast-info-text{color:#0058cc}.mlz-toast-info-icon-bg{background-color:#dbeafe}.mlz-toast-warning-bg{background-color:#fefce8}.mlz-toast-warning-border{border-color:#c49e0a}.mlz-toast-warning-text{color:#c49e0a}.mlz-toast-warning-icon-bg{background-color:#fef9c3}.mlz-toast-error-bg{background-color:#fef2f2}.mlz-toast-error-border{border-color:#ef284c}.mlz-toast-error-text{color:#ef284c}.mlz-toast-error-icon-bg{background-color:#fee2e2}.mlz-toast-container{align-items:flex-start;border-radius:.5rem;border-style:solid;border-width:1px;box-shadow:0 3px 6px 0 rgba(0,0,0,.16);display:flex;gap:1rem;min-height:88px;padding:1rem;width:400px}.mlz-toast-icon-container{align-items:center;border-radius:.5rem;display:flex;flex-shrink:0;height:2.5rem;justify-content:center;padding:.5rem;width:2.5rem}.mlz-toast-content{display:flex;flex:1;flex-direction:column;gap:.5rem}.mlz-toast-title{font-size:20px;font-weight:700;letter-spacing:normal;line-height:100%}.mlz-toast-description{font-size:18px;font-weight:400;letter-spacing:normal;line-height:100%}.mlz-toast-close{background:transparent;border:none;color:#9ca3af;cursor:pointer;font-size:24px;line-height:1;padding:0}.mlz-toast-close:hover{color:#4b5563}}
|
package/dist/theme.css
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/*
|
|
2
|
+
MLZ Components - Tailwind Theme Tokens
|
|
3
|
+
|
|
4
|
+
Importa este archivo en tu proyecto si quieres usar las clases de Tailwind
|
|
5
|
+
con los colores de mlz-components (ej: bg-primary-600, text-semantic-error-600)
|
|
6
|
+
|
|
7
|
+
En tu globals.css:
|
|
8
|
+
@import "tailwindcss";
|
|
9
|
+
@theme {
|
|
10
|
+
@import "@sector.siit/mlz-components/theme.css";
|
|
11
|
+
}
|
|
12
|
+
@import "@sector.siit/mlz-components/styles.css";
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/* Colores primarios como theme tokens */
|
|
16
|
+
--color-primary-50: var(--mlz-primary-50, #eff6ff);
|
|
17
|
+
--color-primary-100: var(--mlz-primary-100, #E5F0F9);
|
|
18
|
+
--color-primary-200: var(--mlz-primary-200, #bfdbfe);
|
|
19
|
+
--color-primary-300: var(--mlz-primary-300, #94C6E5);
|
|
20
|
+
--color-primary-400: var(--mlz-primary-400, #5BA8D5);
|
|
21
|
+
--color-primary-500: var(--mlz-primary-500, #3b82f6);
|
|
22
|
+
--color-primary-600: var(--mlz-primary-600, #236999);
|
|
23
|
+
--color-primary-700: var(--mlz-primary-700, #1d4ed8);
|
|
24
|
+
--color-primary-800: var(--mlz-primary-800, #1e40af);
|
|
25
|
+
--color-primary-900: var(--mlz-primary-900, #1e3a8a);
|
|
26
|
+
--color-primary-950: var(--mlz-primary-950, #172554);
|
|
27
|
+
|
|
28
|
+
--color-semantic-info: var(--mlz-semantic-info, #006EFF);
|
|
29
|
+
--color-semantic-error-600: var(--mlz-semantic-error-600, #EF284C);
|
|
30
|
+
--color-semantic-success: var(--mlz-semantic-success, #1D9C48);
|
|
31
|
+
|
|
32
|
+
--color-secondary-50: var(--mlz-secondary-50, #f8fafc);
|
|
33
|
+
--color-secondary-100: var(--mlz-secondary-100, #f1f5f9);
|
|
34
|
+
--color-secondary-200: var(--mlz-secondary-200, #e2e8f0);
|
|
35
|
+
--color-secondary-300: var(--mlz-secondary-300, #cbd5e1);
|
|
36
|
+
--color-secondary-400: var(--mlz-secondary-400, #94a3b8);
|
|
37
|
+
--color-secondary-500: var(--mlz-secondary-500, #64748b);
|
|
38
|
+
--color-secondary-600: var(--mlz-secondary-600, #475569);
|
|
39
|
+
--color-secondary-700: var(--mlz-secondary-700, #334155);
|
|
40
|
+
--color-secondary-800: var(--mlz-secondary-800, #1e293b);
|
|
41
|
+
--color-secondary-900: var(--mlz-secondary-900, #0f172a);
|
|
42
|
+
--color-secondary-950: var(--mlz-secondary-950, #020617);
|
|
43
|
+
|
|
44
|
+
--spacing-mlz-xs: var(--mlz-spacing-xs, 0.25rem);
|
|
45
|
+
--spacing-mlz-sm: var(--mlz-spacing-sm, 0.5rem);
|
|
46
|
+
--spacing-mlz-md: var(--mlz-spacing-md, 1rem);
|
|
47
|
+
--spacing-mlz-lg: var(--mlz-spacing-lg, 1.5rem);
|
|
48
|
+
--spacing-mlz-xl: var(--mlz-spacing-xl, 2rem);
|
|
49
|
+
--spacing-mlz-2xl: var(--mlz-spacing-2xl, 3rem);
|
|
50
|
+
|
|
51
|
+
--radius-mlz-sm: var(--mlz-border-radius-sm, 0.25rem);
|
|
52
|
+
--radius-mlz-md: var(--mlz-border-radius-md, 0.375rem);
|
|
53
|
+
--radius-mlz-lg: var(--mlz-border-radius-lg, 0.5rem);
|
|
54
|
+
--radius-mlz-xl: var(--mlz-border-radius-xl, 0.75rem);
|
|
55
|
+
|
|
56
|
+
--text-mlz-xs: var(--mlz-font-size-xs, 0.75rem);
|
|
57
|
+
--text-mlz-sm: var(--mlz-font-size-sm, 0.875rem);
|
|
58
|
+
--text-mlz-base: var(--mlz-font-size-base, 1rem);
|
|
59
|
+
--text-mlz-lg: var(--mlz-font-size-lg, 1.125rem);
|
|
60
|
+
--text-mlz-xl: var(--mlz-font-size-xl, 1.25rem);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sector.siit/mlz-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.30",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Una librería de componentes React con Tailwind CSS y variables CSS customizables",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
},
|
|
15
15
|
"./styles.css": "./dist/styles.css",
|
|
16
16
|
"./variables.css": "./dist/variables.css",
|
|
17
|
-
"./
|
|
17
|
+
"./theme.css": "./dist/theme.css",
|
|
18
|
+
"./dist/variables.css": "./dist/variables.css",
|
|
19
|
+
"./dist/theme.css": "./dist/theme.css"
|
|
18
20
|
},
|
|
19
21
|
"sideEffects": [
|
|
20
22
|
"*.css"
|