@vonage/vivid 3.0.0-next.47 → 3.0.0-next.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -2
- package/package.json +1 -1
- package/styles/typography/desktop.css +72 -0
package/README.md
CHANGED
|
@@ -52,6 +52,10 @@ The folder contains the following files:
|
|
|
52
52
|
|
|
53
53
|
- `fonts/spezia.css` - Loads the *Spezia* variable font and specifies its font face definition. *Spezia* is Vonage's branded font and is required by most Vivid components
|
|
54
54
|
|
|
55
|
+
- Typography
|
|
56
|
+
|
|
57
|
+
- `typography/desktop.css` - Defines the typography for desktop devices
|
|
58
|
+
|
|
55
59
|
- Themes - only one theme can apply at a time. thus, only one is required to be loaded
|
|
56
60
|
|
|
57
61
|
- `themes/light.css` - Light theme
|
|
@@ -61,8 +65,9 @@ The folder contains the following files:
|
|
|
61
65
|
Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
|
|
62
66
|
|
|
63
67
|
```css
|
|
64
|
-
@forward 'node_modules/@vonage/vivid/styles/fonts/spezia';
|
|
65
|
-
@forward 'node_modules/@vonage/vivid/styles/
|
|
68
|
+
@forward 'node_modules/@vonage/vivid/styles/fonts/spezia.css';
|
|
69
|
+
@forward 'node_modules/@vonage/vivid/styles/typography/desktop.css';
|
|
70
|
+
@forward 'node_modules/@vonage/vivid/styles/themes/light.css';
|
|
66
71
|
```
|
|
67
72
|
|
|
68
73
|
## Support
|
package/package.json
CHANGED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Do not edit directly
|
|
3
|
+
Generated on Wed, 27 Apr 2022 11:58:36 GMT
|
|
4
|
+
*/
|
|
5
|
+
:root.vvd-typography h1, :root.vvd-typography .headline-1 {
|
|
6
|
+
font: 500 condensed 66px / 88px SpeziaWebVariable;
|
|
7
|
+
letter-spacing: 0px;
|
|
8
|
+
text-decoration: none;
|
|
9
|
+
text-transform: none;
|
|
10
|
+
margin-block: 2.5rem;
|
|
11
|
+
}
|
|
12
|
+
:root.vvd-typography h2, :root.vvd-typography .headline-2 {
|
|
13
|
+
font: 500 condensed 52px / 68px SpeziaWebVariable;
|
|
14
|
+
letter-spacing: 0px;
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
text-transform: none;
|
|
17
|
+
margin-block: 2.5rem;
|
|
18
|
+
}
|
|
19
|
+
:root.vvd-typography h3, :root.vvd-typography .subtitle-1 {
|
|
20
|
+
font: 500 condensed 26px / 36px SpeziaWebVariable;
|
|
21
|
+
letter-spacing: 0px;
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
text-transform: none;
|
|
24
|
+
margin-block: 1.5rem;
|
|
25
|
+
}
|
|
26
|
+
:root.vvd-typography h4, :root.vvd-typography .subtitle-2 {
|
|
27
|
+
font: 500 condensed 20px / 28px SpeziaWebVariable;
|
|
28
|
+
letter-spacing: 0px;
|
|
29
|
+
text-decoration: none;
|
|
30
|
+
text-transform: none;
|
|
31
|
+
margin-block: 1.5rem;
|
|
32
|
+
}
|
|
33
|
+
:root.vvd-typography h5, :root.vvd-typography .title-1 {
|
|
34
|
+
font: 500 condensed 40px / 52px SpeziaWebVariable;
|
|
35
|
+
letter-spacing: 0px;
|
|
36
|
+
text-decoration: none;
|
|
37
|
+
text-transform: none;
|
|
38
|
+
margin-block: 2rem;
|
|
39
|
+
}
|
|
40
|
+
:root.vvd-typography h6, :root.vvd-typography .title-2 {
|
|
41
|
+
font: 500 condensed 32px / 44px SpeziaWebVariable;
|
|
42
|
+
letter-spacing: 0px;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
text-transform: none;
|
|
45
|
+
margin-block: 2rem;
|
|
46
|
+
}
|
|
47
|
+
:root.vvd-typography code {
|
|
48
|
+
font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
|
|
49
|
+
letter-spacing: 0px;
|
|
50
|
+
text-decoration: none;
|
|
51
|
+
text-transform: none;
|
|
52
|
+
}
|
|
53
|
+
:root.vvd-typography body, :root.vvd-typography p {
|
|
54
|
+
font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;
|
|
55
|
+
letter-spacing: 0px;
|
|
56
|
+
text-decoration: none;
|
|
57
|
+
text-transform: none;
|
|
58
|
+
}
|
|
59
|
+
:root.vvd-typography strong {
|
|
60
|
+
font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;
|
|
61
|
+
letter-spacing: 0px;
|
|
62
|
+
text-decoration: none;
|
|
63
|
+
text-transform: none;
|
|
64
|
+
}
|
|
65
|
+
:root.vvd-typography code {
|
|
66
|
+
font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
|
|
67
|
+
letter-spacing: 0px;
|
|
68
|
+
text-decoration: none;
|
|
69
|
+
text-transform: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/*# sourceMappingURL=desktop.css.map */
|