@solid-design-system/tokens 5.6.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.
- package/dist/tokens.scss +3 -1
- package/dist/tokens.tailwind.json +5 -4
- package/package.json +1 -1
package/dist/tokens.scss
CHANGED
|
@@ -7,7 +7,8 @@ $sd-backgroundColor-primary-500: (rgb(var(--sd-color-primary-500, 70 109 175)) /
|
|
|
7
7
|
$sd-backgroundColor-primary-800: (rgb(var(--sd-color-primary-800, 5 21 48)) /* Used for pressed interaction */);
|
|
8
8
|
$sd-backgroundColor-primary-DEFAULT: (rgb(var(--sd-color-primary, 0 53 142)) /* Inverted background color (light mode)
|
|
9
9
|
Used for button */);
|
|
10
|
-
$sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode)
|
|
10
|
+
$sd-backgroundColor-white: (rgb(var(--sd-color-white, 255 255 255)) /* Default background color (light mode)
|
|
11
|
+
Used for inverted button */);
|
|
11
12
|
$sd-backgroundColor-accent-300: (rgb(var(--sd-color-accent-300, 108 194 84)) /* Used for inverted hover interaction */);
|
|
12
13
|
$sd-backgroundColor-accent-500: (rgb(var(--sd-color-accent-500, 37 136 14)) /* Used for cta background */);
|
|
13
14
|
$sd-backgroundColor-accent-550: (rgb(var(--sd-color-accent-550, 54 123 40)) /* Used for hover interaction */);
|
|
@@ -70,6 +71,7 @@ $sd-borderRadius-lg: (var(--sd-border-radius-lg, 0.5rem) /* 8px Outer focus outl
|
|
|
70
71
|
$sd-borderRadius-full: (var(--sd-border-radius-full, 9999px) /* Radius for pill shape buttons */);
|
|
71
72
|
$sd-borderRadius-none: (var(--sd-border-radius-none, 0px));
|
|
72
73
|
|
|
74
|
+
$sd-fontSize-xs: (var(--sd-font-size-xs, 0.75rem) /* 12px */);
|
|
73
75
|
$sd-fontSize-sm: (var(--sd-font-size-sm, 0.875rem) /* 14px */);
|
|
74
76
|
$sd-fontSize-base: (var(--sd-font-size-base, 1rem) /* 16px */);
|
|
75
77
|
$sd-fontSize-lg: (var(--sd-font-size-lg, 1.25rem) /* 20px */);
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
|
|
41
41
|
"DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
|
|
42
42
|
},
|
|
43
|
-
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
43
|
+
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
44
44
|
"accent": {
|
|
45
45
|
"300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
|
|
46
46
|
"500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
"800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
|
|
132
132
|
"DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
|
|
133
133
|
},
|
|
134
|
-
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
134
|
+
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
135
135
|
"accent": {
|
|
136
136
|
"300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
|
|
137
137
|
"500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
|
|
@@ -290,6 +290,7 @@
|
|
|
290
290
|
},
|
|
291
291
|
"fontFamily": {},
|
|
292
292
|
"fontSize": {
|
|
293
|
+
"xs": "var(--sd-font-size-xs, 0.75rem) /* 12px */",
|
|
293
294
|
"sm": "var(--sd-font-size-sm, 0.875rem) /* 14px */",
|
|
294
295
|
"base": "var(--sd-font-size-base, 1rem) /* 16px */",
|
|
295
296
|
"lg": "var(--sd-font-size-lg, 1.25rem) /* 20px */",
|
|
@@ -313,7 +314,7 @@
|
|
|
313
314
|
"800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
|
|
314
315
|
"DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
|
|
315
316
|
},
|
|
316
|
-
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
317
|
+
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
317
318
|
"accent": {
|
|
318
319
|
"300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
|
|
319
320
|
"500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
|
|
@@ -486,7 +487,7 @@
|
|
|
486
487
|
"800": "rgb(var(--sd-color-primary-800, 5 21 48) / <alpha-value>) /* Used for pressed interaction */",
|
|
487
488
|
"DEFAULT": "rgb(var(--sd-color-primary, 0 53 142) / <alpha-value>) /* Inverted background color (light mode)\nUsed for button */"
|
|
488
489
|
},
|
|
489
|
-
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
490
|
+
"white": "rgb(var(--sd-color-white, 255 255 255) / <alpha-value>) /* Default background color (light mode)
|
|
490
491
|
"accent": {
|
|
491
492
|
"300": "rgb(var(--sd-color-accent-300, 108 194 84) / <alpha-value>) /* Used for inverted hover interaction */",
|
|
492
493
|
"500": "rgb(var(--sd-color-accent-500, 37 136 14) / <alpha-value>) /* Used for cta background */",
|