@justeattakeaway/pie-css 1.0.0 → 1.1.1

package/README.md

@@ -219,7 +219,7 @@ To use the typography utilities, import the typography CSS file:
 import '@justeattakeaway/pie-css/dist/helpers/typography.css';
 ```
 
-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).
+For complete documentation on all available typography utility classes, including usage examples and best practices, see the [Typography Utilities documentation in Storybook](/docs/introduction-typography-utility-classes--docs).
 
 ---
 

package/docs/design-tokens-cookbook.md

@@ -20,10 +20,6 @@ All of our design tokens can be added to your project by following our [CSS setu
     - [Stack items with spacing token](#stack-items-with-spacing-token)
     - [Add padding using spacing alias](#add-padding-using-spacing-alias)
 - [Typography](#typography)
-    - [Font size](#font-size)
-    - [Body text](#body-text)
-    - [Heading example](#heading-example)
-    - [Line height](#line-height)
 - [Radius](#radius)
     - [Rounded card](#rounded-card)
 - [Motion](#motion)
@@ -89,50 +85,8 @@ A spacing token (`--dt-spacing-e`) is applied to padding, providing internal spa
 
 ## Typography
 
-**Note:** Whenever you set a `font-size`, you must also set a compatible `line-height` rule to ensure the font looks correct.
-
-### Font size
-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.
-
-```css
-.font-size-example {
-    font-size: calc(var(--dt-font-body-l-size) * 1px);
-}
-```
-
-### Body text
-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.
-
-```css
-.body-text {
-    font-family: var(--dt-font-body-l-family);
-    font-size: calc(var(--dt-font-body-l-size) * 1px);
-    font-weight: var(--dt-font-body-l-weight);
-    line-height: calc(var(--dt-font-body-l-line-height) * 1px);
-}
-```
-
-### Heading example
-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.
-
-```css
-.heading-m {
-    font-family: var(--dt-font-heading-m-family);
-    font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
-    font-weight: var(--dt-font-heading-m-weight);
-    line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
-}
-```
-
-### Line height
-
-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.
-
-```css
-.applied-lineheight {
-    line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
-}
-```
+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.
+Documentation and examples can be found in Storybook [here](https://webc.pie.design/?path=/docs/introduction-typography-utility-classes--docs).
 
 ## Radius
 

package/docs/typography-utility-classes.md

@@ -2,26 +2,25 @@
 
 [Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/tools/pie-css) | [NPM Package](https://www.npmjs.com/package/@justeattakeaway/pie-css)
 
-The PIE CSS Typography Utilities provide a comprehensive set of utility classes for applying consistent typography styles across your application. These classes are built on top of PIE design tokens and ensure your typography follows the design system's guidelines automatically.
+`@justeattakeaway/pie-css` provide a comprehensive set of utility classes for applying consistent typography styles across your application. These classes are built on top of the PIE design tokens and ensure your typography follows the design system's guidelines automatically. The utility classes handle the responsive behaviour automatically, so you don't need to write additional media queries.
+
+> Note: The utility classes do **not** apply colours to your text. This should be handled in your own CSS.
 
 ## Table of Contents
 
 - [Why?](#why)
 - [Installation](#installation)
-- [Importing](#importing)
-    - [JavaScript/Framework Import (via bundler)](#javascriptframework-import-via-bundler)
-    - [SCSS/Sass Import](#scsssass-import)
 - [Which Class Should I Use?](#which-class-should-i-use)
     - [If You Have Designs](#if-you-have-designs)
     - [If You Don't Have Designs](#if-you-dont-have-designs)
 - [Available Classes](#available-classes)
-- [Typography Spacing Utility](#typography-spacing-utility)
-- [the `font-theme` mixin](#the-font-theme-mixin)
+- [SCSS Mixin](#the-font-theme-mixin)
 - [Usage Examples](#usage-examples)
 - [What Each Utility Class Applies](#what-each-utility-class-applies)
 - [Troubleshooting](#troubleshooting)
     - [Utilities Not Working](#utilities-not-working)
     - [Font Not Displaying](#font-not-displaying)
+    - [No Colours Appearing](#no-colours-appearing)
 
 ## Why?
 
@@ -44,18 +43,18 @@ yarn add @justeattakeaway/pie-css
 npm install @justeattakeaway/pie-css
 ```
 
