Color

function ColorModePanel({ mode }: { mode: "light" | "dark" }) {
  return (
    <div
      data-density-color-mode={mode}
      data-dn-depth="2"
      style={{
        display: "grid",
        gap: "10px",
        minWidth: 0,
        padding: "12px",
      }}
    >
      <div
        style={{
          color: "var(--dn-color-text)",
          display: "grid",
          gap: "10px",
        }}
      >
        <span
          data-dn-presentation="label"
          data-dn-size="xs"
          style={{ fontWeight: 500 }}
        >
          {mode}
        </span>
        <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
          <span data-dn-presentation="button" data-dn-emphasis="primary">
            Primary
          </span>
        </div>
      </div>
    </div>
  );
}

export default function ColorModeExample() {
  return (
    <div style={{ width: "100%" }}>
      <div
        style={{
          display: "grid",
          gap: "12px",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          width: "100%",
        }}
      >
        <ColorModePanel mode="light" />
        <ColorModePanel mode="dark" />
      </div>
    </div>
  );
}