first commit

examples/cms-payload/components/BackgroundColor/index.module.scss

@@ -0,0 +1,9 @@
+.white {
+  color: var(--color-base-1000);
+  background-color: var(--color-base-0);
+}
+
+.black {
+  color: var(--color-base-0);
+  background-color: var(--color-base-1000);
+}

examples/cms-payload/components/BackgroundColor/index.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React, { useContext, createContext } from "react";
+import { VerticalPadding, VerticalPaddingOptions } from "../VerticalPadding";
+import classes from "./index.module.scss";
+
+type BackgroundColorField = "white" | "black";
+
+export const BackgroundColorContext =
+  createContext<BackgroundColorField>("white");
+
+export const useBackgroundColor = (): BackgroundColorField =>
+  useContext(BackgroundColorContext);
+
+type Props = {
+  color?: BackgroundColorField;
+  paddingTop?: VerticalPaddingOptions;
+  paddingBottom?: VerticalPaddingOptions;
+  className?: string;
+  children?: React.ReactNode;
+  id?: string;
+};
+
+export const BackgroundColor: React.FC<Props> = (props) => {
+  const {
+    id,
+    className,
+    children,
+    paddingTop,
+    paddingBottom,
+    color = "white",
+  } = props;
+
+  return (
+    <div
+      id={id}
+      className={[classes[color], className].filter(Boolean).join(" ")}
+    >
+      <BackgroundColorContext.Provider value={color}>
+        <VerticalPadding top={paddingTop} bottom={paddingBottom}>
+          {children}
+        </VerticalPadding>
+      </BackgroundColorContext.Provider>
+    </div>
+  );
+};