@prolibu-suite/cobalt-tokens 0.6.0 → 0.6.1

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.
Files changed (11) hide show
  1. package/README.md +5 -3
  2. package/build/css/tokens-dark.css +13 -1
  3. package/build/css/tokens-light.css +13 -1
  4. package/build/css/tokens.css +18 -1
  5. package/build/js/tokens.d.ts +28 -0
  6. package/build/js/tokens.js +75 -0
  7. package/build/js/tokens.mjs +19 -1
  8. package/build/json/tokens.json +70 -0
  9. package/build/scss/_tokens.scss +18 -1
  10. package/build/ts/tokens.d.ts +140 -0
  11. package/package.json +2 -2
package/README.md CHANGED
@@ -7,7 +7,7 @@ Design tokens del **Cobalt Design System** — colores, tipografía, spacing, ra
7
7
  ## Instalación
8
8
 
9
9
  ```bash
10
- pnpm add @prolibu-suite/cobalt-tokens
10
+ pnpm add @prolibu-suite/cobalt-tokens@^0.6.0
11
11
  ```
12
12
 
13
13
  ## Uso
@@ -26,6 +26,8 @@ pnpm add @prolibu-suite/cobalt-tokens
26
26
  }
27
27
  ```
28
28
 
29
+ Otros entry points CSS: `css/light` (la capa semántica clara scoped a `[data-theme="light"]`, para islas claras dentro de una página oscura), `css/motion-reduced` y `css/transparency-reduced` (bloques `prefers-reduced-motion` / `prefers-reduced-transparency` que el host debe importar para que el core los respete).
30
+
29
31
  ### SCSS
30
32
 
31
33
  ```scss
@@ -43,8 +45,8 @@ import * as tokens from '@prolibu-suite/cobalt-tokens';
43
45
  ## Sin build · vía CDN
44
46
 
45
47
  ```html
46
- <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens.css">
47
- <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens-dark.css">
48
+ <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.6.0/build/css/tokens.css">
49
+ <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.6.0/build/css/tokens-dark.css">
48
50
  ```
49
51
 
50
52
  ## Cuatro colores de marca
package/build/css/tokens-dark.css CHANGED
@@ -3,15 +3,20 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"] {
6
+ color-scheme: dark;
6
7
  --co-semantic-accent: var(--co-color-celeste-600);
7
8
  --co-semantic-on-accent: var(--co-color-base-blanco);
8
9
  --co-semantic-surface-primary: var(--co-color-base-blanco);
9
10
  --co-semantic-surface-secondary: var(--co-color-gray-800);
10
11
  --co-semantic-surface-page: var(--co-color-gray-800);
11
- --co-semantic-surface-muted: var(--co-color-gray-600);
12
+ --co-semantic-surface-muted: var(--co-color-gray-650);
12
13
  --co-semantic-surface-hover: var(--co-color-opacity-blanco-8);
13
14
  --co-semantic-surface-disabled: var(--co-color-gray-700);
14
15
  --co-semantic-surface-control: var(--co-color-gray-700);
16
+ --co-semantic-surface-error: var(--co-color-status-bg-error-dark); /** Tinte 17% de la tinta oscura sobre gray-800: el pastel de claro quedaba como caja clara en la app oscura */
17
+ --co-semantic-surface-success: var(--co-color-status-bg-success-dark);
18
+ --co-semantic-surface-warning: var(--co-color-status-bg-review-dark);
19
+ --co-semantic-surface-info: var(--co-color-status-bg-progress-dark);
15
20
  --co-semantic-on-primary: var(--co-color-base-negro);
16
21
  --co-semantic-on-secondary: var(--co-color-base-blanco);
17
22
  --co-semantic-text-default: var(--co-color-base-blanco);
@@ -19,6 +24,11 @@
19
24
  --co-semantic-text-secondary: var(--co-color-gray-400);
20
25
  --co-semantic-text-muted: var(--co-color-gray-500);
21
26
  --co-semantic-text-disabled: var(--co-color-gray-600);
27
+ --co-semantic-text-error: var(--co-color-secondary-rojo-50); /** Tinta que gira con el tema; status.* no puede (es relleno con tinta blanca) */
28
+ --co-semantic-text-success: var(--co-color-verde-600);
29
+ --co-semantic-text-info: var(--co-color-azul-500);
30
+ --co-semantic-text-link: var(--co-color-azul-500);
31
+ --co-semantic-text-warning: var(--co-color-primary-amarillo);
22
32
  --co-semantic-border-default: var(--co-color-opacity-blanco-16);
23
33
  --co-semantic-border-subtle: var(--co-color-opacity-blanco-8);
24
34
  --co-semantic-border-strong: var(--co-color-opacity-blanco-80);
@@ -26,8 +36,10 @@
26
36
  --co-semantic-border-focus: var(--co-color-opacity-blanco-50);
27
37
  --co-semantic-border-focus-ring: var(--co-color-opacity-blanco-8);
28
38
  --co-semantic-border-hairline: var(--co-color-opacity-blanco-4);
39
+ --co-semantic-border-error: var(--co-color-secondary-rojo-100); /** status-error da 2.94:1 sobre gray-800; rojo-100 da 4.47 (3.82 sobre surface-control) */
29
40
  --co-semantic-control-thumb: var(--co-color-base-negro);
30
41
  --co-semantic-control-shadow: var(--co-color-opacity-blanco-16);
42
+ --co-semantic-control-track-off: var(--co-color-gray-500); /** surface-muted al 35% quedaba a 1.06:1 de la página. gray-500: 5.58 sobre la página, 4.78 sobre surface-control y bajo el pulgar oscuro (base-negro) y 3.54 contra la pista encendida (blanco) */
31
43
  --co-semantic-status-success: var(--co-color-status-success);
