@aurora-ds/theme 1.0.3 → 1.0.4
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 +13 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,13 +15,13 @@ A performant, type-safe, and **fully customizable** CSS-in-JS theme management l
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
npm install @aurora-
|
|
18
|
+
npm install @aurora-ds/theme
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Quick Start
|
|
22
22
|
|
|
23
23
|
```tsx
|
|
24
|
-
import { defaultTheme, ThemeProvider, createStyles } from '@aurora-
|
|
24
|
+
import { defaultTheme, ThemeProvider, createStyles } from '@aurora-ds/theme'
|
|
25
25
|
|
|
26
26
|
// 1. Wrap your app
|
|
27
27
|
<ThemeProvider theme={defaultTheme}>
|
|
@@ -64,7 +64,7 @@ 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, indigo, emerald } from '@aurora-
|
|
67
|
+
import { colors, indigo, emerald } from '@aurora-ds/theme'
|
|
68
68
|
|
|
69
69
|
// Via the colors object
|
|
70
70
|
colors.indigo[500] // '#6366f1'
|
|
@@ -84,7 +84,7 @@ colors.transparent // 'transparent'
|
|
|
84
84
|
### Build Custom Theme Colors
|
|
85
85
|
|
|
86
86
|
```tsx
|
|
87
|
-
import { colors, defaultTheme, createTheme } from '@aurora-
|
|
87
|
+
import { colors, defaultTheme, createTheme } from '@aurora-ds/theme'
|
|
88
88
|
|
|
89
89
|
const myTheme = createTheme(defaultTheme, {
|
|
90
90
|
colors: {
|
|
@@ -125,7 +125,7 @@ import {
|
|
|
125
125
|
roseDark,
|
|
126
126
|
createTheme,
|
|
127
127
|
defaultTheme
|
|
128
|
-
} from '@aurora-
|
|
128
|
+
} from '@aurora-ds/theme'
|
|
129
129
|
|
|
130
130
|
// Option 1: Import directly
|
|
131
131
|
const roseTheme = createTheme(defaultTheme, { colors: roseLight })
|
|
@@ -168,13 +168,13 @@ import {
|
|
|
168
168
|
defaultLineHeight,
|
|
169
169
|
defaultZIndex,
|
|
170
170
|
defaultTransition,
|
|
171
|
-
} from '@aurora-
|
|
171
|
+
} from '@aurora-ds/theme'
|
|
172
172
|
```
|
|
173
173
|
|
|
174
174
|
### Customize Only Colors
|
|
175
175
|
|
|
176
176
|
```tsx
|
|
177
|
-
import { defaultTheme, defaultColors, createTheme } from '@aurora-
|
|
177
|
+
import { defaultTheme, defaultColors, createTheme } from '@aurora-ds/theme'
|
|
178
178
|
|
|
179
179
|
const myTheme = createTheme(defaultTheme, {
|
|
180
180
|
colors: {
|
|
@@ -188,7 +188,7 @@ const myTheme = createTheme(defaultTheme, {
|
|
|
188
188
|
### Customize Only Spacing
|
|
189
189
|
|
|
190
190
|
```tsx
|
|
191
|
-
import { defaultTheme, defaultSpacing, createTheme } from '@aurora-
|
|
191
|
+
import { defaultTheme, defaultSpacing, createTheme } from '@aurora-ds/theme'
|
|
192
192
|
|
|
193
193
|
const myTheme = createTheme(defaultTheme, {
|
|
194
194
|
spacing: {
|
|
@@ -209,7 +209,7 @@ import {
|
|
|
209
209
|
emeraldLight,
|
|
210
210
|
createTheme,
|
|
211
211
|
defaultTheme,
|
|
212
|
-
} from '@aurora-
|
|
212
|
+
} from '@aurora-ds/theme'
|
|
213
213
|
|
|
214
214
|
const myTheme = createTheme(defaultTheme, {
|
|
215
215
|
colors: emeraldLight, // Use emerald palette
|
|
@@ -271,7 +271,7 @@ spacing: {
|
|
|
271
271
|
Add custom tokens with full TypeScript support:
|
|
272
272
|
|
|
273
273
|
```tsx
|
|
274
|
-
import type { BaseColors, ExtendTheme } from '@aurora-
|
|
274
|
+
import type { BaseColors, ExtendTheme } from '@aurora-ds/theme'
|
|
275
275
|
|
|
276
276
|
// Extend colors
|
|
277
277
|
type MyColors = BaseColors & {
|
|
@@ -318,7 +318,7 @@ const STYLES = createStyles((theme) => ({
|
|
|
318
318
|
## SSR Support
|
|
319
319
|
|
|
320
320
|
```tsx
|
|
321
|
-
import { getSSRStyles, clearSSRRules } from '@aurora-
|
|
321
|
+
import { getSSRStyles, clearSSRRules } from '@aurora-ds/theme'
|
|
322
322
|
|
|
323
323
|
// Server-side
|
|
324
324
|
const html = renderToString(<App />)
|
|
@@ -388,3 +388,5 @@ Interested in contributing? Check out the [Developer Guide](./README.dev.md) for
|
|
|
388
388
|
|
|
389
389
|
MIT
|
|
390
390
|
|
|
391
|
+
|
|
392
|
+
|