From 5c2a5e30cafa33382854ec91664ab6aff3ec96d9 Mon Sep 17 00:00:00 2001 From: tuva-odegard Date: Tue, 21 Jan 2025 10:18:00 +0100 Subject: [PATCH 1/3] =?UTF-8?q?feat(ffe-messages-react):=20fjerner=20oncol?= =?UTF-8?q?oredbg.=20BREAKING=20CHANGE:=20Fjerner=20onColoredBg.=20Bruk=20?= =?UTF-8?q?.ffe-accent-mode=20p=C3=A5=20omr=C3=A5det=20i=20stedet.=20Typen?= =?UTF-8?q?=20NEWS=20er=20ogs=C3=A5=20fjernet.=20Warning=20er=20introduser?= =?UTF-8?q?t.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ContextMessage.spec.tsx | 13 +--- .../src/ContextMessage.stories.tsx | 70 +++++++++++++++++- .../ffe-messages-react/src/ContextMessage.tsx | 6 +- .../src/MessageBox.spec.tsx | 13 +--- .../src/MessageBox.stories.tsx | 73 ++++++++++++++++++- .../ffe-messages-react/src/MessageBox.tsx | 8 +- .../src/SystemMessage.spec.tsx | 13 +--- .../src/SystemMessage.stories.tsx | 62 ++++++++++++++++ .../ffe-messages-react/src/SystemMessage.tsx | 8 +- packages/ffe-messages-react/src/texts.ts | 12 +-- packages/ffe-messages-react/src/types.ts | 2 +- 11 files changed, 215 insertions(+), 65 deletions(-) diff --git a/packages/ffe-messages-react/src/ContextMessage.spec.tsx b/packages/ffe-messages-react/src/ContextMessage.spec.tsx index 4aeae2557b..d32f081f57 100644 --- a/packages/ffe-messages-react/src/ContextMessage.spec.tsx +++ b/packages/ffe-messages-react/src/ContextMessage.spec.tsx @@ -9,7 +9,7 @@ describe('', () => { ['error', 'alert', 'Feilmelding'], ['success', 'group', 'Suksessmelding'], ['tips', 'group', 'Tipsmelding'], - ['news', 'group', 'Nyhetsmelding'], + ['warning', 'group', 'Advarsel'], ] as const)('should render each type %s', (type, role, name) => { render(); expect(screen.getByRole(role, { name })).toBeInTheDocument(); @@ -79,17 +79,6 @@ describe('', () => { expect(group.classList.contains('ffe-message--info')).toBeTruthy(); }); - it('should --colored-bg modifier classes ', () => { - render(); - const group = screen.getByRole('group'); - expect(group.classList.contains('ffe-message')).toBeTruthy(); - expect(group.classList.contains('ffe-message--context')).toBeTruthy(); - expect( - group.classList.contains('ffe-message--colored-bg'), - ).toBeTruthy(); - expect(group.classList.contains('ffe-message--info')).toBeTruthy(); - }); - it('should be closeable', async () => { render(); expect( diff --git a/packages/ffe-messages-react/src/ContextMessage.stories.tsx b/packages/ffe-messages-react/src/ContextMessage.stories.tsx index 7b85e2ec62..3d24afed73 100644 --- a/packages/ffe-messages-react/src/ContextMessage.stories.tsx +++ b/packages/ffe-messages-react/src/ContextMessage.stories.tsx @@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react'; import { ContextMessage } from './ContextMessage'; import { MessageHeader } from './MessageHeader'; import type { StoryObj, Meta } from '@storybook/react'; +import { LinkText } from '@sb1/ffe-core-react'; const meta: Meta = { title: 'Komponenter/Messages/ContextMessage', @@ -14,11 +15,76 @@ export default meta; type Story = StoryObj; +const messageArgs = { + closeButton: true, + header: 'Meldingstittel', +}; + export const Standard: Story = { args: { + ...messageArgs, + type: 'info', + }, + render: args => ( + + Kontekstuelle meldinger er informasjon som skal gis i en kontekst + Lenke + + ), +}; + +export const Info: Story = { + args: { + ...messageArgs, type: 'info', - closeButton: true, - header: 'Meldingstittel', + }, + render: args => ( + + Kontekstuelle meldinger er informasjon som skal gis i en kontekst + + ), +}; + +export const Tips: Story = { + args: { + ...messageArgs, + type: 'tips', + }, + render: args => ( + + Kontekstuelle meldinger er informasjon som skal gis i en kontekst + + ), +}; + +export const Success: Story = { + args: { + ...messageArgs, + type: 'success', + }, + render: args => ( + + Kontekstuelle meldinger er informasjon som skal gis i en kontekst + + ), +}; + +export const Warning: Story = { + args: { + ...messageArgs, + type: 'warning', + }, + render: args => ( + + Kontekstuelle meldinger er informasjon som skal gis i en kontekst + + ), +}; + +export const Error: Story = { + args: { + ...messageArgs, + type: 'error', }, render: args => ( diff --git a/packages/ffe-messages-react/src/ContextMessage.tsx b/packages/ffe-messages-react/src/ContextMessage.tsx index ed99ac4cec..c03a156a5d 100644 --- a/packages/ffe-messages-react/src/ContextMessage.tsx +++ b/packages/ffe-messages-react/src/ContextMessage.tsx @@ -16,14 +16,12 @@ export interface ContextMessageProps iconFileUrl?: string; /** Decides the language of the aria-label for the close icon */ locale?: Locale; - /** info, success, tips, news or error */ + /** info, success, tips, warning or error */ type: MessageType; /** Called when closed */ onClose?: () => void; /** Show close button */ closeButton?: boolean; - /** Adds alternative styling for better contrast on certain backgrounds */ - onColoredBg?: boolean; /** The header */ header?: React.ReactElement | string; } @@ -31,7 +29,6 @@ export interface ContextMessageProps export const ContextMessage: React.FC = ({ type, className, - onColoredBg, locale = 'nb', children, onClose, @@ -52,7 +49,6 @@ export const ContextMessage: React.FC = ({ `ffe-message--${type}`, { 'ffe-message--context-compact': compact, - 'ffe-message--colored-bg': onColoredBg, }, className, )} diff --git a/packages/ffe-messages-react/src/MessageBox.spec.tsx b/packages/ffe-messages-react/src/MessageBox.spec.tsx index ad0ced51c1..1bcfd993ca 100644 --- a/packages/ffe-messages-react/src/MessageBox.spec.tsx +++ b/packages/ffe-messages-react/src/MessageBox.spec.tsx @@ -10,7 +10,7 @@ describe('', () => { ['error', 'alert', 'Feilmelding'], ['success', 'group', 'Suksessmelding'], ['tips', 'group', 'Tipsmelding'], - ['news', 'group', 'Nyhetsmelding'], + ['warning', 'group', 'Advarsel'], ] as const)('should render each type %s', (type, role, name) => { render(); expect(screen.getByRole(role, { name })).toBeInTheDocument(); @@ -65,15 +65,4 @@ describe('', () => { expect(group.classList.contains('my-class')).toBeTruthy(); expect(group.classList.contains('ffe-message--colored-bg')).toBeFalsy(); }); - - it('should --colored-bg modifier classes ', () => { - render(); - const group = screen.getByRole('group'); - expect(group.classList.contains('ffe-message')).toBeTruthy(); - expect(group.classList.contains('ffe-message--box')).toBeTruthy(); - expect( - group.classList.contains('ffe-message--colored-bg'), - ).toBeTruthy(); - expect(group.classList.contains('ffe-message--info')).toBeTruthy(); - }); }); diff --git a/packages/ffe-messages-react/src/MessageBox.stories.tsx b/packages/ffe-messages-react/src/MessageBox.stories.tsx index 2e12f99caf..2a857f32e0 100644 --- a/packages/ffe-messages-react/src/MessageBox.stories.tsx +++ b/packages/ffe-messages-react/src/MessageBox.stories.tsx @@ -2,6 +2,7 @@ import React, { FunctionComponent } from 'react'; import { MessageBox } from './MessageBox'; import { MessageHeader } from './MessageHeader'; import type { StoryObj, Meta } from '@storybook/react'; +import { LinkText } from '@sb1/ffe-core-react'; const meta: Meta = { title: 'Komponenter/Messages/MessageBox', @@ -14,10 +15,80 @@ export default meta; type Story = StoryObj; +const messageArgs = { + header: 'Meldingstittel', +}; + export const Standard: Story = { args: { + ...messageArgs, + type: 'info', + }, + render: args => ( + + Meldingsboksene skal inneholde informasjon som er nyttig og relevant + for brukerne. + Lenke + + ), +}; + +export const Info: Story = { + args: { + ...messageArgs, + type: 'info', + }, + render: args => ( + + Meldingsboksene skal inneholde informasjon som er nyttig og relevant + for brukerne. + + ), +}; + +export const Tips: Story = { + args: { + ...messageArgs, + type: 'tips', + }, + render: args => ( + + Meldingsboksene skal inneholde informasjon som er nyttig og relevant + for brukerne. + + ), +}; + +export const Success: Story = { + args: { + ...messageArgs, + type: 'success', + }, + render: args => ( + + Meldingsboksene skal inneholde informasjon som er nyttig og relevant + for brukerne. + + ), +}; + +export const Warning: Story = { + args: { + ...messageArgs, + type: 'warning', + }, + render: args => ( + + Meldingsboksene skal inneholde informasjon som er nyttig og relevant + for brukerne. + + ), +}; + +export const Error: Story = { + args: { + ...messageArgs, type: 'error', - header: 'Meldingstittel', }, render: args => ( diff --git a/packages/ffe-messages-react/src/MessageBox.tsx b/packages/ffe-messages-react/src/MessageBox.tsx index e67a5d9721..97f953fb63 100644 --- a/packages/ffe-messages-react/src/MessageBox.tsx +++ b/packages/ffe-messages-react/src/MessageBox.tsx @@ -11,10 +11,8 @@ export interface MessageBoxProps extends React.ComponentPropsWithoutRef<'div'> { iconFileUrl?: string; /** The header */ header?: React.ReactElement | string; - /** info, success, tips, news or error */ + /** info, success, tips, warning or error */ type: MessageType; - /** Adds alternative styling for better contrast on certain backgrounds */ - onColoredBg?: boolean; /** Decides the language of the aria-label for the close icon */ locale?: Locale; } @@ -25,7 +23,6 @@ export const MessageBox: React.FC = ({ iconFileUrl, children, locale = 'nb', - onColoredBg, className, ...rest }) => { @@ -35,9 +32,6 @@ export const MessageBox: React.FC = ({ `ffe-message`, `ffe-message--box`, `ffe-message--${type}`, - { - 'ffe-message--colored-bg': onColoredBg, - }, className, )} role={type === 'error' ? 'alert' : 'group'} diff --git a/packages/ffe-messages-react/src/SystemMessage.spec.tsx b/packages/ffe-messages-react/src/SystemMessage.spec.tsx index fe733bb133..8354fb8579 100644 --- a/packages/ffe-messages-react/src/SystemMessage.spec.tsx +++ b/packages/ffe-messages-react/src/SystemMessage.spec.tsx @@ -8,7 +8,7 @@ describe('', () => { ['error', 'alert', 'Feilmelding'], ['success', 'group', 'Suksessmelding'], ['tips', 'group', 'Tipsmelding'], - ['news', 'group', 'Nyhetsmelding'], + ['warning', 'group', 'Advarsel'], ] as const)('should render each type %s', (type, role, name) => { render(); expect(screen.getByRole(role, { name })).toBeInTheDocument(); @@ -24,17 +24,6 @@ describe('', () => { expect(group.classList.contains('ffe-message--colored-bg')).toBeFalsy(); }); - it('should --colored-bg modifier classes ', () => { - render(); - const group = screen.getByRole('group'); - expect(group.classList.contains('ffe-message')).toBeTruthy(); - expect(group.classList.contains('ffe-message--system')).toBeTruthy(); - expect( - group.classList.contains('ffe-message--colored-bg'), - ).toBeTruthy(); - expect(group.classList.contains('ffe-message--info')).toBeTruthy(); - }); - it('should be closeable', async () => { render(); expect( diff --git a/packages/ffe-messages-react/src/SystemMessage.stories.tsx b/packages/ffe-messages-react/src/SystemMessage.stories.tsx index 44f6d767fa..4d8537ec24 100644 --- a/packages/ffe-messages-react/src/SystemMessage.stories.tsx +++ b/packages/ffe-messages-react/src/SystemMessage.stories.tsx @@ -4,6 +4,7 @@ import type { StoryObj, Meta } from '@storybook/react'; import { MessageHeader } from './MessageHeader'; import { MessageIcon } from './MessageIcon'; import { MessageList } from './MessageList'; +import { LinkText } from '@sb1/ffe-core-react'; const meta: Meta = { title: 'Komponenter/Messages/SystemMessage', @@ -19,6 +20,43 @@ export default meta; type Story = StoryObj; export const Standard: Story = { + args: { + type: 'info', + }, + render: args => ( + + Systemmeldinger skal bare brukes til viktige, midlertidige + meldinger. + Lenke + + ), +}; + +export const Info: Story = { + args: { + type: 'info', + }, + render: args => ( + + Systemmeldinger skal bare brukes til viktige, midlertidige + meldinger. + + ), +}; + +export const Tips: Story = { + args: { + type: 'tips', + }, + render: args => ( + + Systemmeldinger skal bare brukes til viktige, midlertidige + meldinger. + + ), +}; + +export const Success: Story = { args: { type: 'success', }, @@ -29,3 +67,27 @@ export const Standard: Story = { ), }; + +export const Warning: Story = { + args: { + type: 'warning', + }, + render: args => ( + + Systemmeldinger skal bare brukes til viktige, midlertidige + meldinger. + + ), +}; + +export const Error: Story = { + args: { + type: 'error', + }, + render: args => ( + + Systemmeldinger skal bare brukes til viktige, midlertidige + meldinger. + + ), +}; diff --git a/packages/ffe-messages-react/src/SystemMessage.tsx b/packages/ffe-messages-react/src/SystemMessage.tsx index 841b3f6c57..ba1655011d 100644 --- a/packages/ffe-messages-react/src/SystemMessage.tsx +++ b/packages/ffe-messages-react/src/SystemMessage.tsx @@ -10,10 +10,8 @@ import { txt } from './texts'; /*Remove me*/ export interface SystemMessageProps extends React.ComponentPropsWithoutRef<'div'> { - /** info, success, tips, news or error */ + /** info, success, tips, warning or error */ type: MessageType; - /** Adds alternative styling for better contrast on certain backgrounds */ - onColoredBg?: boolean; /** url to svg icon to override default*/ iconFileUrl?: string; /** nn, nb or en */ @@ -25,7 +23,6 @@ export interface SystemMessageProps export const SystemMessage: React.FC = ({ type, className, - onColoredBg, locale = 'nb', children, onClose, @@ -41,9 +38,6 @@ export const SystemMessage: React.FC = ({ `ffe-message`, `ffe-message--system`, `ffe-message--${type}`, - { - 'ffe-message--colored-bg': onColoredBg, - }, className, )} role={type === 'error' ? 'alert' : 'group'} diff --git a/packages/ffe-messages-react/src/texts.ts b/packages/ffe-messages-react/src/texts.ts index c3d0cd46bc..038c571d54 100644 --- a/packages/ffe-messages-react/src/texts.ts +++ b/packages/ffe-messages-react/src/texts.ts @@ -9,8 +9,8 @@ const nb = { success: { ariaLabel: 'Suksessmelding', }, - news: { - ariaLabel: 'Nyhetsmelding', + warning: { + ariaLabel: 'Advarsel', }, tips: { ariaLabel: 'Tipsmelding', @@ -27,8 +27,8 @@ const nn = { success: { ariaLabel: 'Suksessmelding', }, - news: { - ariaLabel: 'Nyheitsmelding', + warning: { + ariaLabel: 'Advarsel', }, tips: { ariaLabel: 'Tipsmelding', @@ -45,8 +45,8 @@ const en = { success: { ariaLabel: 'Success message', }, - news: { - ariaLabel: 'News message', + warning: { + ariaLabel: 'Warning message', }, tips: { ariaLabel: 'Tip Message', diff --git a/packages/ffe-messages-react/src/types.ts b/packages/ffe-messages-react/src/types.ts index f6e45d4b6a..4d125826fc 100644 --- a/packages/ffe-messages-react/src/types.ts +++ b/packages/ffe-messages-react/src/types.ts @@ -1,6 +1,6 @@ import { ComponentPropsWithoutRef, ElementType } from 'react'; -export type MessageType = 'info' | 'error' | 'success' | 'tips' | 'news'; +export type MessageType = 'info' | 'error' | 'success' | 'tips' | 'warning'; export type Locale = 'nb' | 'nn' | 'en'; export type DistributiveOmit = T extends any From f7f89ecccd92b4cd3320e8a76c4d9f0b879dadb9 Mon Sep 17 00:00:00 2001 From: tuva-odegard Date: Tue, 21 Jan 2025 10:19:53 +0100 Subject: [PATCH 2/3] =?UTF-8?q?feat(ffe-messages):=20bruker=20semantiske?= =?UTF-8?q?=20farger.=20BREAKING=20CHANGE:=20tar=20i=20bruk=20semantiske?= =?UTF-8?q?=20farger.=20Ingen=20endringer=20n=C3=B8dvendig=20i=20css,=20me?= =?UTF-8?q?n=20oncoloredbg=20blir=20fjernet,=20og=20typen=20news=20er=20de?= =?UTF-8?q?scricated.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ffe-messages/less/common.less | 171 +++++++++++-------------- packages/ffe-messages/less/theme.less | 94 ++++++-------- 2 files changed, 113 insertions(+), 152 deletions(-) diff --git a/packages/ffe-messages/less/common.less b/packages/ffe-messages/less/common.less index 10631e8b02..4bcb34f29f 100644 --- a/packages/ffe-messages/less/common.less +++ b/packages/ffe-messages/less/common.less @@ -2,7 +2,8 @@ --icon-size: var(--ffe-v-icons-size-md); --icon-padding: var(--ffe-spacing-2xs); - color: var(--ffe-v-messages-text-color); + border-radius: var(--ffe-g-border-radius-lg); + font-family: var(--ffe-g-font); overflow-wrap: anywhere; .ffe-body-text, @@ -10,89 +11,84 @@ color: inherit; } - .ffe-link-text { - border-color: var(--ffe-v-messages-link-color); - color: var(--ffe-v-messages-link-color); - - @media (hover: hover) and (pointer: fine) { - &:hover { - border-color: var(--ffe-v-messages-link-color-hover); - color: var(--ffe-v-messages-link-color-hover); - } - } - - &:visited { - border-color: var(--ffe-v-messages-link-color-visited); - color: var(--ffe-v-messages-link-color-visited); - } - - &:focus { - border-color: var(--ffe-v-messages-link-color-focus); - background-color: var(--ffe-v-messages-link-color); - box-shadow: 0 0 0 2px var(--ffe-v-messages-link-color); - color: var(--ffe-v-messages-link-color-focus); - } + &--info { + --background: var(--ffe-v-messages-background-color-info); + --text-color: var(--ffe-v-messages-text-color-info); + --border-color: var(--ffe-v-messages-border-color-info); + --icon-background: var(--ffe-v-messages-icon-background-color-info); + --icon-color: var(--ffe-v-messages-icon-color-info); + --close-button: var(--ffe-v-messages-close-button-color-info); + --link-text-color: var(--ffe-v-messages-link-color-info); + --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg=='); + } + + &--tips { + --background: var(--ffe-v-messages-background-color-tip); + --text-color: var(--ffe-v-messages-text-color-tip); + --border-color: var(--ffe-v-messages-border-color-tip); + --icon-background: var(--ffe-v-messages-icon-background-color-tip); + --icon-color: var(--ffe-v-messages-icon-color-tip); + --close-button: var(--ffe-v-messages-close-button-color-tip); + --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTExMi45MjRxLTI3LjA5NSAwLTQ2LjU1Ny0xOC42NS0xOS40NjEtMTguNjUtMjEuMzg1LTQ1LjY1N2gxMzYuMzA4cS0xLjkyNCAyNy4zMDctMjEuNTk3IDQ1LjgwNy0xOS42NzQgMTguNS00Ni43NjkgMTguNVpNMzcyLjI4My0yNDAuNjE3cS0xMS4wNTIgMC0xOC42NjctNy40MDUtNy42MTUtNy40MDQtNy42MTUtMTguMzg0IDAtMTAuOTc5IDcuNDUzLTE4LjU5NSA3LjQ1NC03LjYxNSAxOC41MDYtNy42MTVoMjE1Ljc1N3ExMS4wNTIgMCAxOC42NjcgNy40MDUgNy42MTUgNy40MDUgNy42MTUgMTguMzg0dC03LjQ1MyAxOC41OTVxLTcuNDU0IDcuNjE1LTE4LjUwNiA3LjYxNUgzNzIuMjgzWm0tNDUuMTI5LTExNS4zODRxLTU1Ljg0NS0zNi4wNzctODUuNDk5LTk0LjYxNVEyMTIuMDAxLTUwOS4xNTQgMjEyLjAwMS01NzZxMC0xMTEuOTIyIDc4LjAzOC0xODkuOTYxUTM2OC4wNzgtODQzLjk5OSA0ODAtODQzLjk5OXExMTEuOTIyIDAgMTg5Ljk2MSA3OC4wMzhRNzQ3Ljk5OS02ODcuOTIyIDc0Ny45OTktNTc2cTAgNjYuODQ2LTI5LjY1NCAxMjUuMzg0dC04NS40OTkgOTQuNjE1SDMyNy4xNTRaTTM0NC00MDhoMjcycTM4LTMxIDU5LTc1dDIxLTkzcTAtOTAuMzI3LTYyLjc2OS0xNTMuMTY0UTU3MC40NjItNzkyIDQ4MC4yMzEtNzkyVDMyNy03MjkuMTY0UTI2NC02NjYuMzI3IDI2NC01NzZxMCA0OSAyMSA5M3Q1OSA3NVptMTM2IDBaIi8+PC9zdmc+'); + } + + &--success { + --background: var(--ffe-v-messages-background-color-success); + --text-color: var(--ffe-v-messages-text-color-success); + --border-color: var(--ffe-v-messages-border-color-success); + --icon-background: var(--ffe-v-messages-icon-background-color-success); + --icon-color: var(--ffe-v-messages-icon-color-success); + --close-button: var(--ffe-v-messages-close-button-color-success); + --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+'); + } + + &--warning { + --background: var(--ffe-v-messages-background-color-warning); + --text-color: var(--ffe-v-messages-text-color-warning); + --border-color: var(--ffe-v-messages-border-color-warning); + --icon-background: var(--ffe-v-messages-icon-background-color-warning); + --icon-color: var(--ffe-v-messages-icon-color-warning); + --close-button: var(--ffe-v-messages-close-button-color-warning); + --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+'); + } + + &--error { + --background: var(--ffe-v-messages-background-color-error); + --text-color: var(--ffe-v-messages-text-color-error); + --border-color: var(--ffe-v-messages-border-color-error); + --icon-background: var(--ffe-v-messages-icon-background-color-error); + --icon-color: var(--ffe-v-messages-icon-color-error); + --close-button: var(--ffe-v-messages-close-button-color-error); + --link-text-color: var(--ffe-v-messages-link-color-error); + --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+'); } -} -.ffe-message--info { - --icon-background: var(--ffe-v-messages-info-icon-bg-color); - --icon-color: var(--ffe-v-messages-info-icon-color); - --background: var(--ffe-v-messages-info-bg-color); - --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg=='); - &.ffe-message--colored-bg { - --background: var(--ffe-v-messages-info-variant-bg-color); - --icon-background: var(--ffe-v-messages-info-icon-variant-bg-color); + .ffe-link-text { + border-color: var(--text-color); + color: var(--text-color); } -} -.ffe-message--success { - --icon-background: var(--ffe-v-messages-success-icon-bg-color); - --icon-color: var(--ffe-v-messages-success-icon-color); - --background: var(--ffe-v-messages-success-bg-color); - --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+'); - &.ffe-message--colored-bg { - --background: var(--ffe-v-messages-success-variant-bg-color); - --icon-background: var(--ffe-v-messages-success-icon-variant-bg-color); - } -} -.ffe-message--error { - --icon-background: var(--ffe-v-messages-error-icon-bg-color); - --icon-color: var(--ffe-v-messages-error-icon-color); - --background: var(--ffe-v-messages-error-bg-color); - --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+'); - &.ffe-message--colored-bg { - --background: var(--ffe-v-messages-error-variant-bg-color); - --icon-background: var(--ffe-v-messages-error-icon-variant-bg-color); + &__background { + background: var(--background); + border-radius: var(--ffe-g-border-radius-lg); + border: var(--ffe-g-border-width) solid var(--border-color); } -} -.ffe-message--tips { - --icon-background: var(--ffe-v-messages-tips-icon-bg-color); - --icon-color: var(--ffe-v-messages-tips-icon-color); - --background: var(--ffe-v-messages-tips-bg-color); - --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTExMi45MjRxLTI3LjA5NSAwLTQ2LjU1Ny0xOC42NS0xOS40NjEtMTguNjUtMjEuMzg1LTQ1LjY1N2gxMzYuMzA4cS0xLjkyNCAyNy4zMDctMjEuNTk3IDQ1LjgwNy0xOS42NzQgMTguNS00Ni43NjkgMTguNVpNMzcyLjI4My0yNDAuNjE3cS0xMS4wNTIgMC0xOC42NjctNy40MDUtNy42MTUtNy40MDQtNy42MTUtMTguMzg0IDAtMTAuOTc5IDcuNDUzLTE4LjU5NSA3LjQ1NC03LjYxNSAxOC41MDYtNy42MTVoMjE1Ljc1N3ExMS4wNTIgMCAxOC42NjcgNy40MDUgNy42MTUgNy40MDUgNy42MTUgMTguMzg0dC03LjQ1MyAxOC41OTVxLTcuNDU0IDcuNjE1LTE4LjUwNiA3LjYxNUgzNzIuMjgzWm0tNDUuMTI5LTExNS4zODRxLTU1Ljg0NS0zNi4wNzctODUuNDk5LTk0LjYxNVEyMTIuMDAxLTUwOS4xNTQgMjEyLjAwMS01NzZxMC0xMTEuOTIyIDc4LjAzOC0xODkuOTYxUTM2OC4wNzgtODQzLjk5OSA0ODAtODQzLjk5OXExMTEuOTIyIDAgMTg5Ljk2MSA3OC4wMzhRNzQ3Ljk5OS02ODcuOTIyIDc0Ny45OTktNTc2cTAgNjYuODQ2LTI5LjY1NCAxMjUuMzg0dC04NS40OTkgOTQuNjE1SDMyNy4xNTRaTTM0NC00MDhoMjcycTM4LTMxIDU5LTc1dDIxLTkzcTAtOTAuMzI3LTYyLjc2OS0xNTMuMTY0UTU3MC40NjItNzkyIDQ4MC4yMzEtNzkyVDMyNy03MjkuMTY0UTI2NC02NjYuMzI3IDI2NC01NzZxMCA0OSAyMSA5M3Q1OSA3NVptMTM2IDBaIi8+PC9zdmc+'); - &.ffe-message--colored-bg { - --background: var(--ffe-v-messages-tips-variant-bg-color); - --icon-background: var(--ffe-v-messages-tips-icon-variant-bg-color); - } -} + &--context { + --icon-size: var(--ffe-v-icons-size-lg); + --icon-padding: var(--ffe-spacing-xs); -.ffe-message--news { - --icon-background: var(--ffe-v-messages-news-icon-bg-color); - --icon-color: var(--ffe-v-messages-news-icon-color); - --background: var(--ffe-v-messages-news-bg-color); - --mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg=='); - &.ffe-message--colored-bg { - --background: var(--ffe-v-messages-news-variant-bg-color); - --icon-background: var(--ffe-v-messages-news-icon-variant-bg-color); - } -} + .ffe-message__heading { + font-size: var(--ffe-fontsize-h6); + margin: 0 0 var(--ffe-spacing-2xs); + } -.ffe-message__background { - background: var(--background); - border-radius: 8px; + &.ffe-message--context-compact { + --icon-size: var(--ffe-v-icons-size-md); + --icon-padding: var(--ffe-spacing-2xs); + } + } } .ffe-message__icon-container { @@ -104,21 +100,6 @@ padding: var(--icon-padding); } -.ffe-message--context { - --icon-size: var(--ffe-v-icons-size-xl); - --icon-padding: var(--ffe-spacing-xs); - - .ffe-message__heading { - font-size: var(--ffe-fontsize-h6); - margin: 0 0 var(--ffe-spacing-2xs); - } -} - -.ffe-message--context.ffe-message--context-compact { - --icon-size: var(--ffe-v-icons-size-md); - --icon-padding: var(--ffe-spacing-2xs); -} - .ffe-message--system, .ffe-message--context { .ffe-message__icon-container { @@ -129,6 +110,7 @@ .ffe-message__content { grid-column: 2 e('/') 3; grid-row: 1 e('/') 2; + color: var(--text-color); } .ffe-message__close { @@ -164,6 +146,7 @@ display: grid; grid-template-columns: 1fr; grid-template-rows: auto var(--icon-offset) 1fr; + color: var(--text-color); .ffe-message__background { padding: var(--ffe-spacing-xl) var(--ffe-spacing-lg); @@ -195,17 +178,15 @@ font: inherit; cursor: pointer; outline: inherit; - color: var(--ffe-v-messages-close-button-color); + color: var(--close-button); padding: var(--ffe-spacing-xs); background: transparent; display: grid; place-items: center; border-radius: 8px; - @media (hover: hover) and (pointer: fine) { - &:hover { - --icon-color: var(--ffe-v-messages-close-button-color-hover); - } + .ffe-icons { + color: var(--close-button); } &:focus { diff --git a/packages/ffe-messages/less/theme.less b/packages/ffe-messages/less/theme.less index 0dce7aebf0..6acdb5ae69 100644 --- a/packages/ffe-messages/less/theme.less +++ b/packages/ffe-messages/less/theme.less @@ -1,65 +1,45 @@ -:root, -:host { - /** Tips */ - --ffe-v-messages-tips-bg-color: var(--ffe-farge-sol-30); - --ffe-v-messages-tips-icon-bg-color: var(--ffe-farge-sol); - --ffe-v-messages-tips-icon-color: var(--ffe-farge-sol-30); - --ffe-v-messages-tips-variant-bg-color: var(--ffe-farge-hvit); - --ffe-v-messages-tips-icon-variant-bg-color: var(--ffe-farge-sol); - +.ffe-message { /** Info */ - --ffe-v-messages-info-bg-color: var(--ffe-farge-vann-30); - --ffe-v-messages-info-icon-bg-color: var(--ffe-farge-vann); - --ffe-v-messages-info-icon-color: var(--ffe-farge-vann-30); - --ffe-v-messages-info-variant-bg-color: var(--ffe-farge-hvit); - --ffe-v-messages-info-icon-variant-bg-color: var(--ffe-farge-fjell); + --ffe-v-messages-background-color-info: var(--ffe-color-surface-feedback-info); + --ffe-v-messages-text-color-info: var(--ffe-color-foreground-feedback-info); + --ffe-v-messages-border-color-info: var(--ffe-color-border-feedback-info); + --ffe-v-messages-icon-background-color-info: var(--ffe-color-fill-feedback-info); + --ffe-v-messages-icon-color-info: var(--ffe-color-foreground-on-fill-default); + --ffe-v-messages-close-button-color-info: var(--ffe-color-foreground-feedback-info); + + /** Tips */ + --ffe-v-messages-background-color-tip: var(--ffe-color-surface-feedback-tip); + --ffe-v-messages-text-color-tip: var(--ffe-color-foreground-feedback-tip); + --ffe-v-messages-border-color-tip: var(--ffe-color-border-feedback-tip); + --ffe-v-messages-icon-background-color-tip: var(--ffe-color-fill-feedback-tip); + --ffe-v-messages-icon-color-tip: var(--ffe-color-foreground-on-fill-default); + --ffe-v-messages-close-button-color-tip: var(--ffe-color-foreground-feedback-tip); /** Success */ - --ffe-v-messages-success-bg-color: var(--ffe-farge-skog-30); - --ffe-v-messages-success-icon-bg-color: var(--ffe-farge-skog); - --ffe-v-messages-success-icon-color: var(--ffe-farge-skog-30); - --ffe-v-messages-success-variant-bg-color: var(--ffe-farge-hvit); - --ffe-v-messages-success-icon-variant-bg-color: var(--ffe-farge-skog); + --ffe-v-messages-background-color-success: var(--ffe-color-surface-feedback-success); + --ffe-v-messages-text-color-success: var(--ffe-color-foreground-feedback-success); + --ffe-v-messages-border-color-success: var(--ffe-color-border-feedback-success); + --ffe-v-messages-icon-background-color-success: var(--ffe-color-fill-feedback-success); + --ffe-v-messages-icon-color-success: var(--ffe-color-foreground-on-fill-default); + --ffe-v-messages-close-button-color-success: var(--ffe-color-foreground-feedback-success); + + /** Warning */ + --ffe-v-messages-background-color-warning: var(--ffe-color-surface-feedback-warning); + --ffe-v-messages-text-color-warning: var(--ffe-color-foreground-feedback-warning); + --ffe-v-messages-border-color-warning: var(--ffe-color-border-feedback-warning); + --ffe-v-messages-icon-background-color-warning: var(--ffe-color-fill-feedback-warning); + --ffe-v-messages-icon-color-warning: var(--ffe-color-foreground-on-fill-default); + --ffe-v-messages-close-button-color-warning: var(--ffe-color-foreground-feedback-warning); /** Error */ - --ffe-v-messages-error-bg-color: var(--ffe-farge-baer-30); - --ffe-v-messages-error-icon-bg-color: var(--ffe-farge-baer); - --ffe-v-messages-error-icon-color: var(--ffe-farge-baer-30); - --ffe-v-messages-error-variant-bg-color: var(--ffe-farge-hvit); - --ffe-v-messages-error-icon-variant-bg-color: var(--ffe-farge-baer); - - /** News */ - --ffe-v-messages-news-bg-color: var(--ffe-farge-lysgraa); - --ffe-v-messages-news-icon-bg-color: var(--ffe-farge-koksgraa); - --ffe-v-messages-news-icon-color: var(--ffe-farge-lysgraa); - --ffe-v-messages-news-variant-bg-color: var(--ffe-farge-hvit); - --ffe-v-messages-news-icon-variant-bg-color: var(--ffe-farge-koksgraa); + --ffe-v-messages-background-color-error: var(--ffe-color-surface-feedback-critical); + --ffe-v-messages-text-color-error: var(--ffe-color-foreground-feedback-critical); + --ffe-v-messages-border-color-error: var(--ffe-color-border-feedback-critical); + --ffe-v-messages-icon-background-color-error: var(--ffe-color-fill-feedback-critical); + --ffe-v-messages-icon-color-error: var(--ffe-color-foreground-on-fill-default); + --ffe-v-messages-close-button-color-error: var(--ffe-color-foreground-feedback-critical); + --ffe-v-messages-link-color-error: var(--ffe-foreground-feedback-critical); /** Close button */ - --ffe-v-messages-close-button-color: var(--ffe-farge-moerkgraa); - --ffe-v-messages-close-button-color-hover: var(--ffe-farge-svart); - --ffe-v-messages-close-button-border-color-focus: var(--ffe-farge-vann); - - /** Text */ - --ffe-v-messages-text-color: var(--ffe-farge-svart); - - /** Link colors */ - --ffe-v-messages-link-color: var(--ffe-farge-vann); - --ffe-v-messages-link-color-hover: var(--ffe-farge-fjell); - --ffe-v-messages-link-color-visited: var(--ffe-farge-lyng); - --ffe-v-messages-link-color-focus: var(--ffe-farge-hvit); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-messages-tips-icon-variant-bg-color: var(--ffe-farge-sol); - --ffe-v-messages-info-icon-variant-bg-color: var(--ffe-farge-vann); - --ffe-v-messages-success-icon-variant-bg-color: var( - --ffe-farge-skog - ); - --ffe-v-messages-error-icon-variant-bg-color: var(--ffe-farge-baer); - --ffe-v-messages-news-icon-variant-bg-color: var( - --ffe-farge-koksgraa - ); - } - } + --ffe-v-messages-close-button-border-color-focus: var(--ffe-color-border-interactive-focus); } From ca4d507ae0990281b3b72b1b77673b30b02c4074 Mon Sep 17 00:00:00 2001 From: tuva-odegard Date: Tue, 21 Jan 2025 10:21:38 +0100 Subject: [PATCH 3/3] =?UTF-8?q?feat(ffe-core):=20legger=20til=20en=20st?= =?UTF-8?q?=C3=B8rre=20variant=20av=20border=20radius=20som=20kan=20brukes?= =?UTF-8?q?=20globalt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ffe-core/less/theme.less | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ffe-core/less/theme.less b/packages/ffe-core/less/theme.less index 22984c8b25..4d26b5ecbe 100644 --- a/packages/ffe-core/less/theme.less +++ b/packages/ffe-core/less/theme.less @@ -138,6 +138,7 @@ /* Form element borders */ --ffe-g-border-color: var(--ffe-farge-varmgraa); --ffe-g-border-radius: 8px; + --ffe-g-border-radius-lg: 16px; --ffe-g-border-width: 1px; --ffe-g-border-width-focus: 2px;