-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathdesign-tokens.md
180 lines (133 loc) · 6.47 KB
/
design-tokens.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
# Design Tokens
## What are design tokens?
Design tokens are all the values needed to construct and maintain a design system — color, typography, spacing, object styles, sizing, etc. — represented as data.
These can represent anything defined by design: font size in pixel, a color as a RGB value, an opacity as a number, etc. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.
Design tokens are directly integrated into our component libraries and UI kits. They cover the various options of platform scales, color themes, component states, and more.
Using design tokens allows us to manage and maintain our design system as Vonage’s design Single source of truth.
### Design token Identities
| **Identities** | **Properties** |
| :-------------- |:----------------- |
| **Typography** | Font sizes |
| | Font weights |
| | Font decoration |
| | Line Height |
| **Color** | Color Palette |
| | Connotation colors|
| **Scheme** | Dark mode |
| | Light mode |
| **Elevation** | Drop Shadow |
| | Opacity |
| **Sizing** | Spacing |
| | Dense |
| **Shape** | Border Style |
| | Border Radius |
### Design token types
The following types of design tokens are the building blocks and design decisions that make up the Vivid design language:
**Global tokens** - global tokens are the primitive values in our design language, represented by context-agnostic names. Our color palette, typography, and elevation values are all recorded as global tokens. These can be directly used, and are inherited by all other token types.
**Alias tokens** - alias tokens relate to a specific context or abstraction. Aliases help communicate the intended purpose of a token, and are effective when a value with a single intent will appear in multiple places.
## Using design tokens
Aside from the [color-related tokens](/designs/color-palette), you may use the following to customize your application appearance.
### Typography
#### Typefaces
Set the font custom properties of your choice (or all) to override the default typography styles with your own.
```css
--vvd-typography-headline
--vvd-typography-subtitle
--vvd-typography-heading-1
--vvd-typography-heading-2
--vvd-typography-heading-3
--vvd-typography-heading-4
--vvd-typography-base
--vvd-typography-base-bold
--vvd-typography-base-code
--vvd-typography-base-condensed
--vvd-typography-base-condensed-bold
--vvd-typography-base-extended
--vvd-typography-base-extended-bold
```
```html preview
<style>
:root {
--vvd-typography-heading-4: 500 20px/1.4 Georgia;
--vvd-typography-base-code: 400 16px monospace;
--vvd-typography-base-bold: 500 16px Georgia;
}
</style>
<vwc-header>
This header typeface is set by '--vvd-typography-heading-4'
</vwc-header>
<pre>/*
* This block of code typeface is set by '--vvd-typography-base-code'
*/
</pre>
<vwc-button appearance="filled" label="This button typeface is set by '--vvd-typography-base-bold'"></vwc-button>
```
#### Font size
Use `--vvd-size-font-scale-base` to define the base font size which all typefaces sizes are based on.
- Type: [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)
- Default: `'16px'`
Note that when using the [core styles](/#core-optional) with the `vvd-root` class set on the root element (i.e., `<html>`), the user-agent's default font size is unset (generally default to `'16px'`) and the `--vvd-size-font-scale-base` custom property is set to `'1rem'` to ensure end user's font size preferences are respected.
```html preview
<style>
.vvd-root:root {
--vvd-size-font-scale-base: 1.3rem;
}
</style>
<vwc-header>
This header's title is 30% larger
</vwc-header>
<pre>/*
* This block of code too
*/
</pre>
<vwc-button appearance="filled" label="And the button label"></vwc-button>
```
#### Typefaces preset
The following CSS custom properties can be referred to style the text in your application with the Vivid design language:
```html preview
<div style="font: var(--vvd-typography-headline)">headline</div>
<div style="font: var(--vvd-typography-subtitle)">subtitle</div>
<div style="font: var(--vvd-typography-heading-1)">heading-1</div>
<div style="font: var(--vvd-typography-heading-2)">heading-2</div>
<div style="font: var(--vvd-typography-heading-3)">heading-3</div>
<div style="font: var(--vvd-typography-heading-4)">heading-4</div>
<div style="font: var(--vvd-typography-base)">base</div>
<div style="font: var(--vvd-typography-base-bold)">base bold</div>
<div style="font: var(--vvd-typography-base-code)">base code</div>
<div style="font: var(--vvd-typography-base-condensed)">condensed</div>
<div style="font: var(--vvd-typography-base-condensed-bold)">condensed bold</div>
<div style="font: var(--vvd-typography-base-extended)">extended</div>
<div style="font: var(--vvd-typography-base-extended-bold)">extended bold</div>
```
### Sizing
#### Density
Use `--vvd-size-density` to modify the density of the Vivid integrated UI. This can be scoped to a specific element, or set globally.
Due to a11y and design constraints, the density can only be set to one of the following values `-1` (most condensed), `0`, `1` and `2` (most expanded).
- Type: `-1` | `0` | `1` | `2`
- Default: `0`
```html preview blocks
<style>
#scoped-region {
--vvd-size-density: 1;
}
</style>
<vwc-number-field label="Choose density" helper-text="Change density value" min="-1" max="2" value="1" style="justify-self: flex-start; width: 105px;"></vwc-number-field>
<vwc-divider></vwc-divider>
<div id="scoped-region">
<form style="width: 250px">
<vwc-layout column-basis="block">
<vwc-text-field label="First name:"></vwc-text-field>
<vwc-text-field label="Last name:"></vwc-text-field>
<vwc-button appearance="filled" label="Submit"></vwc-button>
</vwc-layout>
</form>
</div>
<script>
const root = document.querySelector('#scoped-region');
const numberfield = document.querySelector('vwc-number-field');
numberfield.addEventListener('change', (e) => root.style.setProperty('--vvd-size-density', e.target.value));
</script>
```