@prolibu-suite/cobalt-tokens 0.5.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 (8) hide show
  1. package/README.md +5 -3
  2. package/build/css/tokens-dark.css +17 -1
  3. package/build/css/tokens-light.css +17 -1
  4. package/build/css/tokens.css +25 -1
  5. package/build/js/tokens.d.ts +35 -0
  6. package/build/js/tokens.mjs +27 -1
  7. package/build/scss/_tokens.scss +25 -1
  8. package/package.json +3 -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,12 +3,20 @@
3
3
  */
4
4
 
5
5
  [data-theme="dark"] {
6
+ color-scheme: dark;
7
+ --co-semantic-accent: var(--co-color-celeste-600);
8
+ --co-semantic-on-accent: var(--co-color-base-blanco);
6
9
  --co-semantic-surface-primary: var(--co-color-base-blanco);
7
10
  --co-semantic-surface-secondary: var(--co-color-gray-800);
8
11
  --co-semantic-surface-page: var(--co-color-gray-800);
9
- --co-semantic-surface-muted: var(--co-color-gray-600);
12
+ --co-semantic-surface-muted: var(--co-color-gray-650);
10
13
  --co-semantic-surface-hover: var(--co-color-opacity-blanco-8);
11
14
  --co-semantic-surface-disabled: var(--co-color-gray-700);
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);
12
20
  --co-semantic-on-primary: var(--co-color-base-negro);
13
21
  --co-semantic-on-secondary: var(--co-color-base-blanco);
14
22
  --co-semantic-text-default: var(--co-color-base-blanco);
@@ -16,14 +24,22 @@
16
24
  --co-semantic-text-secondary: var(--co-color-gray-400);
17
25
  --co-semantic-text-muted: var(--co-color-gray-500);
18
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);
19
32
  --co-semantic-border-default: var(--co-color-opacity-blanco-16);
20
33
  --co-semantic-border-subtle: var(--co-color-opacity-blanco-8);
21
34
  --co-semantic-border-strong: var(--co-color-opacity-blanco-80);
22
35
  --co-semantic-border-field: var(--co-color-opacity-blanco-25);
23
36
  --co-semantic-border-focus: var(--co-color-opacity-blanco-50);
24
37
  --co-semantic-border-focus-ring: var(--co-color-opacity-blanco-8);
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) */
25
40
  --co-semantic-control-thumb: var(--co-color-base-negro);
26
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) */
27
43
  --co-semantic-status-success: var(--co-color-status-success);
28
44
  --co-semantic-status-error: var(--co-color-status-error);
29
45
  --co-semantic-status-warning: var(--co-color-primary-amarillo);
package/build/css/tokens-light.css CHANGED
@@ -3,29 +3,45 @@
3
3
  */
4
4
 
5
5
  [data-theme="light"] {
6
+ color-scheme: light;
7
+ --co-semantic-accent: var(--co-color-celeste-600);
8
+ --co-semantic-on-accent: var(--co-color-base-blanco);
6
9
  --co-semantic-surface-primary: var(--co-color-base-negro);
7
10
  --co-semantic-surface-secondary: var(--co-color-base-blanco);
8
11
  --co-semantic-surface-page: var(--co-color-base-blanco);
9
12
  --co-semantic-surface-muted: var(--co-color-gray-200);
10
13
  --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
11
14
  --co-semantic-surface-disabled: var(--co-color-gray-100);
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);
12
20
  --co-semantic-on-primary: var(--co-color-base-blanco);
13
21
  --co-semantic-on-secondary: var(--co-color-base-negro);
14
22
  --co-semantic-text-default: var(--co-color-base-negro);
15
23
  --co-semantic-text-inverse: var(--co-color-base-blanco);
16
24
  --co-semantic-text-secondary: var(--co-color-gray-600);
17
- --co-semantic-text-muted: var(--co-color-gray-500);
25
+ --co-semantic-text-muted: var(--co-color-gray-550);
18
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 */
19
32
  --co-semantic-border-default: var(--co-color-opacity-negro-16);
20
33
  --co-semantic-border-subtle: var(--co-color-opacity-negro-8);
21
34
  --co-semantic-border-strong: var(--co-color-opacity-negro-50);