32
44
  --co-semantic-status-error: var(--co-color-status-error);
33
45
  --co-semantic-status-warning: var(--co-color-primary-amarillo);
package/build/css/tokens-light.css CHANGED
@@ -3,6 +3,7 @@
3
3
  */
4
4
 
5
5
  [data-theme="light"] {
6
+ color-scheme: light;
6
7
  --co-semantic-accent: var(--co-color-celeste-600);
7
8
  --co-semantic-on-accent: var(--co-color-base-blanco);
8
9
  --co-semantic-surface-primary: var(--co-color-base-negro);
@@ -12,13 +13,22 @@
12
13
  --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
13
14
  --co-semantic-surface-disabled: var(--co-color-gray-100);
14
15
  --co-semantic-surface-control: var(--co-color-gray-100);
16
+ --co-semantic-surface-error: var(--co-color-status-bg-error); /** Superficie de estado (toast, menú danger): pastel en claro, tinte oscuro en oscuro. La tinta encima es text-* */
17
+ --co-semantic-surface-success: var(--co-color-status-bg-success);
18
+ --co-semantic-surface-warning: var(--co-color-status-bg-review);
19
+ --co-semantic-surface-info: var(--co-color-status-bg-progress);
15
20
  --co-semantic-on-primary: var(--co-color-base-blanco);
16
21
  --co-semantic-on-secondary: var(--co-color-base-negro);
17
22
  --co-semantic-text-default: var(--co-color-base-negro);
18
23
  --co-semantic-text-inverse: var(--co-color-base-blanco);
19
24
  --co-semantic-text-secondary: var(--co-color-gray-600);
20
- --co-semantic-text-muted: var(--co-color-gray-500);
25
+ --co-semantic-text-muted: var(--co-color-gray-550);
21
26
  --co-semantic-text-disabled: var(--co-color-gray-400);
27
+ --co-semantic-text-error: var(--co-color-status-error); /** Tinta de estado (texto, icono, asterisco). El relleno sigue en status.* */
28
+ --co-semantic-text-success: var(--co-color-status-success);
29
+ --co-semantic-text-info: var(--co-color-status-progress);
30
+ --co-semantic-text-link: var(--co-color-primary-azul);
31
+ --co-semantic-text-warning: var(--co-color-status-review); /** Igual al borde warning de los campos (status-review); status.warning (amarillo crudo) da 1.66:1 como texto */
22
32
  --co-semantic-border-default: var(--co-color-opacity-negro-16);
23
33
  --co-semantic-border-subtle: var(--co-color-opacity-negro-8);
24
34
  --co-semantic-border-strong: var(--co-color-opacity-negro-50);
@@ -26,10 +36,12 @@
26
36
  --co-semantic-border-focus: var(--co-color-opacity-negro-50);
27
37
  --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
28
38
  --co-semantic-border-hairline: var(--co-color-opacity-negro-4);
39
+ --co-semantic-border-error: var(--co-color-status-error); /** Borde de campo con error (el halo sale de color-mix sobre este) */
29
40
  --co-semantic-control-thumb: var(--co-color-base-blanco);
30
41
  --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
31
42
  --co-semantic-status-success: var(--co-color-status-success);
32
43
  --co-semantic-status-error: var(--co-color-status-error);
33
44
  --co-semantic-status-warning: var(--co-color-primary-amarillo);
34
45
  --co-semantic-status-info: var(--co-color-status-progress);
46
+ --co-semantic-control-track-off: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent); /** Pista de co-switch apagado: lo mismo que pintaba hasta hoy. Se declara también en claro para que una isla data-theme=light re-ancle el valor */
35
47
  }
package/build/css/tokens.css CHANGED
@@ -56,7 +56,9 @@
56
56
  --co-color-gray-300: #c4c4c4;
57
57
  --co-color-gray-400: #a0a0a0;
58
58
  --co-color-gray-500: #888888;
59
+ --co-color-gray-550: #6b6b6b; /** text-muted en claro: 5.33:1 sobre blanco (gray-500 daba 3.54) */
59
60
  --co-color-gray-600: #585858;
61
+ --co-color-gray-650: #333130; /** surface-muted en oscuro: text-secondary 4.95:1 y text-muted 3.65:1 encima (gray-600 daba 2.72/2.01) */
60
62
  --co-color-gray-700: #1f1c1b;
61
63
  --co-color-gray-800: #0a0a0a;
62
64
  --co-color-secondary-rosado-100: #d74ba0;
@@ -107,6 +109,10 @@
107
109
  --co-color-status-bg-pending: #f9f1eb;
108
110
  --co-color-status-error: #aa2e1b;
109
111
  --co-color-status-bg-error: #ffefef;
112
+ --co-color-status-bg-success-dark: #0a281e; /** surface-success en oscuro: verde-600 al 17% sobre gray-800; text-success 6.45:1 encima */
113
+ --co-color-status-bg-progress-dark: #192133; /** surface-info en oscuro: azul-500 al 17% sobre gray-800; text-info 5.26:1 encima */
114
+ --co-color-status-bg-review-dark: #332908; /** surface-warning en oscuro: primary-amarillo al 17% sobre gray-800; text-warning 8.64:1 encima */
115
+ --co-color-status-bg-error-dark: #341f20; /** surface-error en oscuro: secondary-rojo-50 al 17% sobre gray-800; text-error 6.67:1 encima */
110
116
  --co-color-opacity-negro-4: rgba(31, 28, 27, 0.04);
