@gitlab/ui 95.2.1 → 95.4.0

package/dist/tokens/json/tokens.json

@@ -1313,7 +1313,10 @@
               "filePath": "src/tokens/action.tokens.json",
               "isSource": true,
               "original": {
-                "value": "{color.neutral.0}",
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.950}"
+                },
                 "$type": "color",
                 "comment": "Used for the foreground of a strong confirm action in the default state."
               },
@@ -1501,7 +1504,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.600}",
-                  "dark": "{color.neutral.300}"
+                  "dark": "{color.neutral.700}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the default state."
@@ -1526,7 +1529,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.700}",
-                  "dark": "{color.neutral.200}"
+                  "dark": "{color.neutral.600}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the hover state."
@@ -1573,7 +1576,7 @@
               "original": {
                 "value": {
                   "default": "{color.neutral.800}",
-                  "dark": "{color.neutral.100}"
+                  "dark": "{color.neutral.500}"
                 },
                 "$type": "color",
                 "comment": "Used for the background of a strong neutral action in the active state."
@@ -1600,7 +1603,10 @@
               "filePath": "src/tokens/action.tokens.json",
               "isSource": true,
               "original": {
-                "value": "{color.neutral.0}",
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.50}"
+                },
                 "$type": "color",
                 "comment": "Used for the foreground of a strong neutral action in the default state."
               },
@@ -15134,6 +15140,215 @@
       }
     }
   },