22
35
  --co-semantic-border-field: var(--co-color-opacity-negro-25);
23
36
  --co-semantic-border-focus: var(--co-color-opacity-negro-50);
24
37
  --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
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) */
25
40
  --co-semantic-control-thumb: var(--co-color-base-blanco);
26
41
  --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
27
42
  --co-semantic-status-success: var(--co-color-status-success);
28
43
  --co-semantic-status-error: var(--co-color-status-error);
29
44
  --co-semantic-status-warning: var(--co-color-primary-amarillo);
30
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 */
31
47
  }
package/build/css/tokens.css CHANGED
@@ -19,6 +19,8 @@
19
19
  --co-color-azul-700: #2563eb;
20
20
  --co-color-azul-800: #1d58d8;
21
21
  --co-color-azul-900: #1e408a;
22
+ --co-color-celeste-100: #e5f0ff;
23
+ --co-color-celeste-600: #008ff0;
22
24
  --co-color-rosado-100: #fef1f6;
23
25
  --co-color-rosado-200: #fde6f0;
24
26
  --co-color-rosado-300: #fdcde2;
@@ -54,7 +56,9 @@
54
56
  --co-color-gray-300: #c4c4c4;
55
57
  --co-color-gray-400: #a0a0a0;
56
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) */
57
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) */
58
62
  --co-color-gray-700: #1f1c1b;
59
63
  --co-color-gray-800: #0a0a0a;
60
64
  --co-color-secondary-rosado-100: #d74ba0;
@@ -105,6 +109,10 @@
105
109
  --co-color-status-bg-pending: #f9f1eb;
106
110
  --co-color-status-error: #aa2e1b;
107
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 */
108
116
  --co-color-opacity-negro-4: rgba(31, 28, 27, 0.04);
109
117
  --co-color-opacity-negro-8: rgba(31, 28, 27, 0.08);
110
118
  --co-color-opacity-negro-16: rgba(31, 28, 27, 0.16);
@@ -144,6 +152,7 @@
144
152
  --co-border-radius-6xl: 64px;
145
153
  --co-border-radius-full: 9999px;
146
154
  --co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
155
+ --co-shadow-sm2: 0 1px 2px -1px rgba(26, 26, 26, 0.05), 0 1px 4px -1px rgba(26, 26, 26, 0.05);
147
156
  --co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
148
157
  --co-spacing-xxs: 2px;
149
158
  --co-spacing-xs: 4px;
@@ -211,29 +220,44 @@
211
220
  --co-font-line-height-relaxed: 1.6;
212
221
  --co-font-letter-spacing-body: -0.03em;
213
222
  --co-font-letter-spacing-overline: 0.08em;
223
+ --co-semantic-accent: var(--co-color-celeste-600);
224
+ --co-semantic-on-accent: var(--co-color-base-blanco);
214
225
  --co-semantic-surface-primary: var(--co-color-base-negro);
215
226
  --co-semantic-surface-secondary: var(--co-color-base-blanco);
216
227
  --co-semantic-surface-page: var(--co-color-base-blanco);
217
228
  --co-semantic-surface-muted: var(--co-color-gray-200);
218
229
  --co-semantic-surface-hover: var(--co-color-opacity-negro-8);
219
230
  --co-semantic-surface-disabled: var(--co-color-gray-100);
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);
220
236
  --co-semantic-on-primary: var(--co-color-base-blanco);
221
237
  --co-semantic-on-secondary: var(--co-color-base-negro);
222
238
  --co-semantic-text-default: var(--co-color-base-negro);
223
239
  --co-semantic-text-inverse: var(--co-color-base-blanco);
224
240
  --co-semantic-text-secondary: var(--co-color-gray-600);
225
- --co-semantic-text-muted: var(--co-color-gray-500);
241
+ --co-semantic-text-muted: var(--co-color-gray-550);
226
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 */
227
248
  --co-semantic-border-default: var(--co-color-opacity-negro-16);
228
249
  --co-semantic-border-subtle: var(--co-color-opacity-negro-8);
229
250
  --co-semantic-border-strong: var(--co-color-opacity-negro-50);
230
251
  --co-semantic-border-field: var(--co-color-opacity-negro-25);
