@gitlab/ui 85.1.0 → 85.2.1

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

@@ -484,6 +484,20 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
+$gl-feedback-danger-icon-color: $gl-color-red-300; // Used for an icon associated with danger or critical feedback.
+$gl-feedback-danger-background-color: $gl-color-red-900; // Used for a background associated with danger or critical feedback.
+$gl-feedback-warning-icon-color: $gl-color-orange-300; // Used for an icon associated with warning feedback or confidential content.
+$gl-feedback-warning-background-color: $gl-color-orange-900; // Used for a background associated with warning feedback or to let a user know about confidential content.
+$gl-feedback-success-icon-color: $gl-color-green-300; // Used for an icon associated with successful feedback or a new section.
+$gl-feedback-success-background-color: $gl-color-green-900; // Used for a background associated with successful feedback or a new section resulting from a user action.
+$gl-feedback-info-icon-color: $gl-color-blue-300; // Used for an icon associated with informational feedback.
+$gl-feedback-info-background-color: $gl-color-blue-900; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
+$gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for an icon associated with a neutral feedback section.
+$gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for a background associated with neutral feedback.
+$gl-feedback-link-color-strong: $gl-color-blue-700; // Used for a link on a strong feedback background.
+$gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
+$gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.
+$gl-feedback-background-color-strong: $gl-color-neutral-10; // Used for a background associated with feedback like a tooltip or toast message.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
@@ -493,3 +507,38 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
+$gl-action-neutral-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong neutral action background.
+$gl-action-neutral-icon-color-active: $gl-color-neutral-50; // Used for the icon of outlined and borderless neutral actions in the active state.
+$gl-action-neutral-icon-color-focus: $gl-color-neutral-200; // Used for the icon of outlined and borderless neutral actions in the focus state.
+$gl-action-neutral-icon-color-hover: $gl-color-neutral-200; // Used for the icon of outlined and borderless neutral actions in the hover state.
+$gl-action-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of outlined and borderless neutral actions.
+$gl-action-neutral-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong neutral action background.
+$gl-action-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral action in the active state.
+$gl-action-neutral-text-color-focus: $gl-color-neutral-50; // Used for the text of a neutral action in the focus state.
+$gl-action-neutral-text-color-hover: $gl-color-neutral-50; // Used for the text of a neutral action in the hover state.
+$gl-action-neutral-text-color-default: $gl-color-neutral-50; // Used for the text of outlined and borderless neutral actions.
+$gl-action-neutral-border-color-strong-active: $gl-color-neutral-50; // Used for the border of a solid, strong neutral action in the active state.
+$gl-action-neutral-border-color-strong-focus: $gl-color-neutral-100; // Used for the border of a solid, strong neutral action in the focus state.
+$gl-action-neutral-border-color-strong-hover: $gl-color-neutral-100; // Used for the border of a solid, strong neutral action in the hover state.
+$gl-action-neutral-border-color-strong-default: $gl-color-neutral-300; // Used for the border of a solid, strong neutral action in the default state.
+$gl-action-neutral-border-color-selected: $gl-color-neutral-700; // Used for the border of a outlined neutral action when in a selected or current state.
+$gl-action-neutral-border-color-active: $gl-color-neutral-300; // Used for the border of an outlined neutral action in the active state.
+$gl-action-neutral-border-color-focus: $gl-color-neutral-500; // Used for the border of an outlined neutral action in the focus state.
+$gl-action-neutral-border-color-hover: $gl-color-neutral-500; // Used for the border of an outlined neutral action in the hover state.
+$gl-action-neutral-border-color-default: $gl-color-neutral-700; // Used for the border of an outlined neutral action in the default state.
+$gl-action-neutral-background-color-strong-active: $gl-color-neutral-200; // Used for the background of a solid, strong neutral action in the active state.
+$gl-action-neutral-background-color-strong-focus: $gl-color-neutral-300; // Used for the background of a solid, strong neutral action in the focus state.
+$gl-action-neutral-background-color-strong-hover: $gl-color-neutral-300; // Used for the background of a solid, strong neutral action in the hover state.
+$gl-action-neutral-background-color-strong-default: $gl-color-neutral-400; // Used for the background of a solid, strong neutral action in the default state.
+$gl-action-neutral-background-color-subtle-active: $gl-color-neutral-800; // Used for the background of a borderless, subtle neutral action in the active state.
+$gl-action-neutral-background-color-subtle-focus: $gl-color-neutral-900; // Used for the background of a borderless, subtle neutral action in the focus state.
+$gl-action-neutral-background-color-subtle-hover: $gl-color-neutral-900; // Used for the background of a borderless, subtle neutral action in the hover state.
+$gl-action-neutral-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle neutral action in the default state.
+$gl-action-neutral-background-color-active: $gl-color-neutral-800; // Used for the background of an outlined neutral action in the active state.
+$gl-action-neutral-background-color-focus: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the focus state.
+$gl-action-neutral-background-color-hover: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the hover state.
+$gl-action-icon-color-disabled: $gl-color-neutral-500; // Used for the icon of a disabled action.
+$gl-action-text-color-disabled: $gl-color-neutral-400; // Used for the text of a disabled action.
+$gl-action-border-color-disabled: $gl-color-neutral-800; // Used for the border of a disabled action.
+$gl-action-background-color-disabled: $gl-color-neutral-900; // Used for the background of a disabled action.
+$gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

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

