Language label redesign - admin listings (#12010)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -14,6 +14,7 @@ Changelog
  * Add `copy_for_translation_done` signal when a page is copied for translation (Arnar Tumi Þorsteinsson)
  * Remove reduced opacity for draft page title in listings (Inju Michorius)
  * Adopt more compact representation for StreamField definitions in migrations (Matt Westcott)
+ * Implement a new design for locale labels in listings (Albina Starykova)
  * Fix: Make `WAGTAILIMAGES_CHOOSER_PAGE_SIZE` setting functional again (Rohit Sharma)
  * Fix: Enable `richtext` template tag to convert lazy translation values (Benjamin Bach)
  * Fix: Ensure permission labels on group permissions page are translated where available (Matt Westcott)

client/scss/components/_status-tag.scss

@@ -29,10 +29,12 @@
   }
 
   &--label {
-    color: theme('colors.text-context');
-    background: theme('colors.border-button-small-outline-default');
-    border: theme('colors.border-button-small-outline-default');
-    font-weight: 500;
+    padding: theme('spacing.[0.5]') theme('spacing.2');
+    color: theme('colors.text-status-label');
+    font-weight: theme('fontWeight.medium');
+    background: theme('colors.surface-status-label');
+    border: 1px solid theme('colors.text-status-label');
+    border-radius: theme('borderRadius.xl');
   }
 }
 

client/src/tokens/colorThemes.js

@@ -100,6 +100,12 @@ const light = [
         textUtility: 'w-text-surface-button-critical-hover',
         cssVariable: '--w-color-surface-button-critical-hover',
       },
