@gitlab/ui 79.2.0 → 79.4.0

package/src/tokens/text.dark.tokens.stories.js

@@ -3,7 +3,12 @@ import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({
   containerClass: 'gl-bg-gray-950',
-  tokens: COMPILED_TOKENS.text,
+  tokens: {
+    primary: COMPILED_TOKENS.text.primary,
+    secondary: COMPILED_TOKENS.text.secondary,
+    tertiary: COMPILED_TOKENS.text.tertiary,
+    ...COMPILED_TOKENS.text.color,
+  },
   isBackgroundColorStory: false,
 });
 

package/src/tokens/text.tokens.json

@@ -3,17 +3,73 @@
     "primary": {
       "$value": "#333238",
       "$type": "color",
+      "$description": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true
     },
     "secondary": {
       "$value": "#737278",
       "$type": "color",
+      "$description": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true
     },
     "tertiary": {
       "$value": "#89888d",
       "$type": "color",
+      "$description": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true
+    },
+    "color": {
+      "default": {
+        "$value": "#434248",
+        "$type": "color",
+        "$description": "Used for the default text color.",
+        "themeable": true
+      },
+      "subtle": {
+        "$value": "#626168",
+        "$type": "color",
+        "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true
+      },
+      "strong": {
+        "$value": "#1f1e24",
+        "$type": "color",
+        "$description": "Used for text with the highest contrast.",
+        "themeable": true
+      },
+      "heading": {
+        "$value": "#1f1e24",
+        "$type": "color",
+        "$description": "Used for headings level 1-6.",
+        "themeable": true
+      },
+      "link": {
+        "$value": "#0b5cad",
+        "$type": "color",
+        "$description": "Used for default text links.",
+        "themeable": true
+      },
+      "danger": {
+        "$value": "#c91c00",
+        "$type": "color",
+        "$description": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true
+      },
+      "success": {
+        "$value": "#217645",
+        "$type": "color",
+        "$description": "Used for text indicating success or validity.",
+        "themeable": true
+      },
+      "disabled": {
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for disabled text.",
+        "themeable": true
+      }
     }
   }
 }

package/src/tokens/text.tokens.stories.js

@@ -2,7 +2,12 @@ import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
 import { createDesignTokenStory } from './common_story_options';
 
 export const Default = createDesignTokenStory({
-  tokens: COMPILED_TOKENS.text,
+  tokens: {
+    primary: COMPILED_TOKENS.text.primary,
+    secondary: COMPILED_TOKENS.text.secondary,
+    tertiary: COMPILED_TOKENS.text.tertiary,
+    ...COMPILED_TOKENS.text.color,
+  },
   isBackgroundColorStory: false,
 });
 

package/src/tokens/tokens_story.vue

@@ -1,12 +1,18 @@
 <script>
 import { colorFromBackground } from '../utils/utils';
+import { GlTooltipDirective } from '../directives/tooltip';
+import GlBadge from '../components/base/badge/badge.vue';
 import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
 export default {
   name: 'TokensStory',
   components: {
+    GlBadge,
     GlColorContrast,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
   props: {
     tokens: {
@@ -53,8 +59,13 @@ export default {
         :class="getClasses(token.value)"
         :style="getStyle(token.value)"
       >
-        <code class="gl-reset-color">{{ getTokenName(token) }}</code>
+        <code v-gl-tooltip :title="token.comment" class="gl-reset-color">
+          {{ getTokenName(token) }}
+        </code>
         <div class="gl-display-flex gl-align-items-center gl-gap-3">
+          <gl-badge v-if="token.deprecated" v-gl-tooltip :title="token.comment" variant="danger">
+            Deprecated
+          </gl-badge>
           <code class="gl-reset-color">{{ token.value }}</code>
           <gl-color-contrast
             v-if="!isAlpha(token.value)"

package/tailwind.defaults.js

@@ -26,7 +26,7 @@ const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [
   return acc;
 }, {});
 
-const textColors = Object.entries(COMPILED_TOKENS.text).reduce((acc, [scale, token]) => {
+const textColors = Object.entries(COMPILED_TOKENS.text.color).reduce((acc, [scale, token]) => {
   acc[scale] = cssCustomPropertyWithValue(token);
   return acc;
 }, {});
@@ -40,6 +40,14 @@ const colors = {
   ...dataVizColors,
 };
 
+const textColor = {
+  ...colors,
+  ...textColors,
+  primary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.primary),
+  secondary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.secondary),
+  tertiary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.tertiary),
+};
+
 const gridSize = 0.5; // rem
 const spacing = {
   0: '0',
@@ -102,9 +110,6 @@ module.exports = {
       semibold: 500,
       bold: 600,
     },
-    textColor: {
-      ...colors,
-      ...textColors,
-    },
+    textColor,
   },
 };