@osdk/react-components-styles 0.2.0-beta.2 → 0.2.0-beta.24

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 (17) hide show
  1. package/CHANGELOG.md +77 -0
  2. package/README.md +9 -6
  3. package/package.json +3 -3
  4. package/src/index.css +16 -90
  5. package/src/tokens/base.css +192 -0
  6. package/src/tokens/button.css +17 -0
  7. package/src/tokens/cbac-picker.css +119 -0
  8. package/src/tokens/checkbox.css +14 -0
  9. package/src/tokens/datetime-picker.css +98 -0
  10. package/src/tokens/dialog.css +23 -0
  11. package/src/tokens/draggable.css +11 -0
  12. package/src/tokens/filter-list.css +422 -0
  13. package/src/tokens/form.css +29 -0
  14. package/src/tokens/input.css +34 -0
  15. package/src/tokens/pdf-viewer.css +45 -0
  16. package/src/tokens/table.css +85 -0
  17. package/src/tokens/tooltip.css +9 -0
package/src/tokens/dialog.css ADDED
@@ -0,0 +1,23 @@
1
+ /* Dialog Styling */
2
+ :root {
3
+ --osdk-dialog-padding: calc(var(--osdk-surface-spacing) * 2)
4
+ calc(var(--osdk-surface-spacing) * 4);
5
+ --osdk-dialog-backdrop-bg: var(--osdk-background-backdrop);
6
+
7
+ /* Header */
8
+ --osdk-dialog-header-padding: var(--osdk-dialog-padding);
9
+ --osdk-dialog-title-font-size: var(--osdk-typography-size-body-medium);
10
+ --osdk-dialog-title-font-weight: var(--osdk-typography-weight-bold);
11
+
12
+ /* Body */
13
+ --osdk-dialog-bg: var(--osdk-background-primary);
14
+ --osdk-dialog-shadow: var(--osdk-surface-shadow-2);
15
+ --osdk-dialog-min-width: 500px;
16
+ --osdk-dialog-min-height: 300px;
17
+ --osdk-dialog-max-width: 1000px;
18
+ --osdk-dialog-max-height: 600px;
19
+ --osdk-dialog-body-padding: var(--osdk-dialog-padding);
20
+
21
+ /* Footer */
22
+ --osdk-dialog-footer-padding: var(--osdk-dialog-padding);
23
+ }
package/src/tokens/draggable.css ADDED
@@ -0,0 +1,11 @@
1
+ :root {
2
+ --osdk-draggable-item-bg: var(--osdk-background-primary);
3
+ --osdk-draggable-item-border: var(--osdk-surface-border);
4
+ --osdk-draggable-item-border-radius: var(--osdk-surface-border-radius);
5
+ --osdk-draggable-item-padding: calc(var(--osdk-surface-spacing) * 2)
6
+ calc(var(--osdk-surface-spacing) * 3);
7
+ --osdk-draggable-item-gap: var(--osdk-surface-spacing);
8
+ --osdk-draggable-item-drag-icon-color: var(--osdk-drag-handle-color);
9
+ --osdk-draggable-item-drag-icon-color-hover: var(--osdk-drag-handle-color-hover);
10
+ --osdk-draggable-item-icon-size: var(--osdk-iconography-size-small);
11
+ }
package/src/tokens/filter-list.css ADDED
@@ -0,0 +1,422 @@
1
+ :root {
2
+ /* Filter List Container */
3
+ --osdk-filter-list-bg: var(--osdk-background-primary);
4
+ --osdk-filter-list-border: var(--osdk-surface-border);
5
+ --osdk-filter-list-border-radius: var(--osdk-surface-border-radius);
6
+ --osdk-filter-list-padding: calc(var(--osdk-surface-spacing) * 3);
7
+ --osdk-filter-list-gap: calc(var(--osdk-surface-spacing) * 3);
8
+ --osdk-filter-list-addButton-padding-top: calc(
9
+ var(--osdk-surface-spacing) * 2
10
+ );
11
+ --osdk-filter-list-addButton-container-bg: var(--osdk-background-primary);
12
+
13
+ /* Filter List Content */
14
+ --osdk-filter-list-content-gap: calc(var(--osdk-surface-spacing) * 3);
15
+ --osdk-filter-list-empty-text-color: var(--osdk-typography-color-muted);
16
+ --osdk-filter-list-empty-font-size: var(--osdk-typography-size-body-small);
17
+
18
+ /* Filter List Header */
19
+ --osdk-filter-header-padding-bottom: calc(var(--osdk-surface-spacing) * 2);
20
+ --osdk-filter-header-border-bottom: var(--osdk-surface-border);
21
+ --osdk-filter-header-titleContainer-gap: var(--osdk-surface-spacing);
22
+ --osdk-filter-header-font-family: var(--osdk-typography-family-default);
23
+ --osdk-filter-header-font-size: var(--osdk-typography-size-body-medium);
24
+ --osdk-filter-header-font-weight: var(--osdk-typography-weight-bold);
25
+ --osdk-filter-header-color: var(--osdk-typography-color-default-rest);
26
+ --osdk-filter-header-icon-color: var(--osdk-typography-color-muted);
27
+ --osdk-filter-header-activeCount-font-size: var(
28
+ --osdk-typography-size-body-small
29
+ );
30
+ --osdk-filter-header-activeCount-color: var(--osdk-typography-color-muted);
31
+ --osdk-filter-header-button-padding: calc(var(--osdk-surface-spacing) * 1);
32
+ --osdk-filter-header-button-bg: transparent;
33
+ --osdk-filter-header-button-border-radius: var(
34
+ --osdk-surface-border-radius
35
+ );
36
+ --osdk-filter-header-button-transition: var(
37
+ --osdk-emphasis-transition-duration
38
+ )
39
+ var(--osdk-emphasis-ease-default);
40
+ --osdk-filter-header-button-bg-hover: var(--osdk-custom-color-gray-1);
41
+ --osdk-filter-header-button-bg-active: var(--osdk-custom-color-gray-2);
42
+ --osdk-filter-header-reset-font-size: var(
43
+ --osdk-typography-size-body-small
44
+ );
45
+ --osdk-filter-header-reset-color: var(--osdk-intent-primary-rest);
46
+ --osdk-filter-header-reset-color-disabled: var(
47
+ --osdk-typography-color-muted
48
+ );
49
+ --osdk-filter-header-reset-padding: calc(var(--osdk-surface-spacing) * 0.5)
50
+ calc(var(--osdk-surface-spacing) * 1.5);
51
+ --osdk-filter-header-collapse-icon-size: calc(
52
+ var(--osdk-surface-spacing) * 1.5
53
+ );
54
+ --osdk-filter-header-collapse-icon-border-width: var(
55
+ --osdk-surface-border-width
56
+ );
57
+ --osdk-filter-header-collapse-icon-color: var(--osdk-typography-color-muted);
58
+
59
+ /* Filter Item */
60
+ --osdk-filter-item-gap: calc(var(--osdk-surface-spacing) * 1);
61
+ --osdk-filter-item-label-font-family: var(--osdk-typography-family-default);
62
+ --osdk-filter-item-label-font-size: var(--osdk-typography-size-body-small);
63
+ --osdk-filter-item-label-font-weight: var(--osdk-typography-weight-bold);
64
+ --osdk-filter-item-label-color: var(--osdk-typography-color-default-rest);
65
+ --osdk-filter-item-drag-handle-padding: calc(
66
+ var(--osdk-surface-spacing) * 0.5
67
+ );
68
+ --osdk-filter-item-drag-handle-bg: transparent;
69
+ --osdk-filter-item-drag-handle-border-radius: var(
70
+ --osdk-surface-border-radius
71
+ );
72
+ --osdk-filter-item-drag-handle-color: var(--osdk-drag-handle-color);
73
+ --osdk-filter-item-drag-handle-color-hover: var(--osdk-drag-handle-color-hover);
74
+ --osdk-filter-item-drag-handle-bg-hover: var(--osdk-custom-color-gray-1);
75
+ --osdk-filter-item-drag-handle-focus-outline-color: var(
76
+ --osdk-emphasis-focus-color
77
+ );
78
+ --osdk-filter-item-dragging-opacity: 0.5;
79
+ --osdk-filter-item-drag-overlay-shadow: var(--osdk-surface-shadow-2);
80
+ --osdk-filter-item-drag-overlay-border-radius: var(
81
+ --osdk-surface-border-radius
82
+ );
83
+ --osdk-filter-item-drag-overlay-bg: var(--osdk-background-primary);
84
+
85
+ /* Shared Input Tokens */
86
+ --osdk-filter-input-bg: var(--osdk-background-primary);
87
+ --osdk-filter-input-border: var(--osdk-surface-border);
88
+ --osdk-filter-input-border-radius: var(--osdk-surface-border-radius);
89
+ --osdk-filter-input-padding: calc(var(--osdk-surface-spacing) * 1)
90
+ calc(var(--osdk-surface-spacing) * 2);
91
+ --osdk-filter-input-gap: var(--osdk-surface-spacing);
92
+ --osdk-filter-input-transition: var(--osdk-emphasis-transition-duration)
93
+ var(--osdk-emphasis-ease-default);
94
+ --osdk-filter-input-focus-border: var(--osdk-intent-primary-rest);
95
+ --osdk-filter-input-focus-outline-width: var(--osdk-emphasis-focus-width);
96
+ --osdk-filter-input-focus-outline-color: var(--osdk-emphasis-focus-color);
97
+ --osdk-filter-input-focus-outline-offset: var(--osdk-emphasis-focus-offset);
98
+ --osdk-filter-input-icon-color: var(--osdk-typography-color-muted);
99
+ --osdk-filter-input-font-family: var(--osdk-typography-family-default);
100
+ --osdk-filter-input-font-size: var(--osdk-typography-size-body-small);
101
+ --osdk-filter-input-color: var(--osdk-typography-color-default-rest);
102
+ --osdk-filter-input-placeholder-color: var(--osdk-typography-color-muted);
103
+ --osdk-filter-input-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
104
+ --osdk-filter-input-clear-bg: transparent;
105
+ --osdk-filter-input-clear-border-radius: var(--osdk-surface-border-radius);
106
+ --osdk-filter-input-clear-bg-hover: var(--osdk-custom-color-gray-1);
107
+ --osdk-filter-input-clear-bg-active: var(--osdk-custom-color-gray-2);
108
+
109
+ /* Shared Message Tokens */
110
+ --osdk-filter-message-font-family: var(--osdk-typography-family-default);
111
+ --osdk-filter-message-font-size: var(--osdk-typography-size-body-small);
112
+ --osdk-filter-message-padding: var(--osdk-surface-spacing);
113
+ --osdk-filter-message-color-muted: var(--osdk-typography-color-muted);
114
+ --osdk-filter-message-color-danger: var(--osdk-intent-danger-rest);
115
+
116
+ /* Tag Tokens */
117
+ --osdk-filter-tag-container-gap: calc(var(--osdk-surface-spacing) * 1);
118
+ --osdk-filter-tag-gap: calc(var(--osdk-surface-spacing) * 0.5);
119
+ --osdk-filter-tag-padding: calc(var(--osdk-surface-spacing) * 0.5)
120
+ calc(var(--osdk-surface-spacing) * 1);
121
+ --osdk-filter-tag-border-radius: var(--osdk-surface-border-radius);
122
+ --osdk-filter-tag-bg: var(--osdk-custom-color-gray-1);
123
+ --osdk-filter-tag-font-family: var(--osdk-typography-family-default);
124
+ --osdk-filter-tag-font-size: var(--osdk-typography-size-body-small);
125
+ --osdk-filter-tag-line-height: 1.4;
126
+ --osdk-filter-tag-color: var(--osdk-typography-color-default-rest);
127
+ --osdk-filter-tag-remove-color: var(--osdk-typography-color-muted);
128
+ --osdk-filter-tag-remove-font-size: var(
129
+ --osdk-typography-size-body-medium
130
+ );
131
+ --osdk-filter-tag-remove-transition: var(
132
+ --osdk-emphasis-transition-duration
133
+ )
134
+ var(--osdk-emphasis-ease-default);
135
+ --osdk-filter-tag-remove-color-hover: var(
136
+ --osdk-typography-color-default-rest
137
+ );
138
+
139
+ /* Error Boundary Tokens */
140
+ --osdk-error-boundary-gap: calc(var(--osdk-surface-spacing) * 2);
141
+ --osdk-error-boundary-padding: calc(var(--osdk-surface-spacing) * 2);
142
+ --osdk-error-boundary-border-radius: var(--osdk-surface-border-radius);
143
+ --osdk-error-boundary-bg: var(
144
+ --osdk-surface-background-color-danger-rest
145
+ );
146
+ --osdk-error-boundary-font-size: var(--osdk-typography-size-body-small);
147
+ --osdk-error-boundary-text-color: var(--osdk-typography-color-danger-rest);
148
+ --osdk-error-boundary-button-padding: calc(var(--osdk-surface-spacing) * 1)
149
+ calc(var(--osdk-surface-spacing) * 2);
150
+ --osdk-error-boundary-button-border-color: currentColor;
151
+ --osdk-error-boundary-button-border-radius: var(
152
+ --osdk-surface-border-radius
153
+ );
154
+ --osdk-error-boundary-button-font-size: var(
155
+ --osdk-typography-size-body-x-small
156
+ );
157
+ --osdk-error-boundary-button-color: inherit;
158
+ --osdk-error-boundary-button-hover-bg: var(--osdk-custom-color-gray-1);
159
+
160
+ /* Checkbox List Tokens */
161
+ --osdk-filter-checkbox-list-gap: calc(var(--osdk-surface-spacing) * 0.5);
162
+ --osdk-filter-checkbox-row-padding: calc(var(--osdk-surface-spacing) * 0.5)
163
+ 0;
164
+ --osdk-filter-checkbox-label-gap: var(--osdk-surface-spacing);
165
+ --osdk-filter-checkbox-value-font-family: var(
166
+ --osdk-typography-family-default
167
+ );
168
+ --osdk-filter-checkbox-value-font-size: var(
169
+ --osdk-typography-size-body-medium
170
+ );
171
+ --osdk-filter-checkbox-value-line-height: 1.4;
172
+ --osdk-filter-checkbox-value-color: var(
173
+ --osdk-typography-color-default-rest
174
+ );
175
+
176
+ /* Toggle Tokens */
177
+ --osdk-filter-toggle-label-gap: var(--osdk-surface-spacing);
178
+ --osdk-filter-toggle-label-font-family: var(
179
+ --osdk-typography-family-default
180
+ );
181
+ --osdk-filter-toggle-label-font-size: var(
182
+ --osdk-typography-size-body-medium
183
+ );
184
+ --osdk-filter-toggle-label-line-height: 1.4;
185
+ --osdk-filter-toggle-label-color: var(--osdk-typography-color-default-rest);
186
+
187
+ /* Listogram Tokens */
188
+ --osdk-filter-listogram-gap: var(--osdk-surface-spacing);
189
+ --osdk-filter-listogram-row-gap: calc(var(--osdk-surface-spacing) * 2);
190
+ --osdk-filter-listogram-row-padding: var(--osdk-surface-spacing);
191
+ --osdk-filter-listogram-row-border-radius: var(
192
+ --osdk-surface-border-radius
193
+ );
194
+ --osdk-filter-listogram-row-transition: var(
195
+ --osdk-emphasis-transition-duration
196
+ )
197
+ var(--osdk-emphasis-ease-default);
198
+ --osdk-filter-listogram-row-bg-hover: var(
199
+ --osdk-surface-background-color-default-hover
200
+ );
201
+ --osdk-filter-listogram-row-bg-active: var(
202
+ --osdk-surface-background-color-default-active
203
+ );
204
+ --osdk-filter-listogram-row-focus-outline: var(
205
+ --osdk-emphasis-focus-width
206
+ )
207
+ solid var(--osdk-emphasis-focus-color);
208
+ --osdk-filter-listogram-row-focus-offset: var(--osdk-emphasis-focus-offset);
209
+ --osdk-filter-listogram-label-font-family: var(
210
+ --osdk-typography-family-default
211
+ );
212
+ --osdk-filter-listogram-label-font-size: var(
213
+ --osdk-typography-size-body-medium
214
+ );
215
+ --osdk-filter-listogram-label-color: var(
216
+ --osdk-typography-color-default-rest
217
+ );
218
+ --osdk-filter-listogram-bar-height: calc(var(--osdk-surface-spacing) * 2);
219
+ --osdk-filter-listogram-bar-width: calc(var(--osdk-surface-spacing) * 12.5);
220
+ --osdk-filter-listogram-bar-bg: var(--osdk-palette-gray-100);
221
+ --osdk-filter-listogram-bar-border-radius: var(
222
+ --osdk-surface-border-radius
223
+ );
224
+ --osdk-filter-listogram-bar-color: var(--osdk-custom-color-gray-3);
225
+ --osdk-filter-listogram-bar-fill-transition: var(
226
+ --osdk-emphasis-transition-duration
227
+ )
228
+ var(--osdk-emphasis-ease-default);
229
+ --osdk-filter-listogram-count-font-family: var(
230
+ --osdk-typography-family-default
231
+ );
232
+ --osdk-filter-listogram-count-font-size: var(
233
+ --osdk-typography-size-body-small
234
+ );
235
+ --osdk-filter-listogram-count-color: var(--osdk-typography-color-muted);
236
+
237
+ /* Range Input Tokens */
238
+ --osdk-filter-range-gap: calc(var(--osdk-surface-spacing) * 2);
239
+ --osdk-filter-range-histogram-height: calc(var(--osdk-surface-spacing) * 15);
240
+ --osdk-filter-range-histogram-bar-gap: calc(var(--osdk-surface-spacing) * 0.5);
241
+ --osdk-filter-range-histogram-bar-min-width: var(--osdk-surface-spacing);
242
+ --osdk-filter-range-histogram-bar-color: var(--osdk-palette-gray-200);
243
+ --osdk-filter-range-histogram-bar-active-color: var(
244
+ --osdk-intent-primary-rest
245
+ );
246
+ --osdk-filter-range-histogram-bar-transition: var(
247
+ --osdk-emphasis-transition-duration
248
+ )
249
+ var(--osdk-emphasis-ease-default);
250
+ --osdk-filter-range-inputs-gap: calc(var(--osdk-surface-spacing) * 2);
251
+ --osdk-filter-range-input-wrapper-gap: var(--osdk-surface-spacing);
252
+ --osdk-filter-range-label-font-family: var(
253
+ --osdk-typography-family-default
254
+ );
255
+ --osdk-filter-range-label-font-size: var(--osdk-typography-size-body-small);
256
+ --osdk-filter-range-label-color: var(--osdk-typography-color-muted);
257
+ --osdk-filter-range-separator-color: var(--osdk-typography-color-muted);
258
+
259
+ /* Timeline Input Tokens */
260
+ --osdk-filter-timeline-labels-gap: var(--osdk-surface-spacing);
261
+ --osdk-filter-timeline-labels-font-family: var(
262
+ --osdk-typography-family-default
263
+ );
264
+ --osdk-filter-timeline-labels-font-size: var(
265
+ --osdk-typography-size-body-small
266
+ );
267
+ --osdk-filter-timeline-labels-color: var(--osdk-typography-color-muted);
268
+ --osdk-filter-timeline-button-padding: calc(
269
+ var(--osdk-surface-spacing) * 0.5
270
+ );
271
+ --osdk-filter-timeline-button-color: var(--osdk-iconography-color-muted);
272
+ --osdk-filter-timeline-button-border-radius: var(
273
+ --osdk-surface-border-radius
274
+ );
275
+ --osdk-filter-timeline-button-bg-hover: var(
276
+ --osdk-surface-background-color-default-hover
277
+ );
278
+ --osdk-filter-timeline-button-color-hover: var(
279
+ --osdk-typography-color-default-rest
280
+ );
281
+ --osdk-filter-timeline-brush-color: var(--osdk-typography-color-muted);
282
+ --osdk-filter-timeline-input-font-size: var(
283
+ --osdk-typography-size-body-medium
284
+ );
285
+
286
+ /* Null Value Wrapper Tokens */
287
+ --osdk-filter-null-wrapper-gap: var(--osdk-surface-spacing);
288
+ --osdk-filter-null-row-padding: calc(var(--osdk-surface-spacing) * 1) 0;
289
+ --osdk-filter-null-row-border-top: var(--osdk-surface-border);
290
+ --osdk-filter-null-label-gap: var(--osdk-surface-spacing);
291
+ --osdk-filter-null-label-font-family: var(--osdk-typography-family-default);
292
+ --osdk-filter-null-label-font-size: var(--osdk-typography-size-body-medium);
293
+ --osdk-filter-null-label-line-height: 1.4;
294
+ --osdk-filter-null-label-color: var(--osdk-typography-color-default-rest);
295
+ --osdk-filter-null-count-font-family: var(--osdk-typography-family-default);
296
+ --osdk-filter-null-count-font-size: var(--osdk-typography-size-body-small);
297
+ --osdk-filter-null-count-color: var(--osdk-typography-color-muted);
298
+
299
+ /* Multi-Select Tokens */
300
+ --osdk-filter-multiselect-gap: calc(var(--osdk-surface-spacing) * 2);
301
+ --osdk-filter-multiselect-inputRow-gap: var(--osdk-surface-spacing);
302
+
303
+ /* Single/Multi Date Tokens */
304
+ --osdk-filter-select-container-gap: var(--osdk-surface-spacing);
305
+ --osdk-filter-date-clear-font-family: var(--osdk-typography-family-default);
306
+ --osdk-filter-date-clear-font-size: var(--osdk-typography-size-body-small);
307
+ --osdk-filter-date-clear-color: var(--osdk-intent-primary-rest);
308
+ --osdk-filter-date-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
309
+
310
+ /* Single Select Tokens */
311
+ --osdk-filter-select-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
312
+ --osdk-filter-select-clear-color: var(--osdk-typography-color-muted);
313
+ --osdk-filter-select-clear-border-radius: var(
314
+ --osdk-surface-border-radius
315
+ );
316
+ --osdk-filter-select-clear-transition: var(
317
+ --osdk-emphasis-transition-duration
318
+ )
319
+ var(--osdk-emphasis-ease-default);
320
+ --osdk-filter-select-clear-color-hover: var(
321
+ --osdk-typography-color-default-rest
322
+ );
323
+ --osdk-filter-select-clear-bg-hover: var(--osdk-custom-color-gray-1);
324
+
325
+ /* Text Tags Tokens */
326
+ --osdk-filter-texttags-gap: var(--osdk-surface-spacing);
327
+
328
+ /* Listogram Selected Color */
329
+ --osdk-filter-listogram-selected-color: var(--osdk-intent-primary-rest);
330
+
331
+ /* Filter Item */
332
+ --osdk-filter-item-border-radius: var(--osdk-surface-border-radius);
333
+ --osdk-filter-item-padding: calc(var(--osdk-surface-spacing) * 1.5);
334
+
335
+ /* Checkbox Row Hover */
336
+ --osdk-filter-checkbox-row-bg-hover: var(
337
+ --osdk-surface-background-color-default-hover
338
+ );
339
+ --osdk-filter-checkbox-row-border-radius: var(--osdk-surface-border-radius);
340
+
341
+ /* Header Action Buttons (search, remove, overflow) */
342
+ --osdk-filter-item-header-action-padding: calc(
343
+ var(--osdk-surface-spacing) * 0.5
344
+ );
345
+ --osdk-filter-item-header-action-color: var(--osdk-typography-color-muted);
346
+ --osdk-filter-item-header-action-bg-hover: var(--osdk-custom-color-gray-1);
347
+ --osdk-filter-item-header-action-border-radius: var(
348
+ --osdk-surface-border-radius
349
+ );
350
+
351
+ /* Exclude Dropdown */
352
+ --osdk-filter-item-exclude-dropdown-font-family: var(
353
+ --osdk-typography-family-default
354
+ );
355
+ --osdk-filter-item-exclude-dropdown-font-size: var(
356
+ --osdk-typography-size-body-small
357
+ );
358
+ --osdk-filter-item-exclude-dropdown-color: var(
359
+ --osdk-typography-color-default-rest
360
+ );
361
+ --osdk-filter-item-exclude-dropdown-separator-color: var(
362
+ --osdk-surface-border-color
363
+ );
364
+
365
+ /* Exclude Dropdown Popup */
366
+ --osdk-filter-item-exclude-dropdown-min-width: calc(var(--osdk-surface-spacing) * 30);
367
+
368
+ /* Overflow / Dropdown Menu */
369
+ --osdk-filter-item-menu-bg: var(--osdk-background-primary);
370
+ --osdk-filter-item-menu-shadow: var(--osdk-surface-shadow-2);
371
+ --osdk-filter-item-menu-border: var(--osdk-surface-border);
372
+ --osdk-filter-item-menu-border-radius: var(--osdk-surface-border-radius);
373
+ --osdk-filter-item-menu-padding: calc(var(--osdk-surface-spacing) * 0.5);
374
+ --osdk-filter-item-menu-item-padding: calc(var(--osdk-surface-spacing) * 1)
375
+ calc(var(--osdk-surface-spacing) * 2);
376
+ --osdk-filter-item-menu-item-font-family: var(
377
+ --osdk-typography-family-default
378
+ );
379
+ --osdk-filter-item-menu-item-font-size: var(
380
+ --osdk-typography-size-body-small
381
+ );
382
+ --osdk-filter-item-menu-item-color: var(
383
+ --osdk-typography-color-default-rest
384
+ );
385
+ --osdk-filter-item-menu-item-bg-hover: var(--osdk-custom-color-gray-1);
386
+ --osdk-filter-item-menu-item-border-radius: var(
387
+ --osdk-surface-border-radius
388
+ );
389
+ --osdk-filter-item-menu-separator-color: var(--osdk-surface-border-color);
390
+ --osdk-filter-item-menu-check-size: calc(var(--osdk-surface-spacing) * 3);
391
+
392
+ /* Collapsed Filter List */
393
+ --osdk-filter-list-collapsed-width: calc(var(--osdk-surface-spacing) * 10);
394
+ --osdk-filter-list-collapsed-label-font-family: var(
395
+ --osdk-typography-family-default
396
+ );
397
+ --osdk-filter-list-collapsed-label-font-size: var(
398
+ --osdk-typography-size-body-small
399
+ );
400
+ --osdk-filter-list-collapsed-label-color: var(
401
+ --osdk-typography-color-default-rest
402
+ );
403
+
404
+ /* Color Dot */
405
+ --osdk-filter-checkbox-color-dot-size: calc(var(--osdk-surface-spacing) * 2);
406
+
407
+ /* Multi Select Count */
408
+ --osdk-filter-multiselect-count-font-family: var(
409
+ --osdk-typography-family-default
410
+ );
411
+ --osdk-filter-multiselect-count-font-size: var(
412
+ --osdk-typography-size-body-small
413
+ );
414
+ --osdk-filter-multiselect-count-color: var(--osdk-typography-color-muted);
415
+
416
+ /* Content Fade Transition */
417
+ --osdk-filter-content-fade-duration: var(--osdk-emphasis-transition-duration);
418
+
419
+ /* Skeleton Loading */
420
+ --osdk-filter-skeleton-text-height: calc(var(--osdk-surface-spacing) * 1.5);
421
+ --osdk-filter-skeleton-count-width: calc(var(--osdk-surface-spacing) * 2.5);
422
+ }
package/src/tokens/form.css ADDED
@@ -0,0 +1,29 @@
1
+ :root {
2
+ /* Form layout */
3
+ --osdk-form-content-padding: calc(var(--osdk-surface-spacing) * 4);
4
+ --osdk-form-field-gap: calc(var(--osdk-surface-spacing) * 4);
5
+
6
+ /* Form header */
7
+ --osdk-form-header-border-color: var(--osdk-surface-border-color-default);
8
+ --osdk-form-header-font-size: var(--osdk-typography-size-body-large);
9
+ --osdk-form-header-font-weight: var(--osdk-typography-weight-bold);
10
+ --osdk-form-header-color: var(--osdk-typography-color-default-rest);
11
+ --osdk-form-header-block-padding: calc(var(--osdk-surface-spacing) * 3);
12
+ --osdk-form-header-inline-padding: var(--osdk-form-content-padding);
13
+
14
+ /* Form footer */
15
+ --osdk-form-footer-border-color: var(--osdk-surface-border-color-default);
16
+
17
+ /* Form labels */
18
+ --osdk-form-label-font-size: var(--osdk-typography-size-body-medium);
19
+ --osdk-form-label-font-weight: var(--osdk-typography-weight-bold);
20
+ --osdk-form-label-color: var(--osdk-typography-color-default-rest);
21
+ --osdk-form-label-field-gap: calc(var(--osdk-surface-spacing) * 1.5);
22
+
23
+ /* Required indicator */
24
+ --osdk-form-required-color: var(--osdk-intent-danger-rest);
25
+
26
+ /* Validation errors */
27
+ --osdk-form-error-font-size: var(--osdk-typography-size-body-small);
28
+ --osdk-form-error-color: var(--osdk-typography-color-danger-rest);
29
+ }
package/src/tokens/input.css ADDED
@@ -0,0 +1,34 @@
1
+ :root {
2
+ /* Input dimensions */
3
+ --osdk-input-min-height: 30px;
4
+ --osdk-input-padding: calc(var(--osdk-surface-spacing) * 1.5)
5
+ calc(var(--osdk-surface-spacing) * 2.5);
6
+ --osdk-input-border-radius: var(--osdk-surface-border-radius);
7
+
8
+ /* Input borders */
9
+ --osdk-input-border-width: var(--osdk-surface-border-width);
10
+ --osdk-input-border-color: var(--osdk-surface-border-color-default);
11
+ --osdk-input-border-color-focus: var(--osdk-intent-primary-rest);
12
+
13
+ /* Input backgrounds */
14
+ --osdk-input-bg: var(--osdk-surface-background-color-default-rest);
15
+ --osdk-input-bg-hover: var(--osdk-surface-background-color-default-hover);
16
+
17
+ /* Input typography */
18
+ --osdk-input-color: var(--osdk-typography-color-default-rest);
19
+ --osdk-input-placeholder-color: var(--osdk-typography-color-muted);
20
+ --osdk-input-font-size: var(--osdk-typography-size-body-medium);
21
+ --osdk-input-font-family: var(--osdk-typography-family-default);
22
+
23
+ /* Input transitions */
24
+ --osdk-input-transition-duration: var(--osdk-emphasis-transition-duration);
25
+ --osdk-input-transition-ease: var(--osdk-emphasis-ease-default);
26
+
27
+ /* Input focus ring */
28
+ --osdk-input-focus-width: var(--osdk-emphasis-focus-width);
29
+ --osdk-input-focus-color: var(--osdk-emphasis-focus-color);
30
+ --osdk-input-focus-offset: var(--osdk-emphasis-focus-offset);
31
+
32
+ /* Input disabled */
33
+ --osdk-input-disabled-opacity: 0.5;
34
+ }
package/src/tokens/pdf-viewer.css ADDED
@@ -0,0 +1,45 @@
1
+ :root {
2
+ /* PDF Viewer - Container */
3
+ --osdk-pdf-viewer-bg: var(--osdk-background-primary);
4
+ --osdk-pdf-viewer-border: var(--osdk-surface-border);
5
+
6
+ /* PDF Viewer - Toolbar */
7
+ --osdk-pdf-viewer-toolbar-bg: var(--osdk-background-secondary);
8
+ --osdk-pdf-viewer-toolbar-border: var(--osdk-surface-border);
9
+ --osdk-pdf-viewer-toolbar-color: var(--osdk-typography-color-default-rest);
10
+ --osdk-pdf-viewer-toolbar-gap: var(--osdk-surface-spacing);
11
+
12
+ /* PDF Viewer - Search */
13
+ --osdk-pdf-viewer-search-highlight: color-mix(
14
+ in srgb,
15
+ var(--osdk-intent-warning-rest) 40%,
16
+ transparent
17
+ );
18
+ --osdk-pdf-viewer-search-active: color-mix(
19
+ in srgb,
20
+ var(--osdk-intent-warning-rest) 70%,
21
+ transparent
22
+ );
23
+ --osdk-pdf-viewer-search-bar-bg: var(--osdk-background-primary);
24
+
25
+ /* PDF Viewer - Annotations */
26
+ --osdk-pdf-viewer-annotation-highlight: color-mix(
27
+ in srgb,
28
+ var(--osdk-intent-primary-rest) 30%,
29
+ transparent
30
+ );
31
+ --osdk-pdf-viewer-annotation-underline: var(--osdk-intent-primary-rest);
32
+ --osdk-pdf-viewer-annotation-comment: var(--osdk-intent-warning-rest);
33
+ --osdk-pdf-viewer-annotation-pin: var(--osdk-intent-danger-rest);
34
+
35
+ /* PDF Viewer - Page */
36
+ --osdk-pdf-viewer-page-shadow: var(--osdk-surface-shadow-2);
37
+ --osdk-pdf-viewer-page-gap: var(--osdk-surface-spacing);
38
+
39
+ /* PDF Viewer - Sidebar */
40
+ --osdk-pdf-viewer-sidebar-width: 200px;
41
+ --osdk-pdf-viewer-sidebar-bg: var(--osdk-background-secondary);
42
+ --osdk-pdf-viewer-sidebar-border: var(--osdk-surface-border);
43
+ --osdk-pdf-viewer-sidebar-active-border: var(--osdk-intent-primary-rest);
44
+ --osdk-pdf-viewer-sidebar-thumbnail-gap: var(--osdk-surface-spacing);
45
+ }
package/src/tokens/table.css ADDED
@@ -0,0 +1,85 @@
1
+ :root {
2
+ /* Table Border */
3
+ --osdk-table-border-color: var(--osdk-surface-border-color-default);
4
+ --osdk-table-border-width: var(--osdk-surface-border-width);
5
+ --osdk-table-border: var(--osdk-table-border-width) solid
6
+ var(--osdk-table-border-color);
7
+
8
+ --osdk-table-header-divider: var(--osdk-table-border);
9
+ --osdk-table-cell-divider: var(--osdk-table-border-width) solid transparent;
10
+ --osdk-table-row-divider: var(--osdk-table-border);
11
+ --osdk-table-pinned-column-border: var(--osdk-table-border);
12
+
13
+ /* Table Header */
14
+ --osdk-table-header-height: 50px;
15
+ --osdk-table-header-bg: var(--osdk-background-secondary);
16
+ --osdk-table-header-fontWeight: var(--osdk-typography-weight-bold);
17
+ --osdk-table-header-fontSize: var(--osdk-typography-size-body-small);
18
+ --osdk-table-header-color: var(--osdk-typography-color-muted);
19
+
20
+ /* Table Row */
21
+ --osdk-table-row-bg-default: var(--osdk-background-primary);
22
+ --osdk-table-row-bg-alternate: var(--osdk-background-tertiary);
23
+ --osdk-table-row-bg-hover: color-mix(
24
+ in srgb,
25
+ var(--osdk-intent-primary-hover) 10%,
26
+ var(--osdk-background-primary)
27
+ );
28
+ --osdk-table-row-bg-active: color-mix(
29
+ in srgb,
30
+ var(--osdk-intent-primary-hover) 10%,
31
+ var(--osdk-background-primary)
32
+ );
33
+ --osdk-table-row-border-color-hover: var(--osdk-intent-primary-rest);
34
+ --osdk-table-row-border-color-active: var(--osdk-intent-primary-rest);
35
+
36
+ /* Table Cell */
37
+ --osdk-table-cell-padding: 0 calc(var(--osdk-surface-spacing) * 2);
38
+ --osdk-table-cell-fontSize: var(--osdk-typography-size-body-medium);
39
+ --osdk-table-cell-color: var(--osdk-typography-color-default-rest);
40
+
41
+ /* Table Header Menu */
42
+ --osdk-table-header-menu-padding: calc(var(--osdk-surface-spacing) * 0.25);
43
+ /* Try to use surface for backgrounds */
44
+ --osdk-table-header-menu-bg: var(--osdk-custom-color-light-gray-2);
45
+ --osdk-table-header-menu-border: var(--osdk-surface-border-width) solid
46
+ var(--osdk-custom-color-gray-4);
47
+ --osdk-table-header-menu-color: var(--osdk-typography-color-muted);
48
+ --osdk-table-header-menu-color-active: var(
49
+ --osdk-typography-color-default-rest
50
+ );
51
+ --osdk-table-header-menu-icon-color: var(
52
+ --osdk-table-header-menu-color
53
+ );
54
+ --osdk-table-header-menu-bg-hover: var(--osdk-custom-color-gray-1);
55
+ --osdk-table-header-menu-bg-active: var(--osdk-custom-color-gray-2);
56
+
57
+ /* Resizer */
58
+ --osdk-table-resizer-color-hover: var(--osdk-custom-color-primary-1);
59
+ --osdk-table-resizer-color-active: var(--osdk-intent-primary-rest);
60
+
61
+ /* Table Skeleton loading */
62
+ --osdk-table-skeleton-color-from: var(--osdk-background-skeleton-from);
63
+ --osdk-table-skeleton-color-to: var(--osdk-background-skeleton-to);
64
+
65
+ /* Column Config Dialog */
66
+ --osdk-table-column-config-dialog-min-width: 800px;
67
+ --osdk-table-column-config-dialog-min-height: 400px;
68
+ --osdk-table-column-config-visible-columns-bg: var(
69
+ --osdk-background-secondary
70
+ );
71
+
72
+ /* Editable Table */
73
+ --osdk-table-cell-editable-border: var(--osdk-surface-border-width) solid
74
+ var(--osdk-surface-border-color-strong);
75
+ --osdk-table-cell-edited-border: var(--osdk-surface-border-width) solid
76
+ var(--osdk-intent-primary-rest);
77
+ --osdk-table-cell-edited-border-error: var(--osdk-surface-border-width) solid
78
+ var(--osdk-intent-danger-rest);
79
+ --osdk-table-cell-editable-bg: var(--osdk-background-primary);
80
+ --osdk-table-edit-container-padding: calc(var(--osdk-surface-spacing) * 2)
81
+ calc(var(--osdk-surface-spacing) * 4);
82
+ --osdk-table-edit-container-min-height: calc(
83
+ var(--osdk-surface-spacing) * 12
84
+ );
85
+ }
package/src/tokens/tooltip.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --osdk-tooltip-z-index: var(--osdk-surface-z-index-4);
3
+ --osdk-tooltip-padding: calc(var(--osdk-surface-spacing) * 2)
4
+ calc(var(--osdk-surface-spacing) * 4);
5
+ --osdk-tooltip-bg: var(--osdk-background-primary);
6
+ --osdk-tooltip-border-color: var(--osdk-palette-gray-4);
7
+ --osdk-tooltip-shadow: var(--osdk-surface-shadow-2);
8
+ --osdk-tooltip-max-width: 300px;
9
+ }