react-mcu 1.3.1 → 2.0.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 (8) hide show
  1. package/README.md +38 -38
  2. package/dist/cli.js +828 -0
  3. package/dist/index.d.ts +94 -67
  4. package/dist/index.js +229 -129
  5. package/dist/tailwind.css +157 -143
  6. package/package.json +5 -6
  7. package/src/tailwind.css +157 -143
  8. package/src/cli.ts +0 -116
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  [Material Design colors](https://m3.material.io/styles/color/system/overview)
6
6
  for React.
7
7
 
8
- It injects `--mcu-*` CSS variables into the page.
8
+ It injects `--md-sys-color-*` and `--md-ref-palette-*` CSS variables into the page (prefix is [configurable](#programmatic-api)).
9
9
 
10
10
  https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
11
11
 
@@ -54,12 +54,12 @@ import { Mcu } from "react-mcu";
54
54
  ]}
55
55
  >
56
56
  <p style={{
57
- backgroundColor: "var(--mcu-surface)",
58
- color: "var(--mcu-on-surface)",
57
+ backgroundColor: "var(--md-sys-color-surface)",
58
+ color: "var(--md-sys-color-on-surface)",
59
59
  }}>
60
60
  Hello, MCU <span style={{
61
- backgroundColor: "var(--mcu-my-custom-color-1)",
62
- color: "var(--mcu-on-my-custom-color-1)",
61
+ backgroundColor: "var(--md-sys-color-my-custom-color-1)",
62
+ color: "var(--md-sys-color-on-my-custom-color-1)",
63
63
  }}>colors<span>!
64
64
  </p>
65
65
  </Mcu>
@@ -72,8 +72,8 @@ import { Mcu } from "react-mcu";
72
72
 
73
73
  > [!NOTE]
74
74
  >
75
- > CSS varnames are always kebab-cased, `myCustomColor1` →
76
- > `--mcu-my-custom-color-1`
75
+ > CSS varnames are always kebab-cased, e.g. `myCustomColor1` →
76
+ > `--md-sys-color-my-custom-color-1` / `--md-ref-palette-my-custom-color-1-<tone>`
77
77
 
78
78
  ## `useMcu`
79
79
 
@@ -128,37 +128,37 @@ Simply override/remap
128
128
 
129
129
  :root,
130
130
  .dark {
131
- --background: var(--mcu-surface);
132
- --foreground: var(--mcu-on-surface);
133
- --card: var(--mcu-surface-container-low);
134
- --card-foreground: var(--mcu-on-surface);
135
- --popover: var(--mcu-surface-container-high);
136
- --popover-foreground: var(--mcu-on-surface);
137
- --primary: var(--mcu-primary);
138
- --primary-foreground: var(--mcu-on-primary);
139
- --secondary: var(--mcu-secondary-container);
140
- --secondary-foreground: var(--mcu-on-secondary-container);
141
- --muted: var(--mcu-surface-container-highest);
142
- --muted-foreground: var(--mcu-on-surface-variant);
143
- --accent: var(--mcu-secondary-container);
144
- --accent-foreground: var(--mcu-on-secondary-container);
145
- --destructive: var(--mcu-error);
146
- --border: var(--mcu-outline-variant);
147
- --input: var(--mcu-outline);
148
- --ring: var(--mcu-primary);
149
- --chart-1: var(--mcu-primary-fixed);
150
- --chart-2: var(--mcu-secondary-fixed);
151
- --chart-3: var(--mcu-tertiary-fixed);
152
- --chart-4: var(--mcu-primary-fixed-dim);
153
- --chart-5: var(--mcu-secondary-fixed-dim);
154
- --sidebar: var(--mcu-surface-container-low);
155
- --sidebar-foreground: var(--mcu-on-surface);
156
- --sidebar-primary: var(--mcu-primary);
157
- --sidebar-primary-foreground: var(--mcu-on-primary);
158
- --sidebar-accent: var(--mcu-secondary-container);
159
- --sidebar-accent-foreground: var(--mcu-on-secondary-container);
160
- --sidebar-border: var(--mcu-outline-variant);
161
- --sidebar-ring: var(--mcu-primary);
131
+ --background: var(--md-sys-color-surface);
132
+ --foreground: var(--md-sys-color-on-surface);
133
+ --card: var(--md-sys-color-surface-container-low);
134
+ --card-foreground: var(--md-sys-color-on-surface);
135
+ --popover: var(--md-sys-color-surface-container-high);
136
+ --popover-foreground: var(--md-sys-color-on-surface);
137
+ --primary: var(--md-sys-color-primary);
138
+ --primary-foreground: var(--md-sys-color-on-primary);
139
+ --secondary: var(--md-sys-color-secondary-container);
140
+ --secondary-foreground: var(--md-sys-color-on-secondary-container);
141
+ --muted: var(--md-sys-color-surface-container-highest);
142
+ --muted-foreground: var(--md-sys-color-on-surface-variant);
143
+ --accent: var(--md-sys-color-secondary-container);
144
+ --accent-foreground: var(--md-sys-color-on-secondary-container);
145
+ --destructive: var(--md-sys-color-error);
146
+ --border: var(--md-sys-color-outline-variant);
147
+ --input: var(--md-sys-color-outline);
148
+ --ring: var(--md-sys-color-primary);
149
+ --chart-1: var(--md-sys-color-primary-fixed);
150
+ --chart-2: var(--md-sys-color-secondary-fixed);
151
+ --chart-3: var(--md-sys-color-tertiary-fixed);
152
+ --chart-4: var(--md-sys-color-primary-fixed-dim);
153
+ --chart-5: var(--md-sys-color-secondary-fixed-dim);
154
+ --sidebar: var(--md-sys-color-surface-container-low);
155
+ --sidebar-foreground: var(--md-sys-color-on-surface);
156
+ --sidebar-primary: var(--md-sys-color-primary);
157
+ --sidebar-primary-foreground: var(--md-sys-color-on-primary);
158
+ --sidebar-accent: var(--md-sys-color-secondary-container);
159
+ --sidebar-accent-foreground: var(--md-sys-color-on-secondary-container);
160
+ --sidebar-border: var(--md-sys-color-outline-variant);
161
+ --sidebar-ring: var(--md-sys-color-primary);
162
162
  }
163
163
  ```
164
164