react-mcu 1.0.3 → 1.0.5

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 +13 -50
  2. package/dist/index.d.ts +18 -5
  3. package/dist/index.js +39 -16
  4. package/dist/tailwind.css +76 -0
  5. package/package.json +8 -3
  6. package/src/tailwind.css +76 -0
package/README.md CHANGED
@@ -17,8 +17,9 @@ import { Mcu } from "react-mcu";
17
17
  scheme="vibrant"
18
18
  contrast={0.5}
19
19
  customColors={[
20
- { name: "myCustomColor1", hex: "#FF5733", blend: true },
21
- { name: "myCustomColor2", hex: "#3498DB", blend: false },
20
+ { name: "myCustomColor1", hex: "#6C8A0C", blend: true },
21
+ { name: "myCustomColor2", hex: "#E126C6", blend: true },
22
+ { name: "myCustomColor3", hex: "#E126C6", blend: false },
22
23
  ]}
23
24
  >
24
25
  <p style={{
@@ -26,7 +27,7 @@ import { Mcu } from "react-mcu";
26
27
  color: "var(--mcu-on-surface)",
27
28
  }}>
28
29
  Hello, MCU <span style={{
29
- backgroundColor: "var(--mcu-my-custom-color1)",
30
+ backgroundColor: "var(--mcu-my-custom-color-1)",
30
31
  color: "var(--mcu-my-custom-color2)",
31
32
  }}>colors<span>!
32
33
  </p>
