@justeattakeaway/pie-css 0.28.1 → 0.30.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.
Files changed (6) hide show
  1. package/README.md +3 -1
  2. package/dist/helpers/typography.css +48 -29
  3. package/docs/typography-utility-classes.md +21 -3
  4. package/package.json +2 -1
  5. package/scss/_internal/typography.scss +5 -1
  6. package/scss/mixins/_font-theme.scss +11 -5
package/README.md CHANGED
@@ -207,7 +207,9 @@ The starting position of the slide animation can be customised by overriding the
207
207
 
208
208
  ## Typography Utility Classes
209
209
 
210
- `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.
210
+ `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, and line height.
211
+
212
+ Paragraph spacing is now opt-in via the `.u-typographySpacing` utility class, used alongside a typography class on the same element (for example, `<p class="u-font-body-l u-typographySpacing">...</p>`).
211
213
 
212
214
  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.
213
215
 
package/dist/helpers/typography.css CHANGED
@@ -10,7 +10,6 @@
10
10
  line-height: calc(var(--dt-font-heading-xs-line-height--wide) * 1px);
11
11
  }
12
12
  }
13
-
14
13
  .u-font-heading-s {
15
14
  font-family: var(--dt-font-heading-s-family);
16
15
  font-weight: var(--dt-font-heading-s-weight);
@@ -23,7 +22,6 @@
23
22
  line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px);
24
23
  }
25
24
  }
26
-
27
25
  .u-font-heading-m {
28
26
  font-family: var(--dt-font-heading-m-family);
29
27
  font-weight: var(--dt-font-heading-m-weight);
@@ -36,7 +34,6 @@
36
34
  line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
37
35
  }
38
36
  }
39
-
40
37
  .u-font-heading-l {
41
38
  font-family: var(--dt-font-heading-l-family);
42
39
  font-weight: var(--dt-font-heading-l-weight);
@@ -49,7 +46,6 @@
49
46
  line-height: calc(var(--dt-font-heading-l-line-height--wide) * 1px);
50
47
  }
51
48
  }
52
-
53
49
  .u-font-heading-xl {
54
50
  font-family: var(--dt-font-heading-xl-family);
55
51
  font-weight: var(--dt-font-heading-xl-weight);
@@ -62,7 +58,6 @@
62
58
  line-height: calc(var(--dt-font-heading-xl-line-height--wide) * 1px);
63
59
  }
64
60
  }
65
-
66
61
  .u-font-heading-xxl {
67
62
  font-family: var(--dt-font-heading-xxl-family);
68
63
  font-weight: var(--dt-font-heading-xxl-weight);
@@ -75,7 +70,6 @@
75
70
  line-height: calc(var(--dt-font-heading-xxl-line-height--wide) * 1px);
76
71
  }
77
72
  }
78
-
79
73
  .u-font-heading-xs-italic {
80
74
  font-family: var(--dt-font-heading-xs-italic-family);
81
75
  font-weight: var(--dt-font-heading-xs-italic-weight);
@@ -90,7 +84,6 @@
90
84
  line-height: calc(var(--dt-font-heading-xs-italic-line-height--wide) * 1px);
91
85
  }
92
86
  }
93
-
94
87
  .u-font-heading-s-italic {
95
88
  font-family: var(--dt-font-heading-s-italic-family);
96
89
  font-weight: var(--dt-font-heading-s-italic-weight);
@@ -105,7 +98,6 @@
105
98
  line-height: calc(var(--dt-font-heading-s-italic-line-height--wide) * 1px);
106
99
  }
107
100
  }
108
-
109
101
  .u-font-heading-m-italic {
110
102
  font-family: var(--dt-font-heading-m-italic-family);
111
103
  font-weight: var(--dt-font-heading-m-italic-weight);
@@ -120,7 +112,6 @@
120
112
  line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px);
121
113
  }
122
114
  }
