From 1fbf6196c0cdc26408a01d8cf9bdf1d4f8eb64f6 Mon Sep 17 00:00:00 2001 From: Dag Frode Solberg Date: Wed, 22 Jan 2025 11:43:28 +0100 Subject: [PATCH] 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',