Skip to content

Commit

Permalink
Merge pull request #2272 from SpareBank1/darkmode-header
Browse files Browse the repository at this point in the history 
flytter dm-variabler inn til theme, header
  • Loading branch information
@tuva-odegard
tuva-odegard authored Sep 9, 2024
2 parents b1287d2 + 20e5e13 commit 1d0b6d6
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 121 deletions.
1 change: 1 addition & 0 deletions component-overview/examples/header/header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ import classNames from 'classnames';
<path
d="M8.33 31.303c-3.668 0-6.576-.845-7.112-1.014-.283-.114-.424-.34-.424-.593v-.14l.367-1.86c.058-.283.255-.367.48-.367.058 0 .114 0 .2.028.592.113 3.47.93 6.18.93 2.315 0 4.375-.677 4.375-3.072 0-2.424-2.117-2.677-4.855-3.072-3.048-.45-6.97-1.268-6.97-6.06 0-4.93 3.668-6.228 8.015-6.228 3.302 0 6.04.79 6.66.96.34.083.51.31.51.59v.142l-.396 1.83c-.03.198-.226.396-.452.396-.028 0-.057-.028-.085-.028-1.355-.282-3.444-.846-5.928-.846-2.09 0-4.29.395-4.29 2.762 0 2.34 2.37 2.677 4.883 3.044 3.303.507 7.057.986 7.057 6.228 0 4.932-4.008 6.37-8.214 6.37M44.195 30.966c-.988.225-2.343.393-3.923.393-3.05 0-6.803-.31-6.803-4.79 0-3.637 2.286-4.03 4.544-4.398l5.025-.817v-.902c0-.79-.087-1.353-.793-1.662-.45-.197-1.13-.28-2.144-.28-1.92 0-4.01.562-4.855.788-.085 0-.14.028-.198.028-.14 0-.282-.057-.31-.254l-.396-1.747v-.113c0-.253.198-.366.34-.423.677-.254 3.273-.96 6.153-.96 2.003 0 3.358.283 4.262.79 1.438.79 1.72 2.114 1.72 3.636v7.778c0 2.114-.705 2.48-2.625 2.932zm-1.156-7.16l-3.502.565c-1.157.17-2.23.34-2.23 2.17 0 2.2 1.778 2.368 3.134 2.368 1.1 0 2.003-.197 2.597-.395v-4.706zM56.89 18.734c-1.72 0-3.188.17-3.98.366v11.47c0 .254-.168.424-.422.424h-2.88c-.17 0-.48-.17-.48-.423V18.397c0-1.1.65-1.437 2.005-1.832 1.242-.395 3.246-.676 4.855-.705h.48c.395 0 .395 0 .593.084.114.056.255.17.255.45v1.832c0 .283-.03.508-.424.508M71.665 24.68c0 .31-.17.65-.593.65h-9.456c0 1.296.367 2 1.13 2.59.733.593 1.806.846 3.33.846 1.75 0 3.077-.422 3.952-.676.057-.028.085-.028.14-.028.17 0 .312.113.396.395l.367 1.437c0 .028.03.085.03.14 0 .227-.142.34-.34.424-.96.395-2.878.9-5.108.9-5.532 0-7.706-2.17-7.706-7.692 0-5.298 1.467-7.835 6.972-7.835 2.85 0 4.6.734 5.617 2.087.96 1.268 1.27 3.072 1.27 5.41v1.354zm-3.98-4.2c-.367-1.55-1.214-2.056-2.878-2.056-1.892 0-2.683.564-2.993 1.972-.198.79-.198 1.608-.225 2.537l6.32-.028c0-.9-.027-1.663-.225-2.424zM103.776 30.966c-.988.225-2.343.393-3.923.393-3.05 0-6.803-.31-6.803-4.79 0-3.637 2.286-4.03 4.545-4.398l5.024-.817v-.902c0-.79-.086-1.353-.79-1.662-.453-.197-1.13-.28-2.146-.28-1.92 0-4.01.562-4.856.788-.085 0-.14.028-.197.028-.14 0-.28-.057-.31-.254l-.395-1.747v-.113c0-.253.197-.366.338-.423.678-.254 3.275-.96 6.154-.96 2.004 0 3.36.283 4.262.79 1.44.79 1.72 2.114 1.72 3.636v7.778c0 2.114-.705 2.48-2.624 2.932zm-1.157-7.16l-3.5.565c-1.16.17-2.23.34-2.23 2.17 0 2.2 1.777 2.368 3.13 2.368 1.102 0 2.006-.197 2.6-.395v-4.706zM121.497 30.994h-2.908c-.255 0-.452-.17-.452-.423v-9.948c0-1.634-.622-2.198-2.117-2.198-1.693 0-3.528.48-3.528.48V30.57c0 .254-.17.424-.423.424h-2.88c-.283 0-.48-.17-.48-.423V18.425c0-1.07.536-1.438 2.117-1.86 1.44-.395 3.81-.733 5.617-.733 3.528 0 5.476.903 5.476 4.285V30.57c0 .254-.17.424-.423.424M137.865 30.74c0 .113-.113.254-.283.254H133.8c-.14 0-.282 0-.424-.17L129 24.877h-.96v5.694c0 .254-.14.424-.42.424h-2.91c-.252 0-.45-.17-.45-.423v-19.7c0-.337.14-.506.48-.59l2.765-.48h.114c.252 0 .42.17.42.48v12.06h.96l4.46-5.945c.114-.17.227-.197.368-.197l3.444.084c.198 0 .282.14.282.254 0 .056-.028.085-.056.14l-5.335 6.708 5.646 7.215c.027.027.055.084.055.14M26.125 15.83c-1.89 0-4.065.31-5.76.903-1.27.395-1.776.817-1.776 2.283V36.46c0 .283.22.513.627.44l2.674-.492c.34-.057.48-.225.48-.564V30.93c1.003.244 2.266.43 3.67.43 5.25 0 6.238-3.298 6.238-7.75 0-4.48-.705-7.78-6.153-7.78zm-1.073 12.936c-1.524 0-2.68-.337-2.68-.337v-9.5s1.664-.45 2.962-.45c2.146 0 3.077.48 3.077 5.046 0 4.283-.79 5.24-3.358 5.24zM84.07 30.994h-9.4c-.253 0-.48-.198-.48-.45V10.616c0-.253.227-.45.48-.45h9.43c4.772 0 6.717 1.868 6.717 5.252 0 2.986-1.662 4.056-4.234 4.79 2.855.47 4.94 2.02 4.94 5.344 0 3.777-2.654 5.44-7.453 5.44zm-.367-17.925h-5.447v6.03l5.25-.225c2.146-.084 3.246-.846 3.246-2.987 0-1.973-.96-2.82-3.05-2.82zm-.14 8.764l-5.307-.17v6.426h5.307c2.85 0 3.782-1.24 3.782-2.96 0-2.31-.762-3.21-3.782-3.296z"
fill="#002776"
className="ffe-header__logo-text"
/>
</g>
</svg>
Expand Down
6 changes: 3 additions & 3 deletions component-overview/webapp/components/Navigation/InpageNav.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { title } from 'case';
import { LinkText } from '@sb1/ffe-core-react';

