@gitlab/ui 89.6.0 → 89.7.0

package/src/components/base/alert/alert.scss

@@ -7,6 +7,35 @@
  */
 // stylelint-disable length-zero-no-unit
 $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
+$gl-alert-top-border-size: 2px;
+
+@mixin gl-alert-variant(
+  $variant,
+  $background-color,
+  $title-color,
+  $border-top-color,
+  $border-bottom-color,
+  $icon-color
+) {
+  .gl-alert-#{$variant} {
+    background-color: $background-color;
+    border-bottom: 1px solid $border-bottom-color;
+
+    &::before {
+      background: linear-gradient(to right, transparent 0%, $border-top-color 50%, transparent 100%);
+    }
+
+    .gl-alert-title {
+      color: $title-color;
+    }
+
+    @media (forced-colors: none) {
+      .gl-alert-icon {
+        color: $icon-color;
+      }
+    }
+  }
+}
 
 .gl-alert {
   @include gl-font-base;
@@ -15,7 +44,17 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
   @include gl-py-5;
 
   @media (forced-colors: active) {
-    border: 1px solid;
+    border: 1px solid transparent;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: $gl-alert-top-border-size;
+    position: absolute;
+    top: -1px; // To accumilate for the border width
+    left: 0;
   }
 
   &-not-dismissible {
@@ -80,46 +119,53 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   position: absolute;
-  top: $gl-spacing-scale-4;
+  top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
   right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
 }
 
-.gl-alert-danger {
-  background-color: var(--gl-feedback-danger-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-danger-icon-color);
-  }
-}
-
-.gl-alert-warning {
-  background-color: var(--gl-feedback-warning-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-warning-icon-color);
-  }
-}
-
-.gl-alert-tip {
-  background-color: var(--gl-feedback-neutral-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-neutral-icon-color);
-  }
-}
-
-.gl-alert-info {
-  background-color: var(--gl-feedback-info-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-info-icon-color);
-  }
-}
-
-.gl-alert-success {
-  background-color: var(--gl-feedback-success-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-success-icon-color);
-  }
-}
+/* Variants */
+
+@include gl-alert-variant(
+  $variant: danger,
+  $background-color: var(--gl-alert-danger-background-color),
+  $title-color: var(--gl-alert-danger-title-color),
+  $border-top-color: var(--gl-alert-danger-border-top-color),
+  $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
+  $icon-color: var(--gl-feedback-danger-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: warning,
+  $background-color: var(--gl-alert-warning-background-color),
+  $title-color: var(--gl-alert-warning-title-color),
+  $border-top-color: var(--gl-alert-warning-border-top-color),
+  $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
+  $icon-color: var(--gl-feedback-warning-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: tip,
+  $background-color: var(--gl-alert-neutral-background-color),
+  $title-color: var(--gl-alert-neutral-title-color),
+  $border-top-color: var(--gl-alert-neutral-border-top-color),
+  $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
+  $icon-color: var(--gl-feedback-neutral-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: info,
+  $background-color: var(--gl-alert-info-background-color),
+  $title-color: var(--gl-alert-info-title-color),
+  $border-top-color: var(--gl-alert-info-border-top-color),
+  $border-bottom-color: var(--gl-alert-info-border-bottom-color),
+  $icon-color: var(--gl-feedback-info-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: success,
+  $background-color: var(--gl-alert-success-background-color),
+  $title-color: var(--gl-alert-success-title-color),
+  $border-top-color: var(--gl-alert-success-border-top-color),
+  $border-bottom-color: var(--gl-alert-success-border-bottom-color),
+  $icon-color: var(--gl-feedback-success-icon-color),
+);

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -9,7 +9,6 @@ import GlAlert from '../../../base/alert/alert.vue';
 import GlFormInputGroup from '../../../base/form/form_input_group/form_input_group.vue';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import GlForm from '../../../base/form/form.vue';
-import GlFormText from '../../../base/form/form_text/form_text.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
 import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
@@ -55,7 +54,6 @@ export default {
     GlFormInputGroup,
     GlFormTextarea,
     GlForm,
-    GlFormText,
     GlExperimentBadge,
     GlDuoChatLoader,
     GlDuoChatPredefinedPrompts,
@@ -602,11 +600,12 @@ export default {
             />
           </template>
         </gl-form-input-group>
-        <gl-form-text
-          class="gl-mt-3 gl-leading-20 gl-text-gray-400"
+        <p
+          class="gl-mb-0 gl-mt-3 gl-text-sm gl-leading-20 gl-text-subtle"
           data-testid="chat-legal-disclaimer"
-          >{{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}</gl-form-text
         >
+          {{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}
+        </p>
       </gl-form>
     </footer>
   </aside>

package/src/tokens/build/css/tokens.css

@@ -664,6 +664,16 @@
   --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
+  --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a danger alert. */
+  --gl-alert-danger-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a danger alert. */
+  --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a warning alert. */
+  --gl-alert-warning-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a warning alert. */
+  --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a success alert. */
+  --gl-alert-success-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a success alert. */
+  --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of an info alert. */
+  --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of an info alert. */
+  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /* Used for the border center color of a neutral alert. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
@@ -768,6 +778,16 @@
   --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
+  --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /* Used for the background color of a danger alert. */
+  --gl-alert-danger-title-color: var(--gl-text-color-heading); /* Used for the title color of a danger alert. */
+  --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /* Used for the background color of a warning alert. */
+  --gl-alert-warning-title-color: var(--gl-text-color-heading); /* Used for the title color of a warning alert. */
+  --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /* Used for the background color of a success alert. */
+  --gl-alert-success-title-color: var(--gl-text-color-heading); /* Used for the title color of a success alert. */
+  --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /* Used for the background color of an info alert. */
+  --gl-alert-info-title-color: var(--gl-text-color-heading); /* Used for the title color of an info alert. */
+  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
+  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */

package/src/tokens/build/css/tokens.dark.css

@@ -664,6 +664,16 @@
   --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */
+  --gl-alert-danger-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a danger alert. */
+  --gl-alert-danger-border-top-color: var(--gl-color-red-400); /* Used for the border color of a danger alert. */
+  --gl-alert-warning-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a warning alert. */
+  --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /* Used for the border color of a warning alert. */
+  --gl-alert-success-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a success alert. */
+  --gl-alert-success-border-top-color: var(--gl-color-green-400); /* Used for the border color of a success alert. */
+  --gl-alert-info-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of an info alert. */
+  --gl-alert-info-border-top-color: var(--gl-color-blue-400); /* Used for the border color of an info alert. */
+  --gl-alert-neutral-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
@@ -768,6 +778,16 @@
   --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
+  --gl-alert-danger-background-color: var(--gl-background-color-subtle); /* Used for the background color of a danger alert. */
+  --gl-alert-danger-title-color: var(--gl-color-red-300); /* Used for the title color of a danger alert. */
+  --gl-alert-warning-background-color: var(--gl-background-color-subtle); /* Used for the background color of a warning alert. */
+  --gl-alert-warning-title-color: var(--gl-color-orange-300); /* Used for the title color of a warning alert. */
+  --gl-alert-success-background-color: var(--gl-background-color-subtle); /* Used for the background color of a success alert. */
+  --gl-alert-success-title-color: var(--gl-color-green-300); /* Used for the title color of a success alert. */
+  --gl-alert-info-background-color: var(--gl-background-color-subtle); /* Used for the background color of an info alert. */
+  --gl-alert-info-title-color: var(--gl-color-blue-300); /* Used for the title color of an info alert. */
+  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
+  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */

package/src/tokens/build/js/tokens.dark.js

@@ -301,6 +301,26 @@ export const DATA_VIZ_ORANGE_700 = '#e99b60';
 export const DATA_VIZ_ORANGE_800 = '#eebd8c';
 export const DATA_VIZ_ORANGE_900 = '#f5d6b3';
 export const DATA_VIZ_ORANGE_950 = '#fae8d1';
+export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff'; // Used for the title color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d'; // Used for the border center color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a neutral alert.
+export const GL_ALERT_INFO_TITLE_COLOR = '#63a6e9'; // Used for the title color of an info alert.
+export const GL_ALERT_INFO_BACKGROUND_COLOR = '#28272d'; // Used for the background color of an info alert.
+export const GL_ALERT_INFO_BORDER_TOP_COLOR = '#428fdc'; // Used for the border color of an info alert.
+export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of an info alert.
+export const GL_ALERT_SUCCESS_TITLE_COLOR = '#52b87a'; // Used for the title color of a success alert.
+export const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a success alert.
+export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = '#2da160'; // Used for the border color of a success alert.
+export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a success alert.
+export const GL_ALERT_WARNING_TITLE_COLOR = '#d99530'; // Used for the title color of a warning alert.
+export const GL_ALERT_WARNING_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a warning alert.
+export const GL_ALERT_WARNING_BORDER_TOP_COLOR = '#c17d10'; // Used for the border color of a warning alert.
+export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a warning alert.
+export const GL_ALERT_DANGER_TITLE_COLOR = '#f57f6c'; // Used for the title color of a danger alert.
+export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a danger alert.
+export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941'; // Used for the border color of a danger alert.
+export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a danger alert.
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
 export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; // Red text color for avatar fallback with no particular meaning.

package/src/tokens/build/js/tokens.js

@@ -301,6 +301,26 @@ export const DATA_VIZ_ORANGE_700 = '#92430a';
 export const DATA_VIZ_ORANGE_800 = '#6f3500';
 export const DATA_VIZ_ORANGE_900 = '#5e2f05';
 export const DATA_VIZ_ORANGE_950 = '#4b2707';
+export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#18171d'; // Used for the title color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#ececef'; // Used for the background color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = 'transparent'; // Used for the border center color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a neutral alert.
+export const GL_ALERT_INFO_TITLE_COLOR = '#18171d'; // Used for the title color of an info alert.
+export const GL_ALERT_INFO_BACKGROUND_COLOR = '#e9f3fc'; // Used for the background color of an info alert.
+export const GL_ALERT_INFO_BORDER_TOP_COLOR = 'transparent'; // Used for the border color of an info alert.
+export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of an info alert.
+export const GL_ALERT_SUCCESS_TITLE_COLOR = '#18171d'; // Used for the title color of a success alert.
+export const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; // Used for the background color of a success alert.
+export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = 'transparent'; // Used for the border color of a success alert.
+export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a success alert.
+export const GL_ALERT_WARNING_TITLE_COLOR = '#18171d'; // Used for the title color of a warning alert.
+export const GL_ALERT_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for the background color of a warning alert.
+export const GL_ALERT_WARNING_BORDER_TOP_COLOR = 'transparent'; // Used for the border color of a warning alert.
+export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a warning alert.
+export const GL_ALERT_DANGER_TITLE_COLOR = '#18171d'; // Used for the title color of a danger alert.
+export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for the background color of a danger alert.
+export const GL_ALERT_DANGER_BORDER_TOP_COLOR = 'transparent'; // Used for the border color of a danger alert.
+export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a danger alert.
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(05, 05, 06, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
 export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#8d1300'; // Red text color for avatar fallback with no particular meaning.