react-mcu 1.0.2 → 1.0.4

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 (6) hide show
  1. package/README.md +46 -5
  2. package/dist/index.d.ts +10 -1
  3. package/dist/index.js +2 -1
  4. package/dist/tailwind.css +51 -0
  5. package/package.json +8 -3
  6. package/src/tailwind.css +51 -0
package/README.md CHANGED
@@ -1,7 +1,13 @@
1
1
  [![npm version](https://img.shields.io/npm/v/react-mcu.svg)](https://www.npmjs.com/package/react-mcu)
2
2
  [![](https://img.shields.io/badge/chromatic-171c23.svg?logo=chromatic)](https://www.chromatic.com/library?appId=695eb517cb602e59b4cc045c&branch=main)
3
+ [![](https://img.shields.io/badge/storybook-171c23.svg?logo=storybook)](https://main--695eb517cb602e59b4cc045c.chromatic.com)
3
4
 
4
- Usage:
5
+ It injects `--mcu-*` CSS variables into the page, based on
6
+ [m3 color system](https://m3.material.io/styles/color/roles).
7
+
8
+ https://material-foundation.github.io/material-theme-builder/
9
+
10
+ # Usage
5
11
 
6
12
  ```tsx
7
13
  import { Mcu } from "react-mcu";
@@ -10,17 +16,52 @@ import { Mcu } from "react-mcu";
10
16
  source="#0e1216"
11
17
  scheme="vibrant"
12
18
  contrast={0.5}
13
- customColors=[]
19
+ customColors={[
20
+ { name: "myCustomColor1", hex: "#FF5733", blend: true },
21
+ { name: "myCustomColor2", hex: "#3498DB", blend: false },
22
+ ]}
14
23
  >
15
- <div style={{
24
+ <p style={{
16
25
  backgroundColor: "var(--mcu-surface)",
17
26
  color: "var(--mcu-on-surface)",
18
27
  }}>
19
- Hello, MCU colors!
20
- </div>
28
+ Hello, MCU <span style={{
29
+ backgroundColor: "var(--mcu-my-custom-color1)",
30
+ color: "var(--mcu-my-custom-color2)",
31
+ }}>colors<span>!
32
+ </p>
21
33
  </Mcu>
22
34
  ```
23
35
 
36
+ https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
37
+
38
+ A `useMcu` hook is also provided:
39
+
40
+ ```tsx
41
+ import { useMcu } from "react-mcu";
42
+
43
+ const { initials, setMcuConfig, getMcuColor } = useMcu();
44
+
45
+ return (
46
+ <button onClick={() => setMcuConfig({ ...initials, source: "#FF5722" })}>
47
+ Change to {getMcuColor("primary", "light")}
48
+ </button>
49
+ );
50
+ ```
51
+
52
+ ## Tailwind
53
+
54
+ Compatible with Tailwind through
55
+ [theme variables](https://tailwindcss.com/docs/theme):
56
+
57
+ https://github.com/abernier/react-mcu/blob/fdff00861e77067678076a97193a1a6f53eb3557/src/tailwind.css#L3-L51
58
+
59
+ Or simply:
60
+
61
+ ```css
62
+ @import "react-mcu/tailwind.css";
63
+ ```
64
+
24
65
  # Dev
25
66
 
26
67
  ## INSTALL
package/dist/index.d.ts CHANGED
@@ -24,5 +24,14 @@ type SchemeName = (typeof schemeNames)[number];
24
24
  declare function Mcu({ source, scheme, contrast, customColors, children, }: McuConfig & {
25
25
  children: React.ReactNode;
26
26
  }): react_jsx_runtime.JSX.Element;
27
+ declare const tokenNames: readonly ["background", "onBackground", "surface", "surfaceDim", "surfaceBright", "surfaceContainerLowest", "surfaceContainerLow", "surfaceContainer", "surfaceContainerHigh", "surfaceContainerHighest", "onSurface", "onSurfaceVariant", "outline", "outlineVariant", "inverseSurface", "inverseOnSurface", "primary", "onPrimary", "primaryContainer", "onPrimaryContainer", "primaryFixed", "primaryFixedDim", "onPrimaryFixed", "onPrimaryFixedVariant", "inversePrimary", "primaryFixed", "primaryFixedDim", "onPrimaryFixed", "onPrimaryFixedVariant", "secondary", "onSecondary", "secondaryContainer", "onSecondaryContainer", "secondaryFixed", "secondaryFixedDim", "onSecondaryFixed", "onSecondaryFixedVariant", "tertiary", "onTertiary", "tertiaryContainer", "onTertiaryContainer", "tertiaryFixed", "tertiaryFixedDim", "onTertiaryFixed", "onTertiaryFixedVariant", "error", "onError", "errorContainer", "onErrorContainer", "scrim", "shadow"];
28
+ type TokenName = (typeof tokenNames)[number];
27
29
 
28
- export { Mcu };
30
+ type Api = {
31
+ initials: McuConfig;
32
+ setMcuConfig: (config: McuConfig) => void;
33
+ getMcuColor: (colorName: TokenName, theme?: string) => string;
34
+ };
35
+ declare const useMcu: () => Api;
36
+
37
+ export { Mcu, useMcu };
package/dist/index.js CHANGED
@@ -244,5 +244,6 @@ function generateCss({
244
244
  };
245
245
  }
246
246
  export {
247
- Mcu
247
+ Mcu,
248
+ useMcu
248
249
  };
package/dist/tailwind.css ADDED
@@ -0,0 +1,51 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ --color-background: var(--mcu-background);
5
+ --color-on-background: var(--mcu-on-background);
6
+ --color-surface: var(--mcu-surface);
7
+ --color-surface-dim: var(--mcu-surface-dim);
8
+ --color-surface-bright: var(--mcu-surface-bright);
9
+ --color-surface-container-lowest: var(--mcu-surface-container-lowest);
10
+ --color-surface-container-low: var(--mcu-surface-container-low);
11
+ --color-surface-container: var(--mcu-surface-container);
12
+ --color-surface-container-high: var(--mcu-surface-container-high);
13
+ --color-surface-container-highest: var(--mcu-surface-container-highest);
14
+ --color-on-surface: var(--mcu-on-surface);
15
+ --color-on-surface-variant: var(--mcu-on-surface-variant);
16
+ --color-outline: var(--mcu-outline);
17
+ --color-outline-variant: var(--mcu-outline-variant);
18
+ --color-inverse-surface: var(--mcu-inverse-surface);
19
+ --color-inverse-on-surface: var(--mcu-inverse-on-surface);
20
+ --color-primary: var(--mcu-primary);
21
+ --color-on-primary: var(--mcu-on-primary);
22
+ --color-primary-container: var(--mcu-primary-container);
23
+ --color-on-primary-container: var(--mcu-on-primary-container);
24
+ --color-primary-fixed: var(--mcu-primary-fixed);
25
+ --color-primary-fixed-dim: var(--mcu-primary-fixed-dim);
26
+ --color-on-primary-fixed: var(--mcu-on-primary-fixed);
27
+ --color-on-primary-fixed-variant: var(--mcu-on-primary-fixed-variant);
28
+ --color-inverse-primary: var(--mcu-inverse-primary);
29
+ --color-secondary: var(--mcu-secondary);
30
+ --color-on-secondary: var(--mcu-on-secondary);
31
+ --color-secondary-container: var(--mcu-secondary-container);
32
+ --color-on-secondary-container: var(--mcu-on-secondary-container);
33
+ --color-secondary-fixed: var(--mcu-secondary-fixed);
34
+ --color-secondary-fixed-dim: var(--mcu-secondary-fixed-dim);
35
+ --color-on-secondary-fixed: var(--mcu-on-secondary-fixed);
36
+ --color-on-secondary-fixed-variant: var(--mcu-on-secondary-fixed-variant);
37
+ --color-tertiary: var(--mcu-tertiary);
38
+ --color-on-tertiary: var(--mcu-on-tertiary);
39
+ --color-tertiary-container: var(--mcu-tertiary-container);
40
+ --color-on-tertiary-container: var(--mcu-on-tertiary-container);
41
+ --color-tertiary-fixed: var(--mcu-tertiary-fixed);
42
+ --color-tertiary-fixed-dim: var(--mcu-tertiary-fixed-dim);
43
+ --color-on-tertiary-fixed: var(--mcu-on-tertiary-fixed);
44
+ --color-on-tertiary-fixed-variant: var(--mcu-on-tertiary-fixed-variant);
45
+ --color-error: var(--mcu-error);
46
+ --color-on-error: var(--mcu-on-error);
47
+ --color-error-container: var(--mcu-error-container);
48
+ --color-on-error-container: var(--mcu-on-error-container);
49
+ --color-scrim: var(--mcu-scrim);
50
+ --color-shadow: var(--mcu-shadow);
51
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mcu",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "A React component library",
5
5
  "keywords": [
6
6
  "react",
@@ -11,7 +11,8 @@
11
11
  ".": {
12
12
  "types": "./dist/index.d.ts",
13
13
  "import": "./dist/index.js"
14
- }
14
+ },
15
+ "./tailwind.css": "./dist/tailwind.css"
15
16
  },
16
17
  "homepage": "https://github.com/abernier/react-mcu",
17
18
  "bugs": {
@@ -24,13 +25,15 @@
24
25
  },
25
26
  "license": "MIT",
26
27
  "files": [
27
- "dist"
28
+ "dist",
29
+ "src/tailwind.css"
28
30
  ],
29
31
  "type": "module",
30
32
  "devDependencies": {
31
33
  "@arethetypeswrong/cli": "^0.18.2",
32
34
  "@changesets/cli": "^2.27.7",
33
35
  "@storybook/react-vite": "^10.1.11",
36
+ "@tailwindcss/postcss": "^4.1.18",
34
37
  "@testing-library/dom": "^10.4.1",
35
38
  "@testing-library/react": "^16.3.1",
36
39
  "@types/lodash-es": "^4.17.12",
@@ -41,10 +44,12 @@
41
44
  "husky": "^9.1.7",
42
45
  "jsdom": "^27.4.0",
43
46
  "lint-staged": "^16.2.7",
47
+ "postcss": "^8.5.6",
44
48
  "prettier": "^3.3.3",
45
49
  "react": "^19.2.3",
46
50
  "react-dom": "^19.2.3",
47
51
  "storybook": "^10.1.11",
52
+ "tailwindcss": "^4.1.18",
48
53
  "tsup": "^8.2.4",
49
54
  "typescript": "^5.5.4",
50
55
  "vitest": "^4.0.16"
package/src/tailwind.css ADDED
@@ -0,0 +1,51 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme {
4
+ --color-background: var(--mcu-background);
5
+ --color-on-background: var(--mcu-on-background);
6
+ --color-surface: var(--mcu-surface);
7
+ --color-surface-dim: var(--mcu-surface-dim);
8
+ --color-surface-bright: var(--mcu-surface-bright);
9
+ --color-surface-container-lowest: var(--mcu-surface-container-lowest);
10
+ --color-surface-container-low: var(--mcu-surface-container-low);
11
+ --color-surface-container: var(--mcu-surface-container);
12
+ --color-surface-container-high: var(--mcu-surface-container-high);
13
+ --color-surface-container-highest: var(--mcu-surface-container-highest);
14
+ --color-on-surface: var(--mcu-on-surface);
15
+ --color-on-surface-variant: var(--mcu-on-surface-variant);
16
+ --color-outline: var(--mcu-outline);
17
+ --color-outline-variant: var(--mcu-outline-variant);
18
+ --color-inverse-surface: var(--mcu-inverse-surface);
19
+ --color-inverse-on-surface: var(--mcu-inverse-on-surface);
20
+ --color-primary: var(--mcu-primary);
21
+ --color-on-primary: var(--mcu-on-primary);
22
+ --color-primary-container: var(--mcu-primary-container);
23
+ --color-on-primary-container: var(--mcu-on-primary-container);
24
+ --color-primary-fixed: var(--mcu-primary-fixed);
25
+ --color-primary-fixed-dim: var(--mcu-primary-fixed-dim);
26
+ --color-on-primary-fixed: var(--mcu-on-primary-fixed);
27
+ --color-on-primary-fixed-variant: var(--mcu-on-primary-fixed-variant);
28
+ --color-inverse-primary: var(--mcu-inverse-primary);
29
+ --color-secondary: var(--mcu-secondary);
30
+ --color-on-secondary: var(--mcu-on-secondary);
31
+ --color-secondary-container: var(--mcu-secondary-container);
32
+ --color-on-secondary-container: var(--mcu-on-secondary-container);
33
+ --color-secondary-fixed: var(--mcu-secondary-fixed);
34
+ --color-secondary-fixed-dim: var(--mcu-secondary-fixed-dim);
35
+ --color-on-secondary-fixed: var(--mcu-on-secondary-fixed);
36
+ --color-on-secondary-fixed-variant: var(--mcu-on-secondary-fixed-variant);
37
+ --color-tertiary: var(--mcu-tertiary);
38
+ --color-on-tertiary: var(--mcu-on-tertiary);
39
+ --color-tertiary-container: var(--mcu-tertiary-container);
40
+ --color-on-tertiary-container: var(--mcu-on-tertiary-container);
41
+ --color-tertiary-fixed: var(--mcu-tertiary-fixed);
42
+ --color-tertiary-fixed-dim: var(--mcu-tertiary-fixed-dim);
43
+ --color-on-tertiary-fixed: var(--mcu-on-tertiary-fixed);
44
+ --color-on-tertiary-fixed-variant: var(--mcu-on-tertiary-fixed-variant);
45
+ --color-error: var(--mcu-error);
46
+ --color-on-error: var(--mcu-on-error);
47
+ --color-error-container: var(--mcu-error-container);
48
+ --color-on-error-container: var(--mcu-on-error-container);
49
+ --color-scrim: var(--mcu-scrim);
50
+ --color-shadow: var(--mcu-shadow);
51
+ }