@gitlab/ui 68.4.0 → 68.6.0

package/src/tokens/color.tokens.json

@@ -425,348 +425,6 @@
       "prefix": false
     }
   },
-  "data-viz": {
-    "green": {
-      "50": {
-        "$value": "#ddfab7",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "100": {
-        "$value": "#c6ed94",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "200": {
-        "$value": "#b0d97b",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "300": {
-        "$value": "#94c25e",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "400": {
-        "$value": "#81ac41",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "500": {
-        "$value": "#619025",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "600": {
-        "$value": "#4e7f0e",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "700": {
-        "$value": "#366800",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "800": {
-        "$value": "#275600",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "900": {
-        "$value": "#1a4500",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "950": {
-        "$value": "#133a03",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      }
-    },
-    "aqua": {
-      "50": {
-        "$value": "#b5fefd",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "100": {
-        "$value": "#93f2ef",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "200": {
-        "$value": "#5edee3",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "300": {
-        "$value": "#32c5d2",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "400": {
-        "$value": "#00acc4",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "500": {
-        "$value": "#0090b1",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "600": {
-        "$value": "#007b9b",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "700": {
-        "$value": "#006381",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "800": {
-        "$value": "#00516c",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "900": {
-        "$value": "#004059",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "950": {
-        "$value": "#00344b",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      }
-    },
-    "blue": {
-      "50": {
-        "$value": "#e9ebff",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "100": {
-        "$value": "#d2dcff",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "200": {
-        "$value": "#b7c6ff",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "300": {
-        "$value": "#97acff",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "400": {
-        "$value": "#7992f5",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "500": {
-        "$value": "#617ae2",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "600": {
-        "$value": "#4e65cd",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "700": {
-        "$value": "#3f51ae",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "800": {
-        "$value": "#374291",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "900": {
-        "$value": "#303470",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "950": {
-        "$value": "#2a2b59",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      }
-    },
-    "magenta": {
-      "50": {
-        "$value": "#ffe3eb",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "100": {
-        "$value": "#ffccdb",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "200": {
-        "$value": "#fcacc5",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "300": {
-        "$value": "#f88aaf",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "400": {
-        "$value": "#e86e9a",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "500": {
-        "$value": "#cf4d81",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "600": {
-        "$value": "#b93d71",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "700": {
-        "$value": "#9a2e5d",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "800": {
-        "$value": "#7c214f",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "900": {
-        "$value": "#661e3a",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "950": {
-        "$value": "#541d31",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      }
-    },
-    "orange": {
-      "50": {
-        "$value": "#fae8d1",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "100": {
-        "$value": "#f5d6b3",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "200": {
-        "$value": "#eebd8c",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "300": {
-        "$value": "#e99b60",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "400": {
-        "$value": "#e07e41",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "500": {
-        "$value": "#c95d2e",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "600": {
-        "$value": "#b14f18",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "700": {
-        "$value": "#92430a",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "800": {
-        "$value": "#6f3500",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "900": {
-        "$value": "#5e2f05",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      },
-      "950": {
-        "$value": "#4b2707",
-        "$type": "color",
-        "themeable": true,
-        "prefix": false
-      }
-    }
-  },
   "brand": {
     "charcoal": {
       "$value": "#171321",

package/src/tokens/color.tokens.stories.js

@@ -0,0 +1,42 @@
+import { methods, template } from './common_story_options';
+import colorTokens from './color.tokens.json';
+
+const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
+  name,
+  tokens,
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+Default.args = generateProps({
+  tokens: {
+    white: colorTokens.white,
+    black: colorTokens.black,
+  },
+});
+
+export const Gray = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
+Gray.args = generateProps({ name: 'gray', tokens: colorTokens.gray });
+
+export const Blue = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
+Blue.args = generateProps({ name: 'blue', tokens: colorTokens.blue });
+
+export const Green = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
+Green.args = generateProps({ name: 'green', tokens: colorTokens.green });
+
+export const Orange = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
+Orange.args = generateProps({ name: 'orange', tokens: colorTokens.orange });
+
+export const Red = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
+Red.args = generateProps({ name: 'red', tokens: colorTokens.red });
+
+export const Purple = (args, { argTypes }) => ({ props: Object.keys(argTypes), methods, template });
+Purple.args = generateProps({ name: 'purple', tokens: colorTokens.purple });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/color/base/light',
+};

package/src/tokens/common_story_options.js

@@ -0,0 +1,31 @@
+import { colorFromBackground } from '../utils/utils';
+
+export const methods = {
+  getTokenName(name, key) {
+    return [name, key].filter(Boolean).join('.');
+  },
+  getTextColorClass(value) {
+    const textColorVariant = colorFromBackground(value, 4.5);
+    return {
+      'gl-text-gray-950': textColorVariant === 'dark',
+      'gl-text-white': textColorVariant === 'light',
+    };
+  },
+};
+
+export const template = `
+  <ul
+    class="gl-list-style-none gl-m-0 gl-p-0"
+  >
+    <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="getTextColorClass(token.$value)"
+      :style="{ backgroundColor: token.$value }"
+    >
+      <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
+      <code class="gl-reset-color">{{ token.$value }}</code>
+    </li>
+  </ul>
+`;

package/src/utils/utils.js

@@ -63,7 +63,7 @@ export function relativeLuminance(rgb) {
   return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
 }
 
-export function colorFromBackground(backgroundColor) {
+export function colorFromBackground(backgroundColor, contrastRatio = 2.4) {
   let color;
   const lightColor = rgbFromHex('#FFFFFF');
   const darkColor = rgbFromHex('#1f1e24');
@@ -83,9 +83,9 @@ export function colorFromBackground(backgroundColor) {
   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
+  // Using a default 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
+  return contrastLight >= contrastRatio || contrastLight > contrastDark
     ? labelColorOptions.light
     : labelColorOptions.dark;
 }