@czi-sds/components 19.3.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 +5 -3
package/dist/variables.css CHANGED
@@ -1,112 +1,248 @@
1
1
  :root {
2
- --sds-font-letter-spacing-default: 0.3px;
3
- --sds-font-letter-spacing-caps: 1px;
2
+ --sds-border-negative-default: 1px solid #DC132C;
3
+ --sds-border-base-divider: 1px solid #EAEAEA;
4
+ --sds-border-base-table: 1px solid #CCCCCC;
5
+ --sds-border-base-disabled: 1px solid #CCCCCC;
6
+ --sds-border-base-default: 1px solid #999999;
7
+ --sds-border-base-black: 2px dashed #000000;
8
+ --sds-border-base-hover: 2px dashed #000000;
9
+ --sds-border-base-dashed: 2px dashed #999999;
10
+ --sds-border-link-dashed: 1px dashed;
11
+ --sds-border-link-solid: 1px solid;
12
+ --sds-border-accent-disabled: 1px solid #A6C9FF;
13
+ --sds-border-accent-default: 1px solid #0B68F8;
14
+ --sds-border-accent-hover: 1px solid #0142A4;
15
+ --sds-border-accent-dashed: 2px dashed #0B68F8;
16
+ --sds-border-info-default: 1px solid #0B68F8;
17
+ --sds-border-beta-default: 1px solid #7A41CE;
18
+ --sds-border-positive-default: 1px solid #3CB371;
19
+ --sds-border-notice-default: 1px solid #F5A623;
20
+ --sds-border-none: none;
21
+ --sds-color-primitive-common-black: #000000;
22
+ --sds-color-primitive-common-white: #FFFFFF;
23
+ --sds-color-primitive-blue-100: #F5F9FF;
24
+ --sds-color-primitive-blue-200: #E9F1FF;
25
+ --sds-color-primitive-blue-300: #A6C9FF;
26
+ --sds-color-primitive-blue-400: #0B68F8;
27
+ --sds-color-primitive-blue-500: #0142A4;
28
+ --sds-color-primitive-blue-600: #002660;
29
+ --sds-color-primitive-gray-100: #F8F8F8;
30
+ --sds-color-primitive-gray-200: #EAEAEA;
31
+ --sds-color-primitive-gray-300: #CCCCCC;
32
+ --sds-color-primitive-gray-400: #999999;
33
+ --sds-color-primitive-gray-500: #767676;
34
+ --sds-color-primitive-gray-600: #545454;
35
+ --sds-color-primitive-green-100: #ECF5F0;
36
+ --sds-color-primitive-green-200: #E6F7ED;
37
+ --sds-color-primitive-green-400: #3CB371;
38
+ --sds-color-primitive-green-500: #349A61;
39
+ --sds-color-primitive-green-600: #1C7F48;
40
+ --sds-color-primitive-purple-100: #F4F0F9;
41
+ --sds-color-primitive-purple-200: #F0EBF6;
42
+ --sds-color-primitive-purple-400: #7A41CE;
43
+ --sds-color-primitive-purple-500: #703CBE;
44
+ --sds-color-primitive-purple-600: #693BAC;
45
+ --sds-color-primitive-red-100: #FEF2F2;
46
+ --sds-color-primitive-red-200: #F8E8E8;
47
+ --sds-color-primitive-red-400: #DC132C;
48
+ --sds-color-primitive-red-500: #C61128;
49
+ --sds-color-primitive-red-600: #B70016;
50
+ --sds-color-primitive-yellow-100: #FCF6EC;
51
+ --sds-color-primitive-yellow-200: #FFF3E1;
52
+ --sds-color-primitive-yellow-400: #F5A623;
53
+ --sds-color-primitive-yellow-500: #D8921F;
54
+ --sds-color-primitive-yellow-600: #946314;
55
+ --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08);
56
+ --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03);
57
+ --sds-color-semantic-text-base-primary: #000000;
58
+ --sds-color-semantic-text-base-secondary: #767676;
59
+ --sds-color-semantic-text-base-disabled: #CCCCCC;
60
+ --sds-color-semantic-text-base-on-fill: #FFFFFF;
61
+ --sds-color-semantic-text-base-on-fill-disabled: #999999;
62
+ --sds-color-semantic-text-base-accent: #002660;
63
+ --sds-color-semantic-text-action-default: #0B68F8;
64
+ --sds-color-semantic-text-action-hover: #0142A4;
65
+ --sds-color-semantic-text-action-pressed: #002660;
66
+ --sds-color-semantic-text-beta: #693BAC;
67
+ --sds-color-semantic-text-info: #002660;
68
+ --sds-color-semantic-text-negative: #B70016;
69
+ --sds-color-semantic-text-notice: #946314;
70
+ --sds-color-semantic-text-positive: #1C7F48;
71
+ --sds-color-semantic-component-base-fill: #FFFFFF;
72
+ --sds-color-semantic-component-base-fill-hover: #F8F8F8;
73
+ --sds-color-semantic-component-base-fill-pressed: #F8F8F8;
74
+ --sds-color-semantic-component-base-fill-open: #F8F8F8;
75
+ --sds-color-semantic-component-base-fill-selected: #000000;
76
+ --sds-color-semantic-component-base-fill-disabled: #CCCCCC;
77
+ --sds-color-semantic-component-base-on-fill-disabled: #999999;
78
+ --sds-color-semantic-component-base-surface: #FFFFFF;
79
+ --sds-color-semantic-component-base-surface-primary: #FFFFFF;
80
+ --sds-color-semantic-component-base-surface-secondary: #F8F8F8;
81
+ --sds-color-semantic-component-base-surface-tertiary: #EAEAEA;
82
+ --sds-color-semantic-component-base-divider: #EAEAEA;
83
+ --sds-color-semantic-component-base-border: #999999;
84
+ --sds-color-semantic-component-base-border-hover: #000000;
85
+ --sds-color-semantic-component-base-border-disabled: #CCCCCC;
86
+ --sds-color-semantic-component-base-icon: #767676;
87
+ --sds-color-semantic-component-base-icon-hover: #000000;
88
+ --sds-color-semantic-component-base-icon-pressed: #000000;
89
+ --sds-color-semantic-component-base-icon-disabled: #CCCCCC;
90
+ --sds-color-semantic-component-accent-fill: #0B68F8;
91
+ --sds-color-semantic-component-accent-fill-hover: #0142A4;
92
+ --sds-color-semantic-component-accent-fill-pressed: #002660;
93
+ --sds-color-semantic-component-accent-fill-on-fill: #FFFFFF;
94
+ --sds-color-semantic-component-accent-fill-disabled: #A6C9FF;
95
+ --sds-color-semantic-component-accent-surface: #E9F1FF;
96
+ --sds-color-semantic-component-accent-border: #0B68F8;
97
+ --sds-color-semantic-component-accent-border-hover: #0142A4;
98
+ --sds-color-semantic-component-accent-border-open: #0B68F8;
99
+ --sds-color-semantic-component-accent-border-focus: #0B68F8;
100
+ --sds-color-semantic-component-accent-border-selected: #0B68F8;
101
+ --sds-color-semantic-component-accent-border-disabled: #A6C9FF;
102
+ --sds-color-semantic-component-accent-icon: #0B68F8;
103
+ --sds-color-semantic-component-beta-fill: #7A41CE;
104
+ --sds-color-semantic-component-beta-fill-hover: #703CBE;
105
+ --sds-color-semantic-component-beta-fill-pressed: #693BAC;
106
+ --sds-color-semantic-component-beta-fill-on-fill: #FFFFFF;
107
+ --sds-color-semantic-component-beta-surface: #F0EBF6;
108
+ --sds-color-semantic-component-beta-border: #7A41CE;
109
+ --sds-color-semantic-component-beta-icon: #7A41CE;
110
+ --sds-color-semantic-component-info-fill: #0B68F8;
111
+ --sds-color-semantic-component-info-fill-hover: #0142A4;
112
+ --sds-color-semantic-component-info-fill-pressed: #002660;
113
+ --sds-color-semantic-component-info-fill-on-fill: #FFFFFF;
114
+ --sds-color-semantic-component-info-surface: #E9F1FF;
115
+ --sds-color-semantic-component-info-border: #0B68F8;
116
+ --sds-color-semantic-component-info-icon: #0B68F8;
117
+ --sds-color-semantic-component-negative-fill: #DC132C;
118
+ --sds-color-semantic-component-negative-fill-hover: #C61128;
119
+ --sds-color-semantic-component-negative-fill-pressed: #B70016;
120
+ --sds-color-semantic-component-negative-fill-on-fill: #FFFFFF;
121
+ --sds-color-semantic-component-negative-surface: #F8E8E8;
122
+ --sds-color-semantic-component-negative-border: #DC132C;
123
+ --sds-color-semantic-component-negative-icon: #DC132C;
124
+ --sds-color-semantic-component-neutral-fill: #999999;
125
+ --sds-color-semantic-component-neutral-fill-hover: #767676;
126
+ --sds-color-semantic-component-neutral-fill-pressed: #545454;
127
+ --sds-color-semantic-component-neutral-fill-on-fill: #FFFFFF;
128
+ --sds-color-semantic-component-neutral-surface: #EAEAEA;
129
+ --sds-color-semantic-component-neutral-border: #999999;
130
+ --sds-color-semantic-component-neutral-icon: #999999;
131
+ --sds-color-semantic-component-notice-fill: #F5A623;
132
+ --sds-color-semantic-component-notice-fill-hover: #D8921F;
133
+ --sds-color-semantic-component-notice-fill-pressed: #946314;
134
+ --sds-color-semantic-component-notice-fill-on-fill: #FFFFFF;
135
+ --sds-color-semantic-component-notice-surface: #FFF3E1;
136
+ --sds-color-semantic-component-notice-border: #F5A623;
137
+ --sds-color-semantic-component-notice-icon: #F5A623;
138
+ --sds-color-semantic-component-positive-fill: #3CB371;
139
+ --sds-color-semantic-component-positive-fill-hover: #349A61;
140
+ --sds-color-semantic-component-positive-fill-pressed: #1C7F48;
141
+ --sds-color-semantic-component-positive-fill-on-fill: #FFFFFF;
142
+ --sds-color-semantic-component-positive-surface: #E6F7ED;
143
+ --sds-color-semantic-component-positive-border: #3CB371;
144
+ --sds-color-semantic-component-positive-icon: #3CB371;
145
+ --sds-corner-l: 20px;
146
+ --sds-corner-m: 4px;
147
+ --sds-corner-s: 2px;
148
+ --sds-corner-none: 0px;
149
+ --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
150
+ --sds-drop-shadow-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);
151
+ --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
152
+ --sds-drop-shadow-none: none;
4
153
  --sds-font-color: black;