231
252
  --co-semantic-border-focus: var(--co-color-opacity-negro-50);
232
253
  --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
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) */
233
256
  --co-semantic-control-thumb: var(--co-color-base-blanco);
234
257
  --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
235
258
  --co-semantic-status-success: var(--co-color-status-success);
236
259
  --co-semantic-status-error: var(--co-color-status-error);
237
260
  --co-semantic-status-warning: var(--co-color-primary-amarillo);
238
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 */
239
263
  }
package/build/js/tokens.d.ts CHANGED
@@ -18,6 +18,8 @@ export const ColorAzul600: string;
18
18
  export const ColorAzul700: string;
19
19
  export const ColorAzul800: string;
20
20
  export const ColorAzul900: string;
21
+ export const ColorCeleste100: string;
22
+ export const ColorCeleste600: string;
21
23
  export const ColorRosado100: string;
22
24
  export const ColorRosado200: string;
23
25
  export const ColorRosado300: string;
@@ -53,7 +55,11 @@ export const ColorGray200: string;
53
55
  export const ColorGray300: string;
54
56
  export const ColorGray400: string;
55
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;
56
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;
57
63
  export const ColorGray700: string;
58
64
  export const ColorGray800: string;
59
65
  export const ColorSecondaryRosado100: string;
@@ -104,6 +110,14 @@ export const ColorStatusPending: string;
104
110
  export const ColorStatusBgPending: string;
105
111
  export const ColorStatusError: string;
106
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;
107
121
  export const ColorOpacityNegro4: string;
108
122
  export const ColorOpacityNegro8: string;
109
123
  export const ColorOpacityNegro16: string;
@@ -142,12 +156,20 @@ export const BorderRadius4xl: string;
142
156
  export const BorderRadius5xl: string;
143
157
  export const BorderRadius6xl: string;
144
158
  export const BorderRadiusFull: string;
159
+ export const SemanticAccent: string;
160
+ export const SemanticOnAccent: string;
145
161
  export const SemanticSurfacePrimary: string;
146
162
  export const SemanticSurfaceSecondary: string;
147
163
  export const SemanticSurfacePage: string;
148
164
  export const SemanticSurfaceMuted: string;
149
165
  export const SemanticSurfaceHover: string;
150
166
  export const SemanticSurfaceDisabled: string;
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;
151
173
  export const SemanticOnPrimary: string;
152
174
  export const SemanticOnSecondary: string;
153
175
  export const SemanticTextDefault: string;
@@ -155,19 +177,32 @@ export const SemanticTextInverse: string;
155
177
  export const SemanticTextSecondary: string;
156
178
  export const SemanticTextMuted: string;
157
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;
158
187
  export const SemanticBorderDefault: string;
159
188
  export const SemanticBorderSubtle: string;
160
189
  export const SemanticBorderStrong: string;
161
190
  export const SemanticBorderField: string;
162
191
  export const SemanticBorderFocus: string;
163
192
  export const SemanticBorderFocusRing: string;
193
+ export const SemanticBorderHairline: string;
194
+ /** Borde de campo con error (el halo sale de color-mix sobre este) */
195
+ export const SemanticBorderError: string;
164
196
  export const SemanticControlThumb: string;
165
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;
166
200
  export const SemanticStatusSuccess: string;
167
201
  export const SemanticStatusError: string;
168
202
  export const SemanticStatusWarning: string;
169
203
  export const SemanticStatusInfo: string;
170
204
  export const ShadowSm: string;
205
+ export const ShadowSm2: string;
171
206
  export const ShadowLg: string;
172
207
  export const SpacingXxs: string;
173
208
  export const SpacingXs: string;
package/build/js/tokens.mjs CHANGED
@@ -18,6 +18,8 @@ export const ColorAzul600 = "#3b76f6";
18
18
  export const ColorAzul700 = "#2563eb";
19
19
  export const ColorAzul800 = "#1d58d8";
20
20
  export const ColorAzul900 = "#1e408a";
21
+ export const ColorCeleste100 = "#e5f0ff";
22
+ export const ColorCeleste600 = "#008ff0";
21
23
  export const ColorRosado100 = "#fef1f6";
