@orion-ds/core 1.0.8 → 1.0.10
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/dist/theme.css +13 -37
- package/dist/tokens/generated.css +239 -0
- package/dist/tokens/primitives.js +11 -11
- package/package.json +2 -2
package/dist/theme.css
CHANGED
|
@@ -2,11 +2,17 @@
|
|
|
2
2
|
* ═══════════════════════════════════════════════════════════════════════════
|
|
3
3
|
* ORION DESIGN SYSTEM — Theme Engine v1.0
|
|
4
4
|
* The CSS Variable layer that translates JSON tokens to consumable properties.
|
|
5
|
-
*
|
|
5
|
+
*
|
|
6
6
|
* CHAIN OF TRUTH: primary.json → light/dark.json → theme.css → Components
|
|
7
7
|
* ═══════════════════════════════════════════════════════════════════════════
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
11
|
+
GENERATED TOKENS — Auto-generated from JSON
|
|
12
|
+
Includes: primitives, semantics, brand overrides
|
|
13
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
14
|
+
@import url('tokens/generated.css');
|
|
15
|
+
|
|
10
16
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
11
17
|
PRIMITIVES — Raw values from primary.json
|
|
12
18
|
These are NEVER used directly in components. Semantics reference them.
|
|
@@ -447,18 +453,8 @@
|
|
|
447
453
|
--font-primary: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
448
454
|
--font-secondary: 'inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
449
455
|
|
|
450
|
-
/* Brand Colors:
|
|
451
|
-
--color-brand
|
|
452
|
-
--color-brand-100: #fde8e8;
|
|
453
|
-
--color-brand-200: #fbd5d5;
|
|
454
|
-
--color-brand-300: #f8b4b4;
|
|
455
|
-
--color-brand-400: #f08282;
|
|
456
|
-
--color-brand-500: #D7282F;
|
|
457
|
-
--color-brand-600: #b91c22;
|
|
458
|
-
--color-brand-700: #93151b;
|
|
459
|
-
--color-brand-800: #7a151b;
|
|
460
|
-
--color-brand-900: #661619;
|
|
461
|
-
--color-brand-950: #3b090b;
|
|
456
|
+
/* Brand Colors: Generated from primary.json via build-tokens.js */
|
|
457
|
+
/* See tokens/generated.css for --color-brand-* overrides */
|
|
462
458
|
|
|
463
459
|
/* Geometry: Pill Buttons (Full Radius) */
|
|
464
460
|
--radius-control: var(--radius-lg);
|
|
@@ -566,18 +562,8 @@
|
|
|
566
562
|
--font-primary: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
567
563
|
--font-secondary: 'Work Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
568
564
|
|
|
569
|
-
/* Brand Colors:
|
|
570
|
-
--color-brand
|
|
571
|
-
--color-brand-100: #fcdcbb;
|
|
572
|
-
--color-brand-200: #fac58f;
|
|
573
|
-
--color-brand-300: #f8ad62;
|
|
574
|
-
--color-brand-400: #f79c40;
|
|
575
|
-
--color-brand-500: #f68b1f;
|
|
576
|
-
--color-brand-600: #dd7d1b;
|
|
577
|
-
--color-brand-700: #c46f18;
|
|
578
|
-
--color-brand-800: #9f5a14;
|
|
579
|
-
--color-brand-900: #7b450f;
|
|
580
|
-
--color-brand-950: #492909;
|
|
565
|
+
/* Brand Colors: Generated from primary.json via build-tokens.js */
|
|
566
|
+
/* See tokens/generated.css for --color-brand-* overrides */
|
|
581
567
|
|
|
582
568
|
/* Override button radius to match control radius (rounded 12px) */
|
|
583
569
|
--radius-button: 12px;
|
|
@@ -617,18 +603,8 @@
|
|
|
617
603
|
--font-primary: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
618
604
|
--font-secondary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
619
605
|
|
|
620
|
-
/* Brand Colors:
|
|
621
|
-
--color-brand
|
|
622
|
-
--color-brand-100: #fdd5c9;
|
|
623
|
-
--color-brand-200: #fcb9a5;
|
|
624
|
-
--color-brand-300: #fa9d80;
|
|
625
|
-
--color-brand-400: #f87d52;
|
|
626
|
-
--color-brand-500: #F15D22;
|
|
627
|
-
--color-brand-600: #d9531f;
|
|
628
|
-
--color-brand-700: #c0491b;
|
|
629
|
-
--color-brand-800: #a63f17;
|
|
630
|
-
--color-brand-900: #8c3513;
|
|
631
|
-
--color-brand-950: #59220c;
|
|
606
|
+
/* Brand Colors: Generated from primary.json via build-tokens.js */
|
|
607
|
+
/* See tokens/generated.css for --color-brand-* overrides */
|
|
632
608
|
|
|
633
609
|
/* Geometry: Pill Buttons (100% Rounded) */
|
|
634
610
|
--radius-control: var(--radius-md);
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ═══════════════════════════════════════════════════════════════════════════
|
|
3
|
+
* ORION DESIGN SYSTEM — Generated Tokens
|
|
4
|
+
* DO NOT EDIT MANUALLY - Generated from tokens/*.json
|
|
5
|
+
* Run: node scripts/build-tokens.js
|
|
6
|
+
* ═══════════════════════════════════════════════════════════════════════════
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/* ─── Primitives (from primary.json) ─── */
|
|
10
|
+
:root {
|
|
11
|
+
/* Colors */
|
|
12
|
+
/* Brand: Orion (default) */
|
|
13
|
+
--color-brand-50: #e8f0ff;
|
|
14
|
+
--color-brand-100: #c7daff;
|
|
15
|
+
--color-brand-200: #a3c2ff;
|
|
16
|
+
--color-brand-300: #7ea9ff;
|
|
17
|
+
--color-brand-400: #5990ff;
|
|
18
|
+
--color-brand-500: #1B5BFF;
|
|
19
|
+
--color-brand-600: #1850e6;
|
|
20
|
+
--color-brand-700: #1544cc;
|
|
21
|
+
--color-brand-800: #1139b3;
|
|
22
|
+
--color-brand-900: #0d2d99;
|
|
23
|
+
--color-brand-950: #071a5c;
|
|
24
|
+
|
|
25
|
+
/* Neutral */
|
|
26
|
+
--color-neutral-0: #ffffff;
|
|
27
|
+
--color-neutral-50: #f8fafc;
|
|
28
|
+
--color-neutral-100: #f1f5f9;
|
|
29
|
+
--color-neutral-200: #e2e8f0;
|
|
30
|
+
--color-neutral-300: #cbd5e1;
|
|
31
|
+
--color-neutral-400: #94a3b8;
|
|
32
|
+
--color-neutral-500: #64748b;
|
|
33
|
+
--color-neutral-600: #475569;
|
|
34
|
+
--color-neutral-700: #334155;
|
|
35
|
+
--color-neutral-800: #1e293b;
|
|
36
|
+
--color-neutral-900: #0f172a;
|
|
37
|
+
--color-neutral-950: #020617;
|
|
38
|
+
--color-neutral-1000: #000000;
|
|
39
|
+
|
|
40
|
+
/* Status */
|
|
41
|
+
--color-error-500: #ef4444;
|
|
42
|
+
--color-success-500: #22c55e;
|
|
43
|
+
--color-warning-500: #eab308;
|
|
44
|
+
|
|
45
|
+
/* Typography */
|
|
46
|
+
--font-primary: Libre Baskerville, system-ui, sans-serif;
|
|
47
|
+
--font-secondary: Inter, system-ui, sans-serif;
|
|
48
|
+
--font-mono: JetBrains Mono, monospace;
|
|
49
|
+
|
|
50
|
+
/* Font Sizes */
|
|
51
|
+
--font-size-10: 10px;
|
|
52
|
+
--font-size-12: 12px;
|
|
53
|
+
--font-size-13: 13px;
|
|
54
|
+
--font-size-14: 14px;
|
|
55
|
+
--font-size-16: 16px;
|
|
56
|
+
--font-size-18: 18px;
|
|
57
|
+
--font-size-20: 20px;
|
|
58
|
+
--font-size-24: 24px;
|
|
59
|
+
--font-size-32: 32px;
|
|
60
|
+
--font-size-48: 48px;
|
|
61
|
+
--font-size-64: 64px;
|
|
62
|
+
--font-size-80: 80px;
|
|
63
|
+
--font-size-96: 96px;
|
|
64
|
+
|
|
65
|
+
/* Font Weights */
|
|
66
|
+
--font-weight-regular: 400;
|
|
67
|
+
--font-weight-medium: 500;
|
|
68
|
+
--font-weight-bold: 700;
|
|
69
|
+
|
|
70
|
+
/* Spacing (base: 4px) */
|
|
71
|
+
--spacing-0: 0px;
|
|
72
|
+
--spacing-1: 4px;
|
|
73
|
+
--spacing-2: 8px;
|
|
74
|
+
--spacing-3: 12px;
|
|
75
|
+
--spacing-4: 16px;
|
|
76
|
+
--spacing-5: 20px;
|
|
77
|
+
--spacing-6: 24px;
|
|
78
|
+
--spacing-7: 28px;
|
|
79
|
+
--spacing-8: 32px;
|
|
80
|
+
--spacing-9: 36px;
|
|
81
|
+
--spacing-10: 40px;
|
|
82
|
+
--spacing-11: 44px;
|
|
83
|
+
--spacing-12: 48px;
|
|
84
|
+
--spacing-16: 64px;
|
|
85
|
+
--spacing-20: 80px;
|
|
86
|
+
--spacing-24: 96px;
|
|
87
|
+
--spacing-32: 128px;
|
|
88
|
+
--spacing-px: 1px;
|
|
89
|
+
--spacing-05: 2px;
|
|
90
|
+
|
|
91
|
+
/* Border Radius */
|
|
92
|
+
--radius-0: 0px;
|
|
93
|
+
--radius-sm: 8px;
|
|
94
|
+
--radius-md: 12px;
|
|
95
|
+
--radius-lg: 16px;
|
|
96
|
+
--radius-xl: 24px;
|
|
97
|
+
--radius-2xl: 32px;
|
|
98
|
+
--radius-full: 9999px;
|
|
99
|
+
|
|
100
|
+
/* Blur */
|
|
101
|
+
--blur-sm: 4px;
|
|
102
|
+
--blur-md: 8px;
|
|
103
|
+
--blur-lg: 12px;
|
|
104
|
+
--blur-xl: 24px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* ─── UVM Brand Override ─── */
|
|
108
|
+
[data-brand="uvm"] {
|
|
109
|
+
--color-brand-50: #fdf2f2;
|
|
110
|
+
--color-brand-100: #fde8e8;
|
|
111
|
+
--color-brand-200: #fbd5d5;
|
|
112
|
+
--color-brand-300: #f8b4b4;
|
|
113
|
+
--color-brand-400: #f08282;
|
|
114
|
+
--color-brand-500: #D7282F;
|
|
115
|
+
--color-brand-600: #b91c22;
|
|
116
|
+
--color-brand-700: #93151b;
|
|
117
|
+
--color-brand-800: #7a151b;
|
|
118
|
+
--color-brand-900: #661619;
|
|
119
|
+
--color-brand-950: #3b090b;
|
|
120
|
+
--radius-control: 9999px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* ─── UNITEC Brand Override ─── */
|
|
124
|
+
[data-brand="unitec"] {
|
|
125
|
+
--color-brand-50: #fef3e8;
|
|
126
|
+
--color-brand-100: #fcdcbb;
|
|
127
|
+
--color-brand-200: #fac58f;
|
|
128
|
+
--color-brand-300: #f8ad62;
|
|
129
|
+
--color-brand-400: #f79c40;
|
|
130
|
+
--color-brand-500: #f68b1f;
|
|
131
|
+
--color-brand-600: #dd7d1b;
|
|
132
|
+
--color-brand-700: #c46f18;
|
|
133
|
+
--color-brand-800: #9f5a14;
|
|
134
|
+
--color-brand-900: #7b450f;
|
|
135
|
+
--color-brand-950: #492909;
|
|
136
|
+
--radius-control: 12px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ─── LAUREATE Brand Override ─── */
|
|
140
|
+
[data-brand="laureate"] {
|
|
141
|
+
--color-brand-50: #fef0eb;
|
|
142
|
+
--color-brand-100: #fdd5c9;
|
|
143
|
+
--color-brand-200: #fcb9a5;
|
|
144
|
+
--color-brand-300: #fa9d80;
|
|
145
|
+
--color-brand-400: #f87d52;
|
|
146
|
+
--color-brand-500: #F15D22;
|
|
147
|
+
--color-brand-600: #d9531f;
|
|
148
|
+
--color-brand-700: #c0491b;
|
|
149
|
+
--color-brand-800: #a63f17;
|
|
150
|
+
--color-brand-900: #8c3513;
|
|
151
|
+
--color-brand-950: #59220c;
|
|
152
|
+
--radius-control: 9999px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* ─── Light Theme Semantics ─── */
|
|
156
|
+
[data-theme="light"] {
|
|
157
|
+
/* Surfaces */
|
|
158
|
+
--surface-base: var(--color-neutral-0);
|
|
159
|
+
--surface-subtle: var(--color-neutral-50);
|
|
160
|
+
--surface-layer: var(--color-neutral-100);
|
|
161
|
+
--surface-primary: var(--color-neutral-100);
|
|
162
|
+
--surface-secondary: var(--color-neutral-50);
|
|
163
|
+
--surface-glass: rgba(255, 255, 255, 0.7);
|
|
164
|
+
--surface-sunken: rgba(255, 255, 255, 0.4);
|
|
165
|
+
--surface-overlay: rgba(0, 0, 0, 0.5);
|
|
166
|
+
|
|
167
|
+
/* Text */
|
|
168
|
+
--text-primary: var(--color-neutral-900);
|
|
169
|
+
--text-secondary: var(--color-neutral-500);
|
|
170
|
+
--text-tertiary: var(--color-neutral-400);
|
|
171
|
+
--text-inverse: var(--color-neutral-0);
|
|
172
|
+
--text-brand: var(--color-brand-500);
|
|
173
|
+
|
|
174
|
+
/* Borders */
|
|
175
|
+
--border-subtle: var(--color-neutral-200);
|
|
176
|
+
--border-strong: var(--color-neutral-300);
|
|
177
|
+
--border-interactive: var(--color-brand-500);
|
|
178
|
+
|
|
179
|
+
/* Interactive */
|
|
180
|
+
--interactive-primary: var(--color-brand-500);
|
|
181
|
+
--interactive-primary-hover: var(--color-brand-700);
|
|
182
|
+
--interactive-primary-text: var(--color-neutral-0);
|
|
183
|
+
--interactive-secondary: var(--color-neutral-100);
|
|
184
|
+
--interactive-secondary-hover: var(--color-neutral-200);
|
|
185
|
+
--interactive-secondary-text: var(--color-neutral-900);
|
|
186
|
+
|
|
187
|
+
/* Status */
|
|
188
|
+
--status-error: var(--color-error-500);
|
|
189
|
+
--status-success: var(--color-success-500);
|
|
190
|
+
--status-warning: var(--color-warning-500);
|
|
191
|
+
--status-info: var(--color-info-500);
|
|
192
|
+
|
|
193
|
+
/* Gradient */
|
|
194
|
+
--gradient-start: var(--color-brand-400);
|
|
195
|
+
--gradient-end: var(--color-brand-600);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* ─── Dark Theme Semantics ─── */
|
|
199
|
+
[data-theme="dark"] {
|
|
200
|
+
/* Surfaces */
|
|
201
|
+
--surface-base: var(--color-neutral-950);
|
|
202
|
+
--surface-subtle: var(--color-neutral-900);
|
|
203
|
+
--surface-layer: var(--color-neutral-800);
|
|
204
|
+
--surface-primary: var(--color-neutral-800);
|
|
205
|
+
--surface-secondary: var(--color-neutral-900);
|
|
206
|
+
--surface-glass: rgba(15, 23, 42, 0.6);
|
|
207
|
+
--surface-sunken: rgba(15, 23, 42, 0.4);
|
|
208
|
+
--surface-overlay: rgba(0, 0, 0, 0.7);
|
|
209
|
+
|
|
210
|
+
/* Text */
|
|
211
|
+
--text-primary: var(--color-neutral-50);
|
|
212
|
+
--text-secondary: var(--color-neutral-400);
|
|
213
|
+
--text-tertiary: var(--color-neutral-600);
|
|
214
|
+
--text-inverse: var(--color-neutral-950);
|
|
215
|
+
--text-brand: var(--color-brand-400);
|
|
216
|
+
|
|
217
|
+
/* Borders */
|
|
218
|
+
--border-subtle: var(--color-neutral-800);
|
|
219
|
+
--border-strong: var(--color-neutral-700);
|
|
220
|
+
--border-interactive: var(--color-brand-500);
|
|
221
|
+
|
|
222
|
+
/* Interactive */
|
|
223
|
+
--interactive-primary: var(--color-brand-500);
|
|
224
|
+
--interactive-primary-hover: var(--color-brand-400);
|
|
225
|
+
--interactive-primary-text: var(--color-neutral-900);
|
|
226
|
+
--interactive-secondary: var(--color-neutral-800);
|
|
227
|
+
--interactive-secondary-hover: var(--color-neutral-700);
|
|
228
|
+
--interactive-secondary-text: var(--color-neutral-50);
|
|
229
|
+
|
|
230
|
+
/* Status */
|
|
231
|
+
--status-error: var(--color-error-500);
|
|
232
|
+
--status-success: var(--color-success-500);
|
|
233
|
+
--status-warning: var(--color-warning-500);
|
|
234
|
+
--status-info: var(--color-info-500);
|
|
235
|
+
|
|
236
|
+
/* Gradient */
|
|
237
|
+
--gradient-start: var(--color-brand-400);
|
|
238
|
+
--gradient-end: var(--color-brand-600);
|
|
239
|
+
}
|
|
@@ -38,17 +38,17 @@ export const primitives = {
|
|
|
38
38
|
"950": "#492909"
|
|
39
39
|
},
|
|
40
40
|
"uvm": {
|
|
41
|
-
"50": "#
|
|
42
|
-
"100": "#
|
|
43
|
-
"200": "#
|
|
44
|
-
"300": "#
|
|
45
|
-
"400": "#
|
|
46
|
-
"500": "#
|
|
47
|
-
"600": "#
|
|
48
|
-
"700": "#
|
|
49
|
-
"800": "#
|
|
50
|
-
"900": "#
|
|
51
|
-
"950": "#
|
|
41
|
+
"50": "#fdf2f2",
|
|
42
|
+
"100": "#fde8e8",
|
|
43
|
+
"200": "#fbd5d5",
|
|
44
|
+
"300": "#f8b4b4",
|
|
45
|
+
"400": "#f08282",
|
|
46
|
+
"500": "#D7282F",
|
|
47
|
+
"600": "#b91c22",
|
|
48
|
+
"700": "#93151b",
|
|
49
|
+
"800": "#7a151b",
|
|
50
|
+
"900": "#661619",
|
|
51
|
+
"950": "#3b090b"
|
|
52
52
|
},
|
|
53
53
|
"laureate": {
|
|
54
54
|
"50": "#fef0eb",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orion-ds/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "Orion Design System - Core tokens and utilities",
|
|
5
5
|
"author": "Orion Design System Team",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
],
|
|
27
27
|
"scripts": {
|
|
28
28
|
"build": "tsc && npm run build:css",
|
|
29
|
-
"build:css": "cp ../../theme.css dist/theme.css",
|
|
29
|
+
"build:css": "mkdir -p dist/tokens && cp ../../theme.css dist/theme.css && cp ../../tokens/generated.css dist/tokens/generated.css",
|
|
30
30
|
"type-check": "tsc --noEmit"
|
|
31
31
|
},
|
|
32
32
|
"keywords": [
|