docs(examples): fix dark mode props

VdustR · VdustR · commit d37c603ef107 · 2025-10-09T00:03:32.000+08:00
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -14,6 +14,7 @@
     "@emotion/react": "catalog:",
     "@emotion/styled": "catalog:",
     "@mui/system": "catalog:",
+    "es-toolkit": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
diff --git a/packages/examples/src/examples/02_integration/01_emotion/01_emotion_css/index.stories.tsx b/packages/examples/src/examples/02_integration/01_emotion/01_emotion_css/index.stories.tsx
@@ -3,8 +3,8 @@ import { css, cx } from "@emotion/css";
 import * as React from "react";
 import {
   gruvboxCssVarBaseDefinition,
-  gruvboxCssVarDarkDefinition,
-  gruvboxCssVarLightDefinition,
+  gruvboxCssVarSemanticDefinition,
+  gruvboxDarkCssProps,
 } from "../../../styles";
 
 const classNameRecord = {
@@ -19,9 +19,9 @@ const classNameRecord = {
   demoSingle: css({
     label: "demoSingle",
     ...gruvboxCssVarBaseDefinition.cssProps,
-    ...gruvboxCssVarLightDefinition.cssProps,
+    ...gruvboxCssVarSemanticDefinition.cssProps,
     "&.dark": {
-      ...gruvboxCssVarDarkDefinition.cssProps,
+      ...gruvboxDarkCssProps,
     },
     display: "flex",
     flexDirection: "row",
@@ -32,19 +32,19 @@ const classNameRecord = {
   }),
   button: css({
     label: "button",
-    color: gruvboxCssVarDarkDefinition.getValue("fg"),
-    backgroundColor: gruvboxCssVarDarkDefinition.getValue("bg"),
+    color: gruvboxCssVarSemanticDefinition.getValue("fg"),
+    backgroundColor: gruvboxCssVarSemanticDefinition.getValue("bg"),
     border: `1px solid currentColor`,
     borderRadius: "4px",
     padding: "8px 16px",
     fontSize: "16px",
     "&:not(:disabled)": {
       cursor: "pointer",
       "&.warning": {
-        color: gruvboxCssVarDarkDefinition.getValue("warning"),
+        color: gruvboxCssVarSemanticDefinition.getValue("warning"),
       },
       "&.error": {
-        color: gruvboxCssVarDarkDefinition.getValue("error"),
+        color: gruvboxCssVarSemanticDefinition.getValue("error"),
       },
       transition: "all 0.1s ease-in-out",
       "&:hover": {
diff --git a/packages/examples/src/examples/02_integration/01_emotion/02_css_prop/index.stories.tsx b/packages/examples/src/examples/02_integration/01_emotion/02_css_prop/index.stories.tsx
@@ -4,8 +4,8 @@ import { css } from "@emotion/react";
 import * as React from "react";
 import {
   gruvboxCssVarBaseDefinition,
-  gruvboxCssVarDarkDefinition,
-  gruvboxCssVarLightDefinition,
+  gruvboxCssVarSemanticDefinition,
+  gruvboxDarkCssProps,
 } from "../../../styles";
 
 const serializedStylesRecord = {
@@ -20,9 +20,9 @@ const serializedStylesRecord = {
   demoSingle: css({
     label: "demoSingle",
     ...gruvboxCssVarBaseDefinition.cssProps,
-    ...gruvboxCssVarLightDefinition.cssProps,
+    ...gruvboxCssVarSemanticDefinition.cssProps,
     "&.dark": {
-      ...gruvboxCssVarDarkDefinition.cssProps,
+      ...gruvboxDarkCssProps,
     },
     display: "flex",
     flexDirection: "row",
@@ -33,19 +33,19 @@ const serializedStylesRecord = {
   }),
   button: css({
     label: "button",
-    color: gruvboxCssVarDarkDefinition.getValue("fg"),
-    backgroundColor: gruvboxCssVarDarkDefinition.getValue("bg"),
+    color: gruvboxCssVarSemanticDefinition.getValue("fg"),
+    backgroundColor: gruvboxCssVarSemanticDefinition.getValue("bg"),
     border: `1px solid currentColor`,
     borderRadius: "4px",
     padding: "8px 16px",
     fontSize: "16px",
     "&:not(:disabled)": {
       cursor: "pointer",
       "&.warning": {
-        color: gruvboxCssVarDarkDefinition.getValue("warning"),
+        color: gruvboxCssVarSemanticDefinition.getValue("warning"),
       },
       "&.error": {
-        color: gruvboxCssVarDarkDefinition.getValue("error"),
+        color: gruvboxCssVarSemanticDefinition.getValue("error"),
       },
       transition: "all 0.1s ease-in-out",
       "&:hover": {
diff --git a/packages/examples/src/examples/02_integration/02_mui_sx_prop/index.stories.tsx b/packages/examples/src/examples/02_integration/02_mui_sx_prop/index.stories.tsx
@@ -4,8 +4,8 @@ import { Box } from "@mui/system";
 import * as React from "react";
 import {
   gruvboxCssVarBaseDefinition,
-  gruvboxCssVarDarkDefinition,
-  gruvboxCssVarLightDefinition,
+  gruvboxCssVarSemanticDefinition,
+  gruvboxDarkCssProps,
 } from "../../styles";
 
 const sxPropsRecord = {
@@ -20,9 +20,9 @@ const sxPropsRecord = {
   demoSingle: {
     label: "demoSingle",
     ...gruvboxCssVarBaseDefinition.cssProps,
-    ...gruvboxCssVarLightDefinition.cssProps,
+    ...gruvboxCssVarSemanticDefinition.cssProps,
     "&.dark": {
-      ...gruvboxCssVarDarkDefinition.cssProps,
+      ...gruvboxDarkCssProps,
     },
     display: "flex",
     flexDirection: "row",
@@ -33,19 +33,19 @@ const sxPropsRecord = {
   },
   button: {
     label: "button",
-    color: gruvboxCssVarDarkDefinition.getValue("fg"),
-    backgroundColor: gruvboxCssVarDarkDefinition.getValue("bg"),
+    color: gruvboxCssVarSemanticDefinition.getValue("fg"),
+    backgroundColor: gruvboxCssVarSemanticDefinition.getValue("bg"),
     border: `1px solid currentColor`,
     borderRadius: "4px",
     padding: "8px 16px",
     fontSize: "16px",
     "&:not(:disabled)": {
       cursor: "pointer",
       "&.warning": {
-        color: gruvboxCssVarDarkDefinition.getValue("warning"),
+        color: gruvboxCssVarSemanticDefinition.getValue("warning"),
       },
       "&.error": {
-        color: gruvboxCssVarDarkDefinition.getValue("error"),
+        color: gruvboxCssVarSemanticDefinition.getValue("error"),
       },
       transition: "all 0.1s ease-in-out",
       "&:hover": {
diff --git a/packages/examples/src/examples/styles.ts b/packages/examples/src/examples/styles.ts
@@ -4,6 +4,8 @@ import {
   slugify,
 } from "@crescendolab/css-var-ts";
 
+import { mapKeys } from "es-toolkit";
+
 const gruvboxCssVarUtils = createCssVarUtils({
   recordKeyToCssVarKey: (recordKey) =>
     `--gruvbox-${slugify(recordKey)}-${randomString(8)}` as const,
@@ -79,28 +81,32 @@ const gruvboxCssVarBaseDefinition = gruvboxCssVarUtils.define({
   gruvboxLightFg4: "#7c6f64",
 });
 
-const gruvboxCssVarDarkDefinition = gruvboxCssVarUtils.define({
-  fg: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkFg"),
-  bg: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkBg"),
-  error: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkRed"),
-  warning: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkYellow"),
-  primary: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkBlue"),
-});
-
-const gruvboxCssVarLightDefinition = gruvboxCssVarUtils.define({
+const gruvboxCssVarSemanticDefinition = gruvboxCssVarUtils.define({
   fg: gruvboxCssVarBaseDefinition.getValue("gruvboxLightFg"),
   bg: gruvboxCssVarBaseDefinition.getValue("gruvboxLightBg"),
   error: gruvboxCssVarBaseDefinition.getValue("gruvboxLightRed"),
   warning: gruvboxCssVarBaseDefinition.getValue("gruvboxLightYellow"),
   primary: gruvboxCssVarBaseDefinition.getValue("gruvboxLightBlue"),
-} satisfies Record<
-  keyof typeof gruvboxCssVarDarkDefinition.cssVarRecord,
-  string
->);
+});
+
+const gruvboxDarkCssProps: typeof gruvboxCssVarSemanticDefinition.cssProps =
+  mapKeys(
+    {
+      fg: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkFg"),
+      bg: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkBg"),
+      error: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkRed"),
+      warning: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkYellow"),
+      primary: gruvboxCssVarBaseDefinition.getValue("gruvboxDarkBlue"),
+    } satisfies Record<
+      keyof typeof gruvboxCssVarSemanticDefinition.cssVarRecord,
+      string
+    >,
+    (_value, key) => gruvboxCssVarSemanticDefinition.getKey(key),
+  );
 
 export {
   gruvboxCssVarBaseDefinition,
-  gruvboxCssVarDarkDefinition,
-  gruvboxCssVarLightDefinition,
+  gruvboxCssVarSemanticDefinition,
   gruvboxCssVarUtils,
+  gruvboxDarkCssProps,
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -32,7 +32,7 @@ catalog:
   babel-plugin-react-compiler: 19.1.0-rc.3
   commitizen: ^4.3.1
   cspell: ^9.2.1
-  es-toolkit: ^1.38.0
+  es-toolkit: ^1.39.10
   eslint: ^9.36.0
   eslint-config-prettier: ^10.1.8
   eslint-plugin-package-json: ^0.56.3
