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

adds some simple, easier to find design tokens pages (#1173)

* adds some simple, easier to find design tokens pages

* resolves issue with tokens template

* updates navigation

* removes yml file as it's not in use
parent 53db82c2
Pipeline #104323 passed with stages
in 5 minutes and 5 seconds
This diff is collapsed.
{
"section_header": "node_modules/@visual-framework/vf-section-header/vf-section-header.njk",
"links_list": "node_modules/@visual-framework/vf-link-list/vf-link-list.njk",
"box": "node_modules/@visual-framework/vf-box/vf-box.njk",
"badge": "node_modules/@visual-framework/vf-badge/vf-badge.njk"
}
{
"card_container": "node_modules/@visual-framework/vf-card-container/vf-card-container.njk",
"summary_container": "node_modules/@visual-framework/vf-summary-container/vf-summary-container.njk",
"hero": "node_modules/@visual-framework/vf-hero/vf-hero.njk",
"intro": "node_modules/@visual-framework/vf-intro/vf-intro.njk"
}
{
"button": "node_modules/@visual-framework/vf-button/vf-button.njk"
}
---
layout: layouts/base.njk
pageClass: posts
templateEngineOverride: njk, md
---
{# Use this template for main tokens of a site. #}
<h1 class="vf-intro__heading" style="margin-bottom: 0 !important;">{{ title }}</h1>
<p class="vf-lede">{{ subtitle }}</p>
<nav class="vf-navigation vf-navigation--main">
<ul class="vf-navigation__list | vf-list--inline">
<li class="vf-navigation__item">
<a href="{{ '/design-tokens/' | url}}"class="vf-navigation__link">Overview</a>
</li>
<li class="vf-navigation__item">
<a href="{{ '/design-tokens/theming' | url}}" class="vf-navigation__link">Theming</a>
</li>
<li class="vf-navigation__item">
<a href="{{ '/design-tokens/colours' | url}}" class="vf-navigation__link">Colours</a>
</li>
<li class="vf-navigation__item">
<a href="{{ '/design-tokens/spacing' | url}}" class="vf-navigation__link">Spacing</a>
</li>
<li class="vf-navigation__item">
<a href="{{ '/design-tokens/typography' | url}}" class="vf-navigation__link">Typography</a>
</li>
<li class="vf-navigation__item">
<a href="{{ '/design-tokens/breakpoints' | url}}" class="vf-navigation__link">Breakpoints</a>
</li>
</ul>
</nav>
{%- if content | length > 1 -%}
{{ content | safe }}
{%- endif %}
---
is_index: true
title: Design Tokens
subtitle: Breakpoints
date: 2018-10-19 12:24:50
section: components
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--breakpoints' -%}
---
is_index: true
title: Design Tokens
subtitle: Colours
date: 2018-10-19 12:24:50
section: components
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--colours' -%}
{%- render '@vf-design-tokens--ui-colours' -%}
---
is_index: true
title: Design Tokens
date: 2018-10-16 12:24:50
section: components
tags: sections
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---
</nav>
{% markdown %}
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`.
{% endmarkdown %}
---
is_index: true
title: Design Tokens
subtitle: Spacing
date: 2018-10-19 12:24:50
section: components
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--spacing' -%}
---
is_index: true
title: Design Tokens
subtitle: Theming
date: 2018-10-19 12:24:50
section: components
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--themes' -%}
---
is_index: true
title: Design Tokens
subtitle: Typography
date: 2018-10-19 12:24:50
section: components
templateEngineOverride: njk
layout: layouts/tokens.njk
hideSubPosts: true
---
{%- render '@vf-design-tokens--typography' -%}
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