@prolibu-suite/cobalt-tokens 0.1.1 → 0.3.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.
Files changed (7) hide show
  1. package/README.md +5 -3
  2. package/build/css/tokens-dark.css +2 -1
  3. package/build/css/tokens.css +10 -1
  4. package/build/js/tokens.d.ts +9 -0
  5. package/build/js/tokens.mjs +10 -1
  6. package/build/scss/_tokens.scss +10 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -16,10 +16,10 @@ pnpm add @prolibu-suite/cobalt-tokens
16
16
 
17
17
  ```css
18
18
  @import '@prolibu-suite/cobalt-tokens/css'; /* tema claro */
19
- @import '@prolibu-suite/cobalt-tokens/css/dark'; /* tokens dark mode (auto via prefers-color-scheme) */
19
+ @import '@prolibu-suite/cobalt-tokens/css/dark'; /* tokens dark mode (se activan con data-theme="dark" en el elemento raíz, ej. <html data-theme="dark">) */
20
20
 
21
21
  .miCard {
22
- background: var(--co-semantic-surface-primary);
22
+ background: var(--co-semantic-surface-page);
23
23
  color: var(--co-semantic-text-default);
24
24
  padding: var(--co-spacing-lg);
25
25
  border-radius: var(--co-border-radius-sm);
@@ -35,7 +35,9 @@ pnpm add @prolibu-suite/cobalt-tokens
35
35
  ### JS / TS
36
36
 
37
37
  ```ts
