@justeattakeaway/pie-css 0.32.0 → 1.1.0

package/dist/components/button.css

@@ -528,12 +528,12 @@
   --btn-inline-size: 100%;
 }
 
-.c-button--disabled {
+.is-disabled {
   --btn-text-color: var(--dt-color-content-disabled-solid);
   cursor: not-allowed;
   pointer-events: none;
 }
-.c-button--disabled:not(.c-button--ghost,
+.is-disabled:not(.c-button--ghost,
 .c-button--ghost-dark,
 .c-button--ghost-inverse,
 .c-button--ghost-inverse-light,
@@ -541,7 +541,7 @@
   --int-states-mixin-bg-color: var(--dt-color-disabled-01);
   --btn-text-color: var(--dt-color-content-disabled);
 }
-.c-button--disabled.c-button--outline, .c-button--disabled.c-button--outline-inverse {
+.is-disabled.c-button--outline, .is-disabled.c-button--outline-inverse {
   border-color: var(--dt-color-disabled-01);
 }
 

package/dist/components/radio.css

@@ -111,41 +111,41 @@
   }
 }
 
-.c-radio--error {
+.has-error {
   --radio-bg-color--checked: var(--dt-color-support-error);
   --radio-border-color: var(--dt-color-support-error);
 }
-.c-radio--error:hover:not(:checked, :disabled) {
+.has-error:hover:not(:checked, :disabled) {
   --radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-hover-01));
 }
 @supports (background-color: color-mix(in srgb, black, white)) {
-  .c-radio--error:hover:not(:checked, :disabled) {
+  .has-error:hover:not(:checked, :disabled) {
     --radio-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), transparent);
   }
 }
-.c-radio--error:active:not(:checked, :disabled) {
+.has-error:active:not(:checked, :disabled) {
   --radio-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--dt-color-active-01));
 }
 @supports (background-color: color-mix(in srgb, black, white)) {
-  .c-radio--error:active:not(:checked, :disabled) {
+  .has-error:active:not(:checked, :disabled) {
     --radio-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), transparent);
   }
 }
-.c-radio--error:hover:checked:not(:disabled):before {
+.has-error:hover:checked:not(:disabled):before {
   --radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));
   --radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)));
 }
 @supports (background-color: color-mix(in srgb, black, white)) {
-  .c-radio--error:hover:checked:not(:disabled):before {
+  .has-error:hover:checked:not(:disabled):before {
     --radio-bg-color--checked: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));
   }
 }
-.c-radio--error:active:checked:not(:disabled):before {
+.has-error:active:checked:not(:disabled):before {
   --radio-bg-color--checked: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));
   --radio-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)));
 }
 @supports (background-color: color-mix(in srgb, black, white)) {
-  .c-radio--error:active:checked:not(:disabled):before {
+  .has-error:active:checked:not(:disabled):before {
     --radio-bg-color--checked: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));
   }
 }

package/docs/components/BUTTON.md

@@ -98,7 +98,7 @@ Apply the `c-button` class along with variant and size modifiers to a static ele
 </div>
 
 <!-- Disabled state -->
-<div class="c-button c-button--primary c-button--medium c-button--disabled">
+<div class="c-button c-button--primary c-button--medium is-disabled">
   Disabled
 </div>
 
@@ -148,7 +148,7 @@ Apply the `c-button` class along with variant and size modifiers to a static ele
 
 | Class | Description |
 |-------|-------------|
-| `.c-button--disabled` | Disabled appearance (cursor: not-allowed, pointer-events: none) |
+| `.is-disabled` | Disabled appearance (cursor: not-allowed, pointer-events: none) |
 | `.c-button--fullWidth` | Makes the button span 100% of its container |
 | `.c-button--truncate` | Truncates the label with an ellipsis when text overflows the button's width |
 | `.c-button--responsive` | Enables responsive size bumping at wider viewports |
@@ -194,10 +194,10 @@ Outline variants (`outline`, `outline-inverse`) include a 1px border and automat
 
 ### Disabled
 
-The disabled modifier uses class-based selectors (`.c-button--disabled`) rather than the `:disabled` pseudo-class, because these CSS classes target non-interactive elements where `:disabled` is not applicable.
+The disabled modifier uses class-based selectors (`.is-disabled`) rather than the `:disabled` pseudo-class, because these CSS classes target non-interactive elements where `:disabled` is not applicable.
 
 ```html
-<div class="c-button c-button--primary c-button--medium c-button--disabled">
+<div class="c-button c-button--primary c-button--medium is-disabled">
   Disabled
 </div>
 ```

