This is a live preview component that updates in real-time as you modify the theme settings. You can see how colors, fonts, spacing, and borders change instantly.
export const theme = {
"colors": {
"primary": "#0070f3",
"secondary": "#ff4081",
"background": "#ffffff",
"text": "#333333",
"textSecondary": "#666666",
"border": "#eaeaea",
"borderHover": "#cccccc"
},
"fontSizes": {
"small": "12px",
"medium": "16px",
"large": "20px",
"xlarge": "24px",
"xxlarge": "32px"
},
"spacings": {
"small": "8px",
"medium": "16px",
"large": "24px",
"xlarge": "48px"
},
"borders": {
"width": "1px",
"radius": "4px"
},
"shadows": {
"small": "0 2px 4px rgba(0,0,0,0.1)"
}
};