Skip to content

Commit 045bc59

Browse files
brandyscarneybrandyscarney
authored
fix(theming): update components to use the proper colors for dark themes (#18735)
references #18713
1 parent 08af35a commit 045bc59

25 files changed

+360
-247
lines changed

‎core/src/components/action-sheet/action-sheet.ios.vars.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ $action-sheet-ios-title-border-style: solid !default
6565
$action-sheet-ios-title-border-color-alpha: .08 !default;
6666

6767
/// @prop - Border color of the action sheet title
68-
$action-sheet-ios-title-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-title-border-color-alpha) !default;
68+
$action-sheet-ios-title-border-color: rgba($text-color-rgb, $action-sheet-ios-title-border-color-alpha) !default;
6969

7070

7171
// Action Sheet Subtitle
@@ -124,7 +124,7 @@ $action-sheet-ios-button-border-style: solid !default
124124
$action-sheet-ios-button-border-color-alpha: .08 !default;
125125

126126
/// @prop - Border color of the action sheet button
127-
$action-sheet-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-border-color-alpha) !default;
127+
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
128128

129129
/// @prop - Background color of the action sheet button
130130
$action-sheet-ios-button-background: transparent !default;
@@ -133,7 +133,7 @@ $action-sheet-ios-button-background: transparent !d
133133
$action-sheet-ios-button-background-alpha-activated: .08 !default;
134134

135135
/// @prop - Background color of the activated action sheet button
136-
$action-sheet-ios-button-background-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $action-sheet-ios-button-background-alpha-activated) !default;
136+
$action-sheet-ios-button-background-activated: rgba($text-color-rgb, $action-sheet-ios-button-background-alpha-activated) !default;
137137

138138
/// @prop - Background color of the selected action sheet button
139139
$action-sheet-ios-button-background-selected: $background-color !default;

‎core/src/components/action-sheet/action-sheet.md.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $action-sheet-md-padding-bottom: 0 !default;
2323
$action-sheet-md-title-height: 60px !default;
2424

2525
/// @prop - Color of the action sheet title
26-
$action-sheet-md-title-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
26+
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
2727

2828
/// @prop - Font size of the action sheet title
2929
$action-sheet-md-title-font-size: 16px !default;

‎core/src/components/alert/alert.ios.vars.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ $alert-ios-button-background-color: transparent !default;
152152
$alert-ios-button-background-color-alpha-activated: .1 !default;
153153

154154
/// @prop - Background color of the alert activated button
155-
$alert-ios-button-background-color-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-background-color-alpha-activated) !default;
155+
$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default;
156156

157157
/// @prop - Border width of the alert button
158158
$alert-ios-button-border-width: $hairlines-width !default;
@@ -164,7 +164,7 @@ $alert-ios-button-border-style: solid !default;
164164
$alert-ios-button-border-color-alpha: .2 !default;
165165

166166
/// @prop - Border color of the alert button
167-
$alert-ios-button-border-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $alert-ios-button-border-color-alpha) !default;
167+
$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default;
168168

169169
/// @prop - Border radius of the alert button
170170
$alert-ios-button-border-radius: 0 !default;

‎core/src/components/button/button.md.vars.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ $button-md-outline-box-shadow: none !default;
122122
$button-md-outline-background-color-alpha-hover: .1 !default;
123123

124124
/// @prop - Background color of the outline button on hover
125-
$button-md-outline-background-color-hover: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-outline-background-color-alpha-hover) !default;
125+
$button-md-outline-background-color-hover: rgba($text-color-rgb, $button-md-outline-background-color-alpha-hover) !default;
126126

127127
/// @prop - Background color of the activated outline button
128128
$button-md-outline-background-color-activated: transparent !default;
@@ -158,7 +158,7 @@ $button-md-clear-opacity: 1 !default;
158158
$button-md-clear-background-color-alpha-activated: .1 !default;
159159

160160
/// @prop - Background color of the activated clear button
161-
$button-md-clear-background-color-activated: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-activated) !default;
161+
$button-md-clear-background-color-activated: rgba($text-color-rgb, $button-md-clear-background-color-alpha-activated) !default;
162162

163163
/// @prop - Box shadow of the activated clear button
164164
$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default;
@@ -167,7 +167,7 @@ $button-md-clear-box-shadow-activated: $button-md-clear-box-sha
167167
$button-md-clear-background-color-alpha-hover: .1 !default;
168168

