@gitlab/ui 134.6.0 → 134.8.0

package/src/components/base/toggle/toggle.scss

@@ -66,15 +66,19 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-border-0;
   @apply gl-cursor-pointer;
   color: var(--gl-toggle-switch-icon-color-unchecked-default);
-  background-color: var(--gl-action-strong-neutral-background-color-default);
+  background-color: var(--gl-toggle-switch-track-color-unchecked-default);
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
   user-select: none;
-  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-default);
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
   @apply gl-rounded-pill;
-  @apply gl-duration-slow;
   @apply gl-leading-normal;
+  transition:
+    color $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+  @include gl-prefers-reduced-motion-transition;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -88,23 +92,24 @@ $toggle-height: 2.5 * $grid-size;
 
   &:hover {
     color: var(--gl-toggle-switch-icon-color-unchecked-hover);
-    background-color: var(--gl-action-strong-neutral-background-color-hover);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-hover);
+    background-color: var(--gl-toggle-switch-track-color-unchecked-hover);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
+
+    .toggle-icon::before {
+      transform: scale(0.875);
+    }
   }
 
   &:focus {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
-    background-color: var(--gl-action-strong-neutral-background-color-focus);
-    @include gl-focus($color: var(--gl-action-strong-neutral-border-color-focus), $important: true);
+    background-color: var(--gl-toggle-switch-track-color-unchecked-focus);
+    @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
   }
 
   &:active {
     color: var(--gl-toggle-switch-icon-color-unchecked-active);
-    background-color: var(--gl-action-strong-neutral-background-color-active);
-    @include gl-focus(
-      $color: var(--gl-action-strong-neutral-border-color-active),
-      $important: true
-    );
+    background-color: var(--gl-toggle-switch-track-color-unchecked-active);
+    @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
   }
 
   .toggle-loading {
@@ -112,69 +117,76 @@ $toggle-height: 2.5 * $grid-size;
   }
 
   .toggle-icon {
-    @apply gl-rounded-full;
-    position: absolute;
-    @apply gl-inline-flex;
-    @apply gl-items-center;
-    left: $gl-spacing-scale-1;
-    top: $gl-spacing-scale-1;
-    @apply gl-transition-all;
-    @apply gl-justify-center;
-    @apply gl-p-1;
-    background-color: var(--gl-action-strong-neutral-foreground-color-default);
-
-    &:hover {
-      background-color: var(--gl-action-strong-neutral-foreground-color-hover);
-    }
-
-    &:focus {
-      background-color: var(--gl-action-strong-neutral-foreground-color-focus);
-    }
-
-    &:active {
-      background-color: var(--gl-action-strong-neutral-foreground-color-active);
+    @apply gl-absolute;
+    @apply gl-w-5;
+    @apply gl-h-5;
+    @apply gl-left-1;
+    @apply gl-top-1;
+    transition: transform $gl-transition-duration-medium $gl-easing-out-cubic;
+    @include gl-prefers-reduced-motion-transition;
+
+    &::before {
+      content: "";
+      @apply gl-absolute;
+      @apply gl-inset-0;
+      @apply gl-rounded-full;
+      background-color: var(--gl-toggle-switch-background-color-unchecked-default);
+      transform: scale(0.75);
+      transition:
+        transform $gl-transition-duration-medium $gl-easing-out-cubic,
+        background-color $gl-transition-duration-medium $gl-easing-out-cubic;
+      @include gl-prefers-reduced-motion-transition;
     }
 
     > svg {
+      @apply gl-absolute;
       @apply gl-w-4;
       @apply gl-h-4;
-      @apply gl-align-baseline;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      // Check/close icons are only rendered in Windows high contrast
+      // (forced-colors) mode so the toggle state remains distinguishable
+      // when background colors are overridden by the user agent.
+      display: none;
+
+      @media (forced-colors: active) {
+        display: block;
+      }
     }
   }
 
   &.is-checked {
     color: var(--gl-toggle-switch-icon-color-checked-default);
-    background-color: var(--gl-action-strong-confirm-background-color-default);
-    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-default);
+    background-color: var(--gl-toggle-switch-track-color-checked-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
 
     &:hover {
       color: var(--gl-toggle-switch-icon-color-checked-hover);
-      background-color: var(--gl-action-strong-confirm-background-color-hover);
-      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-hover);
+      background-color: var(--gl-toggle-switch-track-color-checked-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
     }
 
     &:focus {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
-      background-color: var(--gl-action-strong-confirm-background-color-focus);
-      @include gl-focus(
-        $color: var(--gl-action-strong-confirm-border-color-focus),
-        $important: true
-      );
+      background-color: var(--gl-toggle-switch-track-color-checked-focus);
+      @include gl-focus($color: var(--gl-action-neutral-border-color-focus), $important: true);
     }
 
     &:active {
       color: var(--gl-toggle-switch-icon-color-checked-active);
-      background-color: var(--gl-action-strong-confirm-background-color-active);
-      @include gl-focus(
-        $color: var(--gl-action-strong-confirm-border-color-active),
-        $important: true
-      );
+      background-color: var(--gl-toggle-switch-track-color-checked-active);
+      @include gl-focus($color: var(--gl-action-neutral-border-color-active), $important: true);
     }
 
     .toggle-icon {
-      background-color: var(--gl-action-strong-confirm-foreground-color-default);
       transform: translateX($toggle-translate-width);
     }
+
+    .toggle-icon::before {
+      background-color: var(--gl-toggle-switch-background-color-checked-default);
+      transform: scale(1);
+    }
   }
 
   &.is-disabled,
@@ -185,8 +197,20 @@ $toggle-height: 2.5 * $grid-size;
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);
 
     .toggle-icon {
-      color: var(--gl-action-disabled-background-color);
-      background-color: var(--gl-action-disabled-foreground-color);
+      color: var(--gl-toggle-switch-icon-color-disabled);
+    }
+
+    .toggle-icon::before {
+      background-color: var(--gl-toggle-switch-background-color-disabled);
+    }
+
+    &:hover .toggle-icon::before {
+      transform: scale(0.75);
+    }
+
+    &.is-checked .toggle-icon::before,
+    &.is-checked:hover .toggle-icon::before {
+      transform: scale(1);
     }
 
     &:active,

