@gitlab/ui 62.4.0 → 62.5.1

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.4.0",
+  "version": "62.5.1",
   "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": "^11.2.0",
+    "cypress": "12.10.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.38.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/avatar/avatar.vue

@@ -130,6 +130,7 @@ export default {
     :alt="alt"
     :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
     @error="handleLoadError"
+    v-on="$listeners"
   />
   <div
     v-else
@@ -139,6 +140,7 @@ export default {
       sizeClasses,
       identiconBackgroundClass,
     ]"
+    v-on="$listeners"
   >
     {{ identiconText }}
   </div>

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -14,6 +14,7 @@
   &-label {
     @include gl-font-weight-bold;
     @include gl-p-1;
+    @include gl-text-gray-900;
   }
 
   &-sublabel {

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

@@ -63,13 +63,26 @@ describe('avatar labeled', () => {
       buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });
     });
 
-    it('displays the avatar label link', () => {
-      const labelLink = wrapper.findAllComponents(GlLink).at(0);
-      expect(labelLink.text()).toBe(label);
-      expect(labelLink.attributes('href')).toBe('http://label');
+    describe('with label link', () => {
+      const findLabelLink = () => wrapper.findAllComponents(GlLink).at(0);
+
+      it('displays the label link', () => {
+        const labelLink = findLabelLink();
+        expect(labelLink.text()).toBe(label);
+        expect(labelLink.attributes('href')).toBe('http://label');
+      });
+
+      it('navigates to label link when avatar is clicked', () => {
+        const labelLink = findLabelLink();
+        const labelLinkClickSpy = jest.spyOn(labelLink.element, 'click');
+
+        wrapper.findComponent(Avatar).vm.$emit('click');
+
+        expect(labelLinkClickSpy).toHaveBeenCalled();
+      });
     });
 
-    it('displays the avatar sub-label link', () => {
+    it('displays the sub-label link', () => {
       const subLabelLink = wrapper.findAllComponents(GlLink).at(1);
       expect(subLabelLink.text()).toBe(subLabel);
       expect(subLabelLink.attributes('href')).toBe('http://subLabel');

package/src/components/base/avatar_labeled/avatar_labeled.stories.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import GlBadge from '../badge/badge.vue';
 import GlButton from '../button/button.vue';
+import GlIcon from '../icon/icon.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import avatarPath from '../../../../static/img/avatar.png';
@@ -17,12 +18,14 @@ const generateProps = ({
   size = 32,
   shape = 'circle',
   src = avatarPath,
+  labelLink,
 } = {}) => ({
   label,
   subLabel,
   size,
   shape,
   src,
+  labelLink,
 });
 
 const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
@@ -111,6 +114,38 @@ export const WithDefaultSlot = (args, { argTypes }) => ({
 });
 WithDefaultSlot.args = generateProps({ size: 64 });
 
+export const WithLinks = (args, { argTypes }) => ({
+  components: { GlAvatarLabeled, GlBadge, GlIcon },
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar-labeled
+        :shape="shape"
+        :size="size"
+        :label-link="labelLink"
+        :src="src"
+        :label="label"
+      >
+        <template #meta>
+          <gl-icon
+            v-gl-tooltip="'Public - The project can be accessed without any authentication.'"
+            name="earth"
+            class="gl-text-secondary gl-ml-2"
+          />
+        </template>
+        <div class="gl-max-w-75">
+          <p class="gl-mb-0 gl-mt-2 gl-font-sm">GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider.</p>
+        </div>
+      </gl-avatar-labeled>
+    `,
+});
+WithLinks.args = generateProps({
+  size: 48,
+  shape: 'rect',
+  label: 'GitLab.org / GitLab',
+  subLabel: '',
+  labelLink: 'https://gitlab.com/gitlab-org/gitlab',
+});
+
 export default {
   title: 'base/avatar/labeled',
   component: GlAvatarLabeled,

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -36,17 +36,37 @@ export default {
     hasSubLabelLink() {
       return Boolean(this.subLabelLink);
     },
+    avatarListeners() {
+      if (this.hasLabelLink) {
+        return {
+          ...this.$listeners,
+          click: this.onAvatarClick,
+        };
+      }
+
+      return this.$listeners;
+    },
+    avatarCssClasses() {
+      return {
+        'gl-cursor-pointer': this.hasLabelLink,
+      };
+    },
+  },
+  methods: {
+    onAvatarClick() {
+      this.$refs.labelLink.$el.click();
+    },
   },
 };
 </script>
 <template>
   <div class="gl-avatar-labeled">
-    <gl-avatar v-bind="$attrs" alt v-on="$listeners" />
+    <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
     <div class="gl-avatar-labeled-labels gl-text-left!">
       <div
         class="gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"
       >
-        <gl-link v-if="hasLabelLink" :href="labelLink" class="gl-avatar-link">
+        <gl-link v-if="hasLabelLink" ref="labelLink" :href="labelLink" class="gl-avatar-link">
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>

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/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() {