@@ -54,56 +55,18 @@ return (
54
55
  Compatible with Tailwind through
55
56
  [theme variables](https://tailwindcss.com/docs/theme):
56
57
 
58
+ https://github.com/abernier/react-mcu/blob/b62ed1391cd189aefcb04cb0c31a30fd5fa6f211/src/tailwind.css#L3-L76
59
+
60
+ Or simply:
61
+
57
62
  ```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
- }
63
+ @import "react-mcu/tailwind.css";
105
64
  ```
106
65
 
66
+ > [!IMPORTANT]
67
+ > Do not forget to manually add your custom colors, as in:
68
+ > https://github.com/abernier/react-mcu/blob/b62ed1391cd189aefcb04cb0c31a30fd5fa6f211/src/tailwind.css#L52-L75
69
+
107
70
  # Dev
108
71
 
109
72
  ## INSTALL
package/dist/index.d.ts CHANGED
@@ -5,10 +5,14 @@ type HexCustomColor = Omit<CustomColor, "value"> & {
5
5
  hex: string;
6
6
  };
7
7
  type McuConfig = {
8
+ /** Source color in hex format (e.g., "#6750A4") used to generate the color scheme */
8
9
  source: string;
9
- scheme: SchemeName;
10
- contrast: number;
11
- customColors: HexCustomColor[];
10
+ /** Color scheme variant. Default: "tonalSpot" */
11
+ scheme?: SchemeName;
12
+ /** Contrast level from -1.0 (reduced) to 1.0 (increased). Default: 0 (standard) */
13
+ contrast?: number;
14
+ /** Array of custom colors to include in the generated palette */
15
+ customColors?: HexCustomColor[];
12
16
  };
13
17
  declare const schemesMap: {
14
18
  readonly tonalSpot: typeof SchemeTonalSpot;
@@ -22,7 +26,16 @@ declare const schemesMap: {
22
26
  declare const schemeNames: (keyof typeof schemesMap)[];
23
27
  type SchemeName = (typeof schemeNames)[number];
24
28
  declare function Mcu({ source, scheme, contrast, customColors, children, }: McuConfig & {
25
- children: React.ReactNode;
29
+ children?: React.ReactNode;
26
30
  }): react_jsx_runtime.JSX.Element;
31
+ 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"];
32
+ type TokenName = (typeof tokenNames)[number];
27
33
 
28
- export { Mcu };
34
+ type Api = {
35
+ initials: McuConfig;
36
+ setMcuConfig: (config: McuConfig) => void;
37
+ getMcuColor: (colorName: TokenName, theme?: string) => string;
38
+ };
39
+ declare const useMcu: () => Api;
40
+
41
+ export { Mcu, useMcu };
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  // src/Mcu.tsx
2
2
  import {
3
3
  argbFromHex,
4
+ Blend,
4
5
  Hct,
5
6
  hexFromArgb as hexFromArgb2,
6
7
  MaterialDynamicColors,
@@ -10,9 +11,10 @@ import {
10
11
  SchemeMonochrome,
11
12
  SchemeNeutral,
12
13
  SchemeTonalSpot,
13
- SchemeVibrant
14
+ SchemeVibrant,
15
+ TonalPalette
14
16
  } from "@material/material-color-utilities";
15
- import { kebabCase } from "lodash-es";
17
+ import { kebabCase, upperFirst } from "lodash-es";
16
18
  import { useMemo as useMemo2 } from "react";
17
19
 
18
20
  // src/Mcu.context.tsx
@@ -102,12 +104,15 @@ var schemesMap = {
102
104
  var schemeNames = Object.keys(
103
105
  schemesMap
104
106
  );
107
+ var DEFAULT_SCHEME = "tonalSpot";
108
+ var DEFAULT_CONTRAST = 0;
109
+ var DEFAULT_CUSTOM_COLORS = [];
105
110
  var mcuStyleId = "mcu-styles";
106
111
  function Mcu({
107
112
  source,
108
- scheme,
109
- contrast,
110
- customColors,
113
+ scheme = DEFAULT_SCHEME,
114
+ contrast = DEFAULT_CONTRAST,
115
+ customColors = DEFAULT_CUSTOM_COLORS,
111
116
  children
112
117
  }) {
113
118
  const config = useMemo2(
@@ -194,16 +199,25 @@ function toRecord(arr, getEntry) {
194
199
  {}
195
200
  );
196
201
  }
197
- function mergeBaseAndCustomColors(scheme, customColors) {
202
+ function mergeBaseAndCustomColors(scheme, customColors, sourceArgb) {
198
203
  const baseVars = toRecord(tokenNames, (tokenName) => {
199
204
  const dynamicColor = MaterialDynamicColors[tokenName];
200
205
  const argb = dynamicColor.getArgb(scheme);
201
206
  return [tokenName, argb];
202
207
  });
203
- const customVars = toRecord(customColors, (color) => [
204
- color.name,
205
- color.value
206
- ]);
208
+ const customVars = {};
209
+ const isDark = scheme.isDark;
210
+ customColors.forEach((color) => {
211
+ const colorValue = color.blend ? Blend.harmonize(color.value, sourceArgb) : color.value;
212
+ const palette = TonalPalette.fromInt(colorValue);
213
+ const colorname = color.name;
214
+ customVars[colorname] = palette.tone(isDark ? 80 : 40);
215
+ customVars[`on${upperFirst(colorname)}`] = palette.tone(isDark ? 20 : 100);
216
+ customVars[`${colorname}Container`] = palette.tone(isDark ? 30 : 90);
217
+ customVars[`on${upperFirst(colorname)}Container`] = palette.tone(
218
+ isDark ? 90 : 10
219
+ );
220
+ });
207
221
  return { ...baseVars, ...customVars };
208
222
  }
209
223
  var cssVar = (colorName, colorValue) => {
@@ -216,9 +230,9 @@ var toCssVars = (mergedColors) => {
216
230
  };
217
231
  function generateCss({
218
232
  source: hexSource,
219
- customColors: hexCustomColors,
220
- scheme,
221
- contrast
233
+ customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
234
+ scheme = DEFAULT_SCHEME,
235
+ contrast = DEFAULT_CONTRAST
222
236
  }) {
223
237
  console.log("MCU generateCss");
224
238
  const sourceArgb = argbFromHex(hexSource);
@@ -230,8 +244,16 @@ function generateCss({
230
244
  ...rest,
231
245
  value: argbFromHex(hex)
232
246
  }));
233
- const mergedColorsLight = mergeBaseAndCustomColors(lightScheme, customColors);
234
- const mergedColorsDark = mergeBaseAndCustomColors(darkScheme, customColors);
247
+ const mergedColorsLight = mergeBaseAndCustomColors(
248
+ lightScheme,
249
+ customColors,
250
+ sourceArgb
251
+ );
252
+ const mergedColorsDark = mergeBaseAndCustomColors(
253
+ darkScheme,
254
+ customColors,
255
+ sourceArgb
256
+ );
235
257
  const lightVars = toCssVars(mergedColorsLight);
236
258
  const darkVars = toCssVars(mergedColorsDark);
237
259
  return {
@@ -244,5 +266,6 @@ function generateCss({
244
266
  };
245
267
  }
246
268
  export {
247
- Mcu
269
+ Mcu,
270
+ useMcu
248
271
  };
package/dist/tailwind.css ADDED
@@ -0,0 +1,76 @@
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
+
52
+ /*
53
+ * Custom colors
54
+ */
55
+
56
+ --color-myCustomColor1: var(--mcu-my-custom-color-1);
57
+ --color-on-myCustomColor1: var(--mcu-on-my-custom-color-1);
58
+ --color-myCustomColor1-container: var(--mcu-my-custom-color-1-container);
59
+ --color-on-myCustomColor1-container: var(
60
+ --mcu-on-my-custom-color-1-container
61
+ );
62
+
63
+ --color-myCustomColor2: var(--mcu-my-custom-color-2);
64
+ --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
65
+ --color-myCustomColor2-container: var(--mcu-my-custom-color-2-container);
66
+ --color-on-myCustomColor2-container: var(
67
+ --mcu-on-my-custom-color-2-container
68
+ );
69
+
70
+ --color-myCustomColor3: var(--mcu-my-custom-color-3);
71
+ --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
72
+ --color-myCustomColor3-container: var(--mcu-my-custom-color-3-container);
73
+ --color-on-myCustomColor3-container: var(
74
+ --mcu-on-my-custom-color-3-container
75
+ );
76
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-mcu",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
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,76 @@
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
+
52
+ /*
53
+ * Custom colors
54
+ */
55
+
56
+ --color-myCustomColor1: var(--mcu-my-custom-color-1);
57
+ --color-on-myCustomColor1: var(--mcu-on-my-custom-color-1);
58
+ --color-myCustomColor1-container: var(--mcu-my-custom-color-1-container);
59
+ --color-on-myCustomColor1-container: var(
60
+ --mcu-on-my-custom-color-1-container
61
+ );
62
+
63
+ --color-myCustomColor2: var(--mcu-my-custom-color-2);
64
+ --color-on-myCustomColor2: var(--mcu-on-my-custom-color-2);
65
+ --color-myCustomColor2-container: var(--mcu-my-custom-color-2-container);
66
+ --color-on-myCustomColor2-container: var(
67
+ --mcu-on-my-custom-color-2-container
68
+ );
69
+
70
+ --color-myCustomColor3: var(--mcu-my-custom-color-3);
71
+ --color-on-myCustomColor3: var(--mcu-on-my-custom-color-3);
72
+ --color-myCustomColor3-container: var(--mcu-my-custom-color-3-container);
73
+ --color-on-myCustomColor3-container: var(
74
+ --mcu-on-my-custom-color-3-container
75
+ );
76
+ }