@robosophy/tokens 1.0.10 → 1.0.11

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.
@@ -76,6 +76,14 @@ import tokensJson from "@robosophy/tokens/tokens.json";
76
76
  - `--rs-color-background-info`: `var(--rs-color-blue-100)`
77
77
  - `--rs-color-surface-primary`: `var(--rs-color-white-500)`
78
78
  - `--rs-color-surface-tertiary`: `var(--rs-color-black-500)`
79
+ - `--rs-color-surface-bg-primary`: `var(--rs-color-white-500)`
80
+ - `--rs-color-surface-bg-active`: `var(--rs-color-gray-300)`
81
+ - `--rs-color-surface-bg-hover`: `var(--rs-color-gray-300)`
82
+ - `--rs-color-surface-bg-secondary`: `var(--rs-color-gray-100)`
83
+ - `--rs-color-surface-bg-brand-blue`: `var(--rs-color-blue-100)`
84
+ - `--rs-color-surface-bg-brand-green`: `var(--rs-color-green-100)`
85
+ - `--rs-color-surface-bg-brand-red`: `var(--rs-color-red-100)`
86
+ - `--rs-color-surface-bg-brand-yellow`: `var(--rs-color-yellow-100)`
79
87
  - `--rs-color-text-primary`: `var(--rs-color-black-500)`
80
88
  - `--rs-color-text-secondary`: `var(--rs-color-gray-700)`
81
89
  - `--rs-color-text-brand`: `var(--rs-color-blue-500)`
