From 5373c8b46cb848b0888d6e3038aa74e0c416d4fb Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Tue, 4 Jun 2024 21:43:34 +0300 Subject: [PATCH] Language label redesign - admin listings --- client/scss/components/_status-tag.scss | 12 ++++++++---- client/src/tokens/colorThemes.js | 24 ++++++++++++++++++++++++ client/src/tokens/colorVariables.test.js | 8 ++++++++ client/src/tokens/colors.js | 9 +++++++++ client/src/tokens/objectStyles.js | 1 + 5 files changed, 50 insertions(+), 4 deletions(-) diff --git a/client/scss/components/_status-tag.scss b/client/scss/components/_status-tag.scss index 8d165683b863..cf61e3799432 100644 --- a/client/scss/components/_status-tag.scss +++ b/client/scss/components/_status-tag.scss @@ -29,10 +29,14 @@ } &--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'); + // stylelint-disable-next-line property-disallowed-list + text-transform: capitalize; + background: theme('colors.surface-status-label'); + border: 1px solid theme('colors.text-status-label'); + border-radius: theme('borderRadius.xxl'); } } diff --git a/client/src/tokens/colorThemes.js b/client/src/tokens/colorThemes.js index 68a0738e0c50..fbae8dd2493d 100644 --- a/client/src/tokens/colorThemes.js +++ b/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', + }, }, }, { diff --git a/client/src/tokens/colorVariables.test.js b/client/src/tokens/colorVariables.test.js index 5d1b251828de..2ab01179cabd 100644 --- a/client/src/tokens/colorVariables.test.js +++ b/client/src/tokens/colorVariables.test.js @@ -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)", } `); }); diff --git a/client/src/tokens/colors.js b/client/src/tokens/colors.js index 0cede50b82ea..5a4113e48d7e 100644 --- a/client/src/tokens/colors.js +++ b/client/src/tokens/colors.js @@ -219,6 +219,15 @@ const staticColors = { 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: 'Background and icons for information messages', + contrastText: 'white', + }, 50: { hex: '#E2F5FC', hsl: 'hsl(196.2 81.3% 93.7%)', diff --git a/client/src/tokens/objectStyles.js b/client/src/tokens/objectStyles.js index 43d5f02b1ca0..e193e818ae92 100644 --- a/client/src/tokens/objectStyles.js +++ b/client/src/tokens/objectStyles.js @@ -4,6 +4,7 @@ const borderRadius = { DEFAULT: '0.3125rem', // 5px md: '0.625rem', // 10px xl: '1.5rem', // 24px + xxl: '2rem', // 32px full: '100%', };