import { h } from "@stencil/core";
import scenario from "./sqm-brand.feature";
export default {
  title: "Components/Brand",
  parameters: {
    scenario,
  },
};
const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
    h("sl-button", { type: "default" }, "Default"),
    h("sl-button", { type: "primary" }, "Primary"),
    h("sl-button", { type: "success" }, "Success"),
    h("sl-button", { type: "neutral" }, "Neutral"),
    h("sl-button", { type: "warning" }, "Warning"),
    h("sl-button", { type: "danger" }, "Danger")),
  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
    h("sl-badge", { type: "primary" }, "Primary"),
    h("sl-badge", { type: "success" }, "Success"),
    h("sl-badge", { type: "neutral" }, "Neutral"),
    h("sl-badge", { type: "warning" }, "Warning"),
    h("sl-badge", { type: "danger" }, "Danger")),
  h("div", { class: "color-palette" },
    h("div", { class: "color-palette__name" },
      "Primary",
      h("br", null),
      h("code", null,
        "--sl-color-primary-",
        h("em", null, `{n}`))),
    h("div", { style: { display: "flex", gap: "5px" } },
      h(ColorSwatch, { depth: 50 }),
      h(ColorSwatch, { depth: 100 }),
      h(ColorSwatch, { depth: 200 }),
      h(ColorSwatch, { depth: 300 }),
      h(ColorSwatch, { depth: 400 }),
      h(ColorSwatch, { depth: 500 }),
      h(ColorSwatch, { depth: 600 }),
      h(ColorSwatch, { depth: 700 }),
      h(ColorSwatch, { depth: 800 }),
      h(ColorSwatch, { depth: 900 }),
      h(ColorSwatch, { depth: 950 })))));
export const Examples = () => {
  return (h("div", null,
    h(SampleComponents, null),
    h("sqm-brand", { "brand-color": "#FF0000" },
      h(SampleComponents, null)),
    h("sqm-brand", { "brand-color": "#00FF00" },
      h(SampleComponents, null)),
    h("sqm-brand", { "brand-color": "#0000FF" },
      h(SampleComponents, null)),
    h("sqm-brand", { "brand-color": "#000000" },
      h(SampleComponents, null))));
};
export const Nested = () => {
  return (h("div", null,
    "Default ",
    h(SampleComponents, null),
    h("sqm-brand", { "brand-color": "#FF0000" },
      "Red:",
      h(SampleComponents, null),
      h("sqm-brand", { "brand-color": "#00FF00" },
        "Green:",
        h(SampleComponents, null),
        h("sqm-brand", { "brand-color": "#0000FF" },
          "Blue:",
          h(SampleComponents, null),
          h("sqm-brand", { "brand-color": "#000000" },
            "Black:",
            h(SampleComponents, null)))))));
};
function ColorSwatch({ depth }) {
  return (h("div", { style: {
      backgroundColor: `var(--sl-color-primary-${depth})`,
      color: `var(--sl-color-neutral-${1000 - depth})`,
      width: "50px",
      height: "50px",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    } }, depth));
}
export const Fonts = () => {
  return (h("div", null,
    h(SampleComponents, null),
    h("sqm-brand", { "brand-font": "Roboto" },
      "Roboto",
      h(SampleComponents, null)),
    h("sqm-brand", { "brand-font": "Open Sans" },
      "Open Sans",
      h(SampleComponents, null)),
    h("sqm-brand", { "brand-font": "Lato" },
      "Lato",
      h(SampleComponents, null)),
    h("sqm-brand", { "brand-font": "Oswald" },
      "Oswald",
      h(SampleComponents, null))));
};
