useAccessibleColor

import { useAccessibleColor } from "@servicetitan/anvil2";

function ColorfulBadge({ color }) {
  const colors = useAccessibleColor(color, "light");

  return (
    <span
      style={{
        color: colors.foreground,
        backgroundColor: colors.background,
        borderColor: colors.border,
      }}
    >
      Badge Text
    </span>
  );
}

function CategoryBadge({ category }) {
  const categoryColors = {
    urgent: "#FF0000",
    warning: "#FFA500",
    info: "#0066CC",
    success: "#00AA00",
  };

  const colors = useAccessibleColor(categoryColors[category], "light");

  return (
    <span
      style={{
        color: colors.foreground,
        backgroundColor: colors.background,
        border: `1px solid ${colors.border}`,
        padding: "4px 8px",
        borderRadius: "4px",
      }}
    >
      {category}
    </span>
  );
}

function ThemedTag({ color }) {
  const { mode } = usePrefersColorScheme();
  const colors = useAccessibleColor(color, mode);

  return (
    <span
      style={{
        color: colors.foreground,
        backgroundColor: colors.background,
      }}
    >
      Tag
    </span>
  );
}

function CustomColorPicker({ userColor }) {
  const colors = useAccessibleColor(userColor, "light");

  return (
    <div>
      <div
        style={{
          backgroundColor: colors.background,
          color: colors.foreground,
          padding: "16px",
        }}
      >
        Preview with accessible text
      </div>
      <Text size="small" subdued>
        Text color adjusted for {">"}4.5:1 contrast ratio
      </Text>
    </div>
  );
}