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

Jump to bottom

Add dark theme support to notifications #4971

Merged
merged 20 commits into from
Feb 13, 2024
Merged

Add dark theme support to notifications #4971

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
490c2f8
add theme colors to notifications
chillkang Feb 1, 2024
69cb39a
add dark theme setting on body element
chillkang Feb 2, 2024
9f0b54c
add border colors to highlight bars in light and dark theme notificat…
chillkang Feb 5, 2024
86c7b0a
use semantic colors for highlight bars and add dark theme support to …
chillkang Feb 5, 2024
1f8c926
use dark theme semantic colors for hightlight borders
chillkang Feb 5, 2024
96dd426
add temporary workaround until icons have proper theme support
chillkang Feb 5, 2024
2f6d077
tyding up
chillkang Feb 5, 2024
57296fe
rename theme variables and expose color-caution and color-information
chillkang Feb 7, 2024
1d9352a
change icon and highlight border colors for light and dark themes
chillkang Feb 8, 2024
f36da80
change color for notification--caution in light theme
chillkang Feb 8, 2024
2a4924c
fix prettier
chillkang Feb 8, 2024
aa14ab9
remove background and text color for borderless notification
chillkang Feb 9, 2024
16c05a0
change light theme tinted border caution color to #cc7900 and use col…
chillkang Feb 9, 2024
05f2350
include the situation when is-dark is set on component itself
chillkang Feb 9, 2024
ea1800c
extract block content to a separate file and import it in variant exa…
chillkang Feb 9, 2024
2a89e58
update selectors when is-dark is set on component itself
chillkang Feb 12, 2024
f0e7096
change meta tag and link colors
chillkang Feb 12, 2024
19bca03
remove jinja template tags
chillkang Feb 12, 2024
e6a3fc9
add standalone stylesheet to notification examples
chillkang Feb 13, 2024
2cce8b3
change link colors to css variables
chillkang Feb 13, 2024
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
69 changes: 58 additions & 11 deletions scss/_patterns_notifications.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,12 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
@extend %vf-is-bordered;
@extend %vf-bg--x-light;

background: $colors--theme--background-default;
background-position: $sph--large $notification-icon-vert-offset;
background-repeat: no-repeat;
background-size: map-get($icon-sizes, default);
border-color: $colors--theme--border-default;
color: $colors--theme--text-default;
margin-bottom: $spv--x-large;
padding-bottom: calc($spv--small - 1px);
padding-left: $notification-content-icon-space;
Expand All @@ -90,7 +93,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
}

&.is-borderless {
background-color: transparent;
background-position: 0 $borderless-notification-icon-vert-offset;
border: none;
margin-top: 0;
Expand Down Expand Up @@ -158,6 +160,12 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
right: $sph--large * 0.5;
top: $spv--small;
width: $default-icon-size;

// FIXME: temporary workaround until icons have proper theme support
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
body.is-dark & {
chillkang marked this conversation as resolved.
Show resolved Hide resolved
@include vf-icon-close(rgba($colors--dark-theme--text-default, 0.3));
}
}

