@czi-sds/components 19.4.0 → 20.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 (10) hide show
  1. package/README.md +18 -13
  2. package/dist/index.cjs.d.ts +556 -188
  3. package/dist/index.cjs.js +1906 -3502
  4. package/dist/index.esm.d.ts +556 -188
  5. package/dist/index.esm.js +1894 -3490
  6. package/dist/tailwind.json +222 -82
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/dist/variables.css +241 -105
  9. package/dist/variables.scss +241 -105
  10. package/package.json +2 -2
package/dist/tailwind.json CHANGED
@@ -1,13 +1,10 @@
1
1
  {
2
2
  "fontFamily": {
3
- "sds-regular": [
4
- "Open Sans",
5
- "OpenSans-Regular"
6
- ],
7
- "sds-semibold": [
8
- "Open Sans",
9
- "OpenSans-SemiBold"
10
- ]
3
+ "sds-body": "\"Inter\", sans-serif",
4
+ "sds-caps": "\"Inter\", sans-serif",
5
+ "sds-code": "\"IBM Plex Mono\", monospace",
6
+ "sds-header": "\"Inter\", sans-serif",
7
+ "sds-tabular": "\"Inter\", sans-serif"
11
8
  },
12
9
  "fontSize": {
13
10
  "sds-body-xxxs": "11px",
@@ -26,7 +23,57 @@
26
23
  "sds-header-m": "16px",
27
24
  "sds-header-l": "18px",
28
25
  "sds-header-xl": "22px",
29
- "sds-header-xxl": "26px"
26
+ "sds-header-xxl": "26px",
27
+ "sds-tabular-xs": "13px",
28
+ "sds-tabular-s": "14px",
29
+ "sds-code-xs": "13px",
30
+ "sds-code-s": "14px"
31
+ },
32
+ "fontVariantNumeric": {
33
+ "sds-body-xxxs": "normal",
34
+ "sds-body-xxs": "normal",
35
+ "sds-body-xs": "normal",
36
+ "sds-body-s": "normal",
37
+ "sds-body-m": "normal",
38
+ "sds-body-l": "normal",
39
+ "sds-caps-xxxxs": "normal",
40
+ "sds-caps-xxxs": "normal",
41
+ "sds-caps-xxs": "normal",
42
+ "sds-header-xxxs": "normal",
43
+ "sds-header-xxs": "normal",
44
+ "sds-header-xs": "normal",
45
+ "sds-header-s": "normal",
46
+ "sds-header-m": "normal",
47
+ "sds-header-l": "normal",
48
+ "sds-header-xl": "normal",
49
+ "sds-header-xxl": "normal",
50
+ "sds-tabular-xs": "tabular-nums",
51
+ "sds-tabular-s": "tabular-nums",
52
+ "sds-code-xs": "normal",
53
+ "sds-code-s": "normal"
54
+ },
55
+ "letterSpacing": {
56
+ "sds-body-xxxs": "0.1px",
57
+ "sds-body-xxs": "0.1px",
58
+ "sds-body-xs": "0.08px",
59
+ "sds-body-s": "0.08px",
60
+ "sds-body-m": "0px",
61
+ "sds-body-l": "0px",
62
+ "sds-caps-xxxxs": "0.5px",
63
+ "sds-caps-xxxs": "0.5px",
64
+ "sds-caps-xxs": "0.5px",
65
+ "sds-header-xxxs": "0.1px",
66
+ "sds-header-xxs": "0.1px",
67
+ "sds-header-xs": "0.08px",
68
+ "sds-header-s": "0.08px",
69
+ "sds-header-m": "0px",
70
+ "sds-header-l": "0px",
71
+ "sds-header-xl": "0px",
72
+ "sds-header-xxl": "0px",
73
+ "sds-tabular-xs": "0px",
74
+ "sds-tabular-s": "0px",
75
+ "sds-code-xs": "0px",
76
+ "sds-code-s": "0px"
30
77
  },
31
78
  "lineHeight": {
32
79
  "sds-body-xxxs": "11px",
@@ -45,20 +92,47 @@
45
92
  "sds-header-m": "16px",
46
93
  "sds-header-l": "18px",
47
94
  "sds-header-xl": "22px",
48
- "sds-header-xxl": "26px"
95
+ "sds-header-xxl": "26px",
96
+ "sds-tabular-xs": "13px",
97
+ "sds-tabular-s": "14px",
98
+ "sds-code-xs": "13px",
99
+ "sds-code-s": "14px"
100
+ },
101
+ "textTransform": {
102
+ "sds-body-xxxs": "none",
103
+ "sds-body-xxs": "none",
104
+ "sds-body-xs": "none",
105
+ "sds-body-s": "none",
106
+ "sds-body-m": "none",
107
+ "sds-body-l": "none",
108
+ "sds-caps-xxxxs": " uppercase",
109
+ "sds-caps-xxxs": " uppercase",
110
+ "sds-caps-xxs": " uppercase",
111
+ "sds-header-xxxs": "none",
112
+ "sds-header-xxs": "none",
113
+ "sds-header-xs": "none",
114
+ "sds-header-s": "none",
115
+ "sds-header-m": "none",
116
+ "sds-header-l": "none",
117
+ "sds-header-xl": "none",
118
+ "sds-header-xxl": "none",
119
+ "sds-tabular-xs": "none",
120
+ "sds-tabular-s": "none",
121
+ "sds-code-xs": "none",
122
+ "sds-code-s": "none"
49
123
  },
50
124
  "height": {
51
125
  "sds-icon-input": "16px",
52
- "sds-icon-xs": "10px",
53
- "sds-icon-s": "14px",
54
- "sds-icon-l": "22px",
126
+ "sds-icon-xs": "12px",
127
+ "sds-icon-s": "16px",
128
+ "sds-icon-l": "24px",
55
129
  "sds-icon-xl": "32px"
56
130
  },
57
131
  "width": {
58
132
  "sds-icon-input": "16px",
59
- "sds-icon-xs": "10px",
60
- "sds-icon-s": "14px",
61
- "sds-icon-l": "22px",
133
+ "sds-icon-xs": "12px",
134
+ "sds-icon-s": "16px",
135
+ "sds-icon-l": "24px",
62
136
  "sds-icon-xl": "32px"
63
137
  },
64
138
  "borderRadius": {
@@ -69,79 +143,145 @@
69
143
  },
70
144
  "boxShadow": {
71
145
  "sds-l": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)",
72
- "sds-m": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)",
73
- "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
146
+ "sds-m": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)",
147
+ "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)",
148
+ "sds-none": "none"
74
149
  },
