Skip to content
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

fix(sass): remove usage of colors other than primary, improve error #8907

Merged
merged 5 commits into from
Nov 7, 2016
Merged

fix(sass): remove usage of colors other than primary, improve error #8907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0129d09
Merge branch 'master' into fix/colors-map
brandyscarney Oct 25, 2016
063a118
fix(sass): remove usage of colors other than primary, improve error
brandyscarney Oct 25, 2016
c6ce0d9
Merge branch 'master' into fix/colors-map
brandyscarney Nov 4, 2016
c9fdbf9
refactor(sass): add variables to override all modes for fab and input
brandyscarney Nov 4, 2016
0d58db9
refactor(fab): rename Sass variable from in-list to list-button
brandyscarney Nov 7, 2016
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
25 changes: 13 additions & 12 deletions src/components/fab/fab.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,23 @@
// --------------------------------------------------

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

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

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

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

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

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

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

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

.fab-ios.fab-in-list {
color: $fab-ios-in-list-text-color;
background-color: $fab-ios-in-list-background-color;
color: $fab-ios-list-button-text-color;
background-color: $fab-ios-list-button-background-color;
}

.fab-ios.fab-in-list.activated {
background-color: $fab-ios-in-list-background-color-activated;
background-color: $fab-ios-list-button-background-color-activated;
}


Expand Down
28 changes: 14 additions & 14 deletions src/components/fab/fab.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,28 @@
// --------------------------------------------------

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

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

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

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

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

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

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

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


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

.fab-md.fab-in-list {
color: $fab-md-in-list-text-color;
background-color: $fab-md-in-list-background-color;
color: $fab-md-list-button-text-color;
background-color: $fab-md-list-button-background-color;
}

.fab-md.fab-wp.fab-in-list.activated {
background-color: $fab-md-in-list-background-color-activated;
background-color: $fab-md-list-button-background-color-activated;
}


Expand Down
11 changes: 7 additions & 4 deletions src/components/fab/fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,19 @@
// --------------------------------------------------

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

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

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

/// @prop - Margin of the FAB List
$fab-list-margin: 10px !default;
$fab-list-margin: 10px !default;

/// @prop - Background color of the button in a list
$fab-list-button-background-color: #f4f4f4 !default;


.fab {
Expand Down
24 changes: 12 additions & 12 deletions src/components/fab/fab.wp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,22 @@
// --------------------------------------------------

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

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

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

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

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

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


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

.fab-wp.fab-in-list {
color: $fab-wp-in-list-text-color;
background-color: $fab-wp-in-list-background-color;
color: $fab-wp-list-button-text-color;
background-color: $fab-wp-list-button-background-color;
}

.fab-wp.fab-in-list.activated {
background-color: $fab-wp-in-list-background-color-activated;
background-color: $fab-wp-list-button-background-color-activated;
}


Expand Down
4 changes: 2 additions & 2 deletions src/components/input/input.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ $text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight
$text-input-ios-highlight-color: color($colors-ios, primary) !default;

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

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


// iOS Default Input
Expand Down
4 changes: 2 additions & 2 deletions src/components/input/input.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ $text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight
$text-input-md-highlight-color: color($colors-md, primary) !default;

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

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


// Material Design Default Input
Expand Down
10 changes: 10 additions & 0 deletions src/components/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
@import "../../themes/ionic.globals";

// Input
// --------------------------------------------------

/// @prop - Color of the input highlight when valid
$text-input-highlight-color-valid: #32db64 !default;

/// @prop - Color of the input highlight when invalid
$text-input-highlight-color-invalid: #f53d3d !default;


// Input/Textarea Wrapper
// --------------------------------------------------

Expand Down
4 changes: 2 additions & 2 deletions src/components/input/input.wp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ $text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight
$text-input-wp-highlight-color: color($colors-wp, primary) !default;

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

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


// Windows Default Input
Expand Down
32 changes: 27 additions & 5 deletions src/themes/ionic.functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@
@return mix($shade, $color-value, $amount);
}

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

@return false;
// If there was a name passed it means the value doesn't exist
// so error that the value isn't defined
@if ($color-name) {
$error-msg: "
The map color `#{$color-name}` is not defined.
Please make sure the color exists in your
`$colors` map.
For example:
$colors: (
#{$color-name}: #327eff
);";
}

@error $error-msg;

@return null;
}

// Copy Colors Map
Expand Down Expand Up @@ -162,8 +180,12 @@
}
}

// If it isn't a map then return the value
@return $color-value;
// If the value is a color then return the value
// otherwise we need to error with the name
@if (type-of($color-value) == color) {
@return $color-value;
}
@return color-error($color-value, $color-name);
}

// Get the color map key based on the value
Expand Down
4 changes: 2 additions & 2 deletions src/themes/ionic.theme.dark.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $card-ios-header-color: #ddd !default;
// iOS Note
// --------------------------------------------------

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


// iOS Toolbar
Expand Down Expand Up @@ -72,4 +72,4 @@ $item-ios-padding-icon-bottom: 9px !default;
// iOS Toggle
// --------------------------------------------------

$toggle-ios-handle-background-color: color($colors-ios, light) !default;
$toggle-ios-handle-background-color: #f4f4f4 !default;
4 changes: 2 additions & 2 deletions src/themes/ionic.theme.dark.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@ $item-md-padding-media-bottom: 9px !default;
$item-md-padding-icon-top: 11px !default;
$item-md-padding-icon-bottom: 10px !default;
$item-md-divider-background: #151515 !default;
$item-md-divider-color: color($colors-md, light) !default;
$item-md-divider-color: #f4f4f4 !default;


// Material Design Toggle
// ---------------------------------------------------
$toggle-md-handle-background-color-off: color($colors-md, light) !default;
$toggle-md-handle-background-color-off: #f4f4f4 !default;


// Ripple Color
Expand Down
2 changes: 1 addition & 1 deletion src/themes/ionic.theme.dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $content-padding: 16px !default;
$content-margin: 16px !default;

$toolbar-background: #151515 !default;
$toolbar-border-color: color($colors, dark) !default;
$toolbar-border-color: #222 !default;
$toolbar-text-color: $text-color !default;
$toolbar-active-color: $link-color !default;
$toolbar-inactive-color: #8c8c8c !default;
Expand Down
4 changes: 2 additions & 2 deletions src/themes/ionic.theme.dark.wp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,12 @@ $item-wp-padding-media-bottom: 9px !default;
$item-wp-padding-icon-top: 11px !default;
$item-wp-padding-icon-bottom: 10px !default;
$item-wp-divider-background: #151515 !default;
$item-wp-divider-color: color($colors-wp, light) !default;
$item-wp-divider-color: #f4f4f4 !default;


// Windows Toggle
// ---------------------------------------------------
$toggle-wp-handle-background-color-off: color($colors-wp, light) !default;
$toggle-wp-handle-background-color-off: #f4f4f4 !default;


// Windows Input
Expand Down