169169
/// @prop - Background color of the clear button on hover
170-
$button-md-clear-background-color-hover: rgba(var(--ion-text-color-rgb, $text-color-rgb), $button-md-clear-background-color-alpha-hover) !default;
170+
$button-md-clear-background-color-hover: rgba($text-color-rgb, $button-md-clear-background-color-alpha-hover) !default;
171171

172172
/// @prop - Background color of the ripple on the clear button
173173
$button-md-clear-ripple-background-color: $text-color-step-600 !default;

‎core/src/components/checkbox/checkbox.ios.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ $checkbox-ios-background-color-focused: ion-color(primary, tint) !default;
1717
$checkbox-ios-icon-size: 26px !default;
1818

1919
/// @prop - Border color of the checkbox icon when off
20-
$checkbox-ios-icon-border-color-off: $item-ios-border-color !default;
20+
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default;
2121

2222
/// @prop - Border color of the checkbox icon when on
2323
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;

‎core/src/components/checkbox/checkbox.md.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ $checkbox-md-icon-border-style: solid !default;
3838
$checkbox-md-icon-border-radius: 2px !default;
3939

4040
/// @prop - Border color of the checkbox icon when off
41-
$checkbox-md-icon-border-color-off: rgba(0, 0, 0, .54) !default;
41+
$checkbox-md-icon-border-color-off: rgba($text-color-rgb, .51) !default;
4242

4343
/// @prop - Border color of the checkbox icon when on
4444
$checkbox-md-icon-border-color-on: ion-color(primary, base) !default;

‎core/src/components/chip/chip.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
* @prop --background: Background of the chip
66
* @prop --color: Color of the chip
77
*/
8-
--background: rgba(0, 0, 0, .12);
9-
--color: rgba(0, 0, 0, .87);
8+
--background: #{rgba($text-color-rgb, .12)};
9+
--color: #{rgba($text-color-rgb, .87)};
1010

1111
@include border-radius(16px);
1212
@include font-smoothing();
@@ -128,15 +128,15 @@
128128
}
129129

130130
:host(:focus) {
131-
--background: rgba(0, 0, 0, .16);
131+
--background: #{rgba($text-color-rgb, .16)};
132132
}
133133

134134

135135
// Chip: Activated
136136
// ---------------------------------------------
137137

138138
:host(.activated) {
139-
--background: rgba(0, 0, 0, .20);
139+
--background: #{rgba($text-color-rgb, .20)};
140140
}
141141

142142

@@ -145,14 +145,14 @@
145145

146146
@media (any-hover: hover) {
147147
:host(:hover) {
148-
--background: rgba(0, 0, 0, .16);
148+
--background: #{rgba($text-color-rgb, .16)};
149149
}
150150

151151
:host(.ion-color:hover) {
152152
background: current-color(base, .12);
153153
}
154154

155155
:host(.chip-outline:not(.ion-color):hover) {
156-
background: rgba(0, 0, 0, .04);
156+
background: rgba($text-color-rgb, .04);
157157
}
158158
}

‎core/src/components/fab-button/fab-button.md.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $fab-md-list-button-background-color-activated: ion-color(light, shade) !defau
3131
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
3232

3333
/// @prop - Text color of the button in a list
34-
$fab-md-list-button-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
34+
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default;
3535

3636
/// @prop - Font size of the button icon in a list
3737
$fab-md-list-button-icon-font-size: 18px !default;

‎core/src/components/item/item.ios.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ $item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !def
2525
$item-ios-paragraph-font-size: 14px !default;
2626

2727
/// @prop - Color of the item paragraph
28-
$item-ios-paragraph-text-color: $text-color-step-600 !default;
28+
$item-ios-paragraph-text-color: rgba($text-color-rgb, .4) !default;
2929

3030
/// @prop - Width of the avatar in the item
3131
$item-ios-avatar-width: 36px !default;

‎core/src/components/item/item.md.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ $item-md-icon-end-slot-margin-start: 16px !default;
133133
$item-md-icon-end-slot-margin-end: null !default;
134134

135135
/// @prop - Color for an icon in the start/end slot
136-
$item-md-icon-slot-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), 0.54) !default;
136+
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default;
137137

138138
/// @prop - Font size of an icon in the start/end slot
139139
$item-md-icon-slot-font-size: 24px !default;

‎core/src/components/loading/loading.ios.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ $loading-ios-border-radius: 8px !default;
3131
$loading-ios-text-color: $text-color !default;
3232

