@osdk/react-components-styles 0.0.1 → 0.1.0-beta.1

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 (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +6 -1
  3. package/package.json +7 -2
  4. package/src/blueprint-tokens.css +204 -165
  5. package/src/index.css +31 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @osdk/react-components-styles
2
2
 
3
+ ## 0.1.0-beta.1
4
+
5
+ ### Minor Changes
6
+
7
+ - 30617fa: Support sorting and column pinning. Export BaseTable
8
+
9
+ ## 0.1.0-beta.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 476604f: Apply table styling
14
+
3
15
  ## 0.0.1
4
16
 
5
17
  ### Minor Changes
package/README.md CHANGED
@@ -45,9 +45,11 @@ Import the CSS tokens in your application's entry point:
45
45
  ## Token Levels
46
46
 
47
47
  ### Level 1: Blueprint Core Tokens
48
+
48
49
  Core design tokens from Blueprint (e.g., `--bp-palette-blue-500`, `--bp-intent-primary-rest`)
49
50
 
50
51
  ### Level 2: OSDK Component Tokens
52
+
51
53
  Component-specific tokens that reference Level 1 tokens (e.g., `--osdk-checkbox-bg`)
52
54
 
53
55
  ## API Documentation
@@ -55,6 +57,7 @@ Component-specific tokens that reference Level 1 tokens (e.g., `--osdk-checkbox-
55
57
  For a complete reference of all available CSS variables, see [CSS_VARIABLES.md](./CSS_VARIABLES.md).
56
58
 
57
59
  This document includes:
60
+
58
61
  - All Blueprint core tokens (emphasis, iconography, intents, palettes, surface, typography)
59
62
  - All OSDK component tokens
60
63
  - Complete color palette reference with OKLCH values
@@ -63,6 +66,7 @@ This document includes:
63
66
  ## Customization
64
67
 
65
68
  You can customize the appearance by:
69
+
66
70
  1. **Overriding Level 1 tokens** - Change core colors, spacing, typography
67
71
  2. **Overriding Level 2 tokens** - Change component-specific styling
68
72
  3. **Overriding tokens at component level** - Apply custom styles to specific component instances
@@ -72,11 +76,12 @@ See [CSS_VARIABLES.md](./CSS_VARIABLES.md#creating-a-complete-custom-theme) for
72
76
  ### Accessibility Note
73
77
 
74
78
  When overriding theme tokens, you are responsible for ensuring that your custom colors meet accessibility standards, including:
79
+
75
80
  - Sufficient color contrast ratios (WCAG AA: 4.5:1 for normal text, 3:1 for large text)
76
81
  - Readable text on all background colors
77
82
  - Clear visual distinction between interactive states (rest, hover, active, disabled)
78
83
 
79
- The default tokens are designed to meet WCAG AA standards. Use tools like [WebAIM's Contrast Checker](https://webaim.org/resources/contrastchecker/) to verify your custom color combinations.
84
+ The default tokens are designed to meet WCAG AA standards.
80
85
 
81
86
  ## Related Packages
82
87
 
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@osdk/react-components-styles",
3
- "version": "0.0.1",
3
+ "version": "0.1.0-beta.1",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/palantir/osdk-ts.git"
8
8
  },
9
9
  "exports": {
10
- ".": "./src/index.css"
10
+ ".": "./src/index.css",
11
+ "./styles.css": "./src/index.css"
11
12
  },
12
13
  "publishConfig": {
13
14
  "access": "public"
@@ -18,6 +19,10 @@
18
19
  "package.json",
19
20
  "README.md"
20
21
  ],
22
+ "sideEffects": [
23
+ "**/*.css"
24
+ ],
25
+ "style": "./src/index.css",
21
26
  "type": "module",
22
27
  "scripts": {
23
28
  "check-spelling": "cspell --quiet .",
package/src/blueprint-tokens.css CHANGED
@@ -2,7 +2,7 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- /* NOTE: This file should be imported from Blueprint */
5
+ /* NOTE: This file should be imported from Blueprint */
6
6
 
7
7
  :root {
8
8
  --bp-emphasis-transitionDuration: 100ms;
@@ -40,11 +40,15 @@
40
40
  --bp-intent-default-active: var(--bp-palette-gray-800);
41
41
  --bp-intent-default-disabled: var(--bp-palette-gray-400);
42
42
  --bp-intent-default-foreground: var(--bp-palette-gray-100);
43
- --bp-intent-primary-rest: var(--bp-palette-blue-500); /** Primary rest state */
43
+ --bp-intent-primary-rest: var(
44
+ --bp-palette-blue-500
45
+ ); /** Primary rest state */
44
46
  --bp-intent-primary-hover: var(--bp-palette-blue-400);
45
47
  --bp-intent-primary-active: var(--bp-palette-blue-600);
46
48
  --bp-intent-primary-disabled: var(--bp-palette-blue-300);
47
- --bp-intent-primary-foreground: var(--bp-palette-gray-100); /** Contrast-compliant color on primary background */
49
+ --bp-intent-primary-foreground: var(
50
+ --bp-palette-gray-100
51
+ ); /** Contrast-compliant color on primary background */
48
52
  --bp-intent-success-rest: var(--bp-palette-green-500);
49
53
  --bp-intent-success-hover: var(--bp-palette-green-400);
50
54
  --bp-intent-success-active: var(--bp-palette-green-600);
@@ -60,164 +64,187 @@
60
64
  --bp-intent-danger-active: var(--bp-palette-red-600);
61
65
  --bp-intent-danger-disabled: var(--bp-palette-red-300);
62
66
  --bp-intent-danger-foreground: var(--bp-palette-gray-100);
63
- --bp-palette-gray-100: oklch(1 0 256.73);
64
- --bp-palette-gray-200: oklch(0.8765 0.0034 256.73);
65
- --bp-palette-gray-300: oklch(0.7581 0.0066 256.73);
66
- --bp-palette-gray-400: oklch(0.6447 0.0096 256.73);
67
- --bp-palette-gray-500: oklch(0.5363 0.0125 256.73);
68
- --bp-palette-gray-600: oklch(0.4329 0.0153 256.73);
69
- --bp-palette-gray-700: oklch(0.3346 0.0179 256.73);
70
- --bp-palette-gray-800: oklch(0.2412 0.0203 256.73);
71
- --bp-palette-gray-900: oklch(0.1529 0.0227 256.73);
72
- --bp-palette-gray-1000: oklch(0.0697 0.0247 256.94);
73
- --bp-palette-blue-100: oklch(0.9146 0.031 257.52);
74
- --bp-palette-blue-200: oklch(0.8301 0.0806 257.52);
75
- --bp-palette-blue-300: oklch(0.7441 0.1179 257.52);
76
- --bp-palette-blue-400: oklch(0.6567 0.1428 257.52);
77
- --bp-palette-blue-500: oklch(0.5678 0.1553 257.52);
78
- --bp-palette-blue-600: oklch(0.4774 0.1555 257.52);
79
- --bp-palette-blue-700: oklch(0.3861 0.1426 257.95);
80
- --bp-palette-blue-800: oklch(0.2942 0.1167 259.47);
81
- --bp-palette-blue-900: oklch(0.199 0.0801 259.76);
82
- --bp-palette-blue-1000: oklch(0.1012 0.0323 257.52);
83
- --bp-palette-green-100: oklch(0.9225 0.0295 152.83);
84
- --bp-palette-green-200: oklch(0.8373 0.0768 152.83);
85
- --bp-palette-green-300: oklch(0.7506 0.1123 152.83);
86
- --bp-palette-green-400: oklch(0.6624 0.1361 152.83);
87
- --bp-palette-green-500: oklch(0.5727 0.1479 152.83);
88
- --bp-palette-green-600: oklch(0.4888 0.1367 149.38);
89
- --bp-palette-green-700: oklch(0.3979 0.1158 147.8);
90
- --bp-palette-green-800: oklch(0.3037 0.0914 146.52);
91
- --bp-palette-green-900: oklch(0.207 0.065 145.04);
92
- --bp-palette-green-1000: oklch(0.1034 0.0286 149.78);
93
- --bp-palette-orange-100: oklch(0.9149 0.0279 55.46);
94
- --bp-palette-orange-200: oklch(0.8303 0.0726 55.46);
95
- --bp-palette-orange-300: oklch(0.7443 0.1062 55.46);
96
- --bp-palette-orange-400: oklch(0.6569 0.1286 55.46);
97
- --bp-palette-orange-500: oklch(0.5679 0.1399 55.46);
98
- --bp-palette-orange-600: oklch(0.4793 0.1301 48.21);
99
- --bp-palette-orange-700: oklch(0.3874 0.1079 46.57);
100
- --bp-palette-orange-800: oklch(0.294 0.0853 44.16);
101
- --bp-palette-orange-900: oklch(0.1991 0.0626 39.91);
102
- --bp-palette-orange-1000: oklch(0.1015 0.0272 49.06);
103
- --bp-palette-red-100: oklch(0.9129 0.0311 23.02);
104
- --bp-palette-red-200: oklch(0.8285 0.0808 23.02);
105
- --bp-palette-red-300: oklch(0.7427 0.1182 23.02);
106
- --bp-palette-red-400: oklch(0.6554 0.1431 23.02);
107
- --bp-palette-red-500: oklch(0.5667 0.1557 23.02);
108
- --bp-palette-red-600: oklch(0.4765 0.1558 23.02);
109
- --bp-palette-red-700: oklch(0.3848 0.1436 23.02);
110
- --bp-palette-red-800: oklch(0.2924 0.1181 23.31);
111
- --bp-palette-red-900: oklch(0.1985 0.0803 23.83);
112
- --bp-palette-red-1000: oklch(0.101 0.0324 23.02);
113
- --bp-palette-vermillion-100: oklch(0.9155 0.0312 34.4);
114
- --bp-palette-vermillion-200: oklch(0.8309 0.0811 34.4);
115
- --bp-palette-vermillion-300: oklch(0.7448 0.1186 34.4);
116
- --bp-palette-vermillion-400: oklch(0.6573 0.1436 34.4);
117
- --bp-palette-vermillion-500: oklch(0.5683 0.1562 34.4);
118
- --bp-palette-vermillion-600: oklch(0.4778 0.1563 34.4);
119
- --bp-palette-vermillion-700: oklch(0.3863 0.1431 32.85);
120
- --bp-palette-vermillion-800: oklch(0.2933 0.1175 30.04);
121
- --bp-palette-vermillion-900: oklch(0.1982 0.0807 29.49);
122
- --bp-palette-vermillion-1000: oklch(0.1013 0.0325 34.4);
123
- --bp-palette-rose-100: oklch(0.9147 0.0314 3.99);
124
- --bp-palette-rose-200: oklch(0.8302 0.0816 3.99);
125
- --bp-palette-rose-300: oklch(0.7442 0.1193 3.99);
126
- --bp-palette-rose-400: oklch(0.6568 0.1445 3.99);
127
- --bp-palette-rose-500: oklch(0.5678 0.1571 3.99);
128
- --bp-palette-rose-600: oklch(0.4774 0.1573 3.99);
129
- --bp-palette-rose-700: oklch(0.3856 0.1449 3.99);
130
- --bp-palette-rose-800: oklch(0.2937 0.1181 4.4);
131
- --bp-palette-rose-900: oklch(0.1993 0.0801 4.77);
132
- --bp-palette-rose-1000: oklch(0.1012 0.0327 3.99);
133
- --bp-palette-violet-100: oklch(0.9143 0.031 327.38);
134
- --bp-palette-violet-200: oklch(0.8298 0.0807 327.38);
135
- --bp-palette-violet-300: oklch(0.7439 0.118 327.38);
136
- --bp-palette-violet-400: oklch(0.6564 0.143 327.38);
137
- --bp-palette-violet-500: oklch(0.5675 0.1555 327.38);
138
- --bp-palette-violet-600: oklch(0.4772 0.1557 327.38);
139
- --bp-palette-violet-700: oklch(0.3854 0.1434 327.38);
140
- --bp-palette-violet-800: oklch(0.2921 0.1188 327.38);
141
- --bp-palette-violet-900: oklch(0.1973 0.0818 327.38);
142
- --bp-palette-violet-1000: oklch(0.1011 0.0324 327.38);
143
- --bp-palette-indigo-100: oklch(0.9151 0.0312 288.26);
144
- --bp-palette-indigo-200: oklch(0.8305 0.0812 288.26);
145
- --bp-palette-indigo-300: oklch(0.7445 0.1188 288.26);
146
- --bp-palette-indigo-400: oklch(0.657 0.1438 288.26);
147
- --bp-palette-indigo-500: oklch(0.568 0.1565 288.26);
148
- --bp-palette-indigo-600: oklch(0.4776 0.1566 288.26);
149
- --bp-palette-indigo-700: oklch(0.3857 0.1443 288.26);
150
- --bp-palette-indigo-800: oklch(0.2923 0.1195 288.26);
151
- --bp-palette-indigo-900: oklch(0.1975 0.0823 288.26);
152
- --bp-palette-indigo-1000: oklch(0.1012 0.0326 288.26);
153
- --bp-palette-cerulean-100: oklch(0.9282 0.0278 242.96);
154
- --bp-palette-cerulean-200: oklch(0.8425 0.0723 242.96);
155
- --bp-palette-cerulean-300: oklch(0.7552 0.1057 242.96);
156
- --bp-palette-cerulean-400: oklch(0.6664 0.128 242.96);
157
- --bp-palette-cerulean-500: oklch(0.5762 0.1392 242.96);
158
- --bp-palette-cerulean-600: oklch(0.491 0.1308 247.55);
159
- --bp-palette-cerulean-700: oklch(0.3997 0.1131 249.98);
160
- --bp-palette-cerulean-800: oklch(0.3049 0.0907 251.79);
161
- --bp-palette-cerulean-900: oklch(0.2071 0.0645 253.32);
162
- --bp-palette-cerulean-1000: oklch(0.1039 0.0273 247.02);
163
- --bp-palette-turquoise-100: oklch(0.9267 0.0203 184.34);
164
- --bp-palette-turquoise-200: oklch(0.8411 0.0528 184.34);
165
- --bp-palette-turquoise-300: oklch(0.754 0.0772 184.34);
166
- --bp-palette-turquoise-400: oklch(0.6653 0.0935 184.34);
167
- --bp-palette-turquoise-500: oklch(0.5753 0.1016 184.34);
168
- --bp-palette-turquoise-600: oklch(0.491 0.0874 183.12);
169
- --bp-palette-turquoise-700: oklch(0.3996 0.0714 182.54);
170
- --bp-palette-turquoise-800: oklch(0.3049 0.0546 182.05);
171
- --bp-palette-turquoise-900: oklch(0.2079 0.0374 181.41);
172
- --bp-palette-turquoise-1000: oklch(0.1039 0.0185 183.28);
173
- --bp-palette-forest-100: oklch(0.9141 0.0313 144.05);
174
- --bp-palette-forest-200: oklch(0.8297 0.0813 144.05);
175
- --bp-palette-forest-300: oklch(0.7437 0.1189 144.05);
176
- --bp-palette-forest-400: oklch(0.6563 0.144 144.05);
177
- --bp-palette-forest-500: oklch(0.5674 0.1567 144.05);
178
- --bp-palette-forest-600: oklch(0.4777 0.1559 143.78);
179
- --bp-palette-forest-700: oklch(0.3906 0.1329 142.5);
180
- --bp-palette-forest-800: oklch(0.299 0.1018 142.5);
181
- --bp-palette-forest-900: oklch(0.2025 0.0689 142.5);
182
- --bp-palette-forest-1000: oklch(0.1011 0.0326 144.05);
183
- --bp-palette-lime-100: oklch(0.9157 0.0283 124.44);
184
- --bp-palette-lime-200: oklch(0.8311 0.0737 124.44);
185
- --bp-palette-lime-300: oklch(0.745 0.1077 124.44);
186
- --bp-palette-lime-400: oklch(0.6575 0.1304 124.44);
187
- --bp-palette-lime-500: oklch(0.5684 0.1419 124.44);
188
- --bp-palette-lime-600: oklch(0.4798 0.1224 126.19);
189
- --bp-palette-lime-700: oklch(0.3878 0.0995 126.58);
190
- --bp-palette-lime-800: oklch(0.2943 0.0761 127.19);
191
- --bp-palette-lime-900: oklch(0.1993 0.0524 128.33);
192
- --bp-palette-lime-1000: oklch(0.1016 0.0259 125.98);
193
- --bp-palette-gold-100: oklch(0.9168 0.0238 76.81);
194
- --bp-palette-gold-200: oklch(0.8321 0.0619 76.81);
195
- --bp-palette-gold-300: oklch(0.7459 0.0905 76.81);
196
- --bp-palette-gold-400: oklch(0.6583 0.1096 76.81);
197
- --bp-palette-gold-500: oklch(0.5691 0.1192 76.81);
198
- --bp-palette-gold-600: oklch(0.4803 0.1038 70.44);
199
- --bp-palette-gold-700: oklch(0.3883 0.0847 68.91);
200
- --bp-palette-gold-800: oklch(0.2947 0.0653 66.51);
201
- --bp-palette-gold-900: oklch(0.1995 0.0459 61.95);
202
- --bp-palette-gold-1000: oklch(0.1017 0.0219 71.31);
203
- --bp-palette-sepia-100: oklch(0.9184 0.0272 58.06);
204
- --bp-palette-sepia-200: oklch(0.8336 0.0708 58.06);
205
- --bp-palette-sepia-300: oklch(0.7472 0.1035 58.06);
206
- --bp-palette-sepia-400: oklch(0.6594 0.1254 58.06);
207
- --bp-palette-sepia-500: oklch(0.5701 0.1363 58.06);
208
- --bp-palette-sepia-600: oklch(0.4812 0.1258 50.76);
209
- --bp-palette-sepia-700: oklch(0.3889 0.1041 49.14);
210
- --bp-palette-sepia-800: oklch(0.2952 0.0821 46.68);
211
- --bp-palette-sepia-900: oklch(0.1999 0.0599 42.33);
212
- --bp-palette-sepia-1000: oklch(0.1019 0.0263 51.63);
213
- --bp-surface-borderColor-default: oklch(from var(--bp-intent-default-rest) l c h / 0.12);
214
- --bp-surface-borderColor-strong: oklch(from var(--bp-intent-default-rest) l c h / 0.25);
67
+
68
+ --bp-palette-gray-100: oklch(0.988 0.0014 177.21);
69
+ --bp-palette-gray-200: oklch(0.9515 0.0046 258.32);
70
+ --bp-palette-gray-300: oklch(0.9173 0.0066 250.87);
71
+ --bp-palette-gray-400: oklch(0.8801 0.0099 252.82);
72
+ --bp-palette-gray-500: oklch(0.5595 0.0304 256.12);
73
+ --bp-palette-gray-600: oklch(0.5395 0.0239 258.37);
74
+ --bp-palette-gray-700: oklch(0.6553 0.0166 257.42);
75
+ --bp-palette-gray-800: oklch(0.3235 0.0158 259.8);
76
+ --bp-palette-gray-900: oklch(0.283 0.0147 256.79);
77
+ --bp-palette-gray-1000: oklch(0.2176 0.0115 254.36);
78
+
79
+ --bp-palette-blue-100: oklch(0.8915 0.0388 257.63);
80
+ --bp-palette-blue-200: oklch(0.7839 0.1108 256.7);
81
+ --bp-palette-blue-300: oklch(0.6549 0.1595 257.4);
82
+ --bp-palette-blue-400: oklch(0.5603 0.1634 257.63);
83
+ --bp-palette-blue-500: oklch(0.5358 0.1634 257.63);
84
+ --bp-palette-blue-600: oklch(0.5113 0.1517 257.65);
85
+ --bp-palette-blue-700: oklch(0.4868 0.1459 257.66);
86
+ --bp-palette-blue-800: oklch(0.4174 0.1274 257.89);
87
+ --bp-palette-blue-900: oklch(0.3481 0.1145 258.12);
88
+ --bp-palette-blue-1000: oklch(0.2787 0.1015 257.99);
89
+
90
+ --bp-palette-green-100: oklch(0.8863 0.0384 155.19);
91
+ --bp-palette-green-200: oklch(0.7708 0.1098 159.02);
92
+ --bp-palette-green-300: oklch(0.64 0.1368 155.45);
93
+ --bp-palette-green-400: oklch(0.5479 0.1204 155.19);
94
+ --bp-palette-green-500: oklch(0.5247 0.1204 155.19);
95
+ --bp-palette-green-600: oklch(0.5015 0.1101 155.08);
96
+ --bp-palette-green-700: oklch(0.4783 0.105 155.03);
97
+ --bp-palette-green-800: oklch(0.4159 0.0899 155.47);
98
+ --bp-palette-green-900: oklch(0.3536 0.0794 155.91);
99
+ --bp-palette-green-1000: oklch(0.2912 0.0689 155.77);
100
+
101
+ --bp-palette-orange-100: oklch(0.9056 0.0455 61.84);
102
+ --bp-palette-orange-200: oklch(0.8189 0.1301 68.1);
103
+ --bp-palette-orange-300: oklch(0.753 0.1439 65.59);
104
+ --bp-palette-orange-400: oklch(0.6421 0.1403 61.84);
105
+ --bp-palette-orange-500: oklch(0.599 0.1403 61.84);
106
+ --bp-palette-orange-600: oklch(0.5558 0.1209 62.16);
107
+ --bp-palette-orange-700: oklch(0.5127 0.1112 62.32);
108
+ --bp-palette-orange-800: oklch(0.4409 0.0946 62.22);
109
+ --bp-palette-orange-900: oklch(0.3692 0.0829 62.11);
110
+ --bp-palette-orange-1000: oklch(0.2974 0.0712 61.92);
111
+
112
+ --bp-palette-red-100: oklch(0.8913 0.0408 22.94);
113
+ --bp-palette-red-200: oklch(0.7832 0.1166 18.07);
114
+ --bp-palette-red-300: oklch(0.6763 0.1555 20.22);
115
+ --bp-palette-red-400: oklch(0.5786 0.1752 22.94);
116
+ --bp-palette-red-500: oklch(0.5522 0.1752 22.94);
117
+ --bp-palette-red-600: oklch(0.5258 0.1659 23.39);
118
+ --bp-palette-red-700: oklch(0.4993 0.1613 23.61);
119
+ --bp-palette-red-800: oklch(0.4385 0.1359 23.17);
120
+ --bp-palette-red-900: oklch(0.3777 0.1181 22.73);
121
+ --bp-palette-red-1000: oklch(0.3169 0.1003 22.61);
122
+
123
+ --bp-palette-cerulean-100: oklch(0.8872 0.0375 238.05);
124
+ --bp-palette-cerulean-200: oklch(0.7729 0.107 232.47);
125
+ --bp-palette-cerulean-300: oklch(0.688 0.1205 234.59);
126
+ --bp-palette-cerulean-400: oklch(0.5637 0.1195 238.05);
127
+ --bp-palette-cerulean-500: oklch(0.5395 0.1195 238.05);
128
+ --bp-palette-cerulean-600: oklch(0.5154 0.1088 237.81);
129
+ --bp-palette-cerulean-700: oklch(0.4913 0.1034 237.68);
130
+ --bp-palette-cerulean-800: oklch(0.4133 0.0858 237.75);
131
+ --bp-palette-cerulean-900: oklch(0.3352 0.0735 237.81);
132
+ --bp-palette-cerulean-1000: oklch(0.2572 0.0613 237.97);
133
+
134
+ --bp-palette-forest-100: oklch(0.8947 0.0646 144.08);
135
+ --bp-palette-forest-200: oklch(0.7918 0.1845 144.97);
136
+ --bp-palette-forest-300: oklch(0.7115 0.1894 144.51);
137
+ --bp-palette-forest-400: oklch(0.6357 0.1866 144.08);
138
+ --bp-palette-forest-500: oklch(0.6111 0.1866 144.08);
139
+ --bp-palette-forest-600: oklch(0.5864 0.1709 144.11);
140
+ --bp-palette-forest-700: oklch(0.5617 0.163 144.12);
141
+ --bp-palette-forest-800: oklch(0.4881 0.1398 144.14);
142
+ --bp-palette-forest-900: oklch(0.4146 0.1235 144.17);
143
+ --bp-palette-forest-1000: oklch(0.341 0.1072 144.14);
144
+
145
+ --bp-palette-gold-100: oklch(0.9278 0.0468 81.27);
146
+ --bp-palette-gold-200: oklch(0.8744 0.1338 87.47);
147
+ --bp-palette-gold-300: oklch(0.8101 0.1577 84.45);
148
+ --bp-palette-gold-400: oklch(0.7157 0.1458 81.27);
149
+ --bp-palette-gold-500: oklch(0.6496 0.1458 81.27);
150
+ --bp-palette-gold-600: oklch(0.5835 0.119 81.86);
151
+ --bp-palette-gold-700: oklch(0.5173 0.1056 82.16);
152
+ --bp-palette-gold-800: oklch(0.402 0.0797 84.7);
153
+ --bp-palette-gold-900: oklch(0.2867 0.0616 87.25);
154
+ --bp-palette-gold-1000: oklch(0.1714 0.0435 85.53);
155
+
156
+ --bp-palette-indigo-100: oklch(0.8946 0.0405 288.57);
157
+ --bp-palette-indigo-200: oklch(0.7914 0.1157 292.5);
158
+ --bp-palette-indigo-300: oklch(0.6747 0.1643 290.59);
159
+ --bp-palette-indigo-400: oklch(0.578 0.179 288.57);
160
+ --bp-palette-indigo-500: oklch(0.5538 0.179 288.57);
161
+ --bp-palette-indigo-600: oklch(0.5296 0.1737 287.86);
162
+ --bp-palette-indigo-700: oklch(0.5053 0.1711 287.51);
163
+ --bp-palette-indigo-800: oklch(0.4563 0.154 287.9);
164
+ --bp-palette-indigo-900: oklch(0.4073 0.1421 288.29);
165
+ --bp-palette-indigo-1000: oklch(0.3582 0.1301 288.63);
166
+
167
+ --bp-palette-lime-100: oklch(0.93 0.0507 123.35);
168
+ --bp-palette-lime-200: oklch(0.9129 0.145 121);
169
+ --bp-palette-lime-300: oklch(0.8332 0.1694 122.11);
170
+ --bp-palette-lime-400: oklch(0.7097 0.1627 123.35);
171
+ --bp-palette-lime-500: oklch(0.6431 0.1627 123.35);
172
+ --bp-palette-lime-600: oklch(0.5766 0.1291 123.2);
173
+ --bp-palette-lime-700: oklch(0.5101 0.1123 123.13);
174
+ --bp-palette-lime-800: oklch(0.4074 0.0779 121.58);
175
+ --bp-palette-lime-900: oklch(0.3048 0.0537 120.04);
176
+ --bp-palette-lime-1000: oklch(0.2022 0.0296 120.92);
177
+
178
+ --bp-palette-rose-100: oklch(0.8654 0.0677 4.14);
179
+ --bp-palette-rose-200: oklch(0.7186 0.1934 359.18);
180
+ --bp-palette-rose-300: oklch(0.6664 0.2131 1.55);
181
+ --bp-palette-rose-400: oklch(0.5924 0.2119 4.14);
182
+ --bp-palette-rose-500: oklch(0.5756 0.2119 4.14);
183
+ --bp-palette-rose-600: oklch(0.5588 0.199 4.11);
184
+ --bp-palette-rose-700: oklch(0.5419 0.1926 4.1);
185
+ --bp-palette-rose-800: oklch(0.4885 0.1719 3.82);
186
+ --bp-palette-rose-900: oklch(0.4351 0.1574 3.55);
187
+ --bp-palette-rose-1000: oklch(0.3817 0.1429 3.7);
188
+
189
+ --bp-palette-sepia-100: oklch(0.8889 0.02 64.34);
190
+ --bp-palette-sepia-200: oklch(0.7772 0.0573 66.82);
191
+ --bp-palette-sepia-300: oklch(0.6473 0.0781 66.37);
192
+ --bp-palette-sepia-400: oklch(0.5488 0.0858 64.34);
193
+ --bp-palette-sepia-500: oklch(0.5254 0.0858 64.34);
194
+ --bp-palette-sepia-600: oklch(0.502 0.0776 64.42);
195
+ --bp-palette-sepia-700: oklch(0.4786 0.0735 64.47);
196
+ --bp-palette-sepia-800: oklch(0.4008 0.0598 65.6);
197
+ --bp-palette-sepia-900: oklch(0.323 0.0503 66.73);
198
+ --bp-palette-sepia-1000: oklch(0.2452 0.0407 66.1);
199
+
200
+ --bp-palette-turquoise-100: oklch(0.916 0.0341 184.92);
201
+ --bp-palette-turquoise-200: oklch(0.8451 0.0975 188.12);
202
+ --bp-palette-turquoise-300: oklch(0.7528 0.1303 185.29);
203
+ --bp-palette-turquoise-400: oklch(0.6433 0.1134 184.92);
204
+ --bp-palette-turquoise-500: oklch(0.5923 0.1134 184.92);
205
+ --bp-palette-turquoise-600: oklch(0.5413 0.0953 185.09);
206
+ --bp-palette-turquoise-700: oklch(0.4902 0.0863 185.18);
207
+ --bp-palette-turquoise-800: oklch(0.3777 0.0667 184.47);
208
+ --bp-palette-turquoise-900: oklch(0.2652 0.053 183.76);
209
+ --bp-palette-turquoise-1000: oklch(0.1526 0.0393 183.98);
210
+
211
+ --bp-palette-vermilion-100: oklch(0.8913 0.0449 34.41);
212
+ --bp-palette-vermilion-200: oklch(0.7832 0.1282 34.62);
213
+ --bp-palette-vermilion-300: oklch(0.6728 0.1697 35.29);
214
+ --bp-palette-vermilion-400: oklch(0.5785 0.1926 34.41);
215
+ --bp-palette-vermilion-500: oklch(0.559 0.1926 34.41);
216
+ --bp-palette-vermilion-600: oklch(0.5396 0.1813 34.2);
217
+ --bp-palette-vermilion-700: oklch(0.5202 0.1757 34.1);
218
+ --bp-palette-vermilion-800: oklch(0.4495 0.1493 34.51);
219
+ --bp-palette-vermilion-900: oklch(0.3789 0.1308 34.93);
220
+ --bp-palette-vermilion-1000: oklch(0.3083 0.1123 34.87);
221
+
222
+ --bp-palette-violet-100: oklch(0.8867 0.0342 327.64);
223
+ --bp-palette-violet-200: oklch(0.7719 0.0977 326.47);
224
+ --bp-palette-violet-300: oklch(0.6483 0.1481 327.11);
225
+ --bp-palette-violet-400: oklch(0.5304 0.17 327.64);
226
+ --bp-palette-violet-500: oklch(0.5034 0.17 327.64);
227
+ --bp-palette-violet-600: oklch(0.4763 0.1502 327.61);
228
+ --bp-palette-violet-700: oklch(0.4492 0.1403 327.6);
229
+ --bp-palette-violet-800: oklch(0.3663 0.1105 327.54);
230
+ --bp-palette-violet-900: oklch(0.2835 0.0896 327.48);
231
+ --bp-palette-violet-1000: oklch(0.2006 0.0688 327.53);
232
+
233
+ --bp-surface-borderColor-default: oklch(
234
+ from var(--bp-intent-default-rest) l c h / 0.12
235
+ );
236
+ --bp-surface-borderColor-strong: oklch(
237
+ from var(--bp-intent-default-rest) l c h / 0.25
238
+ );
215
239
  --bp-surface-borderWidth: 1px;
216
240
  --bp-surface-borderRadius: 4px;
217
241
  --bp-surface-shadow-0: 0px 0px 5px 0px oklch(0 0 0 / 0.1); /** Card elevation (100-card) */
218
- --bp-surface-shadow-1: 0px 1px 3px 0px oklch(0 0 0 / 0.2), 0px 1px 2px -1px oklch(0 0 0 / 0.2); /** Interactive elevation (200-interactive) */
219
- --bp-surface-shadow-2: 0px 4px 6px -4px oklch(0 0 0 / 0.2), 0px 10px 15px -3px oklch(0 0 0 / 0.2); /** Tooltip elevation (300-tooltip) */
220
- --bp-surface-shadow-3: 0px 20px 25px -5px oklch(0 0 0 / 0.2), 0px 10px 15px -3px oklch(0 0 0 / 0.2); /** Panel elevation (400-panel) */
242
+ --bp-surface-shadow-1:
243
+ 0px 1px 3px 0px oklch(0 0 0 / 0.2), 0px 1px 2px -1px oklch(0 0 0 / 0.2); /** Interactive elevation (200-interactive) */
244
+ --bp-surface-shadow-2:
245
+ 0px 4px 6px -4px oklch(0 0 0 / 0.2), 0px 10px 15px -3px oklch(0 0 0 / 0.2); /** Tooltip elevation (300-tooltip) */
246
+ --bp-surface-shadow-3:
247
+ 0px 20px 25px -5px oklch(0 0 0 / 0.2), 0px 10px 15px -3px oklch(0 0 0 / 0.2); /** Panel elevation (400-panel) */
221
248
  --bp-surface-shadow-4: 0px 25px 50px -12px oklch(0 0 0 / 0.4); /** Modal elevation (500-modal) */
222
249
  --bp-surface-spacing: 4px; /** Base spacing unit — components multiply this */
223
250
  --bp-surface-zIndex-0: 0;
@@ -246,12 +273,24 @@
246
273
  --bp-surface-colorDisabled-success: var(--bp-intent-success-disabled);
247
274
  --bp-surface-colorDisabled-warning: var(--bp-intent-warning-disabled);
248
275
  --bp-surface-colorDisabled-danger: var(--bp-intent-danger-disabled);
249
- --bp-surface-depthLayer-default: oklch(from var(--bp-intent-default-rest) l c h / 0.05);
250
- --bp-surface-depthLayer-primary: oklch(from var(--bp-intent-primary-rest) l c h / 0.05);
251
- --bp-surface-depthLayer-success: oklch(from var(--bp-intent-success-rest) l c h / 0.05);
252
- --bp-surface-depthLayer-warning: oklch(from var(--bp-intent-warning-rest) l c h / 0.05);
253
- --bp-surface-depthLayer-danger: oklch(from var(--bp-intent-danger-rest) l c h / 0.05);
254
- --bp-typography-family-default: Inter, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif;
276
+ --bp-surface-depthLayer-default: oklch(
277
+ from var(--bp-intent-default-rest) l c h / 0.05
278
+ );
279
+ --bp-surface-depthLayer-primary: oklch(
280
+ from var(--bp-intent-primary-rest) l c h / 0.05
281
+ );
282
+ --bp-surface-depthLayer-success: oklch(
283
+ from var(--bp-intent-success-rest) l c h / 0.05
284
+ );
285
+ --bp-surface-depthLayer-warning: oklch(
286
+ from var(--bp-intent-warning-rest) l c h / 0.05
287
+ );
288
+ --bp-surface-depthLayer-danger: oklch(
289
+ from var(--bp-intent-danger-rest) l c h / 0.05
290
+ );
291
+ --bp-typography-family-default:
292
+ Inter, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
293
+ "Open Sans", "Helvetica Neue", blueprint-icons-16, sans-serif;
255
294
  --bp-typography-family-mono: "JetBrains Mono", monospace;
256
295
  --bp-typography-size-bodyXSmall: 9px;
257
296
  --bp-typography-size-bodySmall: 11px;
@@ -290,4 +329,4 @@
290
329
  --bp-typography-colorDisabled-success: var(--bp-intent-success-disabled);
291
330
  --bp-typography-colorDisabled-warning: var(--bp-intent-warning-disabled);
292
331
  --bp-typography-colorDisabled-danger: var(--bp-intent-danger-disabled);
293
- }
332
+ }
package/src/index.css CHANGED
@@ -5,7 +5,8 @@
5
5
  /* Checkbox */
6
6
  --osdk-checkbox-icon-size: var(--bp-iconography-size-small);
7
7
  --osdk-checkbox-padding: calc(var(--bp-surface-spacing) / 2);
8
- --osdk-checkbox-border: var(--bp-surface-borderWidth) solid var(--bp-surface-borderColor-default);
8
+ --osdk-checkbox-border: var(--bp-surface-borderWidth) solid
9
+ var(--bp-surface-borderColor-default);
9
10
  --osdk-checkbox-bg: transparent;
10
11
  --osdk-checkbox-bg-hover: var(--bp-surface-colorHover-default);
11
12
  --osdk-checkbox-bg-active: var(--bp-surface-colorActive-default);
@@ -13,4 +14,33 @@
13
14
  --osdk-checkbox-bg-checked-hover: var(--bp-intent-primary-hover);
14
15
  --osdk-checkbox-bg-checked-active: var(--bp-intent-primary-active);
15
16
  --osdk-checkbox-checked-foreground: var(--bp-intent-primary-foreground);
17
+
18
+ /* Table */
19
+ --osdk-table-border-color: var(--bp-surface-borderColor-default);
20
+ --osdk-table-border-width: var(--bp-surface-borderWidth);
21
+
22
+ --osdk-table-border: var(--osdk-table-border-width) solid
23
+ var(--osdk-table-border-color);
24
+ --osdk-table-header-divider: var(--osdk-table-border);
25
+ --osdk-table-cell-divider: var(--osdk-table-border-width) solid transparent;
26
+ --osdk-table-row-divider: var(--osdk-table-border);
27
+ --osdk-table-pinned-column-border: calc(var(--osdk-table-border-width) * 2)
28
+ solid var(--osdk-table-border-color);
29
+
30
+ --osdk-table-header-bg: var(--bp-palette-gray-100);
31
+ --osdk-table-header-fontWeight: var(--bp-typography-weight-bold);
32
+ --osdk-table-header-fontSize: var(--bp-typography-size-bodyMedium);
33
+ --osdk-table-header-color: var(--bp-typography-colorMuted);
34
+
35
+ --osdk-table-row-bg-default: var(--bp-palette-gray-100);
36
+ --osdk-table-row-bg-hover: oklch(from var(--bp-palette-blue-100) l c h / 0.2);
37
+ --osdk-table-row-bg-active: var(--bp-palette-blue-100);
38
+ --osdk-table-row-border-color-hover: var(--bp-intent-primary-rest);
39
+ --osdk-table-row-border-color-active: var(--bp-intent-primary-rest);
40
+
41
+ --osdk-table-cell-padding: calc(var(--bp-surface-spacing) * 3)
42
+ calc(var(--bp-surface-spacing) * 2);
43
+ --osdk-table-cell-fontSize: var(--bp-typography-size-bodyMedium);
44
+ --osdk-table-cell-color: var(--bp-typography-colorRest-default);
16
45
  }
46
+