package/src/components/dashboards/dashboard_panel/dashboard_panel.vue

@@ -7,6 +7,7 @@ import GlPopover from '../../base/popover/popover.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
 import GlLink from '../../base/link/link.vue';
 import GlTruncate from '../../utilities/truncate/truncate.vue';
+import GlSkeletonLoader from '../../base/skeleton_loader/skeleton_loader.vue';
 
 export default {
   name: 'GlDashboardPanel',
@@ -18,6 +19,7 @@ export default {
     GlSprintf,
     GlLink,
     GlTruncate,
+    GlSkeletonLoader,
   },
   props: {
     /**
@@ -205,7 +207,8 @@ export default {
   >
     <div class="gl-flex gl-h-full gl-flex-col">
       <div class="gl-mb-3 gl-flex gl-items-start gl-justify-between" data-testid="panel-title">
-        <div class="gl-flex gl-items-center gl-gap-2 gl-overflow-hidden">
+        <gl-skeleton-loader v-if="loading" :lines="1" />
+        <div v-else class="gl-flex gl-items-center gl-gap-2 gl-overflow-hidden">
           <gl-icon
             v-if="hasTitleIcon"
             :class="titleIconClass"

package/src/scss/bootstrap_no_utils.scss

@@ -0,0 +1,33 @@
+@import "variables";
+@import "../vendor/bootstrap/scss/functions";
+@import "../vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/scss/mixins";
+@import "../vendor/bootstrap/scss/root";
+@import "../vendor/bootstrap/scss/reboot";
+@import "../vendor/bootstrap/scss/type";
+@import "../vendor/bootstrap/scss/images";
+@import "../vendor/bootstrap/scss/code";
+@import "../vendor/bootstrap/scss/grid";
+@import "../vendor/bootstrap/scss/tables";
+@import "../vendor/bootstrap/scss/forms";
+@import "../vendor/bootstrap/scss/buttons";
+@import "../vendor/bootstrap/scss/transitions";
+@import "../vendor/bootstrap/scss/dropdown";
+@import "../vendor/bootstrap/scss/button-group";
+@import "../vendor/bootstrap/scss/input-group";
+@import "../vendor/bootstrap/scss/custom-forms";
+@import "../vendor/bootstrap/scss/nav";
+@import "../vendor/bootstrap/scss/navbar";
+@import "../vendor/bootstrap/scss/card";
+@import "../vendor/bootstrap/scss/breadcrumb";
+@import "../vendor/bootstrap/scss/pagination";
+@import "../vendor/bootstrap/scss/badge";
+@import "../vendor/bootstrap/scss/alert";
+@import "../vendor/bootstrap/scss/progress";
+@import "../vendor/bootstrap/scss/media";
+@import "../vendor/bootstrap/scss/list-group";
+@import "../vendor/bootstrap/scss/close";
+@import "../vendor/bootstrap/scss/modal";
+@import "../vendor/bootstrap/scss/tooltip";
+@import "../vendor/bootstrap/scss/popover";
+@import "../vendor/bootstrap/scss/print";

package/src/scss/gitlab_ui_no_utils.scss

@@ -0,0 +1,24 @@
+@import "mixins";
+
+@import "bootstrap_no_utils";
+@import "bootstrap_vue";
+
+// Design Tokens
+@import "tokens";
+
+// Settings
+@import "functions";
+@import "variables";
+@import "typescale/index";
+
+// Body
+@import "body";
+
+// Typography
+@import "typography";
+
+// Components
+@import "components";
+
+// Themes
+@import "themes";

package/src/scss/themes.scss

@@ -1,4 +1,5 @@
-:root.tint-neutral-indigo {
+:root.tint-neutral-indigo,
+.ui-indigo-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f9f8fa;
   --gl-color-neutral-50: #efebf2;
@@ -15,7 +16,8 @@
   --gl-color-neutral-1000: #0e0017;
 }
 
-:root.tint-neutral-blue {
+:root.tint-neutral-blue,
+.ui-blue-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8fa;
   --gl-color-neutral-50: #e9ebf0;
@@ -32,7 +34,8 @@
   --gl-color-neutral-1000: #010415;
 }
 
-:root.tint-neutral-green {
+:root.tint-neutral-green,
+.ui-green-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f7f9f8;
   --gl-color-neutral-50: #e6edeb;
@@ -49,7 +52,8 @@
   --gl-color-neutral-1000: #000603;
 }
 
-:root.tint-neutral-red {
+:root.tint-neutral-red,
+.ui-red-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #fbf7f9;
   --gl-color-neutral-50: #f4eaee;
@@ -66,7 +70,8 @@
   --gl-color-neutral-1000: #100106;
 }
 
-:root.tint-neutral-gray {
+:root.tint-neutral-gray,
+.ui-gray-scope {
   --gl-color-neutral-0: #fff;
   --gl-color-neutral-10: #f8f8f8;
   --gl-color-neutral-50: #ececec;