@osdk/react-components-styles 0.2.0-beta.9 → 0.2.1-main-20260407074313
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.
- package/CHANGELOG.md +94 -0
- package/README.md +30 -0
- package/package.json +2 -2
- package/src/index.css +8 -0
- package/src/tokens/base.css +19 -2
- package/src/tokens/cbac-picker.css +137 -0
- package/src/tokens/datetime-picker.css +98 -0
- package/src/tokens/file-picker.css +46 -0
- package/src/tokens/filter-list.css +157 -93
- package/src/tokens/form.css +29 -0
- package/src/tokens/input.css +34 -0
- package/src/tokens/pdf-viewer.css +45 -0
- package/src/tokens/radio.css +13 -0
- package/src/tokens/table.css +6 -3
- package/src/tokens/tooltip.css +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,99 @@
|
|
|
1
1
|
# @osdk/react-components-styles
|
|
2
2
|
|
|
3
|
+
## 0.2.1-main-20260407074313
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 79b001e: Add FilePickerField component for attachment and media reference form fields
|
|
8
|
+
|
|
9
|
+
## 0.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- ce949bd: Simulated release
|
|
14
|
+
- 7080b01: Add base form layout with header, footer, field components, and CSS token variables for theming
|
|
15
|
+
- c3da451: add marking button, category group, and validation components for CBAC picker
|
|
16
|
+
- c35231f: add cbac css tokens and create cbac-components package
|
|
17
|
+
- 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
|
|
18
|
+
- aa908e4: Redesign filter list collapse into separate render tree and simplify header layout
|
|
19
|
+
- 3f4fb81: Address design review and PR review feedback for filter list: exclude strikethrough only on selected items, remove hover-to-show exclude row, fix 3-dots toggle close behavior, remove OR filter operator mode, and various UI polish
|
|
20
|
+
- bc46400: Add skeleton loading states and polish checkbox list, histogram, and range filter inputs
|
|
21
|
+
- d6c2c8b: Fix FilterList styling
|
|
22
|
+
- 9893b41: Add storybook
|
|
23
|
+
- dffac63: Fix styling nits
|
|
24
|
+
- d6c2c8b: Fix FilterList dropdown
|
|
25
|
+
- 66b7125: Add RadioButtonsField component for action form radio button inputs
|
|
26
|
+
- 1135a27: Update Blueprint css import
|
|
27
|
+
- 7a3c43d: feat(pdf): pdf-viewer component
|
|
28
|
+
- 447e29d: Update editable table UX and API to pass the entire row data on edit
|
|
29
|
+
- 4c7884f: Add custom column, multi column sort and column config
|
|
30
|
+
- dba18e0: Fix css build
|
|
31
|
+
- b373588: Styling fix with global border-box
|
|
32
|
+
- 35f2f1a: Add Media inputs/outputs for Queries
|
|
33
|
+
- 05618c3: Add validation state to editable cell
|
|
34
|
+
- 5ad3ba1: Fix conflicting dependencies and add docs
|
|
35
|
+
- 9c54ee5: Support editable cell
|
|
36
|
+
|
|
37
|
+
## 0.2.0-beta.29
|
|
38
|
+
|
|
39
|
+
### Minor Changes
|
|
40
|
+
|
|
41
|
+
- d6c2c8b: Fix FilterList styling
|
|
42
|
+
- d6c2c8b: Fix FilterList dropdown
|
|
43
|
+
|
|
44
|
+
## 0.2.0-beta.28
|
|
45
|
+
|
|
46
|
+
### Minor Changes
|
|
47
|
+
|
|
48
|
+
- 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
|
|
49
|
+
- 3f4fb81: Address design review and PR review feedback for filter list: exclude strikethrough only on selected items, remove hover-to-show exclude row, fix 3-dots toggle close behavior, remove OR filter operator mode, and various UI polish
|
|
50
|
+
|
|
51
|
+
## 0.2.0-beta.27
|
|
52
|
+
|
|
53
|
+
## 0.2.0-beta.26
|
|
54
|
+
|
|
55
|
+
### Minor Changes
|
|
56
|
+
|
|
57
|
+
- c3da451: add marking button, category group, and validation components for CBAC picker
|
|
58
|
+
- 66b7125: Add RadioButtonsField component for action form radio button inputs
|
|
59
|
+
|
|
60
|
+
## 0.2.0-beta.25
|
|
61
|
+
|
|
62
|
+
## 0.2.0-beta.24
|
|
63
|
+
|
|
64
|
+
## 0.2.0-beta.14
|
|
65
|
+
|
|
66
|
+
### Minor Changes
|
|
67
|
+
|
|
68
|
+
- c35231f: add cbac css tokens and create cbac-components package
|
|
69
|
+
|
|
70
|
+
## 0.2.0-beta.13
|
|
71
|
+
|
|
72
|
+
### Minor Changes
|
|
73
|
+
|
|
74
|
+
- 7080b01: Add base form layout with header, footer, field components, and CSS token variables for theming
|
|
75
|
+
- dffac63: Fix styling nits
|
|
76
|
+
- b373588: Styling fix with global border-box
|
|
77
|
+
|
|
78
|
+
## 0.2.0-beta.12
|
|
79
|
+
|
|
80
|
+
### Minor Changes
|
|
81
|
+
|
|
82
|
+
- bc46400: Add skeleton loading states and polish checkbox list, histogram, and range filter inputs
|
|
83
|
+
- 7a3c43d: feat(pdf): pdf-viewer component
|
|
84
|
+
|
|
85
|
+
## 0.2.0-beta.11
|
|
86
|
+
|
|
87
|
+
### Minor Changes
|
|
88
|
+
|
|
89
|
+
- aa908e4: Redesign filter list collapse into separate render tree and simplify header layout
|
|
90
|
+
|
|
91
|
+
## 0.2.0-beta.10
|
|
92
|
+
|
|
93
|
+
### Minor Changes
|
|
94
|
+
|
|
95
|
+
- 05618c3: Add validation state to editable cell
|
|
96
|
+
|
|
3
97
|
## 0.2.0-beta.9
|
|
4
98
|
|
|
5
99
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -45,6 +45,36 @@ Import the CSS files in your application's entry point:
|
|
|
45
45
|
}
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
+
## How CSS Layers Work
|
|
49
|
+
|
|
50
|
+
OSDK uses CSS [`@layer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to make theming predictable. If you're new to `@layer`, here's what you need to know:
|
|
51
|
+
|
|
52
|
+
**What is `@layer`?** CSS `@layer` lets you group styles into named layers and control the order in which they apply. When two styles target the same element, the style in the _later_ layer always wins — regardless of how specific the selector is. This is what makes the theming system maintainable.
|
|
53
|
+
|
|
54
|
+
**OSDK's layer hierarchy:**
|
|
55
|
+
|
|
56
|
+
| Layer | Purpose |
|
|
57
|
+
| --- | --- |
|
|
58
|
+
| `osdk.tokens` | Design tokens (colors, spacing, typography) — the defaults |
|
|
59
|
+
| `osdk.components` | Component structural styles (layout, borders, sizing) |
|
|
60
|
+
| `user.theme` | Your custom overrides (you define this) |
|
|
61
|
+
|
|
62
|
+
The `@layer` declaration at the top of your CSS file sets this order:
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
@layer osdk.tokens, osdk.components, user.theme;
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Because `user.theme` is declared last, your overrides always win over OSDK defaults — no need to fight specificity.
|
|
69
|
+
|
|
70
|
+
**When styles conflict, CSS resolves them in this order:**
|
|
71
|
+
|
|
72
|
+
1. **Layer order** — Later layers always win (`user.theme` > `osdk.components` > `osdk.tokens`)
|
|
73
|
+
2. **Selector specificity** — More specific selectors win _within the same layer_
|
|
74
|
+
3. **Source order** — Later declarations win when specificity is equal
|
|
75
|
+
|
|
76
|
+
This means you can override any OSDK token with a simple `:root` selector in your `user.theme` layer — it will always take priority, even if the OSDK layer uses a more specific selector internally.
|
|
77
|
+
|
|
48
78
|
## Understanding Token Scopes
|
|
49
79
|
|
|
50
80
|
**OSDK Tokens (`--osdk-*`):**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@osdk/react-components-styles",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1-main-20260407074313",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
".": "./src/index.css"
|
|
11
11
|
},
|
|
12
12
|
"peerDependencies": {
|
|
13
|
-
"@blueprintjs/core": "^
|
|
13
|
+
"@blueprintjs/core": "^6.8.1"
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@blueprintjs/core": "^6.8.1"
|
package/src/index.css
CHANGED
|
@@ -3,8 +3,16 @@
|
|
|
3
3
|
|
|
4
4
|
/* Level 2 tokens */
|
|
5
5
|
@import "./tokens/button.css";
|
|
6
|
+
@import "./tokens/cbac-picker.css";
|
|
6
7
|
@import "./tokens/checkbox.css";
|
|
7
8
|
@import "./tokens/dialog.css";
|
|
8
9
|
@import "./tokens/draggable.css";
|
|
9
10
|
@import "./tokens/filter-list.css";
|
|
11
|
+
@import "./tokens/form.css";
|
|
12
|
+
@import "./tokens/input.css";
|
|
10
13
|
@import "./tokens/table.css";
|
|
14
|
+
@import "./tokens/tooltip.css";
|
|
15
|
+
@import "./tokens/datetime-picker.css";
|
|
16
|
+
@import "./tokens/pdf-viewer.css";
|
|
17
|
+
@import "./tokens/radio.css";
|
|
18
|
+
@import "./tokens/file-picker.css";
|
package/src/tokens/base.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
--osdk-surface-z-index-1: var(--bp-surface-z-index-1);
|
|
7
7
|
--osdk-surface-z-index-2: var(--bp-surface-z-index-2);
|
|
8
8
|
--osdk-surface-z-index-3: var(--bp-surface-z-index-3);
|
|
9
|
+
--osdk-surface-z-index-4: var(--bp-surface-z-index-4);
|
|
9
10
|
--osdk-surface-border-radius: var(--bp-surface-border-radius);
|
|
10
11
|
--osdk-surface-layer-primary: var(--bp-surface-layer-primary);
|
|
11
12
|
--osdk-surface-border-width: var(--bp-surface-border-width);
|
|
@@ -87,8 +88,9 @@
|
|
|
87
88
|
/* Blueprint token mappings - Palette tokens */
|
|
88
89
|
--osdk-palette-gray-1: var(--bp-palette-gray-1);
|
|
89
90
|
--osdk-palette-gray-2: var(--bp-palette-gray-2);
|
|
90
|
-
--osdk-palette-gray-
|
|
91
|
-
--osdk-palette-gray-
|
|
91
|
+
--osdk-palette-gray-4: var(--bp-palette-gray-4);
|
|
92
|
+
--osdk-palette-dark-gray-2: var(--bp-palette-dark-gray-2);
|
|
93
|
+
--osdk-palette-dark-gray-3: var(--bp-palette-dark-gray-3);
|
|
92
94
|
--osdk-palette-light-gray-1: var(--bp-palette-light-gray-1);
|
|
93
95
|
--osdk-palette-light-gray-3: var(--bp-palette-light-gray-3);
|
|
94
96
|
--osdk-palette-light-gray-4: var(--bp-palette-light-gray-4);
|
|
@@ -172,7 +174,22 @@
|
|
|
172
174
|
--osdk-iconography-size-small: var(--osdk-typography-size-body-large);
|
|
173
175
|
--osdk-iconography-color-muted: var(--osdk-intent-default-rest);
|
|
174
176
|
|
|
177
|
+
/* Global styling */
|
|
175
178
|
font-family: var(--osdk-typography-family-default);
|
|
176
179
|
color: var(--osdk-typography-color-default-rest);
|
|
177
180
|
font-size: var(--osdk-typography-size-body-medium);
|
|
181
|
+
|
|
182
|
+
/* Blueprint icon alignment and color override */
|
|
183
|
+
.bp6-icon {
|
|
184
|
+
display: inline-block;
|
|
185
|
+
flex: 0 0 auto;
|
|
186
|
+
vertical-align: text-bottom;
|
|
187
|
+
fill: currentColor;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
*,
|
|
191
|
+
*::before,
|
|
192
|
+
*::after {
|
|
193
|
+
box-sizing: border-box;
|
|
194
|
+
}
|
|
178
195
|
}
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright 2026 Palantir Technologies, Inc. All rights reserved.
|
|
3
|
+
*
|
|
4
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
* you may not use this file except in compliance with the License.
|
|
6
|
+
* You may obtain a copy of the License at
|
|
7
|
+
*
|
|
8
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
*
|
|
10
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
* See the License for the specific language governing permissions and
|
|
14
|
+
* limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
:root {
|
|
18
|
+
/* Banner */
|
|
19
|
+
--osdk-cbac-banner-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
20
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
21
|
+
--osdk-cbac-banner-font-size: var(--osdk-typography-size-body-small);
|
|
22
|
+
--osdk-cbac-banner-font-weight: var(--osdk-typography-weight-bold);
|
|
23
|
+
--osdk-cbac-banner-text-align: center;
|
|
24
|
+
--osdk-cbac-banner-border-radius: var(--osdk-surface-border-radius);
|
|
25
|
+
|
|
26
|
+
--osdk-cbac-banner-border-color: var(--osdk-surface-border-color-default);
|
|
27
|
+
|
|
28
|
+
/* Marking Button */
|
|
29
|
+
--osdk-cbac-marking-button-padding: calc(var(--osdk-surface-spacing) * 0.5)
|
|
30
|
+
calc(var(--osdk-surface-spacing) * 1.5);
|
|
31
|
+
--osdk-cbac-marking-button-border-radius: 0;
|
|
32
|
+
--osdk-cbac-marking-button-font-size: var(
|
|
33
|
+
--osdk-typography-size-body-small
|
|
34
|
+
);
|
|
35
|
+
--osdk-cbac-marking-button-gap: var(--osdk-surface-spacing);
|
|
36
|
+
--osdk-cbac-marking-button-color-default: var(
|
|
37
|
+
--osdk-typography-color-default-rest
|
|
38
|
+
);
|
|
39
|
+
--osdk-cbac-marking-button-bg-default: transparent;
|
|
40
|
+
--osdk-cbac-marking-button-border-color-default: var(
|
|
41
|
+
--osdk-surface-border-color-default
|
|
42
|
+
);
|
|
43
|
+
--osdk-cbac-marking-button-color-selected: var(
|
|
44
|
+
--osdk-intent-primary-foreground
|
|
45
|
+
);
|
|
46
|
+
--osdk-cbac-marking-button-bg-selected: var(--osdk-intent-primary-rest);
|
|
47
|
+
--osdk-cbac-marking-button-border-color-selected: var(
|
|
48
|
+
--osdk-intent-primary-rest
|
|
49
|
+
);
|
|
50
|
+
--osdk-cbac-marking-button-color-implied: var(--osdk-intent-primary-rest);
|
|
51
|
+
--osdk-cbac-marking-button-bg-implied: transparent;
|
|
52
|
+
--osdk-cbac-marking-button-border-color-implied: var(
|
|
53
|
+
--osdk-surface-border-color-default
|
|
54
|
+
);
|
|
55
|
+
--osdk-cbac-marking-button-color-disallowed: var(
|
|
56
|
+
--osdk-intent-default-disabled
|
|
57
|
+
);
|
|
58
|
+
--osdk-cbac-marking-button-bg-disallowed: transparent;
|
|
59
|
+
--osdk-cbac-marking-button-border-color-disallowed: var(
|
|
60
|
+
--osdk-intent-default-disabled
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
/* Picker Layout */
|
|
64
|
+
--osdk-cbac-picker-padding: calc(var(--osdk-surface-spacing) * 2);
|
|
65
|
+
--osdk-cbac-picker-category-gap: calc(var(--osdk-surface-spacing) * 3);
|
|
66
|
+
--osdk-cbac-picker-category-title-font-size: var(
|
|
67
|
+
--osdk-typography-size-body-small
|
|
68
|
+
);
|
|
69
|
+
--osdk-cbac-picker-category-title-font-weight: var(
|
|
70
|
+
--osdk-typography-weight-default
|
|
71
|
+
);
|
|
72
|
+
--osdk-cbac-picker-category-title-color: var(
|
|
73
|
+
--osdk-typography-color-default-rest
|
|
74
|
+
);
|
|
75
|
+
--osdk-cbac-picker-category-title-letter-spacing: normal;
|
|
76
|
+
--osdk-cbac-picker-marking-grid-columns: 4;
|
|
77
|
+
--osdk-cbac-picker-marking-grid-border-color: var(
|
|
78
|
+
--osdk-surface-border-color-default
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
/* Info Banner */
|
|
82
|
+
--osdk-cbac-info-banner-bg: var(--osdk-intent-primary-subtle);
|
|
83
|
+
--osdk-cbac-info-banner-color: var(--osdk-intent-primary-rest);
|
|
84
|
+
--osdk-cbac-info-banner-padding: calc(var(--osdk-surface-spacing) * 1.5)
|
|
85
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
86
|
+
--osdk-cbac-info-banner-font-size: var(--osdk-typography-size-body-small);
|
|
87
|
+
--osdk-cbac-info-banner-border-radius: var(--osdk-surface-border-radius);
|
|
88
|
+
|
|
89
|
+
/* Validation Warning */
|
|
90
|
+
--osdk-cbac-validation-warning-bg: var(--osdk-intent-warning-subtle);
|
|
91
|
+
--osdk-cbac-validation-warning-color: var(--osdk-intent-warning-rest);
|
|
92
|
+
--osdk-cbac-validation-warning-padding: calc(var(--osdk-surface-spacing) * 1.5)
|
|
93
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
94
|
+
--osdk-cbac-validation-warning-font-size: var(
|
|
95
|
+
--osdk-typography-size-body-small
|
|
96
|
+
);
|
|
97
|
+
--osdk-cbac-validation-warning-border-radius: var(
|
|
98
|
+
--osdk-surface-border-radius
|
|
99
|
+
);
|
|
100
|
+
--osdk-cbac-validation-warning-chip-bg: var(--osdk-surface-background-color-default);
|
|
101
|
+
--osdk-cbac-validation-warning-max-height: 200px;
|
|
102
|
+
--osdk-cbac-validation-warning-chip-border-color: var(
|
|
103
|
+
--osdk-surface-border-color-default
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
/* Popover */
|
|
107
|
+
--osdk-cbac-popover-max-width: 400px;
|
|
108
|
+
--osdk-cbac-popover-padding: calc(var(--osdk-surface-spacing) * 3);
|
|
109
|
+
--osdk-cbac-popover-section-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
110
|
+
--osdk-cbac-popover-pill-padding: calc(var(--osdk-surface-spacing) * 0.5)
|
|
111
|
+
calc(var(--osdk-surface-spacing) * 1.5);
|
|
112
|
+
--osdk-cbac-popover-pill-border-radius: var(--osdk-surface-border-radius);
|
|
113
|
+
|
|
114
|
+
/* Popover Skeleton */
|
|
115
|
+
--osdk-cbac-skeleton-bg: var(--osdk-surface-background-color-default-hover);
|
|
116
|
+
--osdk-cbac-skeleton-border-radius: var(--osdk-surface-border-radius);
|
|
117
|
+
|
|
118
|
+
/* Popover Warning Callout */
|
|
119
|
+
--osdk-cbac-warning-callout-bg: var(--osdk-intent-warning-subtle);
|
|
120
|
+
--osdk-cbac-warning-callout-color: var(--osdk-intent-warning-rest);
|
|
121
|
+
--osdk-cbac-warning-callout-padding: calc(var(--osdk-surface-spacing) * 1.5)
|
|
122
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
123
|
+
--osdk-cbac-warning-callout-border-radius: var(--osdk-surface-border-radius);
|
|
124
|
+
--osdk-cbac-warning-callout-font-size: var(
|
|
125
|
+
--osdk-typography-size-body-small
|
|
126
|
+
);
|
|
127
|
+
|
|
128
|
+
/* Disabled State */
|
|
129
|
+
--osdk-cbac-disabled-opacity: 0.6;
|
|
130
|
+
|
|
131
|
+
/* Category Overflow */
|
|
132
|
+
--osdk-cbac-overflow-button-padding: var(--osdk-cbac-marking-button-padding);
|
|
133
|
+
--osdk-cbac-overflow-button-font-size: var(
|
|
134
|
+
--osdk-cbac-marking-button-font-size
|
|
135
|
+
);
|
|
136
|
+
--osdk-cbac-overflow-list-max-height: 240px;
|
|
137
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/* Datetime Picker Styling */
|
|
2
|
+
:root {
|
|
3
|
+
/* Input */
|
|
4
|
+
--osdk-datetime-input-font-family: var(--osdk-typography-family-default);
|
|
5
|
+
--osdk-datetime-input-font-size: var(--osdk-typography-size-body-medium);
|
|
6
|
+
--osdk-datetime-input-padding: var(--osdk-surface-spacing)
|
|
7
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
8
|
+
--osdk-datetime-input-border: var(--osdk-surface-border);
|
|
9
|
+
--osdk-datetime-input-border-radius: var(--osdk-surface-border-radius);
|
|
10
|
+
--osdk-datetime-input-bg: var(--osdk-background-primary);
|
|
11
|
+
--osdk-datetime-input-color: var(--osdk-typography-color-default-rest);
|
|
12
|
+
--osdk-datetime-input-focus-border-color: var(--osdk-intent-primary-rest);
|
|
13
|
+
--osdk-datetime-input-focus-outline: var(--osdk-focus-outline);
|
|
14
|
+
--osdk-datetime-input-focus-outline-offset: var(
|
|
15
|
+
--osdk-focus-visible-outline-offset
|
|
16
|
+
);
|
|
17
|
+
--osdk-datetime-input-error-border-color: var(--osdk-intent-danger-rest);
|
|
18
|
+
--osdk-datetime-input-error-color: var(--osdk-typography-color-danger-rest);
|
|
19
|
+
|
|
20
|
+
/* Popover */
|
|
21
|
+
--osdk-datetime-popover-bg: var(--osdk-background-primary);
|
|
22
|
+
--osdk-datetime-popover-border: var(--osdk-surface-border);
|
|
23
|
+
--osdk-datetime-popover-border-radius: var(--osdk-surface-border-radius);
|
|
24
|
+
--osdk-datetime-popover-padding: calc(var(--osdk-surface-spacing) * 2);
|
|
25
|
+
--osdk-datetime-popover-z-index: var(--osdk-surface-z-index-3);
|
|
26
|
+
|
|
27
|
+
/* Calendar */
|
|
28
|
+
--osdk-datetime-calendar-font-family: var(--osdk-typography-family-default);
|
|
29
|
+
--osdk-datetime-calendar-font-size: var(--osdk-typography-size-body-small);
|
|
30
|
+
--osdk-datetime-calendar-cell-size: calc(var(--osdk-surface-spacing) * 8);
|
|
31
|
+
--osdk-datetime-calendar-gap: 2px;
|
|
32
|
+
|
|
33
|
+
/* Calendar header */
|
|
34
|
+
--osdk-datetime-calendar-caption-font-size: var(
|
|
35
|
+
--osdk-typography-size-body-medium
|
|
36
|
+
);
|
|
37
|
+
--osdk-datetime-calendar-caption-font-weight: var(
|
|
38
|
+
--osdk-typography-weight-bold
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
/* Calendar weekday header */
|
|
42
|
+
--osdk-datetime-calendar-weekday-color: var(--osdk-typography-color-muted);
|
|
43
|
+
--osdk-datetime-calendar-weekday-font-size: var(
|
|
44
|
+
--osdk-typography-size-body-x-small
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
/* Calendar day cells */
|
|
48
|
+
--osdk-datetime-calendar-day-border-radius: var(--osdk-surface-border-radius);
|
|
49
|
+
--osdk-datetime-calendar-day-hover-bg: var(
|
|
50
|
+
--osdk-surface-background-color-default-hover
|
|
51
|
+
);
|
|
52
|
+
--osdk-datetime-calendar-day-active-bg: var(
|
|
53
|
+
--osdk-surface-background-color-default-active
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
/* Calendar selected day */
|
|
57
|
+
--osdk-datetime-calendar-selected-bg: var(--osdk-intent-primary-rest);
|
|
58
|
+
--osdk-datetime-calendar-selected-color: var(
|
|
59
|
+
--osdk-intent-primary-foreground
|
|
60
|
+
);
|
|
61
|
+
--osdk-datetime-calendar-selected-hover-bg: var(--osdk-intent-primary-hover);
|
|
62
|
+
|
|
63
|
+
/* Calendar today */
|
|
64
|
+
--osdk-datetime-calendar-today-font-weight: var(
|
|
65
|
+
--osdk-typography-weight-bold
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
/* Calendar disabled */
|
|
69
|
+
--osdk-datetime-calendar-disabled-color: var(--osdk-intent-default-disabled);
|
|
70
|
+
|
|
71
|
+
/* Calendar outside month */
|
|
72
|
+
--osdk-datetime-calendar-outside-color: var(--osdk-typography-color-muted);
|
|
73
|
+
|
|
74
|
+
/* Calendar nav buttons */
|
|
75
|
+
--osdk-datetime-calendar-nav-button-size: calc(
|
|
76
|
+
var(--osdk-surface-spacing) * 7
|
|
77
|
+
);
|
|
78
|
+
--osdk-datetime-calendar-nav-button-border-radius: var(
|
|
79
|
+
--osdk-surface-border-radius
|
|
80
|
+
);
|
|
81
|
+
--osdk-datetime-calendar-nav-button-hover-bg: var(
|
|
82
|
+
--osdk-surface-background-color-default-hover
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
/* Calendar chevron */
|
|
86
|
+
--osdk-datetime-calendar-chevron-size: calc(var(--osdk-surface-spacing) * 4);
|
|
87
|
+
|
|
88
|
+
/* Time input footer */
|
|
89
|
+
--osdk-datetime-time-padding-top: calc(var(--osdk-surface-spacing) * 2);
|
|
90
|
+
--osdk-datetime-time-border-top: var(--osdk-surface-border);
|
|
91
|
+
|
|
92
|
+
/* Placeholder */
|
|
93
|
+
--osdk-datetime-input-placeholder-opacity: 0.6;
|
|
94
|
+
|
|
95
|
+
/* Calendar fallback / loading */
|
|
96
|
+
--osdk-datetime-calendar-fallback-width: 280px;
|
|
97
|
+
--osdk-datetime-calendar-fallback-height: 300px;
|
|
98
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Trigger — styled to look like an input */
|
|
3
|
+
--osdk-file-picker-trigger-min-height: var(--osdk-input-min-height);
|
|
4
|
+
--osdk-file-picker-trigger-padding: var(--osdk-input-padding);
|
|
5
|
+
--osdk-file-picker-trigger-border-radius: var(--osdk-input-border-radius);
|
|
6
|
+
--osdk-file-picker-trigger-border: var(--osdk-input-border-width) solid
|
|
7
|
+
var(--osdk-input-border-color);
|
|
8
|
+
--osdk-file-picker-trigger-border-color-focus: var(
|
|
9
|
+
--osdk-input-border-color-focus
|
|
10
|
+
);
|
|
11
|
+
--osdk-file-picker-trigger-bg: var(--osdk-input-bg);
|
|
12
|
+
--osdk-file-picker-trigger-bg-hover: var(--osdk-input-bg-hover);
|
|
13
|
+
--osdk-file-picker-trigger-color: var(--osdk-input-color);
|
|
14
|
+
--osdk-file-picker-trigger-font-size: var(--osdk-input-font-size);
|
|
15
|
+
--osdk-file-picker-trigger-font-family: var(--osdk-input-font-family);
|
|
16
|
+
--osdk-file-picker-trigger-placeholder-color: var(
|
|
17
|
+
--osdk-input-placeholder-color
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
/* Transitions */
|
|
21
|
+
--osdk-file-picker-transition-duration: var(--osdk-input-transition-duration);
|
|
22
|
+
--osdk-file-picker-transition-ease: var(--osdk-input-transition-ease);
|
|
23
|
+
|
|
24
|
+
/* Focus ring */
|
|
25
|
+
--osdk-file-picker-trigger-focus-width: var(--osdk-input-focus-width);
|
|
26
|
+
--osdk-file-picker-trigger-focus-color: var(--osdk-input-focus-color);
|
|
27
|
+
--osdk-file-picker-trigger-focus-offset: var(--osdk-input-focus-offset);
|
|
28
|
+
|
|
29
|
+
/* Clear button */
|
|
30
|
+
--osdk-file-picker-clear-size: calc(var(--osdk-surface-spacing) * 4);
|
|
31
|
+
--osdk-file-picker-clear-margin: 0 calc(var(--osdk-surface-spacing) * 1);
|
|
32
|
+
--osdk-file-picker-clear-color: var(--osdk-typography-color-muted);
|
|
33
|
+
--osdk-file-picker-clear-color-hover: var(
|
|
34
|
+
--osdk-typography-color-default-rest
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
/* Browse button */
|
|
38
|
+
--osdk-file-picker-browse-bg: var(--osdk-button-secondary-bg);
|
|
39
|
+
--osdk-file-picker-browse-bg-hover: var(--osdk-button-secondary-bg-hover);
|
|
40
|
+
--osdk-file-picker-browse-bg-active: var(--osdk-button-secondary-bg-active);
|
|
41
|
+
--osdk-file-picker-browse-color: var(--osdk-button-secondary-color);
|
|
42
|
+
--osdk-file-picker-browse-padding: calc(var(--osdk-surface-spacing) * 1.5)
|
|
43
|
+
calc(var(--osdk-surface-spacing) * 3);
|
|
44
|
+
--osdk-file-picker-browse-border-left: var(--osdk-input-border-width) solid
|
|
45
|
+
var(--osdk-input-border-color);
|
|
46
|
+
}
|
|
@@ -3,21 +3,31 @@
|
|
|
3
3
|
--osdk-filter-list-bg: var(--osdk-background-primary);
|
|
4
4
|
--osdk-filter-list-border: var(--osdk-surface-border);
|
|
5
5
|
--osdk-filter-list-border-radius: var(--osdk-surface-border-radius);
|
|
6
|
-
--osdk-filter-list-padding:
|
|
7
|
-
--osdk-filter-list-gap:
|
|
8
|
-
--osdk-filter-list-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
--osdk-filter-list-padding: 0;
|
|
7
|
+
--osdk-filter-list-gap: 0;
|
|
8
|
+
--osdk-filter-list-shadow:
|
|
9
|
+
0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
10
|
+
--osdk-filter-list-addButton-padding-top: 0;
|
|
11
11
|
--osdk-filter-list-addButton-container-bg: var(--osdk-background-primary);
|
|
12
|
+
--osdk-filter-list-addButton-container-padding: calc(
|
|
13
|
+
var(--osdk-surface-spacing) * 2
|
|
14
|
+
)
|
|
15
|
+
calc(var(--osdk-surface-spacing) * 3);
|
|
16
|
+
--osdk-filter-list-addButton-container-border-top: var(--osdk-surface-border);
|
|
17
|
+
--osdk-filter-list-addButton-border: var(--osdk-surface-border);
|
|
18
|
+
--osdk-filter-list-addButton-height: calc(var(--osdk-surface-spacing) * 7.5);
|
|
12
19
|
|
|
13
20
|
/* Filter List Content */
|
|
14
|
-
--osdk-filter-list-content-gap:
|
|
21
|
+
--osdk-filter-list-content-gap: 0;
|
|
15
22
|
--osdk-filter-list-empty-text-color: var(--osdk-typography-color-muted);
|
|
16
23
|
--osdk-filter-list-empty-font-size: var(--osdk-typography-size-body-small);
|
|
17
24
|
|
|
18
25
|
/* Filter List Header */
|
|
19
|
-
--osdk-filter-header-padding
|
|
26
|
+
--osdk-filter-header-padding: calc(var(--osdk-surface-spacing) * 2)
|
|
27
|
+
calc(var(--osdk-surface-spacing) * 3);
|
|
28
|
+
--osdk-filter-header-padding-bottom: 0;
|
|
20
29
|
--osdk-filter-header-border-bottom: var(--osdk-surface-border);
|
|
30
|
+
--osdk-filter-header-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
21
31
|
--osdk-filter-header-titleContainer-gap: var(--osdk-surface-spacing);
|
|
22
32
|
--osdk-filter-header-font-family: var(--osdk-typography-family-default);
|
|
23
33
|
--osdk-filter-header-font-size: var(--osdk-typography-size-body-medium);
|
|
@@ -30,25 +40,26 @@
|
|
|
30
40
|
--osdk-filter-header-activeCount-color: var(--osdk-typography-color-muted);
|
|
31
41
|
--osdk-filter-header-button-padding: calc(var(--osdk-surface-spacing) * 1);
|
|
32
42
|
--osdk-filter-header-button-bg: transparent;
|
|
33
|
-
--osdk-filter-header-button-border-radius: var(
|
|
34
|
-
--osdk-surface-border-radius
|
|
35
|
-
);
|
|
43
|
+
--osdk-filter-header-button-border-radius: var(--osdk-surface-border-radius);
|
|
36
44
|
--osdk-filter-header-button-transition: var(
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
--osdk-emphasis-transition-duration
|
|
46
|
+
)
|
|
39
47
|
var(--osdk-emphasis-ease-default);
|
|
40
48
|
--osdk-filter-header-button-bg-hover: var(--osdk-custom-color-gray-1);
|
|
41
49
|
--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
|
-
);
|
|
50
|
+
--osdk-filter-header-reset-font-size: var(--osdk-typography-size-body-small);
|
|
45
51
|
--osdk-filter-header-reset-color: var(--osdk-intent-primary-rest);
|
|
46
|
-
--osdk-filter-header-reset-color-disabled: var(
|
|
47
|
-
--osdk-typography-color-muted
|
|
48
|
-
);
|
|
52
|
+
--osdk-filter-header-reset-color-disabled: var(--osdk-typography-color-muted);
|
|
49
53
|
--osdk-filter-header-reset-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
50
|
-
calc(var(--osdk-surface-spacing) *
|
|
51
|
-
--osdk-filter-header-
|
|
54
|
+
calc(var(--osdk-surface-spacing) * 1.5);
|
|
55
|
+
--osdk-filter-header-reset-border: var(--osdk-surface-border-width) solid
|
|
56
|
+
var(--osdk-intent-primary-rest);
|
|
57
|
+
--osdk-filter-header-reset-border-disabled: var(--osdk-surface-border-width)
|
|
58
|
+
solid var(--osdk-typography-color-muted);
|
|
59
|
+
--osdk-filter-header-reset-border-radius: var(--osdk-surface-border-radius);
|
|
60
|
+
--osdk-filter-header-collapse-icon-size: calc(
|
|
61
|
+
var(--osdk-surface-spacing) * 1.5
|
|
62
|
+
);
|
|
52
63
|
--osdk-filter-header-collapse-icon-border-width: var(
|
|
53
64
|
--osdk-surface-border-width
|
|
54
65
|
);
|
|
@@ -59,7 +70,7 @@
|
|
|
59
70
|
--osdk-filter-item-label-font-family: var(--osdk-typography-family-default);
|
|
60
71
|
--osdk-filter-item-label-font-size: var(--osdk-typography-size-body-small);
|
|
61
72
|
--osdk-filter-item-label-font-weight: var(--osdk-typography-weight-bold);
|
|
62
|
-
--osdk-filter-item-label-color: var(--osdk-typography-color-
|
|
73
|
+
--osdk-filter-item-label-color: var(--osdk-typography-color-muted);
|
|
63
74
|
--osdk-filter-item-drag-handle-padding: calc(
|
|
64
75
|
var(--osdk-surface-spacing) * 0.5
|
|
65
76
|
);
|
|
@@ -68,7 +79,9 @@
|
|
|
68
79
|
--osdk-surface-border-radius
|
|
69
80
|
);
|
|
70
81
|
--osdk-filter-item-drag-handle-color: var(--osdk-drag-handle-color);
|
|
71
|
-
--osdk-filter-item-drag-handle-color-hover: var(
|
|
82
|
+
--osdk-filter-item-drag-handle-color-hover: var(
|
|
83
|
+
--osdk-drag-handle-color-hover
|
|
84
|
+
);
|
|
72
85
|
--osdk-filter-item-drag-handle-bg-hover: var(--osdk-custom-color-gray-1);
|
|
73
86
|
--osdk-filter-item-drag-handle-focus-outline-color: var(
|
|
74
87
|
--osdk-emphasis-focus-color
|
|
@@ -123,12 +136,8 @@
|
|
|
123
136
|
--osdk-filter-tag-line-height: 1.4;
|
|
124
137
|
--osdk-filter-tag-color: var(--osdk-typography-color-default-rest);
|
|
125
138
|
--osdk-filter-tag-remove-color: var(--osdk-typography-color-muted);
|
|
126
|
-
--osdk-filter-tag-remove-font-size: var(
|
|
127
|
-
|
|
128
|
-
);
|
|
129
|
-
--osdk-filter-tag-remove-transition: var(
|
|
130
|
-
--osdk-emphasis-transition-duration
|
|
131
|
-
)
|
|
139
|
+
--osdk-filter-tag-remove-font-size: var(--osdk-typography-size-body-medium);
|
|
140
|
+
--osdk-filter-tag-remove-transition: var(--osdk-emphasis-transition-duration)
|
|
132
141
|
var(--osdk-emphasis-ease-default);
|
|
133
142
|
--osdk-filter-tag-remove-color-hover: var(
|
|
134
143
|
--osdk-typography-color-default-rest
|
|
@@ -138,17 +147,13 @@
|
|
|
138
147
|
--osdk-error-boundary-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
139
148
|
--osdk-error-boundary-padding: calc(var(--osdk-surface-spacing) * 2);
|
|
140
149
|
--osdk-error-boundary-border-radius: var(--osdk-surface-border-radius);
|
|
141
|
-
--osdk-error-boundary-bg: var(
|
|
142
|
-
--osdk-surface-background-color-danger-rest
|
|
143
|
-
);
|
|
150
|
+
--osdk-error-boundary-bg: var(--osdk-surface-background-color-danger-rest);
|
|
144
151
|
--osdk-error-boundary-font-size: var(--osdk-typography-size-body-small);
|
|
145
152
|
--osdk-error-boundary-text-color: var(--osdk-typography-color-danger-rest);
|
|
146
153
|
--osdk-error-boundary-button-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
147
154
|
calc(var(--osdk-surface-spacing) * 2);
|
|
148
155
|
--osdk-error-boundary-button-border-color: currentColor;
|
|
149
|
-
--osdk-error-boundary-button-border-radius: var(
|
|
150
|
-
--osdk-surface-border-radius
|
|
151
|
-
);
|
|
156
|
+
--osdk-error-boundary-button-border-radius: var(--osdk-surface-border-radius);
|
|
152
157
|
--osdk-error-boundary-button-font-size: var(
|
|
153
158
|
--osdk-typography-size-body-x-small
|
|
154
159
|
);
|
|
@@ -157,8 +162,7 @@
|
|
|
157
162
|
|
|
158
163
|
/* Checkbox List Tokens */
|
|
159
164
|
--osdk-filter-checkbox-list-gap: calc(var(--osdk-surface-spacing) * 0.5);
|
|
160
|
-
--osdk-filter-checkbox-row-padding: calc(var(--osdk-surface-spacing) * 0.5)
|
|
161
|
-
0;
|
|
165
|
+
--osdk-filter-checkbox-row-padding: calc(var(--osdk-surface-spacing) * 0.5) 0;
|
|
162
166
|
--osdk-filter-checkbox-label-gap: var(--osdk-surface-spacing);
|
|
163
167
|
--osdk-filter-checkbox-value-font-family: var(
|
|
164
168
|
--osdk-typography-family-default
|
|
@@ -167,18 +171,12 @@
|
|
|
167
171
|
--osdk-typography-size-body-medium
|
|
168
172
|
);
|
|
169
173
|
--osdk-filter-checkbox-value-line-height: 1.4;
|
|
170
|
-
--osdk-filter-checkbox-value-color: var(
|
|
171
|
-
--osdk-typography-color-default-rest
|
|
172
|
-
);
|
|
174
|
+
--osdk-filter-checkbox-value-color: var(--osdk-typography-color-default-rest);
|
|
173
175
|
|
|
174
176
|
/* Toggle Tokens */
|
|
175
177
|
--osdk-filter-toggle-label-gap: var(--osdk-surface-spacing);
|
|
176
|
-
--osdk-filter-toggle-label-font-family: var(
|
|
177
|
-
|
|
178
|
-
);
|
|
179
|
-
--osdk-filter-toggle-label-font-size: var(
|
|
180
|
-
--osdk-typography-size-body-medium
|
|
181
|
-
);
|
|
178
|
+
--osdk-filter-toggle-label-font-family: var(--osdk-typography-family-default);
|
|
179
|
+
--osdk-filter-toggle-label-font-size: var(--osdk-typography-size-body-medium);
|
|
182
180
|
--osdk-filter-toggle-label-line-height: 1.4;
|
|
183
181
|
--osdk-filter-toggle-label-color: var(--osdk-typography-color-default-rest);
|
|
184
182
|
|
|
@@ -186,12 +184,10 @@
|
|
|
186
184
|
--osdk-filter-listogram-gap: var(--osdk-surface-spacing);
|
|
187
185
|
--osdk-filter-listogram-row-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
188
186
|
--osdk-filter-listogram-row-padding: var(--osdk-surface-spacing);
|
|
189
|
-
--osdk-filter-listogram-row-border-radius: var(
|
|
190
|
-
--osdk-surface-border-radius
|
|
191
|
-
);
|
|
187
|
+
--osdk-filter-listogram-row-border-radius: var(--osdk-surface-border-radius);
|
|
192
188
|
--osdk-filter-listogram-row-transition: var(
|
|
193
|
-
|
|
194
|
-
|
|
189
|
+
--osdk-emphasis-transition-duration
|
|
190
|
+
)
|
|
195
191
|
var(--osdk-emphasis-ease-default);
|
|
196
192
|
--osdk-filter-listogram-row-bg-hover: var(
|
|
197
193
|
--osdk-surface-background-color-default-hover
|
|
@@ -199,9 +195,7 @@
|
|
|
199
195
|
--osdk-filter-listogram-row-bg-active: var(
|
|
200
196
|
--osdk-surface-background-color-default-active
|
|
201
197
|
);
|
|
202
|
-
--osdk-filter-listogram-row-focus-outline: var(
|
|
203
|
-
--osdk-emphasis-focus-width
|
|
204
|
-
)
|
|
198
|
+
--osdk-filter-listogram-row-focus-outline: var(--osdk-emphasis-focus-width)
|
|
205
199
|
solid var(--osdk-emphasis-focus-color);
|
|
206
200
|
--osdk-filter-listogram-row-focus-offset: var(--osdk-emphasis-focus-offset);
|
|
207
201
|
--osdk-filter-listogram-label-font-family: var(
|
|
@@ -213,15 +207,14 @@
|
|
|
213
207
|
--osdk-filter-listogram-label-color: var(
|
|
214
208
|
--osdk-typography-color-default-rest
|
|
215
209
|
);
|
|
216
|
-
--osdk-filter-listogram-bar-height:
|
|
210
|
+
--osdk-filter-listogram-bar-height: calc(var(--osdk-surface-spacing) * 2);
|
|
211
|
+
--osdk-filter-listogram-bar-width: calc(var(--osdk-surface-spacing) * 12.5);
|
|
217
212
|
--osdk-filter-listogram-bar-bg: var(--osdk-palette-gray-100);
|
|
218
|
-
--osdk-filter-listogram-bar-border-radius: var(
|
|
219
|
-
|
|
220
|
-
);
|
|
221
|
-
--osdk-filter-listogram-bar-color: var(--osdk-custom-color-gray-3);
|
|
213
|
+
--osdk-filter-listogram-bar-border-radius: var(--osdk-surface-border-radius);
|
|
214
|
+
--osdk-filter-listogram-bar-color: var(--osdk-intent-primary-rest);
|
|
222
215
|
--osdk-filter-listogram-bar-fill-transition: var(
|
|
223
|
-
|
|
224
|
-
|
|
216
|
+
--osdk-emphasis-transition-duration
|
|
217
|
+
)
|
|
225
218
|
var(--osdk-emphasis-ease-default);
|
|
226
219
|
--osdk-filter-listogram-count-font-family: var(
|
|
227
220
|
--osdk-typography-family-default
|
|
@@ -232,23 +225,29 @@
|
|
|
232
225
|
--osdk-filter-listogram-count-color: var(--osdk-typography-color-muted);
|
|
233
226
|
|
|
234
227
|
/* Range Input Tokens */
|
|
235
|
-
--osdk-filter-range-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
236
|
-
--osdk-filter-range-histogram-
|
|
237
|
-
|
|
238
|
-
|
|
228
|
+
--osdk-filter-range-gap: calc(var(--osdk-surface-spacing) * 2.5);
|
|
229
|
+
--osdk-filter-range-histogram-padding-bottom: calc(
|
|
230
|
+
var(--osdk-surface-spacing) * 1
|
|
231
|
+
);
|
|
232
|
+
--osdk-filter-range-histogram-padding-inline: calc(
|
|
233
|
+
var(--osdk-surface-spacing) * 2
|
|
234
|
+
);
|
|
235
|
+
--osdk-filter-range-histogram-height: calc(var(--osdk-surface-spacing) * 15);
|
|
236
|
+
--osdk-filter-range-histogram-bar-gap: calc(
|
|
237
|
+
var(--osdk-surface-spacing) * 0.5
|
|
238
|
+
);
|
|
239
|
+
--osdk-filter-range-histogram-bar-min-width: var(--osdk-surface-spacing);
|
|
239
240
|
--osdk-filter-range-histogram-bar-color: var(--osdk-palette-gray-200);
|
|
240
241
|
--osdk-filter-range-histogram-bar-active-color: var(
|
|
241
242
|
--osdk-intent-primary-rest
|
|
242
243
|
);
|
|
243
244
|
--osdk-filter-range-histogram-bar-transition: var(
|
|
244
|
-
|
|
245
|
-
|
|
245
|
+
--osdk-emphasis-transition-duration
|
|
246
|
+
)
|
|
246
247
|
var(--osdk-emphasis-ease-default);
|
|
247
|
-
--osdk-filter-range-inputs-gap: calc(var(--osdk-surface-spacing) *
|
|
248
|
+
--osdk-filter-range-inputs-gap: calc(var(--osdk-surface-spacing) * 0.5);
|
|
248
249
|
--osdk-filter-range-input-wrapper-gap: var(--osdk-surface-spacing);
|
|
249
|
-
--osdk-filter-range-label-font-family: var(
|
|
250
|
-
--osdk-typography-family-default
|
|
251
|
-
);
|
|
250
|
+
--osdk-filter-range-label-font-family: var(--osdk-typography-family-default);
|
|
252
251
|
--osdk-filter-range-label-font-size: var(--osdk-typography-size-body-small);
|
|
253
252
|
--osdk-filter-range-label-color: var(--osdk-typography-color-muted);
|
|
254
253
|
--osdk-filter-range-separator-color: var(--osdk-typography-color-muted);
|
|
@@ -283,7 +282,7 @@
|
|
|
283
282
|
/* Null Value Wrapper Tokens */
|
|
284
283
|
--osdk-filter-null-wrapper-gap: var(--osdk-surface-spacing);
|
|
285
284
|
--osdk-filter-null-row-padding: calc(var(--osdk-surface-spacing) * 1) 0;
|
|
286
|
-
--osdk-filter-null-row-border-top:
|
|
285
|
+
--osdk-filter-null-row-border-top: none;
|
|
287
286
|
--osdk-filter-null-label-gap: var(--osdk-surface-spacing);
|
|
288
287
|
--osdk-filter-null-label-font-family: var(--osdk-typography-family-default);
|
|
289
288
|
--osdk-filter-null-label-font-size: var(--osdk-typography-size-body-medium);
|
|
@@ -307,12 +306,10 @@
|
|
|
307
306
|
/* Single Select Tokens */
|
|
308
307
|
--osdk-filter-select-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
|
|
309
308
|
--osdk-filter-select-clear-color: var(--osdk-typography-color-muted);
|
|
310
|
-
--osdk-filter-select-clear-border-radius: var(
|
|
311
|
-
--osdk-surface-border-radius
|
|
312
|
-
);
|
|
309
|
+
--osdk-filter-select-clear-border-radius: var(--osdk-surface-border-radius);
|
|
313
310
|
--osdk-filter-select-clear-transition: var(
|
|
314
|
-
|
|
315
|
-
|
|
311
|
+
--osdk-emphasis-transition-duration
|
|
312
|
+
)
|
|
316
313
|
var(--osdk-emphasis-ease-default);
|
|
317
314
|
--osdk-filter-select-clear-color-hover: var(
|
|
318
315
|
--osdk-typography-color-default-rest
|
|
@@ -322,35 +319,95 @@
|
|
|
322
319
|
/* Text Tags Tokens */
|
|
323
320
|
--osdk-filter-texttags-gap: var(--osdk-surface-spacing);
|
|
324
321
|
|
|
322
|
+
/* Listogram View All */
|
|
323
|
+
--osdk-filter-listogram-view-all-font-size: var(
|
|
324
|
+
--osdk-typography-size-body-small
|
|
325
|
+
);
|
|
326
|
+
--osdk-filter-listogram-view-all-color: var(--osdk-typography-color-muted);
|
|
327
|
+
|
|
325
328
|
/* Listogram Selected Color */
|
|
326
329
|
--osdk-filter-listogram-selected-color: var(--osdk-intent-primary-rest);
|
|
327
330
|
|
|
328
|
-
/*
|
|
329
|
-
--osdk-filter-
|
|
331
|
+
/* Filter Item */
|
|
332
|
+
--osdk-filter-item-border-radius: var(--osdk-surface-border-radius);
|
|
333
|
+
--osdk-filter-item-padding: calc(var(--osdk-surface-spacing) * 3)
|
|
334
|
+
calc(var(--osdk-surface-spacing) * 3);
|
|
330
335
|
|
|
331
|
-
/*
|
|
332
|
-
--osdk-filter-
|
|
333
|
-
|
|
334
|
-
--osdk-filter-item-exclude-toggle-color: var(--osdk-typography-color-muted);
|
|
335
|
-
--osdk-filter-item-exclude-toggle-color-hover: var(
|
|
336
|
-
--osdk-typography-color-default-rest
|
|
337
|
-
);
|
|
338
|
-
--osdk-filter-item-exclude-toggle-color-active: var(
|
|
339
|
-
--osdk-intent-danger-rest
|
|
336
|
+
/* Checkbox Row Hover */
|
|
337
|
+
--osdk-filter-checkbox-row-bg-hover: var(
|
|
338
|
+
--osdk-surface-background-color-default-hover
|
|
340
339
|
);
|
|
341
|
-
--osdk-filter-
|
|
340
|
+
--osdk-filter-checkbox-row-border-radius: var(--osdk-surface-border-radius);
|
|
341
|
+
|
|
342
|
+
/* Header Action Buttons (search, remove, overflow) */
|
|
343
|
+
--osdk-filter-item-header-action-padding: calc(
|
|
342
344
|
var(--osdk-surface-spacing) * 0.5
|
|
343
345
|
);
|
|
344
|
-
--osdk-filter-item-
|
|
346
|
+
--osdk-filter-item-header-action-color: var(--osdk-typography-color-muted);
|
|
347
|
+
--osdk-filter-item-header-action-bg-hover: var(--osdk-custom-color-gray-1);
|
|
348
|
+
--osdk-filter-item-header-action-border-radius: var(
|
|
345
349
|
--osdk-surface-border-radius
|
|
346
350
|
);
|
|
347
|
-
--osdk-filter-item-exclude-toggle-bg-hover: var(--osdk-custom-color-gray-1);
|
|
348
351
|
|
|
349
|
-
/*
|
|
350
|
-
--osdk-filter-
|
|
352
|
+
/* Exclude Dropdown */
|
|
353
|
+
--osdk-filter-item-exclude-dropdown-font-family: var(
|
|
354
|
+
--osdk-typography-family-default
|
|
355
|
+
);
|
|
356
|
+
--osdk-filter-item-exclude-dropdown-font-size: var(
|
|
357
|
+
--osdk-typography-size-body-small
|
|
358
|
+
);
|
|
359
|
+
--osdk-filter-item-exclude-dropdown-color: var(
|
|
360
|
+
--osdk-typography-color-default-rest
|
|
361
|
+
);
|
|
362
|
+
--osdk-filter-item-exclude-dropdown-trigger-color: var(
|
|
363
|
+
--osdk-intent-primary-rest
|
|
364
|
+
);
|
|
365
|
+
--osdk-filter-item-exclude-dropdown-trigger-border-radius: var(
|
|
366
|
+
--osdk-surface-border-radius
|
|
367
|
+
);
|
|
368
|
+
--osdk-filter-item-exclude-dropdown-separator-color: var(
|
|
369
|
+
--osdk-surface-border-color
|
|
370
|
+
);
|
|
371
|
+
|
|
372
|
+
/* Exclude Dropdown Popup */
|
|
373
|
+
--osdk-filter-item-exclude-dropdown-min-width: calc(
|
|
374
|
+
var(--osdk-surface-spacing) * 30
|
|
375
|
+
);
|
|
376
|
+
|
|
377
|
+
/* Overflow / Dropdown Menu */
|
|
378
|
+
--osdk-filter-item-menu-bg: var(--osdk-background-primary);
|
|
379
|
+
--osdk-filter-item-menu-shadow: var(--osdk-surface-shadow-2);
|
|
380
|
+
--osdk-filter-item-menu-border: var(--osdk-surface-border);
|
|
381
|
+
--osdk-filter-item-menu-border-radius: var(--osdk-surface-border-radius);
|
|
382
|
+
--osdk-filter-item-menu-padding: calc(var(--osdk-surface-spacing) * 0.5);
|
|
383
|
+
--osdk-filter-item-menu-item-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
384
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
385
|
+
--osdk-filter-item-menu-item-font-family: var(
|
|
386
|
+
--osdk-typography-family-default
|
|
387
|
+
);
|
|
388
|
+
--osdk-filter-item-menu-item-font-size: var(
|
|
389
|
+
--osdk-typography-size-body-small
|
|
390
|
+
);
|
|
391
|
+
--osdk-filter-item-menu-item-color: var(--osdk-typography-color-default-rest);
|
|
392
|
+
--osdk-filter-item-menu-item-bg-hover: var(--osdk-custom-color-gray-1);
|
|
393
|
+
--osdk-filter-item-menu-item-border-radius: var(--osdk-surface-border-radius);
|
|
394
|
+
--osdk-filter-item-menu-separator-color: var(--osdk-surface-border-color);
|
|
395
|
+
--osdk-filter-item-menu-check-size: calc(var(--osdk-surface-spacing) * 3);
|
|
396
|
+
|
|
397
|
+
/* Collapsed Filter List */
|
|
398
|
+
--osdk-filter-list-collapsed-width: calc(var(--osdk-surface-spacing) * 10);
|
|
399
|
+
--osdk-filter-list-collapsed-label-font-family: var(
|
|
400
|
+
--osdk-typography-family-default
|
|
401
|
+
);
|
|
402
|
+
--osdk-filter-list-collapsed-label-font-size: var(
|
|
403
|
+
--osdk-typography-size-body-small
|
|
404
|
+
);
|
|
405
|
+
--osdk-filter-list-collapsed-label-color: var(
|
|
406
|
+
--osdk-typography-color-default-rest
|
|
407
|
+
);
|
|
351
408
|
|
|
352
409
|
/* Color Dot */
|
|
353
|
-
--osdk-filter-checkbox-color-dot-size:
|
|
410
|
+
--osdk-filter-checkbox-color-dot-size: calc(var(--osdk-surface-spacing) * 2);
|
|
354
411
|
|
|
355
412
|
/* Multi Select Count */
|
|
356
413
|
--osdk-filter-multiselect-count-font-family: var(
|
|
@@ -360,4 +417,11 @@
|
|
|
360
417
|
--osdk-typography-size-body-small
|
|
361
418
|
);
|
|
362
419
|
--osdk-filter-multiselect-count-color: var(--osdk-typography-color-muted);
|
|
420
|
+
|
|
421
|
+
/* Content Fade Transition */
|
|
422
|
+
--osdk-filter-content-fade-duration: var(--osdk-emphasis-transition-duration);
|
|
423
|
+
|
|
424
|
+
/* Skeleton Loading */
|
|
425
|
+
--osdk-filter-skeleton-text-height: calc(var(--osdk-surface-spacing) * 1.5);
|
|
426
|
+
--osdk-filter-skeleton-count-width: calc(var(--osdk-surface-spacing) * 2.5);
|
|
363
427
|
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--osdk-radio-size: calc(var(--osdk-surface-spacing) * 4);
|
|
3
|
+
--osdk-radio-indicator-size: calc(var(--osdk-surface-spacing) * 2);
|
|
4
|
+
--osdk-radio-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
5
|
+
--osdk-radio-item-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
6
|
+
--osdk-radio-border: var(--osdk-surface-border);
|
|
7
|
+
--osdk-radio-bg: transparent;
|
|
8
|
+
--osdk-radio-bg-hover: var(--osdk-surface-background-color-default-hover);
|
|
9
|
+
--osdk-radio-bg-checked: var(--osdk-intent-primary-rest);
|
|
10
|
+
--osdk-radio-bg-checked-hover: var(--osdk-intent-primary-hover);
|
|
11
|
+
--osdk-radio-bg-checked-active: var(--osdk-intent-primary-active);
|
|
12
|
+
--osdk-radio-indicator-color: var(--osdk-intent-primary-foreground);
|
|
13
|
+
}
|
package/src/tokens/table.css
CHANGED
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
--osdk-table-header-divider: var(--osdk-table-border);
|
|
9
9
|
--osdk-table-cell-divider: var(--osdk-table-border-width) solid transparent;
|
|
10
10
|
--osdk-table-row-divider: var(--osdk-table-border);
|
|
11
|
-
--osdk-table-pinned-column-border:
|
|
12
|
-
solid var(--osdk-table-border-color);
|
|
11
|
+
--osdk-table-pinned-column-border: var(--osdk-table-border);
|
|
13
12
|
|
|
14
13
|
/* Table Header */
|
|
15
14
|
--osdk-table-header-height: 50px;
|
|
@@ -49,6 +48,9 @@
|
|
|
49
48
|
--osdk-table-header-menu-color-active: var(
|
|
50
49
|
--osdk-typography-color-default-rest
|
|
51
50
|
);
|
|
51
|
+
--osdk-table-header-menu-icon-color: var(
|
|
52
|
+
--osdk-table-header-menu-color
|
|
53
|
+
);
|
|
52
54
|
--osdk-table-header-menu-bg-hover: var(--osdk-custom-color-gray-1);
|
|
53
55
|
--osdk-table-header-menu-bg-active: var(--osdk-custom-color-gray-2);
|
|
54
56
|
|
|
@@ -59,7 +61,6 @@
|
|
|
59
61
|
/* Table Skeleton loading */
|
|
60
62
|
--osdk-table-skeleton-color-from: var(--osdk-background-skeleton-from);
|
|
61
63
|
--osdk-table-skeleton-color-to: var(--osdk-background-skeleton-to);
|
|
62
|
-
--osdk-table-skeleton-border-color: var(--osdk-custom-color-light-gray-1);
|
|
63
64
|
|
|
64
65
|
/* Column Config Dialog */
|
|
65
66
|
--osdk-table-column-config-dialog-min-width: 800px;
|
|
@@ -73,6 +74,8 @@
|
|
|
73
74
|
var(--osdk-surface-border-color-strong);
|
|
74
75
|
--osdk-table-cell-edited-border: var(--osdk-surface-border-width) solid
|
|
75
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);
|
|
76
79
|
--osdk-table-cell-editable-bg: var(--osdk-background-primary);
|
|
77
80
|
--osdk-table-edit-container-padding: calc(var(--osdk-surface-spacing) * 2)
|
|
78
81
|
calc(var(--osdk-surface-spacing) * 4);
|
|
@@ -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
|
+
}
|