38
- import { tokens } from '@prolibu-suite/cobalt-tokens';
38
+ import { ColorPrimaryAzul, ColorPrimaryVerde } from '@prolibu-suite/cobalt-tokens';
39
+ // o como namespace:
40
+ import * as tokens from '@prolibu-suite/cobalt-tokens';
39
41
  ```
40
42
 
41
43
  ## Sin build · vía CDN
package/build/css/tokens-dark.css CHANGED
@@ -19,7 +19,8 @@
19
19
  --co-semantic-border-default: var(--co-color-opacity-blanco-16);
20
20
  --co-semantic-border-subtle: var(--co-color-opacity-blanco-8);
21
21
  --co-semantic-border-strong: var(--co-color-opacity-blanco-80);
22
- --co-semantic-border-focus: var(--co-color-opacity-blanco-16);
22
+ --co-semantic-border-field: var(--co-color-opacity-blanco-25);
23
+ --co-semantic-border-focus: var(--co-color-opacity-blanco-50);
23
24
  --co-semantic-border-focus-ring: var(--co-color-opacity-blanco-8);
24
25
  --co-semantic-control-thumb: var(--co-color-base-negro);
25
26
  --co-semantic-control-shadow: var(--co-color-opacity-blanco-16);
package/build/css/tokens.css CHANGED
@@ -117,9 +117,13 @@
117
117
  --co-color-opacity-blanco-25: rgba(255, 255, 255, 0.25);
118
118
  --co-color-opacity-blanco-50: rgba(255, 255, 255, 0.50);
119
119
  --co-color-opacity-blanco-80: rgba(255, 255, 255, 0.80);
120
+ --co-glass-blur: 12px;
121
+ --co-glass-saturate: 1.3;
122
+ --co-glass-panel-blur: 18px;
120
123
  --co-border-radius-xxs: 4px;
121
124
  --co-border-radius-xs: 8px;
122
125
  --co-border-radius-sm: 12px;
126
+ --co-border-radius-md: 14px;
123
127
  --co-border-radius-lg: 16px;
124
128
  --co-border-radius-xl: 24px;
125
129
  --co-border-radius-2xl: 32px;
@@ -128,6 +132,7 @@
128
132
  --co-border-radius-5xl: 56px;
129
133
  --co-border-radius-6xl: 64px;
130
134
  --co-border-radius-full: 9999px;
135
+ --co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
131
136
  --co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
132
137
  --co-spacing-xxs: 2px;
133
138
  --co-spacing-xs: 4px;
@@ -153,7 +158,9 @@
153
158
  --co-font-family-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
154
159
  --co-font-family-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
155
160
  --co-font-size-10: 10px;
161
+ --co-font-size-11: 11px;
156
162
  --co-font-size-12: 12px;
163
+ --co-font-size-13: 13px;
157
164
  --co-font-size-14: 14px;
158
165
  --co-font-size-16: 16px;
159
166
  --co-font-size-18: 18px;
@@ -161,6 +168,7 @@
161
168
  --co-font-size-22: 22px;
162
169
  --co-font-size-24: 24px;
163
170
  --co-font-size-26: 26px;
171
+ --co-font-size-28: 28px;
164
172
  --co-font-size-30: 30px;
165
173
  --co-font-size-32: 32px;
166
174
  --co-font-size-36: 36px;
@@ -208,7 +216,8 @@
208
216
  --co-semantic-border-default: var(--co-color-opacity-negro-16);
209
217
  --co-semantic-border-subtle: var(--co-color-opacity-negro-8);
210
218
  --co-semantic-border-strong: var(--co-color-opacity-negro-50);
211
- --co-semantic-border-focus: var(--co-color-opacity-negro-25);
219
+ --co-semantic-border-field: var(--co-color-opacity-negro-25);
220
+ --co-semantic-border-focus: var(--co-color-opacity-negro-50);
212
221
  --co-semantic-border-focus-ring: var(--co-color-opacity-negro-8);
213
222
  --co-semantic-control-thumb: var(--co-color-base-blanco);
214
223
  --co-semantic-control-shadow: var(--co-color-opacity-negro-16);
package/build/js/tokens.d.ts CHANGED
@@ -116,9 +116,13 @@ export const ColorOpacityBlanco16: string;
116
116
  export const ColorOpacityBlanco25: string;
117
117
  export const ColorOpacityBlanco50: string;
118
118
  export const ColorOpacityBlanco80: string;
119
+ export const GlassBlur: string;
120
+ export const GlassSaturate: string;
121
+ export const GlassPanelBlur: string;
119
122
  export const BorderRadiusXxs: string;
120
123
  export const BorderRadiusXs: string;
121
124
  export const BorderRadiusSm: string;
125
+ export const BorderRadiusMd: string;
122
126
  export const BorderRadiusLg: string;
123
127
  export const BorderRadiusXl: string;
124
128
  export const BorderRadius2xl: string;
@@ -143,6 +147,7 @@ export const SemanticTextDisabled: string;
143
147
  export const SemanticBorderDefault: string;
144
148
  export const SemanticBorderSubtle: string;
145
149
  export const SemanticBorderStrong: string;
150
+ export const SemanticBorderField: string;
146
151
  export const SemanticBorderFocus: string;
147
152
  export const SemanticBorderFocusRing: string;
148
153
  export const SemanticControlThumb: string;
@@ -151,6 +156,7 @@ export const SemanticStatusSuccess: string;
151
156
  export const SemanticStatusError: string;
152
157
  export const SemanticStatusWarning: string;
153
158
  export const SemanticStatusInfo: string;
159
+ export const ShadowSm: string;
154
160
  export const ShadowLg: string;
155
161
  export const SpacingXxs: string;
156
162
  export const SpacingXs: string;
@@ -176,7 +182,9 @@ export const SpacingFull: string;
176
182
  export const FontFamilyPrimary: string;
177
183
  export const FontFamilyMono: string;
178
184
  export const FontSize10: string;
185
+ export const FontSize11: string;
179
186
  export const FontSize12: string;
187
+ export const FontSize13: string;
180
188
  export const FontSize14: string;
181
189
  export const FontSize16: string;
182
190
  export const FontSize18: string;
@@ -184,6 +192,7 @@ export const FontSize20: string;
184
192
  export const FontSize22: string;
185
193
  export const FontSize24: string;
186
194
  export const FontSize26: string;
195
+ export const FontSize28: string;
187
196
  export const FontSize30: string;
188
197
  export const FontSize32: string;
189
198
  export const FontSize36: string;
package/build/js/tokens.mjs CHANGED
@@ -116,9 +116,13 @@ export const ColorOpacityBlanco16 = "rgba(255, 255, 255, 0.16)";
116
116
  export const ColorOpacityBlanco25 = "rgba(255, 255, 255, 0.25)";
117
117
  export const ColorOpacityBlanco50 = "rgba(255, 255, 255, 0.50)";
118
118
  export const ColorOpacityBlanco80 = "rgba(255, 255, 255, 0.80)";
119
+ export const GlassBlur = "12px";
120
+ export const GlassSaturate = "1.3";
121
+ export const GlassPanelBlur = "18px";
119
122
  export const BorderRadiusXxs = "4px";
120
123
  export const BorderRadiusXs = "8px";
121
124
  export const BorderRadiusSm = "12px";
125
+ export const BorderRadiusMd = "14px";
122
126
  export const BorderRadiusLg = "16px";
123
127
  export const BorderRadiusXl = "24px";
124
128
  export const BorderRadius2xl = "32px";
@@ -143,7 +147,8 @@ export const SemanticTextDisabled = "#a0a0a0";
143
147
  export const SemanticBorderDefault = "rgba(31, 28, 27, 0.16)";
144
148
  export const SemanticBorderSubtle = "rgba(31, 28, 27, 0.08)";
145
149
  export const SemanticBorderStrong = "rgba(31, 28, 27, 0.50)";
146
- export const SemanticBorderFocus = "rgba(31, 28, 27, 0.25)";
150
+ export const SemanticBorderField = "rgba(31, 28, 27, 0.25)";
151
+ export const SemanticBorderFocus = "rgba(31, 28, 27, 0.50)";
147
152
  export const SemanticBorderFocusRing = "rgba(31, 28, 27, 0.08)";
148
153
  export const SemanticControlThumb = "#ffffff";
149
154
  export const SemanticControlShadow = "rgba(31, 28, 27, 0.16)";
@@ -151,6 +156,7 @@ export const SemanticStatusSuccess = "#0a7724";
151
156
  export const SemanticStatusError = "#aa2e1b";
152
157
  export const SemanticStatusWarning = "#fdbf00";
153
158
  export const SemanticStatusInfo = "#2d6cc5";
159
+ export const ShadowSm = "0 1px 2px 0 rgba(26, 26, 26, 0.04)";
154
160
  export const ShadowLg =
155
161
  "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)";
156
162
  export const SpacingXxs = "2px";
@@ -179,7 +185,9 @@ export const FontFamilyPrimary =
179
185
  export const FontFamilyMono =
180
186
  "'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace";
181
187
  export const FontSize10 = "10px";
188
+ export const FontSize11 = "11px";
182
189
  export const FontSize12 = "12px";
190
+ export const FontSize13 = "13px";
183
191
  export const FontSize14 = "14px";
184
192
  export const FontSize16 = "16px";
185
193
  export const FontSize18 = "18px";
@@ -187,6 +195,7 @@ export const FontSize20 = "20px";
187
195
  export const FontSize22 = "22px";
188
196
  export const FontSize24 = "24px";
189
197
  export const FontSize26 = "26px";
198
+ export const FontSize28 = "28px";
190
199
  export const FontSize30 = "30px";
191
200
  export const FontSize32 = "32px";
192
201
  export const FontSize36 = "36px";
package/build/scss/_tokens.scss CHANGED
@@ -115,9 +115,13 @@ $co-color-opacity-blanco-16: rgba(255, 255, 255, 0.16);
115
115
  $co-color-opacity-blanco-25: rgba(255, 255, 255, 0.25);
116
116
  $co-color-opacity-blanco-50: rgba(255, 255, 255, 0.50);
117
117
  $co-color-opacity-blanco-80: rgba(255, 255, 255, 0.80);
118
+ $co-glass-blur: 12px;
119
+ $co-glass-saturate: 1.3;
120
+ $co-glass-panel-blur: 18px;
118
121
  $co-border-radius-xxs: 4px;
119
122
  $co-border-radius-xs: 8px;
120
123
  $co-border-radius-sm: 12px;
124
+ $co-border-radius-md: 14px;
121
125
  $co-border-radius-lg: 16px;
122
126
  $co-border-radius-xl: 24px;
123
127
  $co-border-radius-2xl: 32px;
@@ -142,7 +146,8 @@ $co-semantic-text-disabled: #a0a0a0;
142
146
  $co-semantic-border-default: rgba(31, 28, 27, 0.16);
143
147
  $co-semantic-border-subtle: rgba(31, 28, 27, 0.08);
144
148
  $co-semantic-border-strong: rgba(31, 28, 27, 0.50);
145
- $co-semantic-border-focus: rgba(31, 28, 27, 0.25);
149
+ $co-semantic-border-field: rgba(31, 28, 27, 0.25);
150
+ $co-semantic-border-focus: rgba(31, 28, 27, 0.50);
146
151
  $co-semantic-border-focus-ring: rgba(31, 28, 27, 0.08);
147
152
  $co-semantic-control-thumb: #ffffff;
148
153
  $co-semantic-control-shadow: rgba(31, 28, 27, 0.16);
@@ -150,6 +155,7 @@ $co-semantic-status-success: #0a7724;
150
155
  $co-semantic-status-error: #aa2e1b;
151
156
  $co-semantic-status-warning: #fdbf00;
152
157
  $co-semantic-status-info: #2d6cc5;
158
+ $co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
153
159
  $co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
154
160
  $co-spacing-xxs: 2px;
155
161
  $co-spacing-xs: 4px;
@@ -175,7 +181,9 @@ $co-spacing-full: 9999px;
175
181
  $co-font-family-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
176
182
  $co-font-family-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
177
183
  $co-font-size-10: 10px;
184
+ $co-font-size-11: 11px;
178
185
  $co-font-size-12: 12px;
186
+ $co-font-size-13: 13px;
179
187
  $co-font-size-14: 14px;
180
188
  $co-font-size-16: 16px;
181
189
  $co-font-size-18: 18px;
@@ -183,6 +191,7 @@ $co-font-size-20: 20px;
183
191
  $co-font-size-22: 22px;
184
192
  $co-font-size-24: 24px;
185
193
  $co-font-size-26: 26px;
194
+ $co-font-size-28: 28px;
186
195
  $co-font-size-30: 30px;
187
196
  $co-font-size-32: 32px;
188
197
  $co-font-size-36: 36px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prolibu-suite/cobalt-tokens",
3
- "version": "0.1.1",
3
+ "version": "0.3.0",
4
4
  "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
5
5
  "type": "module",
6
6
  "exports": {