@mongrov/theme 0.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/LICENSE +21 -0
- package/README.md +111 -0
- package/dist/color-scheme-store.d.ts +11 -0
- package/dist/color-scheme-store.d.ts.map +1 -0
- package/dist/color-scheme-store.js +34 -0
- package/dist/color-scheme-store.js.map +1 -0
- package/dist/color-scheme.d.ts +15 -0
- package/dist/color-scheme.d.ts.map +1 -0
- package/dist/color-scheme.js +34 -0
- package/dist/color-scheme.js.map +1 -0
- package/dist/create-theme.d.ts +3 -0
- package/dist/create-theme.d.ts.map +1 -0
- package/dist/create-theme.js +34 -0
- package/dist/create-theme.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +7 -0
- package/dist/index.js.map +1 -0
- package/dist/theme-provider.d.ts +14 -0
- package/dist/theme-provider.d.ts.map +1 -0
- package/dist/theme-provider.js +42 -0
- package/dist/theme-provider.js.map +1 -0
- package/dist/tokens/colors.d.ts +4 -0
- package/dist/tokens/colors.d.ts.map +1 -0
- package/dist/tokens/colors.js +43 -0
- package/dist/tokens/colors.js.map +1 -0
- package/dist/tokens/defaults.d.ts +4 -0
- package/dist/tokens/defaults.d.ts.map +1 -0
- package/dist/tokens/defaults.js +17 -0
- package/dist/tokens/defaults.js.map +1 -0
- package/dist/tokens/index.d.ts +2 -0
- package/dist/tokens/index.d.ts.map +1 -0
- package/dist/tokens/index.js +2 -0
- package/dist/tokens/index.js.map +1 -0
- package/dist/tokens/radii.d.ts +3 -0
- package/dist/tokens/radii.d.ts.map +1 -0
- package/dist/tokens/radii.js +9 -0
- package/dist/tokens/radii.js.map +1 -0
- package/dist/tokens/spacing.d.ts +3 -0
- package/dist/tokens/spacing.d.ts.map +1 -0
- package/dist/tokens/spacing.js +10 -0
- package/dist/tokens/spacing.js.map +1 -0
- package/dist/tokens/typography.d.ts +3 -0
- package/dist/tokens/typography.d.ts.map +1 -0
- package/dist/tokens/typography.js +24 -0
- package/dist/tokens/typography.js.map +1 -0
- package/dist/types.d.ts +93 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +66 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 Mongrov
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# @mongrov/theme
|
|
2
|
+
|
|
3
|
+
Theme contract and color scheme management for React Native / Expo apps.
|
|
4
|
+
|
|
5
|
+
Provides a `createTheme` factory, `ThemeProvider` context, and `useColorScheme` hook with persistent light/dark/system preference via Zustand + MMKV.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @mongrov/theme
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer dependencies
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add react react-native zustand react-native-mmkv
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
`react-native-mmkv` is optional — if unavailable, color scheme preference is stored in memory only.
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { createTheme, ThemeProvider, useTheme } from '@mongrov/theme'
|
|
25
|
+
|
|
26
|
+
// 1. Create theme with optional brand overrides
|
|
27
|
+
const appTheme = createTheme({
|
|
28
|
+
overrides: {
|
|
29
|
+
light: { colors: { primary: '#2563EB' } },
|
|
30
|
+
dark: { colors: { primary: '#60A5FA' } },
|
|
31
|
+
},
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
// 2. Wrap your app
|
|
35
|
+
export default function App() {
|
|
36
|
+
return (
|
|
37
|
+
<ThemeProvider theme={appTheme}>
|
|
38
|
+
<MyScreen />
|
|
39
|
+
</ThemeProvider>
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// 3. Use tokens in components
|
|
44
|
+
function MyScreen() {
|
|
45
|
+
const { tokens, isDark } = useTheme()
|
|
46
|
+
return (
|
|
47
|
+
<View style={{ backgroundColor: tokens.colors.background }}>
|
|
48
|
+
<Text style={{ color: tokens.colors.foreground }}>
|
|
49
|
+
{isDark ? 'Dark mode' : 'Light mode'}
|
|
50
|
+
</Text>
|
|
51
|
+
</View>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Color Scheme
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { useColorScheme } from '@mongrov/theme'
|
|
60
|
+
|
|
61
|
+
function Settings() {
|
|
62
|
+
const { colorScheme, setColorScheme, isDark } = useColorScheme()
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<>
|
|
66
|
+
<Button onPress={() => setColorScheme('light')} title="Light" />
|
|
67
|
+
<Button onPress={() => setColorScheme('dark')} title="Dark" />
|
|
68
|
+
<Button onPress={() => setColorScheme('system')} title="System" />
|
|
69
|
+
</>
|
|
70
|
+
)
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Preference is persisted to MMKV and restored on next app launch.
|
|
75
|
+
|
|
76
|
+
## API
|
|
77
|
+
|
|
78
|
+
### `createTheme(config?)`
|
|
79
|
+
|
|
80
|
+
Creates a `ThemeContract` with light and dark token sets. Overrides are deep-merged onto defaults.
|
|
81
|
+
|
|
82
|
+
### `<ThemeProvider theme={...} config?>`
|
|
83
|
+
|
|
84
|
+
Provides resolved theme via React context. Resolves `system` preference using `Appearance.getColorScheme()`.
|
|
85
|
+
|
|
86
|
+
### `useTheme()`
|
|
87
|
+
|
|
88
|
+
Returns `{ tokens, colorScheme, isDark }`. Must be used within `ThemeProvider`.
|
|
89
|
+
|
|
90
|
+
### `useColorScheme()`
|
|
91
|
+
|
|
92
|
+
Returns `{ colorScheme, resolvedScheme, setColorScheme, isDark }`. Must be used within `ThemeProvider`.
|
|
93
|
+
|
|
94
|
+
### `defaultLightTokens` / `defaultDarkTokens`
|
|
95
|
+
|
|
96
|
+
Exported default token sets for reference or extension.
|
|
97
|
+
|
|
98
|
+
## Token Structure
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
ThemeTokens = {
|
|
102
|
+
colors: ColorTokens (19 semantic keys)
|
|
103
|
+
spacing: SpacingTokens (xs → 3xl)
|
|
104
|
+
typography: TypographyTokens (fontFamily, fontSize, lineHeight)
|
|
105
|
+
radii: RadiiTokens (none → full)
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## License
|
|
110
|
+
|
|
111
|
+
MIT
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ColorScheme } from './types';
|
|
2
|
+
interface ColorSchemeState {
|
|
3
|
+
colorScheme: ColorScheme;
|
|
4
|
+
setColorScheme: (scheme: ColorScheme) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare function createColorSchemeStore(options?: {
|
|
7
|
+
defaultColorScheme?: ColorScheme;
|
|
8
|
+
storageKey?: string;
|
|
9
|
+
}): import("zustand").StoreApi<ColorSchemeState>;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=color-scheme-store.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-scheme-store.d.ts","sourceRoot":"","sources":["../src/color-scheme-store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAI1C,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAA;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CAC9C;AAiBD,wBAAgB,sBAAsB,CAAC,OAAO,CAAC,EAAE;IAC/C,kBAAkB,CAAC,EAAE,WAAW,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,gDAuBA"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { createStore } from 'zustand/vanilla';
|
|
2
|
+
const DEFAULT_STORAGE_KEY = '@mongrov/color-scheme';
|
|
3
|
+
function getMMKVStorage() {
|
|
4
|
+
try {
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
6
|
+
const { MMKV } = require('react-native-mmkv');
|
|
7
|
+
return new MMKV();
|
|
8
|
+
}
|
|
9
|
+
catch {
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
export function createColorSchemeStore(options) {
|
|
14
|
+
const storageKey = options?.storageKey ?? DEFAULT_STORAGE_KEY;
|
|
15
|
+
const defaultScheme = options?.defaultColorScheme ?? 'system';
|
|
16
|
+
const storage = getMMKVStorage();
|
|
17
|
+
// Load persisted value
|
|
18
|
+
let initial = defaultScheme;
|
|
19
|
+
if (storage) {
|
|
20
|
+
const persisted = storage.getString(storageKey);
|
|
21
|
+
if (persisted === 'light' || persisted === 'dark' || persisted === 'system') {
|
|
22
|
+
initial = persisted;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
const store = createStore((set) => ({
|
|
26
|
+
colorScheme: initial,
|
|
27
|
+
setColorScheme: (scheme) => {
|
|
28
|
+
storage?.set(storageKey, scheme);
|
|
29
|
+
set({ colorScheme: scheme });
|
|
30
|
+
},
|
|
31
|
+
}));
|
|
32
|
+
return store;
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=color-scheme-store.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-scheme-store.js","sourceRoot":"","sources":["../src/color-scheme-store.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,MAAM,mBAAmB,GAAG,uBAAuB,CAAA;AAYnD,SAAS,cAAc;IACrB,IAAI,CAAC;QACH,iEAAiE;QACjE,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,mBAAmB,CAAuC,CAAA;QACnF,OAAO,IAAI,IAAI,EAAE,CAAA;IACnB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAA;IACb,CAAC;AACH,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,OAGtC;IACC,MAAM,UAAU,GAAG,OAAO,EAAE,UAAU,IAAI,mBAAmB,CAAA;IAC7D,MAAM,aAAa,GAAG,OAAO,EAAE,kBAAkB,IAAI,QAAQ,CAAA;IAC7D,MAAM,OAAO,GAAG,cAAc,EAAE,CAAA;IAEhC,uBAAuB;IACvB,IAAI,OAAO,GAAG,aAAa,CAAA;IAC3B,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,UAAU,CAAC,CAAA;QAC/C,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,QAAQ,EAAE,CAAC;YAC5E,OAAO,GAAG,SAAS,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,KAAK,GAAG,WAAW,CAAmB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QACpD,WAAW,EAAE,OAAO;QACpB,cAAc,EAAE,CAAC,MAAmB,EAAE,EAAE;YACtC,OAAO,EAAE,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;YAChC,GAAG,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAA;QAC9B,CAAC;KACF,CAAC,CAAC,CAAA;IAEH,OAAO,KAAK,CAAA;AACd,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { StoreApi } from 'zustand/vanilla';
|
|
2
|
+
import type { ColorScheme } from './types';
|
|
3
|
+
interface ColorSchemeState {
|
|
4
|
+
colorScheme: ColorScheme;
|
|
5
|
+
setColorScheme: (scheme: ColorScheme) => void;
|
|
6
|
+
}
|
|
7
|
+
declare function resolveScheme(preference: ColorScheme): 'light' | 'dark';
|
|
8
|
+
export declare function createUseColorScheme(store: StoreApi<ColorSchemeState>): () => {
|
|
9
|
+
colorScheme: ColorScheme;
|
|
10
|
+
resolvedScheme: "light" | "dark";
|
|
11
|
+
setColorScheme: (scheme: ColorScheme) => void;
|
|
12
|
+
isDark: boolean;
|
|
13
|
+
};
|
|
14
|
+
export { resolveScheme };
|
|
15
|
+
//# sourceMappingURL=color-scheme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-scheme.d.ts","sourceRoot":"","sources":["../src/color-scheme.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C,UAAU,gBAAgB;IACxB,WAAW,EAAE,WAAW,CAAA;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CAC9C;AAED,iBAAS,aAAa,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,GAAG,MAAM,CAKhE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC;;;6BAV3C,WAAW,KAAK,IAAI;;EAqC9C;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
import { Appearance } from 'react-native';
|
|
3
|
+
import { useStore } from 'zustand';
|
|
4
|
+
function resolveScheme(preference) {
|
|
5
|
+
if (preference === 'system') {
|
|
6
|
+
return Appearance.getColorScheme() ?? 'light';
|
|
7
|
+
}
|
|
8
|
+
return preference;
|
|
9
|
+
}
|
|
10
|
+
export function createUseColorScheme(store) {
|
|
11
|
+
return function useColorScheme() {
|
|
12
|
+
const colorScheme = useStore(store, (s) => s.colorScheme);
|
|
13
|
+
const setColorScheme = useStore(store, (s) => s.setColorScheme);
|
|
14
|
+
const [systemScheme, setSystemScheme] = useState(() => Appearance.getColorScheme() ?? 'light');
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
if (colorScheme !== 'system')
|
|
17
|
+
return;
|
|
18
|
+
const subscription = Appearance.addChangeListener(({ colorScheme: newScheme }) => {
|
|
19
|
+
setSystemScheme(newScheme ?? 'light');
|
|
20
|
+
});
|
|
21
|
+
return () => subscription.remove();
|
|
22
|
+
}, [colorScheme]);
|
|
23
|
+
const resolvedScheme = colorScheme === 'system' ? systemScheme : colorScheme;
|
|
24
|
+
return {
|
|
25
|
+
colorScheme,
|
|
26
|
+
resolvedScheme,
|
|
27
|
+
setColorScheme,
|
|
28
|
+
isDark: resolvedScheme === 'dark',
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
// Non-hook utility for resolving outside React
|
|
33
|
+
export { resolveScheme };
|
|
34
|
+
//# sourceMappingURL=color-scheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"color-scheme.js","sourceRoot":"","sources":["../src/color-scheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AASlC,SAAS,aAAa,CAAC,UAAuB;IAC5C,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;QAC5B,OAAO,UAAU,CAAC,cAAc,EAAE,IAAI,OAAO,CAAA;IAC/C,CAAC;IACD,OAAO,UAAU,CAAA;AACnB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAAiC;IACpE,OAAO,SAAS,cAAc;QAC5B,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAA;QACzD,MAAM,cAAc,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAA;QAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,EAAE,IAAI,OAAO,CAC7C,CAAA;QAED,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,WAAW,KAAK,QAAQ;gBAAE,OAAM;YAEpC,MAAM,YAAY,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC/E,eAAe,CAAC,SAAS,IAAI,OAAO,CAAC,CAAA;YACvC,CAAC,CAAC,CAAA;YACF,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,CAAA;QACpC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;QAEjB,MAAM,cAAc,GAClB,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAA;QAEvD,OAAO;YACL,WAAW;YACX,cAAc;YACd,cAAc;YACd,MAAM,EAAE,cAAc,KAAK,MAAM;SAClC,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAED,+CAA+C;AAC/C,OAAO,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-theme.d.ts","sourceRoot":"","sources":["../src/create-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,WAAW,EAAE,aAAa,EAAe,MAAM,SAAS,CAAA;AAkCnF,wBAAgB,WAAW,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,aAAa,CAY/D"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { defaultDarkTokens, defaultLightTokens } from './tokens';
|
|
2
|
+
function isPlainObject(value) {
|
|
3
|
+
return typeof value === 'object' && value !== null && !Array.isArray(value);
|
|
4
|
+
}
|
|
5
|
+
function deepMerge(base, overrides) {
|
|
6
|
+
const result = { ...base };
|
|
7
|
+
for (const key of Object.keys(overrides)) {
|
|
8
|
+
const baseVal = base[key];
|
|
9
|
+
const overrideVal = overrides[key];
|
|
10
|
+
if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {
|
|
11
|
+
result[key] = deepMerge(baseVal, overrideVal);
|
|
12
|
+
}
|
|
13
|
+
else if (overrideVal !== undefined) {
|
|
14
|
+
result[key] = overrideVal;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return result;
|
|
18
|
+
}
|
|
19
|
+
function mergeTokens(defaults, overrides) {
|
|
20
|
+
return deepMerge(defaults, overrides);
|
|
21
|
+
}
|
|
22
|
+
export function createTheme(config) {
|
|
23
|
+
const lightOverrides = config?.overrides?.light;
|
|
24
|
+
const darkOverrides = config?.overrides?.dark;
|
|
25
|
+
return {
|
|
26
|
+
light: lightOverrides
|
|
27
|
+
? mergeTokens(defaultLightTokens, lightOverrides)
|
|
28
|
+
: defaultLightTokens,
|
|
29
|
+
dark: darkOverrides
|
|
30
|
+
? mergeTokens(defaultDarkTokens, darkOverrides)
|
|
31
|
+
: defaultDarkTokens,
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=create-theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-theme.js","sourceRoot":"","sources":["../src/create-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAEhE,SAAS,aAAa,CAAC,KAAc;IACnC,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;AAC7E,CAAC;AAED,SAAS,SAAS,CAChB,IAA6B,EAC7B,SAAkC;IAElC,MAAM,MAAM,GAA4B,EAAE,GAAG,IAAI,EAAE,CAAA;IACnD,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC;QACzC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAA;QACzB,MAAM,WAAW,GAAG,SAAS,CAAC,GAAG,CAAC,CAAA;QAClC,IAAI,aAAa,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,WAAW,CAAC,EAAE,CAAC;YACzD,MAAM,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,CAAA;QAC/C,CAAC;aAAM,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YACrC,MAAM,CAAC,GAAG,CAAC,GAAG,WAAW,CAAA;QAC3B,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,SAAS,WAAW,CAClB,QAAqB,EACrB,SAAmC;IAEnC,OAAO,SAAS,CACd,QAA8C,EAC9C,SAA+C,CACtB,CAAA;AAC7B,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,MAAoB;IAC9C,MAAM,cAAc,GAAG,MAAM,EAAE,SAAS,EAAE,KAAK,CAAA;IAC/C,MAAM,aAAa,GAAG,MAAM,EAAE,SAAS,EAAE,IAAI,CAAA;IAE7C,OAAO;QACL,KAAK,EAAE,cAAc;YACnB,CAAC,CAAC,WAAW,CAAC,kBAAkB,EAAE,cAAc,CAAC;YACjD,CAAC,CAAC,kBAAkB;QACtB,IAAI,EAAE,aAAa;YACjB,CAAC,CAAC,WAAW,CAAC,iBAAiB,EAAE,aAAa,CAAC;YAC/C,CAAC,CAAC,iBAAiB;KACtB,CAAA;AACH,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { createTheme } from './create-theme';
|
|
2
|
+
export { ThemeProvider, useTheme, useColorScheme } from './theme-provider';
|
|
3
|
+
export { defaultLightTokens, defaultDarkTokens } from './tokens';
|
|
4
|
+
export type { ThemeContract, ThemeConfig, ThemeTokens, Theme, ColorScheme, ColorTokens, SpacingTokens, TypographyTokens, RadiiTokens, DeepPartial, } from './types';
|
|
5
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAG1E,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAGhE,YAAY,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,KAAK,EACL,WAAW,EACX,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,WAAW,GACZ,MAAM,SAAS,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,UAAU;AACV,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAE1E,SAAS;AACT,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Theme, ThemeConfig, ThemeContract } from './types';
|
|
2
|
+
export declare function ThemeProvider(props: {
|
|
3
|
+
theme: ThemeContract;
|
|
4
|
+
config?: ThemeConfig;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function useTheme(): Theme;
|
|
8
|
+
export declare function useColorScheme(): {
|
|
9
|
+
colorScheme: import("./types").ColorScheme;
|
|
10
|
+
resolvedScheme: "light" | "dark";
|
|
11
|
+
setColorScheme: (scheme: import("./types").ColorScheme) => void;
|
|
12
|
+
isDark: boolean;
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=theme-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAShE,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,KAAK,EAAE,aAAa,CAAA;IACpB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,2CA4BA;AAED,wBAAgB,QAAQ,IAAI,KAAK,CAMhC;AAED,wBAAgB,cAAc;;;;;EAK7B"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useMemo } from 'react';
|
|
3
|
+
import { createColorSchemeStore } from './color-scheme-store';
|
|
4
|
+
import { createUseColorScheme } from './color-scheme';
|
|
5
|
+
const ThemeContext = createContext(null);
|
|
6
|
+
let sharedStore = null;
|
|
7
|
+
let sharedUseColorScheme = null;
|
|
8
|
+
export function ThemeProvider(props) {
|
|
9
|
+
const { theme, config, children } = props;
|
|
10
|
+
// Create store once per provider mount
|
|
11
|
+
const store = useMemo(() => {
|
|
12
|
+
const s = createColorSchemeStore({
|
|
13
|
+
defaultColorScheme: config?.defaultColorScheme,
|
|
14
|
+
storageKey: config?.storageKey,
|
|
15
|
+
});
|
|
16
|
+
sharedStore = s;
|
|
17
|
+
sharedUseColorScheme = createUseColorScheme(s);
|
|
18
|
+
return s;
|
|
19
|
+
}, [config?.defaultColorScheme, config?.storageKey]);
|
|
20
|
+
// Resolve the current scheme reactively
|
|
21
|
+
const hookResult = sharedUseColorScheme();
|
|
22
|
+
const value = useMemo(() => ({
|
|
23
|
+
tokens: hookResult.resolvedScheme === 'dark' ? theme.dark : theme.light,
|
|
24
|
+
colorScheme: hookResult.resolvedScheme,
|
|
25
|
+
isDark: hookResult.isDark,
|
|
26
|
+
}), [theme, hookResult.resolvedScheme, hookResult.isDark]);
|
|
27
|
+
return (_jsx(ThemeContext.Provider, { value: value, children: children }));
|
|
28
|
+
}
|
|
29
|
+
export function useTheme() {
|
|
30
|
+
const theme = useContext(ThemeContext);
|
|
31
|
+
if (!theme) {
|
|
32
|
+
throw new Error('useTheme must be used within a ThemeProvider');
|
|
33
|
+
}
|
|
34
|
+
return theme;
|
|
35
|
+
}
|
|
36
|
+
export function useColorScheme() {
|
|
37
|
+
if (!sharedUseColorScheme) {
|
|
38
|
+
throw new Error('useColorScheme must be used within a ThemeProvider');
|
|
39
|
+
}
|
|
40
|
+
return sharedUseColorScheme();
|
|
41
|
+
}
|
|
42
|
+
//# sourceMappingURL=theme-provider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-provider.js","sourceRoot":"","sources":["../src/theme-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAiB,MAAM,gBAAgB,CAAA;AAEpE,MAAM,YAAY,GAAG,aAAa,CAAe,IAAI,CAAC,CAAA;AAEtD,IAAI,WAAW,GAAqD,IAAI,CAAA;AACxE,IAAI,oBAAoB,GAAmD,IAAI,CAAA;AAE/E,MAAM,UAAU,aAAa,CAAC,KAI7B;IACC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAEzC,uCAAuC;IACvC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,CAAC,GAAG,sBAAsB,CAAC;YAC/B,kBAAkB,EAAE,MAAM,EAAE,kBAAkB;YAC9C,UAAU,EAAE,MAAM,EAAE,UAAU;SAC/B,CAAC,CAAA;QACF,WAAW,GAAG,CAAC,CAAA;QACf,oBAAoB,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;QAC9C,OAAO,CAAC,CAAA;IACV,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAA;IAEpD,wCAAwC;IACxC,MAAM,UAAU,GAAG,oBAAqB,EAAE,CAAA;IAE1C,MAAM,KAAK,GAAG,OAAO,CAAQ,GAAG,EAAE,CAAC,CAAC;QAClC,MAAM,EAAE,UAAU,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;QACvE,WAAW,EAAE,UAAU,CAAC,cAAc;QACtC,MAAM,EAAE,UAAU,CAAC,MAAM;KAC1B,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,CAAA;IAE1D,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAChC,QAAQ,GACa,CACzB,CAAA;AACH,CAAC;AAED,MAAM,UAAU,QAAQ;IACtB,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAA;IACtC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;IACjE,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAA;IACvE,CAAC;IACD,OAAO,oBAAoB,EAAE,CAAA;AAC/B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,eAAO,MAAM,kBAAkB,EAAE,WAoBhC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,WAoB/B,CAAA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export const defaultLightColors = {
|
|
2
|
+
primary: '#2563EB',
|
|
3
|
+
primaryForeground: '#FFFFFF',
|
|
4
|
+
secondary: '#F1F5F9',
|
|
5
|
+
secondaryForeground: '#0F172A',
|
|
6
|
+
background: '#FFFFFF',
|
|
7
|
+
foreground: '#0F172A',
|
|
8
|
+
card: '#FFFFFF',
|
|
9
|
+
cardForeground: '#0F172A',
|
|
10
|
+
border: '#E2E8F0',
|
|
11
|
+
input: '#E2E8F0',
|
|
12
|
+
muted: '#F1F5F9',
|
|
13
|
+
mutedForeground: '#64748B',
|
|
14
|
+
destructive: '#EF4444',
|
|
15
|
+
destructiveForeground: '#FFFFFF',
|
|
16
|
+
success: '#22C55E',
|
|
17
|
+
successForeground: '#FFFFFF',
|
|
18
|
+
warning: '#F59E0B',
|
|
19
|
+
warningForeground: '#FFFFFF',
|
|
20
|
+
ring: '#2563EB',
|
|
21
|
+
};
|
|
22
|
+
export const defaultDarkColors = {
|
|
23
|
+
primary: '#60A5FA',
|
|
24
|
+
primaryForeground: '#1E1E1E',
|
|
25
|
+
secondary: '#1E293B',
|
|
26
|
+
secondaryForeground: '#F8FAFC',
|
|
27
|
+
background: '#0F172A',
|
|
28
|
+
foreground: '#F8FAFC',
|
|
29
|
+
card: '#1E293B',
|
|
30
|
+
cardForeground: '#F8FAFC',
|
|
31
|
+
border: '#334155',
|
|
32
|
+
input: '#334155',
|
|
33
|
+
muted: '#1E293B',
|
|
34
|
+
mutedForeground: '#94A3B8',
|
|
35
|
+
destructive: '#F87171',
|
|
36
|
+
destructiveForeground: '#1E1E1E',
|
|
37
|
+
success: '#4ADE80',
|
|
38
|
+
successForeground: '#1E1E1E',
|
|
39
|
+
warning: '#FBBF24',
|
|
40
|
+
warningForeground: '#1E1E1E',
|
|
41
|
+
ring: '#60A5FA',
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=colors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAgB;IAC7C,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,SAAS;IACpB,mBAAmB,EAAE,SAAS;IAC9B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,qBAAqB,EAAE,SAAS;IAChC,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,IAAI,EAAE,SAAS;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,SAAS,EAAE,SAAS;IACpB,mBAAmB,EAAE,SAAS;IAC9B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,qBAAqB,EAAE,SAAS;IAChC,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,IAAI,EAAE,SAAS;CAChB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/tokens/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM3C,eAAO,MAAM,kBAAkB,EAAE,WAKhC,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,WAK/B,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { defaultDarkColors, defaultLightColors } from './colors';
|
|
2
|
+
import { defaultRadii } from './radii';
|
|
3
|
+
import { defaultSpacing } from './spacing';
|
|
4
|
+
import { defaultTypography } from './typography';
|
|
5
|
+
export const defaultLightTokens = {
|
|
6
|
+
colors: defaultLightColors,
|
|
7
|
+
spacing: defaultSpacing,
|
|
8
|
+
typography: defaultTypography,
|
|
9
|
+
radii: defaultRadii,
|
|
10
|
+
};
|
|
11
|
+
export const defaultDarkTokens = {
|
|
12
|
+
colors: defaultDarkColors,
|
|
13
|
+
spacing: defaultSpacing,
|
|
14
|
+
typography: defaultTypography,
|
|
15
|
+
radii: defaultRadii,
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=defaults.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../src/tokens/defaults.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD,MAAM,CAAC,MAAM,kBAAkB,GAAgB;IAC7C,MAAM,EAAE,kBAAkB;IAC1B,OAAO,EAAE,cAAc;IACvB,UAAU,EAAE,iBAAiB;IAC7B,KAAK,EAAE,YAAY;CACpB,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC5C,MAAM,EAAE,iBAAiB;IACzB,OAAO,EAAE,cAAc;IACvB,UAAU,EAAE,iBAAiB;IAC7B,KAAK,EAAE,YAAY;CACpB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../../src/tokens/radii.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,eAAO,MAAM,YAAY,EAAE,WAO1B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radii.js","sourceRoot":"","sources":["../../src/tokens/radii.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAgB;IACvC,IAAI,EAAE,CAAC;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,IAAI;CACX,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../src/tokens/spacing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAE7C,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../../src/tokens/spacing.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAkB;IAC3C,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;CACV,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEhD,eAAO,MAAM,iBAAiB,EAAE,gBAsB/B,CAAA"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export const defaultTypography = {
|
|
2
|
+
fontFamily: {
|
|
3
|
+
regular: 'Inter_400Regular',
|
|
4
|
+
medium: 'Inter_500Medium',
|
|
5
|
+
semibold: 'Inter_600SemiBold',
|
|
6
|
+
bold: 'Inter_700Bold',
|
|
7
|
+
},
|
|
8
|
+
fontSize: {
|
|
9
|
+
xs: 12,
|
|
10
|
+
sm: 14,
|
|
11
|
+
base: 16,
|
|
12
|
+
lg: 18,
|
|
13
|
+
xl: 20,
|
|
14
|
+
'2xl': 24,
|
|
15
|
+
'3xl': 30,
|
|
16
|
+
'4xl': 36,
|
|
17
|
+
},
|
|
18
|
+
lineHeight: {
|
|
19
|
+
tight: 1.25,
|
|
20
|
+
normal: 1.5,
|
|
21
|
+
relaxed: 1.75,
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=typography.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/tokens/typography.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAqB;IACjD,UAAU,EAAE;QACV,OAAO,EAAE,kBAAkB;QAC3B,MAAM,EAAE,iBAAiB;QACzB,QAAQ,EAAE,mBAAmB;QAC7B,IAAI,EAAE,eAAe;KACtB;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,IAAI,EAAE,EAAE;QACR,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,EAAE;KACV;IACD,UAAU,EAAE;QACV,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,GAAG;QACX,OAAO,EAAE,IAAI;KACd;CACF,CAAA"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
export type ColorScheme = 'light' | 'dark' | 'system';
|
|
2
|
+
export interface ColorTokens {
|
|
3
|
+
primary: string;
|
|
4
|
+
primaryForeground: string;
|
|
5
|
+
secondary: string;
|
|
6
|
+
secondaryForeground: string;
|
|
7
|
+
background: string;
|
|
8
|
+
foreground: string;
|
|
9
|
+
card: string;
|
|
10
|
+
cardForeground: string;
|
|
11
|
+
border: string;
|
|
12
|
+
input: string;
|
|
13
|
+
muted: string;
|
|
14
|
+
mutedForeground: string;
|
|
15
|
+
destructive: string;
|
|
16
|
+
destructiveForeground: string;
|
|
17
|
+
success: string;
|
|
18
|
+
successForeground: string;
|
|
19
|
+
warning: string;
|
|
20
|
+
warningForeground: string;
|
|
21
|
+
ring: string;
|
|
22
|
+
}
|
|
23
|
+
export interface SpacingTokens {
|
|
24
|
+
xs: number;
|
|
25
|
+
sm: number;
|
|
26
|
+
md: number;
|
|
27
|
+
lg: number;
|
|
28
|
+
xl: number;
|
|
29
|
+
'2xl': number;
|
|
30
|
+
'3xl': number;
|
|
31
|
+
}
|
|
32
|
+
export interface TypographyTokens {
|
|
33
|
+
fontFamily: {
|
|
34
|
+
regular: string;
|
|
35
|
+
medium: string;
|
|
36
|
+
semibold: string;
|
|
37
|
+
bold: string;
|
|
38
|
+
};
|
|
39
|
+
fontSize: {
|
|
40
|
+
xs: number;
|
|
41
|
+
sm: number;
|
|
42
|
+
base: number;
|
|
43
|
+
lg: number;
|
|
44
|
+
xl: number;
|
|
45
|
+
'2xl': number;
|
|
46
|
+
'3xl': number;
|
|
47
|
+
'4xl': number;
|
|
48
|
+
};
|
|
49
|
+
lineHeight: {
|
|
50
|
+
tight: number;
|
|
51
|
+
normal: number;
|
|
52
|
+
relaxed: number;
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
export interface RadiiTokens {
|
|
56
|
+
none: number;
|
|
57
|
+
sm: number;
|
|
58
|
+
md: number;
|
|
59
|
+
lg: number;
|
|
60
|
+
xl: number;
|
|
61
|
+
full: number;
|
|
62
|
+
}
|
|
63
|
+
export interface ThemeTokens {
|
|
64
|
+
colors: ColorTokens;
|
|
65
|
+
spacing: SpacingTokens;
|
|
66
|
+
typography: TypographyTokens;
|
|
67
|
+
radii: RadiiTokens;
|
|
68
|
+
}
|
|
69
|
+
export interface ThemeContract {
|
|
70
|
+
light: ThemeTokens;
|
|
71
|
+
dark: ThemeTokens;
|
|
72
|
+
}
|
|
73
|
+
export interface ThemeConfig {
|
|
74
|
+
/** Override default tokens per scheme */
|
|
75
|
+
overrides?: {
|
|
76
|
+
light?: DeepPartial<ThemeTokens>;
|
|
77
|
+
dark?: DeepPartial<ThemeTokens>;
|
|
78
|
+
};
|
|
79
|
+
/** Initial color scheme preference. Default: 'system' */
|
|
80
|
+
defaultColorScheme?: ColorScheme;
|
|
81
|
+
/** MMKV storage key for persisting preference. Default: '@mongrov/color-scheme' */
|
|
82
|
+
storageKey?: string;
|
|
83
|
+
}
|
|
84
|
+
/** Resolved theme — what useTheme() returns */
|
|
85
|
+
export interface Theme {
|
|
86
|
+
tokens: ThemeTokens;
|
|
87
|
+
colorScheme: 'light' | 'dark';
|
|
88
|
+
isDark: boolean;
|
|
89
|
+
}
|
|
90
|
+
export type DeepPartial<T> = {
|
|
91
|
+
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
92
|
+
};
|
|
93
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mongrov/theme",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Theme contract and color scheme management for React Native / Expo apps",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/mongrov/mongrov-packages.git",
|
|
9
|
+
"directory": "packages/theme"
|
|
10
|
+
},
|
|
11
|
+
"keywords": [
|
|
12
|
+
"react-native",
|
|
13
|
+
"expo",
|
|
14
|
+
"theme",
|
|
15
|
+
"dark-mode",
|
|
16
|
+
"color-scheme",
|
|
17
|
+
"design-tokens"
|
|
18
|
+
],
|
|
19
|
+
"engines": {
|
|
20
|
+
"node": ">=18"
|
|
21
|
+
},
|
|
22
|
+
"main": "dist/index.js",
|
|
23
|
+
"types": "dist/index.d.ts",
|
|
24
|
+
"exports": {
|
|
25
|
+
".": {
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"import": "./dist/index.js",
|
|
28
|
+
"default": "./dist/index.js"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"dist"
|
|
33
|
+
],
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": ">=18",
|
|
36
|
+
"react-native": ">=0.74",
|
|
37
|
+
"zustand": ">=5",
|
|
38
|
+
"react-native-mmkv": ">=3"
|
|
39
|
+
},
|
|
40
|
+
"peerDependenciesMeta": {
|
|
41
|
+
"react-native-mmkv": {
|
|
42
|
+
"optional": true
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"@testing-library/react": "^14.3.1",
|
|
47
|
+
"@types/jest": "^29.5.12",
|
|
48
|
+
"@types/react": "^18.2.0",
|
|
49
|
+
"jest": "^29.7.0",
|
|
50
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
51
|
+
"react": "^18.2.0",
|
|
52
|
+
"react-dom": "^18.3.1",
|
|
53
|
+
"react-native": "^0.74.0",
|
|
54
|
+
"ts-jest": "^29.1.2",
|
|
55
|
+
"typescript": "^5.9.3",
|
|
56
|
+
"zustand": "^5.0.10"
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"build": "tsc -p tsconfig.build.json",
|
|
60
|
+
"clean": "rm -rf dist",
|
|
61
|
+
"prebuild": "pnpm run clean",
|
|
62
|
+
"test": "jest --coverage",
|
|
63
|
+
"test:watch": "jest --watch",
|
|
64
|
+
"typecheck": "tsc --noEmit"
|
|
65
|
+
}
|
|
66
|
+
}
|