@czi-sds/data-viz 0.6.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 (6) hide show
  1. package/README.md +18 -13
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.esm.js +1 -1
  4. package/dist/tailwind.json +211 -80
  5. package/dist/tsconfig.tsbuildinfo +1 -1
  6. package/package.json +3 -2
package/README.md CHANGED
@@ -4,7 +4,7 @@ The Science Design System (SDS) brings consistency and universal standards to CZ
4
4
 
5
5
  ## Design System Documentation
6
6
 
7
- `@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spacings`, `typography`, etc., so you can leverage the theme properly in your application.
7
+ `@czi-sds/components` implements the Science Design System as documented in [Zeroheight](https://sds.czi.design/). As a result, it's very useful to get familiar with the available **theme variables**, such as `colors`, `spaces`, `typography`, etc., so you can leverage the theme properly in your application.
8
8
 
9
9
  ![Science Design System Zeroheight Homepage Snapshot](https://user-images.githubusercontent.com/6309723/155802483-366008aa-7380-4a01-b356-ae0ab02f4f3b.png)
10
10
 
@@ -93,24 +93,24 @@ export const Title - styled(Typography)`
93
93
 
94
94
  ```ts
95
95
  import { css, SerializedStyles } from "@emotion/react";
96
- import { styled } from '@mui/material/styles';
96
+ import { styled } from "@mui/material/styles";
97
97
  import { getColors, getCorners } from "@czi-sds/components";
98
98
 
99
99
  export const Tag = styled("div")`
100
100
  // This is a callback function that returns more CSS rules, but the only way
101
101
  // to access the custom theme object
102
- ${(props) => {
103
- // getColors() is a selector that picks out colors from the theme object
104
- const colors = getColors(props);
105
- // getSpaces() is a selector that picks out spacings from the theme object
106
- const spacings = getSpaces(props);
102
+ ${(props) => {
103
+ // getColors() is a selector that picks out colors from the theme object
104
+ const colors = getColors(props);
105
+ // getSpaces() is a selector that picks out spaces from the theme object
106
+ const spaces = getSpaces(props);
107
107
 
108
- return `
108
+ return `
109
109
  background-color: ${colors?.gray[500]};
110
- padding-bottom: ${spacings?.m}px;
111
- margin-bottom: ${spacings?.xxl}px;
110
+ padding-bottom: ${spaces?.m}px;
111
+ margin-bottom: ${spaces?.xxl}px;
112
112
  `;
113
- }}
113
+ }}
114
114
  `;
115
115
  ```
116
116
 
@@ -199,9 +199,14 @@ To use the default theme in your React application, complete the following:
199
199
 
200
200
  ```html
201
201
  // installs the sds font from google fonts
202
- <link rel="preconnect" href="https://fonts.gstatic.com" />
202
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
203
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
204
+ <link
205
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
206
+ rel="stylesheet"
207
+ />
203
208
  <link
204
- href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap"
209
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
205
210
  rel="stylesheet"
206
211
  />
207
212
  ```
package/dist/index.cjs.js CHANGED
@@ -131,7 +131,7 @@ function generateDefaultValues(props) {
131
131
  left: 0,
132
132
  top: 0,
133
133
  // (atarashansky): this is the key change to align x and y axis
134
- // labels to fixed spacings
134
+ // labels to fixed spaces
135
135
  width: "".concat(width, "px"),
136
136
  };
137
137
  var defaultAxisPointer = {
package/dist/index.esm.js CHANGED
@@ -129,7 +129,7 @@ function generateDefaultValues(props) {
129
129
  left: 0,
130
130
  top: 0,
131
131
  // (atarashansky): this is the key change to align x and y axis
132
- // labels to fixed spacings
132
+ // labels to fixed spaces
133
133
  width: "".concat(width, "px"),
134
134
  };
135
135
  var defaultAxisPointer = {
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
  }