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

Legg til hvit farge-variant og andre design tweaks #1300

Merged
merged 7 commits into from
Jan 28, 2022
Merged

Legg til hvit farge-variant og andre design tweaks #1300

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
01f5593
feat(ffe-message-box-react): legg til alt styling for fargede bakgrunner
HeleneKassandra Dec 20, 2021
f7578c8
feat(ffe-message-box): legg til alt styling og farge tweaks
HeleneKassandra Dec 20, 2021
d650af9
feat(component-overview): oppdater eksempler for meldingsbokser
HeleneKassandra Dec 20, 2021
120a38f
feat(ffe-system-message-react): legg til alternativ versjon for farge…
HeleneKassandra Jan 6, 2022
9d5e4ad
feat(ffe-system-message): oppdater farger og legg til alternativ variant
HeleneKassandra Jan 6, 2022
1d7fea2
feat(ffe-context-message-react): fjern custom ikon og legg til ny prop
HeleneKassandra Jan 10, 2022
c470f0a
feat(ffe-context-message): farge tweaks og styling for bruk på farget…
HeleneKassandra Jan 10, 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
Prev Previous commit
Next Next commit
feat(ffe-system-message): oppdater farger og legg til alternativ variant 
små farge endringer for å sikre god nok kontrast. Legger også til en ny klasse
som gir system meldinger hvit bakgrunn i lightmode. Denne brukes der
man ønsker å bruke systemmelding på farget bakgrunn og sliter med å få god nok
kontrast med "standard" varianten
  • Loading branch information
@HeleneKassandra
HeleneKassandra committed Jan 17, 2022
commit 9d5e4ad0b01ae019e50ba3e069d953947b3554b3
85 changes: 61 additions & 24 deletions packages/ffe-system-message/less/ffe-system-message.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,45 +32,86 @@
overflow: hidden;
border-radius: 5px;

&--error&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-baer-30;
}
}
}
&--error {
background-color: @ffe-farge-baer-30;
fill: @ffe-farge-baer-wcag;
fill: @ffe-farge-hvit;

.ffe-system-message__icon {
background: @ffe-farge-baer;
}
}

&--info&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-baer;
background-color: @ffe-farge-vann-30;
}
}
}

&--info {
background-color: @ffe-farge-frost-30;
fill: @ffe-farge-fjell;
fill: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-vann-30;
fill: @ffe-farge-vann-70;
}
}
.ffe-system-message__icon {
background: @ffe-farge-vann;
}
}

&--news&--coloredbg {
background-color: @ffe-farge-hvit;
color: @ffe-farge-svart;
fill: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
background-color: @ffe-farge-koksgraa;
color: @ffe-farge-hvit;
fill: @ffe-farge-fjell;
}
}
.ffe-system-message__icon {
background: @ffe-farge-fjell;
.native & {
@media (prefers-color-scheme: dark) {
background: @ffe-farge-hvit;
}
}
}
}
&--news {
background-color: @ffe-farge-moerkgraa;
background-color: @ffe-farge-koksgraa;
color: @ffe-white;
fill: @ffe-farge-fjell;
.ffe-system-message__icon {
background: @ffe-farge-hvit;
}
}

&--success&--coloredbg {
background-color: @ffe-farge-hvit;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-vann-70;
background: @ffe-farge-nordlys-30;
}
}
}

&--success {
background-color: @ffe-farge-nordlys-30;
fill: @ffe-farge-nordlys-wcag;
.native & {
@media (prefers-color-scheme: dark) {
fill: @ffe-farge-nordlys;
}
fill: @ffe-farge-hvit;
.ffe-system-message__icon {
background: @ffe-farge-nordlys-wcag;
}
}
}
Expand All @@ -91,11 +132,7 @@
height: 2rem;
width: 2rem;
margin-right: @ffe-spacing-sm;
.native & {
@media (prefers-color-scheme: dark) {
background: @ffe-farge-svart;
}
}

> svg {
height: 50%;
position: relative;
Expand Down Expand Up @@ -124,10 +161,10 @@
color: inherit;
cursor: pointer;
align-self: flex-start;
width: 1em;
height: 1em;
padding: @ffe-spacing-sm;
box-sizing: content-box;
width: 3rem;
height: 3rem;
padding-top: @ffe-spacing-xs;
box-sizing: border-box;
fill: @ffe-farge-moerkgraa;

&:hover {
Expand All @@ -137,8 +174,8 @@
border: 2px solid @ffe-farge-vann;
}
> svg {
height: 100%;
width: 100%;
height: 1rem;
width: 1rem;
.native & {
@media (prefers-color-scheme: dark) {
fill: inherit;
Expand Down