@ossy/themes 0.10.0 → 0.10.2
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 +60 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# @ossy/themes
|
|
2
|
+
|
|
3
|
+
Theme definitions for the Ossy design system. Provides color palettes, spacing scales, and surface variants used by `@ossy/design-system`.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ossy/themes
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Available themes
|
|
12
|
+
|
|
13
|
+
| Theme | Description |
|
|
14
|
+
|-------|-------------|
|
|
15
|
+
| `CloudLight` | Light theme with cloud-inspired palette |
|
|
16
|
+
| `CloudDark` | Dark theme variant |
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
Use themes with `@ossy/design-system`:
|
|
21
|
+
|
|
22
|
+
```jsx
|
|
23
|
+
import { Theme } from '@ossy/design-system'
|
|
24
|
+
import { CloudLight, CloudDark } from '@ossy/themes'
|
|
25
|
+
|
|
26
|
+
// Single theme
|
|
27
|
+
<Theme theme={CloudLight}>
|
|
28
|
+
<App />
|
|
29
|
+
</Theme>
|
|
30
|
+
|
|
31
|
+
// Multiple themes with switching
|
|
32
|
+
<Theme
|
|
33
|
+
theme={CloudLight}
|
|
34
|
+
themes={{ light: CloudLight, dark: CloudDark }}
|
|
35
|
+
defaultTheme="light"
|
|
36
|
+
>
|
|
37
|
+
<App />
|
|
38
|
+
</Theme>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Custom themes
|
|
42
|
+
|
|
43
|
+
Create custom themes by following the `Theme` interface from `@ossy/types`. Use `normalizeTheme` to ensure your theme has all required fields:
|
|
44
|
+
|
|
45
|
+
```js
|
|
46
|
+
import { normalizeTheme } from '@ossy/themes'
|
|
47
|
+
|
|
48
|
+
const myTheme = normalizeTheme({
|
|
49
|
+
// Your theme overrides
|
|
50
|
+
})
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Related packages
|
|
54
|
+
|
|
55
|
+
- `@ossy/design-system` — React components that consume themes
|
|
56
|
+
- `@ossy/types` — TypeScript `Theme` interface
|
|
57
|
+
|
|
58
|
+
## License
|
|
59
|
+
|
|
60
|
+
MIT
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"url": "git+https://github.com/ossy-se/packages.git"
|
|
6
6
|
},
|
|
7
7
|
"description": "Ossy's design system themes",
|
|
8
|
-
"version": "0.10.
|
|
8
|
+
"version": "0.10.2",
|
|
9
9
|
"source": "src/index.js",
|
|
10
10
|
"module": "build/index.js",
|
|
11
11
|
"type": "module",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"/build",
|
|
44
44
|
"README.md"
|
|
45
45
|
],
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "5c689da5bbcfcdb39a81f7bed613a6559468464a"
|
|
47
47
|
}
|