@gitlab/ui 67.4.0 → 67.5.1

package/src/scss/variables.scss

@@ -1,4 +1,5 @@
 @import 'functions';
+@import '../../dist/tokens/scss/tokens';
 
 // Layout
 $grid-size: px-to-rem(8px);
@@ -49,125 +50,14 @@ $limited-layout-width: 990px !default;
 $container-xl: 1280px !default;
 
 // Color schema
-$black: #000 !default;
 $black-normal: #333 !default;
 
-$white: #fff !default;
 $white-contrast: #fff !default;
 $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;
 $transparent-rgba: rgba($white, 0);
 
-$green-50: #ecf4ee !default;
-$green-100: #c3e6cd !default;
-$green-200: #91d4a8 !default;
-$green-300: #52b87a !default;
-$green-400: #2da160 !default;
-$green-500: #108548 !default;
-$green-600: #217645 !default;
-$green-700: #24663b !default;
-$green-800: #0d532a !default;
-$green-900: #0a4020 !default;
-$green-950: #072b15 !default;
-
-$blue-50: #e9f3fc !default;
-$blue-100: #cbe2f9 !default;
-$blue-200: #9dc7f1 !default;
-$blue-300: #63a6e9 !default;
-$blue-400: #428fdc !default;
-$blue-500: #1f75cb !default;
-$blue-600: #1068bf !default;
-$blue-700: #0b5cad !default;
-$blue-800: #064787 !default;
-$blue-900: #033464 !default;
-$blue-950: #002850 !default;
-
-$orange-50: #fdf1dd !default;
-$orange-100: #f5d9a8 !default;
-$orange-200: #e9be74 !default;
-$orange-300: #d99530 !default;
-$orange-400: #c17d10 !default;
-$orange-500: #ab6100 !default;
-$orange-600: #9e5400 !default;
-$orange-700: #8f4700 !default;
-$orange-800: #703800 !default;
-$orange-900: #5c2900 !default;
-$orange-950: #421f00 !default;
-
-$red-50: #fcf1ef !default;
-$red-100: #fdd4cd !default;
-$red-200: #fcb5aa !default;
-$red-300: #f57f6c !default;
-$red-400: #ec5941 !default;
-$red-500: #dd2b0e !default;
-$red-600: #c91c00 !default;
-$red-700: #ae1800 !default;
-$red-800: #8d1300 !default;
-$red-900: #660e00 !default;
-$red-950: #4d0a00 !default;
-
-$purple-50: #f4f0ff !default;
-$purple-100: #e1d8f9 !default;
-$purple-200: #cbbbf2 !default;
-$purple-300: #ac93e6 !default;
-$purple-400: #9475db !default;
-$purple-500: #7b58cf !default;
-$purple-600: #694cc0 !default;
-$purple-700: #5943b6 !default;
-$purple-800: #453894 !default;
-$purple-900: #2f2a6b !default;
-$purple-950: #232150 !default;
-
-/*
-Neutral palette mapping
-
-Old variables are mapped to new variables by approximating the closest variable, erring on the side of shifting darker (with the exception of old 400). There is currently nothing mapped to 600 and 800, which makes them a good use case for subtle nuance in the UI.
-
-
-Before        After (reflected below)
--------------------------------------
-50            10
-100           50
-200           100
-300           200
-400           200
-500           300
-600           400
-700           500*
-800           700
-900           900
-950           950
-
-* Passes 4.5:1 contrast ratio on $gray-10
-*/
-
-$gray-10: #fbfafd !default;
-$gray-50: #ececef !default;
-$gray-100: #dcdcde !default;
-$gray-200: #bfbfc3 !default;
-$gray-300: #a4a3a8 !default;
-$gray-400: #89888d !default;
-$gray-500: #737278 !default;
-$gray-600: #626168 !default;
-$gray-700: #535158 !default;
-$gray-800: #434248 !default;
-$gray-900: #333238 !default;
-$gray-950: #1f1e24 !default;
-
-// Brand colours https://design.gitlab.com/brand-design/color
-$brand-charcoal: #171321 !default;
-$brand-orange-01: #fca326 !default;
-$brand-orange-02: #fc6d26 !default;
-$brand-orange-03: #e24329 !default;
-$brand-purple-01: #a989f5 !default;
-$brand-purple-02: #7759c2 !default;
-$brand-gray-01: #d1d0d3 !default;
-$brand-gray-02: #a2a1a6 !default;
-$brand-gray-03: #74717a !default;
-$brand-gray-04: #45424d !default;
-$brand-gray-05: #2b2838 !default;
-
 // The indigo light and indigo dark use $theme-indigo variables.
 $theme-indigo-50: #f1f1ff !default;
 $theme-indigo-100: #dbdbf8 !default;