123
-
124
115
  .u-font-heading-l-italic {
125
116
  font-family: var(--dt-font-heading-l-italic-family);
126
117
  font-weight: var(--dt-font-heading-l-italic-weight);
@@ -135,7 +126,6 @@
135
126
  line-height: calc(var(--dt-font-heading-l-italic-line-height--wide) * 1px);
136
127
  }
137
128
  }
138
-
139
129
  .u-font-heading-xl-italic {
140
130
  font-family: var(--dt-font-heading-xl-italic-family);
141
131
  font-weight: var(--dt-font-heading-xl-italic-weight);
@@ -150,7 +140,6 @@
150
140
  line-height: calc(var(--dt-font-heading-xl-italic-line-height--wide) * 1px);
151
141
  }
152
142
  }
153
-
154
143
  .u-font-heading-xxl-italic {
155
144
  font-family: var(--dt-font-heading-xxl-italic-family);
156
145
  font-weight: var(--dt-font-heading-xxl-italic-weight);
@@ -165,7 +154,6 @@
165
154
  line-height: calc(var(--dt-font-heading-xxl-italic-line-height--wide) * 1px);
166
155
  }
167
156
  }
168
-
169
157
  .u-font-subheading-s {
170
158
  font-family: var(--dt-font-subheading-s-family);
171
159
  font-weight: var(--dt-font-subheading-s-weight);
@@ -178,7 +166,6 @@
178
166
  line-height: calc(var(--dt-font-subheading-s-line-height--wide) * 1px);
179
167
  }
180
168
  }
181
-
182
169
  .u-font-subheading-l {
183
170
  font-family: var(--dt-font-subheading-l-family);
184
171
  font-weight: var(--dt-font-subheading-l-weight);
@@ -191,126 +178,158 @@
191
178
  line-height: calc(var(--dt-font-subheading-l-line-height--wide) * 1px);
192
179
  }
193
180
  }
194
-
195
181
  .u-font-interactive-xs {
196
182
  font-family: var(--dt-font-interactive-xs-family);
197
183
  font-weight: var(--dt-font-interactive-xs-weight);
198
184
  font-size: calc(var(--dt-font-interactive-xs-size) * 1px);
199
185
  line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);
200
186
  }
201
-
202
187
  .u-font-interactive-s {
203
188
  font-family: var(--dt-font-interactive-s-family);
204
189
  font-weight: var(--dt-font-interactive-s-weight);
205
190
  font-size: calc(var(--dt-font-interactive-s-size) * 1px);
206
191
  line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);
207
192
  }
208
-
209
193
  .u-font-interactive-l {
210
194
  font-family: var(--dt-font-interactive-l-family);
211
195
  font-weight: var(--dt-font-interactive-l-weight);
212
196
  font-size: calc(var(--dt-font-interactive-l-size) * 1px);
213
197
  line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
214
198
  }
215
-
216
199
  .u-font-body-s {
217
200
  font-family: var(--dt-font-body-s-family);
218
201
  font-weight: var(--dt-font-body-s-weight);
219
- margin-block-end: calc(var(--dt-font-body-s-paragraph) * 1px);
220
202
  font-size: calc(var(--dt-font-body-s-size) * 1px);
221
203
  line-height: calc(var(--dt-font-body-s-line-height) * 1px);
222
204
  }
205
+ .u-font-body-s.u-typographySpacing {
206
+ margin-block-end: calc(var(--dt-font-body-s-paragraph) * 1px);
207
+ }
223
208
 
224
209
  .u-font-body-s-link {
225
210
  font-family: var(--dt-font-body-s-link-family);
226
211
  font-weight: var(--dt-font-body-s-link-weight);
227
212
  text-decoration: var(--dt-font-body-s-link-text-decoration);
228
- margin-block-end: calc(var(--dt-font-body-s-link-paragraph) * 1px);
229
213
  font-size: calc(var(--dt-font-body-s-link-size) * 1px);
230
214
  line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);