@@ -484,6 +484,20 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $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-feedback-danger-icon-color: $gl-color-red-600; // Used for an icon associated with danger or critical feedback.
+$gl-feedback-danger-background-color: $gl-color-red-50; // Used for a background associated with danger or critical feedback.
+$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for an icon associated with warning feedback or confidential content.
+$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for a background associated with warning feedback or to let a user know about confidential content.
+$gl-feedback-success-icon-color: $gl-color-green-600; // Used for an icon associated with successful feedback or a new section.
+$gl-feedback-success-background-color: $gl-color-green-50; // Used for a background associated with successful feedback or a new section resulting from a user action.
+$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for an icon associated with informational feedback.
+$gl-feedback-info-background-color: $gl-color-blue-50; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
+$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for an icon associated with a neutral feedback section.
+$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for a background associated with neutral feedback.
+$gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a strong feedback background.
+$gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
+$gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.
+$gl-feedback-background-color-strong: $gl-color-neutral-950; // Used for a background associated with feedback like a tooltip or toast message.
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
@@ -493,3 +507,38 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
 $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.
 $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
+$gl-action-neutral-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong neutral action background.
+$gl-action-neutral-icon-color-active: $gl-color-neutral-900; // Used for the icon of outlined and borderless neutral actions in the active state.
+$gl-action-neutral-icon-color-focus: $gl-color-neutral-700; // Used for the icon of outlined and borderless neutral actions in the focus state.
+$gl-action-neutral-icon-color-hover: $gl-color-neutral-700; // Used for the icon of outlined and borderless neutral actions in the hover state.
+$gl-action-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of outlined and borderless neutral actions.
+$gl-action-neutral-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong neutral action background.
+$gl-action-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral action in the active state.
+$gl-action-neutral-text-color-focus: $gl-color-neutral-900; // Used for the text of a neutral action in the focus state.
+$gl-action-neutral-text-color-hover: $gl-color-neutral-900; // Used for the text of a neutral action in the hover state.
+$gl-action-neutral-text-color-default: $gl-color-neutral-900; // Used for the text of outlined and borderless neutral actions.
+$gl-action-neutral-border-color-strong-active: $gl-color-neutral-900; // Used for the border of a solid, strong neutral action in the active state.
+$gl-action-neutral-border-color-strong-focus: $gl-color-neutral-800; // Used for the border of a solid, strong neutral action in the focus state.
+$gl-action-neutral-border-color-strong-hover: $gl-color-neutral-800; // Used for the border of a solid, strong neutral action in the hover state.
+$gl-action-neutral-border-color-strong-default: $gl-color-neutral-600; // Used for the border of a solid, strong neutral action in the default state.
+$gl-action-neutral-border-color-selected: $gl-color-neutral-300; // Used for the border of a outlined neutral action when in a selected or current state.
+$gl-action-neutral-border-color-active: $gl-color-neutral-600; // Used for the border of an outlined neutral action in the active state.
+$gl-action-neutral-border-color-focus: $gl-color-neutral-400; // Used for the border of an outlined neutral action in the focus state.
+$gl-action-neutral-border-color-hover: $gl-color-neutral-400; // Used for the border of an outlined neutral action in the hover state.
+$gl-action-neutral-border-color-default: $gl-color-neutral-200; // Used for the border of an outlined neutral action in the default state.
+$gl-action-neutral-background-color-strong-active: $gl-color-neutral-700; // Used for the background of a solid, strong neutral action in the active state.
+$gl-action-neutral-background-color-strong-focus: $gl-color-neutral-600; // Used for the background of a solid, strong neutral action in the focus state.
+$gl-action-neutral-background-color-strong-hover: $gl-color-neutral-600; // Used for the background of a solid, strong neutral action in the hover state.
+$gl-action-neutral-background-color-strong-default: $gl-color-neutral-500; // Used for the background of a solid, strong neutral action in the default state.
+$gl-action-neutral-background-color-subtle-active: $gl-color-neutral-100; // Used for the background of a borderless, subtle neutral action in the active state.
+$gl-action-neutral-background-color-subtle-focus: $gl-color-neutral-50; // Used for the background of a borderless, subtle neutral action in the focus state.
+$gl-action-neutral-background-color-subtle-hover: $gl-color-neutral-50; // Used for the background of a borderless, subtle neutral action in the hover state.
+$gl-action-neutral-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle neutral action in the default state.
+$gl-action-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of an outlined neutral action in the active state.
+$gl-action-neutral-background-color-focus: $gl-color-neutral-50; // Used for the background of an outlined neutral action in the focus state.
+$gl-action-neutral-background-color-hover: $gl-color-neutral-50; // Used for the background of an outlined neutral action in the hover state.
+$gl-action-icon-color-disabled: $gl-color-neutral-400; // Used for the icon of a disabled action.
+$gl-action-text-color-disabled: $gl-color-neutral-500; // Used for the text of a disabled action.
+$gl-action-border-color-disabled: $gl-color-neutral-100; // Used for the border of a disabled action.
+$gl-action-background-color-disabled: $gl-color-neutral-50; // Used for the background of a disabled action.
+$gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

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

