@juwel-development/design-system 2.0.0 → 2.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.
Files changed (16) hide show
  1. package/README.md +19 -3
  2. package/dist/design-system.js +176 -164
  3. package/dist/index.css +1 -1
  4. package/dist/types/Interaction/Input/Input.d.ts +2 -0
  5. package/dist/types/Interaction/TextArea/TextArea.d.ts +2 -0
  6. package/dist/types/Theme/renderTokens.d.ts +16 -3
  7. package/package.json +5 -1
  8. package/src/Interaction/Button/Button.tsx +2 -2
  9. package/src/Interaction/Input/Input.tsx +18 -1
  10. package/src/Interaction/TextArea/TextArea.tsx +18 -1
  11. package/src/Theme/renderTokens.ts +89 -29
  12. package/src/styles.dark.css +9 -0
  13. package/src/styles.light.css +9 -0
  14. package/src/tokens.css +5 -0
  15. package/src/tokens.dark.css +169 -0
  16. package/src/tokens.light.css +169 -0
package/README.md CHANGED
@@ -42,16 +42,32 @@ on an ancestor re-points every token underneath it.
42
42
  A product re-themes the whole system by supplying its own values for the same role
43
43
  names, which is what lets one design system serve several brands.
44
44
 
45
+ ### Single-theme builds
46
+
47
+ `styles.css` and `tokens.css` carry both colour sets, so a product that ships only one
48
+ theme still emits a `.dark` block it can never remove. Two opt-in exports carry a single
49
+ theme's values in `:root` with no `.dark` block and no `dark:` variant:
50
+
51
+ ```tsx
52
+ // a light-only product
53
+ import '@juwel-development/design-system/styles.light.css';
54
+ // a dark-only product
55
+ import '@juwel-development/design-system/styles.dark.css';
56
+ ```
57
+
58
+ The tokens-only equivalents are `tokens.light.css` and `tokens.dark.css`. All three
59
+ variants are generated from the same palette, so they cannot drift.
60
+
45
61
  ### Changing the palette
46
62
 
47
- `src/Theme/Palette.ts` is the single source of truth. `src/tokens.css` is generated
48
- from it:
63
+ `src/Theme/Palette.ts` is the single source of truth. `src/tokens.css` and its
64
+ single-theme siblings `tokens.light.css` and `tokens.dark.css` are generated from it:
49
65
 
50
66
  ```bash
51
67
  npm run build:tokens
52
68
  ```
53
69
 
54
- The generated file is committed, and a test pins it to the palette - editing the
70
+ The generated files are committed, and a test pins each to the palette - editing the
55
71
  palette without regenerating fails the suite rather than shipping stale colours.
56
72
 
57
73
  ## Development