111
117
  --co-color-opacity-negro-8: rgba(31, 28, 27, 0.08);
112
118
  --co-color-opacity-negro-16: rgba(31, 28, 27, 0.16);
@@ -223,13 +229,22 @@
223
229
  --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
224
230
  --co-semantic-surface-disabled: var(--co-color-gray-100);
225
231
  --co-semantic-surface-control: var(--co-color-gray-100);
232
+ --co-semantic-surface-error: var(--co-color-status-bg-error); /** Superficie de estado (toast, menú danger): pastel en claro, tinte oscuro en oscuro. La tinta encima es text-* */
233
+ --co-semantic-surface-success: var(--co-color-status-bg-success);
234
+ --co-semantic-surface-warning: var(--co-color-status-bg-review);
235
+ --co-semantic-surface-info: var(--co-color-status-bg-progress);
226
236
  --co-semantic-on-primary: var(--co-color-base-blanco);
227
237
  --co-semantic-on-secondary: var(--co-color-base-negro);
228
238
  --co-semantic-text-default: var(--co-color-base-negro);
229
239
  --co-semantic-text-inverse: var(--co-color-base-blanco);
230
240
  --co-semantic-text-secondary: var(--co-color-gray-600);
231
- --co-semantic-text-muted: var(--co-color-gray-500);
241
+ --co-semantic-text-muted: var(--co-color-gray-550);
232
242
  --co-semantic-text-disabled: var(--co-color-gray-400);
243
+ --co-semantic-text-error: var(--co-color-status-error); /** Tinta de estado (texto, icono, asterisco). El relleno sigue en status.* */
244
+ --co-semantic-text-success: var(--co-color-status-success);
245
+ --co-semantic-text-info: var(--co-color-status-progress);
246
+ --co-semantic-text-link: var(--co-color-primary-azul);
247
+ --co-semantic-text-warning: var(--co-color-status-review); /** Igual al borde warning de los campos (status-review); status.warning (amarillo crudo) da 1.66:1 como texto */
233
248
  --co-semantic-border-default: var(--co-color-opacity-negro-16);
234
249
  --co-semantic-border-subtle: var(--co-color-opacity-negro-8);
235
250
  --co-semantic-border-strong: var(--co-color-opacity-negro-50);
@@ -237,10 +252,12 @@
237
252
  --co-semantic-border-focus: var(--co-color-opacity-negro-50);
238
253
  --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
239
254
  --co-semantic-border-hairline: var(--co-color-opacity-negro-4);
255
+ --co-semantic-border-error: var(--co-color-status-error); /** Borde de campo con error (el halo sale de color-mix sobre este) */
240
256
  --co-semantic-control-thumb: var(--co-color-base-blanco);
241
257
  --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
242
258
  --co-semantic-status-success: var(--co-color-status-success);
243
259
  --co-semantic-status-error: var(--co-color-status-error);
244
260
  --co-semantic-status-warning: var(--co-color-primary-amarillo);
245
261
  --co-semantic-status-info: var(--co-color-status-progress);
262
+ --co-semantic-control-track-off: color-mix(in srgb, var(--co-semantic-surface-muted) 35%, transparent); /** Pista de co-switch apagado: lo mismo que pintaba hasta hoy. Se declara también en claro para que una isla data-theme=light re-ancle el valor */
246
263
  }
package/build/js/tokens.d.ts CHANGED
@@ -55,7 +55,11 @@ export const ColorGray200: string;
55
55
  export const ColorGray300: string;
56
56
  export const ColorGray400: string;
57
57
  export const ColorGray500: string;
58
+ /** text-muted en claro: 5.33:1 sobre blanco (gray-500 daba 3.54) */
59
+ export const ColorGray550: string;
58
60
  export const ColorGray600: string;
61
+ /** surface-muted en oscuro: text-secondary 4.95:1 y text-muted 3.65:1 encima (gray-600 daba 2.72/2.01) */
62
+ export const ColorGray650: string;
59
63
  export const ColorGray700: string;
60
64
  export const ColorGray800: string;
61
65
  export const ColorSecondaryRosado100: string;
@@ -106,6 +110,14 @@ export const ColorStatusPending: string;
106
110
  export const ColorStatusBgPending: string;
107
111
  export const ColorStatusError: string;
108
112
  export const ColorStatusBgError: string;
113
+ /** surface-success en oscuro: verde-600 al 17% sobre gray-800; text-success 6.45:1 encima */
114
+ export const ColorStatusBgSuccessDark: string;
115
+ /** surface-info en oscuro: azul-500 al 17% sobre gray-800; text-info 5.26:1 encima */
116
+ export const ColorStatusBgProgressDark: string;
117
+ /** surface-warning en oscuro: primary-amarillo al 17% sobre gray-800; text-warning 8.64:1 encima */
118
+ export const ColorStatusBgReviewDark: string;
119
+ /** surface-error en oscuro: secondary-rojo-50 al 17% sobre gray-800; text-error 6.67:1 encima */
120
+ export const ColorStatusBgErrorDark: string;
109
121
  export const ColorOpacityNegro4: string;
110
122
  export const ColorOpacityNegro8: string;
111
123
  export const ColorOpacityNegro16: string;
@@ -153,6 +165,11 @@ export const SemanticSurfaceMuted: string;
153
165
  export const SemanticSurfaceHover: string;
154
166
  export const SemanticSurfaceDisabled: string;
155
167
  export const SemanticSurfaceControl: string;
168
+ /** Superficie de estado (toast, menú danger): pastel en claro, tinte oscuro en oscuro. La tinta encima es text-* */
169
+ export const SemanticSurfaceError: string;
170
+ export const SemanticSurfaceSuccess: string;
171
+ export const SemanticSurfaceWarning: string;
172
+ export const SemanticSurfaceInfo: string;
156
173
  export const SemanticOnPrimary: string;
