@orion-ds/core 1.2.3 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -6
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/theme.css +355 -57
- package/dist/tokens/brands.d.ts.map +1 -1
- package/dist/tokens/brands.js +1 -6
- package/dist/tokens/brands.js.map +1 -1
- package/dist/tokens/generated.css +57 -4
- package/dist/tokens/primitives.d.ts.map +1 -1
- package/dist/tokens/primitives.js +29 -0
- package/dist/tokens/primitives.js.map +1 -1
- package/dist/tokens/themes.d.ts.map +1 -1
- package/dist/tokens/themes.js +24 -6
- package/dist/tokens/themes.js.map +1 -1
- package/dist/tokens/types.d.ts +21 -7
- package/dist/tokens/types.d.ts.map +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,4 +1,42 @@
|
|
|
1
|
-
# @orion/core
|
|
1
|
+
# ⚠️ @orion/core (DEPRECATED)
|
|
2
|
+
|
|
3
|
+
**This package has been merged into @orion-ds/react v3.0.0 and is no longer maintained.**
|
|
4
|
+
|
|
5
|
+
## Migration Guide
|
|
6
|
+
|
|
7
|
+
If you're using `@orion-ds/core`, please migrate to `@orion-ds/react@^3.0.0`:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm uninstall @orion-ds/core
|
|
11
|
+
npm install @orion-ds/react@^3.0.0
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
### Before (v2.x)
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @orion-ds/core @orion-ds/react
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import '@orion-ds/core/theme.css';
|
|
22
|
+
import '@orion-ds/react/dist/react.css';
|
|
23
|
+
import type { Theme, Brand } from '@orion-ds/core';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### After (v3.x)
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npm install @orion-ds/react@^3.0.0
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import '@orion-ds/react/styles.css'; // Single import
|
|
34
|
+
import type { Theme, Brand } from '@orion-ds/react';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Legacy Documentation
|
|
2
40
|
|
|
3
41
|
Core design tokens and utilities for the Orion Design System.
|
|
4
42
|
|
|
@@ -76,7 +114,7 @@ If you're using the React component library, you need **BOTH** CSS files:
|
|
|
76
114
|
|
|
77
115
|
```tsx
|
|
78
116
|
// In your app entry file (e.g., main.tsx, App.tsx)
|
|
79
|
-
import '@orion-ds/core/theme.css';
|
|
117
|
+
import '@orion-ds/core/theme.css'; // Design tokens - REQUIRED
|
|
80
118
|
import '@orion-ds/react/dist/react.css'; // Component styles - REQUIRED
|
|
81
119
|
|
|
82
120
|
import { ThemeProvider, Button } from '@orion-ds/react';
|
|
@@ -88,7 +126,7 @@ import { ThemeProvider, Button } from '@orion-ds/react';
|
|
|
88
126
|
|
|
89
127
|
- **Type-Safe**: Full TypeScript support with autocomplete
|
|
90
128
|
- **Chain of Truth**: Enforced token hierarchy (Primitives → Semantics → Components)
|
|
91
|
-
- **Multi-Brand**: Support for Orion,
|
|
129
|
+
- **Multi-Brand**: Support for Orion, Red, Deepblue, Orange, and Lemon brands
|
|
92
130
|
- **Multi-Theme**: Light and dark theme support
|
|
93
131
|
- **Zero Runtime**: Types are compile-time only, no runtime overhead
|
|
94
132
|
- **Tree-Shakeable**: Import only what you need
|
|
@@ -96,15 +134,19 @@ import { ThemeProvider, Button } from '@orion-ds/react';
|
|
|
96
134
|
## Architecture
|
|
97
135
|
|
|
98
136
|
### Primitives (Layer 1)
|
|
137
|
+
|
|
99
138
|
Raw values that never change:
|
|
139
|
+
|
|
100
140
|
- Colors (brand, neutral, status)
|
|
101
141
|
- Typography (family, size, weight, line-height)
|
|
102
142
|
- Spacing (0-32 scale)
|
|
103
|
-
- Radius (sm, md, lg, xl, full)
|
|
143
|
+
- Radius (xs, sm, md, lg, lg-2, xl, 2xl, 3xl, full) + radiusScale derivation
|
|
104
144
|
- Blur (sm, md, lg, xl)
|
|
105
145
|
|
|
106
146
|
### Semantics (Layer 2)
|
|
147
|
+
|
|
107
148
|
Intent-based aliases that describe purpose:
|
|
149
|
+
|
|
108
150
|
- Surface (base, subtle, layer, glass, sunken)
|
|
109
151
|
- Text (primary, secondary, tertiary, inverse, brand)
|
|
110
152
|
- Interactive (primary, secondary, ghost)
|
|
@@ -112,7 +154,9 @@ Intent-based aliases that describe purpose:
|
|
|
112
154
|
- Status (error, success, warning, info)
|
|
113
155
|
|
|
114
156
|
### CSS Variables (Layer 3)
|
|
157
|
+
|
|
115
158
|
Browser-consumable variables:
|
|
159
|
+
|
|
116
160
|
- `--surface-base`
|
|
117
161
|
- `--text-primary`
|
|
118
162
|
- `--interactive-primary`
|
|
@@ -135,8 +179,8 @@ type ColorTokenPath =
|
|
|
135
179
|
type SemanticTokenPath =
|
|
136
180
|
| `surface.${keyof SurfaceSemantics}`
|
|
137
181
|
| `text.${keyof TextSemantics}`
|
|
138
|
-
| `interactive.primary.${keyof InteractivePrimarySemantics}
|
|
139
|
-
|
|
182
|
+
| `interactive.primary.${keyof InteractivePrimarySemantics}`;
|
|
183
|
+
// ...
|
|
140
184
|
```
|
|
141
185
|
|
|
142
186
|
## API Reference
|
|
@@ -144,21 +188,27 @@ type SemanticTokenPath =
|
|
|
144
188
|
### Functions
|
|
145
189
|
|
|
146
190
|
#### `getToken(path: TokenPath): string`
|
|
191
|
+
|
|
147
192
|
Get a primitive token value by path.
|
|
148
193
|
|
|
149
194
|
#### `getSemanticToken(theme: Theme, path: SemanticTokenPath): string`
|
|
195
|
+
|
|
150
196
|
Get a semantic token value for a specific theme.
|
|
151
197
|
|
|
152
198
|
#### `getBrand(brand: Brand): BrandConfig`
|
|
199
|
+
|
|
153
200
|
Get brand configuration.
|
|
154
201
|
|
|
155
202
|
#### `toCSSVariable(path: SemanticTokenPath): string`
|
|
203
|
+
|
|
156
204
|
Convert semantic path to CSS variable name.
|
|
157
205
|
|
|
158
206
|
#### `isValidTheme(value: string): value is Theme`
|
|
207
|
+
|
|
159
208
|
Type guard for valid theme.
|
|
160
209
|
|
|
161
210
|
#### `isValidBrand(value: string): value is Brand`
|
|
211
|
+
|
|
162
212
|
Type guard for valid brand.
|
|
163
213
|
|
|
164
214
|
## License
|
package/dist/index.d.ts
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
*/
|
|
14
14
|
export * from './tokens';
|
|
15
15
|
export type { Theme, Brand, TokenPath, SemanticTokenPath, CSSVariableName, Primitives, SemanticTokens, } from './tokens/types';
|
|
16
|
-
export { primitives, color, typography, spacing, radius, blur, icon
|
|
17
|
-
export { lightTheme, darkTheme, themes
|
|
18
|
-
export { brands, defaultBrand
|
|
16
|
+
export { primitives, color, typography, spacing, radius, blur, icon } from './tokens/primitives';
|
|
17
|
+
export { lightTheme, darkTheme, themes } from './tokens/themes';
|
|
18
|
+
export { brands, defaultBrand } from './tokens/brands';
|
|
19
19
|
export { getToken, getSemanticToken, getBrand, toCSSVariable, isValidTheme, isValidBrand, } from './tokens/utils';
|
|
20
20
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,cAAc,UAAU,CAAC;AAGzB,YAAY,EACV,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,cAAc,UAAU,CAAC;AAGzB,YAAY,EACV,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,UAAU,EACV,cAAc,GACf,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAEjG,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,gBAAgB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
*/
|
|
14
14
|
// Export all token types and values
|
|
15
15
|
export * from './tokens';
|
|
16
|
-
export { primitives, color, typography, spacing, radius, blur, icon
|
|
17
|
-
export { lightTheme, darkTheme, themes
|
|
18
|
-
export { brands, defaultBrand
|
|
16
|
+
export { primitives, color, typography, spacing, radius, blur, icon } from './tokens/primitives';
|
|
17
|
+
export { lightTheme, darkTheme, themes } from './tokens/themes';
|
|
18
|
+
export { brands, defaultBrand } from './tokens/brands';
|
|
19
19
|
export { getToken, getSemanticToken, getBrand, toCSSVariable, isValidTheme, isValidBrand, } from './tokens/utils';
|
|
20
20
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,oCAAoC;AACpC,cAAc,UAAU,CAAC;AAazB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,oCAAoC;AACpC,cAAc,UAAU,CAAC;AAazB,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAEjG,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEvD,OAAO,EACL,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,YAAY,GACb,MAAM,gBAAgB,CAAC"}
|