-## Importing
+### Importing
 
 To use the typography utility classes, you need to import the typography CSS file. The import method depends on your project setup:
 
-### JavaScript/Framework Import (via bundler)
+#### JavaScript/Framework Import (via bundler)
 
 ```javascript
 // Import the typography utilities
 import '@justeattakeaway/pie-css/dist/helpers/typography.css';
 ```
 
-### SCSS/Sass Import
+#### SCSS/Sass Import
 
 ```scss
 @use '@justeattakeaway/pie-css/dist/helpers/typography.css';
@@ -88,35 +87,15 @@ If you don't have access to designs, you have two options:
 
 ## Available Classes
 
-The typography utilities are organized into several categories. This documentation is automatically generated from the CSS source file.
-
-### the `font-theme` mixin
-
-In addition to the typography utility classes, the `font-theme` mixin can also be used directly to apply the styles to your SCSS.
-
-**N.b. We recommend only using this when using the classes isn't possible – and only if you are serving your CSS gzipped, to ensure that this code is properly optimised when served to your users.**
-
-Using the `font-theme` mixin will apply the corresponding typography styles to the element selected. It takes a typography token name as an argument.
-
-To use the mixin as part of the full set of PIE SCSS Utilities, you can import the mixin as follows:
+The typography utilities are organised into several categories. This documentation is automatically generated from the CSS source file.
 
-```scss
-@use '@justeattakeaway/pie-css/scss' as p;
-
-.my-element {
-    @include p.font-theme('font-heading-l');
-}
-```
-
-Alternatively, you can import the mixin directly, without importing the other SCSS utilities:
+### Typography Spacing Utility
 
-```scss
-@use '@justeattakeaway/pie-css/scss/mixins/font-theme' as *;
+Use `.u-typographySpacing` alongside a typography utility class on the same element to apply paragraph spacing for typography tokens that define a `paragraph` token.
 
-.my-element {
-    @include font-theme('font-heading-l');
-}
-```
+| Class | Use Case |
+| --- | --- |
+| `.u-typographySpacing` | Opt-in paragraph spacing for typography classes that support paragraph tokens |
 
 ### Headings
 
@@ -155,7 +134,7 @@ Subheadings are used for secondary headings and section titles.
 
 ### Interactive Text
 
-Interactive text utilities are optimized for buttons, links, and other interactive elements.
+Interactive text utilities are optimised for buttons, links, and other interactive elements.
 
 | Class | Use Case |
 | --- | --- |
@@ -163,14 +142,6 @@ Interactive text utilities are optimized for buttons, links, and other interacti
 | `.u-font-interactive-s` | Small interactive text |
 | `.u-font-interactive-xs` | Extra small interactive text |
 
-### Typography Spacing Utility
-
-Use `.u-typographySpacing` alongside a typography utility class on the same element to apply paragraph spacing for typography tokens that define a `paragraph` token.
-
-| Class | Use Case |
-| --- | --- |
-| `.u-typographySpacing` | Opt-in paragraph spacing for typography classes that support paragraph tokens |
-
 ### Body Text
 
 Body text utilities are for paragraphs and general content.
@@ -191,7 +162,7 @@ Body link utilities combine body text styling with link-specific properties like
 
 ### Body Strong
 
-Body strong utilities are for bold/emphasized body text.
+Body strong utilities are for bold/emphasised body text.
 
 | Class | Use Case |
 | --- | --- |
@@ -240,78 +211,46 @@ Caption strong link utilities combine bold caption styling with link properties.
 | --- | --- |
 | `.u-font-caption-strong-link` | caption bold/strong link |
 
-## Usage Examples
+## The `font-theme` mixin
 
-### Basic Usage
+In addition to the typography utility classes, the `font-theme` mixin can also be used directly to apply the styles to your SCSS.
 
-Simply add the utility class to your HTML element:
+**N.b. We recommend only using this when using the classes isn't possible – and only if you are serving your CSS gzipped, to ensure that this code is properly optimised when served to your users.**
 
-```html
-<h1 class="u-font-heading-xl">Page Title</h1>
-<p class="u-font-body-l">This is a paragraph of body text.</p>
-<p class="u-font-body-l u-typographySpacing">This is body text with opt-in paragraph spacing.</p>
-```
+Using the `font-theme` mixin will apply the corresponding typography styles to the element selected. It takes a typography token name as an argument.
 
-### React Example
-
-```jsx
-function MyComponent() {
-  return (
-    <div>
-      <h1 className="u-font-heading-xl">Welcome</h1>
-      <h2 className="u-font-heading-m">Section Title</h2>
-      <p className="u-font-body-l">
-        This is a paragraph using the body large utility class.
-      </p>
-      <p className="u-font-body-l u-typographySpacing">
-        This paragraph uses the same typography class with opt-in spacing.
-      </p>
-      <a href="#" className="u-font-body-l-link">Learn more</a>
-    </div>
-  );
-}
-```
+To use the mixin as part of the full set of PIE SCSS Utilities, you can import the mixin as follows:
 
-### Vue Example
+```scss
+@use '@justeattakeaway/pie-css/scss' as p;
 