157
174
  export const SemanticOnSecondary: string;
158
175
  export const SemanticTextDefault: string;
@@ -160,6 +177,13 @@ export const SemanticTextInverse: string;
160
177
  export const SemanticTextSecondary: string;
161
178
  export const SemanticTextMuted: string;
162
179
  export const SemanticTextDisabled: string;
180
+ /** Tinta de estado (texto, icono, asterisco). El relleno sigue en status.* */
181
+ export const SemanticTextError: string;
182
+ export const SemanticTextSuccess: string;
183
+ export const SemanticTextInfo: string;
184
+ export const SemanticTextLink: string;
185
+ /** Igual al borde warning de los campos (status-review); status.warning (amarillo crudo) da 1.66:1 como texto */
186
+ export const SemanticTextWarning: string;
163
187
  export const SemanticBorderDefault: string;
164
188
  export const SemanticBorderSubtle: string;
165
189
  export const SemanticBorderStrong: string;
@@ -167,8 +191,12 @@ export const SemanticBorderField: string;
167
191
  export const SemanticBorderFocus: string;
168
192
  export const SemanticBorderFocusRing: string;
169
193
  export const SemanticBorderHairline: string;
194
+ /** Borde de campo con error (el halo sale de color-mix sobre este) */
195
+ export const SemanticBorderError: string;
170
196
  export const SemanticControlThumb: string;
171
197
  export const SemanticControlShadow: string;
198
+ /** Pista de co-switch apagado: lo mismo que pintaba hasta hoy. Se declara también en claro para que una isla data-theme=light re-ancle el valor */
199
+ export const SemanticControlTrackOff: string;
172
200
  export const SemanticStatusSuccess: string;
173
201
  export const SemanticStatusError: string;
174
202
  export const SemanticStatusWarning: string;
package/build/js/tokens.js ADDED
@@ -0,0 +1,75 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ module.exports = {
6
+ ColorBaseNegro: "#1f1c1b",
7
+ ColorBaseBlanco: "#ffffff",
8
+ ColorBaseOffWhite: "#f7f6f0",
9
+ ColorPrimaryVerde: "#02a270",
10
+ ColorPrimaryAmarillo: "#fdbf00",
11
+ ColorPrimaryAzul: "#2563eb",
12
+ ColorPrimaryRosado: "#f32a73",
13
+ ColorGray100: "#f6f6f6",
14
+ ColorGray200: "#e3e3e3",
15
+ ColorGray300: "#c4c4c4",
16
+ ColorGray400: "#a0a0a0",
17
+ ColorGray500: "#888888",
18
+ ColorGray600: "#585858",
19
+ ColorGray700: "#1f1c1b",
20
+ ColorGray800: "#0a0a0a",
21
+ ColorNeutral100: "#e6e5df",
22
+ ColorNeutralBeige: "#fffcfa",
23
+ ColorSecondaryRojo: "#eb1e1e",
24
+ ColorSecondaryNaranja: "#f0821e",
25
+ ColorSecondaryOliva: "#aab43c",
26
+ ColorSecondaryVioleta: "#5f4bd7",
27
+ ColorSecondaryMarron: "#af7355",
28
+ ColorVerde100: "#ecfdf5",
29
+ ColorVerde900: "#046147",
30
+ ColorStatusSuccess: "#0a7724",
31
+ ColorStatusSuccessBg: "#ebf9ec",
32
+ ColorStatusError: "#aa2e1b",
33
+ ColorStatusProgress: "#2d6cc5",
34
+ ColorStatusReview: "#85571f",
35
+ ColorStatusSubmitted: "#7556ca",
36
+ OpacityNegro4: "rgba(31, 28, 27, 0.04)",
37
+ OpacityNegro8: "rgba(31, 28, 27, 0.08)",
38
+ OpacityNegro16: "rgba(31, 28, 27, 0.16)",
39
+ OpacityNegro25: "rgba(31, 28, 27, 0.25)",
40
+ OpacityNegro50: "rgba(31, 28, 27, 0.5)",
41
+ OpacityNegro80: "rgba(31, 28, 27, 0.8)",
42
+ OpacityBlanco4: "rgba(255, 255, 255, 0.04)",
43
+ OpacityBlanco8: "rgba(255, 255, 255, 0.08)",
44
+ OpacityBlanco16: "rgba(255, 255, 255, 0.16)",
45
+ OpacityBlanco80: "rgba(255, 255, 255, 0.8)",
46
+ RadiusXxs: "4px",
47
+ RadiusXs: "8px",
48
+ RadiusSm: "12px",
49
+ RadiusLg: "16px",
50
+ RadiusXl: "24px",
51
+ RadiusFull: "9999px",
52
+ ShadowLg:
53
+ "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)",
54
+ FocusRing: "0 0 0 2px rgba(31, 28, 27, 0.08)",
55
+ SpaceXxs: "2px",
56
+ SpaceXs: "4px",
57
+ SpaceSm: "6px",
58
+ SpaceSm2: "8px",
59
+ SpaceMd: "12px",
60
+ SpaceLg: "16px",
61
+ SpaceXl: "20px",
62
+ Space2xl: "24px",
63
+ Space3xl: "32px",
64
+ Space5xl: "48px",
65
+ FontFamilyPrimary: "'Geist', sans-serif",
66
+ FontFamilyMono: "'Geist Mono', monospace",
67
+ FontSize10: "10px",
68
+ FontSize12: "12px",
69
+ FontSize14: "14px",
70
+ FontSize16: "16px",
71
+ FontSize18: "18px",
72
+ FontSize20: "20px",
73
+ FontSize22: "22px",
74
+ FontSize24: "24px",
75
+ };
package/build/js/tokens.mjs CHANGED
@@ -55,7 +55,9 @@ export const ColorGray200 = "#e3e3e3";
55
55
  export const ColorGray300 = "#c4c4c4";