package/dist/index.d.ts CHANGED
@@ -38,6 +38,14 @@ export declare const tokens: {
38
38
  readonly "color-background-info": "var(--rs-color-blue-100)";
39
39
  readonly "color-surface-primary": "var(--rs-color-white-500)";
40
40
  readonly "color-surface-tertiary": "var(--rs-color-black-500)";
41
+ readonly "color-surface-bg-primary": "var(--rs-color-white-500)";
42
+ readonly "color-surface-bg-active": "var(--rs-color-gray-300)";
43
+ readonly "color-surface-bg-hover": "var(--rs-color-gray-300)";
44
+ readonly "color-surface-bg-secondary": "var(--rs-color-gray-100)";
45
+ readonly "color-surface-bg-brand-blue": "var(--rs-color-blue-100)";
46
+ readonly "color-surface-bg-brand-green": "var(--rs-color-green-100)";
47
+ readonly "color-surface-bg-brand-red": "var(--rs-color-red-100)";
48
+ readonly "color-surface-bg-brand-yellow": "var(--rs-color-yellow-100)";
41
49
  readonly "color-text-primary": "var(--rs-color-black-500)";
42
50
  readonly "color-text-secondary": "var(--rs-color-gray-700)";
43
51
  readonly "color-text-brand": "var(--rs-color-blue-500)";
package/dist/index.js CHANGED
@@ -38,6 +38,14 @@ export const tokens = {
38
38
  "color-background-info": "var(--rs-color-blue-100)",
39
39
  "color-surface-primary": "var(--rs-color-white-500)",
40
40
  "color-surface-tertiary": "var(--rs-color-black-500)",
41
+ "color-surface-bg-primary": "var(--rs-color-white-500)",
42
+ "color-surface-bg-active": "var(--rs-color-gray-300)",
43
+ "color-surface-bg-hover": "var(--rs-color-gray-300)",
44
+ "color-surface-bg-secondary": "var(--rs-color-gray-100)",
45
+ "color-surface-bg-brand-blue": "var(--rs-color-blue-100)",
46
+ "color-surface-bg-brand-green": "var(--rs-color-green-100)",
47
+ "color-surface-bg-brand-red": "var(--rs-color-red-100)",
48
+ "color-surface-bg-brand-yellow": "var(--rs-color-yellow-100)",
41
49
  "color-text-primary": "var(--rs-color-black-500)",
42
50
  "color-text-secondary": "var(--rs-color-gray-700)",
43
51
  "color-text-brand": "var(--rs-color-blue-500)",
@@ -41,6 +41,14 @@ const preset = {
41
41
  "background-info": "var(--rs-color-background-info)",
42
42
  "surface-primary": "var(--rs-color-surface-primary)",
43
43
  "surface-tertiary": "var(--rs-color-surface-tertiary)",
44
+ "surface-bg-primary": "var(--rs-color-surface-bg-primary)",
45
+ "surface-bg-active": "var(--rs-color-surface-bg-active)",
46
+ "surface-bg-hover": "var(--rs-color-surface-bg-hover)",
47
+ "surface-bg-secondary": "var(--rs-color-surface-bg-secondary)",
48
+ "surface-bg-brand-blue": "var(--rs-color-surface-bg-brand-blue)",
49
+ "surface-bg-brand-green": "var(--rs-color-surface-bg-brand-green)",
50
+ "surface-bg-brand-red": "var(--rs-color-surface-bg-brand-red)",
51
+ "surface-bg-brand-yellow": "var(--rs-color-surface-bg-brand-yellow)",
44
52
  "text-primary": "var(--rs-color-text-primary)",
45
53
  "text-secondary": "var(--rs-color-text-secondary)",
46
54
  "text-brand": "var(--rs-color-text-brand)",
package/dist/tailwind.css CHANGED
@@ -38,6 +38,14 @@
38
38
  --color-rs-background-info: var(--rs-color-background-info);
39
39
  --color-rs-surface-primary: var(--rs-color-surface-primary);
40
40
  --color-rs-surface-tertiary: var(--rs-color-surface-tertiary);
41
+ --color-rs-surface-bg-primary: var(--rs-color-surface-bg-primary);
42
+ --color-rs-surface-bg-active: var(--rs-color-surface-bg-active);
43
+ --color-rs-surface-bg-hover: var(--rs-color-surface-bg-hover);
44
+ --color-rs-surface-bg-secondary: var(--rs-color-surface-bg-secondary);
45
+ --color-rs-surface-bg-brand-blue: var(--rs-color-surface-bg-brand-blue);
46
+ --color-rs-surface-bg-brand-green: var(--rs-color-surface-bg-brand-green);
47
+ --color-rs-surface-bg-brand-red: var(--rs-color-surface-bg-brand-red);
48
+ --color-rs-surface-bg-brand-yellow: var(--rs-color-surface-bg-brand-yellow);
41
49
  --color-rs-text-primary: var(--rs-color-text-primary);
42
50
  --color-rs-text-secondary: var(--rs-color-text-secondary);
43
51
  --color-rs-text-brand: var(--rs-color-text-brand);
package/dist/tokens.css CHANGED
@@ -38,6 +38,14 @@
38
38
  --rs-color-background-info: var(--rs-color-blue-100);
39
39
  --rs-color-surface-primary: var(--rs-color-white-500);
40
40
  --rs-color-surface-tertiary: var(--rs-color-black-500);
41
+ --rs-color-surface-bg-primary: var(--rs-color-white-500);
42
+ --rs-color-surface-bg-active: var(--rs-color-gray-300);
43
+ --rs-color-surface-bg-hover: var(--rs-color-gray-300);
44
+ --rs-color-surface-bg-secondary: var(--rs-color-gray-100);
45
+ --rs-color-surface-bg-brand-blue: var(--rs-color-blue-100);
46
+ --rs-color-surface-bg-brand-green: var(--rs-color-green-100);
47
+ --rs-color-surface-bg-brand-red: var(--rs-color-red-100);
48
+ --rs-color-surface-bg-brand-yellow: var(--rs-color-yellow-100);
41
49
  --rs-color-text-primary: var(--rs-color-black-500);
42
50
  --rs-color-text-secondary: var(--rs-color-gray-700);
43
51
  --rs-color-text-brand: var(--rs-color-blue-500);
@@ -147,6 +155,14 @@
147
155
  --color-background-info: var(--rs-color-background-info);
148
156
  --color-surface-primary: var(--rs-color-surface-primary);
149
157
  --color-surface-tertiary: var(--rs-color-surface-tertiary);
158
+ --color-surface-bg-primary: var(--rs-color-surface-bg-primary);
159
+ --color-surface-bg-active: var(--rs-color-surface-bg-active);
160
+ --color-surface-bg-hover: var(--rs-color-surface-bg-hover);
161
+ --color-surface-bg-secondary: var(--rs-color-surface-bg-secondary);
162
+ --color-surface-bg-brand-blue: var(--rs-color-surface-bg-brand-blue);
163
+ --color-surface-bg-brand-green: var(--rs-color-surface-bg-brand-green);
164
+ --color-surface-bg-brand-red: var(--rs-color-surface-bg-brand-red);
165
+ --color-surface-bg-brand-yellow: var(--rs-color-surface-bg-brand-yellow);
150
166
  --color-text-primary: var(--rs-color-text-primary);
151
167
  --color-text-secondary: var(--rs-color-text-secondary);
152
168
  --color-text-brand: var(--rs-color-text-brand);
package/dist/tokens.html CHANGED
@@ -45,6 +45,14 @@
45
45
  --rs-color-background-info: var(--rs-color-blue-100);
46
46
  --rs-color-surface-primary: var(--rs-color-white-500);
47
47
  --rs-color-surface-tertiary: var(--rs-color-black-500);
48
+ --rs-color-surface-bg-primary: var(--rs-color-white-500);
49
+ --rs-color-surface-bg-active: var(--rs-color-gray-300);
50
+ --rs-color-surface-bg-hover: var(--rs-color-gray-300);
51
+ --rs-color-surface-bg-secondary: var(--rs-color-gray-100);
52
+ --rs-color-surface-bg-brand-blue: var(--rs-color-blue-100);
53
+ --rs-color-surface-bg-brand-green: var(--rs-color-green-100);
54
+ --rs-color-surface-bg-brand-red: var(--rs-color-red-100);
55
+ --rs-color-surface-bg-brand-yellow: var(--rs-color-yellow-100);
48
56
  --rs-color-text-primary: var(--rs-color-black-500);
49
57
  --rs-color-text-secondary: var(--rs-color-gray-700);
50
58
  --rs-color-text-brand: var(--rs-color-blue-500);
@@ -457,6 +465,54 @@
457
465
  <td><code>var(--rs-color-black-500)</code></td>
458
466
  <td></td>
459
467
  </tr>
468
+ <tr>
469
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-primary);"></span><code>color-surface-bg-primary</code></td>
470
+ <td><code>--rs-color-surface-bg-primary</code></td>
471
+ <td><code>var(--rs-color-white-500)</code></td>
472
+ <td></td>
473
+ </tr>
474
+ <tr>
475
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-active);"></span><code>color-surface-bg-active</code></td>
476
+ <td><code>--rs-color-surface-bg-active</code></td>
477
+ <td><code>var(--rs-color-gray-300)</code></td>
478
+ <td></td>
479
+ </tr>
480
+ <tr>
481
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-hover);"></span><code>color-surface-bg-hover</code></td>
482
+ <td><code>--rs-color-surface-bg-hover</code></td>
483
+ <td><code>var(--rs-color-gray-300)</code></td>
484
+ <td></td>
485
+ </tr>
486
+ <tr>
487
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-secondary);"></span><code>color-surface-bg-secondary</code></td>
488
+ <td><code>--rs-color-surface-bg-secondary</code></td>
489
+ <td><code>var(--rs-color-gray-100)</code></td>
490
+ <td></td>
491
+ </tr>
492
+ <tr>
493
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-brand-blue);"></span><code>color-surface-bg-brand-blue</code></td>
494
+ <td><code>--rs-color-surface-bg-brand-blue</code></td>
495
+ <td><code>var(--rs-color-blue-100)</code></td>
496
+ <td></td>
497
+ </tr>
498
+ <tr>
499
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-brand-green);"></span><code>color-surface-bg-brand-green</code></td>
500
+ <td><code>--rs-color-surface-bg-brand-green</code></td>
501
+ <td><code>var(--rs-color-green-100)</code></td>
502
+ <td></td>
503
+ </tr>
504
+ <tr>
505
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-brand-red);"></span><code>color-surface-bg-brand-red</code></td>
506
+ <td><code>--rs-color-surface-bg-brand-red</code></td>
507
+ <td><code>var(--rs-color-red-100)</code></td>
508
+ <td></td>
509
+ </tr>
510
+ <tr>
511
+ <td><span class="swatch" style="background: var(--rs-color-surface-bg-brand-yellow);"></span><code>color-surface-bg-brand-yellow</code></td>
512
+ <td><code>--rs-color-surface-bg-brand-yellow</code></td>
513
+ <td><code>var(--rs-color-yellow-100)</code></td>
514
+ <td></td>
515
+ </tr>
460
516
  <tr>
