@justeattakeaway/pie-css 0.32.0 → 1.0.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.32.0",
+  "version": "1.0.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",

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() {