@primer/react-brand 0.76.0 → 0.77.0-rc.d45b2bb1

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.76.0)
+# Primer Brand docs (v0.77.0-rc.d45b2bb1)
 
-These docs are bundled with `@primer/react-brand@0.76.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.77.0-rc.d45b2bb1` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/docs/introduction/theming.md

@@ -43,6 +43,8 @@ Primer Brand supports the following color modes through a dedicated prop by appl
 | Light | `light`                | `data-color-mode="light"` |
 | Dark  | `dark`                 | `data-color-mode="dark"`  |
 
+In-product appearance modes such as `dark_dimmed` and `light_high_contrast` resolve internally to Primer Brand's `dark` or `light` defaults. The resolved value is returned by `useTheme().colorMode` and applied to `data-color-mode`.
+
 The `ThemeProvider` applies the data attributes and handles state-changes internally.
 
 **`ThemeProvider` will apply `light` mode by default if the `colorMode` is not specified. This is recommended for top-level placement.**

package/esm/ThemeProvider/ThemeProvider.d.ts

@@ -4,9 +4,10 @@ export declare enum ColorModesEnum {
     DARK = "dark",
     AUTO = "auto"
 }
-export type ColorMode = `${ColorModesEnum}`;
+export type ColorMode = `${ColorModesEnum}` | (string & {});
+export type ResolvedColorMode = ColorModesEnum.LIGHT | ColorModesEnum.DARK;
 export type ThemeContextProps = {
-    colorMode: ColorMode;
+    colorMode: ResolvedColorMode;
     availableColorModes: ColorModesEnum[];
 };
 export type ThemeProviderProps = {

package/esm/ThemeProvider/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA8C,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAE3G,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,SAAS,CAAA;IAKpB,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAIlC,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAqBhH"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,cAAc,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAA;AAGhG,oBAAY,cAAc;IACxB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,MAAM,MAAM,SAAS,GAAG,GAAG,cAAc,EAAE,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAC3D,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAK,GAAG,cAAc,CAAC,IAAI,CAAA;AAW1E,MAAM,MAAM,iBAAiB,GAAG;IAI9B,SAAS,EAAE,iBAAiB,CAAA;IAK5B,mBAAmB,EAAE,cAAc,EAAE,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAGlC,eAAO,MAAM,YAAY,kCAGvB,CAAA;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAC,SAAuB,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,qBAmBhH"}

package/esm/ThemeProvider/ThemeProvider.js

