@osdk/react-components-styles 0.0.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.
- package/CHANGELOG.md +7 -0
- package/README.md +87 -0
- package/package.json +26 -0
- package/src/blueprint-tokens.css +293 -0
- package/src/index.css +16 -0
package/CHANGELOG.md
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @osdk/react-components-styles
|
|
2
|
+
|
|
3
|
+
Default Blueprint-based styling for `@osdk/react-components`.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
This package provides CSS tokens that define the default styling for OSDK React components. It follows Blueprint's design system tokens and adds component-specific OSDK tokens.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @osdk/react-components-styles
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
Import the CSS tokens in your application's entry point:
|
|
18
|
+
|
|
19
|
+
```css
|
|
20
|
+
/* app/index.css */
|
|
21
|
+
@layer osdk.tokens;
|
|
22
|
+
|
|
23
|
+
/* Import default OSDK tokens (includes Blueprint tokens) */
|
|
24
|
+
@import "@osdk/react-components-styles/index.css" layer(osdk.tokens);
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### With Custom Theme Overrides
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
/* app/index.css */
|
|
31
|
+
@layer osdk.tokens, user.theme;
|
|
32
|
+
|
|
33
|
+
@import "@osdk/react-components-styles/index.css" layer(osdk.tokens);
|
|
34
|
+
|
|
35
|
+
/* Override primary intent to green */
|
|
36
|
+
@layer user.theme {
|
|
37
|
+
:root {
|
|
38
|
+
--bp-intent-primary-rest: var(--bp-palette-green-500);
|
|
39
|
+
--bp-intent-primary-hover: var(--bp-palette-green-400);
|
|
40
|
+
--bp-intent-primary-active: var(--bp-palette-green-600);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Token Levels
|
|
46
|
+
|
|
47
|
+
### Level 1: Blueprint Core Tokens
|
|
48
|
+
Core design tokens from Blueprint (e.g., `--bp-palette-blue-500`, `--bp-intent-primary-rest`)
|
|
49
|
+
|
|
50
|
+
### Level 2: OSDK Component Tokens
|
|
51
|
+
Component-specific tokens that reference Level 1 tokens (e.g., `--osdk-checkbox-bg`)
|
|
52
|
+
|
|
53
|
+
## API Documentation
|
|
54
|
+
|
|
55
|
+
For a complete reference of all available CSS variables, see [CSS_VARIABLES.md](./CSS_VARIABLES.md).
|
|
56
|
+
|
|
57
|
+
This document includes:
|
|
58
|
+
- All Blueprint core tokens (emphasis, iconography, intents, palettes, surface, typography)
|
|
59
|
+
- All OSDK component tokens
|
|
60
|
+
- Complete color palette reference with OKLCH values
|
|
61
|
+
- Theme customization guide with examples
|
|
62
|
+
|
|
63
|
+
## Customization
|
|
64
|
+
|
|
65
|
+
You can customize the appearance by:
|
|
66
|
+
1. **Overriding Level 1 tokens** - Change core colors, spacing, typography
|
|
67
|
+
2. **Overriding Level 2 tokens** - Change component-specific styling
|
|
68
|
+
3. **Overriding tokens at component level** - Apply custom styles to specific component instances
|
|
69
|
+
|
|
70
|
+
See [CSS_VARIABLES.md](./CSS_VARIABLES.md#creating-a-complete-custom-theme) for detailed examples.
|
|
71
|
+
|
|
72
|
+
### Accessibility Note
|
|
73
|
+
|
|
74
|
+
When overriding theme tokens, you are responsible for ensuring that your custom colors meet accessibility standards, including:
|
|
75
|
+
- Sufficient color contrast ratios (WCAG AA: 4.5:1 for normal text, 3:1 for large text)
|
|
76
|
+
- Readable text on all background colors
|
|
77
|
+
- Clear visual distinction between interactive states (rest, hover, active, disabled)
|
|
78
|
+
|
|
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.
|
|
80
|
+
|
|
81
|
+
## Related Packages
|
|
82
|
+
|
|
83
|
+
- `@osdk/react-components` - Functional React components (unstyled by default)
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
Apache-2.0
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@osdk/react-components-styles",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"license": "Apache-2.0",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/palantir/osdk-ts.git"
|
|
8
|
+
},
|
|
9
|
+
"exports": {
|
|
10
|
+
".": "./src/index.css"
|
|
11
|
+
},
|
|
12
|
+
"publishConfig": {
|
|
13
|
+
"access": "public"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"src/*.css",
|
|
17
|
+
"CHANGELOG.md",
|
|
18
|
+
"package.json",
|
|
19
|
+
"README.md"
|
|
20
|
+
],
|
|
21
|
+
"type": "module",
|
|
22
|
+
"scripts": {
|
|
23
|
+
"check-spelling": "cspell --quiet .",
|
|
24
|
+
"lint": "echo 'No linting needed for CSS-only package'"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/* NOTE: This file should be imported from Blueprint */
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
--bp-emphasis-transitionDuration: 100ms;
|
|
9
|
+
--bp-emphasis-ease-default: cubic-bezier(0.4, 1, 0.75, 0.9);
|
|
10
|
+
--bp-emphasis-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11);
|
|
11
|
+
--bp-emphasis-focusColor: var(--bp-intent-primary-rest);
|
|
12
|
+
--bp-emphasis-focusWidth: 2px;
|
|
13
|
+
--bp-emphasis-focusOffset: 2px;
|
|
14
|
+
--bp-emphasis-motionReduced: 0; /** 0 = motion allowed, 1 = reduced motion */
|
|
15
|
+
--bp-iconography-size-small: 16px;
|
|
16
|
+
--bp-iconography-size-default: 20px;
|
|
17
|
+
--bp-iconography-colorMuted: var(--bp-intent-default-rest);
|
|
18
|
+
--bp-iconography-colorRest-default: var(--bp-palette-gray-800);
|
|
19
|
+
--bp-iconography-colorRest-primary: var(--bp-intent-primary-rest);
|
|
20
|
+
--bp-iconography-colorRest-success: var(--bp-intent-success-rest);
|
|
21
|
+
--bp-iconography-colorRest-warning: var(--bp-intent-warning-rest);
|
|
22
|
+
--bp-iconography-colorRest-danger: var(--bp-intent-danger-rest);
|
|
23
|
+
--bp-iconography-colorHover-default: var(--bp-palette-gray-900);
|
|
24
|
+
--bp-iconography-colorHover-primary: var(--bp-intent-primary-hover);
|
|
25
|
+
--bp-iconography-colorHover-success: var(--bp-intent-success-hover);
|
|
26
|
+
--bp-iconography-colorHover-warning: var(--bp-intent-warning-hover);
|
|
27
|
+
--bp-iconography-colorHover-danger: var(--bp-intent-danger-hover);
|
|
28
|
+
--bp-iconography-colorActive-default: var(--bp-palette-gray-1000);
|
|
29
|
+
--bp-iconography-colorActive-primary: var(--bp-intent-primary-active);
|
|
30
|
+
--bp-iconography-colorActive-success: var(--bp-intent-success-active);
|
|
31
|
+
--bp-iconography-colorActive-warning: var(--bp-intent-warning-active);
|
|
32
|
+
--bp-iconography-colorActive-danger: var(--bp-intent-danger-active);
|
|
33
|
+
--bp-iconography-colorDisabled-default: var(--bp-palette-gray-400);
|
|
34
|
+
--bp-iconography-colorDisabled-primary: var(--bp-intent-primary-disabled);
|
|
35
|
+
--bp-iconography-colorDisabled-success: var(--bp-intent-success-disabled);
|
|
36
|
+
--bp-iconography-colorDisabled-warning: var(--bp-intent-warning-disabled);
|
|
37
|
+
--bp-iconography-colorDisabled-danger: var(--bp-intent-danger-disabled);
|
|
38
|
+
--bp-intent-default-rest: var(--bp-palette-gray-700);
|
|
39
|
+
--bp-intent-default-hover: var(--bp-palette-gray-600);
|
|
40
|
+
--bp-intent-default-active: var(--bp-palette-gray-800);
|
|
41
|
+
--bp-intent-default-disabled: var(--bp-palette-gray-400);
|
|
42
|
+
--bp-intent-default-foreground: var(--bp-palette-gray-100);
|
|
43
|
+
--bp-intent-primary-rest: var(--bp-palette-blue-500); /** Primary rest state */
|
|
44
|
+
--bp-intent-primary-hover: var(--bp-palette-blue-400);
|
|
45
|
+
--bp-intent-primary-active: var(--bp-palette-blue-600);
|
|
46
|
+
--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 */
|
|
48
|
+
--bp-intent-success-rest: var(--bp-palette-green-500);
|
|
49
|
+
--bp-intent-success-hover: var(--bp-palette-green-400);
|
|
50
|
+
--bp-intent-success-active: var(--bp-palette-green-600);
|
|
51
|
+
--bp-intent-success-disabled: var(--bp-palette-green-300);
|
|
52
|
+
--bp-intent-success-foreground: var(--bp-palette-gray-100);
|
|
53
|
+
--bp-intent-warning-rest: var(--bp-palette-orange-500);
|
|
54
|
+
--bp-intent-warning-hover: var(--bp-palette-orange-400);
|
|
55
|
+
--bp-intent-warning-active: var(--bp-palette-orange-600);
|
|
56
|
+
--bp-intent-warning-disabled: var(--bp-palette-orange-300);
|
|
57
|
+
--bp-intent-warning-foreground: var(--bp-palette-gray-100);
|
|
58
|
+
--bp-intent-danger-rest: var(--bp-palette-red-500);
|
|
59
|
+
--bp-intent-danger-hover: var(--bp-palette-red-400);
|
|
60
|
+
--bp-intent-danger-active: var(--bp-palette-red-600);
|
|
61
|
+
--bp-intent-danger-disabled: var(--bp-palette-red-300);
|
|
62
|
+
--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);
|
|
215
|
+
--bp-surface-borderWidth: 1px;
|
|
216
|
+
--bp-surface-borderRadius: 4px;
|
|
217
|
+
--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) */
|
|
221
|
+
--bp-surface-shadow-4: 0px 25px 50px -12px oklch(0 0 0 / 0.4); /** Modal elevation (500-modal) */
|
|
222
|
+
--bp-surface-spacing: 4px; /** Base spacing unit — components multiply this */
|
|
223
|
+
--bp-surface-zIndex-0: 0;
|
|
224
|
+
--bp-surface-zIndex-1: 10;
|
|
225
|
+
--bp-surface-zIndex-2: 20;
|
|
226
|
+
--bp-surface-zIndex-3: 30;
|
|
227
|
+
--bp-surface-zIndex-4: 40;
|
|
228
|
+
--bp-surface-colorCode: oklch(0.95 0.01 264);
|
|
229
|
+
--bp-surface-colorRest-default: var(--bp-palette-gray-100);
|
|
230
|
+
--bp-surface-colorRest-primary: var(--bp-intent-primary-rest);
|
|
231
|
+
--bp-surface-colorRest-success: var(--bp-intent-success-rest);
|
|
232
|
+
--bp-surface-colorRest-warning: var(--bp-intent-warning-rest);
|
|
233
|
+
--bp-surface-colorRest-danger: var(--bp-intent-danger-rest);
|
|
234
|
+
--bp-surface-colorHover-default: var(--bp-palette-gray-200);
|
|
235
|
+
--bp-surface-colorHover-primary: var(--bp-intent-primary-hover);
|
|
236
|
+
--bp-surface-colorHover-success: var(--bp-intent-success-hover);
|
|
237
|
+
--bp-surface-colorHover-warning: var(--bp-intent-warning-hover);
|
|
238
|
+
--bp-surface-colorHover-danger: var(--bp-intent-danger-hover);
|
|
239
|
+
--bp-surface-colorActive-default: var(--bp-palette-gray-300);
|
|
240
|
+
--bp-surface-colorActive-primary: var(--bp-intent-primary-active);
|
|
241
|
+
--bp-surface-colorActive-success: var(--bp-intent-success-active);
|
|
242
|
+
--bp-surface-colorActive-warning: var(--bp-intent-warning-active);
|
|
243
|
+
--bp-surface-colorActive-danger: var(--bp-intent-danger-active);
|
|
244
|
+
--bp-surface-colorDisabled-default: var(--bp-palette-gray-100);
|
|
245
|
+
--bp-surface-colorDisabled-primary: var(--bp-intent-primary-disabled);
|
|
246
|
+
--bp-surface-colorDisabled-success: var(--bp-intent-success-disabled);
|
|
247
|
+
--bp-surface-colorDisabled-warning: var(--bp-intent-warning-disabled);
|
|
248
|
+
--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;
|
|
255
|
+
--bp-typography-family-mono: "JetBrains Mono", monospace;
|
|
256
|
+
--bp-typography-size-bodyXSmall: 9px;
|
|
257
|
+
--bp-typography-size-bodySmall: 11px;
|
|
258
|
+
--bp-typography-size-bodyMedium: 13px;
|
|
259
|
+
--bp-typography-size-bodyLarge: 14px;
|
|
260
|
+
--bp-typography-size-headingSmall: 16px;
|
|
261
|
+
--bp-typography-size-headingMedium: 20px;
|
|
262
|
+
--bp-typography-size-headingLarge: 24px;
|
|
263
|
+
--bp-typography-size-headingXLarge: 28px;
|
|
264
|
+
--bp-typography-size-headingDisplay: 46px;
|
|
265
|
+
--bp-typography-size-codeSmall: 11px;
|
|
266
|
+
--bp-typography-size-codeMedium: 12px;
|
|
267
|
+
--bp-typography-size-codeLarge: 14px;
|
|
268
|
+
--bp-typography-weight-default: 450;
|
|
269
|
+
--bp-typography-weight-bold: 550;
|
|
270
|
+
--bp-typography-lineHeight-default: 1.5;
|
|
271
|
+
--bp-typography-lineHeight-large: 1.75;
|
|
272
|
+
--bp-typography-colorMuted: var(--bp-intent-default-rest);
|
|
273
|
+
--bp-typography-colorRest-default: var(--bp-palette-gray-900);
|
|
274
|
+
--bp-typography-colorRest-primary: var(--bp-intent-primary-rest);
|
|
275
|
+
--bp-typography-colorRest-success: var(--bp-intent-success-rest);
|
|
276
|
+
--bp-typography-colorRest-warning: var(--bp-intent-warning-rest);
|
|
277
|
+
--bp-typography-colorRest-danger: var(--bp-intent-danger-rest);
|
|
278
|
+
--bp-typography-colorHover-default: var(--bp-palette-gray-1000);
|
|
279
|
+
--bp-typography-colorHover-primary: var(--bp-intent-primary-hover);
|
|
280
|
+
--bp-typography-colorHover-success: var(--bp-intent-success-hover);
|
|
281
|
+
--bp-typography-colorHover-warning: var(--bp-intent-warning-hover);
|
|
282
|
+
--bp-typography-colorHover-danger: var(--bp-intent-danger-hover);
|
|
283
|
+
--bp-typography-colorActive-default: var(--bp-palette-gray-800);
|
|
284
|
+
--bp-typography-colorActive-primary: var(--bp-intent-primary-active);
|
|
285
|
+
--bp-typography-colorActive-success: var(--bp-intent-success-active);
|
|
286
|
+
--bp-typography-colorActive-warning: var(--bp-intent-warning-active);
|
|
287
|
+
--bp-typography-colorActive-danger: var(--bp-intent-danger-active);
|
|
288
|
+
--bp-typography-colorDisabled-default: var(--bp-palette-gray-400);
|
|
289
|
+
--bp-typography-colorDisabled-primary: var(--bp-intent-primary-disabled);
|
|
290
|
+
--bp-typography-colorDisabled-success: var(--bp-intent-success-disabled);
|
|
291
|
+
--bp-typography-colorDisabled-warning: var(--bp-intent-warning-disabled);
|
|
292
|
+
--bp-typography-colorDisabled-danger: var(--bp-intent-danger-disabled);
|
|
293
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/* Import Blueprint Level 1 tokens */
|
|
2
|
+
@import "./blueprint-tokens.css";
|
|
3
|
+
|
|
4
|
+
:root {
|
|
5
|
+
/* Checkbox */
|
|
6
|
+
--osdk-checkbox-icon-size: var(--bp-iconography-size-small);
|
|
7
|
+
--osdk-checkbox-padding: calc(var(--bp-surface-spacing) / 2);
|
|
8
|
+
--osdk-checkbox-border: var(--bp-surface-borderWidth) solid var(--bp-surface-borderColor-default);
|
|
9
|
+
--osdk-checkbox-bg: transparent;
|
|
10
|
+
--osdk-checkbox-bg-hover: var(--bp-surface-colorHover-default);
|
|
11
|
+
--osdk-checkbox-bg-active: var(--bp-surface-colorActive-default);
|
|
12
|
+
--osdk-checkbox-bg-checked: var(--bp-intent-primary-rest);
|
|
13
|
+
--osdk-checkbox-bg-checked-hover: var(--bp-intent-primary-hover);
|
|
14
|
+
--osdk-checkbox-bg-checked-active: var(--bp-intent-primary-active);
|
|
15
|
+
--osdk-checkbox-checked-foreground: var(--bp-intent-primary-foreground);
|
|
16
|
+
}
|