@gitlab/ui 98.5.1 → 99.0.0

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

@@ -1,381 +0,0 @@
-/**
-* Font family utility
-*
-* naming convention: gl-font-{family-name}
-* Notes:
-* - Strictly based on design system typography specs
-*/
-@mixin gl-font-monospace {
-  font-family: $gl-monospace-font;
-  font-variant-ligatures: none;
-}
-
-@mixin gl-font-regular {
-  font-family: $gl-regular-font;
-}
-
-/**
-* Font style utility
-*
-* naming convention: gl-font-style-{family-name}
-*/
-@mixin gl-font-style-italic {
-  font-style: italic;
-}
-
-@mixin gl-font-style-normal {
-  font-style: normal;
-}
-
-/**
-* Heading utility
-*
-* naming convention: gl-heading-{level}
-* Notes:
-* - Includes a default margin bottom
-* - Fixed sizes have limited use, check
-* https://design.gitlab.com/product-foundations/type-fundamentals
-*/
-
-@mixin gl-heading-6 {
-  @include gl-heading-scale-200;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-6-fixed {
-  @include gl-heading-scale-200-fixed;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-5 {
-  @include gl-heading-scale-300;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-5-fixed {
-  @include gl-heading-scale-300-fixed;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-4 {
-  @include gl-heading-scale-400;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-4-fixed {
-  @include gl-heading-scale-400-fixed;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-3 {
-  @include gl-heading-scale-500;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-3-fixed {
-  @include gl-heading-scale-500-fixed;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-2 {
-  @include gl-heading-scale-600;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-2-fixed {
-  @include gl-heading-scale-600-fixed;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-1 {
-  @include gl-heading-scale-700;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-1-fixed {
-  @include gl-heading-scale-700-fixed;
-  margin-bottom: $gl-mb-heading;
-}
-
-@mixin gl-heading-display {
-  @include gl-heading-scale-800;
-  margin-bottom: $gl-mb-heading-display;
-}
-
-/**
-* Heading scale utility
-*
-* naming convention: gl-heading-scale-{size-variable-value}
-*
-* Notes:
-* - For contextual heading size adjustments only, check
-* https://design.gitlab.com/product-foundations/type-fundamentals
-* - See variables.scss for font-size default and fixed scales.
-*/
-
-@mixin gl-heading-scale-100 {
-  @include gl-heading-scale(100);
-}
-
-@mixin gl-heading-scale-100-fixed {
-  @include gl-heading-scale(100, $fixed: true);
-}
-
-@mixin gl-heading-scale-200 {
-  @include gl-heading-scale(200);
-}
-
-@mixin gl-heading-scale-200-fixed {
-  @include gl-heading-scale(200, $fixed: true);
-}
-
-@mixin gl-heading-scale-300 {
-  @include gl-heading-scale(300);
-}
-
-@mixin gl-heading-scale-300-fixed {
-  @include gl-heading-scale(300, $fixed: true);
-}
-
-@mixin gl-heading-scale-400 {
-  @include gl-heading-scale(400);
-}
-
-@mixin gl-heading-scale-400-fixed {
-  @include gl-heading-scale(400, $fixed: true);
-}
-
-@mixin gl-heading-scale-500 {
-  @include gl-heading-scale(500);
-}
-
-@mixin gl-heading-scale-500-fixed {
-  @include gl-heading-scale(500, $fixed: true);
-}
-
-@mixin gl-heading-scale-600 {
-  @include gl-heading-scale(600);
-}
-
-@mixin gl-heading-scale-600-fixed {
-  @include gl-heading-scale(600, $fixed: true);
-}
-
-@mixin gl-heading-scale-700 {
-  @include gl-heading-scale(700);
-}
-
-@mixin gl-heading-scale-700-fixed {
-  @include gl-heading-scale(700, $fixed: true);
-}
-
-@mixin gl-heading-scale-800 {
-  @include gl-heading-scale(800);
-}
-
-@mixin gl-heading-scale-800-fixed {
-  @include gl-heading-scale(800, $fixed: true);
-}
-
-/**
-* DEPRECATED
-* TODO: migrate all of these away
-* Font size utility
-*
-* naming convention: gl-font-{type-scale-size}
-* Notes:
-* - Strictly based on design system type scale. See
-* $gl-type-scale for further references.
-*/
-@mixin gl-font-xs {
-  font-size: $gl-font-size-xs;
-}
-
-@mixin gl-font-sm {
-  font-size: $gl-font-size-sm;
-}
-
-@mixin gl-font-base {
-  font-size: $gl-font-size;
-}
-
-@mixin gl-font-lg {
-  font-size: $gl-font-size-lg;
-}
-
-@mixin gl-font-size-h-display {
-  font-size: $gl-font-size-h-display;
-}
-
-@mixin gl-font-size-h1 {
-  font-size: $gl-font-size-h1;
-}
-
-@mixin gl-font-size-h2 {
-  font-size: $gl-font-size-h2;
-}
-
-@mixin gl-font-size-h-display-xl {
-  font-size: $gl-font-size-h-display-xl;
-}
-
-@mixin gl-font-size-h1-xl {
-  font-size: $gl-font-size-h1-xl;
-}
-
-@mixin gl-font-size-h2-xl {
-  font-size: $gl-font-size-h2-xl;
-}
-
-@mixin gl-font-icon-size {
-  font-size: $default-icon-size;
-}
-
-@mixin gl-font-size-markdown-sm {
-  font-size: $gl-font-size-markdown-sm;
-}
-
-@mixin gl-font-size-markdown {
-  font-size: $gl-font-size-markdown;
-}
-
-@mixin gl-font-size-markdown-h1 {
-  font-size: $gl-font-size-markdown-h1;
-}
-
-@mixin gl-font-size-markdown-h2 {
-  font-size: $gl-font-size-markdown-h2;
-}
-
-@mixin gl-font-size-markdown-h3 {
-  font-size: $gl-font-size-markdown-h3;
-}
-
-@mixin gl-font-size-compact-markdown-h1 {
-  font-size: $gl-font-size-compact-markdown-h1;
-}
-
-@mixin gl-reset-font-size {
-  font-size: inherit;
-}
-
-/**
-* Font-weight utilities.
-*
-* naming convention: gl-font-weight-[bold|normal|number]
-*/
-
-@mixin gl-font-weight-100 {
-  font-weight: 100;
-}
-
-@mixin gl-font-weight-300 {
-  font-weight: 300;
-}
-
-@mixin gl-font-weight-normal {
-  font-weight: $gl-font-weight-normal;
-}
-
-@mixin gl-font-weight-semibold {
-  font-weight: $gl-font-weight-semibold;
-}
-
-@mixin gl-font-weight-bold {
-  font-weight: $gl-font-weight-bold;
-}
-
-@mixin gl-sm-font-weight-bold {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-font-weight-bold;
-  }
-}
-
-/**
-* Line height utilities.
-*
-* naming convention:
-* - gl-line-height-ratio-{ratio-multiplied-by-1000}
-* - gl-line-height-{line-height-in-pixels}
-* notes:
-* - Strictly based in gl-line-height-{n} variables
-*/
-
-// TODO: Remove after migration
-@mixin gl-line-height-0 {
-  line-height: 0;
-}
-
-// TODO: Remove after migration
-@mixin gl-line-height-1 {
-  line-height: 1;
-}
-
-@mixin gl-line-height-ratio-0000 {
-  line-height: 0;
-}
-
-@mixin gl-line-height-ratio-1000 {
-  line-height: 1;
-}
-
-@mixin gl-line-height-ratio-1125 {
-  line-height: 1.125;
-}
-
-@mixin gl-line-height-ratio-1250 {
-  line-height: 1.25;
-}
-
-@mixin gl-line-height-normal {
-  line-height: $gl-line-height-16;
-}
-
-@mixin gl-line-height-12 {
-  line-height: $gl-line-height-12;
-}
-
-@mixin gl-line-height-20 {
-  line-height: $gl-line-height-20;
-}
-
-@mixin gl-line-height-24 {
-  line-height: $gl-line-height-24;
-}
-
-@mixin gl-line-height-28 {
-  line-height: $gl-line-height-28;
-}
-
-@mixin gl-line-height-32 {
-  line-height: $gl-line-height-32;
-}
-
-@mixin gl-line-height-36 {
-  line-height: $gl-line-height-36;
-}
-
-@mixin gl-line-height-42 {
-  line-height: $gl-line-height-42;
-}
-
-@mixin gl-line-height-52 {
-  line-height: $gl-line-height-52;
-}
-
-@mixin gl-reset-line-height {
-  line-height: inherit;
-}
-
-/**
-* Letter spacing utilities.
-*
-* naming convention: gl-letter-spacing-{letter-spacing}{unit}
-*/
-@mixin gl-letter-spacing-06em {
-  letter-spacing: 0.06em;
-}
-
-@mixin gl-letter-spacing-n01em {
-  letter-spacing: -0.01em;
-}

package/src/scss/utility-mixins/vertical-align.scss

@@ -1,22 +0,0 @@
-/**
-* Vertical align utilities
-*/
-@mixin gl-vertical-align-baseline {
-  vertical-align: baseline;
-}
-
-@mixin gl-vertical-align-middle {
-  vertical-align: middle;
-}
-
-@mixin gl-vertical-align-top {
-  vertical-align: top;
-}
-
-@mixin gl-vertical-align-bottom {
-  vertical-align: bottom;
-}
-
-@mixin gl-vertical-align-text-bottom {
-  vertical-align: text-bottom;
-}

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

@@ -1,12 +0,0 @@
-/**
-* Visbility utilities.
-*
-* naming convention: gl-visibility-[value]
-*/
-@mixin gl-visibility-hidden {
-  visibility: hidden;
-}
-
-@mixin gl-visibility-visible {
-  visibility: visible;
-}

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

@@ -1,37 +0,0 @@
-/**
-* z-index utilities
-*
-* naming convention: gl-z-index-{value}
-*/
-
-@mixin gl-z-index-0 {
-  z-index: 0;
-}
-
-@mixin gl-z-index-1($focus: true) {
-  z-index: 1;
-}
-
-@mixin gl-z-index-2 {
-  z-index: 2;
-}
-
-@mixin gl-z-index-3 {
-  z-index: 3;
-}
-
-@mixin gl-z-index-4 {
-  z-index: 4;
-}
-
-@mixin gl-z-index-200 {
-  z-index: 200;
-}
-
-@mixin gl-z-index-999 {
-  z-index: 999;
-}
-
-@mixin gl-z-index-9999 {
-  z-index: 9999;
-}