@justeattakeaway/pie-css 0.25.0 → 0.26.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.
package/README.md
CHANGED
|
@@ -14,7 +14,6 @@
|
|
|
14
14
|
|
|
15
15
|
The PIE design tokens (and HSL colour variants) are exposed as CSS variables, as these variables are used across the PIE component styles and therefore need to be imported when using the PIE Web Components.
|
|
16
16
|
|
|
17
|
-
|
|
18
17
|
# Table of Contents
|
|
19
18
|
|
|
20
19
|
1. [Installation](#installation)
|
|
@@ -29,15 +28,19 @@ The PIE design tokens (and HSL colour variants) are exposed as CSS variables, as
|
|
|
29
28
|
3. [Typography](#typography)
|
|
30
29
|
4. [z-index variables](#z-index-variables)
|
|
31
30
|
5. [Reusable Animations](#reusable-animations)
|
|
32
|
-
4. [
|
|
31
|
+
4. [Typography Utility Classes](#typography-utility-classes)
|
|
32
|
+
5. [Using the `pie-css` SCSS helpers (mixins & functions)](#using-the-pie-css-scss-helpers-mixins--functions)
|
|
33
33
|
1. [Importing the `pie-css` SCSS helpers](#importing-the-pie-css-scss-helpers)
|
|
34
34
|
2. [`pie-css` SCSS Helper Definitions](#pie-css-scss-helper-definitions)
|
|
35
35
|
- [`font-size()`](#font-size)
|
|
36
36
|
- [`@include media()`](#include-media)
|
|
37
|
-
|
|
37
|
+
6. [Testing](#testing)
|
|
38
38
|
- [CSS](#css)
|
|
39
39
|
- [SCSS](#scss)
|
|
40
40
|
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
41
44
|
## Installation
|
|
42
45
|
|
|
43
46
|
To install `pie-css`, run the following on your command line:
|
|
@@ -50,9 +53,6 @@ npm i @justeattakeaway/pie-css
|
|
|
50
53
|
yarn add @justeattakeaway/pie-css
|
|
51
54
|
```
|
|
52
55
|
|
|
53
|
-
|
|
54
|
-
---
|
|
55
|
-
|
|
56
56
|
## Using the `pie-css` CSS stylesheet in your web application
|
|
57
57
|
|
|
58
58
|
`pie-css` provides a base stylesheet that sets up some basic styles used by the PIE Web Components. It is essential that this stylesheet is included in any application that uses PIE Web Components. The stylesheet provides a minimal set of styles for ensuring typography displayed as intended, while also importing the PIE design tokens that are used by our components.
|
|
@@ -200,6 +200,23 @@ In most cases, a webpage should follow the DOM's natural stacking order and the
|
|
|
200
200
|
|
|
201
201
|
The starting position of the slide animation can be customised by overriding the `--pie-animation-slide-translate-start` CSS variable. The default value is `-100%`.
|
|
202
202
|
|
|
203
|
+
|
|
204
|
+
---
|
|
205
|
+
|
|
206
|
+
## Typography Utility Classes
|
|
207
|
+
|
|
208
|
+
`pie-css` includes a comprehensive set of typography utility classes that provide consistent typography styles across your application. These utility classes are built on top of PIE design tokens and automatically apply the correct font family, weight, size, line height, and spacing.
|
|
209
|
+
|
|
210
|
+
The utility classes follow a simple naming convention: `u-font-{token-name}`, where the token name matches the design token used in Figma. For example, the `body-l-link` token becomes the `.u-font-body-l-link` utility class.
|
|
211
|
+
|
|
212
|
+
To use the typography utilities, import the typography CSS file:
|
|
213
|
+
|
|
214
|
+
```js
|
|
215
|
+
import '@justeattakeaway/pie-css/dist/helpers/typography.css';
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
For complete documentation on all available typography utility classes, including usage examples and best practices, see the [Typography Utilities documentation in Storybook](/docs/additional-libraries-pie-css-typography-utility-classes--docs).
|
|
219
|
+
|
|
203
220
|
---
|
|
204
221
|
|
|
205
222
|
## Using the `pie-css` SCSS helpers (mixins & functions)
|
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
.u-font-heading-xs {
|
|
2
|
+
font-family: var(--dt-font-heading-xs-family);
|
|
3
|
+
font-weight: var(--dt-font-heading-xs-weight);
|
|
4
|
+
font-size: calc(var(--dt-font-heading-xs-size--narrow) * 1px);
|
|
5
|
+
line-height: calc(var(--dt-font-heading-xs-line-height--narrow) * 1px);
|
|
6
|
+
}
|
|
7
|
+
@media (min-width: 768px) {
|
|
8
|
+
.u-font-heading-xs {
|
|
9
|
+
font-size: calc(var(--dt-font-heading-xs-size--wide) * 1px);
|
|
10
|
+
line-height: calc(var(--dt-font-heading-xs-line-height--wide) * 1px);
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.u-font-heading-s {
|
|
15
|
+
font-family: var(--dt-font-heading-s-family);
|
|
16
|
+
font-weight: var(--dt-font-heading-s-weight);
|
|
17
|
+
font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);
|
|
18
|
+
line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);
|
|
19
|
+
}
|
|
20
|
+
@media (min-width: 768px) {
|
|
21
|
+
.u-font-heading-s {
|
|
22
|
+
font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);
|
|
23
|
+
line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.u-font-heading-m {
|
|
28
|
+
font-family: var(--dt-font-heading-m-family);
|
|
29
|
+
font-weight: var(--dt-font-heading-m-weight);
|
|
30
|
+
font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);
|
|
31
|
+
line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);
|
|
32
|
+
}
|
|
33
|
+
@media (min-width: 768px) {
|
|
34
|
+
.u-font-heading-m {
|
|
35
|
+
font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
|
|
36
|
+
line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.u-font-heading-l {
|
|
41
|
+
font-family: var(--dt-font-heading-l-family);
|
|
42
|
+
font-weight: var(--dt-font-heading-l-weight);
|
|
43
|
+
font-size: calc(var(--dt-font-heading-l-size--narrow) * 1px);
|
|
44
|
+
line-height: calc(var(--dt-font-heading-l-line-height--narrow) * 1px);
|
|
45
|
+
}
|
|
46
|
+
@media (min-width: 768px) {
|
|
47
|
+
.u-font-heading-l {
|
|
48
|
+
font-size: calc(var(--dt-font-heading-l-size--wide) * 1px);
|
|
49
|
+
line-height: calc(var(--dt-font-heading-l-line-height--wide) * 1px);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.u-font-heading-xl {
|
|
54
|
+
font-family: var(--dt-font-heading-xl-family);
|
|
55
|
+
font-weight: var(--dt-font-heading-xl-weight);
|
|
56
|
+
font-size: calc(var(--dt-font-heading-xl-size--narrow) * 1px);
|
|
57
|
+
line-height: calc(var(--dt-font-heading-xl-line-height--narrow) * 1px);
|
|
58
|
+
}
|
|
59
|
+
@media (min-width: 768px) {
|
|
60
|
+
.u-font-heading-xl {
|
|
61
|
+
font-size: calc(var(--dt-font-heading-xl-size--wide) * 1px);
|
|
62
|
+
line-height: calc(var(--dt-font-heading-xl-line-height--wide) * 1px);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.u-font-heading-xxl {
|
|
67
|
+
font-family: var(--dt-font-heading-xxl-family);
|
|
68
|
+
font-weight: var(--dt-font-heading-xxl-weight);
|
|
69
|
+
font-size: calc(var(--dt-font-heading-xxl-size--narrow) * 1px);
|
|
70
|
+
line-height: calc(var(--dt-font-heading-xxl-line-height--narrow) * 1px);
|
|
71
|
+
}
|
|
72
|
+
@media (min-width: 768px) {
|
|
73
|
+
.u-font-heading-xxl {
|
|
74
|
+
font-size: calc(var(--dt-font-heading-xxl-size--wide) * 1px);
|
|
75
|
+
line-height: calc(var(--dt-font-heading-xxl-line-height--wide) * 1px);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.u-font-heading-xs-italic {
|
|
80
|
+
font-family: var(--dt-font-heading-xs-italic-family);
|
|
81
|
+
font-weight: var(--dt-font-heading-xs-italic-weight);
|
|
82
|
+
font-style: var(--dt-font-heading-xs-italic-font-style);
|
|
83
|
+
font-variation-settings: "slnt" -20;
|
|
84
|
+
font-size: calc(var(--dt-font-heading-xs-italic-size--narrow) * 1px);
|
|
85
|
+
line-height: calc(var(--dt-font-heading-xs-italic-line-height--narrow) * 1px);
|
|
86
|
+
}
|
|
87
|
+
@media (min-width: 768px) {
|
|
88
|
+
.u-font-heading-xs-italic {
|
|
89
|
+
font-size: calc(var(--dt-font-heading-xs-italic-size--wide) * 1px);
|
|
90
|
+
line-height: calc(var(--dt-font-heading-xs-italic-line-height--wide) * 1px);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.u-font-heading-s-italic {
|
|
95
|
+
font-family: var(--dt-font-heading-s-italic-family);
|
|
96
|
+
font-weight: var(--dt-font-heading-s-italic-weight);
|
|
97
|
+
font-style: var(--dt-font-heading-s-italic-font-style);
|
|
98
|
+
font-variation-settings: "slnt" -20;
|
|
99
|
+
font-size: calc(var(--dt-font-heading-s-italic-size--narrow) * 1px);
|
|
100
|
+
line-height: calc(var(--dt-font-heading-s-italic-line-height--narrow) * 1px);
|
|
101
|
+
}
|
|
102
|
+
@media (min-width: 768px) {
|
|
103
|
+
.u-font-heading-s-italic {
|
|
104
|
+
font-size: calc(var(--dt-font-heading-s-italic-size--wide) * 1px);
|
|
105
|
+
line-height: calc(var(--dt-font-heading-s-italic-line-height--wide) * 1px);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.u-font-heading-m-italic {
|
|
110
|
+
font-family: var(--dt-font-heading-m-italic-family);
|
|
111
|
+
font-weight: var(--dt-font-heading-m-italic-weight);
|
|
112
|
+
font-style: var(--dt-font-heading-m-italic-font-style);
|
|
113
|
+
font-variation-settings: "slnt" -20;
|
|
114
|
+
font-size: calc(var(--dt-font-heading-m-italic-size--narrow) * 1px);
|
|
115
|
+
line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);
|
|
116
|
+
}
|
|
117
|
+
@media (min-width: 768px) {
|
|
118
|
+
.u-font-heading-m-italic {
|
|
119
|
+
font-size: calc(var(--dt-font-heading-m-italic-size--wide) * 1px);
|
|
120
|
+
line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.u-font-heading-l-italic {
|
|
125
|
+
font-family: var(--dt-font-heading-l-italic-family);
|
|
126
|
+
font-weight: var(--dt-font-heading-l-italic-weight);
|
|
127
|
+
font-style: var(--dt-font-heading-l-italic-font-style);
|
|
128
|
+
font-variation-settings: "slnt" -20;
|
|
129
|
+
font-size: calc(var(--dt-font-heading-l-italic-size--narrow) * 1px);
|
|
130
|
+
line-height: calc(var(--dt-font-heading-l-italic-line-height--narrow) * 1px);
|
|
131
|
+
}
|
|
132
|
+
@media (min-width: 768px) {
|
|
133
|
+
.u-font-heading-l-italic {
|
|
134
|
+
font-size: calc(var(--dt-font-heading-l-italic-size--wide) * 1px);
|
|
135
|
+
line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px);
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.u-font-heading-xl-italic {
|
|
140
|
+
font-family: var(--dt-font-heading-xl-italic-family);
|
|
141
|
+
font-weight: var(--dt-font-heading-xl-italic-weight);
|
|
142
|
+
font-style: var(--dt-font-heading-xl-italic-font-style);
|
|
143
|
+
font-variation-settings: "slnt" -20;
|
|
144
|
+
font-size: calc(var(--dt-font-heading-xl-italic-size--narrow) * 1px);
|
|
145
|
+
line-height: calc(var(--dt-font-heading-xl-italic-line-height--narrow) * 1px);
|
|
146
|
+
}
|
|
147
|
+
@media (min-width: 768px) {
|
|
148
|
+
.u-font-heading-xl-italic {
|
|
149
|
+
font-size: calc(var(--dt-font-heading-xl-italic-size--wide) * 1px);
|
|
150
|
+
line-height: calc(var(--dt-font-heading-xl-italic-line-height--wide) * 1px);
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.u-font-heading-xxl-italic {
|
|
155
|
+
font-family: var(--dt-font-heading-xxl-italic-family);
|
|
156
|
+
font-weight: var(--dt-font-heading-xxl-italic-weight);
|
|
157
|
+
font-style: var(--dt-font-heading-xxl-italic-font-style);
|
|
158
|
+
font-variation-settings: "slnt" -20;
|
|
159
|
+
font-size: calc(var(--dt-font-heading-xxl-italic-size--narrow) * 1px);
|
|
160
|
+
line-height: calc(var(--dt-font-heading-xxl-italic-line-height--narrow) * 1px);
|
|
161
|
+
}
|
|
162
|
+
@media (min-width: 768px) {
|
|
163
|
+
.u-font-heading-xxl-italic {
|
|
164
|
+
font-size: calc(var(--dt-font-heading-xxl-italic-size--wide) * 1px);
|
|
165
|
+
line-height: calc(var(--dt-font-heading-xxl-italic-line-height--wide) * 1px);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.u-font-subheading-s {
|
|
170
|
+
font-family: var(--dt-font-subheading-s-family);
|
|
171
|
+
font-weight: var(--dt-font-subheading-s-weight);
|
|
172
|
+
font-size: calc(var(--dt-font-subheading-s-size--narrow) * 1px);
|
|
173
|
+
line-height: calc(var(--dt-font-subheading-s-line-height--narrow) * 1px);
|
|
174
|
+
}
|
|
175
|
+
@media (min-width: 768px) {
|
|
176
|
+
.u-font-subheading-s {
|
|
177
|
+
font-size: calc(var(--dt-font-subheading-s-size--wide) * 1px);
|
|
178
|
+
line-height: calc(var(--dt-font-subheading-s-line-height--wide) * 1px);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.u-font-subheading-l {
|
|
183
|
+
font-family: var(--dt-font-subheading-l-family);
|
|
184
|
+
font-weight: var(--dt-font-subheading-l-weight);
|
|
185
|
+
font-size: calc(var(--dt-font-subheading-l-size--narrow) * 1px);
|
|
186
|
+
line-height: calc(var(--dt-font-subheading-l-line-height--narrow) * 1px);
|
|
187
|
+
}
|
|
188
|
+
@media (min-width: 768px) {
|
|
189
|
+
.u-font-subheading-l {
|
|
190
|
+
font-size: calc(var(--dt-font-subheading-l-size--wide) * 1px);
|
|
191
|
+
line-height: calc(var(--dt-font-subheading-l-line-height--wide) * 1px);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.u-font-interactive-xs {
|
|
196
|
+
font-family: var(--dt-font-interactive-xs-family);
|
|
197
|
+
font-weight: var(--dt-font-interactive-xs-weight);
|
|
198
|
+
font-size: calc(var(--dt-font-interactive-xs-size) * 1px);
|
|
199
|
+
line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.u-font-interactive-s {
|
|
203
|
+
font-family: var(--dt-font-interactive-s-family);
|
|
204
|
+
font-weight: var(--dt-font-interactive-s-weight);
|
|
205
|
+
font-size: calc(var(--dt-font-interactive-s-size) * 1px);
|
|
206
|
+
line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.u-font-interactive-l {
|
|
210
|
+
font-family: var(--dt-font-interactive-l-family);
|
|
211
|
+
font-weight: var(--dt-font-interactive-l-weight);
|
|
212
|
+
font-size: calc(var(--dt-font-interactive-l-size) * 1px);
|
|
213
|
+
line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.u-font-body-s {
|
|
217
|
+
font-family: var(--dt-font-body-s-family);
|
|
218
|
+
font-weight: var(--dt-font-body-s-weight);
|
|
219
|
+
margin-block-end: calc(var(--dt-font-body-s-paragraph) * 1px);
|
|
220
|
+
font-size: calc(var(--dt-font-body-s-size) * 1px);
|
|
221
|
+
line-height: calc(var(--dt-font-body-s-line-height) * 1px);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.u-font-body-s-link {
|
|
225
|
+
font-family: var(--dt-font-body-s-link-family);
|
|
226
|
+
font-weight: var(--dt-font-body-s-link-weight);
|
|
227
|
+
text-decoration: var(--dt-font-body-s-link-text-decoration);
|
|
228
|
+
margin-block-end: calc(var(--dt-font-body-s-link-paragraph) * 1px);
|
|
229
|
+
font-size: calc(var(--dt-font-body-s-link-size) * 1px);
|
|
230
|
+
line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.u-font-body-l {
|
|
234
|
+
font-family: var(--dt-font-body-l-family);
|
|
235
|
+
font-weight: var(--dt-font-body-l-weight);
|
|
236
|
+
margin-block-end: calc(var(--dt-font-body-l-paragraph) * 1px);
|
|
237
|
+
font-size: calc(var(--dt-font-body-l-size) * 1px);
|
|
238
|
+
line-height: calc(var(--dt-font-body-l-line-height) * 1px);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.u-font-body-l-link {
|
|
242
|
+
font-family: var(--dt-font-body-l-link-family);
|
|
243
|
+
font-weight: var(--dt-font-body-l-link-weight);
|
|
244
|
+
text-decoration: var(--dt-font-body-l-link-text-decoration);
|
|
245
|
+
margin-block-end: calc(var(--dt-font-body-l-link-paragraph) * 1px);
|
|
246
|
+
font-size: calc(var(--dt-font-body-l-link-size) * 1px);
|
|
247
|
+
line-height: calc(var(--dt-font-body-l-link-line-height) * 1px);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.u-font-body-strong-s {
|
|
251
|
+
font-family: var(--dt-font-body-strong-s-family);
|
|
252
|
+
font-weight: var(--dt-font-body-strong-s-weight);
|
|
253
|
+
margin-block-end: calc(var(--dt-font-body-strong-s-paragraph) * 1px);
|
|
254
|
+
font-size: calc(var(--dt-font-body-strong-s-size) * 1px);
|
|
255
|
+
line-height: calc(var(--dt-font-body-strong-s-line-height) * 1px);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.u-font-body-strong-s-link {
|
|
259
|
+
font-family: var(--dt-font-body-strong-s-link-family);
|
|
260
|
+
font-weight: var(--dt-font-body-strong-s-link-weight);
|
|
261
|
+
text-decoration: var(--dt-font-body-strong-s-link-text-decoration);
|
|
262
|
+
margin-block-end: calc(var(--dt-font-body-strong-s-link-paragraph) * 1px);
|
|
263
|
+
font-size: calc(var(--dt-font-body-strong-s-link-size) * 1px);
|
|
264
|
+
line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.u-font-body-strong-l {
|
|
268
|
+
font-family: var(--dt-font-body-strong-l-family);
|
|
269
|
+
font-weight: var(--dt-font-body-strong-l-weight);
|
|
270
|
+
margin-block-end: calc(var(--dt-font-body-strong-l-paragraph) * 1px);
|
|
271
|
+
font-size: calc(var(--dt-font-body-strong-l-size) * 1px);
|
|
272
|
+
line-height: calc(var(--dt-font-body-strong-l-line-height) * 1px);
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.u-font-body-strong-l-link {
|
|
276
|
+
font-family: var(--dt-font-body-strong-l-link-family);
|
|
277
|
+
font-weight: var(--dt-font-body-strong-l-link-weight);
|
|
278
|
+
text-decoration: var(--dt-font-body-strong-l-link-text-decoration);
|
|
279
|
+
margin-block-end: calc(var(--dt-font-body-strong-l-link-paragraph) * 1px);
|
|
280
|
+
font-size: calc(var(--dt-font-body-strong-l-link-size) * 1px);
|
|
281
|
+
line-height: calc(var(--dt-font-body-strong-l-link-line-height) * 1px);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.u-font-caption {
|
|
285
|
+
font-family: var(--dt-font-caption-family);
|
|
286
|
+
font-weight: var(--dt-font-caption-weight);
|
|
287
|
+
margin-block-end: calc(var(--dt-font-caption-paragraph) * 1px);
|
|
288
|
+
font-size: calc(var(--dt-font-caption-size) * 1px);
|
|
289
|
+
line-height: calc(var(--dt-font-caption-line-height) * 1px);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.u-font-caption-link {
|
|
293
|
+
font-family: var(--dt-font-caption-link-family);
|
|
294
|
+
font-weight: var(--dt-font-caption-link-weight);
|
|
295
|
+
text-decoration: var(--dt-font-caption-link-text-decoration);
|
|
296
|
+
margin-block-end: calc(var(--dt-font-caption-link-paragraph) * 1px);
|
|
297
|
+
font-size: calc(var(--dt-font-caption-link-size) * 1px);
|
|
298
|
+
line-height: calc(var(--dt-font-caption-link-line-height) * 1px);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.u-font-caption-strong {
|
|
302
|
+
font-family: var(--dt-font-caption-strong-family);
|
|
303
|
+
font-weight: var(--dt-font-caption-strong-weight);
|
|
304
|
+
margin-block-end: calc(var(--dt-font-caption-strong-paragraph) * 1px);
|
|
305
|
+
font-size: calc(var(--dt-font-caption-strong-size) * 1px);
|
|
306
|
+
line-height: calc(var(--dt-font-caption-strong-line-height) * 1px);
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.u-font-caption-strong-link {
|
|
310
|
+
font-family: var(--dt-font-caption-strong-link-family);
|
|
311
|
+
font-weight: var(--dt-font-caption-strong-link-weight);
|
|
312
|
+
text-decoration: var(--dt-font-caption-strong-link-text-decoration);
|
|
313
|
+
margin-block-end: calc(var(--dt-font-caption-strong-link-paragraph) * 1px);
|
|
314
|
+
font-size: calc(var(--dt-font-caption-strong-link-size) * 1px);
|
|
315
|
+
line-height: calc(var(--dt-font-caption-strong-link-line-height) * 1px);
|
|
316
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
"homepage": "https://webc.pie.design/?path=/docs/additional-libraries-pie-css--docs",
|
|
11
11
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
12
12
|
"files": [
|
|
13
|
-
"scss"
|
|
13
|
+
"scss",
|
|
14
|
+
"dist"
|
|
14
15
|
],
|
|
15
16
|
"main": "dist/index.css",
|
|
16
17
|
"pieMetadata": {
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
"cdnContentType": "text/css"
|
|
20
21
|
},
|
|
21
22
|
"scripts": {
|
|
22
|
-
"build": "run -T ts-node ./buildCss.ts",
|
|
23
|
+
"build": "run -T ts-node ./buildCss.ts && run -T sass scss/_internal/typography.scss dist/helpers/typography.css --no-source-map",
|
|
23
24
|
"lint:scripts": "run -T eslint .",
|
|
24
25
|
"lint:scripts:fix": "yarn lint:scripts --fix",
|
|
25
26
|
"lint:style": "run -T stylelint ./**/*.{css,scss}",
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
@use '../mixins/font-theme' as *;
|
|
2
|
+
|
|
3
|
+
$typography-names: font-heading-xs font-heading-s font-heading-m font-heading-l font-heading-xl font-heading-xxl
|
|
4
|
+
font-heading-xs-italic font-heading-s-italic font-heading-m-italic font-heading-l-italic font-heading-xl-italic font-heading-xxl-italic
|
|
5
|
+
font-subheading-s font-subheading-l
|
|
6
|
+
font-interactive-xs font-interactive-s font-interactive-l
|
|
7
|
+
font-body-s font-body-s-link font-body-l font-body-l-link
|
|
8
|
+
font-body-strong-s font-body-strong-s-link
|
|
9
|
+
font-body-strong-l font-body-strong-l-link
|
|
10
|
+
font-caption font-caption-link font-caption-strong font-caption-strong-link;
|
|
11
|
+
|
|
12
|
+
@each $name in $typography-names {
|
|
13
|
+
.u-#{$name} {
|
|
14
|
+
@include font-theme($name);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
@use 'sass:meta';
|
|
2
|
+
@use 'sass:list';
|
|
3
|
+
@use 'sass:map';
|
|
4
|
+
|
|
5
|
+
// N.b. This next @use import is pretty horrible atm (sorry)
|
|
6
|
+
// We could pull in the tokens as a dependency for this package, but that seems worse potentially, so leaving as this for now
|
|
7
|
+
@use '../../../../../node_modules/@justeat/pie-design-tokens/dist/jet.scss' as *;
|
|
8
|
+
|
|
9
|
+
@mixin font-theme($token-name) {
|
|
10
|
+
// Define the wide breakpoint to be used in the responsive media query.
|
|
11
|
+
// This should match your design system's 'desktop' or 'large' breakpoint.
|
|
12
|
+
$dt-breakpoint-wide: $breakpoint-md;
|
|
13
|
+
|
|
14
|
+
// 1. Define properties that are typically responsive (size, line-height)
|
|
15
|
+
// These will use --narrow/--wide suffixes and calc(* 1px)
|
|
16
|
+
$responsive-properties: (
|
|
17
|
+
'size': 'font-size',
|
|
18
|
+
'line-height': 'line-height',
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
// 2. Define properties that are static
|
|
22
|
+
// These use the base suffix only.
|
|
23
|
+
$static-properties: (
|
|
24
|
+
'family': 'font-family',
|
|
25
|
+
'weight': 'font-weight',
|
|
26
|
+
'text-decoration': 'text-decoration',
|
|
27
|
+
'paragraph': 'margin-block-end',
|
|
28
|
+
'font-style': 'font-style',
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
// --- Mobile-First (Narrow) and Static Properties ---
|
|
32
|
+
|
|
33
|
+
// Apply Static Properties (font-family, font-weight, text-decoration, paragraph and font-style)
|
|
34
|
+
@each $suffix, $css-prop in $static-properties {
|
|
35
|
+
// Example variable structure (assuming $token-name is 'font-heading-l'): --dt-font-heading-l-family
|
|
36
|
+
$scss-name: '#{$token-name}-#{$suffix}';
|
|
37
|
+
$var-name: '--dt-#{$token-name}-#{$suffix}';
|
|
38
|
+
|
|
39
|
+
@if meta.variable-exists($scss-name) {
|
|
40
|
+
@if $suffix == 'paragraph' {
|
|
41
|
+
#{$css-prop}: calc(var(#{$var-name}) * 1px);
|
|
42
|
+
} @else if $suffix == 'font-style' {
|
|
43
|
+
// if we're setting font-style: italic, we need to add the font-variation-settings for slant
|
|
44
|
+
#{$css-prop}: var(#{$var-name});
|
|
45
|
+
font-variation-settings: 'slnt' -20;
|
|
46
|
+
} @else {
|
|
47
|
+
#{$css-prop}: var(#{$var-name});
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Setup a list which will be populated only if responsive variables exists
|
|
53
|
+
// This is then used to generate the wide variants of those properties
|
|
54
|
+
$wide-var-names: ();
|
|
55
|
+
|
|
56
|
+
// Apply Responsive Properties (font-size, line-height) for the default (Narrow) screen.
|
|
57
|
+
// Priority: 1. --narrow token | 2. Base token
|
|
58
|
+
@each $suffix, $css-prop in $responsive-properties {
|
|
59
|
+
$narrow-var-name: '--dt-#{$token-name}-#{$suffix}--narrow';
|
|
60
|
+
$has-narrow-var-name: meta.variable-exists('#{$token-name}-#{$suffix}--narrow');
|
|
61
|
+
$base-var-name: '--dt-#{$token-name}-#{$suffix}';
|
|
62
|
+
|
|
63
|
+
// Check if the variable exists. If not then
|
|
64
|
+
@if $has-narrow-var-name {
|
|
65
|
+
$wide-var-names: list.append($wide-var-names, (css-prop: $css-prop, suffix: $suffix), 'comma');
|
|
66
|
+
#{$css-prop}: calc(var(#{$narrow-var-name}) * 1px);
|
|
67
|
+
} @else {
|
|
68
|
+
#{$css-prop}: calc(var(#{$base-var-name}) * 1px);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
// --- Wide Screen Overrides ---
|
|
74
|
+
|
|
75
|
+
// Apply wide-screen overrides inside a media query
|
|
76
|
+
@if $wide-var-names != () {
|
|
77
|
+
@media (min-width: $dt-breakpoint-wide) {
|
|
78
|
+
@each $var-name in $wide-var-names {
|
|
79
|
+
$css-prop: map.get($var-name, css-prop);
|
|
80
|
+
$suffix: map.get($var-name, suffix);
|
|
81
|
+
$wide-var-name: '--dt-#{$token-name}-#{$suffix}--wide';
|
|
82
|
+
#{$css-prop}: calc(var(#{$wide-var-name}) * 1px);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
|
|
60
60
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
61
61
|
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
62
|
-
|
|
62
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-#{$level}-bg) var(--dt-color-hover-#{$level}), var(#{$bg-color}));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&:active:not(:disabled, .is-disabled, .is-dismissible),
|
package/scss/mixins/index.scss
CHANGED