// Use Shoelace CSS variables in Tailwind theme for consistency
function makeTheme() {
  // Map color palettes:
  const colors = [
    "gray",
    "red",
    "yellow",
    "green",
    "blue",
    "indigo",
    "purple",
    "pink",
  ];
  // Map color grading:
  const colorGrades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];

  const makeColorPalette = (color) =>
    colorGrades.reduce((acc, v) => ({
      ...acc,
      [v]: `var(--sl-color-${color}-${v})`,
    }));

  return {
    colors: {
      current: "currentColor",
      ...colors.map(makeColorPalette),
      primary: `var(--primary)`,
      success: `var(--success)`,
      warning: `var(--warning)`,
      danger: `var(--danger)`,
    },
    fontFamily: {
      sans: `var(--sl-font-sans)`,
      serif: `var(--sl-font-serif)`,
    },
    borderRadius: {
      sm: `var(--sl-border-radius-small)`,
      DEFAULT: `var(--sl-border-radius-medium)`,
      md: `var(--sl-border-radius-medium)`,
      lg: `var(--sl-border-radius-large)`,
      xl: `var(--sl-border-radius-x-large)`,
    },
    boxShadow: {
      sm: `var(--sl-shadow-small)`,
      DEFAULT: `var(--sl-shadow-medium)`,
      md: `var(--sl-shadow-medium)`,
      lg: `var(--sl-shadow-large)`,
      xl: `var(--sl-shadow-x-large)`,
    },
    aspectRatio: {
      "4/3": "4 / 3", // For Browsertrix watch/replay
    },
  };
}

module.exports = {
  theme: {
    extend: makeTheme(),
  },

  content: ["./**/*.html", "./src/**/*.{ts,js}"],

  extract: {
    include: ["./src/**/*.{ts,js}"],
  },
};