Skip to content

Commit ff1a8ac

Browse files
brandyscarneybrandyscarney
committed
feat(sass): add the ability to pass a contrast color in the colors map to iOS
this adds the functions necessary for the other modes as well BREAKING CHANGE: Can now pass contrast to the colors map: ``` $colors-ios: ( primary: ( base: #327eff, contrast: yellow ), secondary: ( base: #32db64, contrast: hotpink ), danger: #d91e18, light: #f4f4f4, dark: #222 ) !default; ``` references #5445
1 parent 3e88fe9 commit ff1a8ac

File tree

22 files changed

+372
-115
lines changed

22 files changed

+372
-115
lines changed

‎ionic/components/alert/alert.ios.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ $alert-ios-button-margin: 0 !default;
4141
$alert-ios-button-min-width: 50% !default;
4242
$alert-ios-button-min-height: 44px !default;
4343
$alert-ios-button-font-size: 17px !default;
44-
$alert-ios-button-text-color: map-get($colors-ios, primary) !default;
44+
$alert-ios-button-text-color: color($colors-ios, primary) !default;
4545
$alert-ios-button-background-color: transparent !default;
4646
$alert-ios-button-background-color-activated: #e9e9e9 !default;
4747

@@ -75,9 +75,9 @@ $alert-ios-checkbox-border-width: 1px !default;
7575
$alert-ios-checkbox-border-style: solid !default;
7676
$alert-ios-checkbox-border-radius: 50% !default;
7777
$alert-ios-checkbox-border-color-off: $list-ios-border-color !default;
78-
$alert-ios-checkbox-border-color-on: map-get($colors-ios, primary) !default;
78+
$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default;
7979
$alert-ios-checkbox-background-color-off: $list-ios-background-color !default;
80-
$alert-ios-checkbox-background-color-on: map-get($colors-ios, primary) !default;
80+
$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default;
8181

8282
$alert-ios-checkbox-icon-top: 4px !default;
8383
$alert-ios-checkbox-icon-left: 7px !default;

‎ionic/components/app/app.ios.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ hr {
2424
height: $hairlines-width;
2525
}
2626

27-
@each $color-name, $color-value in $colors-ios {
27+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
28+
2829
h1,
2930
h2,
3031
h3,
@@ -43,7 +44,7 @@ hr {
4344
sup,
4445
ion-icon {
4546
&[#{$color-name}] {
46-
color: $color-value;
47+
color: $color-base;
4748
}
4849
}
4950
}

‎ionic/components/badge/badge.ios.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,26 @@
33
// iOS Badge
44
// --------------------------------------------------
55

6-
$badge-ios-border-radius: 10px !default;
7-
$badge-ios-background-color: map-get($colors-ios, primary) !default;
6+
$badge-ios-border-radius: 10px !default;
7+
$badge-ios-background-color: color($colors-ios, primary) !default;
8+
$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default;
89

910

1011
ion-badge {
1112
border-radius: $badge-ios-border-radius;
12-
color: color-inverse($badge-ios-background-color);
13+
color: $badge-ios-text-color;
1314
background-color: $badge-ios-background-color;
1415
}
1516

1617

1718
// Generate iOS Badge Colors
1819
// --------------------------------------------------
1920

20-
@each $color-name, $color-value in $colors-ios {
21+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
2122

2223
.badge-#{$color-name} {
23-
color: color-inverse($color-value);
24-
background-color: $color-value;
24+
color: $color-contrast;
25+
background-color: $color-base;
2526
}
2627

2728
}

‎ionic/components/button/button.ios.scss

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ $button-ios-margin: .4rem .2rem !default;
88
$button-ios-padding: 0 1em !default;
99
$button-ios-font-size: 1.6rem !default;
1010
$button-ios-height: 2.8em !default;
11-
$button-ios-color: map-get($colors-ios, primary) !default;
11+
$button-ios-color: color($colors-ios, primary) !default;
1212
$button-ios-color-activated: color-shade($button-ios-color) !default;
13-
$button-ios-text-color: color-inverse($button-ios-color) !default;
13+
$button-ios-text-color: color-contrast($colors-ios, $button-ios-color) !default;
1414
$button-ios-hover-opacity: .8 !default;
1515
$button-ios-border-radius: 4px !default;
1616

