@gitlab/ui 123.5.0 → 123.6.1

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

@@ -927,6 +927,7 @@ $gl-border-color-section: $gl-border-color-default; // Used for the border color
 $gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
 $gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
 $gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
+$gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
@@ -1054,6 +1055,7 @@ $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-c
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
+$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
 $gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
@@ -1063,7 +1065,6 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
 $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
 $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
 $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
-$gl-alert-border-radius: $gl-border-radius-default; // Used for alert border radius.
 $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
 $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
 $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.

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

@@ -1057,6 +1057,7 @@ $gl-control-text-color-valid: var(--gl-control-text-color-valid);
 $gl-control-placeholder-color: var(--gl-control-placeholder-color);
 $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
 $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
+$gl-feedback-border-radius: var(--gl-feedback-border-radius);
 $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
 $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
 $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);

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

@@ -391,6 +391,7 @@ const borderRadius = {
   full: 'var(--gl-border-radius-full)',
   default: 'var(--gl-border-radius-default)',
   control: 'var(--gl-control-border-radius)',
+  feedback: 'var(--gl-feedback-border-radius)',
 };
 const opacity = {
   0: 'var(--gl-opacity-0)',

package/src/tokens/contextual/alert.tokens.json

@@ -2,7 +2,7 @@
   "alert": {
     "border": {
       "radius": {
-        "$value": "{border.radius.default}",
+        "$value": "{border.radius.lg}",
         "$type": "dimension",
         "$description": "Used for alert border radius.",
         "$extensions": {

package/src/tokens/semantic/feedback.tokens.json

@@ -1,5 +1,17 @@
 {
   "feedback": {
+    "border": {
+      "radius": {
+        "$value": "{border.radius.lg}",
+        "$type": "dimension",
+        "$description": "Used for the border radius of a feedback element.",
+        "$extensions": {
+          "com.figma.scope": [
+            "CORNER_RADIUS"
+          ]
+        }
+      }
+    },
     "strong": {
       "background": {
         "color": {

package/src/vendor/bootstrap/scss/_popover.scss

@@ -12,10 +12,8 @@
   @include font-size($popover-font-size);
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
-  background-color: $popover-bg;
   background-clip: padding-box;
   border: $popover-border-width solid $popover-border-color;
-  @include border-radius($popover-border-radius);
   @include box-shadow($popover-box-shadow);
 
   .arrow {
@@ -45,13 +43,11 @@
     &::before {
       bottom: 0;
       border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-top-color: $popover-arrow-outer-color;
     }
 
     &::after {
       bottom: $popover-border-width;
       border-width: $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-top-color: $popover-arrow-color;
     }
   }
 }
@@ -74,7 +70,6 @@
     &::after {
       left: $popover-border-width;
       border-width: ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5) 0;
-      border-right-color: $popover-arrow-color;
     }
   }
 }
@@ -94,7 +89,6 @@
     &::after {
       top: $popover-border-width;
       border-width: 0 ($popover-arrow-width * .5) $popover-arrow-height ($popover-arrow-width * .5);
-      border-bottom-color: $popover-arrow-color;
     }
   }
 
@@ -129,7 +123,6 @@
     &::after {
       right: $popover-border-width;
       border-width: ($popover-arrow-width * .5) 0 ($popover-arrow-width * .5) $popover-arrow-height;
-      border-left-color: $popover-arrow-color;
     }
   }
 }
@@ -156,9 +149,9 @@
   margin-bottom: 0; // Reset the default from Reboot
   @include font-size($font-size-base);
   color: $popover-header-color;
-  background-color: $popover-header-bg;
+  // background-color: $popover-header-bg;
   border-bottom: $popover-border-width solid color.adjust($popover-header-bg, $lightness: -5%);
-  @include border-top-radius($popover-inner-border-radius);
+  // @include border-top-radius($popover-inner-border-radius);
 
   &:empty {
     display: none;