@solid-design-system/tokens 6.0.0-next.8 → 6.0.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 (14) hide show
  1. package/README.md +1 -1
  2. package/cdn/themes/kid/kid.css +1 -0
  3. package/cdn/themes/tailwind.css +88 -83
  4. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  5. package/cdn/themes/ui-light/ui-light.css +1 -1
  6. package/cdn/themes/vb/vb.css +1 -1
  7. package/dist/theme.js +1 -1
  8. package/dist/themes/kid/kid.css +523 -0
  9. package/dist/themes/tailwind.css +88 -83
  10. package/dist/themes/ui-dark/ui-dark.css +246 -62
  11. package/dist/themes/ui-light/ui-light.css +239 -55
  12. package/dist/themes/vb/vb.css +330 -106
  13. package/dist/tokens.scss +205 -21
  14. package/package.json +6 -3
package/dist/themes/tailwind.css CHANGED
@@ -20,73 +20,73 @@
20
20
  --aspect-golden-ratio: var(--sd-aspect-golden-ratio);
21
21
  --aspect-square: var(--sd-aspect-square);
22
22
  --aspect-video: var(--sd-aspect-video);
23
- --background-color-accent-300: var(--sd-color-background-accent-300);
24
- --background-color-accent-500: var(--sd-color-background-accent-500);
25
- --background-color-accent-550: var(--sd-color-background-accent-550);
26
- --background-color-accent-700: var(--sd-color-background-accent-700);
27
- --background-color-accent: var(--sd-color-background-accent);
28
- --background-color-error-400: var(--sd-color-background-error-400);
29
- --background-color-error: var(--sd-color-background-error);
30
- --background-color-info: var(--sd-color-background-info);
31
- --background-color-neutral-100: var(--sd-color-background-neutral-100);
32
- --background-color-neutral-200: var(--sd-color-background-neutral-200);
33
- --background-color-neutral-300: var(--sd-color-background-neutral-300);
34
- --background-color-neutral-400: var(--sd-color-background-neutral-400);
35
- --background-color-neutral-500: var(--sd-color-background-neutral-500);
36
- --background-color-neutral-600: var(--sd-color-background-neutral-600);
37
- --background-color-neutral-800: var(--sd-color-background-neutral-800);
38
- --background-color-primary-100: var(--sd-color-background-primary-100);
39
- --background-color-primary-200: var(--sd-color-background-primary-200);
40
- --background-color-primary-300: var(--sd-color-background-primary-300);
41
- --background-color-primary-500: var(--sd-color-background-primary-500);
42
- --background-color-primary-800: var(--sd-color-background-primary-800);
43
- --background-color-primary: var(--sd-color-background-primary);
44
- --background-color-success: var(--sd-color-background-success);
45
- --background-color-warning: var(--sd-color-background-warning);
46
- --background-color-white: var(--sd-color-background-white);
47
- --border-color-accent-550: var(--sd-color-border-accent-550);
48
- --border-color-accent: var(--sd-color-border-accent);
49
- --border-color-error-400: var(--sd-color-border-error-400);
50
- --border-color-error: var(--sd-color-border-error);
51
- --border-color-neutral-400: var(--sd-color-border-neutral-400);
52
- --border-color-neutral-500: var(--sd-color-border-neutral-500);
53
- --border-color-neutral-600: var(--sd-color-border-neutral-600);
54
- --border-color-neutral-800: var(--sd-color-border-neutral-800);
55
- --border-color-primary-100: var(--sd-color-border-primary-100);
56
- --border-color-primary-200: var(--sd-color-border-primary-200);
57
- --border-color-primary-400: var(--sd-color-border-primary-400);
58
- --border-color-primary-500: var(--sd-color-border-primary-500);
59
- --border-color-primary-800: var(--sd-color-border-primary-800);
60
- --border-color-primary: var(--sd-color-border-primary);
61
- --border-color-success: var(--sd-color-border-success);
62
- --border-color-white: var(--sd-color-border-white);
23
+ --background-color-accent-300: rgba(var(--sd-color-background-accent-300));
24
+ --background-color-accent-500: rgba(var(--sd-color-background-accent-500));
25
+ --background-color-accent-550: rgba(var(--sd-color-background-accent-550));
26
+ --background-color-accent-700: rgba(var(--sd-color-background-accent-700));
27
+ --background-color-accent: rgba(var(--sd-color-background-accent));
28
+ --background-color-error-400: rgba(var(--sd-color-background-error-400));
29
+ --background-color-error: rgba(var(--sd-color-background-error));
30
+ --background-color-info: rgba(var(--sd-color-background-info));
31
+ --background-color-neutral-100: rgba(var(--sd-color-background-neutral-100));
32
+ --background-color-neutral-200: rgba(var(--sd-color-background-neutral-200));
33
+ --background-color-neutral-300: rgba(var(--sd-color-background-neutral-300));
34
+ --background-color-neutral-400: rgba(var(--sd-color-background-neutral-400));
35
+ --background-color-neutral-500: rgba(var(--sd-color-background-neutral-500));
36
+ --background-color-neutral-600: rgba(var(--sd-color-background-neutral-600));
37
+ --background-color-neutral-800: rgba(var(--sd-color-background-neutral-800));
38
+ --background-color-primary-100: rgba(var(--sd-color-background-primary-100));
39
+ --background-color-primary-200: rgba(var(--sd-color-background-primary-200));
40
+ --background-color-primary-300: rgba(var(--sd-color-background-primary-300));
41
+ --background-color-primary-500: rgba(var(--sd-color-background-primary-500));
42
+ --background-color-primary-800: rgba(var(--sd-color-background-primary-800));
43
+ --background-color-primary: rgba(var(--sd-color-background-primary));
44
+ --background-color-success: rgba(var(--sd-color-background-success));
45
+ --background-color-warning: rgba(var(--sd-color-background-warning));
46
+ --background-color-white: rgba(var(--sd-color-background-white));
47
+ --border-color-accent-550: rgba(var(--sd-color-border-accent-550));
48
+ --border-color-accent: rgba(var(--sd-color-border-accent));
49
+ --border-color-error-400: rgba(var(--sd-color-border-error-400));
50
+ --border-color-error: rgba(var(--sd-color-border-error));
51
+ --border-color-neutral-400: rgba(var(--sd-color-border-neutral-400));
52
+ --border-color-neutral-500: rgba(var(--sd-color-border-neutral-500));
53
+ --border-color-neutral-600: rgba(var(--sd-color-border-neutral-600));
54
+ --border-color-neutral-800: rgba(var(--sd-color-border-neutral-800));
55
+ --border-color-primary-100: rgba(var(--sd-color-border-primary-100));
56
+ --border-color-primary-200: rgba(var(--sd-color-border-primary-200));
57
+ --border-color-primary-400: rgba(var(--sd-color-border-primary-400));
58
+ --border-color-primary-500: rgba(var(--sd-color-border-primary-500));
59
+ --border-color-primary-800: rgba(var(--sd-color-border-primary-800));
60
+ --border-color-primary: rgba(var(--sd-color-border-primary));
61
+ --border-color-success: rgba(var(--sd-color-border-success));
62
+ --border-color-white: rgba(var(--sd-color-border-white));
63
63
  --border-width-2: var(--sd-border-width-2);
