@justeattakeaway/pie-css 1.0.0 → 1.1.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.
|
@@ -20,10 +20,6 @@ All of our design tokens can be added to your project by following our [CSS setu
|
|
|
20
20
|
- [Stack items with spacing token](#stack-items-with-spacing-token)
|
|
21
21
|
- [Add padding using spacing alias](#add-padding-using-spacing-alias)
|
|
22
22
|
- [Typography](#typography)
|
|
23
|
-
- [Font size](#font-size)
|
|
24
|
-
- [Body text](#body-text)
|
|
25
|
-
- [Heading example](#heading-example)
|
|
26
|
-
- [Line height](#line-height)
|
|
27
23
|
- [Radius](#radius)
|
|
28
24
|
- [Rounded card](#rounded-card)
|
|
29
25
|
- [Motion](#motion)
|
|
@@ -89,50 +85,8 @@ A spacing token (`--dt-spacing-e`) is applied to padding, providing internal spa
|
|
|
89
85
|
|
|
90
86
|
## Typography
|
|
91
87
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
### Font size
|
|
95
|
-
Our font-size tokens only store the raw number, not a `px` unit. Therefore, you must multiply the token by `1px` to create a `px` value that CSS will understand.
|
|
96
|
-
|
|
97
|
-
```css
|
|
98
|
-
.font-size-example {
|
|
99
|
-
font-size: calc(var(--dt-font-body-l-size) * 1px);
|
|
100
|
-
}
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
### Body text
|
|
104
|
-
Font tokens define the typography for body content, including font family, size, weight, and line height. Each token maps to a specific design choice in the type scale, and using them ensures that text remains visually consistent and readable, even as underlying type styles evolve in the system.
|
|
105
|
-
|
|
106
|
-
```css
|
|
107
|
-
.body-text {
|
|
108
|
-
font-family: var(--dt-font-body-l-family);
|
|
109
|
-
font-size: calc(var(--dt-font-body-l-size) * 1px);
|
|
110
|
-
font-weight: var(--dt-font-body-l-weight);
|
|
111
|
-
line-height: calc(var(--dt-font-body-l-line-height) * 1px);
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
### Heading example
|
|
116
|
-
Typography tokens are again used here, but with heading-specific values - including a `--wide` variant for font size and line height. This demonstrates how token modifiers allow flexibility (e.g. tighter vs wider spacing) without diverging from the core type system.
|
|
117
|
-
|
|
118
|
-
```css
|
|
119
|
-
.heading-m {
|
|
120
|
-
font-family: var(--dt-font-heading-m-family);
|
|
121
|
-
font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
|
|
122
|
-
font-weight: var(--dt-font-heading-m-weight);
|
|
123
|
-
line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
124
|
-
}
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### Line height
|
|
128
|
-
|
|
129
|
-
Line height tokens only contain the raw number, not a `px` unit. Therefore they must be multipled by `1px` to create a `px` value CSS will understand.
|
|
130
|
-
|
|
131
|
-
```css
|
|
132
|
-
.applied-lineheight {
|
|
133
|
-
line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
|
|
134
|
-
}
|
|
135
|
-
```
|
|
88
|
+
For typography, we recommend using the utility classes provided by `pie-css` instead of directly applying font tokens. These classes ensure consistent application of our type scale and responsive adjustments across all components.
|
|
89
|
+
Documentation and examples can be found in Storybook [here](https://webc.pie.design/?path=/docs/additional-libraries-pie-css-typography-utility-classes--docs).
|
|
136
90
|
|
|
137
91
|
## Radius
|
|
138
92
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-css",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.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",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"include-media": "2.0.0",
|
|
54
54
|
"postcss": "8.4.32",
|
|
55
55
|
"postcss-import": "15.1.0",
|
|
56
|
-
"w3c-css-validator": "1.
|
|
56
|
+
"w3c-css-validator": "1.4.1"
|
|
57
57
|
},
|
|
58
58
|
"volta": {
|
|
59
59
|
"extends": "../../../package.json"
|