75
150
  "colors": {
76
- "sds-overlay": {
77
- "100": "rgba(0, 0, 0, 0.08)",
78
- "200": "rgba(0, 0, 0, 0.03)"
79
- },
80
- "sds-beta": {
81
- "100": "#f4f0f9",
82
- "200": "#f0ebf6",
83
- "400": "#7a41ce",
84
- "600": "#693bac"
85
- },
86
- "sds-error": {
87
- "100": "#fef2f2",
88
- "200": "#f8e8e8",
89
- "400": "#dc132c",
90
- "600": "#b70016"
91
- },
92
- "sds-gray": {
93
- "100": "#f8f8f8",
94
- "200": "#eaeaea",
95
- "300": "#cccccc",
96
- "400": "#999999",
97
- "500": "#767676",
98
- "600": "#545454",
99
- "black": "#000000",
100
- "white": "#ffffff"
101
- },
102
- "sds-info": {
103
- "100": "#eff2fc",
104
- "200": "#ebeffc",
105
- "400": "#3867fa",
106
- "600": "#223f9c"
107
- },
108
- "sds-primary": {
109
- "100": "#f8f9fe",
110
- "200": "#eff2fc",
111
- "300": "#a9bdfc",
112
- "400": "#3867fa",
113
- "500": "#2b52cd",
114
- "600": "#223f9c"
115
- },
116
- "sds-secondary": {
117
- "400": "#9bc74e"
118
- },
119
- "sds-success": {
120
- "100": "#ecf5f0",
121
- "200": "#e6f7ed",
122
- "400": "#3cb371",
123
- "600": "#1c7f48"
124
- },
125
- "sds-warning": {
126
- "100": "#fcf6ec",
127
- "200": "#fff3e1",
128
- "400": "#f5a623",
129
- "600": "#946314"
130
- }
131
- },
132
- "letterSpacing": {
133
- "sds-default": "0.3px",
134
- "sds-caps": "1px"
151
+ "sds-color-primitive-common-black": "#000000",
152
+ "sds-color-primitive-common-white": "#FFFFFF",
153
+ "sds-color-primitive-blue-100": "#F5F9FF",
154
+ "sds-color-primitive-blue-200": "#E9F1FF",
155
+ "sds-color-primitive-blue-300": "#A6C9FF",
156
+ "sds-color-primitive-blue-400": "#0B68F8",
157
+ "sds-color-primitive-blue-500": "#0142A4",
158
+ "sds-color-primitive-blue-600": "#002660",
159
+ "sds-color-primitive-gray-100": "#F8F8F8",
160
+ "sds-color-primitive-gray-200": "#EAEAEA",
161
+ "sds-color-primitive-gray-300": "#CCCCCC",
162
+ "sds-color-primitive-gray-400": "#999999",
163
+ "sds-color-primitive-gray-500": "#767676",
164
+ "sds-color-primitive-gray-600": "#545454",
165
+ "sds-color-primitive-green-100": "#ECF5F0",
166
+ "sds-color-primitive-green-200": "#E6F7ED",
167
+ "sds-color-primitive-green-400": "#3CB371",
168
+ "sds-color-primitive-green-500": "#349A61",
169
+ "sds-color-primitive-green-600": "#1C7F48",
170
+ "sds-color-primitive-purple-100": "#F4F0F9",
171
+ "sds-color-primitive-purple-200": "#F0EBF6",
172
+ "sds-color-primitive-purple-400": "#7A41CE",
173
+ "sds-color-primitive-purple-500": "#703CBE",
174
+ "sds-color-primitive-purple-600": "#693BAC",
175
+ "sds-color-primitive-red-100": "#FEF2F2",
176
+ "sds-color-primitive-red-200": "#F8E8E8",
177
+ "sds-color-primitive-red-400": "#DC132C",
178
+ "sds-color-primitive-red-500": "#C61128",
179
+ "sds-color-primitive-red-600": "#B70016",
180
+ "sds-color-primitive-yellow-100": "#FCF6EC",
181
+ "sds-color-primitive-yellow-200": "#FFF3E1",
182
+ "sds-color-primitive-yellow-400": "#F5A623",
183
+ "sds-color-primitive-yellow-500": "#D8921F",
184
+ "sds-color-primitive-yellow-600": "#946314",
185
+ "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
186
+ "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
187
+ "sds-color-semantic-text-base-primary": "#000000",
188
+ "sds-color-semantic-text-base-secondary": "#767676",
189
+ "sds-color-semantic-text-base-disabled": "#CCCCCC",
190
+ "sds-color-semantic-text-base-on-fill": "#FFFFFF",
191
+ "sds-color-semantic-text-base-on-fill-disabled": "#999999",
192
+ "sds-color-semantic-text-base-accent": "#002660",
193
+ "sds-color-semantic-text-action-default": "#0B68F8",
194
+ "sds-color-semantic-text-action-hover": "#0142A4",
195
+ "sds-color-semantic-text-action-pressed": "#002660",
196
+ "sds-color-semantic-text-beta": "#693BAC",
197
+ "sds-color-semantic-text-info": "#002660",
198
+ "sds-color-semantic-text-negative": "#B70016",
199
+ "sds-color-semantic-text-notice": "#946314",
200
+ "sds-color-semantic-text-positive": "#1C7F48",
201
+ "sds-color-semantic-component-base-fill": "#FFFFFF",
202
+ "sds-color-semantic-component-base-fill-hover": "#F8F8F8",
203
+ "sds-color-semantic-component-base-fill-pressed": "#F8F8F8",
204
+ "sds-color-semantic-component-base-fill-open": "#F8F8F8",
205
+ "sds-color-semantic-component-base-fill-selected": "#000000",
206
+ "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
207
+ "sds-color-semantic-component-base-on-fill-disabled": "#999999",
208
+ "sds-color-semantic-component-base-surface": "#FFFFFF",
209
+ "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
210
+ "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
211
+ "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
212
+ "sds-color-semantic-component-base-divider": "#EAEAEA",
213
+ "sds-color-semantic-component-base-border": "#999999",
214
+ "sds-color-semantic-component-base-border-hover": "#000000",
215
+ "sds-color-semantic-component-base-border-disabled": "#CCCCCC",
216
+ "sds-color-semantic-component-base-icon": "#767676",
217
+ "sds-color-semantic-component-base-icon-hover": "#000000",
218
+ "sds-color-semantic-component-base-icon-pressed": "#000000",
219
+ "sds-color-semantic-component-base-icon-disabled": "#CCCCCC",
220
+ "sds-color-semantic-component-accent-fill": "#0B68F8",
221
+ "sds-color-semantic-component-accent-fill-hover": "#0142A4",
222
+ "sds-color-semantic-component-accent-fill-pressed": "#002660",
223
+ "sds-color-semantic-component-accent-fill-on-fill": "#FFFFFF",
224
+ "sds-color-semantic-component-accent-fill-disabled": "#A6C9FF",
225
+ "sds-color-semantic-component-accent-surface": "#E9F1FF",
226
+ "sds-color-semantic-component-accent-border": "#0B68F8",
227
+ "sds-color-semantic-component-accent-border-hover": "#0142A4",
228
+ "sds-color-semantic-component-accent-border-open": "#0B68F8",
229
+ "sds-color-semantic-component-accent-border-focus": "#0B68F8",
230
+ "sds-color-semantic-component-accent-border-selected": "#0B68F8",
231
+ "sds-color-semantic-component-accent-border-disabled": "#A6C9FF",
232
+ "sds-color-semantic-component-accent-icon": "#0B68F8",
233
+ "sds-color-semantic-component-beta-fill": "#7A41CE",
234
+ "sds-color-semantic-component-beta-fill-hover": "#703CBE",
235
+ "sds-color-semantic-component-beta-fill-pressed": "#693BAC",
236
+ "sds-color-semantic-component-beta-fill-on-fill": "#FFFFFF",
237
+ "sds-color-semantic-component-beta-surface": "#F0EBF6",
238
+ "sds-color-semantic-component-beta-border": "#7A41CE",
239
+ "sds-color-semantic-component-beta-icon": "#7A41CE",
240
+ "sds-color-semantic-component-info-fill": "#0B68F8",
241
+ "sds-color-semantic-component-info-fill-hover": "#0142A4",
242
+ "sds-color-semantic-component-info-fill-pressed": "#002660",
243
+ "sds-color-semantic-component-info-fill-on-fill": "#FFFFFF",
244
+ "sds-color-semantic-component-info-surface": "#E9F1FF",
245
+ "sds-color-semantic-component-info-border": "#0B68F8",
246
+ "sds-color-semantic-component-info-icon": "#0B68F8",
247
+ "sds-color-semantic-component-negative-fill": "#DC132C",
248
+ "sds-color-semantic-component-negative-fill-hover": "#C61128",
249
+ "sds-color-semantic-component-negative-fill-pressed": "#B70016",
250
+ "sds-color-semantic-component-negative-fill-on-fill": "#FFFFFF",
251
+ "sds-color-semantic-component-negative-surface": "#F8E8E8",
252
+ "sds-color-semantic-component-negative-border": "#DC132C",
253
+ "sds-color-semantic-component-negative-icon": "#DC132C",
254
+ "sds-color-semantic-component-neutral-fill": "#999999",
255
+ "sds-color-semantic-component-neutral-fill-hover": "#767676",
256
+ "sds-color-semantic-component-neutral-fill-pressed": "#545454",
257
+ "sds-color-semantic-component-neutral-fill-on-fill": "#FFFFFF",
258
+ "sds-color-semantic-component-neutral-surface": "#EAEAEA",
259
+ "sds-color-semantic-component-neutral-border": "#999999",
260
+ "sds-color-semantic-component-neutral-icon": "#999999",
261
+ "sds-color-semantic-component-notice-fill": "#F5A623",
262
+ "sds-color-semantic-component-notice-fill-hover": "#D8921F",
263
+ "sds-color-semantic-component-notice-fill-pressed": "#946314",
264
+ "sds-color-semantic-component-notice-fill-on-fill": "#FFFFFF",
265
+ "sds-color-semantic-component-notice-surface": "#FFF3E1",
266
+ "sds-color-semantic-component-notice-border": "#F5A623",
267
+ "sds-color-semantic-component-notice-icon": "#F5A623",
268
+ "sds-color-semantic-component-positive-fill": "#3CB371",
269
+ "sds-color-semantic-component-positive-fill-hover": "#349A61",
270
+ "sds-color-semantic-component-positive-fill-pressed": "#1C7F48",
271
+ "sds-color-semantic-component-positive-fill-on-fill": "#FFFFFF",
272
+ "sds-color-semantic-component-positive-surface": "#E6F7ED",
273
+ "sds-color-semantic-component-positive-border": "#3CB371",
274
+ "sds-color-semantic-component-positive-icon": "#3CB371"
135
275
  },
136
276
  "spacing": {
137
- "sds-default": "10px",
277
+ "sds-default": "12px",
138
278
  "sds-xxxs": "2px",
139
279
  "sds-xxs": "4px",
140
280
  "sds-xs": "6px",
141
281
  "sds-s": "8px",
142
- "sds-m": "10px",
143
- "sds-l": "14px",
144
- "sds-xl": "22px",
145
- "sds-xxl": "38px"
282
+ "sds-m": "12px",
283
+ "sds-l": "16px",
284
+ "sds-xl": "24px",
285
+ "sds-xxl": "40px"
146
286
  }
147
287
  }