64
64
  --border-width-4: var(--sd-border-width-4);
65
65
  --border-width-6: var(--sd-border-width-6);
66
66
  --border-width-default: var(--sd-border-width);
67
67
  --drop-shadow-sm: var(--sd-drop-shadow-sm);
68
68
  --drop-shadow: var(--sd-drop-shadow);
69
- --fill-accent-550: var(--sd-color-icon-fill-accent-550);
70
- --fill-accent: var(--sd-color-icon-fill-accent);
71
- --fill-error-400: var(--sd-color-icon-fill-error-400);
72
- --fill-error: var(--sd-color-icon-fill-error);
73
- --fill-neutral-400: var(--sd-color-icon-fill-neutral-400);
74
- --fill-neutral-500: var(--sd-color-icon-fill-neutral-500);
75
- --fill-neutral-600: var(--sd-color-icon-fill-neutral-600);
76
- --fill-neutral-800: var(--sd-color-icon-fill-neutral-800);
77
- --fill-primary-100: var(--sd-color-icon-fill-primary-100);
78
- --fill-primary-200: var(--sd-color-icon-fill-primary-200);
79
- --fill-primary-400: var(--sd-color-icon-fill-primary-400);
80
- --fill-primary-500: var(--sd-color-icon-fill-primary-500);
81
- --fill-primary-800: var(--sd-color-icon-fill-primary-800);
82
- --fill-primary: var(--sd-color-icon-fill-primary);
83
- --fill-risk-high: var(--sd-color-icon-fill-risk-high);
84
- --fill-risk-increased: var(--sd-color-icon-fill-risk-increased);
85
- --fill-risk-low: var(--sd-color-icon-fill-risk-low);
86
- --fill-risk-moderate: var(--sd-color-icon-fill-risk-moderate);
87
- --fill-risk-veryhigh: var(--sd-color-icon-fill-risk-veryhigh);
88
- --fill-success: var(--sd-color-icon-fill-success);
89
- --fill-white: var(--sd-color-icon-fill-white);
69
+ --fill-accent-550: rgba(var(--sd-color-icon-fill-accent-550));
70
+ --fill-accent: rgba(var(--sd-color-icon-fill-accent));
71
+ --fill-error-400: rgba(var(--sd-color-icon-fill-error-400));
72
+ --fill-error: rgba(var(--sd-color-icon-fill-error));
73
+ --fill-neutral-400: rgba(var(--sd-color-icon-fill-neutral-400));
74
+ --fill-neutral-500: rgba(var(--sd-color-icon-fill-neutral-500));
75
+ --fill-neutral-600: rgba(var(--sd-color-icon-fill-neutral-600));
76
+ --fill-neutral-800: rgba(var(--sd-color-icon-fill-neutral-800));
77
+ --fill-primary-100: rgba(var(--sd-color-icon-fill-primary-100));
78
+ --fill-primary-200: rgba(var(--sd-color-icon-fill-primary-200));
79
+ --fill-primary-400: rgba(var(--sd-color-icon-fill-primary-400));
80
+ --fill-primary-500: rgba(var(--sd-color-icon-fill-primary-500));
81
+ --fill-primary-800: rgba(var(--sd-color-icon-fill-primary-800));
82
+ --fill-primary: rgba(var(--sd-color-icon-fill-primary));
83
+ --fill-risk-high: rgba(var(--sd-color-icon-fill-risk-high));
84
+ --fill-risk-increased: rgba(var(--sd-color-icon-fill-risk-increased));
85
+ --fill-risk-low: rgba(var(--sd-color-icon-fill-risk-low));
86
+ --fill-risk-moderate: rgba(var(--sd-color-icon-fill-risk-moderate));
87
+ --fill-risk-veryhigh: rgba(var(--sd-color-icon-fill-risk-veryhigh));
88
+ --fill-success: rgba(var(--sd-color-icon-fill-success));
89
+ --fill-white: rgba(var(--sd-color-icon-fill-white));
90
90
  --font-primary: var(--sd-font-primary);