@@ -242,68 +132,6 @@ $theme-light-red-800: #8b2212 !default;
 $theme-light-red-900: #751709 !default;
 $theme-light-red-950: #5c1105 !default;
 
-// Data visualization color palette
-
-$data-viz-green-50: #ddfab7;
-$data-viz-green-100: #c6ed94;
-$data-viz-green-200: #b0d97b;
-$data-viz-green-300: #94c25e;
-$data-viz-green-400: #81ac41;
-$data-viz-green-500: #619025;
-$data-viz-green-600: #4e7f0e;
-$data-viz-green-700: #366800;
-$data-viz-green-800: #275600;
-$data-viz-green-900: #1a4500;
-$data-viz-green-950: #133a03;
-
-$data-viz-aqua-50: #b5fefd;
-$data-viz-aqua-100: #93f2ef;
-$data-viz-aqua-200: #5edee3;
-$data-viz-aqua-300: #32c5d2;
-$data-viz-aqua-400: #00acc4;
-$data-viz-aqua-500: #0090b1;
-$data-viz-aqua-600: #007b9b;
-$data-viz-aqua-700: #006381;
-$data-viz-aqua-800: #00516c;
-$data-viz-aqua-900: #004059;
-$data-viz-aqua-950: #00344b;
-
-$data-viz-blue-50: #e9ebff;
-$data-viz-blue-100: #d2dcff;
-$data-viz-blue-200: #b7c6ff;
-$data-viz-blue-300: #97acff;
-$data-viz-blue-400: #7992f5;
-$data-viz-blue-500: #617ae2;
-$data-viz-blue-600: #4e65cd;
-$data-viz-blue-700: #3f51ae;
-$data-viz-blue-800: #374291;
-$data-viz-blue-900: #303470;
-$data-viz-blue-950: #2a2b59;
-
-$data-viz-magenta-50: #ffe3eb;
-$data-viz-magenta-100: #ffccdb;
-$data-viz-magenta-200: #fcacc5;
-$data-viz-magenta-300: #f88aaf;
-$data-viz-magenta-400: #e86e9a;
-$data-viz-magenta-500: #cf4d81;
-$data-viz-magenta-600: #b93d71;
-$data-viz-magenta-700: #9a2e5d;
-$data-viz-magenta-800: #7c214f;
-$data-viz-magenta-900: #661e3a;
-$data-viz-magenta-950: #541d31;
-
-$data-viz-orange-50: #fae8d1;
-$data-viz-orange-100: #f5d6b3;
-$data-viz-orange-200: #eebd8c;
-$data-viz-orange-300: #e99b60;
-$data-viz-orange-400: #e07e41;
-$data-viz-orange-500: #c95d2e;
-$data-viz-orange-600: #b14f18;
-$data-viz-orange-700: #92430a;
-$data-viz-orange-800: #6f3500;
-$data-viz-orange-900: #5e2f05;
-$data-viz-orange-950: #4b2707;
-
 $t-gray-a-02: rgba($gray-950, 0.02) !default;
 $t-gray-a-04: rgba($gray-950, 0.04) !default;
 $t-gray-a-06: rgba($gray-950, 0.06) !default;
@@ -326,18 +154,6 @@ $gl-font-weights: (
   'bold': $gl-font-weight-bold,
 );
 
-// Line height
-$gl-line-height-12: px-to-rem(12px);
-$gl-line-height-16: px-to-rem(16px);
-$gl-line-height-20: px-to-rem(20px);
-$gl-line-height-24: px-to-rem(24px);
-$gl-line-height-28: px-to-rem(28px);
-$gl-line-height-32: px-to-rem(32px);
-$gl-line-height-36: px-to-rem(36px);
-$gl-line-height-42: px-to-rem(42px);
-$gl-line-height-44: px-to-rem(44px);
-$gl-line-height-52: px-to-rem(52px);
-
 // Fonts
 $gl-monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono',
   'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace !default;

package/translations.json

@@ -1,5 +1,7 @@
 {
   "ClearIconButton.title": "Clear",
+  "GlSorting.sortAscending": "Sort direction: ascending",
+  "GlSorting.sortDescending": "Sort direction: descending",
   "GlSearchBoxByType.clearButtonTitle": "Clear",
   "GlSearchBoxByType.input.placeholder": "Search"
 }