@prolibu-suite/cobalt-tokens 0.1.1 → 0.2.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 (6) hide show
  1. package/README.md +5 -3
  2. package/build/css/tokens.css +8 -0
  3. package/build/js/tokens.d.ts +8 -0
  4. package/build/js/tokens.mjs +8 -0
  5. package/build/scss/_tokens.scss +8 -0
  6. 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.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;
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;
@@ -151,6 +155,7 @@ export const SemanticStatusSuccess: string;
151
155
  export const SemanticStatusError: string;
152
156
  export const SemanticStatusWarning: string;
153
157
  export const SemanticStatusInfo: string;
158
+ export const ShadowSm: string;
154
159
  export const ShadowLg: string;
155
160
  export const SpacingXxs: string;
156
161
  export const SpacingXs: string;
@@ -176,7 +181,9 @@ export const SpacingFull: string;
176
181
  export const FontFamilyPrimary: string;
177
182
  export const FontFamilyMono: string;
178
183
  export const FontSize10: string;
184
+ export const FontSize11: string;
179
185
  export const FontSize12: string;
186
+ export const FontSize13: string;
180
187
  export const FontSize14: string;
181
188
  export const FontSize16: string;
182
189
  export const FontSize18: string;
@@ -184,6 +191,7 @@ export const FontSize20: string;
184
191
  export const FontSize22: string;
185
192
  export const FontSize24: string;
186
193
  export const FontSize26: string;
194
+ export const FontSize28: string;
187
195
  export const FontSize30: string;
188
196
  export const FontSize32: string;
189
197
  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";
@@ -151,6 +155,7 @@ export const SemanticStatusSuccess = "#0a7724";
151
155
  export const SemanticStatusError = "#aa2e1b";
152
156
  export const SemanticStatusWarning = "#fdbf00";
153
157
  export const SemanticStatusInfo = "#2d6cc5";
158
+ export const ShadowSm = "0 1px 2px 0 rgba(26, 26, 26, 0.04)";
154
159
  export const ShadowLg =
155
160
  "0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05)";
156
161
  export const SpacingXxs = "2px";
@@ -179,7 +184,9 @@ export const FontFamilyPrimary =
179
184
  export const FontFamilyMono =
180
185
  "'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace";
181
186
  export const FontSize10 = "10px";
187
+ export const FontSize11 = "11px";
182
188
  export const FontSize12 = "12px";
189
+ export const FontSize13 = "13px";
183
190
  export const FontSize14 = "14px";
184
191
  export const FontSize16 = "16px";
185
192
  export const FontSize18 = "18px";
@@ -187,6 +194,7 @@ export const FontSize20 = "20px";
187
194
  export const FontSize22 = "22px";
188
195
  export const FontSize24 = "24px";
189
196
  export const FontSize26 = "26px";
197
+ export const FontSize28 = "28px";
190
198
  export const FontSize30 = "30px";
191
199
  export const FontSize32 = "32px";
192
200
  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;
@@ -150,6 +154,7 @@ $co-semantic-status-success: #0a7724;
150
154
  $co-semantic-status-error: #aa2e1b;
151
155
  $co-semantic-status-warning: #fdbf00;
152
156
  $co-semantic-status-info: #2d6cc5;
157
+ $co-shadow-sm: 0 1px 2px 0 rgba(26, 26, 26, 0.04);
153
158
  $co-shadow-lg: 0 10px 15px -3px rgba(26, 26, 26, 0.05), 0 4px 6px -4px rgba(26, 26, 26, 0.05);
154
159
  $co-spacing-xxs: 2px;
155
160
  $co-spacing-xs: 4px;
@@ -175,7 +180,9 @@ $co-spacing-full: 9999px;
175
180
  $co-font-family-primary: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
176
181
  $co-font-family-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
177
182
  $co-font-size-10: 10px;
183
+ $co-font-size-11: 11px;
178
184
  $co-font-size-12: 12px;
185
+ $co-font-size-13: 13px;
179
186
  $co-font-size-14: 14px;
180
187
  $co-font-size-16: 16px;
181
188
  $co-font-size-18: 18px;
@@ -183,6 +190,7 @@ $co-font-size-20: 20px;
183
190
  $co-font-size-22: 22px;
184
191
  $co-font-size-24: 24px;
185
192
  $co-font-size-26: 26px;
193
+ $co-font-size-28: 28px;
186
194
  $co-font-size-30: 30px;
187
195
  $co-font-size-32: 32px;
188
196
  $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.2.0",
4
4
  "description": "Cobalt Design System Tokens — CSS, SCSS, JS/TS",
5
5
  "type": "module",
6
6
  "exports": {