@@ -3,6 +3,41 @@
  * Do not edit directly
  */
 
+$gl-action-background-color-disabled: var(--gl-action-background-color-disabled);
+$gl-action-border-color-disabled: var(--gl-action-border-color-disabled);
+$gl-action-text-color-disabled: var(--gl-action-text-color-disabled);
+$gl-action-icon-color-disabled: var(--gl-action-icon-color-disabled);
+$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
+$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
+$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
+$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
+$gl-action-neutral-background-color-subtle-default: var(--gl-action-neutral-background-color-subtle-default);
+$gl-action-neutral-background-color-subtle-hover: var(--gl-action-neutral-background-color-subtle-hover);
+$gl-action-neutral-background-color-subtle-focus: var(--gl-action-neutral-background-color-subtle-focus);
+$gl-action-neutral-background-color-subtle-active: var(--gl-action-neutral-background-color-subtle-active);
+$gl-action-neutral-background-color-strong-default: var(--gl-action-neutral-background-color-strong-default);
+$gl-action-neutral-background-color-strong-hover: var(--gl-action-neutral-background-color-strong-hover);
+$gl-action-neutral-background-color-strong-focus: var(--gl-action-neutral-background-color-strong-focus);
+$gl-action-neutral-background-color-strong-active: var(--gl-action-neutral-background-color-strong-active);
+$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
+$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
+$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
+$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
+$gl-action-neutral-border-color-selected: var(--gl-action-neutral-border-color-selected);
+$gl-action-neutral-border-color-strong-default: var(--gl-action-neutral-border-color-strong-default);
+$gl-action-neutral-border-color-strong-hover: var(--gl-action-neutral-border-color-strong-hover);
+$gl-action-neutral-border-color-strong-focus: var(--gl-action-neutral-border-color-strong-focus);
+$gl-action-neutral-border-color-strong-active: var(--gl-action-neutral-border-color-strong-active);
+$gl-action-neutral-text-color-default: var(--gl-action-neutral-text-color-default);
+$gl-action-neutral-text-color-hover: var(--gl-action-neutral-text-color-hover);
+$gl-action-neutral-text-color-focus: var(--gl-action-neutral-text-color-focus);
+$gl-action-neutral-text-color-active: var(--gl-action-neutral-text-color-active);
+$gl-action-neutral-text-color-strong: var(--gl-action-neutral-text-color-strong);
+$gl-action-neutral-icon-color-default: var(--gl-action-neutral-icon-color-default);
+$gl-action-neutral-icon-color-hover: var(--gl-action-neutral-icon-color-hover);
+$gl-action-neutral-icon-color-focus: var(--gl-action-neutral-icon-color-focus);
+$gl-action-neutral-icon-color-active: var(--gl-action-neutral-icon-color-active);
+$gl-action-neutral-icon-color-strong: var(--gl-action-neutral-icon-color-strong);
 $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
