[Darkside] Named brand-color tokens (#3559)

* 💄 Update background Header

* 💄 Update popover padding for smaller screens

* 💄 Adjusted borders

* 💄 Uses Alpha-tokens for zebra-stripes in Table

* 💄 Stronger border for hovered timeline items, transparent track bg

* 💄 Transparent lines for Tabs to contrast colored bg

* 💄 New icons for Table-sorting

* 💄 Selected exoanded item now has accent colors

* 💄 Keeps border-color for active state in search-button

* 💄 Removed hover-color change on checked radio

* 💄 Only non-responsive or left-static guidepanels shrink on tablet or below

* 📝 Changeset

* 🚚 -hover tokens are now soft-hover

* ✨ Added soft-pressed token

* 💄 Use new soft-pressed token where applicable

* 💄 Default colored text is now 1000, strong replaced by subtle

* 🏷️ Updated primitive types for new text-tokens

* 🚚 Migrated old text-role-strong color to text-role-default

* 🚚 Migrated referansesider to new text-colors

* 🚚 Referansesider uses new soft-hover token

* 🐛 Fallback to updated accent-color

* [Darkside] Removed 'base' as neutral role replacement (#3556)

* ♻️ Remove default-scale as replacement for neutral in config

* 🧪 Setup chromatic-run for complete build

* 🚚 Text migrated

* 🚚 Text icon migrated

* 🚚 Text contrast migrated

* 🚚 bg soft migrated to neutral

* 🚚 bg moderate migrated to neutral

* 🚚 bg strong migrated to neutral

* 🚚 border default migrated to neutral

* 🚚 border subtle migrated to neutral

* 🚚 border strong migrated to neutral

* ⬅️ Revert chromatic preview

* 🚚 Migrated referansesider to new neutral scale

* 🚚 Use named brand and meta-colors

* 🚚 Referansesider uses new brand-names token

Author: KenAJoh

@navikt/core/css/darkside/tag.darkside.css

@@ -61,22 +61,22 @@
   --__axc-tag-text-strong: var(--ax-text-neutral-contrast);
 }
 
-.navds-tag--meta-1,
+.navds-tag--meta-purple,
 .navds-tag--alt1 {
-  --__axc-tag-border: var(--ax-border-meta-1);
-  --__axc-tag-bg: var(--ax-bg-meta-1-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-1-strong);
-  --__axc-tag-text: var(--ax-text-meta-1);
-  --__axc-tag-text-strong: var(--ax-text-meta-1-contrast);
+  --__axc-tag-border: var(--ax-border-meta-purple);
+  --__axc-tag-bg: var(--ax-bg-meta-purple-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-purple-strong);
+  --__axc-tag-text: var(--ax-text-meta-purple);
+  --__axc-tag-text-strong: var(--ax-text-meta-purple-contrast);
 }
 
-.navds-tag--meta-2,
+.navds-tag--meta-lime,
 .navds-tag--alt2 {
-  --__axc-tag-border: var(--ax-border-meta-2);
-  --__axc-tag-bg: var(--ax-bg-meta-2-moderateA);
-  --__axc-tag-bg-strong: var(--ax-bg-meta-2-strong);
-  --__axc-tag-text: var(--ax-text-meta-2);
-  --__axc-tag-text-strong: var(--ax-text-meta-2-contrast);
+  --__axc-tag-border: var(--ax-border-meta-lime);
+  --__axc-tag-bg: var(--ax-bg-meta-lime-moderateA);
+  --__axc-tag-bg-strong: var(--ax-bg-meta-lime-strong);
+  --__axc-tag-text: var(--ax-text-meta-lime);
+  --__axc-tag-text-strong: var(--ax-text-meta-lime-contrast);
 }
 
 .navds-tag--small {

@navikt/core/css/tag.css

@@ -128,42 +128,42 @@
 }
 
 .navds-tag--alt1,
-.navds-tag--outline.navds-tag--meta-1 {
+.navds-tag--outline.navds-tag--meta-purple {
   border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
   background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
   color: var(--ac-tag-alt-1-text, var(--a-text-default));
 }
 
 .navds-tag--alt1-filled,
-.navds-tag--strong.navds-tag--meta-1 {
+.navds-tag--strong.navds-tag--meta-purple {
   border-color: transparent;
   background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
   color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
 }
 
 .navds-tag--alt1-moderate,
-.navds-tag--moderate.navds-tag--meta-1 {
+.navds-tag--moderate.navds-tag--meta-purple {
   border-color: transparent;
   background-color: var(--ac-tag-alt-1-moderate-bg, var(--a-surface-alt-1-moderate));
   color: var(--ac-tag-alt-1-moderate-text, var(--a-text-default));
 }
 
 .navds-tag--alt2,
-.navds-tag--outline.navds-tag--meta-2 {
+.navds-tag--outline.navds-tag--meta-lime {
   border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
   background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
   color: var(--ac-tag-alt-2-text, var(--a-text-default));
 }
 
 .navds-tag--alt2-filled,
-.navds-tag--strong.navds-tag--meta-2 {
+.navds-tag--strong.navds-tag--meta-lime {
   border-color: transparent;
   background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
   color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
 }
 
 .navds-tag--alt2-moderate,
-.navds-tag--moderate.navds-tag--meta-2 {
+.navds-tag--moderate.navds-tag--meta-lime {
   border-color: transparent;
   background-color: var(--ac-tag-alt-2-moderate-bg, var(--a-surface-alt-2-moderate));
   color: var(--ac-tag-alt-2-moderate-text, var(--a-text-default));

@navikt/core/react/src/layout/box/Box.stories.tsx

@@ -407,7 +407,7 @@ export const BoxNewDarksideLight: Story = {
     <Box.New
       background="accent-moderate"
       shadow="dialog"
-      borderColor="brand-1-strong"
+      borderColor="brand-magenta-strong"
       borderWidth="2"
       padding="5"
       paddingInline="20"
@@ -423,7 +423,7 @@ export const BoxNewDarksideDark: Story = {
     <Box.New
       background="accent-moderate"
       shadow="dialog"
-      borderColor="brand-1-strong"
+      borderColor="brand-magenta-strong"
       borderWidth="2"
       padding="5"
       paddingInline="20"

@navikt/core/react/src/tag/Tag.tsx

@@ -34,12 +34,12 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     | "alt3-moderate";
 
   /* Temp hide these until naming is resolved */
-  // | "meta-1"
-  // | "meta-1-filled"
-  // | "meta-1-moderate"
-  // | "meta-2"
-  // | "meta-2-filled"
-  // | "meta-2-moderate";
+  // | "meta-purple"
+  // | "meta-purple-filled"
+  // | "meta-purple-moderate"
+  // | "meta-lime"
+  // | "meta-lime-filled"
+  // | "meta-lime-moderate";
   /**
    * @default "medium"
    */

@navikt/core/tokens/darkside/tokens/global-dark.ts

@@ -77,7 +77,7 @@ export const globalColorDarkModeConfigWithoutAlpha: Record<
     "900": { value: "#f28ea2", type: "global-color", group: "danger" },
     "1000": { value: "#f6b7cd", type: "global-color", group: "danger" },
   },
-  /* Info is currently just a copy of brandThree */
+  /* Info is currently just a copy of brandBlue */
   info: {
     "100": { value: "#071e2d", type: "global-color", group: "info" },
     "200": { value: "#0d2534", type: "global-color", group: "info" },
@@ -90,64 +90,64 @@ export const globalColorDarkModeConfigWithoutAlpha: Record<
     "900": { value: "#93afc0", type: "global-color", group: "info" },
     "1000": { value: "#b7cbd7", type: "global-color", group: "info" },
   },
-  "brand-1": {
-    "100": { value: "#321220", type: "global-color", group: "brand-1" },
-    "200": { value: "#3a1827", type: "global-color", group: "brand-1" },
-    "300": { value: "#42202e", type: "global-color", group: "brand-1" },
-    "400": { value: "#4e2a39", type: "global-color", group: "brand-1" },
-    "500": { value: "#a35276", type: "global-color", group: "brand-1" },
-    "600": { value: "#b06886", type: "global-color", group: "brand-1" },
-    "700": { value: "#be7f99", type: "global-color", group: "brand-1" },
-    "800": { value: "#c58aa2", type: "global-color", group: "brand-1" },
-    "900": { value: "#cf9eb1", type: "global-color", group: "brand-1" },
-    "1000": { value: "#e1c0cc", type: "global-color", group: "brand-1" },
+  "brand-magenta": {
+    "100": { value: "#321220", type: "global-color", group: "brand-magenta" },
+    "200": { value: "#3a1827", type: "global-color", group: "brand-magenta" },
+    "300": { value: "#42202e", type: "global-color", group: "brand-magenta" },
+    "400": { value: "#4e2a39", type: "global-color", group: "brand-magenta" },
+    "500": { value: "#a35276", type: "global-color", group: "brand-magenta" },
+    "600": { value: "#b06886", type: "global-color", group: "brand-magenta" },
+    "700": { value: "#be7f99", type: "global-color", group: "brand-magenta" },
+    "800": { value: "#c58aa2", type: "global-color", group: "brand-magenta" },
+    "900": { value: "#cf9eb1", type: "global-color", group: "brand-magenta" },
+    "1000": { value: "#e1c0cc", type: "global-color", group: "brand-magenta" },
   },
-  "brand-2": {
-    "100": { value: "#2d160e", type: "global-color", group: "brand-2" },
-    "200": { value: "#351d15", type: "global-color", group: "brand-2" },
-    "300": { value: "#3d241c", type: "global-color", group: "brand-2" },
-    "400": { value: "#493027", type: "global-color", group: "brand-2" },
-    "500": { value: "#975e4a", type: "global-color", group: "brand-2" },
-    "600": { value: "#ab6f5b", type: "global-color", group: "brand-2" },
-    "700": { value: "#c0836e", type: "global-color", group: "brand-2" },
-    "800": { value: "#c78e79", type: "global-color", group: "brand-2" },
-    "900": { value: "#d1a08c", type: "global-color", group: "brand-2" },
-    "1000": { value: "#e3c2b1", type: "global-color", group: "brand-2" },
+  "brand-beige": {
+    "100": { value: "#2d160e", type: "global-color", group: "brand-beige" },
+    "200": { value: "#351d15", type: "global-color", group: "brand-beige" },
+    "300": { value: "#3d241c", type: "global-color", group: "brand-beige" },
+    "400": { value: "#493027", type: "global-color", group: "brand-beige" },
+    "500": { value: "#975e4a", type: "global-color", group: "brand-beige" },
+    "600": { value: "#ab6f5b", type: "global-color", group: "brand-beige" },
+    "700": { value: "#c0836e", type: "global-color", group: "brand-beige" },
+    "800": { value: "#c78e79", type: "global-color", group: "brand-beige" },
+    "900": { value: "#d1a08c", type: "global-color", group: "brand-beige" },
+    "1000": { value: "#e3c2b1", type: "global-color", group: "brand-beige" },
   },
-  "brand-3": {
-    "100": { value: "#071e2d", type: "global-color", group: "brand-3" },
-    "200": { value: "#0d2534", type: "global-color", group: "brand-3" },
-    "300": { value: "#122d3e", type: "global-color", group: "brand-3" },
-    "400": { value: "#19394c", type: "global-color", group: "brand-3" },
-    "500": { value: "#43718d", type: "global-color", group: "brand-3" },
-    "600": { value: "#5a839b", type: "global-color", group: "brand-3" },
-    "700": { value: "#7396ab", type: "global-color", group: "brand-3" },
-    "800": { value: "#7f9fb3", type: "global-color", group: "brand-3" },
-    "900": { value: "#93afc0", type: "global-color", group: "brand-3" },
-    "1000": { value: "#b7cbd7", type: "global-color", group: "brand-3" },
+  "brand-blue": {
+    "100": { value: "#071e2d", type: "global-color", group: "brand-blue" },
+    "200": { value: "#0d2534", type: "global-color", group: "brand-blue" },
+    "300": { value: "#122d3e", type: "global-color", group: "brand-blue" },
+    "400": { value: "#19394c", type: "global-color", group: "brand-blue" },
+    "500": { value: "#43718d", type: "global-color", group: "brand-blue" },
+    "600": { value: "#5a839b", type: "global-color", group: "brand-blue" },
+    "700": { value: "#7396ab", type: "global-color", group: "brand-blue" },
+    "800": { value: "#7f9fb3", type: "global-color", group: "brand-blue" },
+    "900": { value: "#93afc0", type: "global-color", group: "brand-blue" },
+    "1000": { value: "#b7cbd7", type: "global-color", group: "brand-blue" },
   },
-  "meta-1": {
-    "100": { value: "#221a2c", type: "global-color", group: "meta-1" },
-    "200": { value: "#272032", type: "global-color", group: "meta-1" },
-    "300": { value: "#2f273a", type: "global-color", group: "meta-1" },
-    "400": { value: "#3a3245", type: "global-color", group: "meta-1" },
-    "500": { value: "#776491", type: "global-color", group: "meta-1" },
-    "600": { value: "#8876a1", type: "global-color", group: "meta-1" },
-    "700": { value: "#9b8bb0", type: "global-color", group: "meta-1" },
-    "800": { value: "#a495b7", type: "global-color", group: "meta-1" },
-    "900": { value: "#b2a7c3", type: "global-color", group: "meta-1" },
-    "1000": { value: "#cdc5d9", type: "global-color", group: "meta-1" },
+  "meta-purple": {
+    "100": { value: "#221a2c", type: "global-color", group: "meta-purple" },
+    "200": { value: "#272032", type: "global-color", group: "meta-purple" },
+    "300": { value: "#2f273a", type: "global-color", group: "meta-purple" },
+    "400": { value: "#3a3245", type: "global-color", group: "meta-purple" },
+    "500": { value: "#776491", type: "global-color", group: "meta-purple" },
+    "600": { value: "#8876a1", type: "global-color", group: "meta-purple" },
+    "700": { value: "#9b8bb0", type: "global-color", group: "meta-purple" },
+    "800": { value: "#a495b7", type: "global-color", group: "meta-purple" },
+    "900": { value: "#b2a7c3", type: "global-color", group: "meta-purple" },
+    "1000": { value: "#cdc5d9", type: "global-color", group: "meta-purple" },
   },
-  "meta-2": {
-    "100": { value: "#1c1f00", type: "global-color", group: "meta-2" },
-    "200": { value: "#222500", type: "global-color", group: "meta-2" },
-    "300": { value: "#292d00", type: "global-color", group: "meta-2" },
-    "400": { value: "#343900", type: "global-color", group: "meta-2" },
-    "500": { value: "#6a7200", type: "global-color", group: "meta-2" },
-    "600": { value: "#7c8400", type: "global-color", group: "meta-2" },
-    "700": { value: "#8f9800", type: "global-color", group: "meta-2" },
-    "800": { value: "#99a200", type: "global-color", group: "meta-2" },
-    "900": { value: "#a9b325", type: "global-color", group: "meta-2" },
-    "1000": { value: "#c5d14c", type: "global-color", group: "meta-2" },
+  "meta-lime": {
+    "100": { value: "#1c1f00", type: "global-color", group: "meta-lime" },
+    "200": { value: "#222500", type: "global-color", group: "meta-lime" },
+    "300": { value: "#292d00", type: "global-color", group: "meta-lime" },
+    "400": { value: "#343900", type: "global-color", group: "meta-lime" },
+    "500": { value: "#6a7200", type: "global-color", group: "meta-lime" },
+    "600": { value: "#7c8400", type: "global-color", group: "meta-lime" },
+    "700": { value: "#8f9800", type: "global-color", group: "meta-lime" },
+    "800": { value: "#99a200", type: "global-color", group: "meta-lime" },
+    "900": { value: "#a9b325", type: "global-color", group: "meta-lime" },
+    "1000": { value: "#c5d14c", type: "global-color", group: "meta-lime" },
   },
 } as const;