461
517
  <td><span class="swatch" style="background: var(--rs-color-text-primary);"></span><code>color-text-primary</code></td>
462
518
  <td><code>--rs-color-text-primary</code></td>
package/dist/tokens.json CHANGED
@@ -197,6 +197,46 @@
197
197
  "value": "var(--rs-color-black-500)",
198
198
  "type": "color"
199
199
  },
200
+ "color-surface-bg-primary": {
201
+ "cssVariable": "--rs-color-surface-bg-primary",
202
+ "value": "var(--rs-color-white-500)",
203
+ "type": "color"
204
+ },
205
+ "color-surface-bg-active": {
206
+ "cssVariable": "--rs-color-surface-bg-active",
207
+ "value": "var(--rs-color-gray-300)",
208
+ "type": "color"
209
+ },
210
+ "color-surface-bg-hover": {
211
+ "cssVariable": "--rs-color-surface-bg-hover",
212
+ "value": "var(--rs-color-gray-300)",
213
+ "type": "color"
214
+ },
215
+ "color-surface-bg-secondary": {
216
+ "cssVariable": "--rs-color-surface-bg-secondary",
217
+ "value": "var(--rs-color-gray-100)",
218
+ "type": "color"
219
+ },
220
+ "color-surface-bg-brand-blue": {
221
+ "cssVariable": "--rs-color-surface-bg-brand-blue",
222
+ "value": "var(--rs-color-blue-100)",
223
+ "type": "color"
224
+ },
225
+ "color-surface-bg-brand-green": {
226
+ "cssVariable": "--rs-color-surface-bg-brand-green",
227
+ "value": "var(--rs-color-green-100)",
228
+ "type": "color"
229
+ },
230
+ "color-surface-bg-brand-red": {
231
+ "cssVariable": "--rs-color-surface-bg-brand-red",
232
+ "value": "var(--rs-color-red-100)",
233
+ "type": "color"
234
+ },
235
+ "color-surface-bg-brand-yellow": {
236
+ "cssVariable": "--rs-color-surface-bg-brand-yellow",
237
+ "value": "var(--rs-color-yellow-100)",
238
+ "type": "color"
239
+ },
200
240
  "color-text-primary": {
201
241
  "cssVariable": "--rs-color-text-primary",
202
242
  "value": "var(--rs-color-black-500)",
package/dist/tokens.md CHANGED
@@ -46,6 +46,14 @@ Public CSS variables use the `--rs-` prefix. Import `@robosophy/tokens/tokens.cs
46
46
  | `color-background-info` | `--rs-color-background-info` | `var(--rs-color-blue-100)` | |
47
47
  | `color-surface-primary` | `--rs-color-surface-primary` | `var(--rs-color-white-500)` | |
48
48
  | `color-surface-tertiary` | `--rs-color-surface-tertiary` | `var(--rs-color-black-500)` | |
49
+ | `color-surface-bg-primary` | `--rs-color-surface-bg-primary` | `var(--rs-color-white-500)` | |
50
+ | `color-surface-bg-active` | `--rs-color-surface-bg-active` | `var(--rs-color-gray-300)` | |
51
+ | `color-surface-bg-hover` | `--rs-color-surface-bg-hover` | `var(--rs-color-gray-300)` | |
52
+ | `color-surface-bg-secondary` | `--rs-color-surface-bg-secondary` | `var(--rs-color-gray-100)` | |
53
+ | `color-surface-bg-brand-blue` | `--rs-color-surface-bg-brand-blue` | `var(--rs-color-blue-100)` | |
54
+ | `color-surface-bg-brand-green` | `--rs-color-surface-bg-brand-green` | `var(--rs-color-green-100)` | |
55
+ | `color-surface-bg-brand-red` | `--rs-color-surface-bg-brand-red` | `var(--rs-color-red-100)` | |
56
+ | `color-surface-bg-brand-yellow` | `--rs-color-surface-bg-brand-yellow` | `var(--rs-color-yellow-100)` | |
49
57
  | `color-text-primary` | `--rs-color-text-primary` | `var(--rs-color-black-500)` | |
50
58
  | `color-text-secondary` | `--rs-color-text-secondary` | `var(--rs-color-gray-700)` | |
51
59
  | `color-text-brand` | `--rs-color-text-brand` | `var(--rs-color-blue-500)` | |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robosophy/tokens",
3
- "version": "1.0.10",
3
+ "version": "1.0.11",
4
4
  "private": false,
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",