@czi-sds/data-viz 0.5.0 → 0.7.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 (8) hide show
  1. package/README.md +18 -13
  2. package/dist/index.cjs.d.ts +64 -2
  3. package/dist/index.cjs.js +282 -83
  4. package/dist/index.esm.d.ts +64 -2
  5. package/dist/index.esm.js +283 -84
  6. package/dist/tailwind.json +211 -80
  7. package/dist/tsconfig.tsbuildinfo +1 -1
  8. package/package.json +10 -3
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": {
@@ -73,75 +147,132 @@
73
147
  "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
74
148
  },
75
149
  "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"
150
+ "sds-color-primitive-blue-100": "#F5F9FF",
151
+ "sds-color-primitive-blue-200": "#E9F1FF",
152
+ "sds-color-primitive-blue-300": "#A6C9FF",
153
+ "sds-color-primitive-blue-400": "#0B68F8",
154
+ "sds-color-primitive-blue-500": "#0142A4",
155
+ "sds-color-primitive-blue-600": "#002660",
156
+ "sds-color-primitive-gray-100": "#F8F8F8",
157
+ "sds-color-primitive-gray-200": "#EAEAEA",
158
+ "sds-color-primitive-gray-300": "#CCCCCC",
159
+ "sds-color-primitive-gray-400": "#999999",
160
+ "sds-color-primitive-gray-500": "#767676",
161
+ "sds-color-primitive-gray-600": "#545454",
162
+ "sds-color-primitive-gray-black": "#000000",
163
+ "sds-color-primitive-gray-white": "#FFFFFF",
164
+ "sds-color-primitive-green-100": "#ECF5F0",
165
+ "sds-color-primitive-green-200": "#E6F7ED",
166
+ "sds-color-primitive-green-400": "#3CB371",
167
+ "sds-color-primitive-green-500": "#349A61",
168
+ "sds-color-primitive-green-600": "#1C7F48",
169
+ "sds-color-primitive-purple-100": "#F4F0F9",
170
+ "sds-color-primitive-purple-200": "#F0EBF6",
171
+ "sds-color-primitive-purple-400": "#7A41CE",
172
+ "sds-color-primitive-purple-500": "#703CBE",
173
+ "sds-color-primitive-purple-600": "#693BAC",
174
+ "sds-color-primitive-red-100": "#FEF2F2",
175
+ "sds-color-primitive-red-200": "#F8E8E8",
176
+ "sds-color-primitive-red-400": "#DC132C",
177
+ "sds-color-primitive-red-500": "#C61128",
178
+ "sds-color-primitive-red-600": "#B70016",
179
+ "sds-color-primitive-yellow-100": "#FCF6EC",
180
+ "sds-color-primitive-yellow-200": "#FFF3E1",
181
+ "sds-color-primitive-yellow-400": "#F5A623",
182
+ "sds-color-primitive-yellow-500": "#D8921F",
183
+ "sds-color-primitive-yellow-600": "#946314",
184
+ "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)",
185
+ "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)",
186
+ "sds-color-semantic-text-base-primary": "#000000",
187
+ "sds-color-semantic-text-base-secondary": "#767676",
188
+ "sds-color-semantic-text-base-disabled": "#CCCCCC",
189
+ "sds-color-semantic-text-base-on-fill": "#FFFFFF",
190
+ "sds-color-semantic-text-base-on-fill-disabled": "#999999",
191
+ "sds-color-semantic-text-base-accent": "#002660",
192
+ "sds-color-semantic-text-action-default": "#0B68F8",
193
+ "sds-color-semantic-text-action-hover": "#0142A4",
194
+ "sds-color-semantic-text-action-pressed": "#002660",
195
+ "sds-color-semantic-text-beta": "#693BAC",
196
+ "sds-color-semantic-text-info": "#002660",
197
+ "sds-color-semantic-text-negative": "#B70016",
198
+ "sds-color-semantic-text-notice": "#946314",
199
+ "sds-color-semantic-text-positive": "#1C7F48",
200
+ "sds-color-semantic-component-base-fill": "#FFFFFF",
201
+ "sds-color-semantic-component-base-fill-hover": "#F8F8F8",
202
+ "sds-color-semantic-component-base-fill-pressed": "#F8F8F8",
203
+ "sds-color-semantic-component-base-fill-open": "#F8F8F8",
204
+ "sds-color-semantic-component-base-fill-selected": "#000000",
205
+ "sds-color-semantic-component-base-fill-disabled": "#CCCCCC",
206
+ "sds-color-semantic-component-base-on-fill-disabled": "#999999",
207
+ "sds-color-semantic-component-base-surface-primary": "#FFFFFF",
208
+ "sds-color-semantic-component-base-surface-secondary": "#F8F8F8",
209
+ "sds-color-semantic-component-base-surface-tertiary": "#EAEAEA",
210
+ "sds-color-semantic-component-base-divider": "#EAEAEA",
211
+ "sds-color-semantic-component-base-border": "#999999",
212
+ "sds-color-semantic-component-base-border-hover": "#000000",
213
+ "sds-color-semantic-component-base-border-disabled": "#CCCCCC",
214
+ "sds-color-semantic-component-base-icon": "#767676",
215
+ "sds-color-semantic-component-base-icon-hover": "#000000",
216
+ "sds-color-semantic-component-base-icon-pressed": "#000000",
217
+ "sds-color-semantic-component-base-icon-disabled": "#CCCCCC",
218
+ "sds-color-semantic-component-accent-fill": "#0B68F8",
219
+ "sds-color-semantic-component-accent-fill-hover": "#0142A4",
220
+ "sds-color-semantic-component-accent-fill-pressed": "#002660",
221
+ "sds-color-semantic-component-accent-fill-on-fill": "#FFFFFF",
222
+ "sds-color-semantic-component-accent-fill-disabled": "#A6C9FF",
223
+ "sds-color-semantic-component-accent-surface": "#E9F1FF",
224
+ "sds-color-semantic-component-accent-border": "#0B68F8",
225
+ "sds-color-semantic-component-accent-border-hover": "#0142A4",
226
+ "sds-color-semantic-component-accent-border-open": "#0B68F8",
227
+ "sds-color-semantic-component-accent-border-focus": "#0B68F8",
228
+ "sds-color-semantic-component-accent-border-selected": "#0B68F8",
229
+ "sds-color-semantic-component-accent-border-disabled": "#A6C9FF",
230
+ "sds-color-semantic-component-accent-icon": "#0B68F8",
231
+ "sds-color-semantic-component-beta-fill": "#7A41CE",
232
+ "sds-color-semantic-component-beta-fill-hover": "#703CBE",
233
+ "sds-color-semantic-component-beta-fill-pressed": "#693BAC",
234
+ "sds-color-semantic-component-beta-fill-on-fill": "#FFFFFF",
235
+ "sds-color-semantic-component-beta-surface": "#F0EBF6",
236
+ "sds-color-semantic-component-beta-border": "#7A41CE",
237
+ "sds-color-semantic-component-beta-icon": "#7A41CE",
238
+ "sds-color-semantic-component-info-fill": "#0B68F8",
239
+ "sds-color-semantic-component-info-fill-hover": "#0142A4",
240
+ "sds-color-semantic-component-info-fill-pressed": "#002660",
241
+ "sds-color-semantic-component-info-fill-on-fill": "#FFFFFF",
242
+ "sds-color-semantic-component-info-surface": "#E9F1FF",
243
+ "sds-color-semantic-component-info-border": "#0B68F8",
244
+ "sds-color-semantic-component-info-icon": "#0B68F8",
245
+ "sds-color-semantic-component-negative-fill": "#DC132C",
246
+ "sds-color-semantic-component-negative-fill-hover": "#C61128",
247
+ "sds-color-semantic-component-negative-fill-pressed": "#B70016",
248
+ "sds-color-semantic-component-negative-fill-on-fill": "#FFFFFF",
249
+ "sds-color-semantic-component-negative-surface": "#F8E8E8",
250
+ "sds-color-semantic-component-negative-border": "#DC132C",
251
+ "sds-color-semantic-component-negative-icon": "#DC132C",
252
+ "sds-color-semantic-component-notice-fill": "#F5A623",
253
+ "sds-color-semantic-component-notice-fill-hover": "#D8921F",
254
+ "sds-color-semantic-component-notice-fill-pressed": "#946314",
255
+ "sds-color-semantic-component-notice-fill-on-fill": "#FFFFFF",
256
+ "sds-color-semantic-component-notice-surface": "#FFF3E1",
257
+ "sds-color-semantic-component-notice-border": "#F5A623",
258
+ "sds-color-semantic-component-notice-icon": "#F5A623",
259
+ "sds-color-semantic-component-positive-fill": "#3CB371",
260
+ "sds-color-semantic-component-positive-fill-hover": "#349A61",
261
+ "sds-color-semantic-component-positive-fill-pressed": "#1C7F48",
262
+ "sds-color-semantic-component-positive-fill-on-fill": "#FFFFFF",
263
+ "sds-color-semantic-component-positive-surface": "#E6F7ED",
264
+ "sds-color-semantic-component-positive-border": "#3CB371",
265
+ "sds-color-semantic-component-positive-icon": "#3CB371"
135
266
  },
136
267
  "spacing": {
137
- "sds-default": "10px",
268
+ "sds-default": "12px",
138
269
  "sds-xxxs": "2px",
139
270
  "sds-xxs": "4px",
140
271
  "sds-xs": "6px",
141
272
  "sds-s": "8px",
142
- "sds-m": "10px",
143
- "sds-l": "14px",
144
- "sds-xl": "22px",
145
- "sds-xxl": "38px"
273
+ "sds-m": "12px",
274
+ "sds-l": "16px",
275
+ "sds-xl": "24px",
276
+ "sds-xxl": "40px"
146
277
  }
147
278
  }