Commit f31aecb2 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Component library tweaks, design tokens layout

- sort cards on homepage by title
- make "design tokens" lowercase
- fix up the design tokens overview layout
- cleanup token template pages
parent dc6b4110
Pipeline #165424 passed with stages
in 7 minutes and 32 seconds
......@@ -29,7 +29,7 @@
}
h2:not([class*='vf-']) {
@include set-type(text-heading--2, $custom-margin-bottom: 39px);
@include set-type(text-heading--2, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
margin-top: 13px;
......@@ -40,7 +40,7 @@
}
h3:not([class*='vf-']) {
@include set-type(text-heading--3, $custom-margin-bottom: 13px);
@include set-type(text-heading--3, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
margin-top: 24px;
......@@ -51,7 +51,7 @@
}
h4:not([class*='vf-']) {
@include set-type(text-heading--4, $custom-margin-bottom: 13px);
@include set-type(text-heading--4, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
margin-top: 24px;
......@@ -62,7 +62,7 @@
}
h5:not([class*='vf-']) {
@include set-type(text-heading--5, $custom-margin-bottom: 13px);
@include set-type(text-heading--5, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
margin-top: 24px;
......@@ -73,7 +73,7 @@
}
h6:not([class*='vf-']) {
@include set-type(text-heading--5, $custom-margin-bottom: 13px);
@include set-type(text-heading--5, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
margin-top: 24px;
......@@ -83,13 +83,13 @@
}
}
// remove the top margin from first items becasue some times the first item is an h3
// remove the top margin from first items because some times the first item is an h3
& > :first-child {
margin-top: 0 !important;
}
p:not([class*='vf-']) {
@include set-type(text-body--2, $custom-margin-bottom: 24px);
@include set-type(text-body--2, $custom-margin-bottom: map-get($vf-spacing-map, vf-spacing--400));
}
.vf-link,
......@@ -231,7 +231,7 @@
margin-top: 0;
+ .vf-content__standfirst {
margin-bottom: 24px;
margin-bottom: map-get($vf-spacing-map, vf-spacing--400);
}
+ small {
......
......@@ -4,9 +4,9 @@
// $custom-margin-bottom: variable, auto, disable
@mixin set-type($font-size, $font-family: $global-font-family, $custom-margin-bottom: auto) {
// Load the map from the design tokens
// Default onto sans-serif (we don't yet fully suppor Bring Your Own Typography with this mixin)
// Default onto sans-serif (we don't yet fully support Bring Your Own Typography with this mixin)
$map-font-family: $vf-font--sans-serif !default;
@if $font-family == $vf-font-family--monospace {
$map-font-family: $vf-fonts--monospace;
......@@ -21,7 +21,7 @@
// do nothing, 400 is the default, unless:
@if $vf-include-normalisations == true {
font-weight: map-deep-get($map-font-family, $font-size, font-weight);
}
}
}
@else {
font-weight: map-deep-get($map-font-family, $font-size, font-weight);
......
......@@ -30,7 +30,8 @@ module.exports = {
},
designtokens: {
url: "/design-tokens",
title: "Design tokens"
title: "Design tokens",
summary: "The colour, typography, spacing, and other stylistic decisions as design tokens for consumption."
},
developing: {
url: "/developing",
......
......@@ -42,7 +42,7 @@ Yes, utilise the Visual Framework system with one of the above listed approaches
### Does it have a specific look and feel?
No. It has a default look out of the box, but it is fully customisable by altering the [Design Tokens](/components/vf-design-tokens/).
No. It has a default look out of the box, but it is fully customisable by altering the [design tokens](/components/vf-design-tokens/).
### Is it really ready for use today?
......
......@@ -16,7 +16,7 @@ layout: layouts/section.njk
templateEngineOverride: njk, md
---
The Figma library is in early development, watch this space for updates.
The Visual Framework's Figma-based design kit is in early development, watch this space for updates.
For more updates:
......
......@@ -10,36 +10,13 @@ tags:
layout: layouts/base.njk
---
{% set type %}breakpoints{% endset %}
<h1 class="vf-intro__heading">{{ title }}</h1>
<main class="vf-grid vf-grid__col-3">
{% for item in tokens.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 %}
{% for item in tokens.breakpoints.properties %}
{% include "./token-card.njk" %}
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
......@@ -10,109 +10,18 @@ tags:
layout: layouts/base.njk
---
{% set type %}color{% endset %}
<h1 class="vf-intro__heading">{{ title }}</h1>
<main class="vf-grid vf-grid__col-3">
{% for item in tokens.colours.properties %}
<article class="vf-card">
{% if item.meta.Deprecated == true %}
<div class="vf-banner vf-banner--alert vf-banner--danger">
<div class="vf-banner__content">
<p class="vf-banner__text">This Design Token has been <strong>deprecated</strong>.</p>
</div>
</div>
{% if item.meta.DeprecatedText %}
<div style="padding: .5rem 1rem;">
<p class="vf-card__text">{{ item.meta.DeprecatedText | safe }}</p>
</div>
{% endif %}
{% endif %}
<div style="background-color: {{ item.value}}; height: 300px; width: 100%;"></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>
<hr class="vf-divider">
{% if item.meta.sassVariable %}
<p class="vf-card__text">Sass Variable:</p>
<p class="vf-card__text"><code>${{ item.meta.sassVariable }}</code></p>
{% endif %}
{% if item.meta.sassMap %}
<p class="vf-card__text">Sass Function:</p>
<p class="vf-card__text"><code>color({{ item.meta.sassMap }})</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 tokens.uiColors.properties %}
<article class="vf-card">
{% if item.meta.Deprecated == true %}
<div class="vf-banner vf-banner--alert vf-banner--danger">
<div class="vf-banner__content">
<p class="vf-banner__text">This Design Token has been <strong>deprecated</strong>.</p>
</div>
</div>
{% if item.meta.DeprecatedText %}
<div style="padding: .5rem 1rem;">
<p class="vf-card__text">{{ item.meta.DeprecatedText | safe }}</p>
</div>
{% endif %}
{% endif %}
<div style="background-color: {{ item.value}}; height: 300px; width: 100%;"></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>
<hr class="vf-divider">
{% if item.meta.sassVariable %}
<p class="vf-card__text">Sass Variable:</p>
<p class="vf-card__text"><code>${{ item.meta.sassVariable }}</code></p>
{% endif %}
{% if item.meta.sassMap %}
<p class="vf-card__text">Sass Function:</p>
<p class="vf-card__text"><code>ui-color({{ item.meta.sassMap }})</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 tokens.colours.properties %}
{% include "./token-card.njk" %}
{% else %}
<p>Something went wrong.</p>
{% endfor %}
{% for item in tokens.uiColors.properties %}
{% include "./token-card.njk" %}
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
---
is_index: true
promoted: true
title: Design Tokens
title: Design tokens
subtitle: The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.
date: 2018-10-16 12:24:50
section: building
tags:
- sections
- building
- designtokens
layout: layouts/section.njk
order: 4
layout: layouts/base.njk
hideSubPosts: false
templateEngineOverride: njk, md
templateEngineOverride: njk
---
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.
## What are Design Tokens?
{% render '@vf-intro', {
"vf_intro_heading": title,
"vf_intro_lede": subtitle,
"vf_intro_subheading": "",
"vf_intro_text": [
''
],
"vf_intro_badge": false
} %}
<section class="vf-content | embl-grid embl-grid--has-centered-content">
{% render '@vf-section-header', {
"section_title": "What are design tokens?",
"id": "what",
"vf_section__content": [
]
} %}
<div>
{% markdown %}
> 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](https://www.lightningdesignsystem.com/design-tokens/)_
{% endmarkdown %}
> — Salesforce, Lightning Design System.
<br>
</div>
<aside>
<figure>
<div class="vf-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/q5qIowMyVt8?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<figcaption>Jina Anne explains the role of design tokens.</figcaption>
<figure>
</aside>
</section>
{# Sections #}
<section class="vf-card-container | vf-u-fullbleed vf-u-background-color--grey--lightest">
<div class="vf-card-container__inner">
{% render '@vf-section-header', {
"section_title": "Design token types",
"id": "tokens"
} %}
## How EMBL uses Design Tokens
{#- show all pages classes as sections -#}
{#- by default, 11ty sorts by `date` field -#}
{%- for entry in collections['designtokens'] | sort(false, true, 'data.title') %}
{% if entry.data.promoted != true %}
{# Eventually these might have unique images, not sure yet #}
{%- set absolutePostUrl %}{{ metadata.id }}{{ entry.url }}{% endset %}
{%- render '@vf-card', {
"newTheme": "primary",
"variant": "bordered",
"card_title": entry.data.title,
"card_href": absolutePostUrl | url,
"card_text": entry.data.subtitle,
"card_image__alt": entry.data.title
} %}
{# "card_image": "https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/vf-hero-intense.png", #}
{% endif %}
{%- endfor %}
</div>
</section>
### Base Design Tokens
<section class="vf-content | embl-grid embl-grid--has-centered-content">
{% render '@vf-section-header', {
"section_title": "How the VF uses design tokens",
"id": "how",
"vf_section__content": [
]
} %}
<div>
These are the generic Design Tokens for global key and value pairs for colour, spacing, typography, etc.
{% markdown %}
They tend not to be used as they're codified as we should rely on Design decisions to determine when to use what Design Token value for what purpose and need.<sup>1</sup>
The design tokens are generated from several Yaml files. These are then compiled into various Sass files as needed.
### Design Decision Design Tokens <span class="vf-badge vf-badge--primary">alpha</span>
### Base design tokens
This category of Design Tokens is where we have chosen how certain Design Tokens should be used.
These are the generic design tokens for global key and value pairs for colour, spacing, typography, etc.
These Design Tokens can be use in projects where Component Design Tokens do not exist and must match the semantic use that should be defined in the codified Design Token.<sup>1</sup>
<small>eg. If the Design Token is `vf-background--primary` it should not be used for anythign other than a background.</small>
They tend not to be used as they're codified as we should rely on Design decisions to determine when to use what Design Token value for what purpose and need.
### Component Design Tokens <span class="vf-badge vf-badge--primary">alpha</span>
### Design decision design tokens
This category of design tokens is where we have chosen how certain design tokens should be used.
These design tokens can be use in projects where component design tokens do not exist and must match the semantic use that should be defined in the codified Design Token.
eg. If the design token is `vf-background--primary` it should not be used for anything other than a background.
This is actively being working on and your current implementation of design tokens in your projects might need updating.
### Component design tokens
Where the design decisions have filtered into specific component decisions.
These are exported into the components folder and are suffixed - `.tokens.scss`.
These can be both Sass variables and CSS Custom Properties.
These can be both Sass variables and CSS custom properties.
They are named so that their usage in a component should be self evident as it will follow the 'Naming Design Tokens' described below.
They are named so that their usage in a component should be self evident as it will follow the 'Naming design tokens' described below.
---
{% endmarkdown %}
</div>
</section>
## Naming Design Tokens
<section class="vf-content | embl-grid embl-grid--has-centered-content">
{% render '@vf-section-header', {
"section_title": "Naming design tokens",
"id": "naming",
"vf_section__content": [
]
} %}
<div>
We use a BEM style syntax when composing Design Tokens where we use our Design System prefix of `vf-` followed by:
{% markdown %}
1. Component
<small>eg: button, card, hero, list</small>
We use a BEM style syntax when composing design tokens where we use our Design System prefix of `vf-`:
2. Category
<small>eg: backgroudn, shadow, border</small>
1. `vf-component`: button, card, hero, list and so on
4. Variant
<small>eg: primary, secondary, interactive</small>
2. `vf-category`: background, shadow, border and so on
4. State
<small>eg: hover, visited, focus</small>
3. `vf-variant`: primary, secondary, interactive and so on
## Building
4. `vf-state`: hover, visited, focus and so on
{% endmarkdown %}
</div>
</section>
<section class="vf-content | embl-grid embl-grid--has-centered-content">
{% render '@vf-section-header', {
"section_title": "Building",
"id": "building",
"vf_section__content": [
]
} %}
<div>
{% markdown %}
To update these run `gulp vf-tokens` from `./components/vf-design-tokens`.
<sup>1</sup> This is actively being working on and your current implementation of Design Tokens in your projects might need updating.
{% endmarkdown %}
</div>
</section>
<section class="vf-content | embl-grid embl-grid--has-centered-content">
{% render '@vf-section-header', {
"section_title": "Future plans",
"id": "future",
"vf_section__content": [
]
} %}
<div>
{% markdown %}
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.
{% endmarkdown %}
</div>
</section>
---
title: Neutral Colours
title: Neutral colours
date: 2018-10-19 12:24:50
section: designtokens
templateEngineOverride: njk
......@@ -10,43 +10,13 @@ tags:
layout: layouts/base.njk
---
{% set type %}color{% endset %}
<h1 class="vf-intro__heading">{{ title }}</h1>
<main class="vf-grid vf-grid__col-3">
{% for item in tokens.neutral_colours.properties %}
<article class="vf-card">
<div style="background-color: {{ item.value}}; height: 200px; width: 100%;"></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>
<hr class="vf-divider">
{% if item.meta.sassVariable %}
<p class="vf-card__text">Sass Variable:</p>
<p class="vf-card__text"><code>${{ item.meta.sassVariable }}</code></p>
{% endif %}
{% if item.meta.sassMap %}
<p class="vf-card__text">Sass Function:</p>
<p class="vf-card__text"><code>{{ item.meta.sassMap }}</code></p>
{% endif %}
{% if item.meta.CSSCustomProperty %}
<hr class="vf-divider">
<p class="vf-card__text">CSS:</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>
{% endfor %}
{% for item in tokens.neutral_colours.properties %}
{% include "./token-card.njk" %}
{% else %}
<p>Something went wrong.</p>
{% endfor %}
</main>
......@@ -12,39 +12,12 @@ layout: layouts/base.njk
<h1 class="vf-intro__heading">{{ title }}</h1>
{% set type %}spacing{% endset %}
<main class="vf-grid vf-grid__col-3">
{% 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>
</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 %}
{% for item in tokens.spacing.properties %}
{% include "./token-card.njk" %}
{% else %}
<p>Something went wrong.</p>