5
- --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
6
- --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
7
- --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
8
- --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
9
- --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
10
- --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
11
- --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
12
- --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
13
- --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
14
- --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
15
- --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
16
- --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
17
- --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
18
- --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
154
+ --sds-font-font-family-body: "Inter", sans-serif;
155
+ --sds-font-font-family-caps: "Inter", sans-serif;
156
+ --sds-font-font-family-code: "IBM Plex Mono", monospace;
157
+ --sds-font-font-family-header: "Inter", sans-serif;
158
+ --sds-font-font-family-tabular: "Inter", sans-serif;
159
+ --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif;
160
+ --sds-font-body-xxxs-400-letter-spacing: 0.1px;
161
+ --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
162
+ --sds-font-body-xxxs-600-letter-spacing: 0.1px;
163
+ --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif;
164
+ --sds-font-body-xxs-400-letter-spacing: 0.1px;
165
+ --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif;
166
+ --sds-font-body-xxs-600-letter-spacing: 0.1px;
167
+ --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif;
168
+ --sds-font-body-xs-400-letter-spacing: 0.08px;
169
+ --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif;
170
+ --sds-font-body-xs-600-letter-spacing: 0.08px;
171
+ --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif;
172
+ --sds-font-body-s-400-letter-spacing: 0.08px;
173
+ --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif;
174
+ --sds-font-body-s-600-letter-spacing: 0.08px;
175
+ --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif;
176
+ --sds-font-body-m-400-letter-spacing: 0px;
177
+ --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif;
178
+ --sds-font-body-m-600-letter-spacing: 0px;
179
+ --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif;
180
+ --sds-font-body-l-400-letter-spacing: 0px;
181
+ --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif;
182
+ --sds-font-body-l-600-letter-spacing: 0px;
183
+ --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif;
184
+ --sds-font-caps-xxxxs-600-letter-spacing: 0.5px;
19
185
  --sds-font-caps-xxxxs-600-text-transform: uppercase;