56
56
  export const ColorGray400 = "#a0a0a0";
57
57
  export const ColorGray500 = "#888888";
58
+ export const ColorGray550 = "#6b6b6b"; // text-muted en claro: 5.33:1 sobre blanco (gray-500 daba 3.54)
58
59
  export const ColorGray600 = "#585858";
60
+ export const ColorGray650 = "#333130"; // surface-muted en oscuro: text-secondary 4.95:1 y text-muted 3.65:1 encima (gray-600 daba 2.72/2.01)
59
61
  export const ColorGray700 = "#1f1c1b";
60
62
  export const ColorGray800 = "#0a0a0a";
61
63
  export const ColorSecondaryRosado100 = "#d74ba0";
@@ -106,6 +108,10 @@ export const ColorStatusPending = "#b45103";
106
108
  export const ColorStatusBgPending = "#f9f1eb";
107
109
  export const ColorStatusError = "#aa2e1b";
108
110
  export const ColorStatusBgError = "#ffefef";
111
+ export const ColorStatusBgSuccessDark = "#0a281e"; // surface-success en oscuro: verde-600 al 17% sobre gray-800; text-success 6.45:1 encima
112
+ export const ColorStatusBgProgressDark = "#192133"; // surface-info en oscuro: azul-500 al 17% sobre gray-800; text-info 5.26:1 encima
113
+ export const ColorStatusBgReviewDark = "#332908"; // surface-warning en oscuro: primary-amarillo al 17% sobre gray-800; text-warning 8.64:1 encima
114
+ export const ColorStatusBgErrorDark = "#341f20"; // surface-error en oscuro: secondary-rojo-50 al 17% sobre gray-800; text-error 6.67:1 encima
109
115
  export const ColorOpacityNegro4 = "rgba(31, 28, 27, 0.04)";
110
116
  export const ColorOpacityNegro8 = "rgba(31, 28, 27, 0.08)";
111
117
  export const ColorOpacityNegro16 = "rgba(31, 28, 27, 0.16)";
@@ -153,13 +159,22 @@ export const SemanticSurfaceMuted = "#e3e3e3";
153
159
  export const SemanticSurfaceHover = "rgba(31, 28, 27, 0.08)";
154
160
  export const SemanticSurfaceDisabled = "#f6f6f6";
155
161
  export const SemanticSurfaceControl = "#f6f6f6";
162
+ export const SemanticSurfaceError = "#ffefef"; // Superficie de estado (toast, menú danger): pastel en claro, tinte oscuro en oscuro. La tinta encima es text-*
163
+ export const SemanticSurfaceSuccess = "#ebf9ec";
164
+ export const SemanticSurfaceWarning = "#fcf5db";
165
+ export const SemanticSurfaceInfo = "#eef3fa";
156
166
  export const SemanticOnPrimary = "#ffffff";
157
167
  export const SemanticOnSecondary = "#1f1c1b";
158
168
  export const SemanticTextDefault = "#1f1c1b";
159
169
  export const SemanticTextInverse = "#ffffff";
160
170
  export const SemanticTextSecondary = "#585858";
161
- export const SemanticTextMuted = "#888888";
171
+ export const SemanticTextMuted = "#6b6b6b";
162
172
  export const SemanticTextDisabled = "#a0a0a0";
173
+ export const SemanticTextError = "#aa2e1b"; // Tinta de estado (texto, icono, asterisco). El relleno sigue en status.*
174
+ export const SemanticTextSuccess = "#0a7724";
175
+ export const SemanticTextInfo = "#2d6cc5";
176
+ export const SemanticTextLink = "#2563eb";
177
+ export const SemanticTextWarning = "#85571f"; // Igual al borde warning de los campos (status-review); status.warning (amarillo crudo) da 1.66:1 como texto
163
178
  export const SemanticBorderDefault = "rgba(31, 28, 27, 0.16)";
164
179
  export const SemanticBorderSubtle = "rgba(31, 28, 27, 0.08)";
165
180
  export const SemanticBorderStrong = "rgba(31, 28, 27, 0.50)";
@@ -167,8 +182,11 @@ export const SemanticBorderField = "rgba(31, 28, 27, 0.25)";
167
182
  export const SemanticBorderFocus = "rgba(31, 28, 27, 0.50)";
168
183
  export const SemanticBorderFocusRing = "rgba(31, 28, 27, 0.08)";
169
184
  export const SemanticBorderHairline = "rgba(31, 28, 27, 0.04)";
185
+ export const SemanticBorderError = "#aa2e1b"; // Borde de campo con error (el halo sale de color-mix sobre este)
170
186
  export const SemanticControlThumb = "#ffffff";
171
187
  export const SemanticControlShadow = "rgba(31, 28, 27, 0.16)";
188
+ export const SemanticControlTrackOff =
189
+ "color-mix(in srgb, #e3e3e3 35%, transparent)"; // Pista de co-switch apagado: lo mismo que pintaba hasta hoy. Se declara también en claro para que una isla data-theme=light re-ancle el valor
172
190
  export const SemanticStatusSuccess = "#0a7724";
173
191
  export const SemanticStatusError = "#aa2e1b";
174
192
  export const SemanticStatusWarning = "#fdbf00";
