react-mcu 1.0.3 → 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 +5 -47
  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
@@ -54,54 +54,12 @@ return (
54
54
  Compatible with Tailwind through
55
55
  [theme variables](https://tailwindcss.com/docs/theme):
56
56
 
57
+ https://github.com/abernier/react-mcu/blob/fdff00861e77067678076a97193a1a6f53eb3557/src/tailwind.css#L3-L51
58
+
59
+ Or simply:
60
+
57
61
  ```css
58
- @theme {
59
- --color-background: var(--mcu-background);
60
- --color-on-background: var(--mcu-on-background);
61
- --color-surface: var(--mcu-surface);
62
- --color-surface-dim: var(--mcu-surface-dim);
63
- --color-surface-bright: var(--mcu-surface-bright);
64
- --color-surface-container-lowest: var(--mcu-surface-container-lowest);
65
- --color-surface-container-low: var(--mcu-surface-container-low);
66
- --color-surface-container: var(--mcu-surface-container);
67
- --color-surface-container-high: var(--mcu-surface-container-high);
68
- --color-surface-container-highest: var(--mcu-surface-container-highest);
69
- --color-on-surface: var(--mcu-on-surface);
70
- --color-on-surface-variant: var(--mcu-on-surface-variant);
71
- --color-outline: var(--mcu-outline);
72
- --color-outline-variant: var(--mcu-outline-variant);
73
- --color-inverse-surface: var(--mcu-inverse-surface);
74
- --color-inverse-on-surface: var(--mcu-inverse-on-surface);
75
- --color-primary: var(--mcu-primary);
76
- --color-on-primary: var(--mcu-on-primary);
77
- --color-primary-container: var(--mcu-primary-container);
78
- --color-on-primary-container: var(--mcu-on-primary-container);
79
- --color-primary-fixed: var(--mcu-primary-fixed);
80
- --color-primary-fixed-dim: var(--mcu-primary-fixed-dim);
81
- --color-on-primary-fixed: var(--mcu-on-primary-fixed);
82
- --color-on-primary-fixed-variant: var(--mcu-on-primary-fixed-variant);
83
- --color-inverse-primary: var(--mcu-inverse-primary);
84
- --color-secondary: var(--mcu-secondary);
85
- --color-on-secondary: var(--mcu-on-secondary);
86
- --color-secondary-container: var(--mcu-secondary-container);
87
- --color-on-secondary-container: var(--mcu-on-secondary-container);
88
- --color-secondary-fixed: var(--mcu-secondary-fixed);
89
- --color-secondary-fixed-dim: var(--mcu-secondary-fixed-dim);
90
- --color-on-secondary-fixed: var(--mcu-on-secondary-fixed);
91
- --color-on-secondary-fixed-variant: var(--mcu-on-secondary-fixed-variant);
92
- --color-tertiary: var(--mcu-tertiary);
93
- --color-on-tertiary: var(--mcu-on-tertiary);
94
- --color-tertiary-container: var(--mcu-tertiary-container);
95
- --color-on-tertiary-container: var(--mcu-on-tertiary-container);
96
- --color-tertiary-fixed: var(--mcu-tertiary-fixed);
97
- --color-tertiary-fixed-dim: var(--mcu-tertiary-fixed-dim);
98
- --color-on-tertiary-fixed: var(--mcu-on-tertiary-fixed);
99
- --color-on-tertiary-fixed-variant: var(--mcu-on-tertiary-fixed-variant);
100
- --color-error: var(--mcu-error);
101
- --color-on-error: var(--mcu-on-error);
102
- --color-error-container: var(--mcu-error-container);
103
- --color-on-error-container: var(--mcu-on-error-container);
104
- }
62
+ @import "react-mcu/tailwind.css";
105
63
  ```
106
64
 
107
65
  # Dev
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.3",
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
+ }