@gitlab/ui 72.1.0 → 72.3.0

package/src/tokens/color.theme.tokens.json

@@ -1,6 +1,12 @@
 {
   "theme": {
     "indigo": {
+      "10": {
+        "$value": "#f8f8ff",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
       "50": {
         "$value": "#f1f1ff",
         "$type": "color",
@@ -69,6 +75,12 @@
       }
     },
     "blue": {
+      "10": {
+        "$value": "#e6ecf0",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
       "50": {
         "$value": "#cdd8e3",
         "$type": "color",
@@ -137,6 +149,12 @@
       }
     },
     "light-blue": {
+      "10": {
+        "$value": "#eef3f7",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
       "50": {
         "$value": "#dde6ee",
         "$type": "color",
@@ -205,6 +223,12 @@
       }
     },
     "green": {
+      "10": {
+        "$value": "#eef4ef",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
       "50": {
         "$value": "#dde9de",
         "$type": "color",
@@ -273,6 +297,12 @@
       }
     },
     "red": {
+      "10": {
+        "$value": "#faf4f3",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
       "50": {
         "$value": "#f4e9e7",
         "$type": "color",
@@ -341,6 +371,12 @@
       }
     },
     "light-red": {
+      "10": {
+        "$value": "#fdf9f8",
+        "$type": "color",
+        "themeable": true,
+        "prefix": false
+      },
       "50": {
         "$value": "#faf2f1",
         "$type": "color",

package/src/tokens/common_story_options.js

@@ -1,17 +1,76 @@
-import { colorFromBackground } from '../utils/utils';
+import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
+import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+
+const CONTRAST_LEVELS = [
+  {
+    grade: 'F',
+    min: 0,
+    max: 3,
+  },
+  {
+    grade: 'AA+',
+    min: 3,
+    max: 4.5,
+  },
+  {
+    grade: 'AA',
+    min: 4.5,
+    max: 7,
+  },
+  {
+    grade: 'AAA',
+    min: 7,
+    max: 22,
+  },
+];
 
 export const methods = {
+  isAlpha(value) {
+    return value.startsWith('rgba(');
+  },
   getTokenName(name, key) {
     return [name, key].filter(Boolean).join('.');
   },
   getTextColorClass(value) {
-    if (value.startsWith('rgba(')) return '';
+    if (this.isAlpha(value)) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',
       'gl-text-white': textColorVariant === 'light',
     };
   },
+  getColorContrast(foreground = 'light', background) {
+    const foregroundColor = {
+      light: WHITE,
+      dark: GRAY_950,
+    };
+    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+    const foregroundLuminance = relativeLuminance(rgbFromHex(foregroundColor[foreground])) + 0.05;
+    const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
+
+    let score = foregroundLuminance / backgroundLuminance;
+    if (backgroundLuminance > foregroundLuminance) {
+      score = 1 / score;
+    }
+
+    const level = CONTRAST_LEVELS.find(({ min, max }) => {
+      return score >= min && score < max;
+    });
+
+    return {
+      score: (Math.round(score * 10) / 10).toFixed(1),
+      level,
+    };
+  },
+  getColorContrastClass(foreground, background) {
+    const { grade } = this.getColorContrast(foreground, background).level;
+    const isFail = grade === 'F';
+    const classes = {
+      light: isFail ? 'gl-inset-border-1-red-500 gl-text-red-500' : 'gl-text-gray-950',
+      dark: isFail ? 'gl-inset-border-1-red-300 gl-text-red-300' : 'gl-text-white',
+    };
+    return classes[foreground];
+  },
 };
 
 export const template = `
@@ -21,12 +80,30 @@ export const template = `
     <li
       v-for="(token, key) in tokens"
       :key="key"
-      class="gl-display-flex gl-justify-content-space-between gl-gap-3 gl-p-3"
+      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
       :class="getTextColorClass(token.$value)"
       :style="{ backgroundColor: token.$value }"
     >
       <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
-      <code class="gl-reset-color">{{ token.$value }}</code>
+      <div class="gl-display-flex gl-align-items-center gl-gap-3">
+        <code class="gl-reset-color">{{ token.$value }}</code>
+        <code
+          v-if="!isAlpha(token.$value)"
+          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-gray-900"
+          :class="getColorContrastClass('dark', token.$value)"
+        >
+          {{ getColorContrast('dark', token.$value).level.grade }}
+          {{ getColorContrast('dark', token.$value).score }}
+        </code>
+        <code
+          v-if="!isAlpha(token.$value)"
+          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-white"
+          :class="getColorContrastClass('light', token.$value)"
+        >
+          {{ getColorContrast('light', token.$value).level.grade }}
+          {{ getColorContrast('light', token.$value).score }}
+        </code>
+      </div>
     </li>
   </ul>
 `;