231
215
  }
216
+ .u-font-body-s-link.u-typographySpacing {
217
+ margin-block-end: calc(var(--dt-font-body-s-link-paragraph) * 1px);
218
+ }
232
219
 
233
220
  .u-font-body-l {
234
221
  font-family: var(--dt-font-body-l-family);
235
222
  font-weight: var(--dt-font-body-l-weight);
236
- margin-block-end: calc(var(--dt-font-body-l-paragraph) * 1px);
237
223
  font-size: calc(var(--dt-font-body-l-size) * 1px);
238
224
  line-height: calc(var(--dt-font-body-l-line-height) * 1px);
239
225
  }
226
+ .u-font-body-l.u-typographySpacing {
227
+ margin-block-end: calc(var(--dt-font-body-l-paragraph) * 1px);
228
+ }
240
229
 
241
230
  .u-font-body-l-link {
242
231
  font-family: var(--dt-font-body-l-link-family);
243
232
  font-weight: var(--dt-font-body-l-link-weight);
244
233
  text-decoration: var(--dt-font-body-l-link-text-decoration);
245
- margin-block-end: calc(var(--dt-font-body-l-link-paragraph) * 1px);
246
234
  font-size: calc(var(--dt-font-body-l-link-size) * 1px);
247
235
  line-height: calc(var(--dt-font-body-l-link-line-height) * 1px);
248
236
  }
237
+ .u-font-body-l-link.u-typographySpacing {
238
+ margin-block-end: calc(var(--dt-font-body-l-link-paragraph) * 1px);
239
+ }
249
240
 
250
241
  .u-font-body-strong-s {
251
242
  font-family: var(--dt-font-body-strong-s-family);
252
243
  font-weight: var(--dt-font-body-strong-s-weight);
253
- margin-block-end: calc(var(--dt-font-body-strong-s-paragraph) * 1px);
254
244
  font-size: calc(var(--dt-font-body-strong-s-size) * 1px);
255
245
  line-height: calc(var(--dt-font-body-strong-s-line-height) * 1px);
256
246
  }
247
+ .u-font-body-strong-s.u-typographySpacing {
248
+ margin-block-end: calc(var(--dt-font-body-strong-s-paragraph) * 1px);
249
+ }
257
250
 
258
251
  .u-font-body-strong-s-link {
259
252
  font-family: var(--dt-font-body-strong-s-link-family);
260
253
  font-weight: var(--dt-font-body-strong-s-link-weight);
261
254
  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
255
  font-size: calc(var(--dt-font-body-strong-s-link-size) * 1px);
264
256
  line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);
265
257
  }
258
+ .u-font-body-strong-s-link.u-typographySpacing {
259
+ margin-block-end: calc(var(--dt-font-body-strong-s-link-paragraph) * 1px);
260
+ }
266
261
 
267
262
  .u-font-body-strong-l {
268
263
  font-family: var(--dt-font-body-strong-l-family);
269
264
  font-weight: var(--dt-font-body-strong-l-weight);
270
- margin-block-end: calc(var(--dt-font-body-strong-l-paragraph) * 1px);
271
265
  font-size: calc(var(--dt-font-body-strong-l-size) * 1px);
272
266
  line-height: calc(var(--dt-font-body-strong-l-line-height) * 1px);
273
267
  }
268
+ .u-font-body-strong-l.u-typographySpacing {
269
+ margin-block-end: calc(var(--dt-font-body-strong-l-paragraph) * 1px);
270
+ }
274
271
 
275
272
  .u-font-body-strong-l-link {
276
273
  font-family: var(--dt-font-body-strong-l-link-family);
277
274
  font-weight: var(--dt-font-body-strong-l-link-weight);
278
275
  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
276
  font-size: calc(var(--dt-font-body-strong-l-link-size) * 1px);
281
277
  line-height: calc(var(--dt-font-body-strong-l-link-line-height) * 1px);
282
278
  }
