import { Meta } from "@storybook/addon-docs";
import { theme } from "../theme";

<Meta title="Tokens/Shadows" />

<h1>Shadows</h1>
<div
  style={{
    display: "grid",
    gridTemplateColumns: "repeat(5, 1fr)",
    gridGap: "50px",
    padding: "20px",
  }}
>
  {[100, 200, 300, 400, 500].map((size) => (
    <div
      key={size}
      style={{
        borderRadius: "14px",
        WebkitBoxShadow: theme.shadow[`S${size}`],
        boxShadow: theme.shadow[`S${size}`],
        height: "130px",
        color: theme.palette.N200,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        fontWeight: "600",
      }}
    >
      S{size}
    </div>
  ))}
</div>