-```html
-<template>
-  <div>
-    <h1 class="u-font-heading-xl">Welcome</h1>
-    <h2 class="u-font-heading-m">Section Title</h2>
-    <p class="u-font-body-l">
-      This is a paragraph using the body large utility class.
-    </p>
-    <p class="u-font-body-l u-typographySpacing">
-      This paragraph uses the same typography class with opt-in spacing.
-    </p>
-    <a href="#" class="u-font-body-l-link">Learn more</a>
-  </div>
-</template>
+.my-element {
+    @include p.font-theme('font-heading-l');
+}
 ```
 
-### Combining with Other Classes
+Alternatively, you can import the mixin directly, without importing the other SCSS utilities:
 
-You can combine typography utilities with other CSS classes:
+```scss
+@use '@justeattakeaway/pie-css/scss/mixins/font-theme' as *;
 
-```html
-<div class="card">
-  <h2 class="u-font-heading-m card-title">Card Title</h2>
-  <p class="u-font-body-s card-description">Card description text.</p>
-</div>
+.my-element {
+    @include font-theme('font-heading-l');
+}
 ```
 
-### Responsive Behavior
+## Usage Examples
+
+### Basic Usage
 
-Heading and subheading utilities automatically adjust at the 768px breakpoint:
+Simply add the utility class to your HTML element:
 
 ```html
-<!-- This heading will be smaller on mobile and larger on desktop -->
-<h1 class="u-font-heading-xl">Responsive Heading</h1>
+<h1 class="u-font-heading-xl">Page Title</h1>
+<p class="u-font-body-l">This is a paragraph of body text.</p>
+<p class="u-font-body-l u-typographySpacing">This is body text with opt-in paragraph spacing.</p>
 ```
 
-The utility classes handle the responsive behavior automatically, so you don't need to write additional media queries.
-
 ## What Each Utility Class Applies
 
 Each typography utility class applies a complete set of typography properties:
@@ -343,3 +282,7 @@ If fonts aren't displaying correctly:
 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)
 2. Check that font files are loading correctly
 3. Verify font-face declarations are correct
+
+### No Colours Appearing
+
+These utility classes do not apply any colours to your text. This must be handled in your own CSS.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "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.",
   "repository": {
     "type": "git",
@@ -53,7 +53,7 @@
     "include-media": "2.0.0",
     "postcss": "8.4.32",
     "postcss-import": "15.1.0",
-    "w3c-css-validator": "1.3.2"
+    "w3c-css-validator": "1.4.1"
   },
   "volta": {
     "extends": "../../../package.json"