From 36e25b13de8f86a541a8bcb1fa3da071c36f12e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= Date: Mon, 9 Sep 2024 10:54:04 +0200 Subject: [PATCH 1/2] =?UTF-8?q?fix(component-overview):=20legger=20til=20k?= =?UTF-8?q?lasse=20p=C3=A5=20logo=20for=20=C3=A5=20st=C3=B8tte=20darkmode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- component-overview/examples/header/header.jsx | 1 + .../components/Navigation/InpageNav.jsx | 6 +++--- .../styles/prefers-color-scheme-dark.css | 20 +++++++++---------- .../webapp/styles/sb1ex-toc.css | 12 ----------- 4 files changed, 14 insertions(+), 25 deletions(-) diff --git a/component-overview/examples/header/header.jsx b/component-overview/examples/header/header.jsx index 965eb5c82c..e6e9850548 100644 --- a/component-overview/examples/header/header.jsx +++ b/component-overview/examples/header/header.jsx @@ -66,6 +66,7 @@ import classNames from 'classnames'; diff --git a/component-overview/webapp/components/Navigation/InpageNav.jsx b/component-overview/webapp/components/Navigation/InpageNav.jsx index 2d5bab748b..dde670dd2b 100644 --- a/component-overview/webapp/components/Navigation/InpageNav.jsx +++ b/component-overview/webapp/components/Navigation/InpageNav.jsx @@ -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, @@ -14,13 +15,12 @@ export default function InpageNav({ {sections.map(section => (
  • {filteredSections.includes(section) ? ( - {title(section)} - + ) : ( title(section) )} diff --git a/component-overview/webapp/styles/prefers-color-scheme-dark.css b/component-overview/webapp/styles/prefers-color-scheme-dark.css index f66742d463..6b1e106f42 100644 --- a/component-overview/webapp/styles/prefers-color-scheme-dark.css +++ b/component-overview/webapp/styles/prefers-color-scheme-dark.css @@ -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); + } } } } diff --git a/component-overview/webapp/styles/sb1ex-toc.css b/component-overview/webapp/styles/sb1ex-toc.css index ad3dac87ba..017d05d1f4 100644 --- a/component-overview/webapp/styles/sb1ex-toc.css +++ b/component-overview/webapp/styles/sb1ex-toc.css @@ -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 */ From 20e5e1360819d335e9965d83a5f20095ab29e9fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tuva=20=C3=98deg=C3=A5rd?= Date: Mon, 9 Sep 2024 10:55:20 +0200 Subject: [PATCH 2/2] =?UTF-8?q?refactor(ffe-header):=20flytter=20variabler?= =?UTF-8?q?=20inn=20til=20theme=20for=20=C3=A5=20st=C3=B8tte=20semantiske?= =?UTF-8?q?=20variabler=20senere?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ffe-header/less/ffe-header.less | 77 ++---------------------- packages/ffe-header/less/theme.less | 56 +++++++++-------- 2 files changed, 37 insertions(+), 96 deletions(-) diff --git a/packages/ffe-header/less/ffe-header.less b/packages/ffe-header/less/ffe-header.less index c5b382a9d1..a18292db8f 100644 --- a/packages/ffe-header/less/ffe-header.less +++ b/packages/ffe-header/less/ffe-header.less @@ -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 { @@ -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 diff --git a/packages/ffe-header/less/theme.less b/packages/ffe-header/less/theme.less index 5b54087c0b..27a615d510 100644 --- a/packages/ffe-header/less/theme.less +++ b/packages/ffe-header/less/theme.less @@ -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); } } }