.p-notification__meta {
Expand All @@ -174,6 +182,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
.p-notification__timestamp {
@extend %default-text;
@extend %muted-text;

color: $colors--theme--text-default;
}

.p-notification__actions {
Expand All @@ -187,6 +197,8 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;

.p-notification__action {
@extend %default-text;

color: $colors--theme--text-default;
}

.p-notification__action + .p-notification__action {
Expand All @@ -205,43 +217,78 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
@mixin vf-notifications-default {
.p-notification {
@extend %vf-notification;
@include vf-highlight-bar($color-information, left, true);
@include vf-icon-info($color-mid-dark);
@include vf-highlight-bar($colors--theme--border-information, left, true);
@include vf-icon-info($color: map-get($colors-light-theme--tinted-borders, information));
}

// FIXME: temporary workaround until icons have proper theme support
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
.p-notification.is-dark,
body.is-dark .p-notification {
@include vf-icon-info($color: map-get($colors-dark-theme--tinted-borders, information));
}
}

// Positive notification styling
@mixin vf-notifications-positive {
.p-notification--positive {
@extend %vf-notification;
@include vf-highlight-bar($color-positive, left, true);
@include vf-icon-success;
@include vf-highlight-bar($colors--theme--border-positive, left, true);
@include vf-icon-success($color: map-get($colors-light-theme--tinted-borders, positive));
}

// FIXME: temporary workaround until icons have proper theme support
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
.p-notification--positive.is-dark,
body.is-dark .p-notification--positive {
@include vf-icon-success(map-get($colors-dark-theme--tinted-borders, positive), $colors--dark-theme--background-default);
}
}

// Caution notification styling
@mixin vf-notifications-caution {
.p-notification--caution {
@extend %vf-notification;
@include vf-highlight-bar($color-caution, left, true);
@include vf-icon-warning;
@include vf-highlight-bar($colors--theme--border-caution, left, true);
@include vf-icon-warning($color: map-get($colors-light-theme--tinted-borders, caution));
}

// FIXME: temporary workaround until icons have proper theme support
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
.p-notification--caution.is-dark,
body.is-dark .p-notification--caution {
@include vf-icon-warning(map-get($colors-dark-theme--tinted-borders, caution), $colors--dark-theme--background-default);
}
}

// Negative notification styling
@mixin vf-notifications-negative {
bartaz marked this conversation as resolved.
Show resolved Hide resolved
.p-notification--negative {
@extend %vf-notification;
@include vf-highlight-bar($color-negative, left, true);
@include vf-icon-error;
@include vf-highlight-bar($colors--theme--border-negative, left, true);
@include vf-icon-error($color: map-get($colors-light-theme--tinted-borders, negative));
}

// FIXME: temporary workaround until icons have proper theme support
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
.p-notification--negative.is-dark,
body.is-dark .p-notification--negative {
@include vf-icon-error(map-get($colors-dark-theme--tinted-borders, negative), $colors--dark-theme--background-default);
}
}

// Information notification styling
@mixin vf-notifications-information {
.p-notification--information {
@extend %vf-notification;
@include vf-highlight-bar($color-information, left, true);
@include vf-icon-info($color-mid-dark);
@include vf-highlight-bar($colors--theme--border-information, left, true);
@include vf-icon-info($color: map-get($colors-light-theme--tinted-borders, information));
}

// FIXME: temporary workaround until icons have proper theme support
// stylelint-disable-next-line selector-max-type -- base styles can use type selectors
.p-notification--information.is-dark,
body.is-dark .p-notification--information {
chillkang marked this conversation as resolved.
Show resolved Hide resolved
@include vf-icon-info($color: map-get($colors-dark-theme--tinted-borders, information));
}
}
2 changes: 1 addition & 1 deletion scss/_settings_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ $colors-light-theme--tinted-backgrounds: (
$colors-light-theme--tinted-borders: (
neutral: $colors--light-theme--border-high-contrast,
positive: $color-positive,
caution: hsl(27deg 100% 39%),
caution: #cc7900,
negative: $color-negative,
information: $color-information,
);
Expand Down
215 changes: 215 additions & 0 deletions templates/docs/examples/patterns/notifications/_variants.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
{% extends "_layouts/examples.html" %}
{% block title %}Notifications / Variants{% endblock %}

{% block standalone_css %}patterns_notifications{% endblock %}

{% block style %}
<link rel="stylesheet" href="{{ versioned_static('build/css/standalone/patterns_icons-additional.css') }}" />
{% endblock %}

{% block content %}

<h5>Borderless</h5>
chillkang marked this conversation as resolved.
Show resolved Hide resolved
<div class="p-notification--caution is-borderless">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>

<h5>Borderless inline</h5>
<div class="p-notification--caution is-borderless is-inline">
<div class="p-notification__content">
<h5 class="p-notification__title">Title:</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>

<h5>Dismissible</h5>
<div class="p-notification" id="notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
<button
aria-controls="notification"
aria-label="Close notification"
class="p-notification__close"
>
Close
</button>
</div>
</div>

<h5>Multiline</h5>
<div class="p-notification--negative">
<div class="p-notification__content">
<h5 class="p-notification__title">Title:</h5>
<p class="p-notification__message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat pretium facilisis. Phasellus cursus neque vel elementum pharetra. Cras maximus neque non mi fermentum, vel ultrices sem rutrum. Aliquam ornare nulla et justo fermentum tincidunt. Duis in enim nec velit consequat sollicitudin ac eget arcu. Proin id leo nunc. Donec varius sem et mattis cursus.
</p>
</div>
</div>

<h5>Inline multiline</h5>
<div class="p-notification--caution is-inline">
<div class="p-notification__content">
<h5 class="p-notification__title">Title:</h5>
<p class="p-notification__message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat pretium facilisis. Phasellus cursus neque vel elementum pharetra. Cras maximus neque non mi fermentum, vel ultrices sem rutrum. Aliquam ornare nulla et justo fermentum tincidunt. Duis in enim nec velit consequat sollicitudin ac eget arcu. Proin id leo nunc. Donec varius sem et mattis cursus.
</p>
</div>
</div>

<h5>Meta - Action buttons</h5>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
<div class="p-notification__meta">
<div class="p-notification__actions">
<a href="#" class="p-notification__action">Cancel</a>
<a href="#" class="p-notification__action">Confirm</a>
</div>
</div>
</div>

<h5>Meta - Action links</h5>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
<button class="p-notification__close">Close</button>
</div>
<div class="p-notification__meta">
<div class="p-notification__actions">
<a class="p-notification__action">Link 1</a>
<a class="p-notification__action">Link 2</a>
</div>
</div>
</div>

<h5>Meta - Date</h5>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
<div class="p-notification__meta">
<span class="p-notification__timestamp">1h ago</span>
</div>
</div>

<h5>Meta - Date + action buttons</h5>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
<div class="p-notification__meta">
<span class="p-notification__timestamp">1h ago</span>
<div class="p-notification__actions">
<a href="#" class="p-notification__action">Cancel</a>
<a href="#" class="p-notification__action">Confirm</a>
</div>
</div>
</div>

<h5>Meta - Date + action links</h5>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
<div class="p-notification__meta">
<span class="p-notification__timestamp">1h ago</span>
<div class="p-notification__actions">
<a href="#" class="p-notification__action">Link 1</a>
<a href="#" class="p-notification__action">Link 2</a>
</div>
</div>
</div>

<h5>No title</h5>
<div class="p-notification">
<div class="p-notification__content">
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>

<h5>Spacing</h5>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>
<div class="p-notification is-borderless">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>
<div class="p-notification is-borderless">
<div class="p-notification__content">
<h5 class="p-notification__title">Title</h5>
<p class="p-notification__message">
Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
</p>
</div>
</div>

<script>
/**
Attaches event listener for hide notification on close button click.
@param {HTMLElement} closeButton The notification close button element.
*/
function setupCloseButton(closeButton) {
closeButton.addEventListener('click', function(event) {
var target = event.target.getAttribute('aria-controls');
var notification = document.getElementById(target);

if (notification) {
notification.classList.add('u-hide');
}
});
}

// Set up all notification close buttons.
var closeButtons = document.querySelectorAll('.p-notification__close');

for (var i = 0, l = closeButtons.length; i < l; i++) {
setupCloseButton(closeButtons[i]);
}
</script>
{% endblock %}
13 changes: 13 additions & 0 deletions templates/docs/examples/patterns/notifications/notifications-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{% extends "_layouts/examples.html" %}
{% block title %}Notifications / Default dark{% endblock %}

{% block standalone_css %}patterns_notifications{% endblock %}

{% set is_dark = true %}
{% block content %}
<div class="p-notification">
<div class="p-notification__content">
<h5 class="p-notification__title">Cookie policy</h5>
<p class="p-notification__message">We use cookies to improve your experience. By your continued use of this site you accept such use.</p>
</div>
</div> {% endblock %}
12 changes: 12 additions & 0 deletions templates/docs/examples/patterns/notifications/variants-dark.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{% extends "_layouts/examples.html" %}
{% block title %}Notifications / Variants Dark{% endblock %}

{% block style %}
{% endblock %}

{% set is_dark = true %}
{% block content %}

{% include "/docs/examples/patterns/notifications/_variants.html" %}

{% endblock %}
Loading
Loading