91
91
  --font-weight-bold: var(--sd-font-weight-bold);
92
92
  --font-weight-normal: var(--sd-font-weight-normal);
@@ -104,8 +104,8 @@
104
104
  --opacity-80: var(--sd-opacity-80);
105
105
  --opacity-85: var(--sd-opacity-85);
106
106
  --opacity-90: var(--sd-opacity-90);
107
- --outline-color-error: var(--sd-border-color-error, var(--sd-color-error));
108
- --outline-color-primary: var(--sd-border-color-primary, var(--sd-color-primary));
107
+ --outline-color-error: var(--sd-color-border-error, var(--sd-color-error));
108
+ --outline-color-primary: var(--sd-color-border-primary, var(--sd-color-primary));
109
109
  --radius-default: var(--sd-radius);
110
110
  --radius-full: var(--sd-radius-full);
111
111
  --radius-lg: var(--sd-radius-lg);
@@ -114,9 +114,12 @@
114
114
  --radius-sm: var(--sd-radius-sm);
115
115
  --shadow-sm: var(--sd-shadow-sm);
116
116
  --shadow: var(--sd-shadow);
117
+ --sizing-0\.25: var(--sd-sizing-0\.25);
118
+ --sizing-0\.5: var(--sd-sizing-0\.5);
117
119
  --sizing-10: var(--sd-sizing-10);
118
120
  --sizing-12: var(--sd-sizing-12);
119
121
  --sizing-16: var(--sd-sizing-16);
122
+ --sizing-1: var(--sd-sizing-1);
120
123
  --sizing-20: var(--sd-sizing-20);
121
124
  --sizing-24: var(--sd-sizing-24);
122
125
  --sizing-2: var(--sd-sizing-2);
@@ -131,6 +134,7 @@
131
134
  --spacing-0\.5: var(--sd-spacing-0\.5);
132
135
  --spacing-10: var(--sd-spacing-10);
133
136
  --spacing-12: var(--sd-spacing-12);
137
+ --spacing-14: var(--sd-spacing-14);
134
138
  --spacing-16: var(--sd-spacing-16);
135
139
  --spacing-1: var(--sd-spacing-1);