3333
/// @prop - Background of the loading wrapper
34-
$loading-ios-background-color: $background-color-step-50 !default;
34+
$loading-ios-background-color: $overlay-ios-background-color !default;
3535

3636
/// @prop - Background color alpha of the translucent loading wrapper
3737
$loading-ios-translucent-background-color-alpha: .8 !default;

‎core/src/components/range/range.ios.vars.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ $range-ios-hit-width: 42px !default;
1919
$range-ios-hit-height: $range-ios-slider-height !default;
2020

2121
/// @prop - Height of the range bar
22-
$range-ios-bar-height: 1px !default;
22+
$range-ios-bar-height: 2px !default;
2323

2424
/// @prop - Background of the range bar
25-
$range-ios-bar-background-color: $background-color-step-250 !default;
25+
$range-ios-bar-background-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), .1) !default;
2626

2727
/// @prop - Background of the active range bar
2828
$range-ios-bar-active-background-color: current-color(base) !default;
@@ -40,7 +40,7 @@ $range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px
4040
$range-ios-knob-border-radius: 50% !default;
4141

4242
/// @prop - Background of the range knob
43-
$range-ios-knob-background-color: $background-color !default;
43+
$range-ios-knob-background-color: #ffffff !default;
4444

4545
/// @prop - Width of the range tick
4646
$range-ios-tick-width: $range-ios-bar-height !default;

‎core/src/components/searchbar/searchbar.ios.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ $searchbar-ios-input-text-color: $text-color !default;
4646
$searchbar-ios-input-background-color-alpha: .07 !default;
4747

4848
/// @prop - Background color of the searchbar input
49-
$searchbar-ios-input-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $searchbar-ios-input-background-color-alpha) !default;
49+
$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default;
5050

5151
/// @prop - Transition of the searchbar input
5252
$searchbar-ios-input-transition: all 300ms ease !default;

‎core/src/components/segment-button/segment-button.md.vars.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
$segment-button-md-opacity: .6 !default;
88

99
/// @prop - Text color of the segment button
10-
$segment-button-md-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $segment-button-md-opacity) !default;
10+
$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default;
1111

1212
/// @prop - Background of the segment button
1313
$segment-button-md-background: none !default;

‎core/src/components/skeleton-text/skeleton-text.vars.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
$skeleton-text-background-alpha: .065 !default;
88

99
/// @prop - Background color of the skeleton text
10-
$skeleton-text-background: rgba(var(--background-rgb, var(--ion-text-color-rgb, $text-color-rgb)), $skeleton-text-background-alpha) !default;
10+
$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default;
1111

1212
/// @prop - Background color alpha of the skeleton text animation
1313
$skeleton-text-background-animated-alpha: .135 !default;
1414

1515
/// @prop - Background color of the skeleton text animation
16-
$skeleton-text-background-animated: rgba(var(--background-rgb, var(--ion-text-color-rgb, $text-color-rgb)), $skeleton-text-background-animated-alpha) !default;
16+
$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha) !default;

‎core/src/components/slides/slides.ios.vars.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $slides-ios-bullet-background-active: ion-color(primary, base) !defa
1010
$slides-ios-progress-bar-background-alpha: .25 !default;
1111

1212
/// @prop - Background color of the progress bar
13-
$slides-ios-progress-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-progress-bar-background-alpha) !default;
13+
$slides-ios-progress-bar-background: rgba($text-color-rgb, $slides-ios-progress-bar-background-alpha) !default;
1414

1515
/// @prop - Background color of the active progress bar
1616
$slides-ios-progress-bar-background-active: ion-color(primary, shade) !default;
@@ -19,10 +19,10 @@ $slides-ios-progress-bar-background-active: ion-color(primary, shade) !def
1919
$slides-ios-scroll-bar-background-alpha: .1 !default;
2020

2121
/// @prop - Background color of the scroll bar
22-
$slides-ios-scroll-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-background-alpha) !default;
22+
$slides-ios-scroll-bar-background: rgba($text-color-rgb, $slides-ios-scroll-bar-background-alpha) !default;
2323

2424
/// @prop - Alpha to use for the background color of the scroll bar while dragging
2525
$slides-ios-scroll-bar-drag-background-alpha: .5 !default;
2626

2727
/// @prop - Background color of the scroll bar drag handle
28-
$slides-ios-scroll-bar-drag-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-ios-scroll-bar-drag-background-alpha) !default;
28+
$slides-ios-scroll-bar-drag-background: rgba($text-color-rgb, $slides-ios-scroll-bar-drag-background-alpha) !default;

