@lukeashford/aurelius 1.0.0 → 1.1.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 +169 -93
- package/dist/chunk-MBYGB67D.mjs +243 -0
- package/dist/chunk-MBYGB67D.mjs.map +1 -0
- package/dist/{chunk-OPJXDW4C.mjs → chunk-MDNHT46W.mjs} +1 -1
- package/dist/chunk-MDNHT46W.mjs.map +1 -0
- package/dist/index.js +338 -59
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +203 -33
- package/dist/index.mjs.map +1 -1
- package/dist/styles/base.css +2 -536
- package/dist/styles/fonts/OFL_Raleway.txt +93 -93
- package/dist/tailwind.preset.js +148 -31
- package/dist/tailwind.preset.js.map +1 -1
- package/dist/tailwind.preset.mjs +2 -2
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/index.mjs +1 -1
- package/llms.md +180 -0
- package/package.json +9 -4
- package/dist/chunk-7DDWFQNU.mjs +0 -136
- package/dist/chunk-7DDWFQNU.mjs.map +0 -1
- package/dist/chunk-OPJXDW4C.mjs.map +0 -1
- package/dist/llms.md +0 -325
package/dist/llms.md
DELETED
|
@@ -1,325 +0,0 @@
|
|
|
1
|
-
# Aurelius Design System Philosophy
|
|
2
|
-
|
|
3
|
-
## Core Principles
|
|
4
|
-
Aurelius is a design system for creative technologists, blending technical sophistication with an artistic, cinematic aesthetic. The visual language relies on deep blacks, rich golds, and refined typography to convey stability, trust, and quiet luxury.
|
|
5
|
-
|
|
6
|
-
## Implementation Strategy
|
|
7
|
-
**Hierarchy:** React Components > Component Classes > Utility Classes > Design Tokens.
|
|
8
|
-
|
|
9
|
-
1. **React Components:** Use exported components (e.g., `<Button />`) whenever possible.
|
|
10
|
-
2. **Component Classes:** Fallback to semantic CSS classes (e.g., `.btn`) if no React component fits.
|
|
11
|
-
3. **Utility Classes:** Build custom elements using Tailwind utilities with semantic tokens (e.g., `bg-obsidian`).
|
|
12
|
-
4. **Design Tokens:** Use raw tokens only as a last resort.
|
|
13
|
-
|
|
14
|
-
## Visual Guidelines
|
|
15
|
-
* **Theme:** Strictly dark mode. Avoid white backgrounds for containers; use `obsidian` (#0a0a0a) or `charcoal` (#141414).
|
|
16
|
-
* **Typography:** Use the system font stack via our utility classes. Do not introduce external fonts unless specified.
|
|
17
|
-
* **Borders:** Prefer subtle 1px borders (`border-ash`) over heavy drop shadows.
|
|
18
|
-
* **Primary Color:** Gold (#c9a227) is reserved for primary actions and key highlights.
|
|
19
|
-
|
|
20
|
-
**Instruction for AI Agents:**
|
|
21
|
-
Before generating code, verify if an existing component in this package meets the requirement. Hallucinating new styles for standard elements is strictly prohibited. Check the Manifest below for available tools.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
## React Components API
|
|
25
|
-
|
|
26
|
-
### <Alert />
|
|
27
|
-
**Props:**
|
|
28
|
-
- `variant?: AlertVariant`
|
|
29
|
-
- `title?: string`
|
|
30
|
-
|
|
31
|
-
### <Avatar />
|
|
32
|
-
**Props:**
|
|
33
|
-
- `src?: string`
|
|
34
|
-
- `alt?: string`
|
|
35
|
-
- `name?: string`
|
|
36
|
-
- `size?: AvatarSize`
|
|
37
|
-
- `status?: 'online' | 'offline' | 'busy'`
|
|
38
|
-
|
|
39
|
-
### <Badge />
|
|
40
|
-
**Props:**
|
|
41
|
-
- `variant?: BadgeVariant`
|
|
42
|
-
|
|
43
|
-
### <Button />
|
|
44
|
-
**Props:**
|
|
45
|
-
- `variant?: ButtonVariant`
|
|
46
|
-
- `size?: ButtonSize`
|
|
47
|
-
- `loading?: boolean`
|
|
48
|
-
|
|
49
|
-
### <Card />
|
|
50
|
-
**Props:**
|
|
51
|
-
- `variant?: CardVariant`
|
|
52
|
-
- `interactive?: boolean`
|
|
53
|
-
|
|
54
|
-
### <Checkbox />
|
|
55
|
-
**Props:**
|
|
56
|
-
- `label?: string`
|
|
57
|
-
|
|
58
|
-
### <HelperText />
|
|
59
|
-
**Props:**
|
|
60
|
-
- `error?: boolean`
|
|
61
|
-
|
|
62
|
-
### <Input />
|
|
63
|
-
**Props:**
|
|
64
|
-
- `error?: boolean`
|
|
65
|
-
- `leadingIcon?: React.ReactNode`
|
|
66
|
-
- `trailingIcon?: React.ReactNode`
|
|
67
|
-
|
|
68
|
-
### <Label />
|
|
69
|
-
**Props:**
|
|
70
|
-
- `required?: boolean`
|
|
71
|
-
|
|
72
|
-
### <Modal />
|
|
73
|
-
**Props:**
|
|
74
|
-
- `isOpen: boolean`
|
|
75
|
-
- `onClose: () => void`
|
|
76
|
-
- `title?: string`
|
|
77
|
-
- `children: React.ReactNode`
|
|
78
|
-
- `className?: string`
|
|
79
|
-
|
|
80
|
-
### <Radio />
|
|
81
|
-
**Props:**
|
|
82
|
-
- `label?: string`
|
|
83
|
-
|
|
84
|
-
### <Select />
|
|
85
|
-
**Props:**
|
|
86
|
-
- `error?: boolean`
|
|
87
|
-
- `options?: SelectOption[]`
|
|
88
|
-
|
|
89
|
-
### <Skeleton />
|
|
90
|
-
|
|
91
|
-
### <Spinner />
|
|
92
|
-
**Props:**
|
|
93
|
-
- `size?: 'sm' | 'md' | 'lg'`
|
|
94
|
-
|
|
95
|
-
### <Switch />
|
|
96
|
-
**Props:**
|
|
97
|
-
- `checked?: boolean`
|
|
98
|
-
- `defaultChecked?: boolean`
|
|
99
|
-
- `onCheckedChange?: (checked: boolean) => void`
|
|
100
|
-
- `label?: string`
|
|
101
|
-
|
|
102
|
-
### <Textarea />
|
|
103
|
-
**Props:**
|
|
104
|
-
- `error?: boolean`
|
|
105
|
-
|
|
106
|
-
### <Tooltip />
|
|
107
|
-
**Props:**
|
|
108
|
-
- `content: React.ReactNode`
|
|
109
|
-
- `children: React.ReactElement`
|
|
110
|
-
- `open?: boolean`
|
|
111
|
-
- `side?: 'top' | 'right' | 'bottom' | 'left'`
|
|
112
|
-
|
|
113
|
-
## CSS Classes & Tailwind Utilities
|
|
114
|
-
|
|
115
|
-
### Component Classes
|
|
116
|
-
|
|
117
|
-
| Class | Description |
|
|
118
|
-
|---|---|
|
|
119
|
-
| `.alert` | |
|
|
120
|
-
| `.alert-error` | |
|
|
121
|
-
| `.alert-info` | |
|
|
122
|
-
| `.alert-success` | |
|
|
123
|
-
| `.alert-warning` | |
|
|
124
|
-
| `.avatar` | |
|
|
125
|
-
| `.avatar-2xl` | |
|
|
126
|
-
| `.avatar-lg` | |
|
|
127
|
-
| `.avatar-md` | |
|
|
128
|
-
| `.avatar-sm` | |
|
|
129
|
-
| `.avatar-xl` | |
|
|
130
|
-
| `.avatar-xs` | |
|
|
131
|
-
| `.badge` | |
|
|
132
|
-
| `.badge-default` | |
|
|
133
|
-
| `.badge-error` | |
|
|
134
|
-
| `.badge-gold` | |
|
|
135
|
-
| `.badge-info` | |
|
|
136
|
-
| `.badge-success` | |
|
|
137
|
-
| `.badge-warning` | |
|
|
138
|
-
| `.btn` | |
|
|
139
|
-
| `.btn-danger` | |
|
|
140
|
-
| `.btn-elevated` | |
|
|
141
|
-
| `.btn-featured` | |
|
|
142
|
-
| `.btn-ghost` | |
|
|
143
|
-
| `.btn-important` | |
|
|
144
|
-
| `.btn-lg` | |
|
|
145
|
-
| `.btn-md` | |
|
|
146
|
-
| `.btn-outlined` | |
|
|
147
|
-
| `.btn-primary` | |
|
|
148
|
-
| `.btn-sm` | |
|
|
149
|
-
| `.btn-xl` | |
|
|
150
|
-
| `.card` | |
|
|
151
|
-
| `.card-elevated` | |
|
|
152
|
-
| `.card-featured` | |
|
|
153
|
-
| `.card-interactive` | |
|
|
154
|
-
| `.card-outlined` | |
|
|
155
|
-
| `.checkbox` | |
|
|
156
|
-
| `.divider` | |
|
|
157
|
-
| `.divider-vertical` | |
|
|
158
|
-
| `.input` | |
|
|
159
|
-
| `.input-error` | |
|
|
160
|
-
| `.label` | |
|
|
161
|
-
| `.label-required` | |
|
|
162
|
-
| `.modal-backdrop` | |
|
|
163
|
-
| `.modal-content` | |
|
|
164
|
-
| `.radio` | |
|
|
165
|
-
| `.select` | |
|
|
166
|
-
| `.switch` | |
|
|
167
|
-
| `.switch-thumb` | |
|
|
168
|
-
| `.textarea` | |
|
|
169
|
-
| `.textarea-error` | |
|
|
170
|
-
| `.tooltip` | |
|
|
171
|
-
|
|
172
|
-
### Utility Classes
|
|
173
|
-
|
|
174
|
-
| Class | Description |
|
|
175
|
-
|---|---|
|
|
176
|
-
| `.backdrop-glass` | |
|
|
177
|
-
| `.center-absolute` | |
|
|
178
|
-
| `.focus-ring` | |
|
|
179
|
-
| `.glow` | |
|
|
180
|
-
| `.glow-lg` | |
|
|
181
|
-
| `.glow-sm` | |
|
|
182
|
-
| `.line-clamp-2` | |
|
|
183
|
-
| `.line-clamp-3` | |
|
|
184
|
-
| `.scroll-smooth` | |
|
|
185
|
-
| `.scrollbar-hide` | |
|
|
186
|
-
| `.text-gradient-gold` | |
|
|
187
|
-
| `.truncate` | |
|
|
188
|
-
|
|
189
|
-
## Design Tokens
|
|
190
|
-
|
|
191
|
-
### Colors
|
|
192
|
-
|
|
193
|
-
| Token | Value |
|
|
194
|
-
|---|---|
|
|
195
|
-
| `colors.void` | #000000 |
|
|
196
|
-
| `colors.obsidian` | #0a0a0a |
|
|
197
|
-
| `colors.charcoal` | #141414 |
|
|
198
|
-
| `colors.graphite` | #1f1f1f |
|
|
199
|
-
| `colors.slate` | #2a2a2a |
|
|
200
|
-
| `colors.ash` | #3d3d3d |
|
|
201
|
-
| `colors.gold` | #c9a227 |
|
|
202
|
-
| `colors.goldLight` | #d4b84a |
|
|
203
|
-
| `colors.goldBright` | #e5c84d |
|
|
204
|
-
| `colors.goldMuted` | #8b7355 |
|
|
205
|
-
| `colors.goldPale` | #d4c4a8 |
|
|
206
|
-
| `colors.goldGlow` | rgba(201, 162, 39, 0.15) |
|
|
207
|
-
| `colors.white` | #ffffff |
|
|
208
|
-
| `colors.silver` | #a3a3a3 |
|
|
209
|
-
| `colors.zinc` | #71717a |
|
|
210
|
-
| `colors.dim` | #52525b |
|
|
211
|
-
| `colors.success` | #22c55e |
|
|
212
|
-
| `colors.successMuted` | #166534 |
|
|
213
|
-
| `colors.error` | #dc2626 |
|
|
214
|
-
| `colors.errorMuted` | #991b1b |
|
|
215
|
-
| `colors.warning` | #d97706 |
|
|
216
|
-
| `colors.warningMuted` | #92400e |
|
|
217
|
-
| `colors.info` | #0ea5e9 |
|
|
218
|
-
| `colors.infoMuted` | #0369a1 |
|
|
219
|
-
|
|
220
|
-
### Duration
|
|
221
|
-
|
|
222
|
-
| Token | Value |
|
|
223
|
-
|---|---|
|
|
224
|
-
| `duration.instant` | 75ms |
|
|
225
|
-
| `duration.fast` | 150ms |
|
|
226
|
-
| `duration.normal` | 200ms |
|
|
227
|
-
| `duration.slow` | 300ms |
|
|
228
|
-
| `duration.slower` | 500ms |
|
|
229
|
-
|
|
230
|
-
### Easing
|
|
231
|
-
|
|
232
|
-
| Token | Value |
|
|
233
|
-
|---|---|
|
|
234
|
-
| `easing.smooth` | cubic-bezier(0.16, 1, 0.3, 1) |
|
|
235
|
-
| `easing.snap` | cubic-bezier(0.5, 0, 0.1, 1) |
|
|
236
|
-
|
|
237
|
-
### Radii
|
|
238
|
-
|
|
239
|
-
| Token | Value |
|
|
240
|
-
|---|---|
|
|
241
|
-
| `radii.sm` | 0.125rem |
|
|
242
|
-
| `radii.md` | 0.25rem |
|
|
243
|
-
| `radii.lg` | 0.375rem |
|
|
244
|
-
| `radii.xl` | 0.5rem |
|
|
245
|
-
| `radii.2xl` | 0.75rem |
|
|
246
|
-
| `radii.3xl` | 1rem |
|
|
247
|
-
| `radii.full` | 9999px |
|
|
248
|
-
|
|
249
|
-
### Shadows
|
|
250
|
-
|
|
251
|
-
| Token | Value |
|
|
252
|
-
|---|---|
|
|
253
|
-
| `shadows.sm` | 0 1px 2px 0 rgba(0, 0, 0, 0.4) |
|
|
254
|
-
| `shadows.md` | 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) |
|
|
255
|
-
| `shadows.lg` | 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) |
|
|
256
|
-
| `shadows.xl` | 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) |
|
|
257
|
-
| `shadows.2xl` | 0 25px 50px -12px rgba(0, 0, 0, 0.5) |
|
|
258
|
-
| `shadows.glow` | 0 0 20px rgba(201, 162, 39, 0.3) |
|
|
259
|
-
| `shadows.glow-sm` | 0 0 10px rgba(201, 162, 39, 0.2) |
|
|
260
|
-
| `shadows.glow-lg` | 0 0 40px rgba(201, 162, 39, 0.4) |
|
|
261
|
-
| `shadows.inner` | inset 0 2px 4px 0 rgba(0, 0, 0, 0.3) |
|
|
262
|
-
|
|
263
|
-
### Spacing
|
|
264
|
-
|
|
265
|
-
| Token | Value |
|
|
266
|
-
|---|---|
|
|
267
|
-
| `spacing.0` | 0 |
|
|
268
|
-
| `spacing.1` | 0.25rem |
|
|
269
|
-
| `spacing.2` | 0.5rem |
|
|
270
|
-
| `spacing.3` | 0.75rem |
|
|
271
|
-
| `spacing.4` | 1rem |
|
|
272
|
-
| `spacing.5` | 1.25rem |
|
|
273
|
-
| `spacing.6` | 1.5rem |
|
|
274
|
-
| `spacing.7` | 1.75rem |
|
|
275
|
-
| `spacing.8` | 2rem |
|
|
276
|
-
| `spacing.9` | 2.25rem |
|
|
277
|
-
| `spacing.10` | 2.5rem |
|
|
278
|
-
| `spacing.11` | 2.75rem |
|
|
279
|
-
| `spacing.12` | 3rem |
|
|
280
|
-
| `spacing.14` | 3.5rem |
|
|
281
|
-
| `spacing.16` | 4rem |
|
|
282
|
-
| `spacing.20` | 5rem |
|
|
283
|
-
| `spacing.24` | 6rem |
|
|
284
|
-
| `spacing.28` | 7rem |
|
|
285
|
-
| `spacing.32` | 8rem |
|
|
286
|
-
| `spacing.px` | 1px |
|
|
287
|
-
| `spacing.0.5` | 0.125rem |
|
|
288
|
-
| `spacing.1.5` | 0.375rem |
|
|
289
|
-
| `spacing.2.5` | 0.625rem |
|
|
290
|
-
| `spacing.3.5` | 0.875rem |
|
|
291
|
-
|
|
292
|
-
### Typography
|
|
293
|
-
|
|
294
|
-
| Token | Value |
|
|
295
|
-
|---|---|
|
|
296
|
-
| `typography.fontHeading` | [Marcellus, serif] |
|
|
297
|
-
| `typography.fontBody` | [Raleway, system-ui, sans-serif] |
|
|
298
|
-
| `typography.fontMono` | [JetBrains Mono, Fira Code, SF Mono, monospace] |
|
|
299
|
-
| `typography.fontSize.xs` | [0.75rem, {"lineHeight":"1rem"}] |
|
|
300
|
-
| `typography.fontSize.sm` | [0.875rem, {"lineHeight":"1.25rem"}] |
|
|
301
|
-
| `typography.fontSize.base` | [1rem, {"lineHeight":"1.5rem"}] |
|
|
302
|
-
| `typography.fontSize.lg` | [1.125rem, {"lineHeight":"1.75rem"}] |
|
|
303
|
-
| `typography.fontSize.xl` | [1.25rem, {"lineHeight":"1.75rem"}] |
|
|
304
|
-
| `typography.fontSize.2xl` | [1.5rem, {"lineHeight":"2rem"}] |
|
|
305
|
-
| `typography.fontSize.3xl` | [1.875rem, {"lineHeight":"2.25rem"}] |
|
|
306
|
-
| `typography.fontSize.4xl` | [2.25rem, {"lineHeight":"2.5rem"}] |
|
|
307
|
-
| `typography.fontSize.5xl` | [3rem, {"lineHeight":"1"}] |
|
|
308
|
-
| `typography.fontSize.6xl` | [3.75rem, {"lineHeight":"1"}] |
|
|
309
|
-
| `typography.fontWeight.normal` | 400 |
|
|
310
|
-
| `typography.fontWeight.medium` | 500 |
|
|
311
|
-
| `typography.fontWeight.semibold` | 600 |
|
|
312
|
-
| `typography.fontWeight.bold` | 700 |
|
|
313
|
-
| `typography.lineHeight.none` | 1 |
|
|
314
|
-
| `typography.lineHeight.tight` | 1.25 |
|
|
315
|
-
| `typography.lineHeight.snug` | 1.375 |
|
|
316
|
-
| `typography.lineHeight.normal` | 1.5 |
|
|
317
|
-
| `typography.lineHeight.relaxed` | 1.625 |
|
|
318
|
-
| `typography.lineHeight.loose` | 2 |
|
|
319
|
-
| `typography.letterSpacing.tighter` | -0.05em |
|
|
320
|
-
| `typography.letterSpacing.tight` | -0.025em |
|
|
321
|
-
| `typography.letterSpacing.normal` | 0 |
|
|
322
|
-
| `typography.letterSpacing.wide` | 0.025em |
|
|
323
|
-
| `typography.letterSpacing.wider` | 0.05em |
|
|
324
|
-
| `typography.letterSpacing.widest` | 0.1em |
|
|
325
|
-
|