20
- --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
186
+ --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
187
+ --sds-font-caps-xxxs-600-letter-spacing: 0.5px;
21
188
  --sds-font-caps-xxxs-600-text-transform: uppercase;
22
- --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
189
+ --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif;
190
+ --sds-font-caps-xxs-600-letter-spacing: 0.5px;
23
191
  --sds-font-caps-xxs-600-text-transform: uppercase;
24
- --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
25
- --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
26
- --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
27
- --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
28
- --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
29
- --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
30
- --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
31
- --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
32
- --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
33
- --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
34
- --sds-color-beta-100: #f4f0f9;
35
- --sds-color-beta-200: #f0ebf6;
36
- --sds-color-beta-400: #7a41ce;
37
- --sds-color-beta-600: #693bac;
38
- --sds-color-error-100: #fef2f2;
39
- --sds-color-error-200: #f8e8e8;
40
- --sds-color-error-400: #dc132c;
41
- --sds-color-error-600: #b70016;
42
- --sds-color-gray-100: #f8f8f8;
43
- --sds-color-gray-200: #eaeaea;
44
- --sds-color-gray-300: #cccccc;
45
- --sds-color-gray-400: #999999;
46
- --sds-color-gray-500: #767676;
47
- --sds-color-gray-600: #545454;
48
- --sds-color-gray-black: #000000;
49
- --sds-color-gray-white: #ffffff;
50
- --sds-color-info-100: #eff2fc;
51
- --sds-color-info-200: #ebeffc;
52
- --sds-color-info-400: #3867fa;
53
- --sds-color-info-600: #223f9c;
54
- --sds-color-primary-100: #f8f9fe;
55
- --sds-color-primary-200: #eff2fc;
56
- --sds-color-primary-300: #a9bdfc;
57
- --sds-color-primary-400: #3867fa;
58
- --sds-color-primary-500: #2b52cd;
59
- --sds-color-primary-600: #223f9c;
60
- --sds-color-secondary-400: #9bc74e;
61
- --sds-color-success-100: #ecf5f0;
62
- --sds-color-success-200: #e6f7ed;
63
- --sds-color-success-400: #3cb371;
64
- --sds-color-success-600: #1c7f48;
65
- --sds-color-warning-100: #fcf6ec;
66
- --sds-color-warning-200: #fff3e1;
67
- --sds-color-warning-400: #f5a623;
68
- --sds-color-warning-600: #946314;
69
- --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
70
- --sds-drop-shadows-shadow-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);
71
- --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
72
- --sds-borders-error-400: 1px solid #dc132c;
73
- --sds-borders-gray-100: 1px solid #f8f8f8;
74
- --sds-borders-gray-200: 1px solid #eaeaea;
75
- --sds-borders-gray-300: 1px solid #cccccc;
76
- --sds-borders-gray-400: 1px solid #999999;
77
- --sds-borders-gray-500: 1px solid #767676;
78
- --sds-borders-gray-dashed: 2px dashed #999999;
79
- --sds-borders-link-dashed: 1px dashed;
80
- --sds-borders-link-solid: 1px solid;
81
- --sds-borders-primary-300: 1px solid #a9bdfc;
82
- --sds-borders-primary-400: 1px solid #3867fa;
83
- --sds-borders-primary-500: 1px solid #2b52cd;
84
- --sds-borders-primary-600: 1px solid #223f9c;
85
- --sds-borders-primary-dashed: 2px dashed #3867fa;
86
- --sds-borders-success-400: 1px solid #3cb371;
87
- --sds-borders-warning-400: 1px solid #f5a623;
88
- --sds-spaces-default: 10px;
89
- --sds-spaces-xxxs: 2px;
90
- --sds-spaces-xxs: 4px;
91
- --sds-spaces-xs: 6px;
92
- --sds-spaces-s: 8px;
93
- --sds-spaces-m: 10px;
94
- --sds-spaces-l: 14px;
95
- --sds-spaces-xl: 22px;
96
- --sds-spaces-xxl: 38px;
97
- --sds-icon-sizes-input-height: 16px; /* for use with input icons only */
98
- --sds-icon-sizes-input-width: 16px; /* for use with input icons only */
99
- --sds-icon-sizes-xs-height: 10px;
100
- --sds-icon-sizes-xs-width: 10px;
101
- --sds-icon-sizes-s-height: 14px;
102
- --sds-icon-sizes-s-width: 14px;
103
- --sds-icon-sizes-l-height: 22px;
104
- --sds-icon-sizes-l-width: 22px;
105
- --sds-icon-sizes-xl-height: 32px;
106
- --sds-icon-sizes-xl-width: 32px;
107
- --sds-corners-corner-l: 20px;
108
- --sds-corners-corner-m: 4px;
109
- --sds-corners-corner-s: 2px;
110
- --sds-corners-corner-none: 0px;
192
+ --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif;
193
+ --sds-font-header-xxxs-600-letter-spacing: 0.1px;
194
+ --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif;
195
+ --sds-font-header-xxs-600-letter-spacing: 0.1px;
196
+ --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif;
197
+ --sds-font-header-xs-600-letter-spacing: 0.08px;
198
+ --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif;
199
+ --sds-font-header-s-600-letter-spacing: 0.08px;
200
+ --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif;
201
+ --sds-font-header-m-600-letter-spacing: 0px;
202
+ --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif;
203
+ --sds-font-header-l-600-letter-spacing: 0px;
204
+ --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif;
205
+ --sds-font-header-xl-600-letter-spacing: 0px;
206
+ --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif;
207
+ --sds-font-header-xxl-600-letter-spacing: 0px;
208
+ --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif;
209
+ --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums;
210
+ --sds-font-tabular-xs-400-letter-spacing: 0px;
211
+ --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif;
212
+ --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums;
213
+ --sds-font-tabular-xs-600-letter-spacing: 0px;
214
+ --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif;
215
+ --sds-font-tabular-s-400-font-variant-numeric: tabular-nums;
216
+ --sds-font-tabular-s-400-letter-spacing: 0px;
217
+ --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif;
218
+ --sds-font-tabular-s-600-font-variant-numeric: tabular-nums;
219
+ --sds-font-tabular-s-600-letter-spacing: 0px;
220
+ --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace;
221
+ --sds-font-code-xs-400-letter-spacing: 0px;
222
+ --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace;
223
+ --sds-font-code-xs-600-letter-spacing: 0px;
224
+ --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace;
225
+ --sds-font-code-s-400-letter-spacing: 0px;
226
+ --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace;
227
+ --sds-font-code-s-600-letter-spacing: 0px;
228
+ --sds-icon-size-input-height: 16px;
229
+ --sds-icon-size-input-width: 16px;
230
+ --sds-icon-size-xs-height: 12px;
231
+ --sds-icon-size-xs-width: 12px;
232
+ --sds-icon-size-s-height: 16px;
233
+ --sds-icon-size-s-width: 16px;
234
+ --sds-icon-size-l-height: 24px;
235
+ --sds-icon-size-l-width: 24px;
236
+ --sds-icon-size-xl-height: 32px;
237
+ --sds-icon-size-xl-width: 32px;
238
+ --sds-space-default: 12px;
239
+ --sds-space-xxxs: 2px;
240
+ --sds-space-xxs: 4px;
241
+ --sds-space-xs: 6px;
242
+ --sds-space-s: 8px;
243
+ --sds-space-m: 12px;
244
+ --sds-space-l: 16px;
245
+ --sds-space-xl: 24px;
246
+ --sds-space-xxl: 40px;
111
247
  }
112
248