Skip to content

fix(button): activated outline button in toolbar no longer blends into background on MD dark mode #29216

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

Merged
averyrousseau merged 25 commits into from
Apr 2, 2024
Merged

fix(button): activated outline button in toolbar no longer blends into background on MD dark mode #29216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
7c4ae1e
fix(button): activated button in toolbar no longer blends into backgr…
Mar 25, 2024
7cd0d9b
add dark mode to existing toolbar test
Mar 25, 2024
4968d80
chore(): add updated snapshots
Ionitron Mar 25, 2024
3975105
convert test to use setContent for dark mode support
Mar 25, 2024
f089ec3
add missing header to test
Mar 25, 2024
5272901
chore(): add updated snapshots
Ionitron Mar 25, 2024
f1d6b71
test(toolbar): add dark theme to basic test
Mar 27, 2024
2a9b190
add missing header to test
Mar 27, 2024
0a9dea6
delete snapshots
Mar 27, 2024
49ce56b
fix(button): activated button in toolbar no longer blends into backgr…
Mar 25, 2024
77ad7d5
chore(): add updated snapshots
Ionitron Mar 25, 2024
f2f84e2
convert test to use setContent for dark mode support
Mar 25, 2024
b35e6f9
chore(): add updated snapshots
Ionitron Mar 25, 2024
c7811dd
delete snapshots
Mar 27, 2024
943c737
Merge branch 'FW-5721' of https://github.com/ionic-team/ionic-framewo…
Mar 27, 2024
6174917
remove extra newlines
Mar 27, 2024
3992698
chore(): add updated snapshots
Ionitron Mar 27, 2024
e0686b2
Revert "chore(): add updated snapshots"
Mar 27, 2024
1d55783
chore(): add updated snapshots
Ionitron Mar 27, 2024
49ba6a0
Revert "chore(): add updated snapshots"
Mar 27, 2024
ed107ac
Merge remote-tracking branch 'origin/main' into FW-5721
Apr 1, 2024
4d188c2
chore(): add updated snapshots
Ionitron Apr 1, 2024
4cd62bb
fix visual regression on ios mode
Apr 1, 2024
aa6cd2a
Revert "chore(): add updated snapshots"
Apr 1, 2024
498b47a
chore(): add updated snapshots
Ionitron Apr 1, 2024
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
9 changes: 9 additions & 0 deletions core/src/components/button/button.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,3 +212,12 @@
:host(.button-solid.ion-color.ion-activated) .button-native::after {
background: #{current-color(shade)};
}


// Activated Button in Toolbar
// --------------------------------------------------

:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
Comment thread
thetaPC marked this conversation as resolved.
background: var(--ion-toolbar-color, var(--color));
Comment thread
thetaPC marked this conversation as resolved.
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
}
9 changes: 9 additions & 0 deletions core/src/components/button/button.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,3 +160,12 @@
background: #{current-color(base)};
}
}


// Activated Button in Toolbar
// --------------------------------------------------

:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
Comment thread
thetaPC marked this conversation as resolved.
background: var(--ion-toolbar-background, var(--color));
color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
}
8 changes: 0 additions & 8 deletions core/src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,11 +331,3 @@ ion-ripple-effect {
background: #{var(--ion-toolbar-color, var(--background))};
color: #{var(--ion-toolbar-background, var(--color))};
}

// Activated Button in Toolbar
// --------------------------------------------------

:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
background: var(--ion-toolbar-color, var(--color));
color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
}
Binary file modified ...s-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 52 additions & 33 deletions core/src/themes/test/css-variables/css/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,84 @@
:root {
/*
* Dark Colors
* -------------------------------------------
*/

body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-rgb: 66, 140, 255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;

--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-rgb: 80, 200, 255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;

--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-rgb: 106, 100, 255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;

--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-rgb: 47, 223, 117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-contrast-rgb: 0, 0, 0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;

--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-rgb: 255, 213, 52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;

--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-rgb: 255, 73, 97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;

--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-rgb: 244, 245, 248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-contrast-rgb: 0, 0, 0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;

--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-rgb: 152, 154, 162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-contrast-rgb: 0, 0, 0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;

--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-rgb: 34, 36, 40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-contrast-rgb: 255, 255, 255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}

/*
* iOS Dark Theme
* -------------------------------------------
*/

.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;
--ion-background-color-rgb: 0, 0, 0;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-text-color-rgb: 255, 255, 255;

--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
Expand All @@ -90,18 +100,28 @@
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;

--ion-item-background: #1c1c1c;
--ion-item-background: #000000;

--ion-card-background: #1c1c1d;
}

--ion-toolbar-background: #000;
--ion-toolbar-color: #fff;
.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}

/*
* Material Design Dark Theme
* -------------------------------------------
*/

.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;
--ion-background-color-rgb: 18, 18, 18;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;
--ion-text-color-rgb: 255, 255, 255;

--ion-border-color: #222222;

Expand All @@ -125,12 +145,11 @@
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;

--ion-item-background: #1a1b1e;
}
--ion-item-background: #1e1e1e;

ion-modal.ios {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
--ion-item-background: var(--ion-color-step-150);
--ion-toolbar-background: #1f1f1f;

--ion-tab-bar-background: #1f1f1f;

--ion-card-background: #1e1e1e;
}