package/build/json/tokens.json ADDED
@@ -0,0 +1,70 @@
1
+ {
2
+ "ColorBaseNegro": "#1f1c1b",
3
+ "ColorBaseBlanco": "#ffffff",
4
+ "ColorBaseOffWhite": "#f7f6f0",
5
+ "ColorPrimaryVerde": "#02a270",
6
+ "ColorPrimaryAmarillo": "#fdbf00",
7
+ "ColorPrimaryAzul": "#2563eb",
8
+ "ColorPrimaryRosado": "#f32a73",
9
+ "ColorGray100": "#f6f6f6",
10
+ "ColorGray200": "#e3e3e3",
11
+ "ColorGray300": "#c4c4c4",
12
+ "ColorGray400": "#a0a0a0",
13
+ "ColorGray500": "#888888",
14
+ "ColorGray600": "#585858",
15
+ "ColorGray700": "#1f1c1b",
16
+ "ColorGray800": "#0a0a0a",
17
+ "ColorNeutral100": "#e6e5df",
18
+ "ColorNeutralBeige": "#fffcfa",
19
+ "ColorSecondaryRojo": "#eb1e1e",
20
+ "ColorSecondaryNaranja": "#f0821e",
21
+ "ColorSecondaryOliva": "#aab43c",
22
+ "ColorSecondaryVioleta": "#5f4bd7",
23
+ "ColorSecondaryMarron": "#af7355",
24
+ "ColorVerde100": "#ecfdf5",
25
+ "ColorVerde900": "#046147",
26
+ "ColorStatusSuccess": "#0a7724",
27
+ "ColorStatusSuccessBg": "#ebf9ec",
28
+ "ColorStatusError": "#aa2e1b",
29
+ "ColorStatusProgress": "#2d6cc5",
30
+ "ColorStatusReview": "#85571f",
31
+ "ColorStatusSubmitted": "#7556ca",
32
+ "OpacityNegro4": "rgba(31, 28, 27, 0.04)",
33
+ "OpacityNegro8": "rgba(31, 28, 27, 0.08)",
34
+ "OpacityNegro16": "rgba(31, 28, 27, 0.16)",
35
+ "OpacityNegro25": "rgba(31, 28, 27, 0.25)",
36
+ "OpacityNegro50": "rgba(31, 28, 27, 0.5)",
37
+ "OpacityNegro80": "rgba(31, 28, 27, 0.8)",
38
+ "OpacityBlanco4": "rgba(255, 255, 255, 0.04)",
39
+ "OpacityBlanco8": "rgba(255, 255, 255, 0.08)",
40
+ "OpacityBlanco16": "rgba(255, 255, 255, 0.16)",
41
+ "OpacityBlanco80": "rgba(255, 255, 255, 0.8)",
42
+ "RadiusXxs": "4px",
43
+ "RadiusXs": "8px",
44
+ "RadiusSm": "12px",
45
+ "RadiusLg": "16px",
46
+ "RadiusXl": "24px",
47
+ "RadiusFull": "9999px",
48
+ "ShadowLg": "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)",
49
+ "FocusRing": "0 0 0 2px rgba(31, 28, 27, 0.08)",
50
+ "SpaceXxs": "2px",
51
+ "SpaceXs": "4px",
52
+ "SpaceSm": "6px",
53
+ "SpaceSm2": "8px",
54
+ "SpaceMd": "12px",
55
+ "SpaceLg": "16px",
56
+ "SpaceXl": "20px",
57
+ "Space2xl": "24px",
58
+ "Space3xl": "32px",
59
+ "Space5xl": "48px",
60
+ "FontFamilyPrimary": "'Geist', sans-serif",
61
+ "FontFamilyMono": "'Geist Mono', monospace",
62
+ "FontSize10": "10px",
63
+ "FontSize12": "12px",
64
+ "FontSize14": "14px",
65
+ "FontSize16": "16px",
66
+ "FontSize18": "18px",
67
+ "FontSize20": "20px",
68
+ "FontSize22": "22px",
69
+ "FontSize24": "24px"
70
+ }
package/build/scss/_tokens.scss CHANGED
@@ -54,7 +54,9 @@ $co-color-gray-200: #e3e3e3;
54
54
  $co-color-gray-300: #c4c4c4;
55
55
  $co-color-gray-400: #a0a0a0;
56
56
  $co-color-gray-500: #888888;
57
+ $co-color-gray-550: #6b6b6b; // text-muted en claro: 5.33:1 sobre blanco (gray-500 daba 3.54)
57
58
  $co-color-gray-600: #585858;
59
+ $co-color-gray-650: #333130; // surface-muted en oscuro: text-secondary 4.95:1 y text-muted 3.65:1 encima (gray-600 daba 2.72/2.01)
58
60
  $co-color-gray-700: #1f1c1b;
59
61
  $co-color-gray-800: #0a0a0a;
60
62
  $co-color-secondary-rosado-100: #d74ba0;
@@ -105,6 +107,10 @@ $co-color-status-pending: #b45103;
105
107
  $co-color-status-bg-pending: #f9f1eb;
106
108
  $co-color-status-error: #aa2e1b;
107
109
  $co-color-status-bg-error: #ffefef;
110
+ $co-color-status-bg-success-dark: #0a281e; // surface-success en oscuro: verde-600 al 17% sobre gray-800; text-success 6.45:1 encima
111
+ $co-color-status-bg-progress-dark: #192133; // surface-info en oscuro: azul-500 al 17% sobre gray-800; text-info 5.26:1 encima
112
+ $co-color-status-bg-review-dark: #332908; // surface-warning en oscuro: primary-amarillo al 17% sobre gray-800; text-warning 8.64:1 encima
113
+ $co-color-status-bg-error-dark: #341f20; // surface-error en oscuro: secondary-rojo-50 al 17% sobre gray-800; text-error 6.67:1 encima
108
114
  $co-color-opacity-negro-4: rgba(31, 28, 27, 0.04);