279
+ .u-font-body-strong-l-link.u-typographySpacing {
280
+ margin-block-end: calc(var(--dt-font-body-strong-l-link-paragraph) * 1px);
281
+ }
283
282
 
284
283
  .u-font-caption {
285
284
  font-family: var(--dt-font-caption-family);
286
285
  font-weight: var(--dt-font-caption-weight);
287
- margin-block-end: calc(var(--dt-font-caption-paragraph) * 1px);
288
286
  font-size: calc(var(--dt-font-caption-size) * 1px);
289
287
  line-height: calc(var(--dt-font-caption-line-height) * 1px);
290
288
  }
289
+ .u-font-caption.u-typographySpacing {
290
+ margin-block-end: calc(var(--dt-font-caption-paragraph) * 1px);
291
+ }
291
292
 
292
293
  .u-font-caption-link {
293
294
  font-family: var(--dt-font-caption-link-family);
294
295
  font-weight: var(--dt-font-caption-link-weight);
295
296
  text-decoration: var(--dt-font-caption-link-text-decoration);
296
- margin-block-end: calc(var(--dt-font-caption-link-paragraph) * 1px);
297
297
  font-size: calc(var(--dt-font-caption-link-size) * 1px);
298
298
  line-height: calc(var(--dt-font-caption-link-line-height) * 1px);
299
299
  }
300
+ .u-font-caption-link.u-typographySpacing {
301
+ margin-block-end: calc(var(--dt-font-caption-link-paragraph) * 1px);
302
+ }
300
303
 
301
304
  .u-font-caption-strong {
302
305
  font-family: var(--dt-font-caption-strong-family);
303
306
  font-weight: var(--dt-font-caption-strong-weight);
304
- margin-block-end: calc(var(--dt-font-caption-strong-paragraph) * 1px);
305
307
  font-size: calc(var(--dt-font-caption-strong-size) * 1px);
306
308
  line-height: calc(var(--dt-font-caption-strong-line-height) * 1px);
307
309
  }
310
+ .u-font-caption-strong.u-typographySpacing {
311
+ margin-block-end: calc(var(--dt-font-caption-strong-paragraph) * 1px);
312
+ }
313
+
314
+ .u-font-caption-strong-italic {
315
+ font-family: var(--dt-font-caption-strong-italic-family);
316
+ font-weight: var(--dt-font-caption-strong-italic-weight);
317
+ font-style: var(--dt-font-caption-strong-italic-font-style);
318
+ font-variation-settings: "slnt" -20;
319
+ font-size: calc(var(--dt-font-caption-strong-italic-size) * 1px);
320
+ line-height: calc(var(--dt-font-caption-strong-italic-line-height) * 1px);
321
+ }
322
+ .u-font-caption-strong-italic.u-typographySpacing {
323
+ margin-block-end: calc(var(--dt-font-caption-strong-italic-paragraph) * 1px);
324
+ }
308
325
 
309
326
  .u-font-caption-strong-link {
310
327
  font-family: var(--dt-font-caption-strong-link-family);
311
328
  font-weight: var(--dt-font-caption-strong-link-weight);
312
329
  text-decoration: var(--dt-font-caption-strong-link-text-decoration);
313
- margin-block-end: calc(var(--dt-font-caption-strong-link-paragraph) * 1px);
314
330
  font-size: calc(var(--dt-font-caption-strong-link-size) * 1px);
315
331
  line-height: calc(var(--dt-font-caption-strong-link-line-height) * 1px);
316
332
  }
