From a88e5ed72736c5ccdd3e686930e0ad5afc953537 Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Wed, 22 Jan 2025 11:43:28 +0100 Subject: [PATCH 1/4] feat(ffe-core): nye semantiske farger. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: nye farger. Ingen ting å gjøre hvis man ikke har justert fargene. --- packages/ffe-core/less/body.less | 15 +--- packages/ffe-core/less/colors-deprecated.less | 59 --------------- packages/ffe-core/less/colors.less | 1 + packages/ffe-core/less/theme.less | 53 +++++++------- packages/ffe-core/less/typography.less | 72 +++++++------------ packages/ffe-core/tokens.config.js | 1 - 6 files changed, 53 insertions(+), 148 deletions(-) delete mode 100644 packages/ffe-core/less/colors-deprecated.less diff --git a/packages/ffe-core/less/body.less b/packages/ffe-core/less/body.less index 77bf166d34..d706049d99 100644 --- a/packages/ffe-core/less/body.less +++ b/packages/ffe-core/less/body.less @@ -1,18 +1,7 @@ // Sets default body color, font styles and background color for light and dark themes .ffe-body { - --color: var(--ffe-g-text-color); - --background-color: var(--ffe-farge-hvit); - - background-color: var(--background-color); - color: var(--color); - - &.regard-color-scheme-preference { - @media (prefers-color-scheme: dark) { - --color: var(--ffe-farge-lysgraa); - --background-color: var(--ffe-farge-svart); - } - } - + background-color: var(--ffe-color-foreground-default); + color: var(--ffe-color-background-default); font-family: var(--ffe-g-font); font-variant-numeric: tabular-nums; diff --git a/packages/ffe-core/less/colors-deprecated.less b/packages/ffe-core/less/colors-deprecated.less deleted file mode 100644 index d9a75e5f48..0000000000 --- a/packages/ffe-core/less/colors-deprecated.less +++ /dev/null @@ -1,59 +0,0 @@ -// ************************************** Deprecated *******************************************************' - -// Blue (Deprecated) -@ffe-blue-royal: #002776; // Titles, lead, overlays -@ffe-blue-cobalt: #005aa4; // Primary buttons, emphasis on blue areas and product cards -@ffe-blue-azure: #0071cd; // Secondary buttons -@ffe-blue-sky: #7fc6e8; -@ffe-blue-pale: #dff1f9; // Info-boxes, etc. -@ffe-blue-ice: #eff8fc; // Expandable table rows -@ffe-blue-focus: #a1dfff; // Focus on buttons and controls - -// Green (Deprecated) -@ffe-green: #37b441; // E.g. slider tool -@ffe-green-shamrock: #008a00; // Action buttons, slider tool, (should indicate affordance) -@ffe-green-emerald: #007b00; -@ffe-green-mint: #e1f4e3; // ~20% opacity of ffe-green-shamrock. (Info-boxes, etc.) - -// Orange (Deprecated) -@ffe-orange: #ff9100; // Campaigns -@ffe-orange-fire: #da3d00; // Form validation, Error messages -@ffe-orange-salmon: #f3bbaa; // ~20% opacity of ffe-orange-fire. (Info-boxes, etc.) - -// Red (Deprecated) -@ffe-red: #e60000; - -// Purple (Deprecated) -@ffe-purple: #c94096; -@ffe-purple-magenta: #a20076; -@ffe-purple-violet: #551a8b; // Visited links - -// Beige (Deprecated) -@ffe-sand: #f8f5eb; // @ffe-sand + @ffe-sand-25 - -// White (Deprecated) -@ffe-white: #fff; - -// Grey (Deprecated) -@ffe-grey: #adadad; -@ffe-grey-cloud: #f4f4f4; // Background panels -@ffe-grey-silver: #ccc; // Lines, borders, inactive tool elements (slider, etc.) -@ffe-grey-charcoal: #676767; -@ffe-grey-warm: #f6f6f3; - -// Black (Deprecated) -@ffe-black: #262626; // Body text, and some other texts - -// Deprecated -@ffe-blue-deep-sky: #008ed2; // Deprecated 05.2018 - Use @ffe-blue-azure in stead -@ffe-sand-ivory: #fbfaf5; // Deprecated 05.2018 - Use @ffe-sand or @ffe-grey-warm in stead - -// Dark mode. Only for use in a native app context. (Deprecated) -@ffe-black-darkmode: #000000; // Default background color -@ffe-white-darkmode: #ffffff; // Emphasized text -@ffe-grey-charcoal-darkmode: #1c1c1c; // Emphasized surfaces -@ffe-grey-darkmode: #292929; // Interactive surfaces -@ffe-grey-silver-darkmode: #858585; // Borders and accents -@ffe-grey-cloud-darkmode: #cccccc; // Default font color on default background and form labels -@ffe-blue-azure-darkmode: #0a91ff; // Primary interaction and icon color -@ffe-red-darkmode: #ff2424; // Tweaked ffe-red for better contrast diff --git a/packages/ffe-core/less/colors.less b/packages/ffe-core/less/colors.less index 51dba074ec..bf683b0e4a 100644 --- a/packages/ffe-core/less/colors.less +++ b/packages/ffe-core/less/colors.less @@ -2,6 +2,7 @@ // ======== Ny visuell identitet ======== // +/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */ // Primærpalett @ffe-farge-fjell: #002776; @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%); diff --git a/packages/ffe-core/less/theme.less b/packages/ffe-core/less/theme.less index 4d26b5ecbe..f881f10912 100644 --- a/packages/ffe-core/less/theme.less +++ b/packages/ffe-core/less/theme.less @@ -3,9 +3,10 @@ /** * These variables are intended to support theming of components. Override any value to create your own look and feel. */ - :root, :host { + /* DEPRICATED, bruk colors-semantic i stedet for */ + /** Primærpalett */ --ffe-farge-fjell: @ffe-farge-fjell; --ffe-farge-fjell-70: @ffe-farge-fjell-70; @@ -61,6 +62,8 @@ --ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa; --ffe-farge-hvit: @ffe-farge-hvit; + /* END depricated */ + /** Font sizes */ --ffe-fontsize-body-text: 1rem; --ffe-fontsize-small-text: 0.875rem; @@ -125,18 +128,18 @@ /** Theme base colors */ /* Links, buttons and similar */ - --ffe-g-primary-color: var(--ffe-farge-vann); + --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated /* Headings, labels, hover, etc */ - --ffe-g-secondary-color: var(--ffe-farge-fjell); + --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated /* Error messages, invalid inputs, etc */ - --ffe-g-error-color: var(--ffe-farge-baer); + --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated /** Theme borders */ /* Form element borders */ - --ffe-g-border-color: var(--ffe-farge-varmgraa); + --ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated --ffe-g-border-radius: 8px; --ffe-g-border-radius-lg: 16px; --ffe-g-border-width: 1px; @@ -162,34 +165,26 @@ /** Typography */ /* Default body text color */ - --ffe-g-text-color: var(--ffe-farge-svart); + --ffe-g-text-color: var(--ffe-color-foreground-default); /* Lead paragraph */ - --ffe-g-lead-color: var(--ffe-farge-fjell); + --ffe-g-lead-color: var(--ffe-color-border-primary-subtle); /* Headings */ - --ffe-g-heading-color: var(--ffe-farge-fjell); + --ffe-g-heading-color: var(--ffe-color-border-primary-emphasis); /* Links */ - --ffe-g-link-color: var(--ffe-farge-vann); - --ffe-g-link-color-hover: var(--ffe-farge-fjell); - --ffe-g-link-color-visited: var(--ffe-farge-lyng); - --ffe-g-link-icon-color-hover: var(--ffe-farge-natt); - --ffe-g-link-icon-color-focus: var(--ffe-farge-vann); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-g-primary-color: var(--ffe-farge-vann-70); - --ffe-g-secondary-color: var(--ffe-farge-vann-70); - --ffe-g-border-color: var(--ffe-farge-graa); - --ffe-g-text-color: var(--ffe-farge-lysgraa); - --ffe-g-lead-color: var(--ffe-farge-vann-70); - --ffe-g-heading-color: var(--ffe-farge-vann-70); - --ffe-g-link-color: var(--ffe-farge-vann-70); - --ffe-g-link-color-hover: var(--ffe-farge-vann-30); - --ffe-g-link-color-visited: var(--ffe-farge-lyng-70); - --ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30); - --ffe-g-link-icon-color-focus: var(--ffe-farge-hvit); - } - } + --ffe-g-link-color: var(--ffe-color-foreground-interactive-link); + --ffe-g-link-color-hover: var( + --ffe-color-foreground-interactive-link-hover + ); + --ffe-g-link-color-visited: var( + --ffe-color-foreground-interactive-link-pressed + ); + --ffe-g-link-icon-color-hover: var( + --ffe-color-foreground-interactive-link-hover + ); + --ffe-g-link-icon-color-focus: var( + --ffe-color-foreground-interactive-link-pressed + ); } diff --git a/packages/ffe-core/less/typography.less b/packages/ffe-core/less/typography.less index 297a130e92..b516cb768a 100644 --- a/packages/ffe-core/less/typography.less +++ b/packages/ffe-core/less/typography.less @@ -1,5 +1,4 @@ @import 'breakpoints'; -@import 'colors'; .ffe-h1 { line-height: 2.25rem; @@ -33,7 +32,7 @@ .ffe-small-text, .ffe-micro-text { - color: var(--ffe-g-text-color); + color: var(--ffe-color-foreground-default); font-family: var(--ffe-g-font); font-weight: normal; font-variant-numeric: tabular-nums; @@ -59,7 +58,7 @@ .ffe-h4, .ffe-h5, .ffe-h6 { - color: var(--ffe-g-heading-color); + color: var(--ffe-color-foreground-emphasis); font-weight: normal; margin-bottom: var(--ffe-spacing-xs); margin-top: 0; @@ -67,7 +66,7 @@ overflow-wrap: anywhere; &--error { - color: var(--ffe-g-error-color); + color: var(--ffe-color-foreground-feedback-critical); } &--inline { @@ -79,13 +78,8 @@ } &--with-border { - border-bottom: 1px solid var(--ffe-farge-lysgraa); + border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis); padding-bottom: var(--ffe-spacing-xs); - .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - border-color: var(--ffe-farge-graa); - } - } } &--no-underline { @@ -111,7 +105,7 @@ } .ffe-body-text { - color: var(--ffe-g-text-color); + color: var(--ffe-color-foreground-default); font-family: var(--ffe-g-font); font-variant-numeric: tabular-nums; line-height: 1.5rem; @@ -124,7 +118,7 @@ margin-bottom: 1em; margin-top: 0; line-height: 1.5rem; - color: var(--ffe-g-text-color); + color: var(--ffe-color-foreground-default); text-wrap: pretty; &--text-center { @@ -150,20 +144,20 @@ } .ffe-lead-paragraph { - color: var(--ffe-g-lead-color); + color: var(--ffe-color-foreground-emphasis); line-height: 1.5rem; font-size: var(--ffe-fontsize-lead-paragraph); } .ffe-sub-lead-paragraph { - color: var(--ffe-g-text-color); + color: var(--ffe-color-foreground-default); line-height: 1.5rem; font-size: var(--ffe-fontsize-sub-lead-paragraph); } .ffe-link-text { - border-bottom: 1px solid var(--ffe-g-link-color); - color: var(--ffe-g-link-color); + border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link); + color: var(--ffe-color-foreground-interactive-link); cursor: pointer; text-decoration: none; word-wrap: break-all; @@ -172,15 +166,15 @@ @media (hover: hover) and (pointer: fine) { &:hover { - border-bottom-color: var(--ffe-g-link-color-hover); - color: var(--ffe-g-link-color-hover); + border-bottom-color: var(--ffe-color-foreground-interactive-link-hover); + color: var(--ffe-color-foreground-interactive-link-hover); text-decoration: none; } } &:visited { - border-bottom-color: var(--ffe-g-link-color-visited); - color: var(--ffe-g-link-color-visited); + border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed); + color: var(--ffe-color-foreground-interactive-link-pressed); text-decoration: none; } @@ -189,24 +183,17 @@ } &:focus { - border-color: var(--ffe-farge-hvit); - color: var(--ffe-farge-hvit); + border-color: var(--ffe-color-foreground-interactive-link-pressed); + color: var(--ffe-color-foreground-interactive-link-pressed); border-radius: 1px; - background-color: var(--ffe-g-link-color); - box-shadow: 0 0 0 2px var(--ffe-g-link-color); + background-color: var(--ffe-color-foreground-interactive-link); + box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link); outline: none; - - .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - border-color: var(--ffe-farge-svart) !important; - color: var(--ffe-farge-svart) !important; - } - } } } .ffe-link-icon { - fill: var(--ffe-g-link-color); + fill: var(--ffe-color-foreground-interactive-link); display: inline-flex; border-radius: 1.5rem; border: 2px solid transparent; @@ -215,30 +202,26 @@ @media (hover: hover) and (pointer: fine) { &:hover { - fill: var(--ffe-g-link-icon-color-hover); + fill: var(--ffe-color-foreground-interactive-link-hover); } } &:focus { - box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus); + box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed); } } .ffe-divider-line { border: none; - border-bottom: solid 1px var(--ffe-farge-lysgraa); + border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default); padding-top: 1px; padding-bottom: 1px; width: 100%; - .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - border-color: var(--ffe-farge-graa); - } - } } .ffe-strong-text { font-family: var(--ffe-g-font-strong); + color: var(--ffe-color-foreground-default); font-variant-numeric: tabular-nums; font-weight: normal; } @@ -248,18 +231,15 @@ font-variant-numeric: tabular-nums; font-weight: normal; font-style: normal; + color: var(--ffe-color-foreground-default); } .ffe-pre-text { - background-color: var(--ffe-farge-sand-70); + background-color: var(--ffe-color-background-subtle); + color: var(--ffe-color-foreground-default); font-family: consolas, menlo, monaco, monospace; margin: 0; text-align: left; - .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - background-color: var(--ffe-farge-koksgraa); - } - } } .ffe-inline-separator { diff --git a/packages/ffe-core/tokens.config.js b/packages/ffe-core/tokens.config.js index c5e7df0aba..532d18d86f 100644 --- a/packages/ffe-core/tokens.config.js +++ b/packages/ffe-core/tokens.config.js @@ -2,7 +2,6 @@ module.exports = { sources: [ 'less/breakpoints.less', 'less/colors.less', - 'less/colors-deprecated.less', 'less/dimensions.less', 'less/motion.less', 'less/spacing.less', From b04ff4a3b3d398bd9a69843a252ce4d5d8c0e5f5 Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Fri, 31 Jan 2025 12:41:27 +0100 Subject: [PATCH 2/4] feat(ffe-cards-react)!: Semantiske farger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: Fjerner shadow som paramater siden cards går over til å bruke boarder i stede --- packages/ffe-cards-react/src/CardBase.mdx | 4 +-- .../ffe-cards-react/src/CardBase.spec.tsx | 11 +------ .../ffe-cards-react/src/CardBase.stories.tsx | 3 +- packages/ffe-cards-react/src/CardBase.tsx | 11 +++---- .../src/GroupCard/GroupCard.mdx | 6 +--- .../src/GroupCard/GroupCard.stories.tsx | 25 +++------------ .../src/GroupCard/GroupCard.tsx | 5 +-- .../src/StippledCard/StippledCard.stories.tsx | 32 +++++++++++++++++-- .../src/components/CardAction.stories.tsx | 20 ++++++------ 9 files changed, 54 insertions(+), 63 deletions(-) diff --git a/packages/ffe-cards-react/src/CardBase.mdx b/packages/ffe-cards-react/src/CardBase.mdx index 4fa8ca32b2..73e007e039 100644 --- a/packages/ffe-cards-react/src/CardBase.mdx +++ b/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'; @@ -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`. diff --git a/packages/ffe-cards-react/src/CardBase.spec.tsx b/packages/ffe-cards-react/src/CardBase.spec.tsx index 439f31edf0..f144ce1185 100644 --- a/packages/ffe-cards-react/src/CardBase.spec.tsx +++ b/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('', () => { card.classList.contains('ffe-card-base--dm-bg-natt'), ).toBeTruthy(); }); - it('should set shadow-prop correctly', () => { - render( - -
- , - ); - const card = screen.getByTestId(TEST_ID); - expect(card.classList.contains('ffe-card-base--shadow')).toBeTruthy(); - }); it('should set noMargin-prop correctly', () => { render( diff --git a/packages/ffe-cards-react/src/CardBase.stories.tsx b/packages/ffe-cards-react/src/CardBase.stories.tsx index 3df58b1485..08de6cee69 100644 --- a/packages/ffe-cards-react/src/CardBase.stories.tsx +++ b/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> = props => (
@@ -30,7 +30,6 @@ type Story = StoryObj>; export const Standard: Story = { args: { as: 'div', - shadow: true, }, render: args => ( Dette er basisen for alle kort diff --git a/packages/ffe-cards-react/src/CardBase.tsx b/packages/ffe-cards-react/src/CardBase.tsx index 35289aa2a4..bb7fe281c3 100644 --- a/packages/ffe-cards-react/src/CardBase.tsx +++ b/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 = Omit< ComponentAsPropParams, 'children' > & { - shadow?: boolean; /** No margin on card */ noMargin?: boolean; textCenter?: boolean; @@ -29,7 +28,6 @@ function CardBaseWithForwardRef( ) { const { className, - shadow, noMargin, textCenter, bgColor, @@ -45,7 +43,6 @@ function CardBaseWithForwardRef( 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, diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx b/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx index 87a4576623..9640d3179b 100644 --- a/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx +++ b/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'; @@ -10,10 +10,6 @@ GroupCard er et kort med en liste av elementer inni. Det kan bestå av `GroupCar -Man kan modifisere GroupCard til å ikke ha skygge med `shadow={false}`. - - - `GroupCardElement` har linjer mellom elementene som standard, men det kan fjernes med `noSeparator`. diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx index 9ef761b32e..c79aa440c0 100644 --- a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx +++ b/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 = { title: 'Komponenter/Cards/GroupCard', @@ -16,9 +16,7 @@ export default meta; type Story = StoryObj; export const Standard: Story = { - args: { - shadow: true, - }, + args: {}, render: args => ( @@ -38,19 +36,6 @@ export const Standard: Story = { ), }; -export const ShadowFalse: Story = { - args: { - ...Standard.args, - shadow: false, - }, - render: args => ( - - Innhold nr 1 - Innhold nr 2 - Innhold nr 3 - - ), -}; export const NoSeparator: Story = { args: { ...Standard.args, diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx index b06c5138b6..880b6df18e 100644 --- a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx +++ b/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, '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}`]: diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx index 87dc04435d..0703df51f7 100644 --- a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx +++ b/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> = props => (
@@ -195,3 +195,29 @@ export const Condensed: Story = { ), }; + +export const WithCardAction: Story = { + args: { + as: 'div', + }, + render: args => ( + + {({ CardName, Title, Subtext, Text, CardAction }) => ( + <> + CardName + + <CardAction>Tittel</CardAction> + + Subtext er grå + + 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. + + + )} + + ), +}; diff --git a/packages/ffe-cards-react/src/components/CardAction.stories.tsx b/packages/ffe-cards-react/src/components/CardAction.stories.tsx index 03823dc620..2ee0128eaf 100644 --- a/packages/ffe-cards-react/src/components/CardAction.stories.tsx +++ b/packages/ffe-cards-react/src/components/CardAction.stories.tsx @@ -1,11 +1,11 @@ +import { Heading2, 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> = props => ( @@ -39,12 +39,12 @@ export const Standard: Story = { href: 'https://design.sparebank1.no', }, render: args => ( - + {({ CardAction }: CardActionRenderProps) => ( <> - + Lenke - + Hele kortet er klikkbart )} @@ -58,12 +58,12 @@ export const AsButton: Story = { type: 'button', }, render: args => ( - + {({ CardAction }: CardActionRenderProps) => ( <> - + Knapp - + Hele kortet er klikkbart )} From 1eab9dfa6b284a71681dcdf5e7e9a3d4f9da5f78 Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Fri, 31 Jan 2025 12:41:43 +0100 Subject: [PATCH 3/4] feat(ffe-cards)!: Semantiske farger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: infører semantiske farger --- packages/ffe-cards/less/card-base.less | 8 +-- packages/ffe-cards/less/cards.less | 2 +- .../ffe-cards/less/common-card-styling.less | 18 +++++-- packages/ffe-cards/less/components.less | 6 ++- packages/ffe-cards/less/group-card.less | 20 +++----- packages/ffe-cards/less/icon-card.less | 2 +- packages/ffe-cards/less/image-card.less | 20 +++++--- packages/ffe-cards/less/stippled-card.less | 3 +- packages/ffe-cards/less/theme.less | 49 +++++-------------- 9 files changed, 54 insertions(+), 74 deletions(-) diff --git a/packages/ffe-cards/less/card-base.less b/packages/ffe-cards/less/card-base.less index 3de92c5b55..14742fd5a1 100644 --- a/packages/ffe-cards/less/card-base.less +++ b/packages/ffe-cards/less/card-base.less @@ -1,14 +1,14 @@ @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; @@ -16,10 +16,6 @@ .card-background-styling(); - &--shadow { - box-shadow: var(--ffe-v-cards-common-card-box-shadow); - } - &--no-margin { margin: 0; } diff --git a/packages/ffe-cards/less/cards.less b/packages/ffe-cards/less/cards.less index 3ceb33fa26..76d2cedbab 100644 --- a/packages/ffe-cards/less/cards.less +++ b/packages/ffe-cards/less/cards.less @@ -1,4 +1,3 @@ -@import 'theme'; @import 'card-base'; @import 'text-card'; @import 'icon-card'; @@ -6,3 +5,4 @@ @import 'image-card'; @import 'stippled-card'; @import 'group-card'; +@import 'theme'; diff --git a/packages/ffe-cards/less/common-card-styling.less b/packages/ffe-cards/less/common-card-styling.less index 7cdb64dad0..db16eb53c8 100644 --- a/packages/ffe-cards/less/common-card-styling.less +++ b/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( diff --git a/packages/ffe-cards/less/components.less b/packages/ffe-cards/less/components.less index a4d813947b..efe91901ac 100644 --- a/packages/ffe-cards/less/components.less +++ b/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; diff --git a/packages/ffe-cards/less/group-card.less b/packages/ffe-cards/less/group-card.less index 9c09a9c197..5dd9966627 100644 --- a/packages/ffe-cards/less/group-card.less +++ b/packages/ffe-cards/less/group-card.less @@ -4,13 +4,14 @@ .common-card-styling(); .card-background-styling(); - position: relative; - border: var(--ffe-v-cards-common-group-card-border); - box-shadow: none; + --ffe-v-cards-common-group-card-border: var( + --ffe-v-cards-common-card-border-radius + ) + var(--ffe-color-border-primary-default); - &--shadow { - box-shadow: var(--ffe-v-cards-common-card-box-shadow); - } + color: var(--ffe-color-foreground-default); + position: relative; + border: 1px solid var(--ffe-v-cards-common-card-border-color); &--no-margin { margin: 0; @@ -40,7 +41,6 @@ } &__footer { - background-color: var(--ffe-v-group-card-footer-background-color); display: flex; justify-content: center; align-items: center; @@ -83,10 +83,4 @@ --ffe-v-cards-common-group-card-separation-border-color ); } - - .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - .card-background-dm-styling(); - } - } } diff --git a/packages/ffe-cards/less/icon-card.less b/packages/ffe-cards/less/icon-card.less index 0447da67ee..84a0b6e64e 100644 --- a/packages/ffe-cards/less/icon-card.less +++ b/packages/ffe-cards/less/icon-card.less @@ -32,7 +32,7 @@ } .ffe-icon-card__icon { - color: var(--ffe-v-cards-icon-color); + color: var(--ffe-color-foreground-emphasis); } &--condensed { diff --git a/packages/ffe-cards/less/image-card.less b/packages/ffe-cards/less/image-card.less index e3c4140118..b2fa43f212 100644 --- a/packages/ffe-cards/less/image-card.less +++ b/packages/ffe-cards/less/image-card.less @@ -3,6 +3,10 @@ @import 'components'; .ffe-image-card { + --ffe-v-cards-common-card-border-color: var( + --ffe-color-border-primary-default + ); + .common-card-styling(); &--clickable { @@ -13,27 +17,29 @@ margin: 0; } - --border-color: transparent; - display: flex; padding: 0; max-width: 290px; - border: var(--ffe-v-cards-image-card-border); + border: var(--ffe-v-cards-common-card-border-color); flex-flow: column nowrap; .ffe-image-card__image-overlay, .ffe-image-card__body { - border-color: var(--border-color); + border-color: var(--ffe-v-cards-common-card-border-color); } &:has(.ffe-card__action:active, .ffe-card__action:focus) { - --border-color: var(--ffe-v-cards-border-hover-color); + --ffe-v-cards-common-card-border-color: var( + --ffe-color-border-primary-hover + ); } &:has(.ffe-card__action) { @media (hover: hover) and (pointer: fine) { &:hover { - --border-color: var(--ffe-v-cards-border-hover-color); + --ffe-v-cards-common-card-border-color: var( + --ffe-color-border-primary-hover + ); } } } @@ -54,7 +60,7 @@ &__body { width: 100%; overflow: hidden; - border: 2px solid transparent; + border: 1px solid transparent; transition: border-color var(--ffe-transition-duration); } diff --git a/packages/ffe-cards/less/stippled-card.less b/packages/ffe-cards/less/stippled-card.less index d919a27244..52238ee667 100644 --- a/packages/ffe-cards/less/stippled-card.less +++ b/packages/ffe-cards/less/stippled-card.less @@ -2,6 +2,8 @@ @import 'components'; .ffe-stippled-card { + --ffe-v-cards-stippled-border-color: var(--ffe-color-foreground-emphasis); + .common-card-styling(); &--clickable { @@ -24,7 +26,6 @@ background: transparent; border: 2px dashed var(--ffe-v-cards-stippled-border-color); - box-shadow: none; display: flex; align-items: center; padding: var(--ffe-spacing-md); diff --git a/packages/ffe-cards/less/theme.less b/packages/ffe-cards/less/theme.less index 3e3c7efa0e..361bb4a785 100644 --- a/packages/ffe-cards/less/theme.less +++ b/packages/ffe-cards/less/theme.less @@ -1,46 +1,19 @@ :root, :host { - --ffe-v-cards-common-text-color: var(--ffe-g-text-color); - --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit); - --ffe-v-cards-common-card-border-color: transparent; - --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa); - --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0 - var(--ffe-v-cards-common-card-box-shadow-color); + --ffe-v-cards-common-text-color: var(--ffe-color-foreground-default); + --ffe-v-cards-common-card-background-color: var( + --ffe-color-surface-primary-default + ); --ffe-v-cards-common-card-border-radius: 16px; --ffe-v-cards-clickabe-card-link-visited-color: inherit; - --ffe-v-cards-subtext-color: var(--ffe-farge-moerkgraa); - --ffe-v-cards-border-hover-color: var(--ffe-farge-vann); - --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann); - --ffe-v-cards-icon-color: var(--ffe-farge-fjell); + --ffe-v-cards-subtext-color: var(--ffe-color-foreground-subtle); --ffe-v-cards-image-card-border: none; - --ffe-v-cards-common-group-card-border: none; + --ffe-v-cards-common-group-card-border: var( + --ffe-v-cards-common-card-border-radius + ) + var(--ffe-color-border-primary-default); --ffe-v-cards-common-group-card-separation-border-color: var( - --ffe-farge-lysgraa + --ffe-color-border-primary-default ); - --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30); - - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference { - --ffe-v-cards-common-text-color: var(--ffe-farge-hvit); - --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart); - --ffe-v-cards-common-card-border-color: var(--ffe-farge-koksgraa); - --ffe-v-cards-common-card-box-shadow: none; - --ffe-v-cards-clickabe-card-link-visited-color: var( - --ffe-farge-hvit - ); - --ffe-v-cards-subtext-color: var(--ffe-farge-graa); - --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color); - --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70); - --ffe-v-cards-icon-color: var(--ffe-farge-vann-70); - --ffe-v-cards-image-card-border: 1px solid var(--ffe-farge-koksgraa); - --ffe-v-cards-common-group-card-border: 1px solid - var(--ffe-farge-moerkgraa); - --ffe-v-cards-common-group-card-separation-border-color: var( - --ffe-farge-moerkgraa - ); - --ffe-v-group-card-footer-background-color: var( - --ffe-farge-koksgraa - ); - } - } + --ffe-v-cards-icon-color:var(--ffe-color-foreground-emphasis) ; } From 175034546f77215808165dd9eb9680a4faff124b Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Fri, 31 Jan 2025 15:21:38 +0100 Subject: [PATCH 4/4] fix(cards-react): fix --- packages/ffe-cards-react/src/components/CardAction.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ffe-cards-react/src/components/CardAction.stories.tsx b/packages/ffe-cards-react/src/components/CardAction.stories.tsx index 2ee0128eaf..09e70a5858 100644 --- a/packages/ffe-cards-react/src/components/CardAction.stories.tsx +++ b/packages/ffe-cards-react/src/components/CardAction.stories.tsx @@ -1,4 +1,4 @@ -import { Heading2, Heading4, Paragraph } from '@sb1/ffe-core-react'; +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';