Step 1.3: Configure theme.json with brand colors and typography

This commit is contained in:
Hanson.xyz Dev
2025-11-28 16:06:14 -06:00
parent 7650362efe
commit 9f88802dee
2 changed files with 245 additions and 1 deletions
+1 -1
View File
@@ -407,4 +407,4 @@ UNLOCK TABLES;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;
-- Dump completed on 2025-11-28 16:05:23
-- Dump completed on 2025-11-28 16:06:14
+244
View File
@@ -0,0 +1,244 @@
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": true,
"customDuotone": false,
"customGradient": false,
"defaultGradients": false,
"defaultPalette": false,
"duotone": [],
"gradients": [],
"palette": [
{
"slug": "hp-dark",
"color": "#0A0A0A",
"name": "Background Dark"
},
{
"slug": "hp-card",
"color": "#161616",
"name": "Card Background"
},
{
"slug": "hp-accent",
"color": "#9F3730",
"name": "Accent Primary"
},
{
"slug": "hp-accent-hover",
"color": "#C8473F",
"name": "Accent Hover"
},
{
"slug": "hp-accent-light",
"color": "#BF524B",
"name": "Accent Light"
},
{
"slug": "hp-text",
"color": "#F5F5F5",
"name": "Text Primary"
},
{
"slug": "hp-text-muted",
"color": "#B0B0B0",
"name": "Text Muted"
},
{
"slug": "hp-border",
"color": "#2A2A2A",
"name": "Border"
},
{
"slug": "hp-success",
"color": "#2E7D32",
"name": "Success"
},
{
"slug": "hp-warning",
"color": "#F9A825",
"name": "Warning"
},
{
"slug": "hp-sold",
"color": "#757575",
"name": "Sold/Muted"
},
{
"slug": "white",
"color": "#FFFFFF",
"name": "White"
},
{
"slug": "black",
"color": "#000000",
"name": "Black"
}
]
},
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
},
"spacing": {
"units": ["px", "rem", "%", "vh", "vw"]
},
"typography": {
"customFontSize": true,
"fluid": true,
"fontFamilies": [
{
"fontFamily": "'Abril Fatface', Georgia, serif",
"slug": "display",
"name": "Display (Abril Fatface)"
},
{
"fontFamily": "'Inter', 'Droid Sans', Arial, sans-serif",
"slug": "body",
"name": "Body (Inter)"
}
],
"fontSizes": [
{
"slug": "small",
"size": "0.875rem",
"name": "Small"
},
{
"slug": "medium",
"size": "1rem",
"name": "Medium"
},
{
"slug": "large",
"size": "1.25rem",
"name": "Large"
},
{
"slug": "x-large",
"size": "1.5rem",
"name": "Extra Large"
},
{
"slug": "xx-large",
"size": "2.25rem",
"name": "2X Large"
},
{
"slug": "huge",
"size": "3rem",
"name": "Huge"
}
]
},
"blocks": {
"core/button": {
"border": {
"radius": true
}
}
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--hp-dark)",
"text": "var(--wp--preset--color--hp-text-muted)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--body)",
"fontSize": "var(--wp--preset--font-size--medium)",
"lineHeight": "1.6"
},
"spacing": {
"blockGap": "1.5rem"
},
"elements": {
"heading": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--display)",
"fontWeight": "400",
"lineHeight": "1.2"
},
"color": {
"text": "var(--wp--preset--color--hp-text)"
}
},
"h1": {
"typography": {
"fontSize": "3rem"
}
},
"h2": {
"typography": {
"fontSize": "2.25rem"
}
},
"h3": {
"typography": {
"fontSize": "1.875rem"
}
},
"h4": {
"typography": {
"fontSize": "1.5rem"
}
},
"h5": {
"typography": {
"fontSize": "1.25rem"
}
},
"h6": {
"typography": {
"fontSize": "1.125rem"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--hp-accent-light)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--hp-accent-hover)"
}
}
},
"button": {
"color": {
"background": "var(--wp--preset--color--hp-accent)",
"text": "var(--wp--preset--color--white)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--body)",
"fontWeight": "600",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0.05em"
},
"border": {
"radius": "0.25rem"
},
":hover": {
"color": {
"background": "var(--wp--preset--color--hp-accent-hover)"
}
}
}
},
"blocks": {
"core/site-title": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--display)"
}
},
"core/navigation": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--body)"
}
}
}
}
}