export default function InpageNav({
sections,
Expand All @@ -14,13 +15,12 @@ export default function InpageNav({
{sections.map(section => (
<li key={section} className="sb1ex-inpage-nav__list-item">
{filteredSections.includes(section) ? (
<a
<LinkText
href={`#toc_${section}`}
className="sb1ex-inpage-nav__link"
{...conditionalTabIndex}
>
{title(section)}
</a>
</LinkText>
) : (
title(section)
)}
Expand Down
20 changes: 10 additions & 10 deletions component-overview/webapp/styles/prefers-color-scheme-dark.css
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
/* stylelint-disable selector-class-pattern */
@media (prefers-color-scheme: dark) {
body.regard-color-scheme-preference {
.regard-color-scheme-preference {
color: var(--ffe-farge-hvit);
background-color: var(--ffe-farge-svart);

& a:not(h1, h2, h3, h4, h5, h6) {
color: var(--ffe-farge-vann-70);
}

& a:not(h1, h2, h3, h4, h5, h6):hover {
color: var(--ffe-farge-vann-30);
}
--default-link-color: var(--ffe-farge-vann-70);

& a:not(h1, h2, h3, h4, h5, h6):visited {
color: var(--ffe-farge-lyng-70);
:where(a:not(h1, h2, h3, h4, h5, h6)) {
color: var(--default-link-color);
&:hover {
--default-link-color: var(--ffe-farge-vann-30);
}
&:visited {
--default-link-color: var(--ffe-farge-lyng-70);
}
}
}
}
Expand Down
12 changes: 0 additions & 12 deletions component-overview/webapp/styles/sb1ex-toc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,17 +60,5 @@

.sb1ex-inpage-nav__list-item {
margin: 0 0 var(--ffe-spacing-xs) 0;
color: var(--ffe-farge-moerkgraa);
}

.sb1ex-inpage-nav__link {
display: inline-block;
color: var(--ffe-farge-fjell);
text-decoration: none;
cursor: pointer;
padding: var(--ffe-spacing-2xs) 0;
&:hover {
color: var(--ffe-farge-vann);
}
}
/* stylelint-enable selector-class-pattern */
77 changes: 6 additions & 71 deletions packages/ffe-header/less/ffe-header.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,12 @@
padding: var(--ffe-spacing-xs);
}
}

&-text {
fill: var(
--ffe-v-header-logo-color
); //not everyone will have this setup, but it will set a good example
}
}

&__logo-svg {
Expand Down Expand Up @@ -535,75 +541,4 @@
}
}

@media (prefers-color-scheme: dark) {
.regard-color-scheme-preference {
.ffe-header {
&__user-nav {
.ffe-header__link {
@media (hover: hover) and (pointer: fine) {
&:hover {
color: var(
--ffe-v-usernav-header-link-hover-focus-color
);
}
}

&:focus {
color: var(
--ffe-v-usernav-header-link-hover-focus-color
);
box-shadow: none;
}
}
}

&__link {
transition: all var(--ffe-transition-duration) var(--ffe-ease);

&:link,
&:visited,
&:active {
color: var(--ffe-v-link-color);
}

@media (hover: hover) and (pointer: fine) {
&:hover {
color: var(--ffe-v-link-hover-color);
}
}

&--active:link,
&--active:visited {
color: var(--ffe-v-primary-color);
}

&--active::after {
border-bottom: 2px solid var(--ffe-v-primary-color);
}

&--active:focus::after {
border-bottom: 0;
}

&:focus {
box-shadow: 0 0 0 2px
var(--ffe-v-link-focus-box-shadow-color);
}

&:focus:not(:focus-visible) {
box-shadow: none;
color: var(--ffe-v-primary-color);
}
}

&__logout-button {
&:focus::after:extend(.ffe-button:focus::after) {
box-shadow: 0 0 0 2px
var(--ffe-v-link-focus-box-shadow-color);
}
}
}
}
}

// stylelint-enable block-no-empty
56 changes: 31 additions & 25 deletions packages/ffe-header/less/theme.less
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,44 @@
:root,
:host {
--ffe-v-background-color: @ffe-farge-hvit;
--ffe-v-primary-color: @ffe-farge-fjell;
--ffe-v-header-border-bottom-color: @ffe-farge-lysgraa;
--ffe-v-link-color: @ffe-farge-svart;
--ffe-v-link-hover-color: @ffe-farge-vann;
--ffe-v-link-focus-box-shadow-color: @ffe-farge-vann;
--ffe-v-link-disabled-color: @ffe-farge-moerkgraa;
--ffe-v-notification-bubble-background-color: @ffe-farge-skog;
--ffe-v-notification-bubble-text-color: @ffe-farge-hvit;
--ffe-v-background-color: var(--ffe-farge-hvit);
--ffe-v-primary-color: var(--ffe-farge-fjell);
--ffe-v-header-border-bottom-color: var(--ffe-farge-lysgraa);
--ffe-v-header-logo-color: var(--ffe-farge-fjell);
--ffe-v-link-color: var(--ffe-farge-svart);
--ffe-v-link-hover-color: var(--ffe-farge-vann);
--ffe-v-link-focus-box-shadow-color: var(--ffe-farge-vann);
--ffe-v-link-disabled-color: var(--ffe-farge-moerkgraa);
--ffe-v-notification-bubble-background-color: var(--ffe-farge-skog);
--ffe-v-notification-bubble-text-color: var(--ffe-farge-hvit);
--ffe-v-font-strong: 'SpareBank1-medium', arial, sans-serif;

/* User nav menu */
--ffe-v-usernav-link-hover-background-color: @ffe-farge-frost-30;
--ffe-v-usernav-link-focus-background-color: @ffe-farge-frost-30;
--ffe-v-usernav-list-border-color: @ffe-farge-vann;
--ffe-v-logout-button-label-color-text: @ffe-farge-vann;
--ffe-v-usernav-link-hover-background-color: var(--ffe-farge-frost-30);
--ffe-v-usernav-link-focus-background-color: var(--ffe-farge-frost-30);
--ffe-v-usernav-list-border-color: var(--ffe-farge-vann);
--ffe-v-logout-button-label-color-text: var(--ffe-farge-vann);

@media (prefers-color-scheme: dark) {
.regard-color-scheme-preference {
--ffe-v-background-color: @ffe-farge-svart;
--ffe-v-primary-color: @ffe-farge-vann-70;
--ffe-v-header-border-bottom-color: @ffe-farge-moerkgraa;
--ffe-v-link-color: @ffe-farge-varmgraa;
--ffe-v-link-hover-color: @ffe-farge-vann-70;
--ffe-v-link-focus-box-shadow-color: @ffe-farge-hvit;
--ffe-v-notification-bubble-background-color: @ffe-farge-skog-30;
--ffe-v-notification-bubble-text-color: @ffe-farge-svart;
--ffe-v-background-color: var(--ffe-farge-svart);
--ffe-v-primary-color: var(--ffe-farge-vann-70);
--ffe-v-header-border-bottom-color: var(--ffe-farge-moerkgraa);
--ffe-v-header-logo-color: var(--ffe-farge-hvit);
--ffe-v-link-color: var(--ffe-farge-varmgraa);
--ffe-v-link-hover-color: var(--ffe-farge-hvit);
--ffe-v-link-focus-box-shadow-color: var(--ffe-farge-hvit);
--ffe-v-notification-bubble-background-color: var(
--ffe-farge-skog-30
);
--ffe-v-notification-bubble-text-color: var(--ffe-farge-svart);

/* User nav menu */
--ffe-v-usernav-link-hover-background-color: @ffe-farge-vann-30;
--ffe-v-usernav-list-border-color: @ffe-farge-vann-70;
--ffe-v-usernav-header-link-hover-focus-color: @ffe-farge-svart;
--ffe-v-logout-button-label-color-text: @ffe-farge-vann-30;
--ffe-v-usernav-link-hover-background-color: var(--ffe-farge-fjell);
--ffe-v-usernav-list-border-color: var(--ffe-farge-vann-70);
--ffe-v-usernav-header-link-hover-focus-color: var(
--ffe-farge-svart
);
--ffe-v-logout-button-label-color-text: var(--ffe-farge-vann-30);
}
}
}

0 comments on commit 1d0b6d6

Please sign in to comment.