@gitlab/ui 96.1.0 → 96.2.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@gitlab/ui",
-  "version": "96.1.0",
+  "version": "96.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "jsnext:main": "dist/index.js",
   "source": "src/index.js",
+  "vueSource": "src/index.js",
   "sideEffects": [
     "*.css",
     "*.scss"

package/src/components/base/button/button.scss

@@ -406,7 +406,7 @@
     @if $feature-button-border {
       border-color: $green-600;
     } @else {
-      @include gl-inset-border-1-green-600;
+      box-shadow: inset 0 0 0 1px var(--green-600, #{$green-600});
     }
 
     &:hover {
@@ -457,7 +457,7 @@
     @if $feature-button-border {
       border-color: $green-500;
     } @else {
-      @include gl-inset-border-1-green-500;
+      box-shadow: inset 0 0 0 1px var(--green-500, #{$green-500});
     }
 
     &:hover {

package/src/components/base/markdown/markdown.scss

@@ -56,13 +56,13 @@
     }
 
     &.sm {
-      @include gl-font-size-markdown-sm;
+      font-size: $gl-font-size-markdown-sm;
       @apply gl-leading-20;
     }
   }
 
   .sm {
-    @include gl-font-size-markdown-sm;
+    font-size: $gl-font-size-markdown-sm;
     @apply gl-leading-20;
   }
 
@@ -77,7 +77,7 @@
     @apply gl-pl-6;
     @apply gl-my-3;
     @apply gl-mx-0;
-    @include gl-inset-border-l-4-gray-100;
+    box-shadow: inset $gl-border-size-4 0 0 0 $gray-100;
   }
 
   .idiff {
@@ -106,7 +106,7 @@
     @apply gl-rounded-base;
     @apply gl-py-3;
     @apply gl-px-4;
-    @include gl-inset-border-1-gray-100;
+    box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
     @apply gl-my-7;
     @apply gl-overflow-auto;
 
@@ -146,12 +146,14 @@
     td {
       @apply gl-px-3;
       @apply gl-py-4;
-      @include gl-inset-border-b-1-gray-100;
+      box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
       @apply gl-align-top;
     }
 
     th {
-      @include gl-inset-border-y-1-gray-100;
+      box-shadow:
+        inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+        inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
       @apply gl-font-bold;
     }
 

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -11,7 +11,7 @@
       border-color: var(--gl-border-color-strong);
     } @else {
       @apply gl-border-none;
-      @include gl-inset-border-1-gray-400;
+      @apply gl-shadow-inner-1-gray-400;
     }
   }
 
@@ -19,7 +19,7 @@
     @if $feature-button-border {
       border-color: var(--gl-border-color-strong);
     } @else {
-      @include gl-inset-border-1-gray-400;
+      @apply gl-shadow-inner-1-gray-400;
     }
   }
 

package/src/components/base/segmented_control/segmented_control.scss

@@ -3,17 +3,23 @@
  */
 
 @mixin gl-btn-gl-segmented-button-first {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset #{$gl-border-size-1} 0 0 0 $gray-200;
+  box-shadow:
+    inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200,
+    inset #{$gl-border-size-1} 0 0 0 $gray-200;
 }
 
 @mixin gl-btn-gl-segmented-button-last {
-  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
-    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset -#{$gl-border-size-1} 0 0 0 $gray-200;
+  box-shadow:
+    inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200,
+    inset -#{$gl-border-size-1} 0 0 0 $gray-200;
 }
 
 @mixin gl-btn-gl-segmented-button-focus($color) {
-  box-shadow: $focus-ring, inset 0 0 0 $gl-border-size-2 $color;
+  box-shadow:
+    $focus-ring,
+    inset 0 0 0 $gl-border-size-2 $color;
 }
 
 .btn-group.gl-segmented-control {
@@ -33,13 +39,13 @@
       @apply gl-cursor-pointer;
     }
 
-  .btn-gl-segmented-button {
-    @apply gl-text-base;
-    @apply gl-leading-normal;
-    @apply gl-text-gray-900;
-    @apply gl-fill-current;
-    @apply gl-bg-gray-10;
-    border-color: $gray-200;
+    .btn-gl-segmented-button {
+      @apply gl-text-base;
+      @apply gl-leading-normal;
+      @apply gl-text-gray-900;
+      @apply gl-fill-current;
+      @apply gl-bg-gray-10;
+      border-color: $gray-200;
 
       &:not(:first-child) {
         border-left-color: transparent;
@@ -64,11 +70,11 @@
       &.active {
         @apply gl-z-2;
         border-color: $gray-400;
-        @include gl-inset-border-1-gray-400;
+        box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
         @apply gl-bg-white;
 
         &:hover {
-          @include gl-inset-border-1-gray-400;
+          box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
           @apply gl-bg-gray-50;
         }
 
@@ -80,9 +86,9 @@
         }
       }
 
-    &:focus-within {
-      @apply gl-focus;
-    }
+      &:focus-within {
+        @apply gl-focus;
+      }
 
       &.disabled,
       &[disabled],
@@ -115,7 +121,9 @@
       @apply gl-text-gray-900;
       @apply gl-fill-current;
       @apply gl-bg-gray-10;
-      @include gl-inset-border-y-1-gray-200;
+      box-shadow:
+        inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+        inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
 
       &:first-child {
         @include gl-btn-gl-segmented-button-first;
@@ -126,7 +134,7 @@
       }
 
       &:hover {
-        @include gl-inset-border-2-gray-400;
+        box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
         @apply gl-bg-gray-50;
       }
 
@@ -138,11 +146,11 @@
 
       &.active {
         @apply gl-z-2;
-        @include gl-inset-border-2-gray-300;
+        box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
         @apply gl-bg-white;
 
         &:hover {
-          @include gl-inset-border-2-gray-400;
+          box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
           @apply gl-bg-gray-50;
         }
 
@@ -162,7 +170,9 @@
       &.disabled:hover,
       &[disabled]:hover {
         @apply gl-text-gray-400;
-        @include gl-inset-border-y-1-gray-200;
+        box-shadow:
+          inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+          inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
         @apply gl-z-0;
         @apply gl-cursor-not-allowed;
 

package/src/scss/typescale/_index.scss

@@ -98,6 +98,6 @@
     @apply gl-pl-6;
     @apply gl-my-3;
     @apply gl-mx-0;
-    @include gl-inset-border-l-4-gray-100;
+    @apply gl-shadow-inner-l-4-gray-100;
   }
 }