@osdk/react-components-styles 0.2.0-beta.9 → 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.
Files changed (14) hide show
  1. package/CHANGELOG.md +88 -0
  2. package/README.md +30 -0
  3. package/package.json +2 -2
  4. package/src/index.css +8 -0
  5. package/src/tokens/base.css +19 -2
  6. package/src/tokens/cbac-picker.css +137 -0
  7. package/src/tokens/datetime-picker.css +98 -0
  8. package/src/tokens/filter-list.css +157 -93
  9. package/src/tokens/form.css +29 -0
  10. package/src/tokens/input.css +34 -0
  11. package/src/tokens/pdf-viewer.css +45 -0
  12. package/src/tokens/radio.css +13 -0
  13. package/src/tokens/table.css +6 -3
  14. package/src/tokens/tooltip.css +9 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,93 @@
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
+
3
91
  ## 0.2.0-beta.9
4
92
 
5
93
  ### 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-beta.9",
3
+ "version": "0.2.0",
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": "^5.19.1 || ^6.7.0"
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
+
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-100: var(--bp-palette-gray-100);
91
- --osdk-palette-gray-200: var(--bp-palette-gray-200);
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
  }
package/src/tokens/cbac-picker.css ADDED
@@ -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
+ }
package/src/tokens/datetime-picker.css ADDED
@@ -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/filter-list.css CHANGED
@@ -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: calc(var(--osdk-surface-spacing) * 3);
7
- --osdk-filter-list-gap: calc(var(--osdk-surface-spacing) * 3);
8
- --osdk-filter-list-addButton-padding-top: calc(
9
- var(--osdk-surface-spacing) * 2
10
- );
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: calc(var(--osdk-surface-spacing) * 3);
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-bottom: calc(var(--osdk-surface-spacing) * 2);
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
- --osdk-emphasis-transition-duration
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) * 2);
51
- --osdk-filter-header-collapse-icon-size: 6px;
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-default-rest);
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(--osdk-drag-handle-color-hover);
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
- --osdk-typography-size-body-medium
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
- --osdk-typography-family-default
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
- --osdk-emphasis-transition-duration
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: 8px;
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
- --osdk-surface-border-radius
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
- --osdk-emphasis-transition-duration
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-height: 60px;
237
- --osdk-filter-range-histogram-bar-gap: 2px;
238
- --osdk-filter-range-histogram-bar-min-width: 4px;
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
- --osdk-emphasis-transition-duration
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) * 2);
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: var(--osdk-surface-border);
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
- --osdk-emphasis-transition-duration
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
- /* Collapse Transition */
329
- --osdk-filter-list-collapse-transition: 200ms ease-out;
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
- /* Exclude Toggle */
332
- --osdk-filter-item-exclude-border-width: 2px;
333
- --osdk-filter-item-exclude-border-color: var(--osdk-intent-danger-rest);
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-item-exclude-toggle-padding: calc(
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-exclude-toggle-border-radius: var(
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
- /* Select All Separator */
350
- --osdk-filter-checkbox-selectall-border-bottom: var(--osdk-surface-border);
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: 8px;
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
  }
package/src/tokens/form.css ADDED
@@ -0,0 +1,29 @@
1
+ :root {
2
+ /* Form layout */
3
+ --osdk-form-content-padding: calc(var(--osdk-surface-spacing) * 4);
4
+ --osdk-form-field-gap: calc(var(--osdk-surface-spacing) * 4);
5
+
6
+ /* Form header */
7
+ --osdk-form-header-border-color: var(--osdk-surface-border-color-default);
8
+ --osdk-form-header-font-size: var(--osdk-typography-size-body-large);
9
+ --osdk-form-header-font-weight: var(--osdk-typography-weight-bold);
10
+ --osdk-form-header-color: var(--osdk-typography-color-default-rest);
11
+ --osdk-form-header-block-padding: calc(var(--osdk-surface-spacing) * 3);
12
+ --osdk-form-header-inline-padding: var(--osdk-form-content-padding);
13
+
14
+ /* Form footer */
15
+ --osdk-form-footer-border-color: var(--osdk-surface-border-color-default);
16
+
17
+ /* Form labels */
18
+ --osdk-form-label-font-size: var(--osdk-typography-size-body-medium);
19
+ --osdk-form-label-font-weight: var(--osdk-typography-weight-bold);
20
+ --osdk-form-label-color: var(--osdk-typography-color-default-rest);
21
+ --osdk-form-label-field-gap: calc(var(--osdk-surface-spacing) * 1.5);
22
+
23
+ /* Required indicator */
24
+ --osdk-form-required-color: var(--osdk-intent-danger-rest);
25
+
26
+ /* Validation errors */
27
+ --osdk-form-error-font-size: var(--osdk-typography-size-body-small);
28
+ --osdk-form-error-color: var(--osdk-typography-color-danger-rest);
29
+ }
package/src/tokens/input.css ADDED
@@ -0,0 +1,34 @@
1
+ :root {
2
+ /* Input dimensions */
3
+ --osdk-input-min-height: 30px;
4
+ --osdk-input-padding: calc(var(--osdk-surface-spacing) * 1.5)
5
+ calc(var(--osdk-surface-spacing) * 2.5);
6
+ --osdk-input-border-radius: var(--osdk-surface-border-radius);
7
+
8
+ /* Input borders */
9
+ --osdk-input-border-width: var(--osdk-surface-border-width);
10
+ --osdk-input-border-color: var(--osdk-surface-border-color-default);
11
+ --osdk-input-border-color-focus: var(--osdk-intent-primary-rest);
12
+
13
+ /* Input backgrounds */
14
+ --osdk-input-bg: var(--osdk-surface-background-color-default-rest);
15
+ --osdk-input-bg-hover: var(--osdk-surface-background-color-default-hover);
16
+
17
+ /* Input typography */
18
+ --osdk-input-color: var(--osdk-typography-color-default-rest);
19
+ --osdk-input-placeholder-color: var(--osdk-typography-color-muted);
20
+ --osdk-input-font-size: var(--osdk-typography-size-body-medium);
21
+ --osdk-input-font-family: var(--osdk-typography-family-default);
22
+
23
+ /* Input transitions */
24
+ --osdk-input-transition-duration: var(--osdk-emphasis-transition-duration);
25
+ --osdk-input-transition-ease: var(--osdk-emphasis-ease-default);
26
+
27
+ /* Input focus ring */
28
+ --osdk-input-focus-width: var(--osdk-emphasis-focus-width);
29
+ --osdk-input-focus-color: var(--osdk-emphasis-focus-color);
30
+ --osdk-input-focus-offset: var(--osdk-emphasis-focus-offset);
31
+
32
+ /* Input disabled */
33
+ --osdk-input-disabled-opacity: 0.5;
34
+ }
package/src/tokens/pdf-viewer.css ADDED
@@ -0,0 +1,45 @@
1
+ :root {
2
+ /* PDF Viewer - Container */
3
+ --osdk-pdf-viewer-bg: var(--osdk-background-primary);
4
+ --osdk-pdf-viewer-border: var(--osdk-surface-border);
5
+
6
+ /* PDF Viewer - Toolbar */
7
+ --osdk-pdf-viewer-toolbar-bg: var(--osdk-background-secondary);
8
+ --osdk-pdf-viewer-toolbar-border: var(--osdk-surface-border);
9
+ --osdk-pdf-viewer-toolbar-color: var(--osdk-typography-color-default-rest);
10
+ --osdk-pdf-viewer-toolbar-gap: var(--osdk-surface-spacing);
11
+
12
+ /* PDF Viewer - Search */
13
+ --osdk-pdf-viewer-search-highlight: color-mix(
14
+ in srgb,
15
+ var(--osdk-intent-warning-rest) 40%,
16
+ transparent
17
+ );
18
+ --osdk-pdf-viewer-search-active: color-mix(
19
+ in srgb,
20
+ var(--osdk-intent-warning-rest) 70%,
21
+ transparent
22
+ );
23
+ --osdk-pdf-viewer-search-bar-bg: var(--osdk-background-primary);
24
+
25
+ /* PDF Viewer - Annotations */
26
+ --osdk-pdf-viewer-annotation-highlight: color-mix(
27
+ in srgb,
28
+ var(--osdk-intent-primary-rest) 30%,
29
+ transparent
30
+ );
31
+ --osdk-pdf-viewer-annotation-underline: var(--osdk-intent-primary-rest);
32
+ --osdk-pdf-viewer-annotation-comment: var(--osdk-intent-warning-rest);
33
+ --osdk-pdf-viewer-annotation-pin: var(--osdk-intent-danger-rest);
34
+
35
+ /* PDF Viewer - Page */
36
+ --osdk-pdf-viewer-page-shadow: var(--osdk-surface-shadow-2);
37
+ --osdk-pdf-viewer-page-gap: var(--osdk-surface-spacing);
38
+
39
+ /* PDF Viewer - Sidebar */
40
+ --osdk-pdf-viewer-sidebar-width: 200px;
41
+ --osdk-pdf-viewer-sidebar-bg: var(--osdk-background-secondary);
42
+ --osdk-pdf-viewer-sidebar-border: var(--osdk-surface-border);
43
+ --osdk-pdf-viewer-sidebar-active-border: var(--osdk-intent-primary-rest);
44
+ --osdk-pdf-viewer-sidebar-thumbnail-gap: var(--osdk-surface-spacing);
45
+ }
package/src/tokens/radio.css ADDED
@@ -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: calc(var(--osdk-table-border-width) * 2)
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);
package/src/tokens/tooltip.css ADDED
@@ -0,0 +1,9 @@
1
+ :root {
2
+ --osdk-tooltip-z-index: var(--osdk-surface-z-index-4);
3
+ --osdk-tooltip-padding: calc(var(--osdk-surface-spacing) * 2)
4
+ calc(var(--osdk-surface-spacing) * 4);
5
+ --osdk-tooltip-bg: var(--osdk-background-primary);
6
+ --osdk-tooltip-border-color: var(--osdk-palette-gray-4);
7
+ --osdk-tooltip-shadow: var(--osdk-surface-shadow-2);
8
+ --osdk-tooltip-max-width: 300px;
9
+ }