@gitlab/ui 75.1.0 → 76.0.0

package/package.json

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

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

@@ -418,7 +418,7 @@
     @include gl-fill-current-color;
     @include gl-inset-border-1-gray-200;
     @include gl-cursor-default;
-    @include gl-user-select-text;
+    user-select: text;
   }
 
   &.btn-link {

package/src/components/base/drawer/drawer.scss

@@ -66,7 +66,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
     background: $gl-drawer-scrim-gradient;
     top: -$gl-border-size-1;
     @include gl-translate-y-n100;
-    @include gl-content-empty;
+    content: '';
     @include gl-left-0;
     @include gl-absolute;
     @include gl-pointer-events-none;
@@ -115,7 +115,7 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 .gl-drawer-body-scrim {
   &::after {
     background: $gl-drawer-scrim-gradient;
-    @include gl-content-empty;
+    content: '';
     @include gl-bottom-0;
     @include gl-pointer-events-none;
     @include gl-w-full;

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

@@ -94,12 +94,12 @@
   .dropdown-toggle-split {
     &::after {
       @include gl-border-0;
-      @include gl-content-empty;
+      content: '';
       @include gl-display-block;
       @include gl-w-5;
       @include gl-h-5;
       @include gl-bg-current-color;
-      @include gl-mask-chevron-down;
+      @include mask-chevron-down;
     }
 
     &.btn-default:not(:disabled)::after {

package/src/components/base/form/form_input/form_input.scss

@@ -11,7 +11,7 @@
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
   @include form-control-focus($ignore-warning: true);
-  @include gl-appearance-none;
+  appearance: none;
 
   &:disabled,
   &:not(.form-control-plaintext):not([type='color']):read-only {

package/src/components/base/form/form_select/form_select.scss

@@ -20,7 +20,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @include gl-h-auto;
   @include gl-inset-border-1-gray-400;
   @include gl-border-none;
-  @include gl-appearance-none;
+  appearance: none;
   @include gl-text-truncate;
   @include gl-bg-no-repeat;
   background-image: url($gl-icon-select-chevron-down);

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

@@ -1,94 +1,48 @@
 .gl-markdown {
   @include gl-font-size-markdown;
   @include gl-line-height-24;
-  @include gl-text-gray-900;
+  color: $gl-text-color;
   @include gl-font-regular;
   @include gl-font-weight-normal;
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .gl-h1,
-  .gl-h2,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @include gl-font-weight-bold;
-  }
-
-  h1,
-  .gl-h1,
-  h2,
-  .gl-h2 {
-    @include gl-pb-5;
-    @include gl-border-b-solid;
-    @include gl-border-b-1;
-    @include gl-border-b-gray-200;
-    @include gl-mb-5;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @include gl-mt-6;
-    @include gl-mb-3;
+  :first-child {
+    @include gl-mt-0;
   }
 
   h1,
   .gl-h1 {
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h1,
-      $max: $gl-font-size-markdown-h1-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-32, $max: $gl-line-height-52);
-    @include gl-mt-0;
+    @include gl-heading-1;
+    @include gl-mt-7;
   }
 
   h2,
   .gl-h2 {
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h2,
-      $max: $gl-font-size-markdown-h2-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
+    @include gl-heading-2;
     @include gl-mt-6;
   }
 
   h3,
   .gl-h3 {
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h3,
-      $max: $gl-font-size-markdown-h3-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
+    @include gl-heading-3;
+    @include gl-mt-6;
   }
 
   h4,
   .gl-h4 {
-    @include gl-font-size-markdown;
-    @include gl-line-height-20;
+    @include gl-heading-4;
+    @include gl-mt-5;
   }
 
   h5,
-  .gl-h5,
-  h6,
-  .gl-h6 {
-    @include gl-font-size-markdown-sm;
-    @include gl-line-height-20;
+  .gl-h5 {
+    @include gl-heading-5;
+    @include gl-mt-5;
   }
 
   h6,
   .gl-h6 {
-    @include gl-text-gray-700;
+    @include gl-heading-6;
+    @include gl-mt-5;
   }
 
   p,
@@ -216,62 +170,39 @@
   @include gl-line-height-20;
 
   h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .gl-h1,
-  .gl-h2,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @include gl-mt-6;
-    @include gl-mb-3;
-    @include gl-line-height-20;
+  .gl-h1 {
+    @include gl-heading-1-fixed;
+    @include gl-mt-7; 
   }
 
-  h1,
-  .gl-h1,
   h2,
   .gl-h2 {
-    @include gl-pb-0;
-    @include gl-border-none;
+    @include gl-heading-2-fixed;
+    @include gl-mt-6;
   }
 
-  h1,
-  .gl-h1 {
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-compact-markdown-h1,
-      $max: $gl-font-size-compact-markdown-h1-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
+  h3,
+  .gl-h3 {
+    @include gl-heading-3-fixed;
+    @include gl-mt-6;
   }
 
-  h2,
-  .gl-h2 {
-    @include gl-font-lg;
+  h4,
+  .gl-h4 {
+    @include gl-heading-4-fixed;
+    @include gl-mt-5;
   }
 
-  h3,
-  .gl-h3,
-  h4,
-  .gl-h4,
   h5,
-  .gl-h5,
-  h6,
-  .gl-h6 {
-    @include gl-font-base;
+  .gl-h5 {
+    @include gl-heading-5-fixed;
+    @include gl-mt-5;
   }
 
-  h4,
-  .gl-h4,
-  h5,
-  .gl-h5,
   h6,
   .gl-h6 {
-    @include gl-text-gray-700;
+    @include gl-heading-6-fixed;
+    @include gl-mt-5;
   }
 
   .sm {

package/src/components/base/table/table.scss

@@ -57,7 +57,7 @@ table.gl-table {
   @mixin gl-tmp-stacked-override {
     tbody > tr {
       &::after {
-        @include gl-content-empty;
+        content: '';
         @include gl-h-6;
         @include gl-w-full;
         @include gl-display-block;

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

@@ -88,7 +88,7 @@
   @include gl-w-9;
   @include gl-h-6;
   @include gl-outline-none;
-  @include gl-user-select-none;
+  user-select: none;
   @include gl-rounded-pill;
   @include gl-transition-slow;
   @include gl-line-height-normal;

package/src/components/charts/legend/legend.scss

@@ -19,7 +19,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   &::after {
     background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
     @include gl-bottom-0;
-    @include gl-content-empty;
+    content: '';
     @include gl-display-block;
     @include gl-h-4;
     @include gl-absolute;

package/src/scss/mixins.scss

@@ -7,6 +7,13 @@
   max-width: $max-width;
 }
 
+@mixin mask-chevron-down {
+  mask-image: url('#{$gl-icon-chevron-down}');
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: cover;
+}
+
 @mixin gl-fluid-font-size($min, $max) {
   @include gl-responsive-property('font-size', $min, $max);
 }

package/src/scss/utilities.scss

@@ -122,18 +122,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
     animation-iteration-count: 3 !important;
   }
 }
-.gl-appearance-none {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.gl-appearance-none\! {
-  appearance: none !important;
-  -moz-appearance: none !important;
-  -webkit-appearance: none !important;
-}
-
 .gl-number-as-text-input {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -143,7 +131,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 
   -moz-appearance: textfield;
 }
-
 .gl-number-as-text-input\! {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -2936,12 +2923,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-focus--focus\!:focus{
   @include gl-focus
 }
-.gl-content-empty {
-  content: ''
-}
-.gl-content-empty\! {
-  content: '' !important
-}
 .gl-cursor-default {
   cursor: default
 }
@@ -4192,24 +4173,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-list-style-position-inside\! {
   list-style-position: inside !important
 }
-.gl-mask-chevron-down {
-  mask-image: url('#{$gl-icon-chevron-down}');
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: cover
-}
-.gl-mask-chevron-down\! {
-  mask-image: url('#{$gl-icon-chevron-down}') !important;
-  mask-repeat: no-repeat !important;
-  mask-position: center !important;
-  mask-size: cover !important
-}
-.gl-mix-blend-mode-luminosity {
-  mix-blend-mode: luminosity
-}
-.gl-mix-blend-mode-luminosity\! {
-  mix-blend-mode: luminosity !important
-}
 .gl-opacity-0 {
   opacity: 0
 }
@@ -8451,12 +8414,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-fill-transparent\! {
   fill: transparent !important
 }
-.gl-table-layout-fixed {
-  table-layout: fixed
-}
-.gl-table-layout-fixed\! {
-  table-layout: fixed !important
-}
 .gl-text-left {
   text-align: left;
 }
@@ -9524,21 +9481,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-letter-spacing-n01em\!{
   letter-spacing: -0.01em !important;
 }
-.gl-user-select-none {
-  user-select: none
-}
-
-.gl-user-select-none\! {
-  user-select: none !important
-}
-
-.gl-user-select-text {
-  user-select: text
-}
-
-.gl-user-select-text\! {
-  user-select: text !important
-}
 .gl-vertical-align-baseline {
   vertical-align: baseline
 }

package/src/scss/utility-mixins/appearance.scss

@@ -1,10 +1,4 @@
 /* stylelint-disable property-no-vendor-prefix */
-@mixin gl-appearance-none {
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
 @mixin gl-number-as-text-input {
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {

package/src/scss/utility-mixins/index.scss

@@ -23,15 +23,12 @@
 @import './box-shadow';
 @import './color';
 @import './composite';
-@import './content';
 @import './cursor';
 @import './display';
 @import './flex';
 @import './grid';
 @import './image';
 @import './list-style';
-@import './masks';
-@import './mix-blend-mode';
 @import './opacity';
 @import './outline';
 @import './overflow';
@@ -40,12 +37,10 @@
 @import './sizing';
 @import './spacing';
 @import './svg';
-@import './table';
 @import './text';
 @import './transform';
 @import './transition';
 @import './typography';
-@import './user-select';
 @import './vertical-align';
 @import './visibility';
 @import './z-index';

package/src/scss/utility-mixins/content.scss

@@ -1,8 +0,0 @@
-/**
-* Content utilities.
-*
-* naming convention: gl-content-{value}
-*/
-@mixin gl-content-empty {
-  content: '';
-}

package/src/scss/utility-mixins/masks.scss

@@ -1,6 +0,0 @@
-@mixin gl-mask-chevron-down {
-  mask-image: url('#{$gl-icon-chevron-down}');
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: cover;
-}

package/src/scss/utility-mixins/mix-blend-mode.scss

@@ -1,3 +0,0 @@
-@mixin gl-mix-blend-mode-luminosity {
-  mix-blend-mode: luminosity;
-}

package/src/scss/utility-mixins/table.scss

@@ -1,8 +0,0 @@
-/**
-* Table utilities
-*
-* naming convention: gl-table-{table-property}-{value}
-*/
-@mixin gl-table-layout-fixed {
-  table-layout: fixed;
-}

package/src/scss/utility-mixins/user-select.scss

@@ -1,12 +0,0 @@
-/**
-* User select utilities
-*
-* naming convention: gl-user-select-{config-name}
-*/
-@mixin gl-user-select-none {
-  user-select: none;
-}
-
-@mixin gl-user-select-text {
-  user-select: text;
-}