‎core/src/components/slides/slides.md.vars.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ $slides-md-bullet-background-active: ion-color(primary, base) !defaul
1010
$slides-md-progress-bar-background-alpha: .25 !default;
1111

1212
/// @prop - Background color of the progress
13-
$slides-md-progress-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-progress-bar-background-alpha) !default;
13+
$slides-md-progress-bar-background: rgba($text-color-rgb, $slides-md-progress-bar-background-alpha) !default;
1414

1515
/// @prop - Background color of the progress bar
1616
$slides-md-progress-bar-background-active: ion-color(primary, shade) !default;
@@ -19,10 +19,10 @@ $slides-md-progress-bar-background-active: ion-color(primary, shade) !defau
1919
$slides-md-scroll-bar-background-alpha: .1 !default;
2020

2121
/// @prop - Background color of the scroll bar
22-
$slides-md-scroll-bar-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-background-alpha) !default;
22+
$slides-md-scroll-bar-background: rgba($text-color-rgb, $slides-md-scroll-bar-background-alpha) !default;
2323

2424
/// @prop - Alpha to use for the background color of the scroll bar while dragging
2525
$slides-md-scroll-bar-drag-background-alpha: .5 !default;
2626

2727
/// @prop - Background color of the scroll bar drag handle
28-
$slides-md-scroll-bar-drag-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $slides-md-scroll-bar-drag-background-alpha) !default;
28+
$slides-md-scroll-bar-drag-background: rgba($text-color-rgb, $slides-md-scroll-bar-drag-background-alpha) !default;

‎core/src/components/toggle/toggle.ios.scss

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -43,32 +43,13 @@
4343

4444
transition: background-color $toggle-ios-transition-duration;
4545

46-
background-color: $toggle-ios-border-color-off;
46+
background-color: $toggle-ios-background-color-off;
4747

4848
overflow: hidden;
4949
pointer-events: none;
5050
}
5151

5252

53-
// iOS Toggle Background Oval: Unchecked
54-
// -----------------------------------------
55-
56-
.toggle-icon::before {
57-
@include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width);
58-
@include border-radius($toggle-ios-border-radius);
59-
60-
position: absolute;
61-
62-
transform: scale3d(1, 1, 1);
63-
64-
transition: transform $toggle-ios-transition-duration;
65-
66-
background: var(--background);
67-
68-
content: "";
69-
}
70-
71-
7253
// iOS Toggle Inner Knob: Unchecked
7354
// -----------------------------------------
7455

‎core/src/components/toggle/toggle.ios.vars.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,7 @@ $toggle-ios-border-width: 2px !default;
1717
$toggle-ios-border-radius: $toggle-ios-height / 2 !default;
1818

1919
/// @prop - Background color of the unchecked toggle
20-
$toggle-ios-background-color-off: $item-ios-background !default;
21-
22-
/// @prop - Border color of the unchecked toggle
23-
$toggle-ios-border-color-off: $background-color-step-50 !default;
20+
$toggle-ios-background-color-off: rgba($text-color-rgb, .088) !default;
2421

2522
/// @prop - Background color of the checked toggle
2623
$toggle-ios-background-color-on: ion-color(primary, base) !default;
@@ -38,7 +35,7 @@ $toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default;
3835
$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default;
3936

4037
/// @prop - Background color of the toggle handle
41-
$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default;
38+
$toggle-ios-handle-background-color: #ffffff !default;
4239

4340
/// @prop - Margin of the toggle handle
4441
$toggle-ios-media-margin: 0 !default;

‎core/src/components/toggle/toggle.md.vars.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ $toggle-md-track-width: 36px !default;
1414
$toggle-md-track-height: 14px !default;
1515

1616
/// @prop - Background color of the toggle track
17-
$toggle-md-track-background-color-off: ion-color(medium, tint) !default;
17+
$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.3) !default;
1818

1919
/// @prop - Background color alpha of the checked toggle track
2020
$toggle-md-track-background-color-alpha-on: .5 !default;
@@ -35,7 +35,7 @@ $toggle-md-handle-border-radius: 50% !default;
3535
$toggle-md-handle-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
3636

3737
/// @prop - Background color of the toggle handle
38-
$toggle-md-handle-background-color-off: $background-color !default;
38+
$toggle-md-handle-background-color-off: #ffffff !default;
3939

4040
/// @prop - Background color of the checked toggle handle
4141
$toggle-md-handle-background-color-on: $toggle-md-active-color !default;

0 commit comments

Comments
 (0)