@gitlab/ui 80.16.2 → 80.18.0

package/src/tokens/build/tailwind/tokens.cjs

@@ -224,6 +224,14 @@ const backgroundColors = {
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
 };
+const borderColors = {
+  default:
+    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
+  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  transparent:
+    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+};
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
@@ -236,6 +244,23 @@ const iconColors = {
   danger: 'var(--gl-icon-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-icon-color-success, var(--gl-color-green-600, #217645))',
 };
+const alphaDarkColors = {
+  2: 'var(--gl-color-alpha-dark-2, rgba(31, 30, 36, 0.02))',
+  4: 'var(--gl-color-alpha-dark-4, rgba(31, 30, 36, 0.04))',
+  6: 'var(--gl-color-alpha-dark-6, rgba(31, 30, 36, 0.06))',
+  8: 'var(--gl-color-alpha-dark-8, rgba(31, 30, 36, 0.08))',
+  16: 'var(--gl-color-alpha-dark-16, rgba(31, 30, 36, 0.16))',
+  24: 'var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24))',
+};
+const alphaLightColors = {
+  2: 'var(--gl-color-alpha-light-2, rgba(255, 255, 255, 0.02))',
+  4: 'var(--gl-color-alpha-light-4, rgba(255, 255, 255, 0.04))',
+  6: 'var(--gl-color-alpha-light-6, rgba(255, 255, 255, 0.06))',
+  8: 'var(--gl-color-alpha-light-8, rgba(255, 255, 255, 0.08))',
+  16: 'var(--gl-color-alpha-light-16, rgba(255, 255, 255, 0.16))',
+  24: 'var(--gl-color-alpha-light-24, rgba(255, 255, 255, 0.24))',
+  36: 'var(--gl-color-alpha-light-36, rgba(255, 255, 255, 0.36))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -243,6 +268,10 @@ const colors = {
   transparent: 'transparent',
   white: 'var(--white, #fff)',
   black: 'var(--black, #000)',
+  alpha: {
+    dark: { ...alphaDarkColors },
+    light: { ...alphaLightColors },
+  },
   ...baseColors,
   ...themeColors,
   ...dataVizColors,
@@ -253,6 +282,11 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const borderColor = {
+  ...colors,
+  ...borderColors,
+};
+
 const fill = {
   ...colors,
   icon: {
@@ -271,6 +305,7 @@ const textColor = {
 module.exports = {
   colors,
   backgroundColor,
+  borderColor,
   textColor,
   fill,
 };

package/src/tokens/color.alpha.tokens.json

@@ -0,0 +1,66 @@
+{
+  "color": {
+    "alpha": {
+      "0": {
+        "$value": "transparent",
+        "$type": "color"
+      },
+      "dark": {
+        "2": {
+          "$value": "rgba(31, 30, 36, 0.02)",
+          "$type": "color"
+        },
+        "4": {
+          "$value": "rgba(31, 30, 36, 0.04)",
+          "$type": "color"
+        },
+        "6": {
+          "$value": "rgba(31, 30, 36, 0.06)",
+          "$type": "color"
+        },
+        "8": {
+          "$value": "rgba(31, 30, 36, 0.08)",
+          "$type": "color"
+        },
+        "16": {
+          "$value": "rgba(31, 30, 36, 0.16)",
+          "$type": "color"
+        },
+        "24": {
+          "$value": "rgba(31, 30, 36, 0.24)",
+          "$type": "color"
+        }
+      },
+      "light": {
+        "2": {
+          "$value": "rgba(255, 255, 255, 0.02)",
+          "$type": "color"
+        },
+        "4": {
+          "$value": "rgba(255, 255, 255, 0.04)",
+          "$type": "color"
+        },
+        "6": {
+          "$value": "rgba(255, 255, 255, 0.06)",
+          "$type": "color"
+        },
+        "8": {
+          "$value": "rgba(255, 255, 255, 0.08)",
+          "$type": "color"
+        },
+        "16": {
+          "$value": "rgba(255, 255, 255, 0.16)",
+          "$type": "color"
+        },
+        "24": {
+          "$value": "rgba(255, 255, 255, 0.24)",
+          "$type": "color"
+        },
+        "36": {
+          "$value": "rgba(255, 255, 255, 0.36)",
+          "$type": "color"
+        }
+      }
+    }
+  }
+}

package/src/tokens/color.transparency.tokens.json

@@ -4,37 +4,43 @@
       "$value": "rgba(31, 30, 36, 0.02)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "04": {
       "$value": "rgba(31, 30, 36, 0.04)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "06": {
       "$value": "rgba(31, 30, 36, 0.06)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "08": {
       "$value": "rgba(31, 30, 36, 0.08)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "16": {
       "$value": "rgba(31, 30, 36, 0.16)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "24": {
       "$value": "rgba(31, 30, 36, 0.24)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     }
   },
   "t-white-a": {
@@ -42,43 +48,50 @@
       "$value": "rgba(255, 255, 255, 0.02)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "04": {
       "$value": "rgba(255, 255, 255, 0.04)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "06": {
       "$value": "rgba(255, 255, 255, 0.06)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "08": {
       "$value": "rgba(255, 255, 255, 0.08)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "16": {
       "$value": "rgba(255, 255, 255, 0.16)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "24": {
       "$value": "rgba(255, 255, 255, 0.24)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     },
     "36": {
       "$value": "rgba(255, 255, 255, 0.36)",
       "$type": "color",
       "themeable": true,
-      "prefix": false
+      "prefix": false,
+      "deprecated": true
     }
   }
 }

package/src/tokens/tokens_story.vue

@@ -22,14 +22,14 @@ export default {
     },
   },
   methods: {
-    isAlpha(value) {
-      return value.startsWith('rgba(');
+    isHex(value) {
+      return value.startsWith('#');
     },
     getTokenName(token) {
       return token.path.filter(Boolean).join('.');
     },
     getClasses(value) {
-      if (this.isAlpha(value)) return '';
+      if (!this.isHex(value)) return '';
       if (!this.isBackgroundColorStory) return '';
 
       const textColorVariant = colorFromBackground(value, 4.5);
@@ -68,12 +68,12 @@ export default {
           </gl-badge>
           <code class="gl-reset-color">{{ token.value }}</code>
           <gl-color-contrast
-            v-if="!isAlpha(token.value)"
+            v-if="isHex(token.value)"
             :foreground="token.value"
             :background="darkBackground"
           />
           <gl-color-contrast
-            v-if="!isAlpha(token.value)"
+            v-if="isHex(token.value)"
             :foreground="token.value"
             :background="lightBackground"
           />

package/tailwind.defaults.js

@@ -1,6 +1,7 @@
 const {
   colors,
   backgroundColor,
+  borderColor,
   fill,
   textColor,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
@@ -54,6 +55,7 @@ module.exports = {
     },
     colors,
     backgroundColor,
+    borderColor,
     fill,
     spacing,
     fontSize: {

package/translations.json

@@ -1,12 +1,12 @@
 {
   "ClearIconButton.title": "Clear",
-  "GlSorting.sortAscending": "Sort direction: ascending",
-  "GlSorting.sortDescending": "Sort direction: descending",
-  "GlSearchBoxByType.clearButtonTitle": "Clear",
-  "GlSearchBoxByType.input.placeholder": "Search",
-  "GlKeysetPagination.prevText": "Previous",
+  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
+  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count",
   "GlKeysetPagination.navigationLabel": "Pagination",
   "GlKeysetPagination.nextText": "Next",
-  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
-  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count"
+  "GlKeysetPagination.prevText": "Previous",
+  "GlSearchBoxByType.clearButtonTitle": "Clear",
+  "GlSearchBoxByType.input.placeholder": "Search",
+  "GlSorting.sortAscending": "Sort direction: ascending",
+  "GlSorting.sortDescending": "Sort direction: descending"
 }