109
115
  $co-color-opacity-negro-8: rgba(31, 28, 27, 0.08);
110
116
  $co-color-opacity-negro-16: rgba(31, 28, 27, 0.16);
@@ -152,13 +158,22 @@ $co-semantic-surface-muted: #e3e3e3;
152
158
  $co-semantic-surface-hover: rgba(31, 28, 27, 0.08);
153
159
  $co-semantic-surface-disabled: #f6f6f6;
154
160
  $co-semantic-surface-control: #f6f6f6;
161
+ $co-semantic-surface-error: #ffefef; // Superficie de estado (toast, menú danger): pastel en claro, tinte oscuro en oscuro. La tinta encima es text-*
162
+ $co-semantic-surface-success: #ebf9ec;
163
+ $co-semantic-surface-warning: #fcf5db;
164
+ $co-semantic-surface-info: #eef3fa;
155
165
  $co-semantic-on-primary: #ffffff;
156
166
  $co-semantic-on-secondary: #1f1c1b;
157
167
  $co-semantic-text-default: #1f1c1b;
158
168
  $co-semantic-text-inverse: #ffffff;
159
169
  $co-semantic-text-secondary: #585858;
160
- $co-semantic-text-muted: #888888;
170
+ $co-semantic-text-muted: #6b6b6b;
161
171
  $co-semantic-text-disabled: #a0a0a0;
172
+ $co-semantic-text-error: #aa2e1b; // Tinta de estado (texto, icono, asterisco). El relleno sigue en status.*
173
+ $co-semantic-text-success: #0a7724;
174
+ $co-semantic-text-info: #2d6cc5;
175
+ $co-semantic-text-link: #2563eb;
176
+ $co-semantic-text-warning: #85571f; // Igual al borde warning de los campos (status-review); status.warning (amarillo crudo) da 1.66:1 como texto
162
177
  $co-semantic-border-default: rgba(31, 28, 27, 0.16);
163
178
  $co-semantic-border-subtle: rgba(31, 28, 27, 0.08);
164
179
  $co-semantic-border-strong: rgba(31, 28, 27, 0.50);
@@ -166,8 +181,10 @@ $co-semantic-border-field: rgba(31, 28, 27, 0.25);
166
181
  $co-semantic-border-focus: rgba(31, 28, 27, 0.50);
167
182
  $co-semantic-border-focus-ring: rgba(31, 28, 27, 0.08);
168
183
  $co-semantic-border-hairline: rgba(31, 28, 27, 0.04);
184
+ $co-semantic-border-error: #aa2e1b; // Borde de campo con error (el halo sale de color-mix sobre este)
169
185
  $co-semantic-control-thumb: #ffffff;
170
186
  $co-semantic-control-shadow: rgba(31, 28, 27, 0.16);