333
+ .u-font-caption-strong-link.u-typographySpacing {
334
+ margin-block-end: calc(var(--dt-font-caption-strong-link-paragraph) * 1px);
335
+ }
package/docs/typography-utility-classes.md CHANGED
@@ -15,6 +15,7 @@ The PIE CSS Typography Utilities provide a comprehensive set of utility classes
15
15
  - [If You Have Designs](#if-you-have-designs)
16
16
  - [If You Don't Have Designs](#if-you-dont-have-designs)
17
17
  - [Available Classes](#available-classes)
18
+ - [Typography Spacing Utility](#typography-spacing-utility)
18
19
  - [the `font-theme` mixin](#the-font-theme-mixin)
19
20
  - [Usage Examples](#usage-examples)
20
21
  - [What Each Utility Class Applies](#what-each-utility-class-applies)
@@ -162,9 +163,17 @@ Interactive text utilities are optimized for buttons, links, and other interacti
162
163
  | `.u-font-interactive-s` | Small interactive text |
163
164
  | `.u-font-interactive-xs` | Extra small interactive text |
164
165
 
166
+ ### Typography Spacing Utility
167
+
168
+ Use `.u-typographySpacing` alongside a typography utility class on the same element to apply paragraph spacing for typography tokens that define a `paragraph` token.
169
+
170
+ | Class | Use Case |
171
+ | --- | --- |
172
+ | `.u-typographySpacing` | Opt-in paragraph spacing for typography classes that support paragraph tokens |
173
+
165
174
  ### Body Text
166
175
 
167
- Body text utilities are for paragraphs and general content. These utilities include automatic paragraph spacing via `margin-block-end`.
176
+ Body text utilities are for paragraphs and general content.
168
177
 
169
178
  | Class | Use Case |
170
179
  | --- | --- |
@@ -221,6 +230,7 @@ Caption strong utilities are for bold captions.
221
230
  | Class | Use Case |
222
231
  | --- | --- |
223
232
  | `.u-font-caption-strong` | caption bold/strong |
233
+ | `.u-font-caption-strong-italic` | caption italic bold/strong |
224
234
 
225
235
  ### Caption Strong Link
226
236
 
@@ -239,6 +249,7 @@ Simply add the utility class to your HTML element:
239
249
  ```html
240
250
  <h1 class="u-font-heading-xl">Page Title</h1>
241
251
  <p class="u-font-body-l">This is a paragraph of body text.</p>
252
+ <p class="u-font-body-l u-typographySpacing">This is body text with opt-in paragraph spacing.</p>
242
253
  ```
243
254
 
244
255
  ### React Example
@@ -252,6 +263,9 @@ function MyComponent() {
252
263
  <p className="u-font-body-l">
253
264
  This is a paragraph using the body large utility class.
254
265
  </p>
266
+ <p className="u-font-body-l u-typographySpacing">
267
+ This paragraph uses the same typography class with opt-in spacing.
268
+ </p>
255
269
  <a href="#" className="u-font-body-l-link">Learn more</a>
256
270
  </div>
257
271
  );
@@ -268,6 +282,9 @@ function MyComponent() {
268
282
  <p class="u-font-body-l">
269
283
  This is a paragraph using the body large utility class.
270
284
  </p>
285
+ <p class="u-font-body-l u-typographySpacing">
286
+ This paragraph uses the same typography class with opt-in spacing.
287
+ </p>
271
288
  <a href="#" class="u-font-body-l-link">Learn more</a>
272
289
  </div>
273
290
  </template>
@@ -305,7 +322,8 @@ Each typography utility class applies a complete set of typography properties:
305
322
  - **`line-height`**: Applies the appropriate line height for readability ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height))
306
323
  - **`font-style`**: Applied for italic variants ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style))
307
324
  - **`text-decoration`**: Applied for link variants ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration))
308
- - **`margin-block-end`**: Applied for body and caption variants to provide paragraph spacing ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end))
325
+
326
+ Use `.u-typographySpacing` for opt-in paragraph spacing via `margin-block-end` on supported typography tokens ([MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end)).
309
327
 
310
328
  ## Troubleshooting
311
329
 
@@ -322,6 +340,6 @@ If the typography utilities aren't applying:
322
340
 
323
341
  If fonts aren't displaying correctly:
