@enelar-esp/ui 0.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 +64 -0
- package/fesm2022/enelar-esp-ui.mjs +4264 -0
- package/fesm2022/enelar-esp-ui.mjs.map +1 -0
- package/package.json +24 -0
- package/src/lib/themes/_dark.scss +49 -0
- package/src/lib/themes/_light.scss +76 -0
- package/src/lib/themes/_theme.scss +17 -0
- package/src/lib/themes/_variables.scss +163 -0
- package/types/enelar-esp-ui.d.ts +1460 -0
package/package.json
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@enelar-esp/ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "^21.2.0",
|
|
6
|
+
"@angular/core": "^21.2.0"
|
|
7
|
+
},
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"tslib": "^2.3.0"
|
|
10
|
+
},
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"module": "fesm2022/enelar-esp-ui.mjs",
|
|
13
|
+
"typings": "types/enelar-esp-ui.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
"./package.json": {
|
|
16
|
+
"default": "./package.json"
|
|
17
|
+
},
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./types/enelar-esp-ui.d.ts",
|
|
20
|
+
"default": "./fesm2022/enelar-esp-ui.mjs"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"type": "module"
|
|
24
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/* Dark theme CSS variables */
|
|
2
|
+
[data-theme='dark'] {
|
|
3
|
+
/* Brand colors (Primary - Blue/Gold Enelar for contrast) */
|
|
4
|
+
--enl-color-primary-50: #000f27;
|
|
5
|
+
--enl-color-primary-100: #011a3e;
|
|
6
|
+
--enl-color-primary-200: #012456;
|
|
7
|
+
--enl-color-primary-300: #013175;
|
|
8
|
+
--enl-color-primary-400: #024299;
|
|
9
|
+
--enl-color-primary-500: #3b87ff;
|
|
10
|
+
--enl-color-primary-600: #60a5fa;
|
|
11
|
+
--enl-color-primary-700: #7eb3ff;
|
|
12
|
+
--enl-color-primary-800: #bad7ff;
|
|
13
|
+
--enl-color-primary-900: #e0edff;
|
|
14
|
+
--enl-color-primary-950: #f0f6ff;
|
|
15
|
+
--enl-color-accent: #feb809;
|
|
16
|
+
|
|
17
|
+
/* Theme Semantics (Dark mode values) */
|
|
18
|
+
--enl-color-bg: #09090b; /* neutral-950 */
|
|
19
|
+
--enl-color-surface: #18181b; /* neutral-900 */
|
|
20
|
+
--enl-color-surface-hover: #27272a; /* neutral-800 */
|
|
21
|
+
--enl-color-border: #27272a; /* neutral-800 */
|
|
22
|
+
--enl-color-border-hover: #3f3f46; /* neutral-700 */
|
|
23
|
+
|
|
24
|
+
/* Text colors */
|
|
25
|
+
--enl-color-text-primary: #fafafa; /* neutral-50 */
|
|
26
|
+
--enl-color-text-secondary: #d4d4d8; /* neutral-300 */
|
|
27
|
+
--enl-color-text-muted: #71717a; /* neutral-500 */
|
|
28
|
+
--enl-color-text-inverse: #09090b;
|
|
29
|
+
|
|
30
|
+
/* Semantic statuses (Adjusted for dark background) */
|
|
31
|
+
--enl-color-success-light: #052e16;
|
|
32
|
+
--enl-color-success-main: #4ade80;
|
|
33
|
+
--enl-color-success-dark: #86efac;
|
|
34
|
+
|
|
35
|
+
--enl-color-warning-light: #422006;
|
|
36
|
+
--enl-color-warning-main: #facc15;
|
|
37
|
+
--enl-color-warning-dark: #fef08a;
|
|
38
|
+
|
|
39
|
+
--enl-color-error-light: #450a0a;
|
|
40
|
+
--enl-color-error-main: #f87171;
|
|
41
|
+
--enl-color-error-dark: #fecaca;
|
|
42
|
+
|
|
43
|
+
--enl-color-info-light: #172554;
|
|
44
|
+
--enl-color-info-main: #60a5fa;
|
|
45
|
+
--enl-color-info-dark: #bfdbfe;
|
|
46
|
+
|
|
47
|
+
/* Active theme indicator */
|
|
48
|
+
--enl-theme-active: 'dark';
|
|
49
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/* Light theme CSS variables */
|
|
2
|
+
:root,
|
|
3
|
+
[data-theme='light'] {
|
|
4
|
+
/* Brand colors (Primary - Blue/Gold Enelar) */
|
|
5
|
+
--enl-color-primary-50: #f0f6ff;
|
|
6
|
+
--enl-color-primary-100: #e0edff;
|
|
7
|
+
--enl-color-primary-200: #bad7ff;
|
|
8
|
+
--enl-color-primary-300: #7eb3ff;
|
|
9
|
+
--enl-color-primary-400: #3b87ff;
|
|
10
|
+
--enl-color-primary-500: #024299;
|
|
11
|
+
--enl-color-primary-600: #024299;
|
|
12
|
+
--enl-color-primary-700: #013175;
|
|
13
|
+
--enl-color-primary-800: #012456;
|
|
14
|
+
--enl-color-primary-900: #011a3e;
|
|
15
|
+
--enl-color-primary-950: #000f27;
|
|
16
|
+
--enl-color-accent: #feb809;
|
|
17
|
+
|
|
18
|
+
/* Secondary colors (Slate) */
|
|
19
|
+
--enl-color-secondary-50: #f8fafc;
|
|
20
|
+
--enl-color-secondary-100: #f1f5f9;
|
|
21
|
+
--enl-color-secondary-200: #e2e8f0;
|
|
22
|
+
--enl-color-secondary-300: #cbd5e1;
|
|
23
|
+
--enl-color-secondary-400: #94a3b8;
|
|
24
|
+
--enl-color-secondary-500: #64748b;
|
|
25
|
+
--enl-color-secondary-600: #475569;
|
|
26
|
+
--enl-color-secondary-700: #334155;
|
|
27
|
+
--enl-color-secondary-800: #1e293b;
|
|
28
|
+
--enl-color-secondary-900: #0f172a;
|
|
29
|
+
--enl-color-secondary-950: #020617;
|
|
30
|
+
|
|
31
|
+
/* Neutrals (Gray) */
|
|
32
|
+
--enl-color-neutral-50: #fafafa;
|
|
33
|
+
--enl-color-neutral-100: #f4f4f5;
|
|
34
|
+
--enl-color-neutral-200: #e4e4e7;
|
|
35
|
+
--enl-color-neutral-300: #d4d4d8;
|
|
36
|
+
--enl-color-neutral-400: #a1a1aa;
|
|
37
|
+
--enl-color-neutral-500: #71717a;
|
|
38
|
+
--enl-color-neutral-600: #52525b;
|
|
39
|
+
--enl-color-neutral-700: #3f3f46;
|
|
40
|
+
--enl-color-neutral-800: #27272a;
|
|
41
|
+
--enl-color-neutral-900: #18181b;
|
|
42
|
+
--enl-color-neutral-950: #09090b;
|
|
43
|
+
|
|
44
|
+
/* Theme Semantics (Light mode values) */
|
|
45
|
+
--enl-color-bg: #f7f7f7;
|
|
46
|
+
--enl-color-surface: #ffffff;
|
|
47
|
+
--enl-color-surface-hover: #f0f0f0;
|
|
48
|
+
--enl-color-border: var(--enl-color-neutral-200);
|
|
49
|
+
--enl-color-border-hover: var(--enl-color-neutral-300);
|
|
50
|
+
|
|
51
|
+
/* Text colors */
|
|
52
|
+
--enl-color-text-primary: var(--enl-color-neutral-900);
|
|
53
|
+
--enl-color-text-secondary: var(--enl-color-neutral-600);
|
|
54
|
+
--enl-color-text-muted: var(--enl-color-neutral-400);
|
|
55
|
+
--enl-color-text-inverse: #ffffff;
|
|
56
|
+
|
|
57
|
+
/* Semantic statuses */
|
|
58
|
+
--enl-color-success-light: var(--enl-color-primary-100);
|
|
59
|
+
--enl-color-success-main: var(--enl-color-primary-600);
|
|
60
|
+
--enl-color-success-dark: var(--enl-color-primary-800);
|
|
61
|
+
|
|
62
|
+
--enl-color-warning-light: #fef08a;
|
|
63
|
+
--enl-color-warning-main: #eab308;
|
|
64
|
+
--enl-color-warning-dark: #a16207;
|
|
65
|
+
|
|
66
|
+
--enl-color-error-light: #fecaca;
|
|
67
|
+
--enl-color-error-main: #ef4444;
|
|
68
|
+
--enl-color-error-dark: #b91c1c;
|
|
69
|
+
|
|
70
|
+
--enl-color-info-light: #bfdbfe;
|
|
71
|
+
--enl-color-info-main: #3b82f6;
|
|
72
|
+
--enl-color-info-dark: #1d4ed8;
|
|
73
|
+
|
|
74
|
+
/* Active theme indicator */
|
|
75
|
+
--enl-theme-active: 'light';
|
|
76
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@import './_light.scss';
|
|
2
|
+
@import './_dark.scss';
|
|
3
|
+
|
|
4
|
+
/* Global styles & resets for EnelarUI library components */
|
|
5
|
+
:root {
|
|
6
|
+
color-scheme: light dark;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
body {
|
|
10
|
+
background-color: var(--enl-color-bg);
|
|
11
|
+
color: var(--enl-color-text-primary);
|
|
12
|
+
font-family: var(--enl-font-family-sans);
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
-webkit-font-smoothing: antialiased;
|
|
16
|
+
-moz-osx-font-smoothing: grayscale;
|
|
17
|
+
}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
// Design Tokens mapping to CSS variables with fallbacks
|
|
2
|
+
|
|
3
|
+
// Colors mapping
|
|
4
|
+
$enl-color-primary-50: var(--enl-color-primary-50, #f0fdf4);
|
|
5
|
+
$enl-color-primary-100: var(--enl-color-primary-100, #dcfce7);
|
|
6
|
+
$enl-color-primary-200: var(--enl-color-primary-200, #bbf7d0);
|
|
7
|
+
$enl-color-primary-300: var(--enl-color-primary-300, #86efac);
|
|
8
|
+
$enl-color-primary-400: var(--enl-color-primary-400, #4ade80);
|
|
9
|
+
$enl-color-primary-500: var(--enl-color-primary-500, #22c55e);
|
|
10
|
+
$enl-color-primary-600: var(--enl-color-primary-600, #16a34a);
|
|
11
|
+
$enl-color-primary-700: var(--enl-color-primary-700, #15803d);
|
|
12
|
+
$enl-color-primary-800: var(--enl-color-primary-800, #166534);
|
|
13
|
+
$enl-color-primary-900: var(--enl-color-primary-900, #14532d);
|
|
14
|
+
$enl-color-primary-950: var(--enl-color-primary-950, #052e16);
|
|
15
|
+
|
|
16
|
+
$enl-color-secondary-50: var(--enl-color-secondary-50, #f8fafc);
|
|
17
|
+
$enl-color-secondary-100: var(--enl-color-secondary-100, #f1f5f9);
|
|
18
|
+
$enl-color-secondary-200: var(--enl-color-secondary-200, #e2e8f0);
|
|
19
|
+
$enl-color-secondary-300: var(--enl-color-secondary-300, #cbd5e1);
|
|
20
|
+
$enl-color-secondary-400: var(--enl-color-secondary-400, #94a3b8);
|
|
21
|
+
$enl-color-secondary-500: var(--enl-color-secondary-500, #64748b);
|
|
22
|
+
$enl-color-secondary-600: var(--enl-color-secondary-600, #475569);
|
|
23
|
+
$enl-color-secondary-700: var(--enl-color-secondary-700, #334155);
|
|
24
|
+
$enl-color-secondary-800: var(--enl-color-secondary-800, #1e293b);
|
|
25
|
+
$enl-color-secondary-900: var(--enl-color-secondary-900, #0f172a);
|
|
26
|
+
$enl-color-secondary-950: var(--enl-color-secondary-950, #020617);
|
|
27
|
+
|
|
28
|
+
$enl-color-neutral-50: var(--enl-color-neutral-50, #fafafa);
|
|
29
|
+
$enl-color-neutral-100: var(--enl-color-neutral-100, #f4f4f5);
|
|
30
|
+
$enl-color-neutral-200: var(--enl-color-neutral-200, #e4e4e7);
|
|
31
|
+
$enl-color-neutral-300: var(--enl-color-neutral-300, #d4d4d8);
|
|
32
|
+
$enl-color-neutral-400: var(--enl-color-neutral-400, #a1a1aa);
|
|
33
|
+
$enl-color-neutral-500: var(--enl-color-neutral-500, #71717a);
|
|
34
|
+
$enl-color-neutral-600: var(--enl-color-neutral-600, #52525b);
|
|
35
|
+
$enl-color-neutral-700: var(--enl-color-neutral-700, #3f3f46);
|
|
36
|
+
$enl-color-neutral-800: var(--enl-color-neutral-800, #27272a);
|
|
37
|
+
$enl-color-neutral-900: var(--enl-color-neutral-900, #18181b);
|
|
38
|
+
$enl-color-neutral-950: var(--enl-color-neutral-950, #09090b);
|
|
39
|
+
|
|
40
|
+
// Semantics mapping
|
|
41
|
+
$enl-color-bg: var(--enl-color-bg, #fafafa);
|
|
42
|
+
$enl-color-surface: var(--enl-color-surface, #ffffff);
|
|
43
|
+
$enl-color-surface-hover: var(--enl-color-surface-hover, #f4f4f5);
|
|
44
|
+
$enl-color-border: var(--enl-color-border, #e4e4e7);
|
|
45
|
+
$enl-color-border-hover: var(--enl-color-border-hover, #d4d4d8);
|
|
46
|
+
|
|
47
|
+
$enl-color-text-primary: var(--enl-color-text-primary, #18181b);
|
|
48
|
+
$enl-color-text-secondary: var(--enl-color-text-secondary, #52525b);
|
|
49
|
+
$enl-color-text-muted: var(--enl-color-text-muted, #a1a1aa);
|
|
50
|
+
$enl-color-text-inverse: var(--enl-color-text-inverse, #ffffff);
|
|
51
|
+
|
|
52
|
+
$enl-color-success-light: var(--enl-color-success-light, #bbf7d0);
|
|
53
|
+
$enl-color-success-main: var(--enl-color-success-main, #22c55e);
|
|
54
|
+
$enl-color-success-dark: var(--enl-color-success-dark, #15803d);
|
|
55
|
+
|
|
56
|
+
$enl-color-warning-light: var(--enl-color-warning-light, #fef08a);
|
|
57
|
+
$enl-color-warning-main: var(--enl-color-warning-main, #eab308);
|
|
58
|
+
$enl-color-warning-dark: var(--enl-color-warning-dark, #a16207);
|
|
59
|
+
|
|
60
|
+
$enl-color-error-light: var(--enl-color-error-light, #fecaca);
|
|
61
|
+
$enl-color-error-main: var(--enl-color-error-main, #ef4444);
|
|
62
|
+
$enl-color-error-dark: var(--enl-color-error-dark, #b91c1c);
|
|
63
|
+
|
|
64
|
+
$enl-color-info-light: var(--enl-color-info-light, #bfdbfe);
|
|
65
|
+
$enl-color-info-main: var(--enl-color-info-main, #3b82f6);
|
|
66
|
+
$enl-color-info-dark: var(--enl-color-info-dark, #1d4ed8);
|
|
67
|
+
|
|
68
|
+
// Spacing mapping
|
|
69
|
+
$enl-spacing-xs: var(--enl-spacing-xs, 4px);
|
|
70
|
+
$enl-spacing-sm: var(--enl-spacing-sm, 8px);
|
|
71
|
+
$enl-spacing-md: var(--enl-spacing-md, 16px);
|
|
72
|
+
$enl-spacing-lg: var(--enl-spacing-lg, 24px);
|
|
73
|
+
$enl-spacing-xl: var(--enl-spacing-xl, 32px);
|
|
74
|
+
$enl-spacing-2xl: var(--enl-spacing-2xl, 48px);
|
|
75
|
+
$enl-spacing-3xl: var(--enl-spacing-3xl, 64px);
|
|
76
|
+
|
|
77
|
+
// Typography mapping
|
|
78
|
+
$enl-font-family-sans: var(--enl-font-family-sans, Inter, system-ui, sans-serif);
|
|
79
|
+
$enl-font-family-mono: var(--enl-font-family-mono, SFMono-Regular, Consolas, monospace);
|
|
80
|
+
|
|
81
|
+
$enl-font-size-xs: var(--enl-font-size-xs, 0.75rem);
|
|
82
|
+
$enl-font-size-sm: var(--enl-font-size-sm, 0.875rem);
|
|
83
|
+
$enl-font-size-base: var(--enl-font-size-base, 1rem);
|
|
84
|
+
$enl-font-size-lg: var(--enl-font-size-lg, 1.125rem);
|
|
85
|
+
$enl-font-size-xl: var(--enl-font-size-xl, 1.25rem);
|
|
86
|
+
$enl-font-size-2xl: var(--enl-font-size-2xl, 1.5rem);
|
|
87
|
+
$enl-font-size-3xl: var(--enl-font-size-3xl, 1.875rem);
|
|
88
|
+
$enl-font-size-4xl: var(--enl-font-size-4xl, 2.25rem);
|
|
89
|
+
|
|
90
|
+
$enl-font-weight-light: var(--enl-font-weight-light, 300);
|
|
91
|
+
$enl-font-weight-regular: var(--enl-font-weight-regular, 400);
|
|
92
|
+
$enl-font-weight-medium: var(--enl-font-weight-medium, 500);
|
|
93
|
+
$enl-font-weight-semibold: var(--enl-font-weight-semibold, 600);
|
|
94
|
+
$enl-font-weight-bold: var(--enl-font-weight-bold, 700);
|
|
95
|
+
|
|
96
|
+
$enl-line-height-none: var(--enl-line-height-none, 1);
|
|
97
|
+
$enl-line-height-tight: var(--enl-line-height-tight, 1.25);
|
|
98
|
+
$enl-line-height-snug: var(--enl-line-height-snug, 1.375);
|
|
99
|
+
$enl-line-height-normal: var(--enl-line-height-normal, 1.5);
|
|
100
|
+
$enl-line-height-relaxed: var(--enl-line-height-relaxed, 1.625);
|
|
101
|
+
$enl-line-height-loose: var(--enl-line-height-loose, 2);
|
|
102
|
+
|
|
103
|
+
// Borders mapping
|
|
104
|
+
$enl-border-radius-none: var(--enl-border-radius-none, 0px);
|
|
105
|
+
$enl-border-radius-sm: var(--enl-border-radius-sm, 4px);
|
|
106
|
+
$enl-border-radius-md: var(--enl-border-radius-md, 8px);
|
|
107
|
+
$enl-border-radius-lg: var(--enl-border-radius-lg, 12px);
|
|
108
|
+
$enl-border-radius-xl: var(--enl-border-radius-xl, 16px);
|
|
109
|
+
$enl-border-radius-full: var(--enl-border-radius-full, 9999px);
|
|
110
|
+
|
|
111
|
+
$enl-border-width-none: var(--enl-border-width-none, 0px);
|
|
112
|
+
$enl-border-width-sm: var(--enl-border-width-sm, 1px);
|
|
113
|
+
$enl-border-width-md: var(--enl-border-width-md, 2px);
|
|
114
|
+
$enl-border-width-lg: var(--enl-border-width-lg, 4px);
|
|
115
|
+
|
|
116
|
+
// Shadows mapping
|
|
117
|
+
$enl-shadow-sm: var(--enl-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
|
|
118
|
+
$enl-shadow-md: var(
|
|
119
|
+
--enl-shadow-md,
|
|
120
|
+
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
121
|
+
0 2px 4px -2px rgba(0, 0, 0, 0.1)
|
|
122
|
+
);
|
|
123
|
+
$enl-shadow-lg: var(
|
|
124
|
+
--enl-shadow-lg,
|
|
125
|
+
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
126
|
+
0 4px 6px -4px rgba(0, 0, 0, 0.1)
|
|
127
|
+
);
|
|
128
|
+
$enl-shadow-xl: var(
|
|
129
|
+
--enl-shadow-xl,
|
|
130
|
+
0 20px 25px -5px rgba(0, 0, 0, 0.1),
|
|
131
|
+
0 8px 10px -6px rgba(0, 0, 0, 0.1)
|
|
132
|
+
);
|
|
133
|
+
$enl-shadow-inner: var(--enl-shadow-inner, inset 0 2px 4px 0 rgba(0, 0, 0, 0.05));
|
|
134
|
+
|
|
135
|
+
// Animations mapping
|
|
136
|
+
$enl-animation-duration-fastest: var(--enl-animation-duration-fastest, 50ms);
|
|
137
|
+
$enl-animation-duration-fast: var(--enl-animation-duration-fast, 150ms);
|
|
138
|
+
$enl-animation-duration-normal: var(--enl-animation-duration-normal, 200ms);
|
|
139
|
+
$enl-animation-duration-slow: var(--enl-animation-duration-slow, 300ms);
|
|
140
|
+
$enl-animation-duration-slowest: var(--enl-animation-duration-slowest, 400ms);
|
|
141
|
+
|
|
142
|
+
$enl-animation-easing-linear: var(--enl-animation-easing-linear, linear);
|
|
143
|
+
$enl-animation-easing-ease-in: var(--enl-animation-easing-ease-in, cubic-bezier(0.4, 0, 1, 1));
|
|
144
|
+
$enl-animation-easing-ease-out: var(--enl-animation-easing-ease-out, cubic-bezier(0, 0, 0.2, 1));
|
|
145
|
+
$enl-animation-easing-ease-in-out: var(
|
|
146
|
+
--enl-animation-easing-ease-in-out,
|
|
147
|
+
cubic-bezier(0.4, 0, 0.2, 1)
|
|
148
|
+
);
|
|
149
|
+
|
|
150
|
+
// Z-index mapping
|
|
151
|
+
$enl-z-index-hide: var(--enl-z-index-hide, -1);
|
|
152
|
+
$enl-z-index-auto: var(--enl-z-index-auto, auto);
|
|
153
|
+
$enl-z-index-base: var(--enl-z-index-base, 0);
|
|
154
|
+
$enl-z-index-docked: var(--enl-z-index-docked, 10);
|
|
155
|
+
$enl-z-index-dropdown: var(--enl-z-index-dropdown, 1000);
|
|
156
|
+
$enl-z-index-sticky: var(--enl-z-index-sticky, 1100);
|
|
157
|
+
$enl-z-index-banner: var(--enl-z-index-banner, 1200);
|
|
158
|
+
$enl-z-index-overlay: var(--enl-z-index-overlay, 1300);
|
|
159
|
+
$enl-z-index-modal: var(--enl-z-index-modal, 1400);
|
|
160
|
+
$enl-z-index-popover: var(--enl-z-index-popover, 1500);
|
|
161
|
+
$enl-z-index-skip-link: var(--enl-z-index-skip-link, 1600);
|
|
162
|
+
$enl-z-index-toast: var(--enl-z-index-toast, 1700);
|
|
163
|
+
$enl-z-index-tooltip: var(--enl-z-index-tooltip, 1800);
|