Skip to content

Commit eb0b05d

Browse files
brandyscarneymanucorporat
brandyscarney
authored and
manucorporat
committed
fix(sass): remove usage of colors other than primary, improve error (#8907)
* fix(sass): remove usage of colors other than primary, improve error fixes #8266 * refactor(sass): add variables to override all modes for fab and input * refactor(fab): rename Sass variable from in-list to list-button BREAKING CHANGE: - `$fab-<mode>-in-list-background-color` -> `$fab-<mode>-list-button-background-color` - `$fab-<mode>-in-list-text-color` -> `$fab-<mode>-list-button-text-color` - `$fab-<mode>-in-list-background-color-activated` -> `$fab-<mode>-list-button-background-color-activated`
1 parent a98284a commit eb0b05d

13 files changed

+96
-60
lines changed

‎src/components/fab/fab.ios.scss‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,23 @@
44
// --------------------------------------------------
55

66
/// @prop - Background color of the button
7-
$fab-ios-background-color: color($colors-ios, primary) !default;
7+
$fab-ios-background-color: color($colors-ios, primary) !default;
88

99
/// @prop - Text color of the button
10-
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
10+
$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default;
1111

1212
/// @prop - Background color of the activated button
13-
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
13+
$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default;
1414

15-
/// @prop - Background color of the button
16-
$fab-ios-in-list-background-color: color($colors-ios, light) !default;
15+
/// @prop - Background color of the button in a list
16+
$fab-ios-list-button-background-color: $fab-list-button-background-color !default;
1717

18-
/// @prop - Text color of the button
19-
$fab-ios-in-list-text-color: color-contrast($colors-ios, $fab-ios-in-list-background-color) !default;
18+
/// @prop - Text color of the button in a list
19+
$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default;
20+
21+
/// @prop - Background color of the activated button in a list
22+
$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default;
2023

21-
/// @prop - Background color of the activated button
22-
$fab-ios-in-list-background-color-activated: color-shade($fab-ios-in-list-background-color) !default;
2324

2425
.fab-ios {
2526
color: $fab-ios-text-color;
@@ -31,12 +32,12 @@ $fab-ios-in-list-background-color-activated: color-shade($fab-ios-in-list-backg
3132
}
3233

3334
.fab-ios.fab-in-list {
34-
color: $fab-ios-in-list-text-color;
35-
background-color: $fab-ios-in-list-background-color;
35+
color: $fab-ios-list-button-text-color;
36+
background-color: $fab-ios-list-button-background-color;
3637
}
3738

3839
.fab-ios.fab-in-list.activated {
39-
background-color: $fab-ios-in-list-background-color-activated;
40+
background-color: $fab-ios-list-button-background-color-activated;
4041
}
4142

4243

‎src/components/fab/fab.md.scss‎

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

66
/// @prop - Box shadow of the FAB button
7-
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
7+
$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
88

99
/// @prop - Box shadow of the activated FAB button
10-
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
10+
$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
1111

1212
/// @prop - Background color of the button
13-
$fab-md-background-color: color($colors-md, primary) !default;
13+
$fab-md-background-color: color($colors-md, primary) !default;
1414

1515
/// @prop - Text color of the button
16-
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
16+
$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default;
1717

1818
/// @prop - Background color of the activated button
19-
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
19+
$fab-md-background-color-activated: color-shade($fab-md-background-color) !default;
2020

21-
/// @prop - Background color of the button
22-
$fab-md-in-list-background-color: color($colors-md, light) !default;
21+
/// @prop - Background color of the button in a list
22+
$fab-md-list-button-background-color: $fab-list-button-background-color !default;
2323

24-
/// @prop - Text color of the button
25-
$fab-md-in-list-text-color: color-contrast($colors-md, $fab-md-in-list-background-color) !default;
24+
/// @prop - Text color of the button in a list
25+
$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default;
2626

27-
/// @prop - Background color of the activated button
28-
$fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-background-color) !default;
27+
/// @prop - Background color of the activated button in a list
28+
$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default;
2929

3030

3131
.fab-md {
@@ -45,12 +45,12 @@ $fab-md-in-list-background-color-activated: color-shade($fab-md-in-list-backgrou
4545
}
4646

4747
.fab-md.fab-in-list {
48-
color: $fab-md-in-list-text-color;
49-
background-color: $fab-md-in-list-background-color;
48+
color: $fab-md-list-button-text-color;
49+
background-color: $fab-md-list-button-background-color;
5050
}
5151

5252
.fab-md.fab-wp.fab-in-list.activated {
53-
background-color: $fab-md-in-list-background-color-activated;
53+
background-color: $fab-md-list-button-background-color-activated;
5454
}
5555

5656

‎src/components/fab/fab.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@
44
// --------------------------------------------------
55

66
/// @prop - Width and height of the FAB button
7-
$fab-size: 56px !default;
7+
$fab-size: 56px !default;
88

99
/// @prop - Width and height of the FAB button mini
10-
$fab-mini-size: 40px !default;
10+
$fab-mini-size: 40px !default;
1111

1212
/// @prop - Margin of the FAB Container
13-
$fab-content-margin: 10px !default;
13+
$fab-content-margin: 10px !default;
1414

1515
/// @prop - Margin of the FAB List
16-
$fab-list-margin: 10px !default;
16+
$fab-list-margin: 10px !default;
17+
18+
/// @prop - Background color of the button in a list
19+
$fab-list-button-background-color: #f4f4f4 !default;
1720

1821

1922
.fab {

‎src/components/fab/fab.wp.scss‎

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

66
/// @prop - Background color of the button
7-
$fab-wp-background-color: color($colors-wp, primary) !default;
7+
$fab-wp-background-color: color($colors-wp, primary) !default;
88

99
/// @prop - Text color of the button
10-
$fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default;
10+
$fab-wp-text-color: color-contrast($colors-wp, $fab-wp-background-color) !default;
1111

1212
/// @prop - Background color of the activated button
13-
$fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default;
13+
$fab-wp-background-color-activated: color-shade($fab-wp-background-color) !default;
1414

15-
/// @prop - Background color of the button
16-
$fab-wp-in-list-background-color: color($colors-wp, light) !default;
15+
/// @prop - Background color of the button in a list
16+
$fab-wp-list-button-background-color: $fab-list-button-background-color !default;
1717

18-
/// @prop - Text color of the button
19-
$fab-wp-in-list-text-color: color-contrast($colors-wp, $fab-wp-in-list-background-color) !default;
18+
/// @prop - Text color of the button in a list
19+
$fab-wp-list-button-text-color: color-contrast($colors-wp, $fab-wp-list-button-background-color) !default;
2020

21-
/// @prop - Background color of the activated button
22-
$fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-background-color) !default;
21+
/// @prop - Background color of the activated button in a list
22+
$fab-wp-list-button-background-color-activated: color-shade($fab-wp-list-button-background-color) !default;
2323

2424

2525
.fab-wp {
@@ -32,12 +32,12 @@ $fab-wp-in-list-background-color-activated: color-shade($fab-wp-in-list-backgrou
3232
}
3333

3434
.fab-wp.fab-in-list {
35-
color: $fab-wp-in-list-text-color;
36-
background-color: $fab-wp-in-list-background-color;
35+
color: $fab-wp-list-button-text-color;
36+
background-color: $fab-wp-list-button-background-color;
3737
}
3838

3939
.fab-wp.fab-in-list.activated {
40-
background-color: $fab-wp-in-list-background-color-activated;
40+
background-color: $fab-wp-list-button-background-color-activated;
4141
}
4242

4343

‎src/components/input/input.ios.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ $text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight
4343
$text-input-ios-highlight-color: color($colors-ios, primary) !default;
4444

4545
/// @prop - Color of the input highlight when valid
46-
$text-input-ios-highlight-color-valid: color($colors-ios, secondary) !default;
46+
$text-input-ios-highlight-color-valid: $text-input-highlight-color-valid !default;
4747

4848
/// @prop - Color of the input highlight when invalid
49-
$text-input-ios-highlight-color-invalid: color($colors-ios, danger) !default;
49+
$text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !default;
5050

5151

5252
// iOS Default Input

‎src/components/input/input.md.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ $text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight
4343
$text-input-md-highlight-color: color($colors-md, primary) !default;
4444

4545
/// @prop - Color of the input highlight when valid
46-
$text-input-md-highlight-color-valid: color($colors-md, secondary) !default;
46+
$text-input-md-highlight-color-valid: $text-input-highlight-color-valid !default;
4747

4848
/// @prop - Color of the input highlight when invalid
49-
$text-input-md-highlight-color-invalid: color($colors-md, danger) !default;
49+
$text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid !default;
5050

5151

5252
// Material Design Default Input

‎src/components/input/input.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
@import "../../themes/ionic.globals";
22

3+
// Input
4+
// --------------------------------------------------
5+
6+
/// @prop - Color of the input highlight when valid
7+
$text-input-highlight-color-valid: #32db64 !default;
8+
9+
/// @prop - Color of the input highlight when invalid
10+
$text-input-highlight-color-invalid: #f53d3d !default;
11+
12+
313
// Input/Textarea Wrapper
414
// --------------------------------------------------
515

‎src/components/input/input.wp.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ $text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight
5858
$text-input-wp-highlight-color: color($colors-wp, primary) !default;
5959

6060
/// @prop - Color of the input highlight when valid
61-
$text-input-wp-highlight-color-valid: color($colors-wp, secondary) !default;
61+
$text-input-wp-highlight-color-valid: $text-input-highlight-color-valid !default;
6262

6363
/// @prop - Color of the input highlight when invalid
64-
$text-input-wp-highlight-color-invalid: color($colors-wp, danger) !default;
64+
$text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid !default;
6565

6666

6767
// Windows Default Input

‎src/themes/ionic.functions.scss‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@
7676
@return mix($shade, $color-value, $amount);
7777
}
7878

79-
@function color-error($color-value) {
80-
@error "
79+
@function color-error($color-value, $color-name: null) {
80+
$error-msg: "
8181
8282
The value `#{$color-value}` must be a color.
8383
If you are setting the value as a map make sure
@@ -90,7 +90,25 @@
9090
secondary: (base: #32db64, contrast: #000),
9191
);";
9292

93-
@return false;
93+
// If there was a name passed it means the value doesn't exist
94+
// so error that the value isn't defined
95+
@if ($color-name) {
96+
$error-msg: "
97+
98+
The map color `#{$color-name}` is not defined.
99+
Please make sure the color exists in your
100+
`$colors` map.
101+
102+
For example:
103+
104+
$colors: (
105+
#{$color-name}: #327eff
106+
);";
107+
}
108+
109+
@error $error-msg;
110+
111+
@return null;
94112
}
95113

96114
// Copy Colors Map
@@ -162,8 +180,12 @@
162180
}
163181
}
164182

165-
// If it isn't a map then return the value
166-
@return $color-value;
183+
// If the value is a color then return the value
184+
// otherwise we need to error with the name
185+
@if (type-of($color-value) == color) {
186+
@return $color-value;
187+
}
188+
@return color-error($color-value, $color-name);
167189
}
168190

169191
// Get the color map key based on the value

‎src/themes/ionic.theme.dark.ios.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ $card-ios-header-color: #ddd !default;
2727
// iOS Note
2828
// --------------------------------------------------
2929

30-
$item-ios-note-color: color($colors-ios, light) !default;
30+
$item-ios-note-color: #f4f4f4 !default;
3131

3232

3333
// iOS Toolbar
@@ -72,4 +72,4 @@ $item-ios-padding-icon-bottom: 9px !default;
7272
// iOS Toggle
7373
// --------------------------------------------------
7474

75-
$toggle-ios-handle-background-color: color($colors-ios, light) !default;
75+
$toggle-ios-handle-background-color: #f4f4f4 !default;

0 commit comments

Comments
 (0)