187
+ $co-semantic-control-track-off: color-mix(in srgb, #e3e3e3 35%, transparent); // Pista de co-switch apagado: lo mismo que pintaba hasta hoy. Se declara también en claro para que una isla data-theme=light re-ancle el valor
171
188
  $co-semantic-status-success: #0a7724;
172
189
  $co-semantic-status-error: #aa2e1b;
173
190
  $co-semantic-status-warning: #fdbf00;
package/build/ts/tokens.d.ts ADDED
@@ -0,0 +1,140 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ /** Figma: Base/Negro */
6
+ export const ColorBaseNegro: string;
7
+ /** Figma: Base/Blanco */
8
+ export const ColorBaseBlanco: string;
9
+ /** Figma: Base/Off-White */
10
+ export const ColorBaseOffWhite: string;
11
+ /** Figma: Primarios/Verde */
12
+ export const ColorPrimaryVerde: string;
13
+ /** Figma: Primarios/Amarillo */
14
+ export const ColorPrimaryAmarillo: string;
15
+ /** Figma: Primarios/Azul */
16
+ export const ColorPrimaryAzul: string;
17
+ /** Figma: Primarios/Rosado */
18
+ export const ColorPrimaryRosado: string;
19
+ /** Figma: Escala de grises/Gris-100 */
20
+ export const ColorGray100: string;
21
+ /** Figma: Escala de grises/Gris-200 */
22
+ export const ColorGray200: string;
23
+ /** Figma: Escala de grises/Gris-300 */
24
+ export const ColorGray300: string;
25
+ /** Figma: Escala de grises/Gris-400 */
26
+ export const ColorGray400: string;
27
+ /** Figma: Escala de grises/Gris-500 */
28
+ export const ColorGray500: string;
29
+ /** Figma: Escala de grises/Gris-600 */
30
+ export const ColorGray600: string;
31
+ /** Figma: Escala de grises/Gris-700 */
32
+ export const ColorGray700: string;
33
+ /** Figma: Escala de grises/Gris-800 */
34
+ export const ColorGray800: string;
35
+ /** Figma: Neutrales/Neutral-100 */
36
+ export const ColorNeutral100: string;
37
+ /** Figma: Neutrals/Beige */
38
+ export const ColorNeutralBeige: string;
39
+ /** Figma: Secundario/Rojo/Rojo 100% */
40
+ export const ColorSecondaryRojo: string;
41
+ /** Figma: Secundario/Naranja/Naranja 100% */
42
+ export const ColorSecondaryNaranja: string;
43
+ /** Figma: Secundario/Oliva/Oliva 100% */
44
+ export const ColorSecondaryOliva: string;
45
+ /** Figma: Secundario/Violeta/Violeta 100% */
46
+ export const ColorSecondaryVioleta: string;
47
+ /** Figma: Secundario/Marrón/Marrón 100% */
48
+ export const ColorSecondaryMarron: string;
49
+ /** Figma: Verde/Verde-100 */
50
+ export const ColorVerde100: string;
51
+ /** Figma: Verde/Verde-900 */
52
+ export const ColorVerde900: string;
53
+ /** Figma: Estatus/Éxito/Success */
54
+ export const ColorStatusSuccess: string;
55
+ /** Figma: Estatus/Éxito/Bg_Success */
56
+ export const ColorStatusSuccessBg: string;
57
+ /** Figma: Estatus/Error/Error */
58
+ export const ColorStatusError: string;
59
+ /** Figma: Estatus/En progreso/In progress */
60
+ export const ColorStatusProgress: string;
61
+ /** Figma: Estatus/En revisión/In review */
62
+ export const ColorStatusReview: string;
63
+ /** Figma: Estatus/Enviado/Submitted */
64
+ export const ColorStatusSubmitted: string;
65
+ /** Figma: Opacidad/Negro/Negro 4% */
66
+ export const OpacityNegro4: string;
67
+ /** Figma: Opacidad/Negro/Negro 8% */
68
+ export const OpacityNegro8: string;
69
+ /** Figma: Opacidad/Negro/Negro 16% */
70
+ export const OpacityNegro16: string;
71
+ /** Figma: Opacidad/Negro/Negro 25% */
72
+ export const OpacityNegro25: string;
73
+ /** Figma: Opacidad/Negro/Negro 50% */
74
+ export const OpacityNegro50: string;
75
+ /** Figma: Opacidad/Negro/Negro 80% */
76
+ export const OpacityNegro80: string;
77
+ /** Figma: Opacidad/Blanco/Blanco 4% */
78
+ export const OpacityBlanco4: string;
79
+ /** Figma: Opacidad/Blanco/Blanco 8% */
80
+ export const OpacityBlanco8: string;
81
+ /** Figma: Opacidad/Blanco/Blanco 16% */
82
+ export const OpacityBlanco16: string;
83
+ /** Figma: Opacidad/Blanco/Blanco 80% */
84
+ export const OpacityBlanco80: string;
85
+ /** Figma: Border Radius/radius-xxs */
86
+ export const RadiusXxs: string;
87
+ /** Figma: Border Radius/radius-xs */
88
+ export const RadiusXs: string;
89
+ /** Figma: Border Radius/radius-sm */
90
+ export const RadiusSm: string;
91
+ /** Figma: Border Radius/radius-lg */
92
+ export const RadiusLg: string;
93
+ /** Figma: Border Radius/radius-xl */
94
+ export const RadiusXl: string;
95
+ /** Figma: Border Radius/radius-full */
96
+ export const RadiusFull: string;
97
+ /** Figma: Shadows/lg — 2 layer composite */
98
+ export const ShadowLg: string;
99
+ /** Figma: Focus effect */
100
+ export const FocusRing: string;
101
+ /** Figma: Espacio/space-xxs */
102
+ export const SpaceXxs: string;
103
+ /** Figma: Espacio/space-xs */
104
+ export const SpaceXs: string;
105
+ /** Figma: Espacio/space-sm */
106
+ export const SpaceSm: string;
107
+ /** Figma: Espacio/space-sm2 */
108
+ export const SpaceSm2: string;
109
+ /** Figma: Espacio/space-md */
110
+ export const SpaceMd: string;
111
+ /** Figma: Espacio/space-lg */
112
+ export const SpaceLg: string;
113
+ /** Figma: Espacio/space-xl */
114
+ export const SpaceXl: string;
115
+ /** Figma: Espacio/space-2xl */
116
+ export const Space2xl: string;
117
+ /** Figma: Espacio/space-3xl */
118
+ export const Space3xl: string;
119
+ /** Figma: Espacio/space-5xl */
120
+ export const Space5xl: string;
121
+ /** Figma: Font Families/font-family-geist */
122
+ export const FontFamilyPrimary: string;
123
+ /** Figma: Font Families/font-family-geist-mono */
124
+ export const FontFamilyMono: string;
125
+ /** Figma: Font Size/font-size-10 */
126
+ export const FontSize10: string;
127
+ /** Figma: Font Size/font-size-12 */
128
+ export const FontSize12: string;
129
+ /** Figma: Font Size/font-size-14 */
130
+ export const FontSize14: string;
131
+ /** Figma: Font Size/font-size-16 */
132
+ export const FontSize16: string;
133
+ /** Figma: Font Size/font-size-18 */
134
+ export const FontSize18: string;
135
+ /** Figma: Font Size/font-size-20 */
136
+ export const FontSize20: string;
137
+ /** Figma: Font Size/font-size-22 */
138
+ export const FontSize22: string;
139
+ /** Figma: Font Size/font-size-24 */
140
+ export const FontSize24: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prolibu-suite/cobalt-tokens",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
4
4
  "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
5
5
  "type": "module",
6
6
  "exports": {
@@ -38,6 +38,6 @@
38
38
  "build": "style-dictionary build --config config.js && node config.dark.js && node config.light.js && node config.motion.js && node config.transparency.js",
39
39
  "dev": "style-dictionary build --config config.js --watch",
40
40
  "clean": "rm -rf build",
41
- "test": "node tokens.test.mjs"
41
+ "test": "node tokens.test.mjs && node --test tokens.theme.test.mjs"
42
42
  }
43
43
  }