CHANGELOG.md

+# [105.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.3.0...v105.4.0) (2024-12-13)
+
+
+### Features
+
+* **Tailwind:** add neutral constant colors ([85bd8dd](https://gitlab.com/gitlab-org/gitlab-ui/commit/85bd8ddf43a3d6ed2a38bd7253d2e97c6cf5aa66))
+
 # [105.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v105.2.0...v105.3.0) (2024-12-12)
 
 

bin/build_tokens.mjs

@@ -141,6 +141,12 @@ StyleDictionary.registerFormat({
       return acc;
     }, {});
 
+    const neutralColors = Object.entries(COMPILED_TOKENS.color.neutral).reduce((acc, [, token]) => {
+      const colorName = token.path.filter((segment) => segment !== 'color').join('-');
+      acc[colorName] = f.cssCustomPropertyWithValue(token);
+      return acc;
+    }, {});
+
     const textColors = getScalesAndCSSCustomProperties(COMPILED_TOKENS.text.color);
     const backgroundColors = getScalesAndCSSCustomProperties(COMPILED_TOKENS.background.color);
     const iconColors = getScalesAndCSSCustomProperties(COMPILED_TOKENS.icon.color);
@@ -182,6 +188,7 @@ StyleDictionary.registerFormat({
     const baseColors = ${JSON.stringify(baseColors)};
     const themeColors = ${JSON.stringify(themeColors)};
     const dataVizColors = ${JSON.stringify(dataVizColors)};
+    const neutralColors = ${JSON.stringify(neutralColors)};
     const textColors = ${JSON.stringify(textColors)};
     const backgroundColors = ${JSON.stringify(backgroundColors)};
     const borderColors = ${JSON.stringify(borderColors)};
@@ -209,6 +216,7 @@ StyleDictionary.registerFormat({
       ...baseColors,
       ...themeColors,
       ...dataVizColors,
+      ...neutralColors,
       ...brandColors,
     };
 

package.json

 {
   "name": "@gitlab/ui",
-  "version": "105.3.0",
+  "version": "105.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

src/components/regions/dashboard_skeleton/dashboard_skeleton.vue

@@ -17,13 +17,13 @@ export default {
   <div class="row dashboard-cards">
     <div v-for="index in cards" :key="index" class="col-12 col-md-6 col-xl-4 gl-px-3">
       <div class="gl-rounded-t-base gl-bg-status-neutral gl-py-6"></div>
-      <div class="dashboard-card-body card-body bg-secondary">
+      <div class="dashboard-card-body card-body gl-bg-gray-50">
         <div class="row">
           <div class="col-1 gl-self-center">
             <div class="gl-rounded-full gl-bg-status-neutral gl-p-5"></div>
           </div>
 
-          <div class="col-10 col-sm-6 pl-4 gl-self-center">
+          <div class="col-10 col-sm-6 gl-self-center gl-pl-6">
             <div
               class="dashboard-card-skeleton-info gl-mb-3 gl-w-full gl-bg-status-neutral gl-py-3"
             ></div>

src/tokens/build/tailwind/tokens.cjs

@@ -202,6 +202,22 @@ const dataVizColors = {
   'data-viz-orange-900': 'var(--data-viz-orange-900, #5e2f05)',
   'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
 };
+const neutralColors = {
+  'neutral-0': 'var(--gl-color-neutral-0, #fff)',
+  'neutral-10': 'var(--gl-color-neutral-10, #fbfafd)',
+  'neutral-50': 'var(--gl-color-neutral-50, #ececef)',
+  'neutral-100': 'var(--gl-color-neutral-100, #dcdcde)',
+  'neutral-200': 'var(--gl-color-neutral-200, #bfbfc3)',
+  'neutral-300': 'var(--gl-color-neutral-300, #a4a3a8)',
+  'neutral-400': 'var(--gl-color-neutral-400, #89888d)',
+  'neutral-500': 'var(--gl-color-neutral-500, #737278)',
+  'neutral-600': 'var(--gl-color-neutral-600, #626168)',
+  'neutral-700': 'var(--gl-color-neutral-700, #4c4b51)',
+  'neutral-800': 'var(--gl-color-neutral-800, #3a383f)',
+  'neutral-900': 'var(--gl-color-neutral-900, #28272d)',
+  'neutral-950': 'var(--gl-color-neutral-950, #18171d)',
+  'neutral-1000': 'var(--gl-color-neutral-1000, #050506)',
+};
 const textColors = {
   default: 'var(--gl-text-color-default, var(--gl-color-neutral-800, #3a383f))',
   subtle: 'var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168))',
@@ -350,6 +366,7 @@ const colors = {
   ...baseColors,
   ...themeColors,
   ...dataVizColors,
+  ...neutralColors,
   ...brandColors,
 };