@primer/react 38.35.1 → 38.36.0-rc.7156e7efc

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @primer/react
 
+## 38.36.0
+
+### Minor Changes
+
+- [#8212](https://github.com/primer/react/pull/8212) [`9ac9343`](https://github.com/primer/react/commit/9ac9343a70fd0f70413a42cd27baf562a74dd4fc) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ThemeProvider: Add a CSS-variable-based implementation to `@primer/react/next`
+  and deprecate the legacy JavaScript theme implementation.
+
 ## 38.35.1
 
 ### Patch Changes

package/dist/ThemeContext.d.ts

@@ -0,0 +1,20 @@
+import { ColorMode, ColorModeWithAuto, Theme } from "./ThemeProvider.js";
+import React from "react";
+
+//#region src/ThemeContext.d.ts
+interface ThemeContextValue {
+  /** @deprecated Use `ThemeProvider` and `useTheme` from `@primer/react/next` to migrate away from JavaScript theme values. */
+  theme?: Theme;
+  colorScheme?: string;
+  colorMode?: ColorModeWithAuto;
+  resolvedColorMode?: ColorMode;
+  /** @deprecated Use `ThemeProvider` and `useTheme` from `@primer/react/next` to migrate away from JavaScript theme values. */
+  resolvedColorScheme?: string;
+  dayScheme?: string;
+  nightScheme?: string;
+  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
+  setDayScheme: React.Dispatch<React.SetStateAction<string>>;
+  setNightScheme: React.Dispatch<React.SetStateAction<string>>;
+}
+//#endregion
+export { ThemeContextValue };

package/dist/ThemeProvider.d.ts

@@ -21,6 +21,9 @@ type ThemeProviderProps = {
    */
   contextOnly?: boolean;
 };
+/**
+ * @deprecated Use `ThemeProvider` from `@primer/react/next` to migrate away from JavaScript theme values.
+ */
 declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
 //#endregion
 export { ColorMode, ColorModeWithAuto, Theme, ThemeProvider, ThemeProvider as default, ThemeProviderProps };

package/dist/ThemeProvider.js

@@ -1,16 +1,17 @@
 import theme from "./theme.js";
-import { useSyncedState } from "./hooks/useSyncedState.js";
-import { ThemeContext } from "./ThemeContext.js";
-import { useTheme } from "./useTheme.js";
+import { ThemeProviderBase } from "./internal/components/ThemeProviderBase.js";
+import { useThemeProvider } from "./internal/hooks/useThemeProvider.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import "react";
 import deepmerge from "deepmerge";
-const defaultDayScheme = "light";
-const defaultNightScheme = "dark";
+//#region src/ThemeProvider.tsx
+/**
+* @deprecated Use `ThemeProvider` from `@primer/react/next` to migrate away from JavaScript theme values.
+*/
 const ThemeProvider = (t0) => {
-	var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
-	const $ = c(34);
+	var _parentValue$theme;
+	const $ = c(14);
 	let children;
 	let props;
 	if ($[0] !== t0) {
@@ -22,134 +23,43 @@ const ThemeProvider = (t0) => {
 		children = $[1];
 		props = $[2];
 	}
-	const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
-	const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
-	const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : "day");
-	const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
-	const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
-	const systemColorMode = useSystemColorMode();
-	let resolvedColorMode;
+	const { parentValue, value } = useThemeProvider(props);
+	const theme$1 = (_parentValue$theme = parentValue.theme) !== null && _parentValue$theme !== void 0 ? _parentValue$theme : theme;
 	let t1;
-	if ($[3] !== colorMode || $[4] !== dayScheme || $[5] !== nightScheme || $[6] !== systemColorMode) {
-		resolvedColorMode = resolveColorMode(colorMode, systemColorMode);
-		t1 = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-		$[3] = colorMode;
-		$[4] = dayScheme;
-		$[5] = nightScheme;
-		$[6] = systemColorMode;
-		$[7] = resolvedColorMode;
-		$[8] = t1;
-	} else {
-		resolvedColorMode = $[7];
-		t1 = $[8];
-	}
-	const colorScheme = t1;
+	if ($[3] !== theme$1 || $[4] !== value.colorScheme) {
+		t1 = applyColorScheme(theme$1, value.colorScheme);
+		$[3] = theme$1;
+		$[4] = value.colorScheme;
+		$[5] = t1;
+	} else t1 = $[5];
+	const { resolvedTheme, resolvedColorScheme } = t1;
 	let t2;
-	if ($[9] !== colorScheme || $[10] !== theme$1) {
-		t2 = applyColorScheme(theme$1, colorScheme);
-		$[9] = colorScheme;
-		$[10] = theme$1;
-		$[11] = t2;
-	} else t2 = $[11];
-	const { resolvedTheme, resolvedColorScheme } = t2;
-	let t3;
-	if ($[12] !== colorMode || $[13] !== colorScheme || $[14] !== dayScheme || $[15] !== nightScheme || $[16] !== resolvedColorMode || $[17] !== resolvedColorScheme || $[18] !== resolvedTheme || $[19] !== setColorMode || $[20] !== setDayScheme || $[21] !== setNightScheme) {
-		t3 = {
+	if ($[6] !== resolvedColorScheme || $[7] !== resolvedTheme || $[8] !== value) {
+		t2 = {
+			...value,
 			theme: resolvedTheme,
-			colorScheme,
-			colorMode,
-			resolvedColorMode,
-			resolvedColorScheme,
-			dayScheme,
-			nightScheme,
-			setColorMode,
-			setDayScheme,
-			setNightScheme
+			resolvedColorScheme
 		};
-		$[12] = colorMode;
-		$[13] = colorScheme;
-		$[14] = dayScheme;
-		$[15] = nightScheme;
-		$[16] = resolvedColorMode;
-		$[17] = resolvedColorScheme;
-		$[18] = resolvedTheme;
-		$[19] = setColorMode;
-		$[20] = setDayScheme;
-		$[21] = setNightScheme;
-		$[22] = t3;
-	} else t3 = $[22];
-	const contextValue = t3;
-	if (props.contextOnly) {
-		let t4;
-		if ($[23] !== children || $[24] !== contextValue) {
-			t4 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
-				value: contextValue,
-				children
-			});
-			$[23] = children;
-			$[24] = contextValue;
-			$[25] = t4;
-		} else t4 = $[25];
-		return t4;
-	}
-	const t4 = colorMode === "auto" ? "auto" : colorScheme.includes("dark") ? "dark" : "light";
-	let t5;
-	if ($[26] !== children || $[27] !== dayScheme || $[28] !== nightScheme || $[29] !== t4) {
-		t5 = /*#__PURE__*/ jsx("div", {
-			"data-component": "ThemeProvider",
-			"data-color-mode": t4,
-			"data-light-theme": dayScheme,
-			"data-dark-theme": nightScheme,
-			children
-		});
-		$[26] = children;
-		$[27] = dayScheme;
-		$[28] = nightScheme;
-		$[29] = t4;
-		$[30] = t5;
-	} else t5 = $[30];
-	let t6;
-	if ($[31] !== contextValue || $[32] !== t5) {
-		t6 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
+		$[6] = resolvedColorScheme;
+		$[7] = resolvedTheme;
+		$[8] = value;
+		$[9] = t2;
+	} else t2 = $[9];
+	const contextValue = t2;
+	let t3;
+	if ($[10] !== children || $[11] !== contextValue || $[12] !== props.contextOnly) {
+		t3 = /*#__PURE__*/ jsx(ThemeProviderBase, {
+			contextOnly: props.contextOnly,
 			value: contextValue,
-			children: t5
+			children
 		});
-		$[31] = contextValue;
-		$[32] = t5;
-		$[33] = t6;
-	} else t6 = $[33];
-	return t6;
+		$[10] = children;
+		$[11] = contextValue;
+		$[12] = props.contextOnly;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
 };
-function subscribeToSystemColorMode(callback) {
-	var _window, _window$matchMedia;
-	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
-	media === null || media === void 0 || media.addEventListener("change", callback);
-	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
-}
-function useSystemColorMode() {
-	return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, _temp);
-}
-function _temp() {
-	return "day";
-}
-function getSystemColorMode() {
-	var _window2, _window2$matchMedia, _window2$matchMedia$c;
-	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
-}
-function resolveColorMode(colorMode, systemColorMode) {
-	switch (colorMode) {
-		case "auto": return systemColorMode;
-		default: return colorMode;
-	}
-}
-function chooseColorScheme(colorMode, dayScheme, nightScheme) {
-	switch (colorMode) {
-		case "day":
-		case "light": return dayScheme;
-		case "dark":
-		case "night": return nightScheme;
-	}
-}
 function applyColorScheme(theme, colorScheme) {
 	if (!theme.colorSchemes) return {
 		resolvedTheme: theme,

package/dist/internal/components/ThemeProviderBase.js

@@ -0,0 +1,50 @@
+import { ThemeContext } from "../../ThemeContext.js";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/components/ThemeProviderBase.tsx
+const ThemeProviderBase = (t0) => {
+	const $ = c(11);
+	const { children, contextOnly, value } = t0;
+	if (contextOnly) {
+		let t1;
+		if ($[0] !== children || $[1] !== value) {
+			t1 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
+				value,
+				children
+			});
+			$[0] = children;
+			$[1] = value;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	const t1 = value.colorMode === "auto" ? "auto" : value.colorScheme.includes("dark") ? "dark" : "light";
+	let t2;
+	if ($[3] !== children || $[4] !== t1 || $[5] !== value.dayScheme || $[6] !== value.nightScheme) {
+		t2 = /*#__PURE__*/ jsx("div", {
+			"data-component": "ThemeProvider",
+			"data-color-mode": t1,
+			"data-light-theme": value.dayScheme,
+			"data-dark-theme": value.nightScheme,
+			children
+		});
+		$[3] = children;
+		$[4] = t1;
+		$[5] = value.dayScheme;
+		$[6] = value.nightScheme;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t2 || $[9] !== value) {
+		t3 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
+			value,
+			children: t2
+		});
+		$[8] = t2;
+		$[9] = value;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+//#endregion
+export { ThemeProviderBase };

package/dist/internal/hooks/useThemeProvider.js

@@ -0,0 +1,71 @@
+import { useSyncedState } from "../../hooks/useSyncedState.js";
+import { useTheme } from "../../useTheme.js";
+import { c } from "react-compiler-runtime";
+import React from "react";
+//#region src/internal/hooks/useThemeProvider.ts
+const defaultColorMode = "day";
+const defaultDayScheme = "light";
+const defaultNightScheme = "dark";
+function useThemeProvider(props) {
+	var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
+	const $ = c(12);
+	const parentValue = useTheme();
+	const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : parentValue.colorMode) !== null && _ref !== void 0 ? _ref : defaultColorMode);
+	const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : parentValue.dayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
+	const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : parentValue.nightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
+	const systemColorMode = useSystemColorMode();
+	const resolvedColorMode = colorMode === "auto" ? systemColorMode : colorMode;
+	const colorScheme = resolvedColorMode === "day" || resolvedColorMode === "light" ? dayScheme : nightScheme;
+	let t0;
+	if ($[0] !== colorMode || $[1] !== colorScheme || $[2] !== dayScheme || $[3] !== nightScheme || $[4] !== resolvedColorMode || $[5] !== setColorMode || $[6] !== setDayScheme || $[7] !== setNightScheme) {
+		t0 = {
+			colorScheme,
+			colorMode,
+			resolvedColorMode,
+			dayScheme,
+			nightScheme,
+			setColorMode,
+			setDayScheme,
+			setNightScheme
+		};
+		$[0] = colorMode;
+		$[1] = colorScheme;
+		$[2] = dayScheme;
+		$[3] = nightScheme;
+		$[4] = resolvedColorMode;
+		$[5] = setColorMode;
+		$[6] = setDayScheme;
+		$[7] = setNightScheme;
+		$[8] = t0;
+	} else t0 = $[8];
+	const value = t0;
+	let t1;
+	if ($[9] !== parentValue || $[10] !== value) {
+		t1 = {
+			parentValue,
+			value
+		};
+		$[9] = parentValue;
+		$[10] = value;
+		$[11] = t1;
+	} else t1 = $[11];
+	return t1;
+}
+function subscribeToSystemColorMode(callback) {
+	var _window, _window$matchMedia;
+	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
+	media === null || media === void 0 || media.addEventListener("change", callback);
+	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
+}
+function useSystemColorMode() {
+	return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, _temp);
+}
+function _temp() {
+	return "day";
+}
+function getSystemColorMode() {
+	var _window2, _window2$matchMedia, _window2$matchMedia$c;
+	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
+}
+//#endregion
+export { useThemeProvider };