@solid-design-system/tokens 5.5.0 → 5.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 (3) hide show
  1. package/dist/tokens.scss +4 -1
  2. package/dist/tokens.tailwind.json +9 -4
  3. package/package.json +1 -1
package/dist/tokens.scss CHANGED
@@ -2,11 +2,13 @@
2
2
  $sd-backgroundColor-primary-100: (rgb(var(--sd-color-primary-100, 236 240 249)) /* Additional background color (light mode) */);
3
3
  $sd-backgroundColor-primary-200: (rgb(var(--sd-color-primary-200, 224 233 243)) /* Additional background color (light mode) on primary-100 */);
4
4
  $sd-backgroundColor-primary-300: (rgb(var(--sd-color-primary-300, 200 213 231)) /* Used for chip background */);
5
+ $sd-backgroundColor-primary-400: (rgb(var(--sd-color-primary-400, 153 171 208)) /* Used for audio bar inverted */);
5
6
  $sd-backgroundColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /* Used for hover interaction */);
6
7
  $sd-backgroundColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
7
8
  $sd-backgroundColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Inverted background color (light mode)
8
9
  Used for button */);
9
- $sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode) 
Used for inverted button */);
10
+ $sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode) 
Used for inverted button */);
11
+ Used for inverted button */);
10
12
  $sd-backgroundColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for inverted hover interaction */);
11
13
  $sd-backgroundColor-accent-500: (rgb(var(--sd-color-accent-500, 37 136 14)) /* Used for cta background */);
12
14
  $sd-backgroundColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
@@ -69,6 +71,7 @@ $sd-borderRadius-lg: (var(--sd-border-radius-lg, 0.5rem) /* 8px Outer focus outl
69
71
  $sd-borderRadius-full: (var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */);
70
72
  $sd-borderRadius-none: (var(--sd-border-radius-none, 0px));
71
73
 
74
+ $sd-fontSize-xs: (var(--sd-font-size-xs, 0.75rem) /* 12px */);
72
75
  $sd-fontSize-sm: (var(--sd-font-size-sm, 0.875rem) /* 14px */);
73
76
  $sd-fontSize-base: (var(--sd-font-size-base, 1rem) /* 16px */);
74
77
  $sd-fontSize-lg: (var(--sd-font-size-lg, 1.25rem) /* 20px */);
package/dist/tokens.tailwind.json CHANGED
@@ -35,11 +35,12 @@
35
35
  "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
36
36
  "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
37
37
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
38
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
38
39
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
39
40
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
40
41
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
41
42
  },
42
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
43
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used\nUsed for inverted button */",
43
44
  "accent": {
44
45
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
45
46
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -125,11 +126,12 @@
125
126
  "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
126
127
  "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
127
128
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
129
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
128
130
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
129
131
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
130
132
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
131
133
  },
132
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
134
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used\nUsed for inverted button */",
133
135
  "accent": {
134
136
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
135
137
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -288,6 +290,7 @@
288
290
  },
289
291
  "fontFamily": {},
290
292
  "fontSize": {
293
+ "xs": "var(--sd-font-size-xs, 0.75rem) /* 12px */",
291
294
  "sm": "var(--sd-font-size-sm, 0.875rem) /* 14px */",
292
295
  "base": "var(--sd-font-size-base, 1rem) /* 16px */",
293
296
  "lg": "var(--sd-font-size-lg, 1.25rem) /* 20px */",
@@ -306,11 +309,12 @@
306
309
  "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
307
310
  "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
308
311
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
312
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
309
313
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
310
314
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
311
315
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
312
316
  },
313
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
317
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used\nUsed for inverted button */",
314
318
  "accent": {
315
319
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
316
320
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
@@ -478,11 +482,12 @@
478
482
  "100": "rgb(var(--sd-color-primary-100, 236 240 249) / <alpha-value>) /* Additional background color (light mode) */",
479
483
  "200": "rgb(var(--sd-color-primary-200, 224 233 243) / <alpha-value>) /* Additional background color (light mode) on primary-100 */",
480
484
  "300": "rgb(var(--sd-color-primary-300, 200 213 231) / <alpha-value>) /* Used for chip background */",
485
+ "400": "rgb(var(--sd-color-primary-400, 153 171 208) / <alpha-value>) /* Used for audio bar inverted */",
481
486
  "500": "rgb(var(--sd-color-primary-500, 70 109 175) / <alpha-value>) /* Used for hover interaction */",
482
487
  "800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
483
488
  "DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
484
489
  },
485
- "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used for inverted button */",
490
+ "white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode) 
Used\nUsed for inverted button */",
486
491
  "accent": {
487
492
  "300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
488
493
  "500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@solid-design-system/tokens",
3
- "version": "5.5.0",
3
+ "version": "5.6.1",
4
4
  "description": "Solid Design System: Tokens",
5
5
  "publishConfig": {
6
6
  "access": "public",