Skip to content

Commit 1caad47

Browse files
committed
style(themes): update $text-color-rgb to include global var
1 parent f16b118 commit 1caad47

12 files changed

+23
-22
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/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.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/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/themes/ionic.theme.default.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,12 @@ $background-color-value: #fff !default;
8787
$background-color-rgb-value: 255, 255, 255 !default;
8888

8989
$text-color-value: #000 !default;
90-
$text-color-rgb: 0, 0, 0 !default;
90+
$text-color-rgb-value: 0, 0, 0 !default;
9191

9292
$background-color: var(--ion-background-color, $background-color-value) !default;
9393
$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default;
9494
$text-color: var(--ion-text-color, $text-color-value) !default;
95+
$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default;
9596

9697
// Default Foreground and Background Step Colors
9798
// -------------------------------------------------------------------------------------------

0 commit comments

Comments
 (0)