@osdk/react-components-styles 0.1.0-beta.1 → 0.2.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.
- package/README.md +49 -20
- package/package.json +6 -5
- package/src/index.css +62 -17
- package/src/blueprint-tokens.css +0 -332
package/README.md
CHANGED
|
@@ -42,36 +42,65 @@ Import the CSS tokens in your application's entry point:
|
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
## Token
|
|
45
|
+
## Understanding Token Scopes
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
**OSDK Tokens (`--osdk-*`):**
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
- All tokens used in OSDK components are prefixed with --osdk.
|
|
50
|
+
- Any blueprint token used in OSDK components is mapped to an --osdk-* token, e.g. `--osdk-surface-spacing: var(--bp-surface-spacing);`
|
|
51
|
+
- Override these to theme **OSDK components only**
|
|
52
|
+
- Safe to customize without affecting other Blueprint components in your app
|
|
50
53
|
|
|
51
|
-
|
|
54
|
+
**Blueprint Tokens (`--bp-*`):**
|
|
52
55
|
|
|
53
|
-
|
|
56
|
+
- Core design tokens from Blueprint
|
|
57
|
+
- Override these to theme **both Blueprint and OSDK components**
|
|
58
|
+
- Use this for consistent theming across your entire application
|
|
54
59
|
|
|
55
60
|
## API Documentation
|
|
56
61
|
|
|
57
|
-
For a complete reference of all available
|
|
58
|
-
|
|
59
|
-
This document includes:
|
|
60
|
-
|
|
61
|
-
- All Blueprint core tokens (emphasis, iconography, intents, palettes, surface, typography)
|
|
62
|
-
- All OSDK component tokens
|
|
63
|
-
- Complete color palette reference with OKLCH values
|
|
64
|
-
- Theme customization guide with examples
|
|
62
|
+
For a complete reference of all available OSDK tokens, see [CSS_VARIABLES.md](./CSS_VARIABLES.md).
|
|
65
63
|
|
|
66
64
|
## Customization
|
|
67
65
|
|
|
68
|
-
You can customize the appearance by:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
66
|
+
You can customize the appearance by overriding CSS custom properties at different levels:
|
|
67
|
+
|
|
68
|
+
### Customization Strategies
|
|
69
|
+
|
|
70
|
+
1. **Override OSDK tokens** - Change OSDK component styling without affecting Blueprint components
|
|
71
|
+
```css
|
|
72
|
+
@layer user.theme {
|
|
73
|
+
:root {
|
|
74
|
+
/* Only affects OSDK table headers */
|
|
75
|
+
--osdk-table-header-bg: #f0f0f0;
|
|
76
|
+
--osdk-table-border-color: #e0e0e0;
|
|
77
|
+
|
|
78
|
+
/* Only affects OSDK components using primary intent */
|
|
79
|
+
--osdk-intent-primary-rest: #2563eb;
|
|
80
|
+
--osdk-intent-primary-hover: #1d4ed8;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
2. **Override Blueprint tokens** - Change both Blueprint and OSDK components for consistent theming
|
|
86
|
+
```css
|
|
87
|
+
@layer user.theme {
|
|
88
|
+
:root {
|
|
89
|
+
/* Affects ALL components (Blueprint + OSDK) using primary intent */
|
|
90
|
+
--bp-intent-primary-rest: #2563eb;
|
|
91
|
+
--bp-intent-primary-hover: #1d4ed8;
|
|
92
|
+
--bp-intent-primary-active: #1e40af;
|
|
93
|
+
|
|
94
|
+
/* Affects all spacing and borders across the design system */
|
|
95
|
+
--bp-surface-spacing: 8px;
|
|
96
|
+
--bp-surface-border-radius: 8px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
3. **Scoped overrides** - Apply custom styles to specific component instances using data attributes or classes
|
|
102
|
+
|
|
103
|
+
See [CSS_VARIABLES.md](./CSS_VARIABLES.md#creating-a-custom-theme) for detailed examples and complete token reference.
|
|
75
104
|
|
|
76
105
|
### Accessibility Note
|
|
77
106
|
|
package/package.json
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@osdk/react-components-styles",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.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"
|
|
11
|
-
|
|
10
|
+
".": "./src/index.css"
|
|
11
|
+
},
|
|
12
|
+
"dependencies": {
|
|
13
|
+
"@blueprintjs/core": "^6.7.0"
|
|
12
14
|
},
|
|
13
15
|
"publishConfig": {
|
|
14
16
|
"access": "public"
|
|
@@ -25,7 +27,6 @@
|
|
|
25
27
|
"style": "./src/index.css",
|
|
26
28
|
"type": "module",
|
|
27
29
|
"scripts": {
|
|
28
|
-
"check-spelling": "cspell --quiet ."
|
|
29
|
-
"lint": "echo 'No linting needed for CSS-only package'"
|
|
30
|
+
"check-spelling": "cspell --quiet ."
|
|
30
31
|
}
|
|
31
32
|
}
|
package/src/index.css
CHANGED
|
@@ -1,23 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
@import "./blueprint-tokens.css";
|
|
1
|
+
@import "@blueprintjs/core/lib/css/blueprint.css";
|
|
3
2
|
|
|
4
3
|
:root {
|
|
4
|
+
/* Level 1 - Blueprint Tokens */
|
|
5
|
+
/* Blueprint token mappings - Surface tokens */
|
|
6
|
+
--osdk-surface-z-index-1: var(--bp-surface-z-index-1);
|
|
7
|
+
--osdk-surface-z-index-2: var(--bp-surface-z-index-2);
|
|
8
|
+
--osdk-surface-border-radius: var(--bp-surface-border-radius);
|
|
9
|
+
--osdk-surface-border-width: var(--bp-surface-border-width);
|
|
10
|
+
--osdk-surface-border-color-default: var(--bp-surface-border-color-default);
|
|
11
|
+
--osdk-surface-background-color-default: var(
|
|
12
|
+
--bp-surface-background-color-default-rest
|
|
13
|
+
);
|
|
14
|
+
--osdk-surface-background-color-default-hover: var(
|
|
15
|
+
--bp-surface-background-color-default-hover
|
|
16
|
+
);
|
|
17
|
+
--osdk-surface-spacing: var(--bp-surface-spacing);
|
|
18
|
+
--osdk-surface-shadow-2: var(--bp-surface-shadow-2);
|
|
19
|
+
|
|
20
|
+
/* Blueprint token mappings - Typography tokens */
|
|
21
|
+
--osdk-typography-color-muted: var(--bp-typography-color-muted);
|
|
22
|
+
--osdk-typography-color-default-rest: var(--bp-typography-color-default-rest);
|
|
23
|
+
--osdk-typography-size-body-medium: var(--bp-typography-size-body-medium);
|
|
24
|
+
|
|
25
|
+
/* Blueprint token mappings - Intent tokens */
|
|
26
|
+
--osdk-intent-default-foreground: var(--bp-intent-default-foreground);
|
|
27
|
+
--osdk-intent-default-hover: var(--bp-intent-default-hover);
|
|
28
|
+
--osdk-intent-primary-rest: var(--bp-intent-primary-rest);
|
|
29
|
+
--osdk-intent-primary-foreground: var(--bp-intent-primary-foreground);
|
|
30
|
+
--osdk-intent-primary-hover: var(--bp-intent-primary-hover);
|
|
31
|
+
--osdk-intent-primary-active: var(--bp-intent-primary-active);
|
|
32
|
+
|
|
33
|
+
/* Blueprint token mappings - Iconography tokens */
|
|
34
|
+
--osdk-iconography-size-small: var(--bp-iconography-size-small);
|
|
35
|
+
|
|
36
|
+
/* Shared Styling */
|
|
37
|
+
--osdk-focus-visible-outline: var(--bp-emphasis-focus-width) solid
|
|
38
|
+
var(--bp-emphasis-focus-color);
|
|
39
|
+
--osdk-focus-visible-outline-offset: var(--bp-emphasis-focus-offset);
|
|
40
|
+
|
|
41
|
+
/* Level 2 - OSDK Components Tokens */
|
|
5
42
|
/* Checkbox */
|
|
6
43
|
--osdk-checkbox-icon-size: var(--bp-iconography-size-small);
|
|
7
44
|
--osdk-checkbox-padding: calc(var(--bp-surface-spacing) / 2);
|
|
8
|
-
--osdk-checkbox-border: var(--bp-surface-
|
|
9
|
-
var(--bp-surface-
|
|
45
|
+
--osdk-checkbox-border: var(--bp-surface-border-width) solid
|
|
46
|
+
var(--bp-surface-border-color-default);
|
|
10
47
|
--osdk-checkbox-bg: transparent;
|
|
11
|
-
--osdk-checkbox-bg-hover: var(--bp-surface-
|
|
12
|
-
--osdk-checkbox-bg-active: var(--bp-surface-
|
|
48
|
+
--osdk-checkbox-bg-hover: var(--bp-surface-background-color-default-hover);
|
|
49
|
+
--osdk-checkbox-bg-active: var(--bp-surface-background-color-default-active);
|
|
13
50
|
--osdk-checkbox-bg-checked: var(--bp-intent-primary-rest);
|
|
14
51
|
--osdk-checkbox-bg-checked-hover: var(--bp-intent-primary-hover);
|
|
15
52
|
--osdk-checkbox-bg-checked-active: var(--bp-intent-primary-active);
|
|
16
53
|
--osdk-checkbox-checked-foreground: var(--bp-intent-primary-foreground);
|
|
17
54
|
|
|
18
55
|
/* Table */
|
|
19
|
-
--osdk-table-border-color: var(--bp-surface-
|
|
20
|
-
--osdk-table-border-width: var(--bp-surface-
|
|
56
|
+
--osdk-table-border-color: var(--bp-surface-border-color-default);
|
|
57
|
+
--osdk-table-border-width: var(--bp-surface-border-width);
|
|
21
58
|
|
|
22
59
|
--osdk-table-border: var(--osdk-table-border-width) solid
|
|
23
60
|
var(--osdk-table-border-color);
|
|
@@ -27,20 +64,28 @@
|
|
|
27
64
|
--osdk-table-pinned-column-border: calc(var(--osdk-table-border-width) * 2)
|
|
28
65
|
solid var(--osdk-table-border-color);
|
|
29
66
|
|
|
30
|
-
--osdk-table-header-bg: var(--bp-palette-gray-
|
|
67
|
+
--osdk-table-header-bg: var(--bp-palette-light-gray-5);
|
|
31
68
|
--osdk-table-header-fontWeight: var(--bp-typography-weight-bold);
|
|
32
|
-
--osdk-table-header-fontSize: var(--bp-typography-size-
|
|
33
|
-
--osdk-table-header-color: var(--bp-typography-
|
|
69
|
+
--osdk-table-header-fontSize: var(--bp-typography-size-body-small);
|
|
70
|
+
--osdk-table-header-color: var(--bp-typography-color-muted);
|
|
34
71
|
|
|
35
|
-
--osdk-table-row-bg-default: var(--bp-palette-gray-
|
|
36
|
-
--osdk-table-row-bg-hover: oklch(from var(--bp-palette-blue-
|
|
37
|
-
--osdk-table-row-bg-active: var(--bp-palette-blue-
|
|
72
|
+
--osdk-table-row-bg-default: var(--bp-palette-light-gray-5);
|
|
73
|
+
--osdk-table-row-bg-hover: oklch(from var(--bp-palette-blue-5) l c h / 0.2);
|
|
74
|
+
--osdk-table-row-bg-active: var(--bp-palette-blue-5);
|
|
38
75
|
--osdk-table-row-border-color-hover: var(--bp-intent-primary-rest);
|
|
39
76
|
--osdk-table-row-border-color-active: var(--bp-intent-primary-rest);
|
|
40
77
|
|
|
41
78
|
--osdk-table-cell-padding: calc(var(--bp-surface-spacing) * 3)
|
|
42
79
|
calc(var(--bp-surface-spacing) * 2);
|
|
43
|
-
--osdk-table-cell-fontSize: var(--bp-typography-size-
|
|
44
|
-
--osdk-table-cell-color: var(--bp-typography-
|
|
45
|
-
}
|
|
80
|
+
--osdk-table-cell-fontSize: var(--bp-typography-size-body-medium);
|
|
81
|
+
--osdk-table-cell-color: var(--bp-typography-color-default-rest);
|
|
46
82
|
|
|
83
|
+
/* Skeleton loading */
|
|
84
|
+
--osdk-table-skeleton-color-from: oklch(
|
|
85
|
+
from var(--bp-palette-light-gray-1) l c h / 0.4
|
|
86
|
+
);
|
|
87
|
+
--osdk-table-skeleton-color-to: oklch(from var(--bp-palette-gray-1) l c h / 0.4);
|
|
88
|
+
--osdk-table-skeleton-border-color: oklch(
|
|
89
|
+
from var(--bp-palette-light-gray-1) l c h / 0.6
|
|
90
|
+
);
|
|
91
|
+
}
|
package/src/blueprint-tokens.css
DELETED
|
@@ -1,332 +0,0 @@
|
|
|
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(
|
|
44
|
-
--bp-palette-blue-500
|
|
45
|
-
); /** Primary rest state */
|
|
46
|
-
--bp-intent-primary-hover: var(--bp-palette-blue-400);
|
|
47
|
-
--bp-intent-primary-active: var(--bp-palette-blue-600);
|
|
48
|
-
--bp-intent-primary-disabled: var(--bp-palette-blue-300);
|
|
49
|
-
--bp-intent-primary-foreground: var(
|
|
50
|
-
--bp-palette-gray-100
|
|
51
|
-
); /** Contrast-compliant color on primary background */
|
|
52
|
-
--bp-intent-success-rest: var(--bp-palette-green-500);
|
|
53
|
-
--bp-intent-success-hover: var(--bp-palette-green-400);
|
|
54
|
-
--bp-intent-success-active: var(--bp-palette-green-600);
|
|
55
|
-
--bp-intent-success-disabled: var(--bp-palette-green-300);
|
|
56
|
-
--bp-intent-success-foreground: var(--bp-palette-gray-100);
|
|
57
|
-
--bp-intent-warning-rest: var(--bp-palette-orange-500);
|
|
58
|
-
--bp-intent-warning-hover: var(--bp-palette-orange-400);
|
|
59
|
-
--bp-intent-warning-active: var(--bp-palette-orange-600);
|
|
60
|
-
--bp-intent-warning-disabled: var(--bp-palette-orange-300);
|
|
61
|
-
--bp-intent-warning-foreground: var(--bp-palette-gray-100);
|
|
62
|
-
--bp-intent-danger-rest: var(--bp-palette-red-500);
|
|
63
|
-
--bp-intent-danger-hover: var(--bp-palette-red-400);
|
|
64
|
-
--bp-intent-danger-active: var(--bp-palette-red-600);
|
|
65
|
-
--bp-intent-danger-disabled: var(--bp-palette-red-300);
|
|
66
|
-
--bp-intent-danger-foreground: var(--bp-palette-gray-100);
|
|
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
|
-
);
|
|
239
|
-
--bp-surface-borderWidth: 1px;
|
|
240
|
-
--bp-surface-borderRadius: 4px;
|
|
241
|
-
--bp-surface-shadow-0: 0px 0px 5px 0px oklch(0 0 0 / 0.1); /** Card elevation (100-card) */
|
|
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) */
|
|
248
|
-
--bp-surface-shadow-4: 0px 25px 50px -12px oklch(0 0 0 / 0.4); /** Modal elevation (500-modal) */
|
|
249
|
-
--bp-surface-spacing: 4px; /** Base spacing unit — components multiply this */
|
|
250
|
-
--bp-surface-zIndex-0: 0;
|
|
251
|
-
--bp-surface-zIndex-1: 10;
|
|
252
|
-
--bp-surface-zIndex-2: 20;
|
|
253
|
-
--bp-surface-zIndex-3: 30;
|
|
254
|
-
--bp-surface-zIndex-4: 40;
|
|
255
|
-
--bp-surface-colorCode: oklch(0.95 0.01 264);
|
|
256
|
-
--bp-surface-colorRest-default: var(--bp-palette-gray-100);
|
|
257
|
-
--bp-surface-colorRest-primary: var(--bp-intent-primary-rest);
|
|
258
|
-
--bp-surface-colorRest-success: var(--bp-intent-success-rest);
|
|
259
|
-
--bp-surface-colorRest-warning: var(--bp-intent-warning-rest);
|
|
260
|
-
--bp-surface-colorRest-danger: var(--bp-intent-danger-rest);
|
|
261
|
-
--bp-surface-colorHover-default: var(--bp-palette-gray-200);
|
|
262
|
-
--bp-surface-colorHover-primary: var(--bp-intent-primary-hover);
|
|
263
|
-
--bp-surface-colorHover-success: var(--bp-intent-success-hover);
|
|
264
|
-
--bp-surface-colorHover-warning: var(--bp-intent-warning-hover);
|
|
265
|
-
--bp-surface-colorHover-danger: var(--bp-intent-danger-hover);
|
|
266
|
-
--bp-surface-colorActive-default: var(--bp-palette-gray-300);
|
|
267
|
-
--bp-surface-colorActive-primary: var(--bp-intent-primary-active);
|
|
268
|
-
--bp-surface-colorActive-success: var(--bp-intent-success-active);
|
|
269
|
-
--bp-surface-colorActive-warning: var(--bp-intent-warning-active);
|
|
270
|
-
--bp-surface-colorActive-danger: var(--bp-intent-danger-active);
|
|
271
|
-
--bp-surface-colorDisabled-default: var(--bp-palette-gray-100);
|
|
272
|
-
--bp-surface-colorDisabled-primary: var(--bp-intent-primary-disabled);
|
|
273
|
-
--bp-surface-colorDisabled-success: var(--bp-intent-success-disabled);
|
|
274
|
-
--bp-surface-colorDisabled-warning: var(--bp-intent-warning-disabled);
|
|
275
|
-
--bp-surface-colorDisabled-danger: var(--bp-intent-danger-disabled);
|
|
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;
|
|
294
|
-
--bp-typography-family-mono: "JetBrains Mono", monospace;
|
|
295
|
-
--bp-typography-size-bodyXSmall: 9px;
|
|
296
|
-
--bp-typography-size-bodySmall: 11px;
|
|
297
|
-
--bp-typography-size-bodyMedium: 13px;
|
|
298
|
-
--bp-typography-size-bodyLarge: 14px;
|
|
299
|
-
--bp-typography-size-headingSmall: 16px;
|
|
300
|
-
--bp-typography-size-headingMedium: 20px;
|
|
301
|
-
--bp-typography-size-headingLarge: 24px;
|
|
302
|
-
--bp-typography-size-headingXLarge: 28px;
|
|
303
|
-
--bp-typography-size-headingDisplay: 46px;
|
|
304
|
-
--bp-typography-size-codeSmall: 11px;
|
|
305
|
-
--bp-typography-size-codeMedium: 12px;
|
|
306
|
-
--bp-typography-size-codeLarge: 14px;
|
|
307
|
-
--bp-typography-weight-default: 450;
|
|
308
|
-
--bp-typography-weight-bold: 550;
|
|
309
|
-
--bp-typography-lineHeight-default: 1.5;
|
|
310
|
-
--bp-typography-lineHeight-large: 1.75;
|
|
311
|
-
--bp-typography-colorMuted: var(--bp-intent-default-rest);
|
|
312
|
-
--bp-typography-colorRest-default: var(--bp-palette-gray-900);
|
|
313
|
-
--bp-typography-colorRest-primary: var(--bp-intent-primary-rest);
|
|
314
|
-
--bp-typography-colorRest-success: var(--bp-intent-success-rest);
|
|
315
|
-
--bp-typography-colorRest-warning: var(--bp-intent-warning-rest);
|
|
316
|
-
--bp-typography-colorRest-danger: var(--bp-intent-danger-rest);
|
|
317
|
-
--bp-typography-colorHover-default: var(--bp-palette-gray-1000);
|
|
318
|
-
--bp-typography-colorHover-primary: var(--bp-intent-primary-hover);
|
|
319
|
-
--bp-typography-colorHover-success: var(--bp-intent-success-hover);
|
|
320
|
-
--bp-typography-colorHover-warning: var(--bp-intent-warning-hover);
|
|
321
|
-
--bp-typography-colorHover-danger: var(--bp-intent-danger-hover);
|
|
322
|
-
--bp-typography-colorActive-default: var(--bp-palette-gray-800);
|
|
323
|
-
--bp-typography-colorActive-primary: var(--bp-intent-primary-active);
|
|
324
|
-
--bp-typography-colorActive-success: var(--bp-intent-success-active);
|
|
325
|
-
--bp-typography-colorActive-warning: var(--bp-intent-warning-active);
|
|
326
|
-
--bp-typography-colorActive-danger: var(--bp-intent-danger-active);
|
|
327
|
-
--bp-typography-colorDisabled-default: var(--bp-palette-gray-400);
|
|
328
|
-
--bp-typography-colorDisabled-primary: var(--bp-intent-primary-disabled);
|
|
329
|
-
--bp-typography-colorDisabled-success: var(--bp-intent-success-disabled);
|
|
330
|
-
--bp-typography-colorDisabled-warning: var(--bp-intent-warning-disabled);
|
|
331
|
-
--bp-typography-colorDisabled-danger: var(--bp-intent-danger-disabled);
|
|
332
|
-
}
|