Metadata in V8
Built upon the concept of the Advanced Metadata.json the v8 metadata extends on the v7 version allowing for an easier and more versatile way to control your styles.
The metadata.json Example File
{
"styles": {
"site": {
"color__body--background": "#ffffff",
"color__link--text": "#e7a022",
"color__companyname--text": "#ffffff",
"font__companyname--font-family" : "@font-swatch10-font-family",
"font__companyname--font-size" : "18px",
"font__companyname--font-weight" : "26px",
"font__companyname--line-height" : "400",
"font__companyname--letter-spacing" : "2px"
},
"typography": {
"color__h1--text": "#1e1e1e",
"font__h1--font-family" : "@font-swatch1-font-family",
"font__h1--font-size" : "36px",
"font__h1--font-weight" : "400",
"font__h1--line-height" : "48px",
"font__h1--letter-spacing" : "0px",
"color__h2--text": "#1e1e1e",
"font__h2--font-family" : "@font-swatch2-font-family",
"font__h2--font-size" : "30px",
"font__h2--font-weight" : "400",
"font__h2--line-height" : "40px",
"font__h2--letter-spacing" : "0px",
"color__h3--text": "#1e1e1e",
"font__h3--font-family" : "@font-swatch3-font-family",
"font__h3--font-size" : "22px",
"font__h3--font-weight" : "400",
"font__h3--line-height" : "34px",
"font__h3--letter-spacing" : "0px",
"color__h4--text": "#1e1e1e",
"font__h4--font-family" : "@font-swatch4-font-family",
"font__h4--font-size" : "20px",
"font__h4--font-weight" : "400",
"font__h4--line-height" : "38px",
"font__h4--letter-spacing" : "0px",
"color__p--text": "#808080",
"font__p--font-family" : "@font-swatch5-font-family",
"font__p--font-size" : "17px",
"font__p--font-weight" : "400",
"font__p--line-height" : "36px",
"font__p--letter-spacing" : "0px"
},
"button": {
"color__button--background": "#1e1e1e",
"color__button--background--hover": "darken(@color__button--background, 10%)",
"color__button--text": "@color__link--text",
"font__button--font-family" : "@font-swatch7-font-family",
"font__button--font-size" : "14px",
"font__button--font-weight" : "400",
"font__button--line-height" : "24px",
"font__button--letter-spacing" : "2px"
},
"navigation": {
"color__navigation--text": "#737373",
"color__navigation--text--hover": "darken(@color__navigation--text, 10%)",
"color__navigation--text--selected": "@color-swatch3",
"color__navigation--background": "@color__body--background",
"font__navigation--font-family" : "@font-swatch6-font-family",
"font__navigation--font-size" : "16px",
"font__navigation--font-weight" : "400",
"font__navigation--line-height" : "24px",
"font__navigation--letter-spacing" : "0px"
},
"feature": {
"color__feature-headline--text": "#ffffff",
"color__feature-strapline--text": "darken(color__feature-strapline--text, 10%)",
"color__feature-button--text": "#ffffff",
"color__feature-button--background": "@color__link--text",
"color__feature-button--background--hover": "lighten(color__link--text, 10%)",
"color__feature-button--border": "transparent",
"color__feature-content--background":"#000000",
"font__feature-headline--font-family" : "@font-swatch8-font-family",
"font__feature-headline--font-size" : "42px",
"font__feature-headline--font-weight" : "600",
"font__feature-headline--line-height" : "52px",
"font__feature-headline--letter-spacing" : "0px",
"font__feature-strapline--font-family" : "@font-swatch9-font-family",
"font__feature-strapline--font-size" : "20px",
"font__feature-strapline--font-weight" : "400",
"font__feature-strapline--line-height" : "30px",
"font__feature-strapline--letter-spacing" : "0px"
},
"forms": {
"color__form--background": "darken(@color__body--background, 5%)",
"color__form-legend--text": "@color__p--text",
"color__form-legend--background": "transparent",
"color__form-label--text": "@color__p--text"
},
"image": {
"color__image-title--text": "@color__h3--text",
"color__image-description--text": "@color__p--text"
},
"twitter": {
"color__twitter-item--background": "darken(@color__body--background, 5%)",
"color__twitter-account-name--text": "@color__h3--text",
"color__twitter-tweet--text": "@color__p--text"
},
"socialicons": {
"color__socialicons--icon": "@color-swatch1",
"color__socialicons--icon--background": "@font-swatch6-color"
},
"blog": {
"color__blogpostlist-title--text": "@color__link--text",
"color__blogpost-title--text": "@color__link--text"
},
"ecommerce": {
"color__ecomproductslist-label--text": "@color__form-label--text",
"color__ecomproductslist-product-title--text": "color__h3--text",
"color__ecomproductslist-filters--background": "darken(@color__body--background, 5%)",
"color__ecomproduct--background": "darken(@color__body--background, 5%)",
"color__ecomproduct-title--text": "@color__h1-text",
"color__ecomproduct-price--text": "@color__h3-text",
"color__ecombasket-button--background": "@color__link-text",
"color__ecombasket-button--background--hover": "@color__button--background",
"color__ecombasket-button--text": "@color__button--background--hover"
}
}
}