@gitlab/ui 62.5.0 → 62.5.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [62.5.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.5.1...v62.5.2) (2023-05-01)
+
+
+### Bug Fixes
+
+* **GlToggle:** set aria-disabled attribute ([a899eb7](https://gitlab.com/gitlab-org/gitlab-ui/commit/a899eb7acd23d089ddb43c3bcd66a0aae7fe3c6f))
+
+## [62.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.5.0...v62.5.1) (2023-04-28)
+
+
+### Bug Fixes
+
+* **utils:** Change color util to use relative luminance ([6245128](https://gitlab.com/gitlab-org/gitlab-ui/commit/6245128c7256e3d8db164b92e9580c79d47e9183))
+
 # [62.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.4.0...v62.5.0) (2023-04-25)
 
 

package/README.md

@@ -121,25 +121,6 @@ should conform with the design system specs, and they should look correct in the
 the GitLab product. Please see [Debugging GitLab UI issues with GitLab product CSS](doc/debugging-gitlab-ui-with-gitlab-css.md)
 for information on how to debug issues with GitLab product CSS in GitLab UI.
 
-#### Running visual regression tests locally
-
-Visual difference tests form part of the test suite. Rendered output can vary
-from host to host (e.g., due to available fonts and how each platform renders
-them), so these can fail when run locally. The easiest way to work around this
-is to run a percent-based diff, and to increase the failure threshold with the
-`FAILURE_THRESHOLD_TYPE` and `FAILURE_THRESHOLD` environment variables:
-
-```sh
-# Sets a 2% threshold
-FAILURE_THRESHOLD_TYPE='percent' FAILURE_THRESHOLD=.02 yarn test:visual
-```
-
-`FAILURE_THRESHOLD_TYPE` defaults to `'pixel'` and `FAILURE_THRESHOLD` defaults to `1`. In the CI
-environment, we consider a 1 pixel difference as a false negative that should not fail the test.
-
-Under the hood, those variables are passed to
-[`jest-image-snapshot`](https://github.com/americanexpress/jest-image-snapshot)'s config
-
 ### End to end tests
 
 Components’ end to end tests live in the `cypress/e2e` folder. See our

package/dist/components/base/toggle/toggle.js

@@ -145,7 +145,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       'gl-toggle': true,
       'is-checked': _vm.value,
       'is-disabled': _vm.disabled,
-    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
+    },attrs:{"role":"switch","aria-checked":_vm.isChecked,"aria-labelledby":_vm.labelId,"aria-describedby":_vm.helpId,"aria-disabled":_vm.disabled,"type":"button"},on:{"click":function($event){$event.preventDefault();return _vm.toggleFeature.apply(null, arguments)}}},[(_vm.isLoading)?_c('gl-loading-icon',{staticClass:"toggle-loading",attrs:{"color":"light"}}):_c('span',{class:{ 'toggle-icon': true, disabled: _vm.disabled }},[_c('gl-icon',{attrs:{"name":_vm.icon,"size":16}})],1)],1),_vm._v(" "),(_vm.shouldRenderHelp)?_c('span',{staticClass:"gl-help-label",attrs:{"id":_vm.helpId,"data-testid":"toggle-help"}},[_vm._t("help",function(){return [_vm._v(_vm._s(_vm.help))]})],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/utils/utils.js

@@ -44,21 +44,38 @@ function hexToRgba(hex) {
   const [r, g, b] = rgbFromHex(hex);
   return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }
+function toSrgb(value) {
+  const normalized = value / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(rgb) {
+  // WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+  // -
+  // WCAG 3.0 will use APAC
+  // Using APAC would be the ultimate goal, but was dismissed by engineering as of now
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
+  return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
+}
 function colorFromBackground(backgroundColor) {
-  let r;
-  let g;
-  let b;
+  let color;
+  const lightColor = rgbFromHex('#FFFFFF');
+  const darkColor = rgbFromHex('#1f1e24');
   if (backgroundColor.startsWith('#')) {
-    [r, g, b] = rgbFromHex(backgroundColor);
+    color = rgbFromHex(backgroundColor);
   } else if (backgroundColor.startsWith('rgba(')) {
-    [r, g, b] = rgbFromString(backgroundColor, 5);
+    color = rgbFromString(backgroundColor, 5);
   } else if (backgroundColor.startsWith('rgb(')) {
-    [r, g, b] = rgbFromString(backgroundColor, 4);
+    color = rgbFromString(backgroundColor, 4);
   }
-  if (r + g + b <= 500) {
-    return labelColorOptions.light;
-  }
-  return labelColorOptions.dark;
+  const luminance = relativeLuminance(color);
+  const lightLuminance = relativeLuminance(lightColor);
+  const darkLuminance = relativeLuminance(darkColor);
+  const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
+  const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
+
+  // Using a threshold contrast of 2.4 instead of 3
+  // as this will solve weird color combinations in the mid tones
+  return contrastLight >= 2.4 || contrastLight > contrastDark ? labelColorOptions.light : labelColorOptions.dark;
 }
 function uid() {
   return Math.random().toString(36).substring(2);
@@ -156,4 +173,4 @@ function filterVisible(els) {
   return (els || []).filter(isVisible);
 }
 
-export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, rgbFromHex, rgbFromString, stopEvent, throttle, uid };
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.5.0",
+  "version": "62.5.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -29,13 +29,13 @@
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && node ./bin/run_storybook.js --ci --host localhost --port 9001 -c .storybook",
-    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 node ./bin/run_storybook.js --ci --host localhost --port 9001 -c .storybook",
+    "storybook": "yarn storybook-prep && storybook dev --ci --host localhost --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host localhost --port 9001 -c .storybook",
     "storybook-prep": "run-s generate-utilities build-scss-variables copy-fonts",
-    "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook",
+    "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-scss-variables",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://localhost:9001 cy:run",
+    "test:integration": "NODE_ENV=test start-server-and-test start http://localhost:9001/iframe.html cy:run",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
@@ -45,7 +45,7 @@
     "test:visual": "./bin/run-visual-tests.sh 'jest ./tests/storyshots.spec.js'",
     "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "./bin/run-visual-tests.sh 'JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 jest ./tests/storyshots.spec.js --updateSnapshot'",
-    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001",
+    "test:visual:internal": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001/iframe.html",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
@@ -78,8 +78,6 @@
     "vue": "^2.6.10"
   },
   "resolutions": {
-    "@storybook/vue/webpack": "^5.9.0",
-    "@storybook/vue3/vue-loader": "^17.0.0",
     "chokidar": "^3.5.2",
     "sane": "^5.0.1"
   },
@@ -87,24 +85,26 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
-    "@gitlab/eslint-plugin": "18.3.2",
+    "@babel/preset-react": "^7.18.6",
+    "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.40.0",
+    "@gitlab/svgs": "3.42.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-storyshots": "6.5.16",
-    "@storybook/addon-storyshots-puppeteer": "6.5.16",
-    "@storybook/addon-viewport": "6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/theming": "6.5.16",
-    "@storybook/vue": "6.5.16",
-    "@storybook/vue3": "6.5.16",
+    "@storybook/addon-a11y": "7.0.7",
+    "@storybook/addon-docs": "7.0.7",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-storyshots": "7.0.7",
+    "@storybook/addon-storyshots-puppeteer": "7.0.7",
+    "@storybook/addon-viewport": "7.0.7",
+    "@storybook/builder-webpack5": "7.0.7",
+    "@storybook/theming": "7.0.7",
+    "@storybook/vue": "7.0.7",
+    "@storybook/vue-webpack5": "7.0.7",
+    "@storybook/vue3": "7.0.7",
+    "@storybook/vue3-webpack5": "7.0.7",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -115,15 +115,13 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.6.2",
-    "cypress": "12.10.0",
+    "cypress": "12.11.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.38.0",
+    "eslint": "8.39.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-storybook": "0.6.11",
-    "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
@@ -142,6 +140,8 @@
     "prettier": "2.6.2",
     "puppeteer": "15.5.0",
     "raw-loader": "^0.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^2.53.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-postcss": "^3.1.1",
@@ -153,7 +153,8 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook-dark-mode": "^1.0.8",
+    "storybook": "7.0.7",
+    "storybook-dark-mode": "3.0.0",
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-prettier": "2.0.0",

package/src/components/base/badge/badge.md

@@ -4,9 +4,7 @@ indicate an issue’s status, a member’s role, or if a branch is protected.
 
 ## Usage
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-badge>Hello, world!</gl-badge>
 ```
 

package/src/components/base/button/button.md

@@ -19,9 +19,7 @@ with the necessary classes added to make it look like a button, it shares the sa
 Icon-only buttons must have an accessible name.
 You can provide one with the `aria-label` attribute, which is read out by screen readers.
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-button icon="close" aria-label="Close" />
 ```
 

package/src/components/base/filtered_search/filtered_search.md

@@ -71,8 +71,6 @@ const availableTokens = [
 Pass the list of tokens to the search component. Optionally, you can use `v-model` to receive
 realtime updates:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-filtered-search :available-tokens="tokens" v-model="value" terms-as-tokens />
 ```

package/src/components/base/keyset_pagination/keyset_pagination.md

@@ -10,9 +10,7 @@ is to `v-bind` to the
 [`PageInfo`](https://docs.gitlab.com/ee/api/graphql/reference/#pageinfo) type
 returned by the endpoint:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-keyset-pagination v-bind="pageInfo" />
 ```
 
@@ -27,9 +25,7 @@ can't be translated.
 
 Example:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-keyset-pagination v-bind="pageInfo" :prev-text="__('Prev')" :next-text="__('Next')" />
 ```
 

package/src/components/base/markdown/markdown.md

@@ -40,9 +40,7 @@ selector to the root element that contains the markdown-generated HTML.
 
 Set the `compact` property to true in `GlMarkdown` to apply the compact markdown styles.
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-markdown compact></gl-compact>
 ```
 

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -4,9 +4,7 @@ to make sure this is the right dropdown component for you.
 
 ### Basic usage
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-disclosure-dropdown-dropdown toggle-text="Actions" :items="items" />
 ```
 

package/src/components/base/toggle/toggle.spec.js

@@ -50,10 +50,10 @@ describe('toggle', () => {
   });
 
   describe.each`
-    state         | disabled | disabledClassExpected | changeEventPayload
-    ${'enabled'}  | ${false} | ${false}              | ${[[true]]}
-    ${'disabled'} | ${true}  | ${true}               | ${undefined}
-  `('when $state', ({ disabled, disabledClassExpected, changeEventPayload }) => {
+    state         | disabled | disabledClassExpected | changeEventPayload | ariaDisabledValue
+    ${'enabled'}  | ${false} | ${false}              | ${[[true]]}        | ${undefined}
+    ${'disabled'} | ${true}  | ${true}               | ${undefined}       | ${'true'}
+  `('when $state', ({ disabled, disabledClassExpected, changeEventPayload, ariaDisabledValue }) => {
     beforeEach(() => {
       createWrapper({ disabled });
     });
@@ -67,6 +67,10 @@ describe('toggle', () => {
 
       expect(wrapper.emitted('change')).toEqual(changeEventPayload);
     });
+
+    it(`sets aria-disabled attribute to ${ariaDisabledValue}`, () => {
+      expect(findButton().attributes('aria-disabled')).toBe(ariaDisabledValue);
+    });
   });
 
   describe.each`

package/src/components/base/toggle/toggle.vue

@@ -172,6 +172,7 @@ export default {
       :aria-checked="isChecked"
       :aria-labelledby="labelId"
       :aria-describedby="helpId"
+      :aria-disabled="disabled"
       :class="{
         'gl-toggle': true,
         'is-checked': value,

package/src/components/utilities/friendly_wrap/friendly_wrap.md

@@ -21,17 +21,13 @@ wbr {
 By default, `GlFriendlyWrap` wraps text with slashes (`/`) as the break-symbol, which is especially
 useful when displaying paths or URLs:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-friendly-wrap text="/some/file/path" />
 ```
 
 The code above renders to the following HTML:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span class="text-break">/<wbr>some/<wbr>file/<wbr>path</span>
 ```
 
@@ -48,9 +44,7 @@ Multiple custom break-symbols can be defined via the `GlFriendlyWrap` prop:
 
 Which renders to:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span class="text-break">some;<wbr>text-<wbr>that.<wbr>needs;<wbr>to-<wbr>be.<wbr>wrapped</span>
 ```
 
@@ -67,8 +61,6 @@ Symbols can be words too:
 
 Which renders to:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span class="text-break">it goes on and<wbr> on and<wbr> on and<wbr> on</span>
 ```

package/src/components/utilities/intersperse/intersperse.md

@@ -34,9 +34,7 @@ consistent formatting.
 
 This renders to the following HTML:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>
 ```
 
@@ -54,9 +52,7 @@ A custom separator can be defined via the `separator` prop:
 
 This renders to the following HTML:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>
 ```
 
@@ -74,9 +70,7 @@ A custom last separator can be defined via the `lastSeparator` prop:
 
 This renders to the following HTML:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>
 ```
 
@@ -91,8 +85,6 @@ A custom last separator used on two items will only place `lastSeparator` betwee
 
 This renders to the following HTML:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <span><span>Item 1</span> and <span>Item 2</span></span>
 ```

package/src/components/utilities/sprintf/sprintf.md

@@ -130,9 +130,7 @@ export default {
 
 The example above renders to this HTML:
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <div>Written by <span>Some author</span></div>
 ```
 

package/src/components/utilities/truncate/truncate.md

@@ -4,9 +4,7 @@ The `GlTruncate` component lets you truncate the long texts with ellipsis.
 
 ## Usage
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <gl-truncate :text="text" :position="position" />
 ```
 

package/src/directives/safe_html/safe_html.md

@@ -46,9 +46,7 @@ const config = { ALLOWED_TAGS: ['b'] };
 const config = { ALLOWED_TAGS: [] };
 ```
 
-<!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
-
 <div v-safe-html:[config]="rawHtml"></div>
 ```
 

package/src/utils/utils.js

@@ -49,23 +49,45 @@ export function hexToRgba(hex, opacity = 1) {
   return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }
 
+export function toSrgb(value) {
+  const normalized = value / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+
+export function relativeLuminance(rgb) {
+  // WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+  // -
+  // WCAG 3.0 will use APAC
+  // Using APAC would be the ultimate goal, but was dismissed by engineering as of now
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
+  return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
+}
+
 export function colorFromBackground(backgroundColor) {
-  let r;
-  let g;
-  let b;
+  let color;
+  const lightColor = rgbFromHex('#FFFFFF');
+  const darkColor = rgbFromHex('#1f1e24');
 
   if (backgroundColor.startsWith('#')) {
-    [r, g, b] = rgbFromHex(backgroundColor);
+    color = rgbFromHex(backgroundColor);
   } else if (backgroundColor.startsWith('rgba(')) {
-    [r, g, b] = rgbFromString(backgroundColor, 5);
+    color = rgbFromString(backgroundColor, 5);
   } else if (backgroundColor.startsWith('rgb(')) {
-    [r, g, b] = rgbFromString(backgroundColor, 4);
+    color = rgbFromString(backgroundColor, 4);
   }
 
-  if (r + g + b <= 500) {
-    return labelColorOptions.light;
-  }
-  return labelColorOptions.dark;
+  const luminance = relativeLuminance(color);
+  const lightLuminance = relativeLuminance(lightColor);
+  const darkLuminance = relativeLuminance(darkColor);
+
+  const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
+  const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
+
+  // Using a threshold contrast of 2.4 instead of 3
+  // as this will solve weird color combinations in the mid tones
+  return contrastLight >= 2.4 || contrastLight > contrastDark
+    ? labelColorOptions.light
+    : labelColorOptions.dark;
 }
 
 export function uid() {