136
140
  --spacing-1\.5: var(--sd-spacing-1\.5);
@@ -149,23 +153,24 @@
149
153
  --text-3xl: var(--sd-text-3xl);
150
154
  --text-4xl: var(--sd-text-4xl);
151
155
  --text-base: var(--sd-text-base);
152
- --text-color-accent: var(--sd-color-text-accent);
153
- --text-color-black: var(--sd-color-text-black);
154
- --text-color-error: var(--sd-color-text-error);
155
- --text-color-neutral-500: var(--sd-color-text-neutral-500);
156
- --text-color-neutral-600: var(--sd-color-text-neutral-600);
157
- --text-color-neutral-700: var(--sd-color-text-neutral-700);
158
- --text-color-primary-100: var(--sd-color-text-primary-100);
159
- --text-color-primary-200: var(--sd-color-text-primary-200);
160
- --text-color-primary-400: var(--sd-color-text-primary-400);
161
- --text-color-primary-500: var(--sd-color-text-primary-500);
162
- --text-color-primary-800: var(--sd-color-text-primary-800);
163
- --text-color-primary: var(--sd-color-text-primary);
164
- --text-color-success: var(--sd-color-text-success);
165
- --text-color-white: var(--sd-color-text-white);
156
+ --text-color-accent: rgba(var(--sd-color-text-accent));
157
+ --text-color-black: rgba(var(--sd-color-text-black));
158
+ --text-color-error: rgba(var(--sd-color-text-error));
159
+ --text-color-neutral-500: rgba(var(--sd-color-text-neutral-500));
160
+ --text-color-neutral-600: rgba(var(--sd-color-text-neutral-600));
161
+ --text-color-neutral-700: rgba(var(--sd-color-text-neutral-700));
162
+ --text-color-primary-100: rgba(var(--sd-color-text-primary-100));
163
+ --text-color-primary-200: rgba(var(--sd-color-text-primary-200));
164
+ --text-color-primary-400: rgba(var(--sd-color-text-primary-400));
165
+ --text-color-primary-500: rgba(var(--sd-color-text-primary-500));
166
+ --text-color-primary-800: rgba(var(--sd-color-text-primary-800));
167
+ --text-color-primary: rgba(var(--sd-color-text-primary));
168
+ --text-color-success: rgba(var(--sd-color-text-success));
169
+ --text-color-white: rgba(var(--sd-color-text-white));
166
170
  --text-lg: var(--sd-text-lg);
167
171
  --text-sm: var(--sd-text-sm);
168
172
  --text-xl: var(--sd-text-xl);
173
+ --text-xs: var(--sd-text-xs);
169
174
  --transition-duration-fast: var(--sd-duration-fast, 150ms);
170
175
  --transition-duration-medium: var(--sd-duration-medium, 300ms);
171
176
  --transition-duration-slow: var(--sd-duration-slow, 500ms);
@@ -200,19 +205,19 @@
200
205
  }
201
206
  @keyframes loader-color-primary {
202
207
  0%, 100% {
203
- color: var(--sd-color-icon-fill-primary, var(--sd-color-primary));
208
+ color: rgba(var(--sd-color-icon-fill-primary, rgba(var(--sd-color-primary))));
204
209
  }
205
210
  50% {
206
- color: var(--sd-color-icon-fill-primary, var(--sd-color-primary));
211
+ color: rgba(var(--sd-color-icon-fill-primary, rgba(var(--sd-color-primary))));
207
212
  opacity: 20%;
208
213
  }
209
214
  }
210
215
  @keyframes loader-color-white {
211
216
  0%, 100% {
212
- color: var(--sd-color-icon-fill-white, var(--sd-color-white));
217
+ color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white))));
213
218
  }
214
219
  50% {
215
- color: var(--sd-color-icon-fill-white, var(--sd-color-white));
220
+ color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white))));
216
221
  opacity: 20%;
217
222
  }
218
223
  }
@@ -282,12 +287,12 @@
282
287
  outline-style: solid;
283
288
  outline-offset: 2px;
284
289
  outline-width: 2px;
285
- outline-color: var(--outline-color-primary);
290
+ outline-color: rgba(var(--outline-color-primary));
286
291
  }
287
292
 
288
293
  @utility focus-outline-inverted {
289
294
  outline-style: solid;
290
295
  outline-offset: 2px;
291
296
  outline-width: 2px;
292
- outline-color: var(--outline-color-white);
297
+ outline-color: rgba(var(--outline-color-white));
293
298
  }