@@ -1,35 +1,38 @@
-import { createContext as e, useEffect as t, useMemo as n, useState as r } from "react";
+import e from "../hooks/useIsomorphicLayoutEffect.js";
+import { createContext as t, useMemo as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/ThemeProvider/ThemeProvider.tsx
 var a = /* @__PURE__ */ function(e) {
 	return e.LIGHT = "light", e.DARK = "dark", e.AUTO = "auto", e;
-}({}), o = "light", s = e({
-	colorMode: o,
+}({});
+function o(e) {
+	return e === "dark" || e.startsWith("dark_") ? "dark" : "light";
+}
+var s = "light", c = t({
+	colorMode: s,
 	availableColorModes: Object.values(a)
 });
-function c({ colorMode: e = o, children: c, ...l }) {
-	let [f, p] = r(e), m = n(() => Object.values(a), []);
-	return t(() => (e === "auto" ? p(u()) : f !== e && p(e), d(p)), [
-		e,
-		f,
-		p
-	]), /* @__PURE__ */ i(s.Provider, {
+function l({ colorMode: t = s, children: l, ...u }) {
+	let [p, m] = r(s), h = t === "auto" ? p : o(t), g = n(() => Object.values(a), []);
+	return e(() => {
+		if (t === "auto") return m(d()), f(m);
+	}, [t]), /* @__PURE__ */ i(c.Provider, {
 		value: {
-			colorMode: f,
-			availableColorModes: m
+			colorMode: h,
+			availableColorModes: g
 		},
 		children: /* @__PURE__ */ i("div", {
-			"data-color-mode": f,
-			...l,
-			children: c
+			"data-color-mode": h,
+			...u,
+			children: l
 		})
 	});
 }
-var l = () => window.matchMedia("(prefers-color-scheme: dark)"), u = () => l().matches ? "dark" : "light", d = (e) => {
-	let t = l(), n = (t) => e(t.matches ? "dark" : "light");
+var u = () => window.matchMedia("(prefers-color-scheme: dark)"), d = () => u().matches ? "dark" : "light", f = (e) => {
+	let t = u(), n = (t) => e(t.matches ? "dark" : "light");
 	return t.addEventListener("change", n), () => t.removeEventListener("change", n);
 };
 //#endregion
-export { a as ColorModesEnum, s as ThemeContext, c as ThemeProvider };
+export { a as ColorModesEnum, c as ThemeContext, l as ThemeProvider };
 
 //# sourceMappingURL=ThemeProvider.js.map

package/esm/ThemeProvider/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, useEffect, createContext, HTMLAttributes, PropsWithChildren} from 'react'\n\nexport enum ColorModesEnum {\n  LIGHT = 'light',\n  DARK = 'dark',\n  AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}`\n\nexport type ThemeContextProps = {\n  /*\n   * The active color mode of the parent ThemeProvider.\n   */\n  colorMode: ColorMode\n\n  /*\n   * List of available color modes.\n   */\n  availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n  colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  colorMode: defaultMode,\n  availableColorModes: Object.values(ColorModesEnum),\n})\n\n/**\n * ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n  const [activeMode, setActiveMode] = useState(colorMode)\n  const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n  useEffect(() => {\n    if (colorMode === ColorModesEnum.AUTO) {\n      setActiveMode(getActiveAutoMode())\n    } else if (activeMode !== colorMode) {\n      setActiveMode(colorMode)\n    }\n\n    return handleSystemPreferenceChange(setActiveMode)\n  }, [colorMode, activeMode, setActiveMode])\n\n  return (\n    <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n      <div data-color-mode={activeMode} {...rest}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = () => {\n  const mediaQueryList: MediaQueryList = queryBrowserPreference()\n  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = callback => {\n  const mediaQueryList = queryBrowserPreference()\n  const changeHandler = event => callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n  mediaQueryList.addEventListener('change', changeHandler)\n  return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":";;;AAEA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,OAAA,QACA,EAAA,OAAA;AACF,EAAA,CAAA,CAAA,GAoBM,IAAA,SAEO,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,CAAc;AACnD,CAAC;AAKD,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAY,KAAiB,EAAS,CAAS,GAChD,IAAsB,QAAc,OAAO,OAAO,CAAc,GAAG,CAAC,CAAC;CAY3E,OAVA,SACM,MAAA,SACF,EAAc,EAAkB,CAAC,IACxB,MAAe,KACxB,EAAc,CAAS,GAGlB,EAA6B,CAAa,IAChD;EAAC;EAAW;EAAY;CAAa,CAAC,GAGvC,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;EAAmB;YACvE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,IAAM,UAA+B,OAAO,WAAW,8BAAgD,GAEjG,UACmC,EAChC,CAAA,CAAe,UAAA,SAAA,SAGlB,KAA+B,MAAY;CAC/C,IAAM,IAAiB,EAAuB,GACxC,KAAgB,MAAS,EAAS,EAAM,UAAA,SAAA,OAAoD;CAElG,OADA,EAAe,iBAAiB,UAAU,CAAa,SAC1C,EAAe,oBAAoB,UAAU,CAAa;AACzE"}
+{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["import React, {useState, useMemo, createContext, HTMLAttributes, PropsWithChildren} from 'react'\nimport useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'\n\nexport enum ColorModesEnum {\n  LIGHT = 'light',\n  DARK = 'dark',\n  AUTO = 'auto',\n}\n\nexport type ColorMode = `${ColorModesEnum}` | (string & {})\nexport type ResolvedColorMode = ColorModesEnum.LIGHT | ColorModesEnum.DARK\n\n/**\n * Resolves a color mode to the light or dark theme it should use.\n */\nfunction resolveColorMode(mode: string): ResolvedColorMode {\n  return mode === ColorModesEnum.DARK || mode.startsWith(`${ColorModesEnum.DARK}_`)\n    ? ColorModesEnum.DARK\n    : ColorModesEnum.LIGHT\n}\n\nexport type ThemeContextProps = {\n  /*\n   * The active color mode of the parent ThemeProvider.\n   */\n  colorMode: ResolvedColorMode\n\n  /*\n   * List of available color modes.\n   */\n  availableColorModes: ColorModesEnum[]\n}\n\nexport type ThemeProviderProps = {\n  colorMode?: ColorMode\n} & HTMLAttributes<HTMLDivElement>\n\nconst defaultMode = ColorModesEnum.LIGHT\nexport const ThemeContext = createContext<ThemeContextProps>({\n  colorMode: defaultMode,\n  availableColorModes: Object.values(ColorModesEnum),\n})\n\n/**\n * ThemeProvider is used to provide theme-related context to its child components.\n */\nexport function ThemeProvider({colorMode = defaultMode, children, ...rest}: PropsWithChildren<ThemeProviderProps>) {\n  const [autoMode, setAutoMode] = useState<ResolvedColorMode>(defaultMode)\n  const activeMode = colorMode === ColorModesEnum.AUTO ? autoMode : resolveColorMode(colorMode)\n  const availableColorModes = useMemo(() => Object.values(ColorModesEnum), [])\n\n  useIsomorphicLayoutEffect(() => {\n    if (colorMode !== ColorModesEnum.AUTO) return\n\n    setAutoMode(getActiveAutoMode())\n    return handleSystemPreferenceChange(setAutoMode)\n  }, [colorMode])\n\n  return (\n    <ThemeContext.Provider value={{colorMode: activeMode, availableColorModes}}>\n      <div data-color-mode={activeMode} {...rest}>\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  )\n}\n\nconst queryBrowserPreference = () => window.matchMedia(`(prefers-color-scheme: ${ColorModesEnum.DARK})`)\n\nconst getActiveAutoMode = (): ResolvedColorMode => {\n  const mediaQueryList: MediaQueryList = queryBrowserPreference()\n  return mediaQueryList.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT\n}\n\nconst handleSystemPreferenceChange = (callback: (mode: ResolvedColorMode) => void) => {\n  const mediaQueryList = queryBrowserPreference()\n  const changeHandler = (event: MediaQueryListEvent) =>\n    callback(event.matches ? ColorModesEnum.DARK : ColorModesEnum.LIGHT)\n  mediaQueryList.addEventListener('change', changeHandler)\n  return () => mediaQueryList.removeEventListener('change', changeHandler)\n}\n"],"mappings":";;;;AAGA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,OAAA,QACA,EAAA,OAAA;AACF,EAAA,CAAA,CAAA;AAQA,SAAS,EAAiB,GAAiC;CACzD,OAAO,MAAA,UAAgC,EAAK,WAAW,OAAyB,IAAA,SAAA;AAGlF;AAkBA,IAAM,IAAA,SACO,IAAe,EAAiC;CAC3D,WAAW;CACX,qBAAqB,OAAO,OAAO,CAAc;AACnD,CAAC;AAKD,SAAgB,EAAc,EAAC,eAAY,GAAa,aAAU,GAAG,KAA8C;CACjH,IAAM,CAAC,GAAU,KAAe,EAA4B,CAAW,GACjE,IAAa,MAAA,SAAoC,IAAW,EAAiB,CAAS,GACtF,IAAsB,QAAc,OAAO,OAAO,CAAc,GAAG,CAAC,CAAC;CAS3E,OAPA,QAAgC;EAC1B,UAAA,QAGJ,OADA,EAAY,EAAkB,CAAC,GACxB,EAA6B,CAAW;CACjD,GAAG,CAAC,CAAS,CAAC,GAGZ,kBAAC,EAAa,UAAd;EAAuB,OAAO;GAAC,WAAW;GAAY;EAAmB;YACvE,kBAAC,OAAD;GAAK,mBAAiB;GAAY,GAAI;GACnC;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,IAAM,UAA+B,OAAO,WAAW,8BAAgD,GAEjG,UACmC,EAChC,CAAA,CAAe,UAAA,SAAA,SAGlB,KAAgC,MAAgD;CACpF,IAAM,IAAiB,EAAuB,GACxC,KAAiB,MACrB,EAAS,EAAM,UAAA,SAAA,OAAoD;CAErE,OADA,EAAe,iBAAiB,UAAU,CAAa,SAC1C,EAAe,oBAAoB,UAAU,CAAa;AACzE"}

package/lib/ThemeProvider/ThemeProvider.d.ts

@@ -4,9 +4,10 @@ export declare enum ColorModesEnum {
     DARK = "dark",
     AUTO = "auto"
 }
-export type ColorMode = `${ColorModesEnum}`;
+export type ColorMode = `${ColorModesEnum}` | (string & {});
+export type ResolvedColorMode = ColorModesEnum.LIGHT | ColorModesEnum.DARK;
 export type ThemeContextProps = {
-    colorMode: ColorMode;
+    colorMode: ResolvedColorMode;
     availableColorModes: ColorModesEnum[];
 };
 export type ThemeProviderProps = {