@@ -387,6 +422,20 @@ $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-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
+$gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
+$gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
+$gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
+$gl-feedback-link-color-strong: var(--gl-feedback-link-color-strong);
+$gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
+$gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color);
+$gl-feedback-info-background-color: var(--gl-feedback-info-background-color);
+$gl-feedback-info-icon-color: var(--gl-feedback-info-icon-color);
+$gl-feedback-success-background-color: var(--gl-feedback-success-background-color);
+$gl-feedback-success-icon-color: var(--gl-feedback-success-icon-color);
+$gl-feedback-warning-background-color: var(--gl-feedback-warning-background-color);
+$gl-feedback-warning-icon-color: var(--gl-feedback-warning-icon-color);
+$gl-feedback-danger-background-color: var(--gl-feedback-danger-background-color);
+$gl-feedback-danger-icon-color: var(--gl-feedback-danger-icon-color);
 $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);

package/src/tokens/feedback.tokens.json

@@ -0,0 +1,162 @@
+{
+  "feedback": {
+    "background": {
+      "color": {
+        "strong": {
+          "$value": {
+            "default": "{color.neutral.950}",
+            "dark": "{color.neutral.10}"
+          },
+          "$type": "color",
+          "$description": "Used for a background associated with feedback like a tooltip or toast message."
+        }
+      }
+    },
+    "text": {
+      "color": {
+        "strong": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for text on a strong feedback background."
+        }
+      }
+    },
+    "icon": {
+      "color": {
+        "strong": {
+          "$value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon on a strong feedback background."
+        }
+      }
+    },
+    "link": {
+      "color": {
+        "strong": {
+          "$value": {
+            "default": "{color.blue.300}",
+            "dark": "{color.blue.700}"
+          },
+          "$type": "color",
+          "$description": "Used for a link on a strong feedback background."
+        }
+      }
+    },
+    "neutral": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.50}",
+            "dark": "{color.neutral.900}"
+          },
+          "$type": "color",
+          "$description": "Used for a background associated with neutral feedback."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.neutral.600}",
+            "dark": "{color.neutral.300}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon associated with a neutral feedback section."
+        }
+      }
+    },
+    "info": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.50}",
+            "dark": "{color.blue.900}"
+          },
+          "$type": "color",
+          "$description": "Used for a background associated with informational feedback or a highlighted section resulting from a user action."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.blue.600}",
+            "dark": "{color.blue.300}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon associated with informational feedback."
+        }
+      }
+    },
+    "success": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.green.50}",
+            "dark": "{color.green.900}"
+          },
+          "$type": "color",
+          "$description": "Used for a background associated with successful feedback or a new section resulting from a user action."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.green.600}",
+            "dark": "{color.green.300}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon associated with successful feedback or a new section."
+        }
+      }
+    },
+    "warning": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.50}",
+            "dark": "{color.orange.900}"
+          },
+          "$type": "color",
+          "$description": "Used for a background associated with warning feedback or to let a user know about confidential content."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon associated with warning feedback or confidential content."
+        }
+      }
+    },
+    "danger": {
+      "background": {
+        "color": {
+          "$value": {
+            "default": "{color.red.50}",
+            "dark": "{color.red.900}"
+          },
+          "$type": "color",
+          "$description": "Used for a background associated with danger or critical feedback."
+        }
+      },
+      "icon": {
+        "color": {
+          "$value": {
+            "default": "{color.red.600}",
+            "dark": "{color.red.300}"
+          },
+          "$type": "color",
+          "$description": "Used for an icon associated with danger or critical feedback."
+        }
+      }
+    }
+  }
+}