@gitlab/ui 80.15.1 → 80.16.0

package/src/tokens/build/scss/_tokens.scss

@@ -312,6 +312,15 @@ $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
 $gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
 $gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
 $gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
+$gl-icon-color-success: $gl-color-green-600; // Used for an icon associated with success or validity.
+$gl-icon-color-danger: $gl-color-red-600; // Used for an icon associated with an error or danger.
+$gl-icon-color-warning: $gl-color-orange-600; // Used for an icon associated with a warning.
+$gl-icon-color-info: $gl-color-blue-600; // Used for an icon associated with information or help.
+$gl-icon-color-link: $gl-color-blue-600; // Used for an icon within a link.
+$gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a disabled section.
+$gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
+$gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
+$gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -296,6 +296,15 @@ $t-white-a-02: var(--t-white-a-02);
 $t-white-a-04: var(--t-white-a-04);
 $t-white-a-06: var(--t-white-a-06);
 $t-white-a-08: var(--t-white-a-08);
+$gl-icon-color-default: var(--gl-icon-color-default);
+$gl-icon-color-subtle: var(--gl-icon-color-subtle);
+$gl-icon-color-strong: var(--gl-icon-color-strong);
+$gl-icon-color-disabled: var(--gl-icon-color-disabled);
+$gl-icon-color-link: var(--gl-icon-color-link);
+$gl-icon-color-info: var(--gl-icon-color-info);
+$gl-icon-color-warning: var(--gl-icon-color-warning);
+$gl-icon-color-danger: var(--gl-icon-color-danger);
+$gl-icon-color-success: var(--gl-icon-color-success);
 $gl-line-height-12: var(--gl-line-height-12);
 $gl-line-height-16: var(--gl-line-height-16);
 $gl-line-height-20: var(--gl-line-height-20);

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

@@ -224,6 +224,18 @@ const backgroundColors = {
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
 };
+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))',
+  strong: 'var(--gl-icon-color-strong, var(--gl-color-neutral-900, #333238))',
+  disabled:
+    'var(--gl-icon-color-disabled, var(--gl-color-neutral-300, #a4a3a8))',
+  link: 'var(--gl-icon-color-link, var(--gl-color-blue-600, #1068bf))',
+  info: 'var(--gl-icon-color-info, var(--gl-color-blue-600, #1068bf))',
+  warning: 'var(--gl-icon-color-warning, var(--gl-color-orange-600, #9e5400))',
+  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 colors = {
   inherit: 'inherit',
@@ -241,6 +253,13 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const fill = {
+  ...colors,
+  icon: {
+    ...iconColors,
+  },
+};
+
 const textColor = {
   ...colors,
   ...textColors,
@@ -253,4 +272,5 @@ module.exports = {
   colors,
   backgroundColor,
   textColor,
+  fill,
 };

package/src/tokens/icon.tokens.json

@@ -0,0 +1,78 @@
+{
+  "icon": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "{color.neutral.700}",
+          "dark": "{color.neutral.100}"
+        },
+        "$type": "color",
+        "$description": "Used for the default icon color. Can be paired with default text."
+      },
+      "subtle": {
+        "$value": {
+          "default": "{color.neutral.500}",
+          "dark": "{color.neutral.300}"
+        },
+        "$type": "color",
+        "$description": "Used for a static or decorational icon. Can be paired with subtle text."
+      },
+      "strong": {
+        "$value": {
+          "default": "{color.neutral.900}",
+          "dark": "{color.neutral.10}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon with the highest contrast."
+      },
+      "disabled": {
+        "$value": {
+          "default": "{color.neutral.300}",
+          "dark": "{color.neutral.500}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon within a disabled section."
+      },
+      "link": {
+        "$value": {
+          "default": "{color.blue.600}",
+          "dark": "{color.blue.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon within a link."
+      },
+      "info": {
+        "$value": {
+          "default": "{color.blue.600}",
+          "dark": "{color.blue.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with information or help."
+      },
+      "warning": {
+        "$value": {
+          "default": "{color.orange.600}",
+          "dark": "{color.orange.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with a warning."
+      },
+      "danger": {
+        "$value": {
+          "default": "{color.red.600}",
+          "dark": "{color.red.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with an error or danger."
+      },
+      "success": {
+        "$value": {
+          "default": "{color.green.600}",
+          "dark": "{color.green.300}"
+        },
+        "$type": "color",
+        "$description": "Used for an icon associated with success or validity."
+      }
+    }
+  }
+}

package/src/utils/constants.js

@@ -180,6 +180,19 @@ export const datepickerWidthOptionsMap = {
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 export const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
 
+export const iconVariantOptions = {
+  current: 'gl-fill-current',
+  default: 'gl-fill-icon-default',
+  subtle: 'gl-fill-icon-subtle',
+  strong: 'gl-fill-icon-strong',
+  disabled: 'gl-fill-icon-disabled',
+  link: 'gl-fill-icon-link',
+  info: 'gl-fill-icon-info',
+  warning: 'gl-fill-icon-warning',
+  danger: 'gl-fill-icon-danger',
+  success: 'gl-fill-icon-success',
+};
+
 export const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',

package/tailwind.defaults.js

@@ -1,4 +1,9 @@
-const { colors, backgroundColor, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
+const {
+  colors,
+  backgroundColor,
+  fill,
+  textColor,
+} = require('./src/tokens/build/tailwind/tokens.cjs');
 
 const gridSize = 0.5; // rem
 const spacing = {
@@ -49,6 +54,7 @@ module.exports = {
     },
     colors,
     backgroundColor,
+    fill,
     spacing,
     fontSize: {
       xs: '0.625rem',