@duro-app/ui 0.34.10 → 0.35.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/dist/components/ThemeProvider/ThemeProvider.d.ts +1 -1
- package/dist/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +1124 -1114
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ThemeProvider/ThemeProvider.tsx +13 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@duro-app/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
}
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"@duro-app/tokens": "^0.
|
|
57
|
+
"@duro-app/tokens": "^0.35.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@babel/preset-typescript": "^7.28.0",
|
|
@@ -3,17 +3,27 @@ import {css, html} from 'react-strict-dom'
|
|
|
3
3
|
import {colors} from '@duro-app/tokens/tokens/colors.css'
|
|
4
4
|
import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
|
|
5
5
|
import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
|
|
6
|
+
import {
|
|
7
|
+
landscapeTheme,
|
|
8
|
+
landscapeShadows,
|
|
9
|
+
landscapeTypography,
|
|
10
|
+
} from '@duro-app/tokens/themes/landscape.css'
|
|
6
11
|
|
|
7
|
-
export type ThemeName = 'dark' | 'light' | 'high-contrast'
|
|
12
|
+
export type ThemeName = 'dark' | 'light' | 'high-contrast' | 'landscape'
|
|
8
13
|
|
|
9
14
|
interface ThemeProviderProps {
|
|
10
15
|
theme?: ThemeName
|
|
11
16
|
children: ReactNode
|
|
12
17
|
}
|
|
13
18
|
|
|
14
|
-
|
|
19
|
+
// A theme is a list of createTheme() overrides (colors + shadows, and
|
|
20
|
+
// optionally typography — e.g. landscape carries its editorial font stack).
|
|
21
|
+
// Loosely typed: each entry themes a DIFFERENT VarGroup (colors / shadows /
|
|
22
|
+
// typography), and the array is cast to the style prop's type at the use site.
|
|
23
|
+
const themeMap: Partial<Record<ThemeName, readonly unknown[]>> = {
|
|
15
24
|
light: [lightTheme, lightShadows],
|
|
16
25
|
'high-contrast': [highContrastTheme, highContrastShadows],
|
|
26
|
+
landscape: [landscapeTheme, landscapeShadows, landscapeTypography],
|
|
17
27
|
}
|
|
18
28
|
|
|
19
29
|
const styles = css.create({
|
|
@@ -49,7 +59,7 @@ export function usePortalMount(): HTMLElement | null {
|
|
|
49
59
|
|
|
50
60
|
export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
|
|
51
61
|
const overrides = themeMap[theme]
|
|
52
|
-
const themeStyles = [overrides
|
|
62
|
+
const themeStyles = [...(overrides ?? []), styles.root] as DivStyle
|
|
53
63
|
const [mount, setMount] = useState<HTMLElement | null>(null)
|
|
54
64
|
|
|
55
65
|
return (
|