Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cosmetic(pie-monorepo): PEW-89 update component styles for dark mode #2182

Merged
merged 11 commits into from
Feb 10, 2025
Merged

cosmetic(pie-monorepo): PEW-89 update component styles for dark mode #2182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
aa5ec1f
cosmetic(pie-monorepo): PEW-89 update component styles for dark mode
xander-marjoram Jan 30, 2025
8798c74
Merge branch 'main' into pew-89-dark-mode-audit
xander-marjoram Jan 30, 2025
c9e6e1c
Fix linting error
xander-marjoram Jan 30, 2025
fab644c
PEW-89: Use correct colour tokens for text in tag brand variants
xander-marjoram Feb 5, 2025
525aef7
PEW-89: Update icon button's icon fill colour
xander-marjoram Feb 6, 2025
4227094
Merge branch 'main' into pew-89-dark-mode-audit
xander-marjoram Feb 6, 2025
92bdd43
Update yarn.lock
xander-marjoram Feb 6, 2025
4353805
Merge branch 'main' into pew-89-dark-mode-audit
xander-marjoram Feb 6, 2025
82efcb0
PEW-89: Use token for switch internal label font colour
xander-marjoram Feb 7, 2025
291fffd
Merge branch 'main' into pew-89-dark-mode-audit
xander-marjoram Feb 7, 2025
84967b8
Merge branch 'main' into pew-89-dark-mode-audit
xander-marjoram Feb 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .changeset/happy-chairs-watch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
"@justeattakeaway/pie-button": minor
"@justeattakeaway/pie-divider": minor
"@justeattakeaway/pie-icon-button": minor
"@justeattakeaway/pie-modal": minor
"@justeattakeaway/pie-switch": minor
"@justeattakeaway/pie-tag": minor
---

[Changed] - Update styling for dark mode
3 changes: 2 additions & 1 deletion packages/components/pie-button/src/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
// The following values set to default background and color
// currently this sets the primary button styles
--btn-bg-color: var(--dt-color-interactive-brand);
--btn-text-color: var(--dt-color-content-interactive-primary);
--btn-text-color: var(--dt-color-content-interactive-light);
--icon-display-override: block;

// Vertical and horizontal padding values for the button
Expand Down Expand Up @@ -131,6 +131,7 @@
* update the button backgrounds so that the text is accessible
**/
--btn-bg-color: var(--dt-color-interactive-primary);
--btn-text-color: var(--dt-color-content-interactive-primary);

@include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
}
Expand Down
1 change: 1 addition & 0 deletions packages/components/pie-divider/src/divider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
text-align: center;
gap: var(--dt-spacing-b);
background-color: transparent;
color: var(--dt-color-content-subdued);

.c-divider-label {
font-size: var(--divider-font-size);
Expand Down
3 changes: 1 addition & 2 deletions packages/components/pie-icon-button/src/iconButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
.o-iconBtn {
--btn-border-radius: var(--dt-radius-rounded-e);
--btn-bg-color: var(--dt-color-interactive-brand);
--btn-icon-fill: var(--dt-color-content-interactive-primary);
--btn-icon-fill: var(--dt-color-content-interactive-light);
--icon-display-override: block;

block-size: var(--btn-dimension, var(--btn-dimension-default));
Expand Down Expand Up @@ -125,4 +125,3 @@
--icon-size-override: 28px;
}
}

1 change: 1 addition & 0 deletions packages/components/pie-modal/src/modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
border: none;
box-shadow: var(--modal-elevation);
font-family: var(--modal-font);
color: var(--dt-color-content-default);
background-color: var(--modal-bg-color);

padding: 0;
Expand Down
4 changes: 3 additions & 1 deletion packages/components/pie-switch/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,9 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
}

return html`
<span data-test-id="switch-label-${labelPlacement}">
<span
data-test-id="switch-label-${labelPlacement}"
class="c-switch-label">
${label}
</span>`;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/components/pie-switch/src/switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,10 @@
}
}

.c-switch-label {
color: var(--dt-color-content-default);
}

// The description is only required for screen readers so we need to visually hide the description
.c-switch-description {
@include p.visually-hidden;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/pie-tag/src/tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,13 +157,13 @@

&.c-tag--brand-03 {
--tag-bg-color: var(--dt-color-support-brand-03);
--tag-color: var(--dt-color-content-default);
--tag-color: var(--dt-color-content-dark);
@include tag-interactive-states('--dt-color-support-brand-03');
}

&.c-tag--brand-04 {
--tag-bg-color: var(--dt-color-support-brand-04);
--tag-color: var(--dt-color-content-default);
--tag-color: var(--dt-color-content-dark);
@include tag-interactive-states('--dt-color-support-brand-04');
}

Expand Down
Loading
Loading