package/docs/components/RADIO.md

@@ -86,7 +86,7 @@ Apply the `c-radio` class to a native radio input:
 </label>
 
 <!-- Error state -->
-<input type="radio" class="c-radio c-radio--error" name="option" value="3">
+<input type="radio" class="c-radio has-error" name="option" value="3">
 ```
 
 ## Available Classes
@@ -94,7 +94,7 @@ Apply the `c-radio` class to a native radio input:
 | Class | Description |
 |-------|-------------|
 | `.c-radio` | Base radio input styling with all default states |
-| `.c-radio--error` | Error state styling |
+| `.has-error` | Error state styling |
 
 **Note:** All other visual states (`:checked`, `:disabled`, `:hover`, `:active`, `:focus-visible`) are handled automatically by CSS pseudo-classes.
 
@@ -104,7 +104,7 @@ All states are applied automatically via CSS pseudo-classes, except for error wh
 
 | State | CSS Selector | Appearance | When Applied |
 |-------|--------------|------------|--------------|
-| **Error** | `.c-radio--error` | Error border color | Add `c-radio--error` class |
+| **Error** | `.has-error` | Error border color | Add `has-error` class |
 | **Unchecked** | `.c-radio` | Empty circle with border | Default state |
 | **Checked** | `.c-radio:checked` | Filled circle with center dot | When selected |
 | **Disabled** | `.c-radio:disabled` | Faded, not-allowed cursor | When `disabled` attribute is present |

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/additional-libraries-pie-css-typography-utility-classes--docs).
 
 ## Radius
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.32.0",
+  "version": "1.1.0",
   "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",
@@ -25,13 +25,19 @@
     "generate:typography-docs": "node scripts/generate-typography-docs.js",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "yarn lint:scripts --fix",
-    "lint:style": "run -T stylelint ./**/*.{css,scss}",
+    "lint:style": "run -T stylelint './**/*.{css,scss}'",
     "lint:style:fix": "yarn lint:style --fix",
     "prepublishOnly": "yarn lint:style && yarn lint:scripts && yarn build && yarn test",
     "test": "run -T vitest run --config ../../../vite.config.js",
     "test:ci": "yarn test",
     "test:watch": "run -T vitest"
   },
+  "stylelint": {
+    "extends": [
+      "@justeattakeaway/stylelint-config-pie/base",
+      "@justeattakeaway/stylelint-config-pie/style"
+    ]
+  },
   "keywords": [
     "PIE",
     "CSS",
@@ -47,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"

package/scss/_internal/components/button.scss

@@ -85,7 +85,7 @@
 }
 
 // Disabled
-.c-button--disabled {
+.is-disabled {
     @include button.button-disabled;
 }
 

package/scss/_internal/components/radio.scss

@@ -6,7 +6,7 @@
     @include radio.radio-animations;
 }
 
-.c-radio--error {
+.has-error {
     @include radio.radio-error;
     @include radio.radio-interactive-state('dt-color-support-error');
 }

package/scss/mixins/components/_button.scss

@@ -374,6 +374,7 @@
         pointer-events: none;
     }
 
+    // stylelint-disable @stylistic/indentation
     // For every variant except ghost variants, set the disabled background colour
     &:not(
         .#{$prefix}--ghost,
@@ -385,6 +386,7 @@
         --int-states-mixin-bg-color: var(--dt-color-disabled-01);
         --btn-text-color: var(--dt-color-content-disabled);
     }
+    // stylelint-enable @stylistic/indentation
 
     // For outline variants, set the border to the disabled colour
     &.#{$prefix}--outline,

package/scss/mixins/components/_radio.scss

@@ -103,7 +103,7 @@
 ///     @include radio-interactive-state('dt-color-interactive-brand');
 ///   }
 /// @example scss - Using with error color
-///   .my-radio--error {
+///   .has-error {
 ///     @include radio-interactive-state('dt-color-support-error');
 ///   }
 @mixin radio-interactive-state($bg-color) {
@@ -156,7 +156,7 @@
 
 /// Error state modifier that overrides color custom properties
 /// @example scss - Applying error state
-///   .my-radio--error {
+///   .has-error {
 ///     @include radio-error();
 ///   }
 @mixin radio-error() {