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

馃摑 The one that updates the design tokens docs. (#1179)



* updates vf-design tokens

* updates design tokens documentation

* re-compiled tokens

* Add link to new documentation location

* Gulp token command tidy

- moves token tasks to a seperate js file
- removes unused dependencies
- adds token generation to dev and build commands
- fixes a couple minor things
- linting
- fix a missing `</main>` tag on theming page
- add vf-content to the index
Co-authored-by: default avatarKen Hawkins <khawkins98@gmail.com>
parent cd5e94a4
### 3.0.0
- We're moving the documentation to the `vf-component-library`
- https://visual-framework.github.io/vf-core/design-tokens/
- removes all `.njk` documentation files.
- hides from Fractal.
- removes any other files no longer needed.
### 2.1.0
- update documentation pages for all design tokens used to make use of updated CSS.
......
# Design Tokens Component
These are the colour, typography, spacing, and other stylistic decisions as design tokens for consumption
The Design Tokens used within `vf-core` are generated from several `.yml` files. These are then compiled into various Sass files as needed.
In the future we hope to offer Sketch and Photoshop colour palettes.
If you required a different format (LESS, iOS, Android). Please get in touch.
> Design tokens are the visual design atoms of the design system 鈥 specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
> 鈥 Salesforce, Lightning Design System.
## Building
To update these run `gulp vf-tokens` from `./components/vf-design-tokens`.
<main class="vf-grid vf-grid__col-3">
{% for item in breakpoints.properties %}
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<p class="">{{ item.value }}</p>
</div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3 class="vf-card__title">{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
{% if item.meta.comment %}
<hr class="vf-divider">
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
<main class="vf-grid vf-grid__col-3">
{% for item in colors.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Value:</p>
<p class="vf-card__text"><code>{{ item.value }}</code></p>
<p class="vf-card__text"><code>{{ item.value | hextorgb }}</code></p>
{% if item.meta.sassVariable %}
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
<p class="vf-card__text"><code>map-get($vf-colors-map, {{ item.meta.sassVariable }})</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS custom property:</p>
<p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
{% endif %}
{% if item.meta.comment %}
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
<main class="vf-grid vf-grid__col-3">
{% for item in 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>
</div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3 class="vf-card__title">{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Value:</p>
<p class="vf-card__text"><code>{{ item.value }}</code></p>
{% if item.meta.sassVariable %}
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS custom property:</p>
<p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
{% endif %}
{% if item.meta.comment %}
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
<main class="vf-grid vf-grid__col-3">
{% for item in themes.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Value:</p>
<p class="vf-card__text"><code>{{ item.value }}</code></p>
<p class="vf-card__text"><code>{{ item.value | hextorgb }}</code></p>
{% if item.meta.sassVariable %}
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
<p class="vf-card__text"><code>map-get($vf-colors-map, {{ item.meta.sassVariable }})</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS custom property:</p>
<p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
{% endif %}
{% if item.meta.comment %}
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
<main class="vf-grid vf-grid__col-3">
{% for item in typography.properties %}
<article class="vf-card">
<div style="padding: 16px;">
<p style="font-size: {{ item.value.fontSize }}; font-weight: {{ item.value.fontWeight }}; line-height: {{ item.value.lineHeight }}">{{ item.meta.pangram }}</p>
</div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3 class="vf-card__title">{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text"><span>Font Size: </span><code>{{ item.value.fontSize }}</code></p>
<p class="vf-card__text"><span>Font Weight: </span><code>{{ item.value.fontWeight }}</code></p>
<p class="vf-card__text"><span>Ling Height: </span><code>{{ item.value.lineHeight}}</code></p>
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<code>@mixin set-type(`{{ item.meta.sassMap }}`)</code>
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
<main class="vf-grid vf-grid__col-3">
{% for item in uiColors.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Value:</p>
<p class="vf-card__text"><code>{{ item.value }}</code></p>
<p class="vf-card__text"><code>{{ item.value | hextorgb }}</code></p>
{% if item.meta.sassVariable %}
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
<p class="vf-card__text"><code>map-get($vf-colors-map, {{ item.meta.sassVariable }})</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS custom property:</p>
<p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
{% endif %}
{% if item.meta.comment %}
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
'use strict';
const path = require('path');
// As the design tokens need special logic the fractal config is a `.js` file, that
// is not combinable with a `.yml` config file
// https://fractal.build/guide/core-concepts/configuration-files.html#configuration-file-formats
let fractalConfig = {
title: 'Design Tokens',
label: 'Design Tokens',
status: 'live',
variants: [
{
name: 'default',
label: 'Welcome',
hidden: 'true',
},
]
hidden: 'true',
};
// Only generate the tokens if the `/dist` assets have been generated
try {
// Get the config from the project using the VF
const config = require(path.resolve('.','package.json'));
// https://nodejs.dev/learn/the-nodejs-path-module#pathnormalize
if (path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-colors.ios.json')) {
fractalConfig.context = {
'component-type': 'utility',
breakpoints: require(path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-breakpoints.ios.json')),
colors: require(path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-colors.ios.json')),
themes: require(path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-themes.ios.json')),
uiColors: require(path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-ui-colors.ios.json')),
spacing: require(path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-spacing.ios.json')),
typography: require(path.normalize(config.vfConfig.vfComponentPath+'/vf-design-tokens/dist/json/vf-font--sans.ios.json'))
};
}
} catch(err) {
fractalConfig.context = {
'component-type': 'utility',
breakpoints: null,
colors: null,
uiColors: null,
spacing: null,
typography: null
};
}
// export the config to fractal
module.exports = fractalConfig;
<div class="vf-content embl-grid embl-grid--has-centered-content">
<div></div>
<section>
<p>The Design Tokens used within `vf-core` are generated from several `.yml` files. These are then compiled into various Sass files as needed.</p>
<p>In the future we hope to offer Sketch and Photoshop colour palettes.</p>
<p>If you required a different format (LESS, iOS, Android). Please get in touch.</p>
<blockquote class="vf-u-margin-bottom--xl">
Design tokens are the visual design atoms of the design system 鈥 specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
<br>
<br>
鈥 <a href="https://www.lightningdesignsystem.com/design-tokens/">Salesforce, Lightning Design System.</a>
</blockquote>
</section>
</div>
### 1.0.12
- design token documenation now lives in the component libary
### 1.0.7
- adds updates blog
......
"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,6 +10,9 @@ 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
......@@ -19,7 +22,7 @@ gulp.task('watch', function() {
// Let's build this sucker.
gulp.task('build', gulp.series(
'vf-clean',
gulp.parallel('vf-css','vf-scripts'),
gulp.parallel('vf-css','vf-scripts','tokens'),
'vf-css:generate-component-css',
'vf-component-assets:everything',
'fractal:build',
......@@ -32,7 +35,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'),
gulp.parallel('vf-css','vf-scripts','tokens'),
'vf-css:generate-component-css',
'vf-component-assets:everything',
'fractal:development',
......
This diff is collapsed.
......@@ -41,5 +41,8 @@
"url": "https://github.com/visual-framework/vf-core/issues"
},
"homepage": "https://github.com/visual-framework/vf-core/tree/develop/tools/vf-component-library#readme",
"gitHead": "bc7aae5f4d394bb907d39e4adfb471da248de474"
"gitHead": "bc7aae5f4d394bb907d39e4adfb471da248de474",
"devDependencies": {
"gulp-json-concat": "^0.2.0"
}
}
......@@ -9,4 +9,34 @@ layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--breakpoints' -%}
<main class="vf-grid vf-grid__col-3">
{% for item in breakpoints.properties %}
<article class="vf-card">
<div style="display: flex; justify-content: center; align-items: center;">
<p class="">{{ item.value }}</p>
</div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3 class="vf-card__title">{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
{% if item.meta.comment %}
<hr class="vf-divider">
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
......@@ -9,7 +9,79 @@ layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--colours' -%}
<main class="vf-grid vf-grid__col-3">
{%- render '@vf-design-tokens--ui-colours' -%}
{% for item in colours.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Value:</p>
<p class="vf-card__text"><code>{{ item.value }}</code></p>
{# <p class="vf-card__text"><code>{{ item.value }}</code></p> #}
{% if item.meta.sassVariable %}
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
<p class="vf-card__text"><code>map-get($vf-colors-map, {{ item.meta.sassVariable }})</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS custom property:</p>
<p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
{% endif %}
{% if item.meta.comment %}
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
{% for item in uicolours.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}};"></div>
<section class="vf-stack | vf-card__content" style="--vf-stack-margin: .5rem;">
<h3>{{ item.meta.friendlyName }}</h3>
<hr class="vf-divider">
<p class="vf-card__text">Value:</p>
<p class="vf-card__text"><code>{{ item.value }}</code></p>
{# <p class="vf-card__text"><code>{{ item.value }}</code></p> #}
{% if item.meta.sassVariable %}
<hr class="vf-divider">
<p class="vf-card__text">Sass:</p>
<p class="vf-card__text"><code>{{ item.meta.sassVariable }}</code></p>
<p class="vf-card__text"><code>map-get($vf-colors-map, {{ item.meta.sassVariable }})</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS custom property:</p>
<p class="vf-card__text"><code>{{ item.meta.CSSCustomProperty }}</code></p>
{% endif %}
{% if item.meta.comment %}
<h4>notes:</h4>
<p class="vf-card__text">
{{ item.meta.comment }}
</p>
{% endif %}
</section>
</article>
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
{"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