@telcomdev/ui 0.1.5 → 0.1.7
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 +46 -0
- package/fesm2022/telcomdev-ui.mjs +374 -27
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/lib/theme/td-material-theme.css +46 -0
- package/lib/theme/td-theme.css +80 -0
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +78 -4
package/README.md
CHANGED
|
@@ -1,5 +1,51 @@
|
|
|
1
1
|
# Telcomdev UI
|
|
2
2
|
|
|
3
|
+
## Theming
|
|
4
|
+
|
|
5
|
+
La librería usa tokens CSS `--td-*` con fallbacks internos. Si no importas
|
|
6
|
+
ningún tema, los componentes conservan su apariencia por defecto.
|
|
7
|
+
|
|
8
|
+
Para usar los tokens oficiales:
|
|
9
|
+
|
|
10
|
+
```scss
|
|
11
|
+
@import '@telcomdev/ui/lib/theme/td-theme.css';
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Puedes sobrescribirlos desde tu aplicación sin cambiar APIs:
|
|
15
|
+
|
|
16
|
+
```scss
|
|
17
|
+
:root {
|
|
18
|
+
--td-font-family: var(--app-font-family, Inter, system-ui, sans-serif);
|
|
19
|
+
--td-color-primary: #3157a4;
|
|
20
|
+
--td-color-primary-hover: #254680;
|
|
21
|
+
--td-color-primary-soft: #eaf0fb;
|
|
22
|
+
--td-color-surface: #ffffff;
|
|
23
|
+
--td-color-surface-soft: #f6f8fb;
|
|
24
|
+
--td-color-surface-muted: #edf1f6;
|
|
25
|
+
--td-color-border: #dde3ee;
|
|
26
|
+
--td-color-border-strong: #c8d1df;
|
|
27
|
+
--td-color-text: #202b3d;
|
|
28
|
+
--td-color-text-muted: #66758b;
|
|
29
|
+
--td-color-danger: #b93a3a;
|
|
30
|
+
--td-color-success: #16784a;
|
|
31
|
+
--td-focus-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-primary) 18%, transparent);
|
|
32
|
+
--td-radius-md: 0.75rem;
|
|
33
|
+
--td-shadow-md: 0 18px 46px rgba(32, 43, 61, 0.14);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Si tu aplicación ya usa Angular Material con system tokens, puedes mapearlos
|
|
38
|
+
automáticamente importando el bridge opcional:
|
|
39
|
+
|
|
40
|
+
```scss
|
|
41
|
+
@import '@telcomdev/ui/lib/theme/td-material-theme.css';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Ese archivo conecta `--td-*` con tokens como `--mat-sys-primary`,
|
|
45
|
+
`--mat-sys-surface`, `--mat-sys-on-surface`, `--mat-sys-outline` y
|
|
46
|
+
`--mat-sys-error`. No reemplaza `TdThemeService`; solo permite convivir con un
|
|
47
|
+
tema externo.
|
|
48
|
+
|
|
3
49
|
## Input outline
|
|
4
50
|
|
|
5
51
|
```html
|