22
24
  export const ColorRosado200 = "#fde6f0";
23
25
  export const ColorRosado300 = "#fdcde2";
@@ -53,7 +55,9 @@ export const ColorGray200 = "#e3e3e3";
53
55
  export const ColorGray300 = "#c4c4c4";
54
56
  export const ColorGray400 = "#a0a0a0";
55
57
  export const ColorGray500 = "#888888";
58
+ export const ColorGray550 = "#6b6b6b"; // text-muted en claro: 5.33:1 sobre blanco (gray-500 daba 3.54)
56
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)
57
61
  export const ColorGray700 = "#1f1c1b";
58
62
  export const ColorGray800 = "#0a0a0a";
59
63
  export const ColorSecondaryRosado100 = "#d74ba0";
@@ -104,6 +108,10 @@ export const ColorStatusPending = "#b45103";
104
108
  export const ColorStatusBgPending = "#f9f1eb";
105
109
  export const ColorStatusError = "#aa2e1b";
106
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
107
115
  export const ColorOpacityNegro4 = "rgba(31, 28, 27, 0.04)";
108
116
  export const ColorOpacityNegro8 = "rgba(31, 28, 27, 0.08)";
109
117
  export const ColorOpacityNegro16 = "rgba(31, 28, 27, 0.16)";
@@ -142,32 +150,50 @@ export const BorderRadius4xl = "48px";
142
150
  export const BorderRadius5xl = "56px";
143
151
  export const BorderRadius6xl = "64px";
144
152
  export const BorderRadiusFull = "9999px";
153
+ export const SemanticAccent = "#008ff0";
154
+ export const SemanticOnAccent = "#ffffff";
145
155
  export const SemanticSurfacePrimary = "#1f1c1b";
146
156
  export const SemanticSurfaceSecondary = "#ffffff";
147
157
  export const SemanticSurfacePage = "#ffffff";
148
158
  export const SemanticSurfaceMuted = "#e3e3e3";
149
159
  export const SemanticSurfaceHover = "rgba(31, 28, 27, 0.08)";
150
160
  export const SemanticSurfaceDisabled = "#f6f6f6";
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";
151
166
  export const SemanticOnPrimary = "#ffffff";
152
167
  export const SemanticOnSecondary = "#1f1c1b";
153
168
  export const SemanticTextDefault = "#1f1c1b";
154
169
  export const SemanticTextInverse = "#ffffff";
155
170
  export const SemanticTextSecondary = "#585858";
156
- export const SemanticTextMuted = "#888888";
171
+ export const SemanticTextMuted = "#6b6b6b";
157
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
158
178
  export const SemanticBorderDefault = "rgba(31, 28, 27, 0.16)";
159
179
  export const SemanticBorderSubtle = "rgba(31, 28, 27, 0.08)";
160
180
  export const SemanticBorderStrong = "rgba(31, 28, 27, 0.50)";
161
181
  export const SemanticBorderField = "rgba(31, 28, 27, 0.25)";
162
182
  export const SemanticBorderFocus = "rgba(31, 28, 27, 0.50)";
163
183
  export const SemanticBorderFocusRing = "rgba(31, 28, 27, 0.08)";
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)
164
186
  export const SemanticControlThumb = "#ffffff";
165
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
166
190
  export const SemanticStatusSuccess = "#0a7724";
167
191
  export const SemanticStatusError = "#aa2e1b";
168
192
  export const SemanticStatusWarning = "#fdbf00";
169
193
  export const SemanticStatusInfo = "#2d6cc5";
170
194
  export const ShadowSm = "0 1px 2px 0 rgba(26, 26, 26, 0.04)";
195
+ export const ShadowSm2 =
196
+ "0 1px 2px -1px rgba(26, 26, 26, 0.05), 0 1px 4px -1px rgba(26, 26, 26, 0.05)";
171
197
  export const ShadowLg =
172
198
  "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)";
173
199
  export const SpacingXxs = "2px";
package/build/scss/_tokens.scss CHANGED
@@ -17,6 +17,8 @@ $co-color-azul-600: #3b76f6;
17
17
  $co-color-azul-700: #2563eb;
18
18
  $co-color-azul-800: #1d58d8;
