Unverified Commit d38d1232 authored by Stuart Robson's avatar Stuart Robson Committed by GitHub
Browse files

the one that makes 11ty look for design tokens data (#1186)

* adds  as a dependency

* adds JS files to pull in the json from the design tokens pacakge

* updates token documentation files to look in 11ty data for data

* removes the gulp files
parent a8ffe6e2
Pipeline #105292 passed with stages
in 4 minutes and 17 seconds
"use strict";
/**
* Build tasks to generate a deployable static site,
* most frequent use case will be for CI deployments.
*/
module.exports = function(gulp, componentPath) {
const rename = require("gulp-rename");
const del = require("del");
// const merge = require('gulp-merge-json');
// const dave = require("gulp-json-tree");
var jsonConcat = require("gulp-json-concat");
// copy the design token files to the 11ty documentation path
gulp.task("tokens:copy", function() {
return gulp.src(componentPath+"/vf-design-tokens/dist/json/*.ios.json")
.pipe(rename (function(path) {
path.basename = path.basename.replace("vf-", "");
path.basename = path.basename.replace(".ios", "");
path.basename = path.basename.replace("font-", "font");
path.basename = path.basename.replace("-", "");
path.basename = path.basename.replace("--", "");
path.basename = path.basename.replace("colors", "colours");
return path.dirname + path.basename;
}))
.pipe(gulp.dest("src/site/design-tokens/temp/"));
});
// combine individual json files into one large json file
// (easier to use in 11ty)
gulp.task("tokens:jsonConcat", function() {
return gulp.src("src/site/design-tokens/temp/*.json")
.pipe(jsonConcat("design-tokens.11tydata.json",function(data){
return new Buffer(JSON.stringify(data));
}))
.pipe(gulp.dest("src/site/design-tokens/"));
});
// the individual json files aren't needed
gulp.task("tokens:cleanup", function() {
return del([
"src/site/design-tokens/temp/*.json"
// '!src/site/design-tokens/design-tokens.11tydata.json'
]);
});
// import design tokens for documentation
gulp.task("tokens", gulp.series(
"tokens:copy",
"tokens:jsonConcat",
"tokens:cleanup"
));
return gulp;
};
......@@ -10,9 +10,6 @@ require('@visual-framework/vf-extensions/gulp-tasks/_gulp_rollup.js')(gulp, path
// search indexing
require('@visual-framework/vf-extensions/gulp-tasks/gulp-build-search-index.js')(gulp, path, buildDestionation);
// Design token documentation
require(path.resolve(".", __dirname + "/gulp-tasks/tokens.js"))(gulp, componentPath);
// Watch folders for changess
gulp.task('watch', function() {
// left for convience for local watch additions
......@@ -22,7 +19,7 @@ gulp.task('watch', function() {
// Let's build this sucker.
gulp.task('build', gulp.series(
'vf-clean',
gulp.parallel('vf-css','vf-scripts','tokens'),
gulp.parallel('vf-css','vf-scripts'),
'vf-css:generate-component-css',
'vf-component-assets:everything',
'fractal:build',
......@@ -35,7 +32,7 @@ gulp.task('build', gulp.series(
// Build and watch things during dev
gulp.task('dev', gulp.series(
'vf-clean',
gulp.parallel('vf-css','vf-scripts','tokens'),
gulp.parallel('vf-css','vf-scripts'),
'vf-css:generate-component-css',
'vf-component-assets:everything',
'fractal:development',
......
......@@ -43,6 +43,7 @@
"homepage": "https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-library#readme",
"gitHead": "bc7aae5f4d394bb907d39e4adfb471da248de474",
"devDependencies": {
"@visual-framework/vf-design-tokens": "^2.0.0",
"gulp-json-concat": "0.2.0"
}
}
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-breakpoints.ios.json'));
module.exports = pkg;
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-colors.ios.json'));
module.exports = pkg;
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-spacing.ios.json'));
module.exports = pkg;
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-themes.ios.json'));
module.exports = pkg;
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-font--monospace.ios.json'));
module.exports = pkg;
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-font--sans.ios.json'));
module.exports = pkg;
const path = require('path');
const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/json/vf-ui-colors.ios.json'));
module.exports = pkg;
......@@ -10,7 +10,7 @@ hideSubPosts: true
---
<main class="vf-grid vf-grid__col-3">
{% for item in breakpoints.properties %}
{% for item in tokens.breakpoints.properties %}
<article class="vf-card">
......
......@@ -11,7 +11,7 @@ hideSubPosts: true
<main class="vf-grid vf-grid__col-3">
{% for item in colours.properties %}
{% for item in tokens.colours.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
......@@ -47,7 +47,7 @@ hideSubPosts: true
<p>Something went wrong.</p>
{% endfor %}
{% for item in uicolours.properties %}
{% for item in tokens.uiColors.properties %}
<article class="vf-card">
......
{"breakpoints":{"properties":[{"type":"size","category":"media-query","name":"vfBreakpointXs","value":"360px","meta":{"friendlyName":"Extra Small Breakpoint","sassVariable":"$vf-breakpoint--xs","CSSCustomProperty":"--vf-breakpoint--xs","comment":null}},{"type":"size","category":"media-query","name":"vfBreakpointSm","meta":{"friendlyName":"Small Breakpoint","sassVariable":"$vf-breakpoint--sm","CSSCustomProperty":"--vf-breakpoint--sm","comment":null},"value":"600px"},{"type":"size","category":"media-query","name":"vfBreakpointMd","value":"768px","meta":{"friendlyName":"Regular Breakpoint","sassVariable":"$vf-breakpoint--md","CSSCustomProperty":"--vf-breakpoint--md","comment":null}},{"type":"size","category":"media-query","name":"vfBreakpointLg","value":"1024px","meta":{"friendlyName":"Large Breakpoint","sassVariable":"$vf-breakpoint--lg","CSSCustomProperty":"--vf-breakpoint--lg","comment":null}},{"type":"size","category":"media-query","name":"vfBreakpointXl","value":"1280px","meta":{"friendlyName":"Extra Large Breakpoint","sassVariable":"$vf-breakpoint--xl","CSSCustomProperty":"--vf-breakpoint--xl","comment":null}}]},"colours":{"properties":[{"type":"color","category":"color","name":"vfColorGreen","value":"#18974c","meta":{"friendlyName":"EMBL Green","sassVariable":"vf-color--green","CSSCustomProperty":"--vf-color--green","comment":null}},{"type":"color","category":"color","name":"vfColorGreenDarkest","value":"#0a5032","meta":{"friendlyName":"EMBL Green, Darkest Tint","sassVariable":"vf-color--green--darkest","CSSCustomProperty":"--vf-color--green--darkest","comment":null}},{"type":"color","category":"color","name":"vfColorGreenDark","value":"#007b53","meta":{"friendlyName":"EMBL Green, Dark Tint","sassVariable":"vf-color--green--dark","CSSCustomProperty":"--vf-color--green--dark","comment":null}},{"type":"color","category":"color","name":"vfColorGreenLight","value":"#6cc24a","meta":{"friendlyName":"EMBL Green, Light Tint","sassVariable":"vf-color--green--light","CSSCustomProperty":"--vf-color--green--light","comment":null}},{"type":"color","category":"color","name":"vfColorGreenLightest","value":"#d0debb","meta":{"friendlyName":"EMBL Green, Lightest Tine","sassVariable":"vf-color--green--lightest","CSSCustomProperty":"--vf-color--green--lightest","comment":null}},{"type":"color","category":"color","name":"vfColorGrey","value":"#707372","meta":{"friendlyName":"EMBL Grey","sassVariable":"vf-color--grey","CSSCustomProperty":"--vf-color--grey","comment":null}},{"type":"color","category":"color","name":"vfColorGreyDarkest","value":"#373a36","meta":{"friendlyName":"EMBL Grey, Darkest Tint","sassVariable":"vf-color--grey--darkest","CSSCustomProperty":"--vf-color--grey--darkest","comment":null}},{"type":"color","category":"color","name":"vfColorGreyDark","value":"#54585a","meta":{"friendlyName":"EMBL Grey, Dark Tint","sassVariable":"vf-color--grey--dark","CSSCustomProperty":"--vf-color--grey--dark","comment":null}},{"type":"color","category":"color","name":"vfColorGreyLight","value":"#a8a99e","meta":{"friendlyName":"EMBL Grey, Light Tint","sassVariable":"vf-color--grey--light","CSSCustomProperty":"--vf-color--grey--light","comment":null}},{"type":"color","category":"color","name":"vfColorGreyLightest","value":"#d0d0ce","meta":{"friendlyName":"EMBL Grey, Lightest Tint","sassVariable":"vf-color--grey--lightest","CSSCustomProperty":"--vf-color--grey--lightest","comment":null}},{"type":"color","category":"color","name":"vfColorRed","value":"#d41645","meta":{"friendlyName":"EMBL Red","sassVariable":"vf-color--red","CSSCustomProperty":"--vf-color--red","comment":null}},{"type":"color","category":"color","name":"vfColorRedDark","value":"#a6093d","meta":{"friendlyName":"EMBL Red, Dark Tint","sassVariable":"vf-color--red--dark","CSSCustomProperty":"--vf-color--red--dark","comment":null}},{"type":"color","category":"color","name":"vfColorRedLight","value":"#e58f9e","meta":{"friendlyName":"EMBL Red, Light Tint","sassVariable":"vf-color--red--light","CSSCustomProperty":"--vf-color--red--light","comment":null}},{"type":"color","category":"color","name":"vfColorBlue","value":"#3b6fb6","meta":{"friendlyName":"EMBL Blue","sassVariable":"vf-color--blue","CSSCustomProperty":"--vf-color--blue","comment":null}},{"type":"color","category":"color","name":"vfColorBlueDark","value":"#193f90","meta":{"friendlyName":"EMBL Blue, Dark Tint","sassVariable":"vf-color--blue--dark","CSSCustomProperty":"--vf-color--blue--dark","comment":null}},{"type":"color","category":"color","name":"vfColorBlueLight","value":"#8bb8e8","meta":{"friendlyName":"EMBL Blue, Light Tint","sassVariable":"vf-color--blue--light","CSSCustomProperty":"--vf-color--blue--light","comment":null}},{"type":"color","category":"color","name":"vfColorPurple","value":"#734595","meta":{"friendlyName":"EMBL Purple","sassVariable":"vf-color--purple","CSSCustomProperty":"--vf-color--purple","comment":null}},{"type":"color","category":"color","name":"vfColorPurpleDark","value":"#563d82","meta":{"friendlyName":"EMBL Purple, Dark Tint","sassVariable":"vf-color--purple--dark","CSSCustomProperty":"--vf-color--purple--dark","comment":null}},{"type":"color","category":"color","name":"vfColorPurpleLight","value":"#cba3d8","meta":{"friendlyName":"EMBL Purple, Light Tint","sassVariable":"vf-color--purple--light","CSSCustomProperty":"--vf-color--purple--light","comment":null}},{"type":"color","category":"color","name":"vfColorOrange","value":"#f49e17","meta":{"friendlyName":"EMBL Orange","sassVariable":"vf-color--orange","CSSCustomProperty":"--vf-color--orange","comment":null}},{"type":"color","category":"color","name":"vfColorOrangeDark","value":"#b65417","meta":{"friendlyName":"EMBL Orange, Dark Tint","sassVariable":"vf-color--orange--dark","CSSCustomProperty":"--vf-color--orange--dark","comment":null}},{"type":"color","category":"color","name":"vfColorOrangeLight","value":"#efc06e","meta":{"friendlyName":"EMBL Orange, Light Tint","sassVariable":"vf-color--orange--light","CSSCustomProperty":"--vf-color--orange--light","comment":null}},{"type":"color","category":"color","name":"vfColorYellow","value":"#f4c61f","meta":{"friendlyName":"EMBL Yellow","sassVariable":"vf-color--yellow","CSSCustomProperty":"--vf-color--yellow","comment":null}},{"type":"color","category":"color","name":"vfColorYellowDark","value":"#ffb81c","meta":{"friendlyName":"EMBL Yellow, Dark Tint","sassVariable":"vf-color--yellow--dark","CSSCustomProperty":"--vf-color--yellow--dark","comment":null}},{"type":"color","category":"color","name":"vfColorYellowLight","value":"#fdd757","meta":{"friendlyName":"EMBL Yellow, Light Tint","sassVariable":"vf-color--yellow--light","CSSCustomProperty":"--vf-color--yellow--light","comment":null}},{"type":"color","category":"color","name":"vfColorBrightGreen","value":"#a1be1f","meta":{"friendlyName":"EMBL Bright Green","sassVariable":"vf-color--bright-green","CSSCustomProperty":"--vf-color--bright-green","comment":null}},{"type":"color","category":"color","name":"vfColorBrightGreenDark","value":"#7fb428","meta":{"friendlyName":"EMBL Bright Green, Dark Tint","sassVariable":"vf-color--bright-green--dark","CSSCustomProperty":"--vf-color--bright-green--dark","comment":null}},{"type":"color","category":"color","name":"vfColorBrightGreenLight","value":"#e2e868","meta":{"friendlyName":"EMBL Bright Green, Light Tint","sassVariable":"vf-color--bright-green--light","CSSCustomProperty":"--vf-color--bright-green--light","comment":null}}]},"fontmonospace":{"properties":[{"type":"monospace","category":"fonts","name":"textBody1","value":{"fontSize":"14px","fontWeight":400,"lineHeight":1.57}}]},"fontsans":{"properties":[{"type":"sans-serif","category":"font","name":"textButton1","value":{"fontSize":"24px","fontWeight":700,"lineHeight":1},"meta":{"friendlyName":"Button, regular","sassMap":"text-button--1","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textButton2","value":{"fontSize":"16px","fontWeight":700,"lineHeight":1},"meta":{"friendlyName":"Button, small","sassMap":"text-button--2","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textBody1","value":{"fontSize":"32px","fontWeight":500,"lineHeight":1.3125},"meta":{"friendlyName":"Body, extra large","sassMap":"text-body--1","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textBody2","value":{"fontSize":"19px","fontWeight":400,"lineHeight":1.421},"meta":{"friendlyName":"Body, large","sassMap":"text-body--2","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textBody3","value":{"fontSize":"16px","fontWeight":400,"lineHeight":1.71},"meta":{"friendlyName":"Body, regular","sassMap":"text-body--3","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textBody4","value":{"fontSize":"14px","fontWeight":500,"lineHeight":1.57},"meta":{"friendlyName":"Body, small (alternate)","sassMap":"text-body--4","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textBody5","value":{"fontSize":"14px","fontWeight":400,"lineHeight":1.57},"meta":{"friendlyName":"Body, small","sassMap":"text-body--5","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textBody6","value":{"fontSize":"11px","fontWeight":600,"lineHeight":1.5},"meta":{"friendlyName":"Body, extra small","sassMap":"text-body--6","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textHeading1","value":{"fontSize":"42px","fontWeight":700,"lineHeight":1.547},"meta":{"friendlyName":"Heading, extra large","sassMap":"text-heading--1","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textHeading2","value":{"fontSize":"30px","fontWeight":500,"lineHeight":1.333},"meta":{"friendlyName":"Heading, large","sassMap":"text-heading--2","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textHeading3","value":{"fontSize":"24px","fontWeight":500,"lineHeight":1.333},"meta":{"friendlyName":"Heading, large (alternative)","sassMap":"text-heading--3","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textHeading4","value":{"fontSize":"21px","fontWeight":500,"lineHeight":1.29},"meta":{"friendlyName":"Heading, regular","sassMap":"text-heading--4","comment":null,"pangram":"The five boxing wizards jump quickly."}},{"type":"sans-serif","category":"font","name":"textHeading5","value":{"fontSize":"19px","fontWeight":500,"lineHeight":1.5},"meta":{"friendlyName":"Heading, small","sassMap":"text-heading--5","comment":null,"pangram":"The five boxing wizards jump quickly."}}]},"spacing":{"properties":[{"type":"number","category":"spacing","name":"vfSpacing0","value":0,"meta":{"friendlyName":"Spacing 0","sassVariable":"$vf-spacing--0","CSSCustomProperty":"--vf-spacing--0","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing50","value":".125rem","meta":{"friendlyName":"Spacing 50","sassVariable":"$vf-spacing--50","CSSCustomProperty":"--vf-spacing--50","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing100","value":".25rem","meta":{"friendlyName":"Spacing 100","sassVariable":"$vf-spacing--100","CSSCustomProperty":"--vf-spacing--100","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing200","value":".5rem","meta":{"friendlyName":"Spacing 200","sassVariable":"$vf-spacing--200","CSSCustomProperty":"--vf-spacing--200","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing400","value":"1rem","meta":{"friendlyName":"Spacing 400","sassVariable":"$vf-spacing--400","CSSCustomProperty":"--vf-spacing--400","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing500","value":"1.25rem","meta":{"friendlyName":"Spacing 500","sassVariable":"$vf-spacing--500","CSSCustomProperty":"--vf-spacing--500","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing600","value":"1.5rem","meta":{"friendlyName":"Spacing 600","sassVariable":"$vf-spacing--600","CSSCustomProperty":"--vf-spacing--600","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing800","value":"2rem","meta":{"friendlyName":"Spacing 800","sassVariable":"$vf-spacing--800","CSSCustomProperty":"--vf-spacing--800","comment":null}},{"type":"number","category":"spacing","name":"vfSpacing1200","value":"3rem","meta":{"friendlyName":"Spacing 1200","sassVariable":"$vf-spacing--1200","CSSCustomProperty":"--vf-spacing--1200","comment":null}}]},"themes":{"properties":[{"type":"color","category":"color","name":"vfThemePrimary","value":"#3b6fb6","meta":{"friendlyName":"EMBL Primary","sassVariable":"vf-theme--primary","CSSCustomProperty":"--vf-theme--primary"}},{"type":"color","category":"color","name":"vfThemePrimaryDark","value":"#193f90","meta":{"friendlyName":"EMBL Primary Dark","sassVariable":"vf-theme--primary--dark","CSSCustomProperty":"--vf-theme--primary--dark"}},{"type":"color","category":"color","name":"vfThemeSecondary","value":"#18974c","meta":{"friendlyName":"EMBL Secondary","sassVariable":"vf-theme--secondary","CSSCustomProperty":"--vf-theme--secondary"}},{"type":"color","category":"color","name":"vfThemeSecondaryDark","value":"#007b53","meta":{"friendlyName":"EMBL Secondary Dark","sassVariable":"vf-theme--secondary--dark","CSSCustomProperty":"--vf-theme--secondary--dark"}},{"type":"color","category":"color","name":"vfThemeTertiary","value":"#54585a","meta":{"friendlyName":"EMBL Tertiary","sassVariable":"vf-theme--tertiary","CSSCustomProperty":"--vf-theme--tertiary"}},{"type":"color","category":"color","name":"vfThemeQuaternary","value":"#f4c61f","meta":{"friendlyName":"EMBL Quaternary","sassVariable":"vf-theme--quaternary","CSSCustomProperty":"--vf-theme--quaternary"}},{"type":"color","category":"color","name":"vfThemeQuinary","value":"#d0d0ce","meta":{"friendlyName":"EMBL Quinary","sassVariable":"vf-theme--quinary","CSSCustomProperty":"--vf-theme--quinary"}}]},"uicolours":{"properties":[{"type":"color","category":"color","name":"vfUiColorBlack","value":"#000000","meta":{"friendlyName":"UI Black","sassVariable":"$vf-ui-colors-map, vf-ui-color--black","CSSCustomProperty":"--vf-ui-color--black"}},{"type":"color","category":"color","name":"vfUiColorGrey","value":"#d8d8d8","meta":{"friendlyName":"UI Grey","sassVariable":"$vf-ui-colors-map, vf-ui-color-color--grey","CSSCustomProperty":"--vf-ui-color--grey"}},{"type":"color","category":"color","name":"vfUiColorGreyLight","value":"#f3f3f3","meta":{"friendlyName":"UI Grey light","sassVariable":"$vf-ui-colors-map, vf-ui-color-color--grey--light","CSSCustomProperty":"--vf-ui-color--grey--light"}},{"type":"color","category":"color","name":"vfUiColorYellow","value":"#fffadc","meta":{"friendlyName":"UI Yellow","sassVariable":"$vf-ui-colors-map, vf-ui-color--yellow","CSSCustomProperty":"--vf-ui-color--yellow"}},{"type":"color","category":"color","name":"vfUiColorRed","value":"#d32f2f","meta":{"friendlyName":"UI Red","sassVariable":"$vf-ui-colors-map, vf-ui-color--red","CSSCustomProperty":"--vf-ui-color--red"}},{"type":"color","category":"color","name":"vfUiColorWhite","value":"#ffffff","meta":{"friendlyName":"UI White","sassVariable":"$vf-ui-colors-map, vf-ui-color--white","CSSCustomProperty":"--vf-ui-color--white"}},{"type":"color","category":"color","name":"vfUiColorOffWhite","value":"#fafafa","meta":{"friendlyName":"UI Off white","sassVariable":"$vf-ui-colors-map, vf-ui-color--off-white","CSSCustomProperty":"--vf-ui-color--off-white"}}]},"zindex":{"properties":[{"type":"number","category":"layer","name":"vfZIndexNegative","value":-1},{"type":"number","category":"layer","name":"vfZIndexPseudoElementFix","value":1},{"type":"number","category":"layer","name":"vfZIndexBoxLink","value":512},{"type":"number","category":"layer","name":"vfZIndexBoxTextLink","value":1984},{"type":"number","category":"layer","name":"vfZIndexFormInput","value":1},{"type":"number","category":"layer","name":"vfZIndexFormLabel","value":1},{"type":"number","category":"layer","name":"vfZIndexHero","value":1984},{"type":"number","category":"layer","name":"vfZIndexMasthead","value":1984},{"type":"number","category":"layer","name":"vfZIndexBanner","value":5150}]}}
\ No newline at end of file
......@@ -10,7 +10,7 @@ hideSubPosts: true
---
<main class="vf-grid vf-grid__col-3">
{% for item in spacing.properties %}
{% for item in tokens.spacing.properties %}
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<div style="height: {{ item.value }}; width: {{ item.value }}; background: #009f4d;"></div>
......
......@@ -12,7 +12,7 @@ hideSubPosts: true
<main class="vf-grid vf-grid__col-3">
{% for item in themes.properties %}
{% for item in tokens.theming.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
......
......@@ -11,7 +11,7 @@ hideSubPosts: true
<main class="vf-grid vf-grid__col-3">
{% for item in fontsans.properties %}
{% for item in tokens.typographySans.properties %}
<article class="vf-card">
<div style="padding: 16px;">
......@@ -36,7 +36,7 @@ hideSubPosts: true
{% endfor %}
{% for item in fontmonospace.properties %}
{% for item in tokens.typographyMono.properties %}
<article class="vf-card">
<div style="padding: 16px;">
......@@ -61,3 +61,4 @@ hideSubPosts: true
{% endfor %}
</main>
s
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment