@aurora-ds/theme 1.6.0 → 2.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/README.dev.md +84 -2
- package/README.md +187 -90
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +34 -419
- package/dist/index.d.ts +34 -419
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.dev.md
CHANGED
|
@@ -2,6 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
This document contains development notes and guidelines for maintaining the Aurora Theme library.
|
|
4
4
|
|
|
5
|
+
## Current Version & Branch Status
|
|
6
|
+
|
|
7
|
+
- **Stable (v1.x):** `master` branch - v1.6.0
|
|
8
|
+
- **Next Major (v2.0):** `v2` branch - Breaking changes for simplification
|
|
9
|
+
|
|
10
|
+
### v2.0 Major Changes (Breaking)
|
|
11
|
+
|
|
12
|
+
The v2 branch introduces significant simplifications:
|
|
13
|
+
|
|
14
|
+
1. **Removed Pre-built Palettes** (~40% bundle reduction)
|
|
15
|
+
- Removed 10+ palette exports (`indigoPalette`, `bluePalette`, etc.)
|
|
16
|
+
- Removed `defaultDarkTheme`
|
|
17
|
+
- Users build their own themes for better tree-shaking
|
|
18
|
+
|
|
19
|
+
2. **Restricted Color Scale Imports** (better tree-shaking)
|
|
20
|
+
- Direct imports removed: `import { indigo } from '@aurora-ds/theme'`
|
|
21
|
+
- Only via colors object: `import { colors } from '@aurora-ds/theme'`
|
|
22
|
+
|
|
23
|
+
3. **Removed WCAG Contrast Utilities** (bundle size)
|
|
24
|
+
- Removed `getContrastRatio`, `meetsWCAG`, `checkContrast`, etc.
|
|
25
|
+
- Users should use dedicated accessibility tools
|
|
26
|
+
|
|
27
|
+
4. **Simplified Color Tokens** (60% reduction: 83 → 33 tokens)
|
|
28
|
+
- Removed accent, tertiary, and many state variations
|
|
29
|
+
- Focused on core tokens only
|
|
30
|
+
- Users can extend themes with custom tokens
|
|
31
|
+
|
|
32
|
+
See [CHANGELOG.md](./CHANGELOG.md#200---2026-01-04) for full migration guide.
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
5
36
|
## Prerequisites
|
|
6
37
|
|
|
7
38
|
- **Node.js** >= 18.0.0
|
|
@@ -141,18 +172,69 @@ This command runs:
|
|
|
141
172
|
|
|
142
173
|
### Publishing to npm
|
|
143
174
|
|
|
175
|
+
#### For Patch/Minor Releases
|
|
176
|
+
|
|
144
177
|
```bash
|
|
145
178
|
# 1. Update version in package.json
|
|
146
|
-
# 2.
|
|
179
|
+
# 2. Move changes from [Unreleased] to new version in CHANGELOG.md
|
|
147
180
|
# 3. Commit and tag
|
|
148
181
|
|
|
149
|
-
npm version patch # or minor
|
|
182
|
+
npm version patch # or minor
|
|
150
183
|
git push --follow-tags
|
|
151
184
|
|
|
152
185
|
# 4. Publish
|
|
153
186
|
npm publish --access public
|
|
154
187
|
```
|
|
155
188
|
|
|
189
|
+
#### For Major Releases (Breaking Changes)
|
|
190
|
+
|
|
191
|
+
**Current Version:** v1.6.0 → **v2.0.0** (current branch: `v2`)
|
|
192
|
+
|
|
193
|
+
Major releases with breaking changes require extra care:
|
|
194
|
+
|
|
195
|
+
**1. Finalize Breaking Changes**
|
|
196
|
+
- Review all changes in `[Unreleased]` section of CHANGELOG.md
|
|
197
|
+
- Ensure migration guide is complete and accurate
|
|
198
|
+
- Update README.md with migration summary
|
|
199
|
+
|
|
200
|
+
**2. Update Version**
|
|
201
|
+
```bash
|
|
202
|
+
npm version major # 1.6.0 → 2.0.0
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
**3. Documentation Updates**
|
|
206
|
+
- Move `[Unreleased]` to `[2.0.0] - YYYY-MM-DD` in CHANGELOG.md
|
|
207
|
+
- Ensure migration guide is comprehensive
|
|
208
|
+
- Update any affected code examples
|
|
209
|
+
|
|
210
|
+
**4. Thorough Testing**
|
|
211
|
+
```bash
|
|
212
|
+
npm run ci # Full CI pipeline
|
|
213
|
+
npm run test:coverage # Ensure >80% coverage
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
**5. Create Release Branch/PR**
|
|
217
|
+
- Title: `Release v2.0.0`
|
|
218
|
+
- Include summary of breaking changes
|
|
219
|
+
- Link to migration guide
|
|
220
|
+
- Get review if working in a team
|
|
221
|
+
|
|
222
|
+
**6. Merge and Publish**
|
|
223
|
+
```bash
|
|
224
|
+
# After merge to main:
|
|
225
|
+
git checkout main
|
|
226
|
+
git pull
|
|
227
|
+
git tag -a v2.0.0 -m "Release v2.0.0 - Major simplification"
|
|
228
|
+
git push origin v2.0.0
|
|
229
|
+
npm publish --access public
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
**7. Post-Release Communication**
|
|
233
|
+
- Create GitHub Release with full changelog
|
|
234
|
+
- Announce breaking changes in GitHub Discussions
|
|
235
|
+
- Update any example repositories
|
|
236
|
+
- Consider writing a blog post explaining the changes
|
|
237
|
+
|
|
156
238
|
> Note: `prepublishOnly` automatically runs `npm run ci` before publishing.
|
|
157
239
|
|
|
158
240
|
---
|
package/README.md
CHANGED
|
@@ -5,12 +5,12 @@ A performant, type-safe, and **fully customizable** CSS-in-JS theme management l
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
7
|
- 🎨 **Modular Theming** - Customize colors, spacing, or any token independently
|
|
8
|
-
- 🎯 **Color Scales** - 20 color
|
|
8
|
+
- 🎯 **Color Scales** - 20 color scales with 12 shades each (25-950)
|
|
9
9
|
- ⚡ **Optimized Performance** - LRU caching, static style deduplication
|
|
10
10
|
- 🖥️ **SSR Support** - Server-side rendering compatible
|
|
11
11
|
- 📦 **Lightweight** - No runtime dependencies besides React
|
|
12
12
|
- 🔒 **Type-safe** - Full TypeScript support with generics
|
|
13
|
-
-
|
|
13
|
+
- 🎨 **Ready to Use** - Default palette with semantic color tokens
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
@@ -64,21 +64,18 @@ Aurora provides **20 color scales** with **12 shades each** (25, 50, 100, 200, 3
|
|
|
64
64
|
### Usage
|
|
65
65
|
|
|
66
66
|
```tsx
|
|
67
|
-
import { colors
|
|
67
|
+
import { colors } from '@aurora-ds/theme'
|
|
68
68
|
|
|
69
|
-
//
|
|
69
|
+
// Access colors via the colors object
|
|
70
70
|
colors.indigo[500] // '#6366f1'
|
|
71
71
|
colors.emerald[400] // '#34d399'
|
|
72
72
|
colors.gray[900] // '#18181b'
|
|
73
73
|
|
|
74
|
-
//
|
|
75
|
-
indigo[600] // '#4f46e5'
|
|
76
|
-
emerald[50] // '#ecfdf5'
|
|
77
|
-
|
|
78
|
-
// Special values
|
|
74
|
+
// Special values (also via colors)
|
|
79
75
|
colors.white // '#ffffff'
|
|
80
76
|
colors.black // '#000000'
|
|
81
77
|
colors.transparent // 'transparent'
|
|
78
|
+
colors.current // 'currentColor'
|
|
82
79
|
```
|
|
83
80
|
|
|
84
81
|
### Build Custom Theme Colors
|
|
@@ -97,56 +94,58 @@ const myTheme = createTheme(defaultTheme, {
|
|
|
97
94
|
})
|
|
98
95
|
```
|
|
99
96
|
|
|
100
|
-
|
|
97
|
+
### Complete Color Scales Reference
|
|
101
98
|
|
|
102
|
-
|
|
99
|
+
All color scales with their hex values (25-950 shades):
|
|
103
100
|
|
|
104
|
-
|
|
101
|
+
#### Neutrals
|
|
105
102
|
|
|
106
|
-
|
|
103
|
+
| Scale | 25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|
|
104
|
+
|-------|----|----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|
|
105
|
+
| **gray** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
106
|
+
| **slate** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
107
|
+
| **stone** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
107
108
|
|
|
108
|
-
|
|
109
|
-
|---------|-------|----------|----------|
|
|
110
|
-
| `indigo` | Modern, professional | Purple | SaaS, business apps (default) |
|
|
111
|
-
| `blue` | Clean, trustworthy | Sky | Corporate, fintech |
|
|
112
|
-
| `rose` | Warm, friendly | Pink | Social, lifestyle |
|
|
113
|
-
| `emerald` | Fresh, natural | Teal | Health, eco-friendly |
|
|
114
|
-
| `teal` | Balanced, calming | Cyan | Healthcare, wellness |
|
|
115
|
-
| `violet` | Creative, bold | Purple | Creative, gaming |
|
|
116
|
-
| `amber` | Energetic, warm | Orange | Food, education |
|
|
117
|
-
| `cyan` | Tech, modern | Sky | Tech, startups |
|
|
118
|
-
| `slate` | Minimal, corporate | Slate | Enterprise, B2B |
|
|
119
|
-
| `gray` | Ultra minimal | Gray | Portfolios, luxury |
|
|
109
|
+
#### Warm Colors
|
|
120
110
|
|
|
121
|
-
|
|
111
|
+
| Scale | 25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|
|
112
|
+
|-------|----|----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|
|
113
|
+
| **red** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
114
|
+
| **orange** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
115
|
+
| **amber** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
116
|
+
| **yellow** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
122
117
|
|
|
123
|
-
|
|
124
|
-
import {
|
|
125
|
-
palettes,
|
|
126
|
-
blueLight,
|
|
127
|
-
blueDark,
|
|
128
|
-
createTheme,
|
|
129
|
-
defaultTheme
|
|
130
|
-
} from '@aurora-ds/theme'
|
|
118
|
+
#### Green Colors
|
|
131
119
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
120
|
+
| Scale | 25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|
|
121
|
+
|-------|----|----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|
|
122
|
+
| **lime** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
123
|
+
| **green** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
124
|
+
| **emerald** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
125
|
+
| **teal** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
135
126
|
|
|
136
|
-
|
|
137
|
-
const theme = createTheme(defaultTheme, {
|
|
138
|
-
colors: palettes.emerald.light
|
|
139
|
-
})
|
|
127
|
+
#### Blue Colors
|
|
140
128
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
129
|
+
| Scale | 25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|
|
130
|
+
|-------|----|----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|
|
131
|
+
| **cyan** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
132
|
+
| **sky** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
133
|
+
| **blue** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
134
|
+
| **indigo** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
135
|
+
| **violet** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
136
|
+
|
|
137
|
+
#### Purple & Pink Colors
|
|
138
|
+
|
|
139
|
+
| Scale | 25 | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|
|
140
|
+
|-------|----|----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|
|
|
141
|
+
| **purple** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
142
|
+
| **fuchsia** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
143
|
+
| **pink** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
144
|
+
| **rose** |  |  |  |  |  |  |  |  |  |  |  |  |
|
|
147
145
|
|
|
148
146
|
---
|
|
149
147
|
|
|
148
|
+
|
|
150
149
|
## Modular Customization
|
|
151
150
|
|
|
152
151
|
Customize only what you need - colors, spacing, or any individual token.
|
|
@@ -155,13 +154,11 @@ Customize only what you need - colors, spacing, or any individual token.
|
|
|
155
154
|
|
|
156
155
|
```tsx
|
|
157
156
|
import {
|
|
158
|
-
// Complete
|
|
157
|
+
// Complete theme
|
|
159
158
|
defaultTheme,
|
|
160
|
-
defaultDarkTheme,
|
|
161
159
|
|
|
162
160
|
// Individual presets
|
|
163
|
-
|
|
164
|
-
defaultDarkColors,
|
|
161
|
+
defaultPalette,
|
|
165
162
|
defaultSpacing,
|
|
166
163
|
defaultRadius,
|
|
167
164
|
defaultShadows,
|
|
@@ -170,17 +167,19 @@ import {
|
|
|
170
167
|
defaultLineHeight,
|
|
171
168
|
defaultZIndex,
|
|
172
169
|
defaultTransition,
|
|
170
|
+
defaultOpacity,
|
|
171
|
+
defaultBreakpoints,
|
|
173
172
|
} from '@aurora-ds/theme'
|
|
174
173
|
```
|
|
175
174
|
|
|
176
175
|
### Customize Only Colors
|
|
177
176
|
|
|
178
177
|
```tsx
|
|
179
|
-
import { defaultTheme,
|
|
178
|
+
import { defaultTheme, defaultPalette, createTheme } from '@aurora-ds/theme'
|
|
180
179
|
|
|
181
180
|
const myTheme = createTheme(defaultTheme, {
|
|
182
181
|
colors: {
|
|
183
|
-
...
|
|
182
|
+
...defaultPalette,
|
|
184
183
|
primary: '#your-brand-color',
|
|
185
184
|
primaryHover: '#your-brand-hover',
|
|
186
185
|
},
|
|
@@ -208,13 +207,18 @@ import {
|
|
|
208
207
|
defaultSpacing,
|
|
209
208
|
defaultRadius,
|
|
210
209
|
defaultShadows,
|
|
211
|
-
|
|
210
|
+
colors,
|
|
212
211
|
createTheme,
|
|
213
212
|
defaultTheme,
|
|
214
213
|
} from '@aurora-ds/theme'
|
|
215
214
|
|
|
216
215
|
const myTheme = createTheme(defaultTheme, {
|
|
217
|
-
colors:
|
|
216
|
+
colors: {
|
|
217
|
+
...defaultTheme.colors,
|
|
218
|
+
primary: colors.emerald[600], // Use emerald as primary
|
|
219
|
+
primaryHover: colors.emerald[700],
|
|
220
|
+
primaryActive: colors.emerald[800],
|
|
221
|
+
},
|
|
218
222
|
spacing: defaultSpacing, // Keep default spacing
|
|
219
223
|
radius: {
|
|
220
224
|
...defaultRadius,
|
|
@@ -413,15 +417,16 @@ export const Button = ({ children }) => (
|
|
|
413
417
|
|
|
414
418
|
| Token | Description |
|
|
415
419
|
|-------|-------------|
|
|
416
|
-
| `primary`, `
|
|
417
|
-
| `secondary`, `
|
|
418
|
-
| `
|
|
419
|
-
| `
|
|
420
|
-
| `
|
|
421
|
-
| `
|
|
422
|
-
| `
|
|
423
|
-
| `
|
|
424
|
-
| `
|
|
420
|
+
| `primary`, `primaryHover`, `primaryActive`, `primarySubtle`, `primaryDisabled`, `onPrimary` | Primary brand color |
|
|
421
|
+
| `secondary`, `secondaryHover`, `secondaryActive`, `secondarySubtle`, `secondaryDisabled`, `onSecondary` | Secondary actions |
|
|
422
|
+
| `background`, `surface`, `surfaceHover`, `surfaceActive` | Surfaces |
|
|
423
|
+
| `text`, `textSecondary`, `textTertiary` | Text hierarchy |
|
|
424
|
+
| `border` | Borders |
|
|
425
|
+
| `success`, `successSubtle` | Success state |
|
|
426
|
+
| `warning`, `warningSubtle` | Warning state |
|
|
427
|
+
| `error`, `errorHover`, `errorSubtle`, `onError` | Error state |
|
|
428
|
+
| `info`, `infoSubtle` | Info state |
|
|
429
|
+
| `link`, `linkHover`, `linkActive`, `linkDisabled` | Links |
|
|
425
430
|
| `disabled`, `disabledText` | Disabled states |
|
|
426
431
|
|
|
427
432
|
### Spacing
|
|
@@ -429,11 +434,16 @@ export const Button = ({ children }) => (
|
|
|
429
434
|
```tsx
|
|
430
435
|
spacing: {
|
|
431
436
|
none: '0',
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
+
'2xs': '0.125rem', // 2px
|
|
438
|
+
xs: '0.25rem', // 4px
|
|
439
|
+
sm: '0.5rem', // 8px
|
|
440
|
+
md: '1rem', // 16px
|
|
441
|
+
lg: '1.5rem', // 24px
|
|
442
|
+
xl: '2rem', // 32px
|
|
443
|
+
'2xl': '3rem', // 48px
|
|
444
|
+
'3xl': '4rem', // 64px
|
|
445
|
+
'4xl': '6rem', // 96px
|
|
446
|
+
'5xl': '8rem', // 128px
|
|
437
447
|
}
|
|
438
448
|
```
|
|
439
449
|
|
|
@@ -463,6 +473,7 @@ opacity: {
|
|
|
463
473
|
| `zIndex` | `behind`, `base`, `dropdown`, `sticky`, `overlay`, `modal`, `popover`, `tooltip`, `toast` |
|
|
464
474
|
| `transition` | `fast`, `normal`, `slow` |
|
|
465
475
|
| `opacity` | `none`, `lowest`, `low`, `medium`, `high`, `higher`, `full` |
|
|
476
|
+
| `breakpoints` | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` |
|
|
466
477
|
|
|
467
478
|
---
|
|
468
479
|
|
|
@@ -549,9 +560,9 @@ clearSSRRules() // Reset for next request
|
|
|
549
560
|
| `BaseColors` | Color token type |
|
|
550
561
|
| `BaseSpacing` | Spacing token type |
|
|
551
562
|
| `BaseOpacity` | Opacity token type |
|
|
563
|
+
| `BaseBreakpoints` | Breakpoints token type |
|
|
552
564
|
| `ColorScale` | Color scale type (25-950) |
|
|
553
565
|
| `ColorName` | Union of color scale names |
|
|
554
|
-
| `PaletteName` | Union of palette names |
|
|
555
566
|
| `ExtendTheme<T>` | Helper to extend theme |
|
|
556
567
|
| `DeepPartial<T>` | For partial overrides |
|
|
557
568
|
| `CustomTheme<TColors, ...>` | Generic type for fully custom themes |
|
|
@@ -584,35 +595,121 @@ clearSSRRules() // Reset for next request
|
|
|
584
595
|
| `fontFace()` | @font-face rules |
|
|
585
596
|
| `cssVariables()` | CSS custom properties |
|
|
586
597
|
|
|
587
|
-
|
|
598
|
+
---
|
|
588
599
|
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
600
|
+
## Migration Guide (v1 → v2)
|
|
601
|
+
|
|
602
|
+
Aurora v2 is a **major simplification** focused on flexibility and reduced bundle size. This guide helps you upgrade from v1.x to v2.0.
|
|
603
|
+
|
|
604
|
+
> 📖 **Full migration guide with all details:** [CHANGELOG.md - Migration Guide](./CHANGELOG.md#migration-guide-v1-to-v2)
|
|
605
|
+
|
|
606
|
+
### 🚨 Breaking Changes Summary
|
|
607
|
+
|
|
608
|
+
#### 1. Removed Pre-built Theme Palettes (~40% smaller bundle)
|
|
596
609
|
|
|
597
610
|
```tsx
|
|
598
|
-
|
|
611
|
+
// ❌ v1 - Pre-built palettes (removed)
|
|
612
|
+
import { indigoPalette, bluePalette, defaultDarkTheme } from '@aurora-ds/theme'
|
|
599
613
|
|
|
600
|
-
//
|
|
601
|
-
|
|
614
|
+
// ✅ v2 - Build your own with full control
|
|
615
|
+
import { colors, createTheme, defaultTheme } from '@aurora-ds/theme'
|
|
602
616
|
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
617
|
+
const myTheme = createTheme(defaultTheme, {
|
|
618
|
+
colors: {
|
|
619
|
+
primary: colors.indigo[600],
|
|
620
|
+
primaryHover: colors.indigo[700],
|
|
621
|
+
// ... full control over all tokens
|
|
622
|
+
}
|
|
623
|
+
})
|
|
624
|
+
```
|
|
606
625
|
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
}
|
|
626
|
+
#### 2. Color Scales Import Restriction
|
|
627
|
+
|
|
628
|
+
```tsx
|
|
629
|
+
// ❌ v1 - Direct imports (removed for better tree-shaking)
|
|
630
|
+
import { indigo, blue } from '@aurora-ds/theme'
|
|
631
|
+
|
|
632
|
+
// ✅ v2 - Import via colors object only
|
|
633
|
+
import { colors } from '@aurora-ds/theme'
|
|
634
|
+
colors.indigo[500]
|
|
635
|
+
colors.blue[600]
|
|
612
636
|
```
|
|
613
637
|
|
|
614
|
-
|
|
638
|
+
#### 3. Removed WCAG Contrast Utilities
|
|
639
|
+
|
|
640
|
+
```tsx
|
|
641
|
+
// ❌ v1 - Contrast utilities (removed)
|
|
642
|
+
import { getContrastRatio, meetsWCAG } from '@aurora-ds/theme'
|
|
643
|
+
|
|
644
|
+
// ✅ v2 - Use dedicated accessibility tools
|
|
645
|
+
// - polished / color2k (libraries)
|
|
646
|
+
// - axe DevTools (browser extension)
|
|
647
|
+
// - Lighthouse (Chrome DevTools)
|
|
648
|
+
```
|
|
649
|
+
|
|
650
|
+
#### 4. Simplified Color Tokens (83 → 33 tokens, 60% reduction)
|
|
651
|
+
|
|
652
|
+
**Removed color tokens:**
|
|
653
|
+
- ❌ Accent colors (5 tokens): `accent`, `accentHover`, `accentActive`, `onAccent`, `accentSubtle`
|
|
654
|
+
- ❌ Tertiary colors (6 tokens): `tertiary`, `tertiaryHover`, `tertiaryActive`, `onTertiary`, `tertiarySubtle`, `tertiaryDisabled`
|
|
655
|
+
- ❌ Extra surface (2): `elevated`, `overlay`
|
|
656
|
+
- ❌ Extra text (1): `textInverse`
|
|
657
|
+
- ❌ Extra borders (3): `borderHover`, `borderFocus`, `borderSubtle`
|
|
658
|
+
- ❌ Extra semantic (6): `onSuccess`, `successHover`, `onWarning`, `warningHover`, `onInfo`, `infoHover`
|
|
659
|
+
- ❌ Extra interactive (3): `linkVisited`, `linkDisabled`, `focus`
|
|
660
|
+
|
|
661
|
+
**Migration:**
|
|
662
|
+
|
|
663
|
+
```tsx
|
|
664
|
+
// ❌ v1
|
|
665
|
+
theme.colors.accent
|
|
666
|
+
theme.colors.tertiary
|
|
667
|
+
theme.colors.elevated
|
|
668
|
+
|
|
669
|
+
// ✅ v2 - Use existing tokens or extend theme
|
|
670
|
+
theme.colors.primary // Use existing
|
|
671
|
+
theme.colors.secondary // Use existing
|
|
672
|
+
theme.colors.surface // Use existing
|
|
673
|
+
|
|
674
|
+
// OR extend if needed:
|
|
675
|
+
const myTheme = createTheme(defaultTheme, {
|
|
676
|
+
colors: {
|
|
677
|
+
...defaultTheme.colors,
|
|
678
|
+
accent: colors.cyan[500],
|
|
679
|
+
tertiary: colors.violet[500],
|
|
680
|
+
elevated: colors.slate[100],
|
|
681
|
+
}
|
|
682
|
+
})
|
|
683
|
+
```
|
|
684
|
+
|
|
685
|
+
### Quick Migration Steps
|
|
686
|
+
|
|
687
|
+
1. **Replace color scale imports**
|
|
688
|
+
```tsx
|
|
689
|
+
// Before: import { indigo } from '@aurora-ds/theme'
|
|
690
|
+
// After: import { colors } from '@aurora-ds/theme'
|
|
691
|
+
// colors.indigo[500]
|
|
692
|
+
```
|
|
693
|
+
|
|
694
|
+
2. **Replace palette imports** - Build your own theme (see [CHANGELOG](./CHANGELOG.md#3-pre-built-palettes-removed))
|
|
695
|
+
|
|
696
|
+
3. **Replace removed color tokens** - Use existing tokens or extend theme (see [CHANGELOG](./CHANGELOG.md#1-removed-color-tokens))
|
|
697
|
+
|
|
698
|
+
4. **Replace contrast utilities** - Use external tools
|
|
699
|
+
|
|
700
|
+
5. **Test thoroughly**
|
|
701
|
+
```bash
|
|
702
|
+
npm run typecheck # Catch type errors
|
|
703
|
+
npm run build # Ensure no import errors
|
|
704
|
+
npm test # Run tests
|
|
705
|
+
```
|
|
706
|
+
|
|
707
|
+
### Benefits of v2
|
|
615
708
|
|
|
709
|
+
- 📦 **~40% smaller bundle** - Only include what you use
|
|
710
|
+
- 🎯 **More flexible** - Full control over color tokens
|
|
711
|
+
- ⚡ **Better tree-shaking** - Optimized exports
|
|
712
|
+
- 🧩 **Simpler** - Fewer built-in tokens = less decision fatigue
|
|
616
713
|
|
|
617
714
|
## License
|
|
618
715
|
|