feat(ffe-core): nye semantiske farger. [burde merges sammen med ffe-cards og fileupload]

packages/ffe-cards-react/src/CardBase.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as CardBaseStories from './CardBase.stories.tsx';
 
 <Meta of={CardBaseStories} />
@@ -7,7 +7,7 @@ import * as CardBaseStories from './CardBase.stories.tsx';
 
 Dette er basisen for alle kort. Komponeten kan brukes direkte for å få en ramme du kan fylle dersom du trenger et spesialtilpassert kort.
 
-Du kan skru av/på box-shadow med `shadow`-prop, skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
+Du kan skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
 
 <Canvas of={CardBaseStories.Standard} />
 <Controls of={CardBaseStories.Standard} />

packages/ffe-cards-react/src/CardBase.spec.tsx

@@ -1,6 +1,6 @@
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 import { CardBase } from './CardBase';
-import { render, screen, within } from '@testing-library/react';
 
 const TEST_ID = 'test-id';
 
@@ -48,15 +48,6 @@ describe('<CardBase/>', () => {
             card.classList.contains('ffe-card-base--dm-bg-natt'),
         ).toBeTruthy();
     });
-    it('should set shadow-prop correctly', () => {
-        render(
-            <CardBase data-testid={TEST_ID} shadow={true}>
-                <div />
-            </CardBase>,
-        );
-        const card = screen.getByTestId(TEST_ID);
-        expect(card.classList.contains('ffe-card-base--shadow')).toBeTruthy();
-    });
     it('should set noMargin-prop correctly', () => {
         render(
             <CardBase data-testid={TEST_ID} noMargin={true}>

packages/ffe-cards-react/src/CardBase.stories.tsx

@@ -1,6 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { CardBase } from './CardBase';
-import type { StoryObj, Meta } from '@storybook/react';
 
 const Custom: React.FC<React.ComponentProps<'div'>> = props => (
     <div {...props}>
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof CardBase<any>>;
 export const Standard: Story = {
     args: {
         as: 'div',
-        shadow: true,
     },
     render: args => (
         <CardBase {...args}>Dette er basisen for alle kort</CardBase>

packages/ffe-cards-react/src/CardBase.tsx

@@ -1,19 +1,18 @@
-import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
-import { WithCardActionProps, WithCardAction } from './components';
+import React, { ElementType, ForwardedRef } from 'react';
+import { WithCardAction, WithCardActionProps } from './components';
+import { fixedForwardRef } from './fixedForwardRef';
 import {
     BgColor,
     BgColorDarkmode,
-    ComponentAsPropParams,
     CardActionRenderProps,
+    ComponentAsPropParams,
 } from './types';
-import { fixedForwardRef } from './fixedForwardRef';
 
 export type CardBaseProps<As extends ElementType = 'div'> = Omit<
     ComponentAsPropParams<As>,
     'children'
 > & {
-    shadow?: boolean;
     /** No margin on card */
     noMargin?: boolean;
     textCenter?: boolean;
@@ -29,7 +28,6 @@ function CardBaseWithForwardRef<As extends ElementType>(
 ) {
     const {
         className,
-        shadow,
         noMargin,
         textCenter,
         bgColor,
@@ -45,7 +43,6 @@ function CardBaseWithForwardRef<As extends ElementType>(
             className={classNames('ffe-card-base', className, {
                 [`ffe-card-base--bg-${bgColor}`]: bgColor,
                 [`ffe-card-base--dm-bg-${bgDarkmodeColor}`]: bgDarkmodeColor,
-                'ffe-card-base--shadow': shadow,
                 'ffe-card-base--no-margin': noMargin,
                 'ffe-card-base--text-center': textCenter,
                 'ffe-card-base--no-padding': noPadding,

packages/ffe-cards-react/src/GroupCard/GroupCard.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as GroupCardStories from './GroupCard.stories.tsx';
 
 <Meta of={GroupCardStories} />
@@ -10,10 +10,6 @@ GroupCard er et kort med en liste av elementer inni. Det kan bestå av `GroupCar
 <Canvas of={GroupCardStories.Standard} />
 <Controls of={GroupCardStories.Standard} />
 
-Man kan modifisere GroupCard til å ikke ha skygge med `shadow={false}`.
-
-<Canvas of={GroupCardStories.ShadowFalse} />
-
 `GroupCardElement` har linjer mellom elementene som standard, men det kan fjernes med `noSeparator`.
 
 <Canvas of={GroupCardStories.NoSeparator} />

packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx

@@ -1,11 +1,11 @@
+import { Heading2, Paragraph } from '@sb1/ffe-core-react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { CardRenderProps } from '../types';
 import { GroupCard } from './GroupCard';
-import { GroupCardTitle } from './GroupCardTitle';
 import { GroupCardElement } from './GroupCardElement';
 import { GroupCardFooter } from './GroupCardFooter';
-import { Heading2, Paragraph } from '@sb1/ffe-core-react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { CardRenderProps } from '../types';
+import { GroupCardTitle } from './GroupCardTitle';
 
 const meta: Meta<typeof GroupCard> = {
     title: 'Komponenter/Cards/GroupCard',
@@ -16,9 +16,7 @@ export default meta;
 type Story = StoryObj<typeof GroupCard>;
 
 export const Standard: Story = {
-    args: {
-        shadow: true,
-    },
+    args: {},
     render: args => (
         <GroupCard {...args}>
             <GroupCardTitle>
@@ -38,19 +36,6 @@ export const Standard: Story = {
     ),
 };
 
-export const ShadowFalse: Story = {
-    args: {
-        ...Standard.args,
-        shadow: false,
-    },
-    render: args => (
-        <GroupCard {...args}>
-            <GroupCardElement>Innhold nr 1</GroupCardElement>
-            <GroupCardElement>Innhold nr 2</GroupCardElement>
-            <GroupCardElement>Innhold nr 3</GroupCardElement>
-        </GroupCard>
-    ),
-};
 export const NoSeparator: Story = {
     args: {
         ...Standard.args,

packages/ffe-cards-react/src/GroupCard/GroupCard.tsx

@@ -1,11 +1,10 @@
-import React, { ForwardedRef } from 'react';
 import classNames from 'classnames';
+import React, { ForwardedRef } from 'react';
 import { fixedForwardRef } from '../fixedForwardRef';
 import { BgColor, BgColorDarkmode } from '../types';
 
 export interface GroupCardProps
     extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
-    shadow?: boolean;
     /** The children of the GroupCard component */
     children: React.ReactNode;
     /** The background color of the whole groupcard element */
@@ -18,7 +17,6 @@ export interface GroupCardProps
 
 function GroupCardWithForwardRef(
     {
-        shadow,
         className,
         children,
         bgColor,
@@ -33,7 +31,6 @@ function GroupCardWithForwardRef(
             className={classNames(
                 'ffe-group-card',
                 {
-                    'ffe-group-card--shadow': shadow,
                     'ffe-group-card--no-margin': noMargin,
                     [`ffe-group-card--bg-${bgColor}`]: bgColor,
                     [`ffe-group-card--dm-bg-${bgDarkmodeColor}`]:

packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { StippledCard } from './StippledCard';
-import type { StoryObj, Meta } from '@storybook/react';
 import { Icon } from '@sb1/ffe-icons-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import utvalgte from './illustrations/utvalgte.svg';
+import { StippledCard } from './StippledCard';
 
 const Custom: React.FC<React.ComponentProps<'div'>> = props => (
     <div {...props}>
@@ -195,3 +195,29 @@ export const Condensed: Story = {
         </StippledCard>
     ),
 };
+
+export const WithCardAction: Story = {
+    args: {
+        as: 'div',
+    },
+    render: args => (
+        <StippledCard {...args}>
+            {({ CardName, Title, Subtext, Text, CardAction }) => (
+                <>
+                    <CardName>CardName</CardName>
+                    <Title>
+                        <CardAction>Tittel</CardAction>
+                    </Title>
+                    <Subtext as="span">Subtext er grå</Subtext>
+                    <Text>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat.
+                    </Text>
+                </>
+            )}
+        </StippledCard>
+    ),
+};

packages/ffe-cards-react/src/components/CardAction.stories.tsx

@@ -1,11 +1,11 @@
+import { Heading4, Paragraph } from '@sb1/ffe-core-react';
+import { Icon } from '@sb1/ffe-icons-react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { CardAction as CardActionComponent } from './CardAction';
-import type { StoryObj, Meta } from '@storybook/react';
 import { CardBase } from '../CardBase';
-import { Heading2, Paragraph } from '@sb1/ffe-core-react';
-import { Icon } from '@sb1/ffe-icons-react';
 import { IconCard } from '../IconCard/IconCard';
 import { CardActionRenderProps, CardRenderProps } from '../types';
+import { CardAction as CardActionComponent } from './CardAction';
 
 const Custom: React.FC<React.ComponentProps<'a'>> = props => (
     <a {...props}>
@@ -39,12 +39,12 @@ export const Standard: Story = {
         href: 'https://design.sparebank1.no',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
-                    <Heading2>
+                    <Heading4>
                         <CardAction {...args}>Lenke</CardAction>
-                    </Heading2>
+                    </Heading4>
                     <Paragraph>Hele kortet er klikkbart</Paragraph>
                 </>
             )}
@@ -58,12 +58,12 @@ export const AsButton: Story = {
         type: 'button',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
-                    <Heading2>
+                    <Heading4>
                         <CardAction {...args}>Knapp</CardAction>
-                    </Heading2>
+                    </Heading4>
                     <Paragraph>Hele kortet er klikkbart</Paragraph>
                 </>
             )}

packages/ffe-cards/less/card-base.less

@@ -1,25 +1,21 @@
 @import 'common-card-styling';
 
 .ffe-card-base {
+    color: var(--ffe-color-foreground-default);
     .common-card-styling();
 
     &--clickable {
         .clickable-card-styling();
     }
 
-    padding: var(--ffe-spacing-sm);
-    box-shadow: none; // Overwrite common-card-styling
+    padding: var(--ffe-spacing-md);
 
     &--no-padding {
         padding: 0;
     }
 
     .card-background-styling();
 
-    &--shadow {
-        box-shadow: var(--ffe-v-cards-common-card-box-shadow);
-    }
-
     &--no-margin {
         margin: 0;
     }

packages/ffe-cards/less/cards.less

@@ -1,8 +1,8 @@
-@import 'theme';
 @import 'card-base';
 @import 'text-card';
 @import 'icon-card';
 @import 'illustration-card';
 @import 'image-card';
 @import 'stippled-card';
 @import 'group-card';
+@import 'theme';

packages/ffe-cards/less/common-card-styling.less

@@ -1,10 +1,16 @@
 @import (reference) '@sb1/ffe-core/less/breakpoints';
 
 .common-card-styling() {
+    --ffe-v-cards-common-card-background-color: var(
+        --ffe-color-surface-primary-default
+    );
+    --ffe-v-cards-common-card-border-color: var(
+        --ffe-color-border-primary-default
+    );
+
     background: var(--ffe-v-cards-common-card-background-color);
-    box-shadow: var(--ffe-v-cards-common-card-box-shadow);
     margin: 0 0 var(--ffe-spacing-xs);
-    border: 2px solid var(--ffe-v-cards-common-card-border-color);
+    border: 1px solid var(--ffe-v-cards-common-card-border-color);
     border-radius: var(--ffe-v-cards-common-card-border-radius);
     transition: all var(--ffe-transition-duration) var(--ffe-ease);
     outline: none;
@@ -56,8 +62,11 @@
     @media (hover: hover) and (pointer: fine) {
         &:hover {
             cursor: pointer;
-            border-color: var(--ffe-g-primary-color);
+            border-color: var(--ffe-color-border-primary-hover);
 
+            --ffe-v-cards-common-card-background-color: var(
+                --ffe-color-surface-primary-default-hover
+            );
             &
                 :where(
                     .ffe-card-body__card-name,
@@ -70,8 +79,7 @@
         }
     }
     &:focus-within {
-        border-color: var(--ffe-g-primary-color);
-        box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+        border-color: var(--ffe-color-border-primary-hover);
 
         &
             :where(

packages/ffe-cards/less/components.less

@@ -3,10 +3,12 @@
 .ffe-card-body {
     &__card-name {
         margin: 0 0 var(--ffe-spacing-2xs) 0;
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &__text {
         margin: var(--ffe-spacing-2xs) 0 0 0;
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &__subtext {
@@ -15,14 +17,14 @@
         font-variant-numeric: tabular-nums;
         line-height: 1.25rem;
         font-size: var(--ffe-fontsize-small-text);
-        color: var(--ffe-v-cards-subtext-color);
+        color: var(--ffe-color-foreground-subtle);
         margin: var(--ffe-spacing-2xs) 0 0 0;
     }
 
     &__title {
         font-family: var(--ffe-g-font-heading-small);
         font-variant-numeric: tabular-nums;
-        color: var(--ffe-g-heading-color);
+        color: var(--ffe-color-foreground-emphasis);
         font-weight: normal;
         text-wrap: balance;
         overflow-wrap: anywhere;