@lessonkit/themes 1.3.1 → 1.5.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/README.md +22 -4
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -6,6 +6,14 @@
|
|
|
6
6
|
|
|
7
7
|
Design tokens, presets, and CSS variable utilities for LessonKit.
|
|
8
8
|
|
|
9
|
+
## When to install
|
|
10
|
+
|
|
11
|
+
- Custom theme presets beyond `ThemeProvider` defaults
|
|
12
|
+
- Generating `--lk-*` CSS variables for non-React shells
|
|
13
|
+
- Validating theme tokens against `theme-contract.v1.json`
|
|
14
|
+
|
|
15
|
+
`@lessonkit/react` includes `ThemeProvider` and depends on this package.
|
|
16
|
+
|
|
9
17
|
## Install
|
|
10
18
|
|
|
11
19
|
```bash
|
|
@@ -17,21 +25,31 @@ npm install @lessonkit/themes
|
|
|
17
25
|
```typescript
|
|
18
26
|
import { getPresetTheme, mergeThemes, themeToCssVariables } from "@lessonkit/themes";
|
|
19
27
|
|
|
20
|
-
const theme = mergeThemes(getPresetTheme("
|
|
28
|
+
const theme = mergeThemes(getPresetTheme("brand"), {
|
|
29
|
+
colors: { primary: "#0066cc" },
|
|
30
|
+
});
|
|
21
31
|
const vars = themeToCssVariables(theme); // { "--lk-color-primary": "#0066cc", ... }
|
|
22
32
|
```
|
|
23
33
|
|
|
34
|
+
In React courses, prefer `ThemeProvider`:
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { ThemeProvider } from "@lessonkit/react";
|
|
38
|
+
|
|
39
|
+
<ThemeProvider mode="light" preset="brand">
|
|
40
|
+
<Course ... />
|
|
41
|
+
</ThemeProvider>
|
|
42
|
+
```
|
|
43
|
+
|
|
24
44
|
**Presets:** `default`, `light`, `dark`, `brand` via `getPresetTheme()`
|
|
25
45
|
|
|
26
46
|
**Utilities:** `validateTheme()`, `mergeThemes()`, `themeToCssDeclarationBlock()`, `buildThemeCatalog()`
|
|
27
47
|
|
|
28
48
|
**Assets:** `theme-contract.v1.json`, `theme-catalog.v1.json`, `base.css`
|
|
29
49
|
|
|
30
|
-
Pair with `ThemeProvider` from `@lessonkit/react` for runtime theming.
|
|
31
|
-
|
|
32
50
|
## Docs
|
|
33
51
|
|
|
34
|
-
[Theming reference](https://lessonkit.readthedocs.io/en/latest/reference/theming.html)
|
|
52
|
+
[Theming reference](https://lessonkit.readthedocs.io/en/latest/reference/theming.html) · [Theming & accessibility guide](https://lessonkit.readthedocs.io/en/latest/guides/react-developers/theming-and-accessibility.html) · [TypeDoc API index](https://lessonkit.readthedocs.io/en/latest/reference/api.html)
|
|
35
53
|
|
|
36
54
|
## License
|
|
37
55
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lessonkit/themes",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Theme primitives and tokens for LessonKit.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,11 +45,11 @@
|
|
|
45
45
|
"typecheck": "tsc -p tsconfig.json",
|
|
46
46
|
"test": "vitest run",
|
|
47
47
|
"test:coverage": "vitest run --coverage --passWithNoTests=false",
|
|
48
|
-
"lint": "
|
|
48
|
+
"lint": "eslint --max-warnings 0 \"src/**/*.{ts,tsx}\" \"test/**/*.{ts,tsx}\""
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"tsup": "^8.5.0",
|
|
52
|
-
"typescript": "^
|
|
52
|
+
"typescript": "^6.0.3",
|
|
53
53
|
"vitest": "^4.1.8"
|
|
54
54
|
}
|
|
55
55
|
}
|