Merge branch 'main' into dsw-2400-component-statuses

Author: xander-marjoram

.changeset/late-beds-clap.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-card": patch
+---
+
+[Changed] - Update the background color of the inverse card from `$color-container-dark` to `$color-container-inverse`

.changeset/neat-pugs-learn.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-chip": patch
+---
+
+[Changed] - The loading state of the `Outline` variant should have a border.
+[Changed] - The disabled state of the `Ghost` variant should have a transparent background.

.github/workflows/ci.yml

@@ -48,8 +48,6 @@ env:
   PERCY_TOKEN_PIE_TEXTAREA: ${{ secrets.PERCY_TOKEN_PIE_TEXTAREA }}
   PERCY_TOKEN_PIE_TOAST: ${{ secrets.PERCY_TOKEN_PIE_TOAST }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  PERCY_DEBUG: "*"
-  LOG_LEVEL: debug
   PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS: true
   PERCY_PAGE_LOAD_TIMEOUT: ${{ vars.PERCY_PAGE_LOAD_TIMEOUT }}
   PERCY_NETWORK_IDLE_WAIT_TIMEOUT: ${{ vars.PERCY_NETWORK_IDLE_WAIT_TIMEOUT }}

packages/components/pie-card/src/card.scss

@@ -70,21 +70,21 @@
     }
 
     &.c-card--inverse {
-        --card-bg-color: var(--dt-color-container-dark);
+        --card-bg-color: var(--dt-color-container-inverse);
         --card-color: var(--dt-color-content-inverse);
 
         box-shadow: var(--dt-elevation-dark-card);
 
-        @include card-interactive-states('--dt-color-container-dark', 'inverse');
+        @include card-interactive-states('--dt-color-container-inverse', 'inverse');
     }
 
     &.c-card--outline-inverse {
-        --card-bg-color: var(--dt-color-container-dark);
+        --card-bg-color: var(--dt-color-container-inverse);
         --card-color: var(--dt-color-content-inverse);
 
         border-color: var(--dt-color-border-inverse);
 
-        @include card-interactive-states('--dt-color-container-dark', 'inverse');
+        @include card-interactive-states('--dt-color-container-inverse', 'inverse');
     }
 
     &.c-card--inverse.c-card--disabled,

packages/components/pie-chip/src/chip.scss

@@ -75,7 +75,7 @@
         // same as default styles
     }
 
-    &.c-chip--outline:not([disabled], .c-chip--selected, .is-loading) {
+    &.c-chip--outline:not([disabled], .c-chip--selected) {
         --chip-border-color: var(--dt-color-border-strong);
     }
 
@@ -129,6 +129,10 @@
         --chip-bg-color: var(--dt-color-disabled-01);
         --chip-color: var(--dt-color-content-disabled);
 
+        &.c-chip--ghost {
+            --chip-bg-color: transparent;
+        }
+
         cursor: not-allowed;
     }