+  "toggle": {
+    "switch": {
+      "icon": {
+        "color": {
+          "unchecked": {
+            "default": {
+              "value": "#626168",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the default state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the default state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the hover state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the hover state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_HOVER",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#4c4b51",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the focus state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the focus state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_FOCUS",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#3a383f",
+              "$type": "color",
+              "comment": "Used for the icon color of an unchecked toggle switch in the active state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.neutral.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the icon color of an unchecked toggle switch in the active state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_UNCHECKED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "unchecked",
+                "active"
+              ]
+            }
+          },
+          "checked": {
+            "default": {
+              "value": "#1f75cb",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the default state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.default}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the default state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_DEFAULT",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#1068bf",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the hover state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.hover}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the hover state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "hover"
+              ]
+            },
+            "focus": {
+              "value": "#1068bf",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the focus state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.focus}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the focus state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "focus"
+              ]
+            },
+            "active": {
+              "value": "#0b5cad",
+              "$type": "color",
+              "comment": "Used for the icon color of a checked toggle switch in the active state.",
+              "filePath": "src/tokens/contextual/toggle.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{action.strong.confirm.background.color.active}",
+                "$type": "color",
+                "comment": "Used for the icon color of a checked toggle switch in the active state."
+              },
+              "name": "TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE",
+              "attributes": {},
+              "path": [
+                "toggle",
+                "switch",
+                "icon",
+                "color",
+                "checked",
+                "active"
+              ]
+            }
+          },
+          "disabled": {
+            "value": "#ececef",
+            "$type": "color",
+            "comment": "Used for the icon color of a disabled toggle switch.",
+            "filePath": "src/tokens/contextual/toggle.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": "{action.disabled.background.color}",
+              "$type": "color",
+              "comment": "Used for the icon color of a disabled toggle switch."
+            },
+            "name": "TOGGLE_SWITCH_ICON_COLOR_DISABLED",
+            "attributes": {},
+            "path": [
+              "toggle",
+              "switch",
+              "icon",
+              "color",
+              "disabled"
+            ]
+          }
+        }
+      }
+    }
+  },
   "token": {
     "foreground": {
       "color": {

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

@@ -744,12 +744,12 @@ $gl-background-color-strong: $gl-color-neutral-800; // Used to make the backgrou
 $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-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
-$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
-$gl-action-strong-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of a strong neutral action in the active state.
-$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-200; // Used for the background of a strong neutral action in the hover state.
-$gl-action-strong-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a strong neutral action in the default state.
+$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a strong neutral action in the default state.
+$gl-action-strong-neutral-background-color-active: $gl-color-neutral-500; // Used for the background of a strong neutral action in the active state.
+$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-600; // Used for the background of a strong neutral action in the hover state.
+$gl-action-strong-neutral-background-color-default: $gl-color-neutral-700; // Used for the background of a strong neutral action in the default state.
 $gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
-$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
+$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a strong confirm action in the default state.
 $gl-action-strong-confirm-background-color-active: $gl-color-blue-200; // Used for the background of a strong confirm action in the active state.
 $gl-action-strong-confirm-background-color-hover: $gl-color-blue-300; // Used for the background of a strong confirm action in the hover state.
 $gl-action-strong-confirm-background-color-default: $gl-color-blue-400; // Used for the background of a strong confirm action in the default state.
@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
+$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
+$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
+$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.

package/dist/tokens/scss/_tokens.scss

@@ -778,6 +778,13 @@ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
+$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
+$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
+$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
+$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
+$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
+$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
 $gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
@@ -891,6 +898,8 @@ $gl-action-selected-border-color-hover: $gl-action-selected-background-color-hov
 $gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
 $gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
 $gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
+$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
+$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
 $gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
 $gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
 $gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -682,6 +682,15 @@ $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
 $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
 $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
 $gl-tab-selected-indicator-color-default: var(--gl-tab-selected-indicator-color-default);
+$gl-toggle-switch-icon-color-unchecked-default: var(--gl-toggle-switch-icon-color-unchecked-default);
+$gl-toggle-switch-icon-color-unchecked-hover: var(--gl-toggle-switch-icon-color-unchecked-hover);
+$gl-toggle-switch-icon-color-unchecked-focus: var(--gl-toggle-switch-icon-color-unchecked-focus);
+$gl-toggle-switch-icon-color-unchecked-active: var(--gl-toggle-switch-icon-color-unchecked-active);
+$gl-toggle-switch-icon-color-checked-default: var(--gl-toggle-switch-icon-color-checked-default);
+$gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-checked-hover);
+$gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
+$gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
+$gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);

package/package.json

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

package/src/components/base/keyset_pagination/keyset_pagination.vue

@@ -121,6 +121,7 @@ export default {
         :href="prevButtonLink"
         :disabled="disabled || !hasPreviousPage"
         data-testid="prevButton"
+        category="tertiary"
         @click="$emit('prev', startCursor)"
       >
         <!-- @slot Used to customize the appearance of the "Prev" button -->
@@ -135,6 +136,7 @@ export default {
         :href="nextButtonLink"
         :disabled="disabled || !hasNextPage"
         data-testid="nextButton"
+        category="tertiary"
         @click="$emit('next', endCursor)"
       >
         <!-- @slot Used to customize the appearance of the "Next" button -->

package/src/components/base/paginated_list/paginated_list.vue

@@ -142,22 +142,24 @@ export default {
 
 <template>
   <div>
-    <div class="row-content-block second-block d-sm-flex justify-content-between flex-row-reverse">
+    <div class="gl-flex-row-reverse gl-justify-between sm:gl-flex">
       <slot name="header"></slot>
       <gl-search-box-by-type v-if="filterable" @input="query" />
     </div>
 
     <slot name="subheader"></slot>
 
-    <ul class="list-group list-group-flush list-unstyled">
-      <li v-for="listItem in paginatedList" :key="listItem[itemKey]" class="list-group-item">
+    <ul
+      class="gl-m-0 gl-grid gl-list-none gl-grid-cols-1 gl-divide-x-0 gl-divide-y gl-divide-solid gl-divide-default gl-p-0"
+    >
+      <li v-for="listItem in paginatedList" :key="listItem[itemKey]" class="gl-px-5 gl-py-4">
         <slot :list-item="listItem" :query="queryStr">{{ listItem.id }}</slot>
       </li>
     </ul>
 
     <gl-pagination
       v-if="!emptyList"
-      class="d-flex justify-content-center prepend-top-default"
+      align="center"
       :per-page="pageInfo.perPage"
       v-bind="$attrs"
       :value="pageInfo.page"

package/src/components/base/pagination/pagination.scss

@@ -1,86 +1,57 @@
 .gl-pagination {
   @apply gl-text-base;
+  @apply gl-text-nowrap;
 
-  a {
-    @apply gl-text-gray-900;
+  ul {
+    @apply gl-flex;
+    @apply gl-pl-0;
+    @apply gl-list-none;
+    @apply gl-rounded-base;
   }
 
-  .page-link {
-    @apply gl-border-gray-200;
-    @apply gl-leading-normal;
-    @apply gl-px-4;
-    @apply gl-py-3;
-
-    &.prev-page-item,
-    &.next-page-item {
-      @apply gl-px-3;
-    }
-
-    &:not(.active):hover {
-      @apply gl-text-gray-900;
-      box-shadow: inset 0 0 0 1px $gray-400;
-      border-color: $gray-400;
-      background: $gray-50;
-      @apply gl-z-1;
-    }
-
-    &:not(.active):focus {
-      @apply gl-bg-gray-50;
-    }
-
-    &:not(.active):active,
-    &:not(.active).active {
-      @apply gl-bg-gray-100;
-    }
-
-    &:not(.active):focus,
-    &:not(.active):active,
-    &:not(.active).active {
-      @apply gl-focus;
-    }
-
-    &,
-    &:active {
-      @apply gl-no-underline;
-    }
+  a {
+    color: var(--gl-action-neutral-foreground-color-default);
   }
+}
 
-  .page-item {
-    &:not(.disabled) a.active {
-      @apply gl-bg-blue-500;
-      @apply gl-border-blue-500;
-      @apply gl-text-white;
-      @apply gl-z-2;
-      @apply gl-shadow-none;
+.gl-pagination-item {
+  @apply gl-flex;
+  @apply gl-justify-center;
+  @apply gl-p-3;
+  @apply gl-leading-normal;
+  @apply gl-rounded-base;
+  @apply gl-no-underline;
+  @apply gl-min-w-7;
+  @apply gl-text-center;
+  @apply gl-border-1;
+  @apply gl-border-solid;
+  @include gl-action-neutral-colors;
+  @include gl-prefers-reduced-motion-transition;
+  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
+              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+              border-color $gl-transition-duration-medium $gl-easing-out-cubic;
+
+  &:hover {
+    @apply gl-no-underline;
+  }
 
-      &:focus {
-        @apply gl-focus;
-      }
-    }
+  &:focus,
+  &:active:focus {
+    @apply gl-no-underline;
+    @apply gl-focus;
+  }
 
-    &.disabled .page-link {
-      @apply gl-bg-gray-10;
-      @apply gl-border-gray-200;
-      @apply gl-text-gray-500;
-    }
+  &:active {
+    @apply gl-no-underline;
   }
 
-  .prev-page-item,
-  .next-page-item {
-    .gl-icon {
-      vertical-align: bottom;
-    }
+  &:not(.disabled).active {
+    @include gl-action-selected-colors;
   }
 }
 
-// stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-@include gl-media-breakpoint-down(sm) {
-  .gl-pagination {
-    .prev-page-item,
-    .next-page-item {
-      span {
-        display: none;
-      }
-    }
-  }
+.gl-pagination .disabled .gl-pagination-item {
+  @apply gl-border-transparent;
+  @apply gl-bg-transparent;
+  color: var(--gl-action-disabled-foreground-color);
 }