@gitlab/ui 122.7.0 → 122.8.0

package/dist/tokens/build/js/tokens.dark.js

@@ -608,7 +608,7 @@ const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f';
 const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51';
 const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51';
 const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d';
-const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.24)';
+const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.16)';
 const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d';
 const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';

package/dist/tokens/css/tokens.dark.css

@@ -752,7 +752,7 @@
   --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
-  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-24); /** Used for the background of a search input in a dropdown listbox. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */

package/dist/tokens/docs/tokens-tailwind-docs.dark.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/dist/tokens/docs/tokens-tailwind-docs.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/dist/tokens/figma/contextual.tokens.json

@@ -4267,7 +4267,8 @@
             "EFFECT_COLOR",
             "STROKE_COLOR"
           ]
-        }
+        },
+        "$deprecated": true
       }
     },
     "divider": {
@@ -4502,7 +4503,7 @@
         "color": {
           "$value": {
             "default": "{color.alpha.dark.2}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.16}"
           },
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",

package/dist/tokens/js/tokens.dark.js

@@ -636,7 +636,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = "#3a383f";
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = "#4c4b51";
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = "#4c4b51";
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = "#28272d";
-export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = "rgba(05, 05, 06, 0.24)";
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = "rgba(05, 05, 06, 0.16)";
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = "#28272d";
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = "#3a383f";
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = "#3a383f";

package/dist/tokens/json/tokens.dark.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19231,7 +19233,7 @@
       "background": {
         "color": {
           "key": "{dropdown.search.background.color}",
-          "$value": "rgba(05, 05, 06, 0.24)",
+          "$value": "rgba(05, 05, 06, 0.16)",
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",
           "$extensions": {
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/dist/tokens/json/tokens.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/dist/tokens/scss/_tokens.dark.scss

@@ -750,7 +750,7 @@ $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-backg
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
-$gl-dropdown-search-background-color: $gl-color-alpha-dark-24; // Used for the background of a search input in a dropdown listbox.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-16; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.7.0",
+  "version": "122.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/dropdown.scss

@@ -11,10 +11,6 @@
     // these create the 45deg cutoff angle at the base of the caret
     border-bottom: 1px solid var(--gl-dropdown-background-color);
     border-right: 1px solid var(--gl-dropdown-background-color);
-
-    // match the dropdown border
-    border-top: 1px solid var(--gl-dropdown-border-color);
-    border-left: 1px solid var(--gl-dropdown-border-color);
     position: absolute;
   }
 
@@ -31,7 +27,6 @@
   .gl-new-dropdown-panel {
     @apply gl-hidden;
     @apply gl-bg-dropdown;
-    @apply gl-border-1 gl-border-solid gl-border-dropdown;
     @apply gl-rounded-lg;
     @apply gl-drop-shadow-md;
     top: 0;

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

@@ -752,7 +752,7 @@
   --gl-dropdown-option-background-color-selected-default: var(--gl-color-neutral-800); /** Used for the background of a selected dropdown option in the default state. */
   --gl-dropdown-option-background-color-selected-hover: var(--gl-color-neutral-700); /** Used for the background of a selected dropdown option in the hover state. */
   --gl-dropdown-option-background-color-selected-active: var(--gl-color-neutral-900); /** Used for the background of a selected dropdown option in the active state. */
-  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-24); /** Used for the background of a search input in a dropdown listbox. */
+  --gl-dropdown-search-background-color: var(--gl-color-alpha-dark-16); /** Used for the background of a search input in a dropdown listbox. */
   --gl-filtered-search-token-type-background-color-default: var(--gl-color-neutral-900); /** Used for the filtered search type token background color in the default state. */
   --gl-filtered-search-token-type-background-color-hover: var(--gl-color-neutral-800); /** Used for the filtered search type token background color in the hover state. */
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /** Used for the filtered search data background color in the default state. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -17039,6 +17039,7 @@
           "STROKE_COLOR"
         ]
       },
+      "$deprecated": true,
       "filePath": "src/tokens/contextual/dropdown.tokens.json",
       "isSource": true,
       "original": {
@@ -17054,6 +17055,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "key": "{dropdown.border.color}"
       },
       "name": "DROPDOWN_BORDER_COLOR",

package/src/tokens/build/figma/contextual.tokens.json

@@ -4267,7 +4267,8 @@
             "EFFECT_COLOR",
             "STROKE_COLOR"
           ]
-        }
+        },
+        "$deprecated": true
       }
     },
     "divider": {
@@ -4502,7 +4503,7 @@
         "color": {
           "$value": {
             "default": "{color.alpha.dark.2}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.16}"
           },
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",

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

@@ -608,7 +608,7 @@ export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383f';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_HOVER = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_FOCUS = '#4c4b51';
 export const GL_DROPDOWN_OPTION_BACKGROUND_COLOR_SELECTED_ACTIVE = '#28272d';
-export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.24)';
+export const GL_DROPDOWN_SEARCH_BACKGROUND_COLOR = 'rgba(05, 05, 06, 0.16)';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_DEFAULT = '#28272d';
 export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';

package/src/tokens/build/json/tokens.dark.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19231,7 +19233,7 @@
       "background": {
         "color": {
           "key": "{dropdown.search.background.color}",
-          "$value": "rgba(05, 05, 06, 0.24)",
+          "$value": "rgba(05, 05, 06, 0.16)",
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",
           "$extensions": {
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

package/src/tokens/build/json/tokens.json

@@ -18537,6 +18537,7 @@
             "STROKE_COLOR"
           ]
         },
+        "$deprecated": true,
         "filePath": "src/tokens/contextual/dropdown.tokens.json",
         "isSource": true,
         "original": {
@@ -18552,6 +18553,7 @@
               "STROKE_COLOR"
             ]
           },
+          "$deprecated": true,
           "key": "{dropdown.border.color}"
         },
         "name": "DROPDOWN_BORDER_COLOR",
@@ -19245,7 +19247,7 @@
           "original": {
             "$value": {
               "default": "{color.alpha.dark.2}",
-              "dark": "{color.alpha.dark.24}"
+              "dark": "{color.alpha.dark.16}"
             },
             "$type": "color",
             "$description": "Used for the background of a search input in a dropdown listbox.",

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

@@ -750,7 +750,7 @@ $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-backg
 $gl-dropdown-option-background-color-selected-default: $gl-color-neutral-800; // Used for the background of a selected dropdown option in the default state.
 $gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-700; // Used for the background of a selected dropdown option in the hover state.
 $gl-dropdown-option-background-color-selected-active: $gl-color-neutral-900; // Used for the background of a selected dropdown option in the active state.
-$gl-dropdown-search-background-color: $gl-color-alpha-dark-24; // Used for the background of a search input in a dropdown listbox.
+$gl-dropdown-search-background-color: $gl-color-alpha-dark-16; // Used for the background of a search input in a dropdown listbox.
 $gl-filtered-search-token-type-background-color-default: $gl-color-neutral-900; // Used for the filtered search type token background color in the default state.
 $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; // Used for the filtered search type token background color in the hover state.
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.

package/src/tokens/contextual/dropdown.tokens.json

@@ -26,7 +26,8 @@
             "EFFECT_COLOR",
             "STROKE_COLOR"
           ]
-        }
+        },
+        "$deprecated": true
       }
     },
     "divider": {
@@ -261,7 +262,7 @@
         "color": {
           "$value": {
             "default": "{color.alpha.dark.2}",
-            "dark": "{color.alpha.dark.24}"
+            "dark": "{color.alpha.dark.16}"
           },
           "$type": "color",
           "$description": "Used for the background of a search input in a dropdown listbox.",