@justeattakeaway/pie-css 1.1.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

@@ -86,7 +86,7 @@ A spacing token (`--dt-spacing-e`) is applied to padding, providing internal spa
 ## Typography
 
 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/additional-libraries-pie-css-typography-utility-classes--docs).
+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.1.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",