@@ -53,12 +53,12 @@ $button-ios-small-icon-font-size: 1.3em !default;
5353
// iOS Default Button Color Mixin
5454
// --------------------------------------------------
5555

56-
@mixin ios-button-default($color-name, $color-value) {
56+
@mixin ios-button-default($color-name, $color-base, $color-contrast) {
5757

5858
.button-#{$color-name} {
59-
$background-color: $color-value;
59+
$background-color: $color-base;
6060
$background-color-activated: color-shade($background-color);
61-
$fg-color: color-inverse($background-color);
61+
$fg-color: $color-contrast;
6262

6363
color: $fg-color;
6464
background-color: $background-color;
@@ -126,7 +126,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
126126
background-color: transparent;
127127

128128
&.activated {
129-
color: $background-ios-color;
129+
color: color-contrast($colors-ios, $button-ios-color);
130130
background-color: $button-ios-color;
131131
opacity: 1;
132132
}
@@ -139,17 +139,16 @@ $button-ios-small-icon-font-size: 1.3em !default;
139139
// iOS Outline Button Color Mixin
140140
// --------------------------------------------------
141141

142-
@mixin ios-button-outline($color-name, $color-value) {
142+
@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
143143

144144
.button-outline-#{$color-name} {
145-
$fg-color: color-shade($color-value, 5%);
146-
border-color: $fg-color;
147-
color: $fg-color;
145+
border-color: $color-base;
146+
color: $color-base;
148147
background-color: transparent;
149148

150149
&.activated {
151-
color: $background-ios-color;
152-
background-color: $fg-color;
150+
color: $color-contrast;
151+
background-color: $color-base;
153152
}
154153
}
155154

@@ -179,10 +178,10 @@ $button-ios-small-icon-font-size: 1.3em !default;
179178
// iOS Clear Button Color Mixin
180179
// --------------------------------------------------
181180

182-
@mixin ios-button-clear($color-name, $color-value) {
181+
@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
183182

184183
.button-clear-#{$color-name} {
185-
$fg-color: $color-value;
184+
$fg-color: $color-base;
186185
border-color: transparent;
187186
color: $fg-color;
188187
background-color: transparent;
@@ -217,10 +216,10 @@ ion-button-effect {
217216
// Generate iOS Button Colors
218217
// --------------------------------------------------
219218

220-
@each $color-name, $color-value in $colors-ios {
221-
@include ios-button-default($color-name, $color-value);
222-
@include ios-button-outline($color-name, $color-value);
223-
@include ios-button-clear($color-name, $color-value);
219+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
220+
@include ios-button-default($color-name, $color-base, $color-contrast);
221+
@include ios-button-outline($color-name, $color-base, $color-contrast);
222+
@include ios-button-clear($color-name, $color-base, $color-contrast);
224223
}
225224

226225

‎ionic/components/checkbox/checkbox.ios.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
// --------------------------------------------------
55

66
$checkbox-ios-background-color-off: $list-ios-background-color !default;
7-
$checkbox-ios-background-color-on: map-get($colors-ios, primary) !default;
7+
$checkbox-ios-background-color-on: color($colors-ios, primary) !default;
88

99
$checkbox-ios-icon-size: 21px !default;
10-
$checkbox-ios-icon-border-color-on: map-get($colors-ios, primary) !default;
1110
$checkbox-ios-icon-border-color-off: $list-ios-border-color !default;
11+
$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default;
1212
$checkbox-ios-icon-border-width: 1px !default;
1313
$checkbox-ios-icon-border-style: solid !default;
1414
$checkbox-ios-icon-border-radius: 50% !default;
1515

1616
$checkbox-ios-icon-checkmark-width: 1px !default;
1717
$checkbox-ios-icon-checkmark-style: solid !default;
18-
$checkbox-ios-icon-checkmark-color: $background-ios-color !default;
18+
$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default;
1919

2020
$checkbox-ios-media-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
2121

@@ -99,14 +99,14 @@ ion-checkbox {
9999
// iOS Checkbox Color Mixin
100100
// --------------------------------------------------
101101

102-
@mixin checkbox-theme-ios($color-name, $bg-on) {
102+
@mixin checkbox-theme-ios($color-name, $color-base, $color-contrast) {
103103

104104
ion-checkbox[#{$color-name}] .checkbox-checked {
105-
border-color: $bg-on;
106-
background-color: $bg-on;
105+
border-color: $color-base;
106+
background-color: $color-base;
107107

108108
.checkbox-inner {
109-
border-color: color-inverse($bg-on);
109+
border-color: $color-contrast;
110110
}
111111
}
112112

@@ -116,6 +116,6 @@ ion-checkbox {
116116
// Generate iOS Checkbox Colors
117117
// --------------------------------------------------
118118

119-
@each $color-name, $color-value in $colors-ios {
120-
@include checkbox-theme-ios($color-name, $color-value);
119+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
120+
@include checkbox-theme-ios($color-name, $color-base, $color-contrast);
121121
}

‎ionic/components/chip/chip.ios.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
@import "./chip";
22

3-
// Material Design Chip
3+
// iOS Chip
44
// --------------------------------------------------
55

66

7-
// Generate Material Design Chip Colors
7+
// Generate iOS Chip Colors
88
// --------------------------------------------------
99

10-
@each $color-name, $color-value in $colors-ios {
10+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
1111

1212
ion-chip {
1313
ion-icon[#{$color-name}] {
14-
color: color-inverse($color-value);
15-
background-color: $color-value;
14+
color: $color-contrast;
15+
background-color: $color-base;
1616
}
1717
}
1818

‎ionic/components/item/item.ios.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,10 @@ ion-item-divider {
207207
// Generate iOS Item Divider Colors
208208
// --------------------------------------------------
209209

210-
@each $color-name, $color-value in $colors-ios {
210+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
211211
ion-item-divider[#{$color-name}] {
212-
color: color-inverse($color-value);
213-
background-color: $color-value;
212+
color: $color-contrast;
213+
background-color: $color-base;
214214
}
215215
}
216216

‎ionic/components/label/label.ios.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,10 +64,10 @@ ion-label[floating] {
6464
// Generate iOS Label colors
6565
// --------------------------------------------------
6666

67-
@each $color-name, $color-value in $colors-ios {
67+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
6868

6969
ion-label[#{$color-name}] {
70-
color: $color-value;
70+
color: $color-base;
7171
}
7272

7373
}

‎ionic/components/radio/radio.ios.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// iOS Radio
44
// --------------------------------------------------
55

6-
$radio-ios-color-on: map-get($colors-ios, primary) !default;
6+
$radio-ios-color-on: color($colors-ios, primary) !default;
77

88
$radio-ios-icon-width: 16px !default;
99
$radio-ios-icon-height: 21px !default;
@@ -88,13 +88,13 @@ ion-radio {
8888
// iOS Radio Color Mixin
8989
// --------------------------------------------------
9090

91-
@mixin radio-theme-ios($color-name, $color-value) {
91+
@mixin radio-theme-ios($color-name, $color-base) {
9292

9393
ion-radio[#{$color-name}] .radio-checked {
94-
color: $color-value;
94+
color: $color-base;
9595

9696
.radio-inner {
97-
border-color: $color-value;
97+
border-color: $color-base;
9898
}
9999

100100
}
@@ -105,8 +105,8 @@ ion-radio {
105105
// Generate iOS Radio Colors
106106
// --------------------------------------------------
107107

108-
@each $color-name, $color-value in $colors-ios {
108+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
109109

110-
@include radio-theme-ios($color-name, $color-value);
110+
@include radio-theme-ios($color-name, $color-base);
111111

112112
}

‎ionic/components/searchbar/searchbar.ios.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -194,21 +194,21 @@ ion-searchbar {
194194
// Generate Default Search Bar Colors
195195
// --------------------------------------------------
196196

197-
@each $color-name, $color-value in $colors-ios {
197+
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
198198

199199
ion-searchbar[#{$color-name}] {
200200
.searchbar-ios-cancel {
201-
color: $color-value;
201+
color: $color-base;
202202

203203
&:hover:not(.disable-hover) {
204-
color: color-shade($color-value);
204+
color: color-shade($color-base);
205205
}
206206
}
207207
}
208208

209209
.toolbar[#{$color-name}] ion-searchbar {
210210
.searchbar-ios-cancel {
211-
color: color-inverse($color-value);
211+
color: $color-contrast;
212212
}
213213
}
214214

0 commit comments

Comments
 (0)