+      'surface-status-label': {
+        value: 'var(--w-color-info-50)',
+        bgUtility: 'w-bg-surface-status-label',
+        textUtility: 'w-text-surface-status-label',
+        cssVariable: '--w-color-surface-status-label',
+      },
     },
   },
   {
@@ -189,6 +195,12 @@ const light = [
         textUtility: 'w-text-text-button-critical-outline-hover',
         cssVariable: '--w-color-text-button-critical-outline-hover',
       },
+      'text-status-label': {
+        value: 'var(--w-color-info-100)',
+        bgUtility: 'w-bg-text-status-label',
+        textUtility: 'w-text-text-status-label',
+        cssVariable: '--w-color-text-status-label',
+      },
     },
   },
   {
@@ -358,6 +370,12 @@ const dark = [
         textUtility: 'w-text-surface-button-critical-hover',
         cssVariable: '--w-color-surface-button-critical-hover',
       },
+      'surface-status-label': {
+        value: 'var(--w-color-grey-600)',
+        bgUtility: 'w-bg-surface-status-label',
+        textUtility: 'w-text-surface-status-label',
+        cssVariable: '--w-color-surface-status-label',
+      },
     },
   },
   {
@@ -447,6 +465,12 @@ const dark = [
         textUtility: 'w-text-text-button-critical-outline-hover',
         cssVariable: '--w-color-text-button-critical-outline-hover',
       },
+      'text-status-label': {
+        value: 'var(--w-color-info-75)',
+        bgUtility: 'w-bg-text-status-label',
+        textUtility: 'w-text-text-status-label',
+        cssVariable: '--w-color-text-status-label',
+      },
     },
   },
   {

client/src/tokens/colorVariables.test.js

@@ -80,7 +80,7 @@ describe('generateColorVariables', () => {
         "--w-color-grey-800-lightness": "11.4%",
         "--w-color-grey-800-saturation": "0%",
         "--w-color-info-100": "hsl(var(--w-color-info-100-hue) var(--w-color-info-100-saturation) var(--w-color-info-100-lightness))",
-        "--w-color-info-100-hue": "calc(var(--w-color-info-125-hue) - 1)",
+        "--w-color-info-100-hue": "calc(var(--w-color-info-125-hue) - 0.1)",
         "--w-color-info-100-lightness": "calc(var(--w-color-info-125-lightness) + 6.5%)",
         "--w-color-info-100-saturation": "calc(var(--w-color-info-125-saturation) + 0.7%)",
         "--w-color-info-125": "hsl(var(--w-color-info-125-hue) var(--w-color-info-125-saturation) var(--w-color-info-125-lightness))",
@@ -91,6 +91,10 @@ describe('generateColorVariables', () => {
         "--w-color-info-50-hue": "calc(var(--w-color-info-125-hue) + 2.2)",
         "--w-color-info-50-lightness": "calc(var(--w-color-info-125-lightness) + 65.9%)",
         "--w-color-info-50-saturation": "calc(var(--w-color-info-125-saturation) + 15.1%)",
+        "--w-color-info-75": "hsl(var(--w-color-info-75-hue) var(--w-color-info-75-saturation) var(--w-color-info-75-lightness))",
+        "--w-color-info-75-hue": "calc(var(--w-color-info-125-hue) + 0.4)",
+        "--w-color-info-75-lightness": "calc(var(--w-color-info-125-lightness) + 36.3%)",
+        "--w-color-info-75-saturation": "calc(var(--w-color-info-125-saturation) - 27.4%)",
         "--w-color-positive-100": "hsl(var(--w-color-positive-100-hue) var(--w-color-positive-100-saturation) var(--w-color-positive-100-lightness))",
         "--w-color-positive-100-hue": "162.1",
         "--w-color-positive-100-lightness": "31.6%",
@@ -213,6 +217,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-menu-item-active": "var(--w-color-primary-200)",
         "--w-color-surface-menus": "var(--w-color-primary)",
         "--w-color-surface-page": "var(--w-color-white)",
+        "--w-color-surface-status-label": "var(--w-color-info-50)",
         "--w-color-surface-tooltip": "var(--w-color-primary-200)",
         "--w-color-text-button": "var(--w-color-white)",
         "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-200)",
@@ -228,6 +233,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-text-link-hover": "var(--w-color-secondary-400)",
         "--w-color-text-meta": "var(--w-color-grey-400)",
         "--w-color-text-placeholder": "var(--w-color-grey-400)",
+        "--w-color-text-status-label": "var(--w-color-info-100)",
       }
     `);
   });
@@ -260,6 +266,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-surface-menu-item-active": "var(--w-color-grey-700)",
         "--w-color-surface-menus": "var(--w-color-grey-800)",
         "--w-color-surface-page": "var(--w-color-grey-600)",
+        "--w-color-surface-status-label": "var(--w-color-grey-600)",
         "--w-color-surface-tooltip": "var(--w-color-grey-500)",
         "--w-color-text-button": "var(--w-color-white)",
         "--w-color-text-button-critical-outline-hover": "var(--w-color-critical-50)",
@@ -275,6 +282,7 @@ describe('generateThemeColorVariables', () => {
         "--w-color-text-link-hover": "var(--w-color-secondary-75)",
         "--w-color-text-meta": "var(--w-color-grey-150)",
         "--w-color-text-placeholder": "var(--w-color-grey-200)",
+        "--w-color-text-status-label": "var(--w-color-info-75)",
       }
     `);
   });

client/src/tokens/colors.js

@@ -212,13 +212,22 @@ const staticColors = {
     },
     100: {
       hex: '#1D7792',
-      hsl: 'hsl(193 66.9% 34.3%)',
+      hsl: 'hsl(193.9 66.9% 34.3%)',
       bgUtility: 'w-bg-info-100',
       textUtility: 'w-text-info-100',
       cssVariable: '--w-color-info-100',
       usage: 'Background and icons for information messages',
       contrastText: 'white',
     },
+    75: {
+      hex: '#80B6C7',
+      hsl: 'hsl(194.4, 38.8%, 64.1%)',
+      bgUtility: 'w-bg-info-75',
+      textUtility: 'w-text-info-75',
+      cssVariable: '--w-color-info-75',
+      usage: 'Info text in the dark theme',
+      contrastText: 'primary',
+    },
     50: {
       hex: '#E2F5FC',
       hsl: 'hsl(196.2 81.3% 93.7%)',

docs/releases/6.2.md

@@ -24,6 +24,7 @@ depth: 1
  * Add `copy_for_translation_done` signal when a page is copied for translation (Arnar Tumi Þorsteinsson)
  * Remove reduced opacity for draft page title in listings (Inju Michorius)
  * Adopt more compact representation for StreamField definitions in migrations (Matt Westcott)
+ * Implement a new design for locale labels in listings (Albina Starykova)
 
 
 ### Bug fixes