@osdk/react-components-styles 0.2.0-beta.8 → 0.2.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.
- package/CHANGELOG.md +94 -0
- package/README.md +30 -0
- package/package.json +3 -3
- package/src/index.css +9 -0
- package/src/tokens/base.css +37 -7
- package/src/tokens/cbac-picker.css +137 -0
- package/src/tokens/datetime-picker.css +98 -0
- package/src/tokens/draggable.css +2 -4
- package/src/tokens/filter-list.css +427 -0
- 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.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- ce949bd: Simulated release
|
|
8
|
+
- 7080b01: Add base form layout with header, footer, field components, and CSS token variables for theming
|
|
9
|
+
- c3da451: add marking button, category group, and validation components for CBAC picker
|
|
10
|
+
- c35231f: add cbac css tokens and create cbac-components package
|
|
11
|
+
- 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
|
|
12
|
+
- aa908e4: Redesign filter list collapse into separate render tree and simplify header layout
|
|
13
|
+
- 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
|
|
14
|
+
- bc46400: Add skeleton loading states and polish checkbox list, histogram, and range filter inputs
|
|
15
|
+
- d6c2c8b: Fix FilterList styling
|
|
16
|
+
- 9893b41: Add storybook
|
|
17
|
+
- dffac63: Fix styling nits
|
|
18
|
+
- d6c2c8b: Fix FilterList dropdown
|
|
19
|
+
- 66b7125: Add RadioButtonsField component for action form radio button inputs
|
|
20
|
+
- 1135a27: Update Blueprint css import
|
|
21
|
+
- 7a3c43d: feat(pdf): pdf-viewer component
|
|
22
|
+
- 447e29d: Update editable table UX and API to pass the entire row data on edit
|
|
23
|
+
- 4c7884f: Add custom column, multi column sort and column config
|
|
24
|
+
- dba18e0: Fix css build
|
|
25
|
+
- b373588: Styling fix with global border-box
|
|
26
|
+
- 35f2f1a: Add Media inputs/outputs for Queries
|
|
27
|
+
- 05618c3: Add validation state to editable cell
|
|
28
|
+
- 5ad3ba1: Fix conflicting dependencies and add docs
|
|
29
|
+
- 9c54ee5: Support editable cell
|
|
30
|
+
|
|
31
|
+
## 0.2.0-beta.29
|
|
32
|
+
|
|
33
|
+
### Minor Changes
|
|
34
|
+
|
|
35
|
+
- d6c2c8b: Fix FilterList styling
|
|
36
|
+
- d6c2c8b: Fix FilterList dropdown
|
|
37
|
+
|
|
38
|
+
## 0.2.0-beta.28
|
|
39
|
+
|
|
40
|
+
### Minor Changes
|
|
41
|
+
|
|
42
|
+
- 3eaf3f5: Add CSS layers documentation and Tailwind CSS v4 setup instructions to READMEs
|
|
43
|
+
- 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
|
|
44
|
+
|
|
45
|
+
## 0.2.0-beta.27
|
|
46
|
+
|
|
47
|
+
## 0.2.0-beta.26
|
|
48
|
+
|
|
49
|
+
### Minor Changes
|
|
50
|
+
|
|
51
|
+
- c3da451: add marking button, category group, and validation components for CBAC picker
|
|
52
|
+
- 66b7125: Add RadioButtonsField component for action form radio button inputs
|
|
53
|
+
|
|
54
|
+
## 0.2.0-beta.25
|
|
55
|
+
|
|
56
|
+
## 0.2.0-beta.24
|
|
57
|
+
|
|
58
|
+
## 0.2.0-beta.14
|
|
59
|
+
|
|
60
|
+
### Minor Changes
|
|
61
|
+
|
|
62
|
+
- c35231f: add cbac css tokens and create cbac-components package
|
|
63
|
+
|
|
64
|
+
## 0.2.0-beta.13
|
|
65
|
+
|
|
66
|
+
### Minor Changes
|
|
67
|
+
|
|
68
|
+
- 7080b01: Add base form layout with header, footer, field components, and CSS token variables for theming
|
|
69
|
+
- dffac63: Fix styling nits
|
|
70
|
+
- b373588: Styling fix with global border-box
|
|
71
|
+
|
|
72
|
+
## 0.2.0-beta.12
|
|
73
|
+
|
|
74
|
+
### Minor Changes
|
|
75
|
+
|
|
76
|
+
- bc46400: Add skeleton loading states and polish checkbox list, histogram, and range filter inputs
|
|
77
|
+
- 7a3c43d: feat(pdf): pdf-viewer component
|
|
78
|
+
|
|
79
|
+
## 0.2.0-beta.11
|
|
80
|
+
|
|
81
|
+
### Minor Changes
|
|
82
|
+
|
|
83
|
+
- aa908e4: Redesign filter list collapse into separate render tree and simplify header layout
|
|
84
|
+
|
|
85
|
+
## 0.2.0-beta.10
|
|
86
|
+
|
|
87
|
+
### Minor Changes
|
|
88
|
+
|
|
89
|
+
- 05618c3: Add validation state to editable cell
|
|
90
|
+
|
|
91
|
+
## 0.2.0-beta.9
|
|
92
|
+
|
|
93
|
+
### Minor Changes
|
|
94
|
+
|
|
95
|
+
- 1135a27: Update Blueprint css import
|
|
96
|
+
|
|
3
97
|
## 0.2.0-beta.8
|
|
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.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -10,10 +10,10 @@
|
|
|
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
|
-
"@blueprintjs/core": "^6.
|
|
16
|
+
"@blueprintjs/core": "^6.8.1"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|
package/src/index.css
CHANGED
|
@@ -3,7 +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";
|
|
10
|
+
@import "./tokens/filter-list.css";
|
|
11
|
+
@import "./tokens/form.css";
|
|
12
|
+
@import "./tokens/input.css";
|
|
9
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
|
+
|
package/src/tokens/base.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import "@blueprintjs/core/lib/css/blueprint.css";
|
|
1
|
+
@import "@blueprintjs/core/lib/css/blueprint-design-tokens.css";
|
|
2
2
|
|
|
3
3
|
/* Level 1 - Blueprint Tokens */
|
|
4
4
|
:root {
|
|
@@ -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);
|
|
@@ -33,6 +34,7 @@
|
|
|
33
34
|
--osdk-surface-shadow-2: var(--bp-surface-shadow-2);
|
|
34
35
|
|
|
35
36
|
/* Blueprint token mappings - Typography tokens */
|
|
37
|
+
--osdk-typography-family-default: var(--bp-typography-family-default);
|
|
36
38
|
--osdk-typography-color-muted: var(--bp-typography-color-muted);
|
|
37
39
|
--osdk-typography-color-default-rest: var(--bp-typography-color-default-rest);
|
|
38
40
|
--osdk-typography-color-danger-rest: var(--bp-typography-color-danger-rest);
|
|
@@ -42,8 +44,10 @@
|
|
|
42
44
|
--osdk-typography-size-body-x-small: var(--bp-typography-size-body-x-small);
|
|
43
45
|
--osdk-typography-size-body-small: var(--bp-typography-size-body-small);
|
|
44
46
|
--osdk-typography-size-body-medium: var(--bp-typography-size-body-medium);
|
|
45
|
-
--osdk-typography-
|
|
46
|
-
--osdk-typography-line-height-default: var(
|
|
47
|
+
--osdk-typography-size-body-large: var(--bp-typography-size-body-large);
|
|
48
|
+
--osdk-typography-line-height-default: var(
|
|
49
|
+
--bp-typography-line-height-default
|
|
50
|
+
);
|
|
47
51
|
--osdk-typography-weight-default: var(--bp-typography-weight-default);
|
|
48
52
|
--osdk-typography-weight-bold: var(--bp-typography-weight-bold);
|
|
49
53
|
|
|
@@ -74,10 +78,6 @@
|
|
|
74
78
|
--osdk-intent-danger-disabled: var(--bp-intent-danger-disabled);
|
|
75
79
|
--osdk-intent-danger-foreground: var(--bp-intent-danger-foreground);
|
|
76
80
|
|
|
77
|
-
/* Blueprint token mappings - Iconography tokens */
|
|
78
|
-
--osdk-iconography-size-small: var(--bp-iconography-size-small);
|
|
79
|
-
--osdk-iconography-color-muted: var(--bp-iconography-color-muted);
|
|
80
|
-
|
|
81
81
|
/* Blueprint token mappings - Emphasis tokens */
|
|
82
82
|
--osdk-emphasis-focus-width: var(--bp-emphasis-focus-width);
|
|
83
83
|
--osdk-emphasis-focus-color: var(--bp-emphasis-focus-color);
|
|
@@ -88,6 +88,9 @@
|
|
|
88
88
|
/* Blueprint token mappings - Palette tokens */
|
|
89
89
|
--osdk-palette-gray-1: var(--bp-palette-gray-1);
|
|
90
90
|
--osdk-palette-gray-2: var(--bp-palette-gray-2);
|
|
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);
|
|
91
94
|
--osdk-palette-light-gray-1: var(--bp-palette-light-gray-1);
|
|
92
95
|
--osdk-palette-light-gray-3: var(--bp-palette-light-gray-3);
|
|
93
96
|
--osdk-palette-light-gray-4: var(--bp-palette-light-gray-4);
|
|
@@ -161,5 +164,32 @@
|
|
|
161
164
|
--osdk-surface-border: var(--osdk-surface-border-width) solid
|
|
162
165
|
var(--osdk-surface-border-color-default);
|
|
163
166
|
|
|
167
|
+
/* Shared drag handle tokens */
|
|
168
|
+
--osdk-drag-handle-color: var(--osdk-typography-color-muted);
|
|
169
|
+
--osdk-drag-handle-color-hover: var(--osdk-typography-color-default-rest);
|
|
170
|
+
--osdk-drag-handle-cursor: grab;
|
|
171
|
+
--osdk-drag-handle-cursor-active: grabbing;
|
|
172
|
+
|
|
173
|
+
/* Shared icon styling */
|
|
174
|
+
--osdk-iconography-size-small: var(--osdk-typography-size-body-large);
|
|
175
|
+
--osdk-iconography-color-muted: var(--osdk-intent-default-rest);
|
|
176
|
+
|
|
177
|
+
/* Global styling */
|
|
164
178
|
font-family: var(--osdk-typography-family-default);
|
|
179
|
+
color: var(--osdk-typography-color-default-rest);
|
|
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
|
+
}
|
|
165
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
|
+
}
|
package/src/tokens/draggable.css
CHANGED
|
@@ -5,9 +5,7 @@
|
|
|
5
5
|
--osdk-draggable-item-padding: calc(var(--osdk-surface-spacing) * 2)
|
|
6
6
|
calc(var(--osdk-surface-spacing) * 3);
|
|
7
7
|
--osdk-draggable-item-gap: var(--osdk-surface-spacing);
|
|
8
|
-
--osdk-draggable-item-drag-icon-color: var(--osdk-
|
|
9
|
-
--osdk-draggable-item-drag-icon-color-hover: var(
|
|
10
|
-
--osdk-typography-color-default-rest
|
|
11
|
-
);
|
|
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);
|
|
12
10
|
--osdk-draggable-item-icon-size: var(--osdk-iconography-size-small);
|
|
13
11
|
}
|
|
@@ -0,0 +1,427 @@
|
|
|
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: 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
|
+
--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);
|
|
19
|
+
|
|
20
|
+
/* Filter List Content */
|
|
21
|
+
--osdk-filter-list-content-gap: 0;
|
|
22
|
+
--osdk-filter-list-empty-text-color: var(--osdk-typography-color-muted);
|
|
23
|
+
--osdk-filter-list-empty-font-size: var(--osdk-typography-size-body-small);
|
|
24
|
+
|
|
25
|
+
/* Filter List Header */
|
|
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;
|
|
29
|
+
--osdk-filter-header-border-bottom: var(--osdk-surface-border);
|
|
30
|
+
--osdk-filter-header-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
31
|
+
--osdk-filter-header-titleContainer-gap: var(--osdk-surface-spacing);
|
|
32
|
+
--osdk-filter-header-font-family: var(--osdk-typography-family-default);
|
|
33
|
+
--osdk-filter-header-font-size: var(--osdk-typography-size-body-medium);
|
|
34
|
+
--osdk-filter-header-font-weight: var(--osdk-typography-weight-bold);
|
|
35
|
+
--osdk-filter-header-color: var(--osdk-typography-color-default-rest);
|
|
36
|
+
--osdk-filter-header-icon-color: var(--osdk-typography-color-muted);
|
|
37
|
+
--osdk-filter-header-activeCount-font-size: var(
|
|
38
|
+
--osdk-typography-size-body-small
|
|
39
|
+
);
|
|
40
|
+
--osdk-filter-header-activeCount-color: var(--osdk-typography-color-muted);
|
|
41
|
+
--osdk-filter-header-button-padding: calc(var(--osdk-surface-spacing) * 1);
|
|
42
|
+
--osdk-filter-header-button-bg: transparent;
|
|
43
|
+
--osdk-filter-header-button-border-radius: var(--osdk-surface-border-radius);
|
|
44
|
+
--osdk-filter-header-button-transition: var(
|
|
45
|
+
--osdk-emphasis-transition-duration
|
|
46
|
+
)
|
|
47
|
+
var(--osdk-emphasis-ease-default);
|
|
48
|
+
--osdk-filter-header-button-bg-hover: var(--osdk-custom-color-gray-1);
|
|
49
|
+
--osdk-filter-header-button-bg-active: var(--osdk-custom-color-gray-2);
|
|
50
|
+
--osdk-filter-header-reset-font-size: var(--osdk-typography-size-body-small);
|
|
51
|
+
--osdk-filter-header-reset-color: var(--osdk-intent-primary-rest);
|
|
52
|
+
--osdk-filter-header-reset-color-disabled: var(--osdk-typography-color-muted);
|
|
53
|
+
--osdk-filter-header-reset-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
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
|
+
);
|
|
63
|
+
--osdk-filter-header-collapse-icon-border-width: var(
|
|
64
|
+
--osdk-surface-border-width
|
|
65
|
+
);
|
|
66
|
+
--osdk-filter-header-collapse-icon-color: var(--osdk-typography-color-muted);
|
|
67
|
+
|
|
68
|
+
/* Filter Item */
|
|
69
|
+
--osdk-filter-item-gap: calc(var(--osdk-surface-spacing) * 1);
|
|
70
|
+
--osdk-filter-item-label-font-family: var(--osdk-typography-family-default);
|
|
71
|
+
--osdk-filter-item-label-font-size: var(--osdk-typography-size-body-small);
|
|
72
|
+
--osdk-filter-item-label-font-weight: var(--osdk-typography-weight-bold);
|
|
73
|
+
--osdk-filter-item-label-color: var(--osdk-typography-color-muted);
|
|
74
|
+
--osdk-filter-item-drag-handle-padding: calc(
|
|
75
|
+
var(--osdk-surface-spacing) * 0.5
|
|
76
|
+
);
|
|
77
|
+
--osdk-filter-item-drag-handle-bg: transparent;
|
|
78
|
+
--osdk-filter-item-drag-handle-border-radius: var(
|
|
79
|
+
--osdk-surface-border-radius
|
|
80
|
+
);
|
|
81
|
+
--osdk-filter-item-drag-handle-color: var(--osdk-drag-handle-color);
|
|
82
|
+
--osdk-filter-item-drag-handle-color-hover: var(
|
|
83
|
+
--osdk-drag-handle-color-hover
|
|
84
|
+
);
|
|
85
|
+
--osdk-filter-item-drag-handle-bg-hover: var(--osdk-custom-color-gray-1);
|
|
86
|
+
--osdk-filter-item-drag-handle-focus-outline-color: var(
|
|
87
|
+
--osdk-emphasis-focus-color
|
|
88
|
+
);
|
|
89
|
+
--osdk-filter-item-dragging-opacity: 0.5;
|
|
90
|
+
--osdk-filter-item-drag-overlay-shadow: var(--osdk-surface-shadow-2);
|
|
91
|
+
--osdk-filter-item-drag-overlay-border-radius: var(
|
|
92
|
+
--osdk-surface-border-radius
|
|
93
|
+
);
|
|
94
|
+
--osdk-filter-item-drag-overlay-bg: var(--osdk-background-primary);
|
|
95
|
+
|
|
96
|
+
/* Shared Input Tokens */
|
|
97
|
+
--osdk-filter-input-bg: var(--osdk-background-primary);
|
|
98
|
+
--osdk-filter-input-border: var(--osdk-surface-border);
|
|
99
|
+
--osdk-filter-input-border-radius: var(--osdk-surface-border-radius);
|
|
100
|
+
--osdk-filter-input-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
101
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
102
|
+
--osdk-filter-input-gap: var(--osdk-surface-spacing);
|
|
103
|
+
--osdk-filter-input-transition: var(--osdk-emphasis-transition-duration)
|
|
104
|
+
var(--osdk-emphasis-ease-default);
|
|
105
|
+
--osdk-filter-input-focus-border: var(--osdk-intent-primary-rest);
|
|
106
|
+
--osdk-filter-input-focus-outline-width: var(--osdk-emphasis-focus-width);
|
|
107
|
+
--osdk-filter-input-focus-outline-color: var(--osdk-emphasis-focus-color);
|
|
108
|
+
--osdk-filter-input-focus-outline-offset: var(--osdk-emphasis-focus-offset);
|
|
109
|
+
--osdk-filter-input-icon-color: var(--osdk-typography-color-muted);
|
|
110
|
+
--osdk-filter-input-font-family: var(--osdk-typography-family-default);
|
|
111
|
+
--osdk-filter-input-font-size: var(--osdk-typography-size-body-small);
|
|
112
|
+
--osdk-filter-input-color: var(--osdk-typography-color-default-rest);
|
|
113
|
+
--osdk-filter-input-placeholder-color: var(--osdk-typography-color-muted);
|
|
114
|
+
--osdk-filter-input-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
|
|
115
|
+
--osdk-filter-input-clear-bg: transparent;
|
|
116
|
+
--osdk-filter-input-clear-border-radius: var(--osdk-surface-border-radius);
|
|
117
|
+
--osdk-filter-input-clear-bg-hover: var(--osdk-custom-color-gray-1);
|
|
118
|
+
--osdk-filter-input-clear-bg-active: var(--osdk-custom-color-gray-2);
|
|
119
|
+
|
|
120
|
+
/* Shared Message Tokens */
|
|
121
|
+
--osdk-filter-message-font-family: var(--osdk-typography-family-default);
|
|
122
|
+
--osdk-filter-message-font-size: var(--osdk-typography-size-body-small);
|
|
123
|
+
--osdk-filter-message-padding: var(--osdk-surface-spacing);
|
|
124
|
+
--osdk-filter-message-color-muted: var(--osdk-typography-color-muted);
|
|
125
|
+
--osdk-filter-message-color-danger: var(--osdk-intent-danger-rest);
|
|
126
|
+
|
|
127
|
+
/* Tag Tokens */
|
|
128
|
+
--osdk-filter-tag-container-gap: calc(var(--osdk-surface-spacing) * 1);
|
|
129
|
+
--osdk-filter-tag-gap: calc(var(--osdk-surface-spacing) * 0.5);
|
|
130
|
+
--osdk-filter-tag-padding: calc(var(--osdk-surface-spacing) * 0.5)
|
|
131
|
+
calc(var(--osdk-surface-spacing) * 1);
|
|
132
|
+
--osdk-filter-tag-border-radius: var(--osdk-surface-border-radius);
|
|
133
|
+
--osdk-filter-tag-bg: var(--osdk-custom-color-gray-1);
|
|
134
|
+
--osdk-filter-tag-font-family: var(--osdk-typography-family-default);
|
|
135
|
+
--osdk-filter-tag-font-size: var(--osdk-typography-size-body-small);
|
|
136
|
+
--osdk-filter-tag-line-height: 1.4;
|
|
137
|
+
--osdk-filter-tag-color: var(--osdk-typography-color-default-rest);
|
|
138
|
+
--osdk-filter-tag-remove-color: var(--osdk-typography-color-muted);
|
|
139
|
+
--osdk-filter-tag-remove-font-size: var(--osdk-typography-size-body-medium);
|
|
140
|
+
--osdk-filter-tag-remove-transition: var(--osdk-emphasis-transition-duration)
|
|
141
|
+
var(--osdk-emphasis-ease-default);
|
|
142
|
+
--osdk-filter-tag-remove-color-hover: var(
|
|
143
|
+
--osdk-typography-color-default-rest
|
|
144
|
+
);
|
|
145
|
+
|
|
146
|
+
/* Error Boundary Tokens */
|
|
147
|
+
--osdk-error-boundary-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
148
|
+
--osdk-error-boundary-padding: calc(var(--osdk-surface-spacing) * 2);
|
|
149
|
+
--osdk-error-boundary-border-radius: var(--osdk-surface-border-radius);
|
|
150
|
+
--osdk-error-boundary-bg: var(--osdk-surface-background-color-danger-rest);
|
|
151
|
+
--osdk-error-boundary-font-size: var(--osdk-typography-size-body-small);
|
|
152
|
+
--osdk-error-boundary-text-color: var(--osdk-typography-color-danger-rest);
|
|
153
|
+
--osdk-error-boundary-button-padding: calc(var(--osdk-surface-spacing) * 1)
|
|
154
|
+
calc(var(--osdk-surface-spacing) * 2);
|
|
155
|
+
--osdk-error-boundary-button-border-color: currentColor;
|
|
156
|
+
--osdk-error-boundary-button-border-radius: var(--osdk-surface-border-radius);
|
|
157
|
+
--osdk-error-boundary-button-font-size: var(
|
|
158
|
+
--osdk-typography-size-body-x-small
|
|
159
|
+
);
|
|
160
|
+
--osdk-error-boundary-button-color: inherit;
|
|
161
|
+
--osdk-error-boundary-button-hover-bg: var(--osdk-custom-color-gray-1);
|
|
162
|
+
|
|
163
|
+
/* Checkbox List Tokens */
|
|
164
|
+
--osdk-filter-checkbox-list-gap: calc(var(--osdk-surface-spacing) * 0.5);
|
|
165
|
+
--osdk-filter-checkbox-row-padding: calc(var(--osdk-surface-spacing) * 0.5) 0;
|
|
166
|
+
--osdk-filter-checkbox-label-gap: var(--osdk-surface-spacing);
|
|
167
|
+
--osdk-filter-checkbox-value-font-family: var(
|
|
168
|
+
--osdk-typography-family-default
|
|
169
|
+
);
|
|
170
|
+
--osdk-filter-checkbox-value-font-size: var(
|
|
171
|
+
--osdk-typography-size-body-medium
|
|
172
|
+
);
|
|
173
|
+
--osdk-filter-checkbox-value-line-height: 1.4;
|
|
174
|
+
--osdk-filter-checkbox-value-color: var(--osdk-typography-color-default-rest);
|
|
175
|
+
|
|
176
|
+
/* Toggle Tokens */
|
|
177
|
+
--osdk-filter-toggle-label-gap: var(--osdk-surface-spacing);
|
|
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);
|
|
180
|
+
--osdk-filter-toggle-label-line-height: 1.4;
|
|
181
|
+
--osdk-filter-toggle-label-color: var(--osdk-typography-color-default-rest);
|
|
182
|
+
|
|
183
|
+
/* Listogram Tokens */
|
|
184
|
+
--osdk-filter-listogram-gap: var(--osdk-surface-spacing);
|
|
185
|
+
--osdk-filter-listogram-row-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
186
|
+
--osdk-filter-listogram-row-padding: var(--osdk-surface-spacing);
|
|
187
|
+
--osdk-filter-listogram-row-border-radius: var(--osdk-surface-border-radius);
|
|
188
|
+
--osdk-filter-listogram-row-transition: var(
|
|
189
|
+
--osdk-emphasis-transition-duration
|
|
190
|
+
)
|
|
191
|
+
var(--osdk-emphasis-ease-default);
|
|
192
|
+
--osdk-filter-listogram-row-bg-hover: var(
|
|
193
|
+
--osdk-surface-background-color-default-hover
|
|
194
|
+
);
|
|
195
|
+
--osdk-filter-listogram-row-bg-active: var(
|
|
196
|
+
--osdk-surface-background-color-default-active
|
|
197
|
+
);
|
|
198
|
+
--osdk-filter-listogram-row-focus-outline: var(--osdk-emphasis-focus-width)
|
|
199
|
+
solid var(--osdk-emphasis-focus-color);
|
|
200
|
+
--osdk-filter-listogram-row-focus-offset: var(--osdk-emphasis-focus-offset);
|
|
201
|
+
--osdk-filter-listogram-label-font-family: var(
|
|
202
|
+
--osdk-typography-family-default
|
|
203
|
+
);
|
|
204
|
+
--osdk-filter-listogram-label-font-size: var(
|
|
205
|
+
--osdk-typography-size-body-medium
|
|
206
|
+
);
|
|
207
|
+
--osdk-filter-listogram-label-color: var(
|
|
208
|
+
--osdk-typography-color-default-rest
|
|
209
|
+
);
|
|
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);
|
|
212
|
+
--osdk-filter-listogram-bar-bg: var(--osdk-palette-gray-100);
|
|
213
|
+
--osdk-filter-listogram-bar-border-radius: var(--osdk-surface-border-radius);
|
|
214
|
+
--osdk-filter-listogram-bar-color: var(--osdk-intent-primary-rest);
|
|
215
|
+
--osdk-filter-listogram-bar-fill-transition: var(
|
|
216
|
+
--osdk-emphasis-transition-duration
|
|
217
|
+
)
|
|
218
|
+
var(--osdk-emphasis-ease-default);
|
|
219
|
+
--osdk-filter-listogram-count-font-family: var(
|
|
220
|
+
--osdk-typography-family-default
|
|
221
|
+
);
|
|
222
|
+
--osdk-filter-listogram-count-font-size: var(
|
|
223
|
+
--osdk-typography-size-body-small
|
|
224
|
+
);
|
|
225
|
+
--osdk-filter-listogram-count-color: var(--osdk-typography-color-muted);
|
|
226
|
+
|
|
227
|
+
/* Range Input Tokens */
|
|
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);
|
|
240
|
+
--osdk-filter-range-histogram-bar-color: var(--osdk-palette-gray-200);
|
|
241
|
+
--osdk-filter-range-histogram-bar-active-color: var(
|
|
242
|
+
--osdk-intent-primary-rest
|
|
243
|
+
);
|
|
244
|
+
--osdk-filter-range-histogram-bar-transition: var(
|
|
245
|
+
--osdk-emphasis-transition-duration
|
|
246
|
+
)
|
|
247
|
+
var(--osdk-emphasis-ease-default);
|
|
248
|
+
--osdk-filter-range-inputs-gap: calc(var(--osdk-surface-spacing) * 0.5);
|
|
249
|
+
--osdk-filter-range-input-wrapper-gap: var(--osdk-surface-spacing);
|
|
250
|
+
--osdk-filter-range-label-font-family: var(--osdk-typography-family-default);
|
|
251
|
+
--osdk-filter-range-label-font-size: var(--osdk-typography-size-body-small);
|
|
252
|
+
--osdk-filter-range-label-color: var(--osdk-typography-color-muted);
|
|
253
|
+
--osdk-filter-range-separator-color: var(--osdk-typography-color-muted);
|
|
254
|
+
|
|
255
|
+
/* Timeline Input Tokens */
|
|
256
|
+
--osdk-filter-timeline-labels-gap: var(--osdk-surface-spacing);
|
|
257
|
+
--osdk-filter-timeline-labels-font-family: var(
|
|
258
|
+
--osdk-typography-family-default
|
|
259
|
+
);
|
|
260
|
+
--osdk-filter-timeline-labels-font-size: var(
|
|
261
|
+
--osdk-typography-size-body-small
|
|
262
|
+
);
|
|
263
|
+
--osdk-filter-timeline-labels-color: var(--osdk-typography-color-muted);
|
|
264
|
+
--osdk-filter-timeline-button-padding: calc(
|
|
265
|
+
var(--osdk-surface-spacing) * 0.5
|
|
266
|
+
);
|
|
267
|
+
--osdk-filter-timeline-button-color: var(--osdk-iconography-color-muted);
|
|
268
|
+
--osdk-filter-timeline-button-border-radius: var(
|
|
269
|
+
--osdk-surface-border-radius
|
|
270
|
+
);
|
|
271
|
+
--osdk-filter-timeline-button-bg-hover: var(
|
|
272
|
+
--osdk-surface-background-color-default-hover
|
|
273
|
+
);
|
|
274
|
+
--osdk-filter-timeline-button-color-hover: var(
|
|
275
|
+
--osdk-typography-color-default-rest
|
|
276
|
+
);
|
|
277
|
+
--osdk-filter-timeline-brush-color: var(--osdk-typography-color-muted);
|
|
278
|
+
--osdk-filter-timeline-input-font-size: var(
|
|
279
|
+
--osdk-typography-size-body-medium
|
|
280
|
+
);
|
|
281
|
+
|
|
282
|
+
/* Null Value Wrapper Tokens */
|
|
283
|
+
--osdk-filter-null-wrapper-gap: var(--osdk-surface-spacing);
|
|
284
|
+
--osdk-filter-null-row-padding: calc(var(--osdk-surface-spacing) * 1) 0;
|
|
285
|
+
--osdk-filter-null-row-border-top: none;
|
|
286
|
+
--osdk-filter-null-label-gap: var(--osdk-surface-spacing);
|
|
287
|
+
--osdk-filter-null-label-font-family: var(--osdk-typography-family-default);
|
|
288
|
+
--osdk-filter-null-label-font-size: var(--osdk-typography-size-body-medium);
|
|
289
|
+
--osdk-filter-null-label-line-height: 1.4;
|
|
290
|
+
--osdk-filter-null-label-color: var(--osdk-typography-color-default-rest);
|
|
291
|
+
--osdk-filter-null-count-font-family: var(--osdk-typography-family-default);
|
|
292
|
+
--osdk-filter-null-count-font-size: var(--osdk-typography-size-body-small);
|
|
293
|
+
--osdk-filter-null-count-color: var(--osdk-typography-color-muted);
|
|
294
|
+
|
|
295
|
+
/* Multi-Select Tokens */
|
|
296
|
+
--osdk-filter-multiselect-gap: calc(var(--osdk-surface-spacing) * 2);
|
|
297
|
+
--osdk-filter-multiselect-inputRow-gap: var(--osdk-surface-spacing);
|
|
298
|
+
|
|
299
|
+
/* Single/Multi Date Tokens */
|
|
300
|
+
--osdk-filter-select-container-gap: var(--osdk-surface-spacing);
|
|
301
|
+
--osdk-filter-date-clear-font-family: var(--osdk-typography-family-default);
|
|
302
|
+
--osdk-filter-date-clear-font-size: var(--osdk-typography-size-body-small);
|
|
303
|
+
--osdk-filter-date-clear-color: var(--osdk-intent-primary-rest);
|
|
304
|
+
--osdk-filter-date-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
|
|
305
|
+
|
|
306
|
+
/* Single Select Tokens */
|
|
307
|
+
--osdk-filter-select-clear-padding: calc(var(--osdk-surface-spacing) * 0.5);
|
|
308
|
+
--osdk-filter-select-clear-color: var(--osdk-typography-color-muted);
|
|
309
|
+
--osdk-filter-select-clear-border-radius: var(--osdk-surface-border-radius);
|
|
310
|
+
--osdk-filter-select-clear-transition: var(
|
|
311
|
+
--osdk-emphasis-transition-duration
|
|
312
|
+
)
|
|
313
|
+
var(--osdk-emphasis-ease-default);
|
|
314
|
+
--osdk-filter-select-clear-color-hover: var(
|
|
315
|
+
--osdk-typography-color-default-rest
|
|
316
|
+
);
|
|
317
|
+
--osdk-filter-select-clear-bg-hover: var(--osdk-custom-color-gray-1);
|
|
318
|
+
|
|
319
|
+
/* Text Tags Tokens */
|
|
320
|
+
--osdk-filter-texttags-gap: var(--osdk-surface-spacing);
|
|
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
|
+
|
|
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) * 3)
|
|
334
|
+
calc(var(--osdk-surface-spacing) * 3);
|
|
335
|
+
|
|
336
|
+
/* Checkbox Row Hover */
|
|
337
|
+
--osdk-filter-checkbox-row-bg-hover: var(
|
|
338
|
+
--osdk-surface-background-color-default-hover
|
|
339
|
+
);
|
|
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(
|
|
344
|
+
var(--osdk-surface-spacing) * 0.5
|
|
345
|
+
);
|
|
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(
|
|
349
|
+
--osdk-surface-border-radius
|
|
350
|
+
);
|
|
351
|
+
|
|
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
|
+
);
|
|
408
|
+
|
|
409
|
+
/* Color Dot */
|
|
410
|
+
--osdk-filter-checkbox-color-dot-size: calc(var(--osdk-surface-spacing) * 2);
|
|
411
|
+
|
|
412
|
+
/* Multi Select Count */
|
|
413
|
+
--osdk-filter-multiselect-count-font-family: var(
|
|
414
|
+
--osdk-typography-family-default
|
|
415
|
+
);
|
|
416
|
+
--osdk-filter-multiselect-count-font-size: var(
|
|
417
|
+
--osdk-typography-size-body-small
|
|
418
|
+
);
|
|
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);
|
|
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
|
+
}
|