324
342
 
325
- 1. Ensure you've set up the JETSansDigital font as described in the Typography setup guide
343
+ 1. Ensure you've set up the JETSansDigital font as described in the [Typography setup guide](https://webc.pie.design/?path=/docs/introduction-typography--docs)
326
344
  2. Check that font files are loading correctly
327
345
  3. Verify font-face declarations are correct
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.28.1",
3
+ "version": "0.30.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",
@@ -22,6 +22,7 @@
22
22
  },
23
23
  "scripts": {
24
24
  "build": "run -T ts-node ./buildCss.ts && run -T sass --load-path=../../../node_modules scss/_internal/typography.scss dist/helpers/typography.css --no-source-map && run -T sass --load-path=../../../node_modules scss/_internal/radio.scss dist/components/radio.css --no-source-map",
25
+ "generate:typography-docs": "node scripts/generate-typography-docs.js",
25
26
  "lint:scripts": "run -T eslint .",
26
27
  "lint:scripts:fix": "yarn lint:scripts --fix",
27
28
  "lint:style": "run -T stylelint ./**/*.{css,scss}",
package/scss/_internal/typography.scss CHANGED
@@ -7,10 +7,14 @@ $typography-names: font-heading-xs font-heading-s font-heading-m font-heading-l
7
7
  font-body-s font-body-s-link font-body-l font-body-l-link
8
8
  font-body-strong-s font-body-strong-s-link
9
9
  font-body-strong-l font-body-strong-l-link
10
- font-caption font-caption-link font-caption-strong font-caption-strong-link;
10
+ font-caption font-caption-link font-caption-strong font-caption-strong-italic font-caption-strong-link;
11
11
 
12
12
  @each $name in $typography-names {
13
13
  .u-#{$name} {
14
14
  @include font-theme($name);
15
+
16
+ &.u-typographySpacing {
17
+ @include typography-spacing($name);
18
+ }
15
19
  }
16
20
  }
package/scss/mixins/_font-theme.scss CHANGED
@@ -24,22 +24,19 @@
24
24
  'family': 'font-family',
25
25
  'weight': 'font-weight',
26
26
  'text-decoration': 'text-decoration',
27
- 'paragraph': 'margin-block-end',
28
27
  'font-style': 'font-style',
29
28
  );
30
29
 
31
30
  // --- Mobile-First (Narrow) and Static Properties ---
32
31
 
33
- // Apply Static Properties (font-family, font-weight, text-decoration, paragraph and font-style)
32
+ // Apply Static Properties (font-family, font-weight, text-decoration and font-style)
34
33
  @each $suffix, $css-prop in $static-properties {
35
34
  // Example variable structure (assuming $token-name is 'font-heading-l'): --dt-font-heading-l-family
36
35
  $scss-name: '#{$token-name}-#{$suffix}';
37
36
  $var-name: '--dt-#{$token-name}-#{$suffix}';
38
37
 
39
38
  @if meta.variable-exists($scss-name) {
40
- @if $suffix == 'paragraph' {
41
- #{$css-prop}: calc(var(#{$var-name}) * 1px);
42
- } @else if $suffix == 'font-style' {
39
+ @if $suffix == 'font-style' {
43
40
  // if we're setting font-style: italic, we need to add the font-variation-settings for slant
44
41
  #{$css-prop}: var(#{$var-name});
45
42
  font-variation-settings: 'slnt' -20;
@@ -84,3 +81,12 @@
84
81
  }
85
82
  }
86
83
  }
84
+
85
+ @mixin typography-spacing($token-name) {
86
+ $paragraph-scss-name: '#{$token-name}-paragraph';
87
+ $paragraph-var-name: '--dt-#{$token-name}-paragraph';
88
+
89
+ @if meta.variable-exists($paragraph-scss-name) {
90
+ margin-block-end: calc(var(#{$paragraph-var-name}) * 1px);
91
+ }
92
+ }