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

Allow flag notification colors to be overridden #2361

Merged
merged 4 commits into from
Jun 24, 2022
Merged

Allow flag notification colors to be overridden #2361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1927fe
🐛 Allow flag notification colors to be overridden
jkaltoft Jun 21, 2022
f20eb5f
🐛 Assign contrast color directly (more or less)
jkaltoft Jun 23, 2022
7267169
💄 Use a list of color names instead of map
jkaltoft Jun 23, 2022
5acabbc
🔥 Remove unused Sass module import statement
jkaltoft Jun 23, 2022
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
6 changes: 6 additions & 0 deletions libs/core/src/scss/themes/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ $focus-ring-color: rgb(77 144 254);
$red-30: #ff878a;
$danger-background-weak: $red-30;

// Assigning the return value of function call
// _get-color-contrast($danger-background-weak) does not work.
// Could't find a solution. Decided to assign color directly
// (we know $danger-background-weak's contrast color should be kirby-black).
$danger-background-weak-contrast: map.get($system-colors, 'black');

@function get-all-colors() {
@return map.merge(map.merge($brand-colors, $notification-colors), $system-colors);
}
Expand Down
36 changes: 22 additions & 14 deletions libs/designsystem/src/lib/components/flag/flag.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use 'sass:list';
@use 'sass:map';
@use '~@kirbydesign/core/src/scss/utils';

Expand All @@ -22,19 +23,26 @@
}
}

@each $color-name,
$color-value
in map.merge(
utils.$notification-colors,
(
'semi-light': utils.get-color('semi-light'),
'danger': utils.$danger-background-weak,
)
)
{
:host(.#{$color-name}) {
--kirby-flag-background-color: #{$color-value};
--kirby-flag-color: #{utils.get-color($color-name + '-contrast')};
--kirby-flag-border-color: #{$color-value};
$_flag-notification-colors-map: map.remove(utils.$notification-colors, 'danger');
$_color-names: map.keys($_flag-notification-colors-map);
$_color-names: list.append($_color-names, 'semi-light');

@each $name in $_color-names {
:host(.#{$name}) {
// Use utils.get-color() to assign a custom property instead of a color value.
// Custom properties can be overridden in consumer projects.
--kirby-flag-background-color: #{utils.get-color($name)};
--kirby-flag-color: #{utils.get-color($name + '-contrast')};
--kirby-flag-border-color: #{utils.get-color($name)};
}
}

// <kirby-flag> uses a different "danger" notification color.
// Overriding `--kirby-danger` in a consumer project will not have any effect on
// the background color for danger flags.
// See https://github.com/kirbydesign/designsystem/issues/2041
:host(.danger) {
--kirby-flag-background-color: #{utils.$danger-background-weak};
--kirby-flag-color: #{utils.$danger-background-weak-contrast};
--kirby-flag-border-color: #{utils.$danger-background-weak};
}