react-mcu 1.0.7 → 1.0.9

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 (2) hide show
  1. package/README.md +86 -5
  2. package/package.json +3 -2
package/README.md CHANGED
@@ -3,9 +3,15 @@
3
3
  [![](https://img.shields.io/badge/storybook-171c23.svg?logo=storybook)](https://main--695eb517cb602e59b4cc045c.chromatic.com)
4
4
 
5
5
  It injects `--mcu-*` CSS variables into the page, based on
6
- [m3 color system](https://m3.material.io/styles/color/roles).
6
+ [m3 color system](https://m3.material.io/styles/color/system/overview).
7
7
 
8
- https://material-foundation.github.io/material-theme-builder/
8
+ https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
9
+
10
+ m3 references:
11
+
12
+ | builder | roles |
13
+ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
14
+ | [<img width="2836" height="2266" alt="CleanShot 2026-01-14 at 08 58 40@2x" src="https://github.com/user-attachments/assets/e4b47c00-716f-4b08-b393-de306d5ce302" />](https://material-foundation.github.io/material-theme-builder/) | [<img width="2836" height="2266" alt="CleanShot 2026-01-14 at 09 01 23@2x" src="https://github.com/user-attachments/assets/826e502d-e173-43c4-807a-53d0ba075a88" />](https://m3.material.io/styles/color/roles) |
9
15
 
10
16
  # Usage
11
17
 
@@ -34,13 +40,19 @@ import { Mcu } from "react-mcu";
34
40
  </Mcu>
35
41
  ```
36
42
 
43
+ > [!TIP]
44
+ >
45
+ > Typically wrapping `{children}` in a
46
+ > [layout](https://nextjs.org/docs/app/getting-started/layouts-and-pages#creating-a-layout).
47
+
37
48
  > [!NOTE]
38
49
  >
39
- > CSS varnames are always kebab-cased, `myCustomColor1` → `--mcu-my-custom-color-1`
50
+ > CSS varnames are always kebab-cased, `myCustomColor1` →
51
+ > `--mcu-my-custom-color-1`
40
52
 
41
- https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
53
+ ## `useMcu`
42
54
 
43
- A `useMcu` hook is also provided:
55
+ A hook is also provided:
44
56
 
45
57
  ```tsx
46
58
  import { useMcu } from "react-mcu";
@@ -72,6 +84,75 @@ Or simply:
72
84
  > Do not forget to manually add your custom colors, as in:
73
85
  > https://github.com/abernier/react-mcu/blob/f981087651d77f6b11fc76cb783a5220a1b56e87/src/tailwind.css#L52-L75
74
86
 
87
+ ## shadcn
88
+
89
+ Pre-requisites:
90
+
91
+ - [Tailwind setup](#tailwind)
92
+ - You should use `tailwind.cssVariables` in your
93
+ [`components.json`](https://ui.shadcn.com/docs/theming#css-variables)
94
+
95
+ Simply override
96
+ [shadcn's CSS variables](https://ui.shadcn.com/docs/theming#list-of-variables)
97
+ with MCU ones:
98
+
99
+ ```css
100
+ :root {
101
+ /* ... */
102
+ }
103
+ .dark {
104
+ /* ... */
105
+ }
106
+
107
+ :root,
108
+ .dark {
109
+ --background: var(--mcu-surface);
110
+ --foreground: var(--mcu-on-surface);
111
+ --card: var(--mcu-surface-container-low);
112
+ --card-foreground: var(--mcu-on-surface);
113
+ --popover: var(--mcu-surface-container-high);
114
+ --popover-foreground: var(--mcu-on-surface);
115
+ --primary: var(--mcu-primary);
116
+ --primary-foreground: var(--mcu-on-primary);
117
+ --secondary: var(--mcu-secondary-container);
118
+ --secondary-foreground: var(--mcu-on-secondary-container);
119
+ --muted: var(--mcu-surface-container-highest);
120
+ --muted-foreground: var(--mcu-on-surface-variant);
121
+ --accent: var(--mcu-secondary-container);
122
+ --accent-foreground: var(--mcu-on-secondary-container);
123
+ --destructive: var(--mcu-error);
124
+ --border: var(--mcu-outline-variant);
125
+ --input: var(--mcu-outline);
126
+ --ring: var(--mcu-primary);
127
+ --chart-1: var(--mcu-primary-fixed);
128
+ --chart-2: var(--mcu-secondary-fixed);
129
+ --chart-3: var(--mcu-tertiary-fixed);
130
+ --chart-4: var(--mcu-primary-fixed-dim);
131
+ --chart-5: var(--mcu-secondary-fixed-dim);
132
+ --sidebar: var(--mcu-surface-container-low);
133
+ --sidebar-foreground: var(--mcu-on-surface);
134
+ --sidebar-primary: var(--mcu-primary);
135
+ --sidebar-primary-foreground: var(--mcu-on-primary);
136
+ --sidebar-accent: var(--mcu-secondary-container);
137
+ --sidebar-accent-foreground: var(--mcu-on-secondary-container);
138
+ --sidebar-border: var(--mcu-outline-variant);
139
+ --sidebar-ring: var(--mcu-primary);
140
+ }
141
+ ```
142
+
143
+ <details>
144
+ <summary>mapping details</summary>
145
+ see:
146
+
147
+ - https://chatgpt.com/share/6899f20a-422c-8011-a072-62fb649589a0
148
+ - https://gemini.google.com/share/51e072b6f1d2
149
+ </details>
150
+
151
+ > [!IMPORTANT]
152
+ >
153
+ > Make sure `:root, .dark { ... }` comes AFTER `.root { ... } .dark { ... }` to
154
+ > take precedence.
155
+
75
156
  # Dev
76
157
 
77
158
  ## INSTALL
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mcu",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "description": "A React component library",
5
5
  "keywords": [
6
6
  "react",
@@ -76,6 +76,7 @@
76
76
  "local-release": "pnpm run ci && changeset version && changeset publish",
77
77
  "storybook": "storybook dev -p 6006",
78
78
  "build-storybook": "storybook build",
79
- "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN"
79
+ "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
80
+ "changeset": "pnpm exec changeset"
80
81
  }
81
82
  }