@workday/canvas-kit-docs 16.0.0-alpha.0491-next.0 → 16.0.0-alpha.0492-next.0
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.
|
@@ -55,6 +55,7 @@ Soon to be...
|
|
|
55
55
|
- [Tooltip](#tooltip)
|
|
56
56
|
- [New Utilities](#new-utilities)
|
|
57
57
|
- [cornerShapeStencil](#cornershapestencil)
|
|
58
|
+
- [Fonts](#fonts)
|
|
58
59
|
- [Deprecations](#deprecations)
|
|
59
60
|
- [Glossary](#glossary)
|
|
60
61
|
- [Main](#main)
|
|
@@ -887,8 +888,15 @@ export const myStencil = createStencil({
|
|
|
887
888
|
});
|
|
888
889
|
```
|
|
889
890
|
|
|
890
|
-
`Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`),
|
|
891
|
-
`Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
|
|
891
|
+
`Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`),
|
|
892
|
+
`MultiSelect`, and `Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
|
|
893
|
+
|
|
894
|
+
## Fonts
|
|
895
|
+
|
|
896
|
+
Sana Canvas is a new theme available in v16, enabled by setting `data-theme="sana-canvas"` on
|
|
897
|
+
`<html>` (or a scoped ancestor element). See our
|
|
898
|
+
[Fonts guide](https://workday.github.io/canvas-kit/?path=/docs/guides-fonts--docs) for instructions
|
|
899
|
+
on setting up the Sana Sans font required by this theme.
|
|
892
900
|
|
|
893
901
|
## Deprecations
|
|
894
902
|
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
# Fonts
|
|
2
|
+
|
|
3
|
+
Canvas Kit doesn't include fonts by default. Which font you need, and how to load it, depends on
|
|
4
|
+
whether your application has the [Sana Canvas theme](#sana-sans) (`data-theme="sana-canvas"`)
|
|
5
|
+
enabled.
|
|
6
|
+
|
|
7
|
+
- If the Sana Canvas theme **is** enabled, use [Sana Sans](#sana-sans).
|
|
8
|
+
- If the Sana Canvas theme **is not** enabled (the default/legacy Canvas theme), configure your app
|
|
9
|
+
to use [Roboto](#roboto) instead.
|
|
10
|
+
|
|
11
|
+
## Sana Sans
|
|
12
|
+
|
|
13
|
+
Sana Sans should be applied whenever the
|
|
14
|
+
[Sana Canvas theme](#using-sana-sans-with-the-sana-canvas-theme) is enabled in your application.
|
|
15
|
+
|
|
16
|
+
### Installation
|
|
17
|
+
|
|
18
|
+
```sh
|
|
19
|
+
yarn add @workday/canvas-kit-react
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Usage
|
|
23
|
+
|
|
24
|
+
The `fonts` module, exported from `@workday/canvas-kit-react`, makes importing font files simple so
|
|
25
|
+
you know you're using the correct font in your environment. We use Sana Sans for most languages we
|
|
26
|
+
support at Workday.
|
|
27
|
+
|
|
28
|
+
> Note: If your application environment already provides Sana Sans, you don't need to inject it as
|
|
29
|
+
> in the example below. Otherwise, follow these steps to inject it.
|
|
30
|
+
|
|
31
|
+
You can inject our CSS `@font-face` styles into your application by using `injectGlobal`. We prefer
|
|
32
|
+
this approach over `@emotion/react`'s [Global](https://emotion.sh/docs/globals) component that
|
|
33
|
+
injects the styles at runtime.
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import {fonts} from '@workday/canvas-kit-react/fonts';
|
|
37
|
+
import {injectGlobal} from '@workday/canvas-kit-styling';
|
|
38
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
39
|
+
|
|
40
|
+
injectGlobal({
|
|
41
|
+
...fonts,
|
|
42
|
+
'html, body': {
|
|
43
|
+
fontFamily: system.fontFamily.default,
|
|
44
|
+
margin: 0,
|
|
45
|
+
minHeight: '100vh',
|
|
46
|
+
},
|
|
47
|
+
});
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Hosting Fonts
|
|
51
|
+
|
|
52
|
+
We currently host Sana Sans on AWS S3, and the `fonts` module includes `@font-face` rules to connect
|
|
53
|
+
the proper font files.
|
|
54
|
+
|
|
55
|
+
### Variable Fonts
|
|
56
|
+
|
|
57
|
+
Sana Sans is a
|
|
58
|
+
[variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts). That
|
|
59
|
+
means instead of importing multiple static files, you can import a single, dynamic file that
|
|
60
|
+
supports multiple font weights and styles. It also provides more flexibility and customization than
|
|
61
|
+
traditional, static fonts. But you should be able to use it identically to how you've been using
|
|
62
|
+
other fonts.
|
|
63
|
+
|
|
64
|
+
- **Family**: Sana Sans
|
|
65
|
+
- **Format**: TrueType variable font
|
|
66
|
+
- **Weight range**: 100–700 (Regular through Bold)
|
|
67
|
+
- **Styles**: normal, italic
|
|
68
|
+
- **Source**: `https://design.workdaycdn.com/assets/fonts/Sana-Sans/SanaSansLCG05-Variable.ttf`
|
|
69
|
+
|
|
70
|
+
### Monospace Font
|
|
71
|
+
|
|
72
|
+
The `fonts` module also includes IBM Plex Mono, used for `system.fontFamily.mono` under the Sana
|
|
73
|
+
Canvas theme.
|
|
74
|
+
|
|
75
|
+
- **Family**: IBM Plex Mono
|
|
76
|
+
- **Format**: WOFF2
|
|
77
|
+
- **Weight**: 400 (Regular)
|
|
78
|
+
- **Styles**: normal
|
|
79
|
+
- **Source**: `https://design.workdaycdn.com/assets/fonts/IBM-Plex-Mono/IBMPlexMono-Regular.woff2`
|
|
80
|
+
|
|
81
|
+
### Using Sana Sans with the Sana Canvas Theme
|
|
82
|
+
|
|
83
|
+
The Sana Canvas theme is enabled by setting `data-theme="sana-canvas"` on `<html>` (or a scoped
|
|
84
|
+
ancestor element). This switches the `--cnvs-sys-font-family-default` token
|
|
85
|
+
(`system.fontFamily.default`) to reference `'Sana Sans VF'` via the cascade in
|
|
86
|
+
`@workday/canvas-tokens-web/css/sana/_variables.css`.
|
|
87
|
+
|
|
88
|
+
To use this theme, you also must import `@workday/canvas-tokens-web/css/sana/_variables.css` in
|
|
89
|
+
addition to the other token CSS files. See the
|
|
90
|
+
[Getting Started guide](https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs)
|
|
91
|
+
for a full tokens CSS file import example.
|
|
92
|
+
|
|
93
|
+
> **Note:** This requires `@workday/canvas-tokens-web` `4.4.0` or later. If you're on an older
|
|
94
|
+
> version, upgrade `@workday/canvas-tokens-web` first.
|
|
95
|
+
|
|
96
|
+
Once the theme's font-family token and the loaded `@font-face` share the same family name, no
|
|
97
|
+
additional CSS override is required — import and use the `fonts` module exactly as described in
|
|
98
|
+
[Usage](#usage) above, and Sana Sans will render automatically wherever `data-theme="sana-canvas"`
|
|
99
|
+
is set.
|
|
100
|
+
|
|
101
|
+
## Roboto
|
|
102
|
+
|
|
103
|
+
If your application doesn't have the Sana Canvas theme enabled, install
|
|
104
|
+
`@workday/canvas-kit-react-fonts` to load Roboto instead. This module also includes Roboto Mono,
|
|
105
|
+
used for `system.fontFamily.mono`.
|
|
106
|
+
|
|
107
|
+
### Installation
|
|
108
|
+
|
|
109
|
+
```sh
|
|
110
|
+
yarn add @workday/canvas-kit-react-fonts
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Usage
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
import {fonts} from '@workday/canvas-kit-react-fonts';
|
|
117
|
+
import {injectGlobal} from '@workday/canvas-kit-styling';
|
|
118
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
119
|
+
|
|
120
|
+
injectGlobal({
|
|
121
|
+
...fonts,
|
|
122
|
+
'html, body': {
|
|
123
|
+
fontFamily: system.fontFamily.default,
|
|
124
|
+
margin: 0,
|
|
125
|
+
minHeight: '100vh',
|
|
126
|
+
},
|
|
127
|
+
});
|
|
128
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.0.0-alpha.
|
|
3
|
+
"version": "16.0.0-alpha.0492-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^16.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.0.0-alpha.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.0.0-alpha.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.0.0-alpha.0492-next.0",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.0.0-alpha.0492-next.0",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.0.0-alpha.0492-next.0",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.0.0-alpha.0492-next.0",
|
|
54
54
|
"@workday/canvas-system-icons-web": "5.0.1",
|
|
55
|
-
"@workday/canvas-tokens-web": "4.4.0-beta.
|
|
55
|
+
"@workday/canvas-tokens-web": "4.4.0-beta.13",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
57
57
|
"react-syntax-highlighter": "^15.5.0",
|
|
58
58
|
"ts-node": "^10.9.1"
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "27691d763b93d270f78808ca298848d405c888e1"
|
|
67
67
|
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
# Sana Sans Font
|
|
2
|
-
|
|
3
|
-
## Installation
|
|
4
|
-
|
|
5
|
-
```sh
|
|
6
|
-
yarn add @workday/canvas-kit-react
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
## Usage
|
|
10
|
-
|
|
11
|
-
The fonts package makes importing font files simple so you know you're using the correct font in your environment. We use Sana Sans for most languages we support at Workday.
|
|
12
|
-
|
|
13
|
-
> Note: If your application environment already provides Sana Sans, you don't need to inject it as in the example below. But this package is useful for testing, documentation, and development where you don't have the font readily available. This package is likely not appropriate to use in production environments due to how the font is [hosted](#hosting-fonts).
|
|
14
|
-
|
|
15
|
-
You can inject our CSS `@font-face` styles into your application by using `injectGlobal`. We prefer this approach over `@emotion/react`'s [Global](https://emotion.sh/docs/globals) component that injects the styles at runtime.
|
|
16
|
-
|
|
17
|
-
```ts
|
|
18
|
-
import {injectGlobal} from '@workday/canvas-kit-styling';
|
|
19
|
-
import {fonts} from '@workday/canvas-kit-react/fonts';
|
|
20
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
21
|
-
|
|
22
|
-
injectGlobal(...fonts);
|
|
23
|
-
injectGlobal({
|
|
24
|
-
'html, body': {
|
|
25
|
-
fontFamily: system.fontFamily.default,
|
|
26
|
-
margin: 0,
|
|
27
|
-
minHeight: '100vh',
|
|
28
|
-
},
|
|
29
|
-
});
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Hosting Fonts
|
|
33
|
-
|
|
34
|
-
We currently host Sana Sans through durable storage, and this package connects `@font-faces` to those font files. This keeps the package size minimal, while ensuring you don't have to worry about the wiring. But because durable storage is regionally-bound, you might consider using a CDN if your environment experiences degraded performance.
|
|
35
|
-
|
|
36
|
-
## Variable Fonts
|
|
37
|
-
|
|
38
|
-
Sana Sans is a [variable font](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts). That means instead of importing multiple static files, you can import a single, dynamic file that supports multiple font weights and styles. It also provides more flexibility and customization than traditional, static fonts. But you should be able to use it identically to how you've been using other fonts.
|
|
39
|
-
|
|
40
|
-
### Sana Sans
|
|
41
|
-
|
|
42
|
-
- **Family**: Sana Sans
|
|
43
|
-
- **Format**: TrueType variable font
|
|
44
|
-
- **Weight range**: 100–700 (Regular through Bold)
|
|
45
|
-
- **Styles**: normal, italic
|
|
46
|
-
- **Source**: `https://design.workdaycdn.com/assets/fonts/Sana-Sans/SanaSansLCG05-Variable.ttf`
|