@impulse-ui-native/theme 2.0.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.md +53 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# @impulse-ui-native/theme
|
|
2
|
+
|
|
3
|
+
The token system, light and dark themes, theme provider, and styling hooks for Impulse UI Native.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
pnpm add @impulse-ui-native/theme
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Wrap themed components with `ThemeProvider` near the root of the application.
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { ThemeProvider } from "@impulse-ui-native/theme";
|
|
15
|
+
|
|
16
|
+
export function App() {
|
|
17
|
+
return <ThemeProvider scheme="light">{/* application */}</ThemeProvider>;
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Main exports
|
|
22
|
+
|
|
23
|
+
- `ThemeProvider` installs the current theme and accepts `light` and `dark` token overrides.
|
|
24
|
+
- `LightTheme` and `DarkTheme` provide the default primitive themes.
|
|
25
|
+
- `useTheme` returns the complete `AppTheme`.
|
|
26
|
+
- `useColors`, `useSpace`, `useBorder`, and `useRadii` read focused token groups.
|
|
27
|
+
- `useComponentsTokens` reads component-level tokens.
|
|
28
|
+
- `useThemedStyles` creates memoized React Native styles from the active theme.
|
|
29
|
+
- `useStyleProps` and `extractStyleProps` convert supported system props into styles.
|
|
30
|
+
- Primitive token constants include `SpaceTokens`, `BorderSizeTokens`, `RadiiTokens`, `FontSizeTokens`, `LineHeightTokens`, `FontWeightTokens`, and the color scales.
|
|
31
|
+
- Public types cover colors, spacing, dimensions, flex, typography, shadows, component variants, theme extension, and every component-token group.
|
|
32
|
+
|
|
33
|
+
## Customizing tokens
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<ThemeProvider
|
|
37
|
+
scheme="light"
|
|
38
|
+
theme={{
|
|
39
|
+
light: {
|
|
40
|
+
colors: {
|
|
41
|
+
primary: {
|
|
42
|
+
value: "#5b4bff",
|
|
43
|
+
contrast: "#ffffff",
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
{/* application */}
|
|
50
|
+
</ThemeProvider>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Theme overrides are deep partials, so only the tokens you want to change need to be supplied.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/theme",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.mts",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"LICENSE"
|
|
19
19
|
],
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@impulse-ui-native/core": "2.0.
|
|
21
|
+
"@impulse-ui-native/core": "2.0.1"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@types/react": "~19.2.14",
|