19
19
  $co-color-azul-900: #1e408a;
20
+ $co-color-celeste-100: #e5f0ff;
21
+ $co-color-celeste-600: #008ff0;
20
22
  $co-color-rosado-100: #fef1f6;
21
23
  $co-color-rosado-200: #fde6f0;
22
24
  $co-color-rosado-300: #fdcde2;
@@ -52,7 +54,9 @@ $co-color-gray-200: #e3e3e3;
52
54
  $co-color-gray-300: #c4c4c4;
53
55
  $co-color-gray-400: #a0a0a0;
54
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)
55
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)
56
60
  $co-color-gray-700: #1f1c1b;
57
61
  $co-color-gray-800: #0a0a0a;
58
62
  $co-color-secondary-rosado-100: #d74ba0;
@@ -103,6 +107,10 @@ $co-color-status-pending: #b45103;
103
107
  $co-color-status-bg-pending: #f9f1eb;
104
108
  $co-color-status-error: #aa2e1b;
105
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
106
114
  $co-color-opacity-negro-4: rgba(31, 28, 27, 0.04);
107
115
  $co-color-opacity-negro-8: rgba(31, 28, 27, 0.08);
108
116
  $co-color-opacity-negro-16: rgba(31, 28, 27, 0.16);
@@ -141,32 +149,48 @@ $co-border-radius-4xl: 48px;
141
149
  $co-border-radius-5xl: 56px;
142
150
  $co-border-radius-6xl: 64px;
143
151
  $co-border-radius-full: 9999px;
152
+ $co-semantic-accent: #008ff0;
153
+ $co-semantic-on-accent: #ffffff;
144
154
  $co-semantic-surface-primary: #1f1c1b;
145
155
  $co-semantic-surface-secondary: #ffffff;
146
156
  $co-semantic-surface-page: #ffffff;
147
157
  $co-semantic-surface-muted: #e3e3e3;
148
158
  $co-semantic-surface-hover: rgba(31, 28, 27, 0.08);
149
159
  $co-semantic-surface-disabled: #f6f6f6;
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;
150
165
  $co-semantic-on-primary: #ffffff;
151
166
  $co-semantic-on-secondary: #1f1c1b;
152
167
  $co-semantic-text-default: #1f1c1b;
153
168
  $co-semantic-text-inverse: #ffffff;
154
169
  $co-semantic-text-secondary: #585858;
155
- $co-semantic-text-muted: #888888;
170
+ $co-semantic-text-muted: #6b6b6b;
156
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
157
177
  $co-semantic-border-default: rgba(31, 28, 27, 0.16);
158
178
  $co-semantic-border-subtle: rgba(31, 28, 27, 0.08);
159
179
  $co-semantic-border-strong: rgba(31, 28, 27, 0.50);
160
180
  $co-semantic-border-field: rgba(31, 28, 27, 0.25);
161
181
  $co-semantic-border-focus: rgba(31, 28, 27, 0.50);
162
182
  $co-semantic-border-focus-ring: rgba(31, 28, 27, 0.08);
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)
163
185
  $co-semantic-control-thumb: #ffffff;
164
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
165
188
  $co-semantic-status-success: #0a7724;
166
189
  $co-semantic-status-error: #aa2e1b;
167
190
  $co-semantic-status-warning: #fdbf00;
168
191
  $co-semantic-status-info: #2d6cc5;
169
192
  $co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
193
+ $co-shadow-sm2: 0 1px 2px -1px rgba(26, 26, 26, 0.05), 0 1px 4px -1px rgba(26, 26, 26, 0.05);
170
194
  $co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
171
195
  $co-spacing-xxs: 2px;
172
196
  $co-spacing-xs: 4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prolibu-suite/cobalt-tokens",
3
- "version": "0.5.0",
3
+ "version": "0.6.1",
4
4
  "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
5
5
  "type": "module",
6
6
  "exports": {
@@ -37,6 +37,7 @@
37
37
  "scripts": {
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
- "clean": "rm -rf build"
40
+ "clean": "rm -rf build",
41
+ "test": "node tokens.test.mjs && node --test tokens.theme.test.mjs"
41
42
  }
42
43
  }