@gitlab/ui 124.4.3 → 126.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/dist/components/base/alert/alert.js +1 -10
  2. package/dist/components/base/form/form_select/form_select.js +1 -9
  3. package/dist/index.css +2 -2
  4. package/dist/index.css.map +1 -1
  5. package/dist/tailwind.css +1 -1
  6. package/dist/tailwind.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +193 -1
  8. package/dist/tokens/build/js/tokens.js +193 -1
  9. package/package.json +5 -10
  10. package/src/components/base/alert/alert.scss +0 -4
  11. package/src/components/base/alert/alert.vue +1 -10
  12. package/src/components/base/form/form_select/form_select.vue +1 -15
  13. package/src/tokens/build/css/tokens.css +192 -0
  14. package/src/tokens/build/css/tokens.dark.css +192 -0
  15. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +59 -0
  16. package/src/tokens/build/docs/tokens-tailwind-docs.json +59 -0
  17. package/src/tokens/build/figma/constants.tokens.json +180 -0
  18. package/src/tokens/build/figma/semantic.tokens.json +209 -0
  19. package/src/tokens/build/js/tokens.dark.js +198 -0
  20. package/src/tokens/build/js/tokens.js +198 -0
  21. package/src/tokens/build/json/tokens.dark.json +1117 -0
  22. package/src/tokens/build/json/tokens.json +1117 -0
  23. package/src/tokens/build/scss/_tokens.dark.scss +192 -0
  24. package/src/tokens/build/scss/_tokens.scss +192 -0
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +192 -0
  26. package/src/tokens/build/tailwind/components.cjs +253 -0
  27. package/src/tokens/build/tailwind/tokens.cjs +2 -0
  28. package/src/tokens/constant/heading.tokens.json +182 -0
  29. package/src/tokens/semantic/font.tokens.json +11 -0
  30. package/src/tokens/semantic/heading.tokens.json +178 -0
  31. package/src/tokens/semantic/letter_spacing.tokens.json +13 -0
  32. package/src/tokens/semantic/line_height.tokens.json +13 -0
  33. package/tailwind.defaults.js +2 -253
  34. package/bin/migrate_custom_utils_to_tw.bundled.mjs +0 -205443
  35. package/dist/tokens/css/tokens.css +0 -1156
  36. package/dist/tokens/css/tokens.dark.css +0 -1156
  37. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +0 -42846
  38. package/dist/tokens/docs/tokens-tailwind-docs.json +0 -42846
  39. package/dist/tokens/figma/constants.tokens.json +0 -2756
  40. package/dist/tokens/figma/contextual.tokens.json +0 -5929
  41. package/dist/tokens/figma/deprecated.tokens.json +0 -2899
  42. package/dist/tokens/figma/semantic.tokens.json +0 -2479
  43. package/dist/tokens/js/tokens.dark.js +0 -1286
  44. package/dist/tokens/js/tokens.js +0 -1275
  45. package/dist/tokens/json/tokens.dark.json +0 -36934
  46. package/dist/tokens/json/tokens.json +0 -36934
  47. package/dist/tokens/scss/_tokens.dark.scss +0 -1153
  48. package/dist/tokens/scss/_tokens.scss +0 -1153
  49. package/dist/tokens/scss/_tokens_custom_properties.scss +0 -1154
  50. package/dist/tokens/tailwind/tokens.cjs +0 -558
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -252,6 +252,7 @@ $gl-font-weight-300: 300;
252
252
  $gl-font-weight-normal: 400;
253
253
  $gl-font-weight-semibold: 500;
254
254
  $gl-font-weight-bold: 600;
255
+ $gl-heading-default-margin-top: 0;
255
256
  $gl-line-height-12: 0.75rem;
256
257
  $gl-line-height-16: 1rem;
257
258
  $gl-line-height-20: 1.25rem;
@@ -262,6 +263,7 @@ $gl-line-height-36: 2.25rem;
262
263
  $gl-line-height-42: 2.625rem;
263
264
  $gl-line-height-44: 2.75rem;
264
265
  $gl-line-height-52: 3.25rem;
266
+ $gl-line-height-heading: 1.25;
265
267
  $gl-opacity-0: 0;
266
268
  $gl-opacity-1: .1;
267
269
  $gl-opacity-2: .2;
@@ -591,9 +593,31 @@ $gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); // Used for
591
593
  $gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); // Used for the background of a danger (destructive) action in the hover state.
592
594
  $gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); // Used for the background of a danger (destructive) action in the active state.
593
595
  $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
596
+ $gl-letter-spacing-heading: -0.01em;
594
597
  $gl-text-primary: #ececef; // Use text.color.default instead.
595
598
  $gl-text-secondary: #89888d; // Use text.color.subtle instead.
596
599
  $gl-text-tertiary: #737278; // Use text.color.disabled instead.
600
+ $gl-heading-3-letter-spacing: inherit;
601
+ $gl-heading-4-letter-spacing: inherit;
602
+ $gl-heading-5-letter-spacing: inherit;
603
+ $gl-heading-6-letter-spacing: inherit;
604
+ $gl-heading-scale-100-letter-spacing: inherit;
605
+ $gl-heading-scale-200-letter-spacing: inherit;
606
+ $gl-heading-scale-300-letter-spacing: inherit;
607
+ $gl-heading-scale-400-letter-spacing: inherit;
608
+ $gl-heading-scale-500-letter-spacing: inherit;
609
+ $gl-heading-scale-800-line-height: 1.125;
610
+ $gl-heading-scale-100-fixed-letter-spacing: inherit;
611
+ $gl-heading-scale-200-fixed-letter-spacing: inherit;
612
+ $gl-heading-scale-300-fixed-letter-spacing: inherit;
613
+ $gl-heading-scale-400-fixed-letter-spacing: inherit;
614
+ $gl-heading-scale-500-fixed-letter-spacing: inherit;
615
+ $gl-heading-scale-800-fixed-line-height: 1.125;
616
+ $gl-heading-display-line-height: 1.125;
617
+ $gl-heading-3-fixed-letter-spacing: inherit;
618
+ $gl-heading-4-fixed-letter-spacing: inherit;
619
+ $gl-heading-5-fixed-letter-spacing: inherit;
620
+ $gl-heading-6-fixed-letter-spacing: inherit;
597
621
  $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
598
622
  $gl-border-color-default: $gl-color-neutral-700; // Used for the default border color.
599
623
  $gl-border-color-subtle: $gl-color-neutral-800; // Used for a subtle border in combination with the default background.
@@ -609,6 +633,8 @@ $gl-border-radius-3xl: $gl-spacing-scale-6;
609
633
  $gl-font-size-sm: $gl-font-size-100;
610
634
  $gl-font-size-md: $gl-font-size-300;
611
635
  $gl-font-size-lg: $gl-font-size-400;
636
+ $gl-font-weight-heading: $gl-font-weight-bold;
637
+ $gl-heading-default-margin-bottom: $gl-spacing-scale-5;
612
638
  $gl-shadow-color-default: $gl-color-alpha-dark-40; // Used for the default shadow color.
613
639
  $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
614
640
  $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -966,6 +992,102 @@ $gl-text-color-warning: $gl-color-orange-300; // Used for text that requires cau
966
992
  $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
967
993
  $gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
968
994
  $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
995
+ $gl-heading-1-margin-top: $gl-heading-default-margin-top;
996
+ $gl-heading-1-font-size: $gl-font-size-700;
997
+ $gl-heading-1-letter-spacing: $gl-letter-spacing-heading;
998
+ $gl-heading-1-line-height: $gl-line-height-heading;
999
+ $gl-heading-2-margin-top: $gl-heading-default-margin-top;
1000
+ $gl-heading-2-font-size: $gl-font-size-600;
1001
+ $gl-heading-2-letter-spacing: $gl-letter-spacing-heading;
1002
+ $gl-heading-2-line-height: $gl-line-height-heading;
1003
+ $gl-heading-3-margin-top: $gl-heading-default-margin-top;
1004
+ $gl-heading-3-font-size: $gl-font-size-500;
1005
+ $gl-heading-3-line-height: $gl-line-height-heading;
1006
+ $gl-heading-4-margin-top: $gl-heading-default-margin-top;
1007
+ $gl-heading-4-font-size: $gl-font-size-400;
1008
+ $gl-heading-4-line-height: $gl-line-height-heading;
1009
+ $gl-heading-5-margin-top: $gl-heading-default-margin-top;
1010
+ $gl-heading-5-font-size: $gl-font-size-300;
1011
+ $gl-heading-5-line-height: $gl-line-height-heading;
1012
+ $gl-heading-6-margin-top: $gl-heading-default-margin-top;
1013
+ $gl-heading-6-font-size: $gl-font-size-200;
1014
+ $gl-heading-6-line-height: $gl-line-height-heading;
1015
+ $gl-heading-scale-100-margin-top: $gl-heading-default-margin-top;
1016
+ $gl-heading-scale-100-font-size: $gl-font-size-100;
1017
+ $gl-heading-scale-100-line-height: $gl-line-height-heading;
1018
+ $gl-heading-scale-200-margin-top: $gl-heading-default-margin-top;
1019
+ $gl-heading-scale-200-font-size: $gl-font-size-200;
1020
+ $gl-heading-scale-200-line-height: $gl-line-height-heading;
1021
+ $gl-heading-scale-300-margin-top: $gl-heading-default-margin-top;
1022
+ $gl-heading-scale-300-font-size: $gl-font-size-300;
1023
+ $gl-heading-scale-300-line-height: $gl-line-height-heading;
1024
+ $gl-heading-scale-400-margin-top: $gl-heading-default-margin-top;
1025
+ $gl-heading-scale-400-font-size: $gl-font-size-400;
1026
+ $gl-heading-scale-400-line-height: $gl-line-height-heading;
1027
+ $gl-heading-scale-500-margin-top: $gl-heading-default-margin-top;
1028
+ $gl-heading-scale-500-font-size: $gl-font-size-500;
1029
+ $gl-heading-scale-500-line-height: $gl-line-height-heading;
1030
+ $gl-heading-scale-600-margin-top: $gl-heading-default-margin-top;
1031
+ $gl-heading-scale-600-font-size: $gl-font-size-600;
1032
+ $gl-heading-scale-600-letter-spacing: $gl-letter-spacing-heading;
1033
+ $gl-heading-scale-600-line-height: $gl-line-height-heading;
1034
+ $gl-heading-scale-700-margin-top: $gl-heading-default-margin-top;
1035
+ $gl-heading-scale-700-font-size: $gl-font-size-700;
1036
+ $gl-heading-scale-700-letter-spacing: $gl-letter-spacing-heading;
1037
+ $gl-heading-scale-700-line-height: $gl-line-height-heading;
1038
+ $gl-heading-scale-800-margin-top: $gl-heading-default-margin-top;
1039
+ $gl-heading-scale-800-font-size: $gl-font-size-800;
1040
+ $gl-heading-scale-800-letter-spacing: $gl-letter-spacing-heading;
1041
+ $gl-heading-scale-100-fixed-margin-top: $gl-heading-default-margin-top;
1042
+ $gl-heading-scale-100-fixed-font-size: $gl-font-size-100-fixed;
1043
+ $gl-heading-scale-100-fixed-line-height: $gl-line-height-heading;
1044
+ $gl-heading-scale-200-fixed-margin-top: $gl-heading-default-margin-top;
1045
+ $gl-heading-scale-200-fixed-font-size: $gl-font-size-200-fixed;
1046
+ $gl-heading-scale-200-fixed-line-height: $gl-line-height-heading;
1047
+ $gl-heading-scale-300-fixed-margin-top: $gl-heading-default-margin-top;
1048
+ $gl-heading-scale-300-fixed-font-size: $gl-font-size-300-fixed;
1049
+ $gl-heading-scale-300-fixed-line-height: $gl-line-height-heading;
1050
+ $gl-heading-scale-400-fixed-margin-top: $gl-heading-default-margin-top;
1051
+ $gl-heading-scale-400-fixed-font-size: $gl-font-size-400-fixed;
1052
+ $gl-heading-scale-400-fixed-line-height: $gl-line-height-heading;
1053
+ $gl-heading-scale-500-fixed-margin-top: $gl-heading-default-margin-top;
1054
+ $gl-heading-scale-500-fixed-font-size: $gl-font-size-500-fixed;
1055
+ $gl-heading-scale-500-fixed-line-height: $gl-line-height-heading;
1056
+ $gl-heading-scale-600-fixed-margin-top: $gl-heading-default-margin-top;
1057
+ $gl-heading-scale-600-fixed-font-size: $gl-font-size-600-fixed;
1058
+ $gl-heading-scale-600-fixed-letter-spacing: $gl-letter-spacing-heading;
1059
+ $gl-heading-scale-600-fixed-line-height: $gl-line-height-heading;
1060
+ $gl-heading-scale-700-fixed-margin-top: $gl-heading-default-margin-top;
1061
+ $gl-heading-scale-700-fixed-font-size: $gl-font-size-700-fixed;
1062
+ $gl-heading-scale-700-fixed-letter-spacing: $gl-letter-spacing-heading;
1063
+ $gl-heading-scale-700-fixed-line-height: $gl-line-height-heading;
1064
+ $gl-heading-scale-800-fixed-margin-top: $gl-heading-default-margin-top;
1065
+ $gl-heading-scale-800-fixed-font-size: $gl-font-size-800-fixed;
1066
+ $gl-heading-scale-800-fixed-letter-spacing: $gl-letter-spacing-heading;
1067
+ $gl-heading-display-margin-top: $gl-heading-default-margin-top;
1068
+ $gl-heading-display-font-size: $gl-font-size-800;
1069
+ $gl-heading-display-letter-spacing: $gl-letter-spacing-heading;
1070
+ $gl-heading-display-margin-bottom: $gl-spacing-scale-6;
1071
+ $gl-heading-1-fixed-margin-top: $gl-heading-default-margin-top;
1072
+ $gl-heading-1-fixed-font-size: $gl-font-size-700-fixed;
1073
+ $gl-heading-1-fixed-letter-spacing: $gl-letter-spacing-heading;
1074
+ $gl-heading-1-fixed-line-height: $gl-line-height-heading;
1075
+ $gl-heading-2-fixed-margin-top: $gl-heading-default-margin-top;
1076
+ $gl-heading-2-fixed-font-size: $gl-font-size-600-fixed;
1077
+ $gl-heading-2-fixed-letter-spacing: $gl-letter-spacing-heading;
1078
+ $gl-heading-2-fixed-line-height: $gl-line-height-heading;
1079
+ $gl-heading-3-fixed-margin-top: $gl-heading-default-margin-top;
1080
+ $gl-heading-3-fixed-font-size: $gl-font-size-500-fixed;
1081
+ $gl-heading-3-fixed-line-height: $gl-line-height-heading;
1082
+ $gl-heading-4-fixed-margin-top: $gl-heading-default-margin-top;
1083
+ $gl-heading-4-fixed-font-size: $gl-font-size-400-fixed;
1084
+ $gl-heading-4-fixed-line-height: $gl-line-height-heading;
1085
+ $gl-heading-5-fixed-margin-top: $gl-heading-default-margin-top;
1086
+ $gl-heading-5-fixed-font-size: $gl-font-size-300-fixed;
1087
+ $gl-heading-5-fixed-line-height: $gl-line-height-heading;
1088
+ $gl-heading-6-fixed-margin-top: $gl-heading-default-margin-top;
1089
+ $gl-heading-6-fixed-font-size: $gl-font-size-200-fixed;
1090
+ $gl-heading-6-fixed-line-height: $gl-line-height-heading;
969
1091
  $gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
970
1092
  $gl-border-radius-default: $gl-border-radius-md;
971
1093
  $gl-font-size-base: $gl-font-size-md;
@@ -1104,6 +1226,76 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
1104
1226
  $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
1105
1227
  $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
1106
1228
  $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
1229
+ $gl-heading-1-font-weight: $gl-font-weight-heading;
1230
+ $gl-heading-1-margin-bottom: $gl-heading-default-margin-bottom;
1231
+ $gl-heading-1-color: $gl-text-color-heading;
1232
+ $gl-heading-2-font-weight: $gl-font-weight-heading;
1233
+ $gl-heading-2-margin-bottom: $gl-heading-default-margin-bottom;
1234
+ $gl-heading-2-color: $gl-text-color-heading;
1235
+ $gl-heading-3-font-weight: $gl-font-weight-heading;
1236
+ $gl-heading-3-margin-bottom: $gl-heading-default-margin-bottom;
1237
+ $gl-heading-3-color: $gl-text-color-heading;
1238
+ $gl-heading-4-font-weight: $gl-font-weight-heading;
1239
+ $gl-heading-4-margin-bottom: $gl-heading-default-margin-bottom;
1240
+ $gl-heading-4-color: $gl-text-color-heading;
1241
+ $gl-heading-5-font-weight: $gl-font-weight-heading;
1242
+ $gl-heading-5-margin-bottom: $gl-heading-default-margin-bottom;
1243
+ $gl-heading-5-color: $gl-text-color-heading;
1244
+ $gl-heading-6-font-weight: $gl-font-weight-heading;
1245
+ $gl-heading-6-margin-bottom: $gl-heading-default-margin-bottom;
1246
+ $gl-heading-6-color: $gl-text-color-heading;
1247
+ $gl-heading-scale-100-font-weight: $gl-font-weight-heading;
1248
+ $gl-heading-scale-100-color: $gl-text-color-heading;
1249
+ $gl-heading-scale-200-font-weight: $gl-font-weight-heading;
1250
+ $gl-heading-scale-200-color: $gl-text-color-heading;
1251
+ $gl-heading-scale-300-font-weight: $gl-font-weight-heading;
1252
+ $gl-heading-scale-300-color: $gl-text-color-heading;
1253
+ $gl-heading-scale-400-font-weight: $gl-font-weight-heading;
1254
+ $gl-heading-scale-400-color: $gl-text-color-heading;
1255
+ $gl-heading-scale-500-font-weight: $gl-font-weight-heading;
1256
+ $gl-heading-scale-500-color: $gl-text-color-heading;
1257
+ $gl-heading-scale-600-font-weight: $gl-font-weight-heading;
1258
+ $gl-heading-scale-600-color: $gl-text-color-heading;
1259
+ $gl-heading-scale-700-font-weight: $gl-font-weight-heading;
1260
+ $gl-heading-scale-700-color: $gl-text-color-heading;
1261
+ $gl-heading-scale-800-font-weight: $gl-font-weight-heading;
1262
+ $gl-heading-scale-800-color: $gl-text-color-heading;
1263
+ $gl-heading-scale-100-fixed-font-weight: $gl-font-weight-heading;
1264
+ $gl-heading-scale-100-fixed-color: $gl-text-color-heading;
1265
+ $gl-heading-scale-200-fixed-font-weight: $gl-font-weight-heading;
1266
+ $gl-heading-scale-200-fixed-color: $gl-text-color-heading;
1267
+ $gl-heading-scale-300-fixed-font-weight: $gl-font-weight-heading;
1268
+ $gl-heading-scale-300-fixed-color: $gl-text-color-heading;
1269
+ $gl-heading-scale-400-fixed-font-weight: $gl-font-weight-heading;
1270
+ $gl-heading-scale-400-fixed-color: $gl-text-color-heading;
1271
+ $gl-heading-scale-500-fixed-font-weight: $gl-font-weight-heading;
1272
+ $gl-heading-scale-500-fixed-color: $gl-text-color-heading;
1273
+ $gl-heading-scale-600-fixed-font-weight: $gl-font-weight-heading;
1274
+ $gl-heading-scale-600-fixed-color: $gl-text-color-heading;
1275
+ $gl-heading-scale-700-fixed-font-weight: $gl-font-weight-heading;
1276
+ $gl-heading-scale-700-fixed-color: $gl-text-color-heading;
1277
+ $gl-heading-scale-800-fixed-font-weight: $gl-font-weight-heading;
1278
+ $gl-heading-scale-800-fixed-color: $gl-text-color-heading;
1279
+ $gl-heading-display-font-weight: $gl-font-weight-heading;
1280
+ $gl-heading-display-color: $gl-text-color-heading;
1281
+ $gl-heading-1-fixed-font-weight: $gl-font-weight-heading;
1282
+ $gl-heading-1-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1283
+ $gl-heading-1-fixed-color: $gl-text-color-heading;
1284
+ $gl-heading-2-fixed-font-weight: $gl-font-weight-heading;
1285
+ $gl-heading-2-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1286
+ $gl-heading-2-fixed-color: $gl-text-color-heading;
1287
+ $gl-heading-3-fixed-font-weight: $gl-font-weight-heading;
1288
+ $gl-heading-3-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1289
+ $gl-heading-3-fixed-color: $gl-text-color-heading;
1290
+ $gl-heading-4-fixed-font-weight: $gl-font-weight-heading;
1291
+ $gl-heading-4-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1292
+ $gl-heading-4-fixed-color: $gl-text-color-heading;
1293
+ $gl-heading-5-fixed-font-weight: $gl-font-weight-heading;
1294
+ $gl-heading-5-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1295
+ $gl-heading-5-fixed-color: $gl-text-color-heading;
1296
+ $gl-heading-6-fixed-font-weight: $gl-font-weight-heading;
1297
+ $gl-heading-6-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1298
+ $gl-heading-6-fixed-color: $gl-text-color-heading;
1107
1299
  $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
1108
1300
  $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
1109
1301
  $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -252,6 +252,7 @@ $gl-font-weight-300: 300;
252
252
  $gl-font-weight-normal: 400;
253
253
  $gl-font-weight-semibold: 500;
254
254
  $gl-font-weight-bold: 600;
255
+ $gl-heading-default-margin-top: 0;
255
256
  $gl-line-height-12: 0.75rem;
256
257
  $gl-line-height-16: 1rem;
257
258
  $gl-line-height-20: 1.25rem;
@@ -262,6 +263,7 @@ $gl-line-height-36: 2.25rem;
262
263
  $gl-line-height-42: 2.625rem;
263
264
  $gl-line-height-44: 2.75rem;
264
265
  $gl-line-height-52: 3.25rem;
266
+ $gl-line-height-heading: 1.25;
265
267
  $gl-opacity-0: 0;
266
268
  $gl-opacity-1: .1;
267
269
  $gl-opacity-2: .2;
@@ -580,9 +582,31 @@ $gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); // Used for
580
582
  $gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); // Used for the background of a danger (destructive) action in the default state.
581
583
  $gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); // Used for the background of a danger (destructive) action in the hover state.
582
584
  $gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for the background of a danger (destructive) action in the active state.
585
+ $gl-letter-spacing-heading: -0.01em;
583
586
  $gl-text-primary: #28272d; // Use text.color.default instead.
584
587
  $gl-text-secondary: #737278; // Use text.color.subtle instead.
585
588
  $gl-text-tertiary: #89888d; // Use text.color.disabled instead.
589
+ $gl-heading-3-letter-spacing: inherit;
590
+ $gl-heading-4-letter-spacing: inherit;
591
+ $gl-heading-5-letter-spacing: inherit;
592
+ $gl-heading-6-letter-spacing: inherit;
593
+ $gl-heading-scale-100-letter-spacing: inherit;
594
+ $gl-heading-scale-200-letter-spacing: inherit;
595
+ $gl-heading-scale-300-letter-spacing: inherit;
596
+ $gl-heading-scale-400-letter-spacing: inherit;
597
+ $gl-heading-scale-500-letter-spacing: inherit;
598
+ $gl-heading-scale-800-line-height: 1.125;
599
+ $gl-heading-scale-100-fixed-letter-spacing: inherit;
600
+ $gl-heading-scale-200-fixed-letter-spacing: inherit;
601
+ $gl-heading-scale-300-fixed-letter-spacing: inherit;
602
+ $gl-heading-scale-400-fixed-letter-spacing: inherit;
603
+ $gl-heading-scale-500-fixed-letter-spacing: inherit;
604
+ $gl-heading-scale-800-fixed-line-height: 1.125;
605
+ $gl-heading-display-line-height: 1.125;
606
+ $gl-heading-3-fixed-letter-spacing: inherit;
607
+ $gl-heading-4-fixed-letter-spacing: inherit;
608
+ $gl-heading-5-fixed-letter-spacing: inherit;
609
+ $gl-heading-6-fixed-letter-spacing: inherit;
586
610
  $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
587
611
  $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
588
612
  $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
@@ -598,6 +622,8 @@ $gl-border-radius-3xl: $gl-spacing-scale-6;
598
622
  $gl-font-size-sm: $gl-font-size-100;
599
623
  $gl-font-size-md: $gl-font-size-300;
600
624
  $gl-font-size-lg: $gl-font-size-400;
625
+ $gl-font-weight-heading: $gl-font-weight-bold;
626
+ $gl-heading-default-margin-bottom: $gl-spacing-scale-5;
601
627
  $gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
602
628
  $gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
603
629
  $gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
@@ -949,6 +975,102 @@ $gl-text-color-warning: $gl-color-orange-600; // Used for text that requires cau
949
975
  $gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
950
976
  $gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
951
977
  $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
978
+ $gl-heading-1-margin-top: $gl-heading-default-margin-top;
979
+ $gl-heading-1-font-size: $gl-font-size-700;
980
+ $gl-heading-1-letter-spacing: $gl-letter-spacing-heading;
981
+ $gl-heading-1-line-height: $gl-line-height-heading;
982
+ $gl-heading-2-margin-top: $gl-heading-default-margin-top;
983
+ $gl-heading-2-font-size: $gl-font-size-600;
984
+ $gl-heading-2-letter-spacing: $gl-letter-spacing-heading;
985
+ $gl-heading-2-line-height: $gl-line-height-heading;
986
+ $gl-heading-3-margin-top: $gl-heading-default-margin-top;
987
+ $gl-heading-3-font-size: $gl-font-size-500;
988
+ $gl-heading-3-line-height: $gl-line-height-heading;
989
+ $gl-heading-4-margin-top: $gl-heading-default-margin-top;
990
+ $gl-heading-4-font-size: $gl-font-size-400;
991
+ $gl-heading-4-line-height: $gl-line-height-heading;
992
+ $gl-heading-5-margin-top: $gl-heading-default-margin-top;
993
+ $gl-heading-5-font-size: $gl-font-size-300;
994
+ $gl-heading-5-line-height: $gl-line-height-heading;
995
+ $gl-heading-6-margin-top: $gl-heading-default-margin-top;
996
+ $gl-heading-6-font-size: $gl-font-size-200;
997
+ $gl-heading-6-line-height: $gl-line-height-heading;
998
+ $gl-heading-scale-100-margin-top: $gl-heading-default-margin-top;
999
+ $gl-heading-scale-100-font-size: $gl-font-size-100;
1000
+ $gl-heading-scale-100-line-height: $gl-line-height-heading;
1001
+ $gl-heading-scale-200-margin-top: $gl-heading-default-margin-top;
1002
+ $gl-heading-scale-200-font-size: $gl-font-size-200;
1003
+ $gl-heading-scale-200-line-height: $gl-line-height-heading;
1004
+ $gl-heading-scale-300-margin-top: $gl-heading-default-margin-top;
1005
+ $gl-heading-scale-300-font-size: $gl-font-size-300;
1006
+ $gl-heading-scale-300-line-height: $gl-line-height-heading;
1007
+ $gl-heading-scale-400-margin-top: $gl-heading-default-margin-top;
1008
+ $gl-heading-scale-400-font-size: $gl-font-size-400;
1009
+ $gl-heading-scale-400-line-height: $gl-line-height-heading;
1010
+ $gl-heading-scale-500-margin-top: $gl-heading-default-margin-top;
1011
+ $gl-heading-scale-500-font-size: $gl-font-size-500;
1012
+ $gl-heading-scale-500-line-height: $gl-line-height-heading;
1013
+ $gl-heading-scale-600-margin-top: $gl-heading-default-margin-top;
1014
+ $gl-heading-scale-600-font-size: $gl-font-size-600;
1015
+ $gl-heading-scale-600-letter-spacing: $gl-letter-spacing-heading;
1016
+ $gl-heading-scale-600-line-height: $gl-line-height-heading;
1017
+ $gl-heading-scale-700-margin-top: $gl-heading-default-margin-top;
1018
+ $gl-heading-scale-700-font-size: $gl-font-size-700;
1019
+ $gl-heading-scale-700-letter-spacing: $gl-letter-spacing-heading;
1020
+ $gl-heading-scale-700-line-height: $gl-line-height-heading;
1021
+ $gl-heading-scale-800-margin-top: $gl-heading-default-margin-top;
1022
+ $gl-heading-scale-800-font-size: $gl-font-size-800;
1023
+ $gl-heading-scale-800-letter-spacing: $gl-letter-spacing-heading;
1024
+ $gl-heading-scale-100-fixed-margin-top: $gl-heading-default-margin-top;
1025
+ $gl-heading-scale-100-fixed-font-size: $gl-font-size-100-fixed;
1026
+ $gl-heading-scale-100-fixed-line-height: $gl-line-height-heading;
1027
+ $gl-heading-scale-200-fixed-margin-top: $gl-heading-default-margin-top;
1028
+ $gl-heading-scale-200-fixed-font-size: $gl-font-size-200-fixed;
1029
+ $gl-heading-scale-200-fixed-line-height: $gl-line-height-heading;
1030
+ $gl-heading-scale-300-fixed-margin-top: $gl-heading-default-margin-top;
1031
+ $gl-heading-scale-300-fixed-font-size: $gl-font-size-300-fixed;
1032
+ $gl-heading-scale-300-fixed-line-height: $gl-line-height-heading;
1033
+ $gl-heading-scale-400-fixed-margin-top: $gl-heading-default-margin-top;
1034
+ $gl-heading-scale-400-fixed-font-size: $gl-font-size-400-fixed;
1035
+ $gl-heading-scale-400-fixed-line-height: $gl-line-height-heading;
1036
+ $gl-heading-scale-500-fixed-margin-top: $gl-heading-default-margin-top;
1037
+ $gl-heading-scale-500-fixed-font-size: $gl-font-size-500-fixed;
1038
+ $gl-heading-scale-500-fixed-line-height: $gl-line-height-heading;
1039
+ $gl-heading-scale-600-fixed-margin-top: $gl-heading-default-margin-top;
1040
+ $gl-heading-scale-600-fixed-font-size: $gl-font-size-600-fixed;
1041
+ $gl-heading-scale-600-fixed-letter-spacing: $gl-letter-spacing-heading;
1042
+ $gl-heading-scale-600-fixed-line-height: $gl-line-height-heading;
1043
+ $gl-heading-scale-700-fixed-margin-top: $gl-heading-default-margin-top;
1044
+ $gl-heading-scale-700-fixed-font-size: $gl-font-size-700-fixed;
1045
+ $gl-heading-scale-700-fixed-letter-spacing: $gl-letter-spacing-heading;
1046
+ $gl-heading-scale-700-fixed-line-height: $gl-line-height-heading;
1047
+ $gl-heading-scale-800-fixed-margin-top: $gl-heading-default-margin-top;
1048
+ $gl-heading-scale-800-fixed-font-size: $gl-font-size-800-fixed;
1049
+ $gl-heading-scale-800-fixed-letter-spacing: $gl-letter-spacing-heading;
1050
+ $gl-heading-display-margin-top: $gl-heading-default-margin-top;
1051
+ $gl-heading-display-font-size: $gl-font-size-800;
1052
+ $gl-heading-display-letter-spacing: $gl-letter-spacing-heading;
1053
+ $gl-heading-display-margin-bottom: $gl-spacing-scale-6;
1054
+ $gl-heading-1-fixed-margin-top: $gl-heading-default-margin-top;
1055
+ $gl-heading-1-fixed-font-size: $gl-font-size-700-fixed;
1056
+ $gl-heading-1-fixed-letter-spacing: $gl-letter-spacing-heading;
1057
+ $gl-heading-1-fixed-line-height: $gl-line-height-heading;
1058
+ $gl-heading-2-fixed-margin-top: $gl-heading-default-margin-top;
1059
+ $gl-heading-2-fixed-font-size: $gl-font-size-600-fixed;
1060
+ $gl-heading-2-fixed-letter-spacing: $gl-letter-spacing-heading;
1061
+ $gl-heading-2-fixed-line-height: $gl-line-height-heading;
1062
+ $gl-heading-3-fixed-margin-top: $gl-heading-default-margin-top;
1063
+ $gl-heading-3-fixed-font-size: $gl-font-size-500-fixed;
1064
+ $gl-heading-3-fixed-line-height: $gl-line-height-heading;
1065
+ $gl-heading-4-fixed-margin-top: $gl-heading-default-margin-top;
1066
+ $gl-heading-4-fixed-font-size: $gl-font-size-400-fixed;
1067
+ $gl-heading-4-fixed-line-height: $gl-line-height-heading;
1068
+ $gl-heading-5-fixed-margin-top: $gl-heading-default-margin-top;
1069
+ $gl-heading-5-fixed-font-size: $gl-font-size-300-fixed;
1070
+ $gl-heading-5-fixed-line-height: $gl-line-height-heading;
1071
+ $gl-heading-6-fixed-margin-top: $gl-heading-default-margin-top;
1072
+ $gl-heading-6-fixed-font-size: $gl-font-size-200-fixed;
1073
+ $gl-heading-6-fixed-line-height: $gl-line-height-heading;
952
1074
  $gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
953
1075
  $gl-border-radius-default: $gl-border-radius-md;
954
1076
  $gl-font-size-base: $gl-font-size-md;
@@ -1098,6 +1220,76 @@ $gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
1098
1220
  $gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
1099
1221
  $gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
1100
1222
  $gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
1223
+ $gl-heading-1-font-weight: $gl-font-weight-heading;
1224
+ $gl-heading-1-margin-bottom: $gl-heading-default-margin-bottom;
1225
+ $gl-heading-1-color: $gl-text-color-heading;
1226
+ $gl-heading-2-font-weight: $gl-font-weight-heading;
1227
+ $gl-heading-2-margin-bottom: $gl-heading-default-margin-bottom;
1228
+ $gl-heading-2-color: $gl-text-color-heading;
1229
+ $gl-heading-3-font-weight: $gl-font-weight-heading;
1230
+ $gl-heading-3-margin-bottom: $gl-heading-default-margin-bottom;
1231
+ $gl-heading-3-color: $gl-text-color-heading;
1232
+ $gl-heading-4-font-weight: $gl-font-weight-heading;
1233
+ $gl-heading-4-margin-bottom: $gl-heading-default-margin-bottom;
1234
+ $gl-heading-4-color: $gl-text-color-heading;
1235
+ $gl-heading-5-font-weight: $gl-font-weight-heading;
1236
+ $gl-heading-5-margin-bottom: $gl-heading-default-margin-bottom;
1237
+ $gl-heading-5-color: $gl-text-color-heading;
1238
+ $gl-heading-6-font-weight: $gl-font-weight-heading;
1239
+ $gl-heading-6-margin-bottom: $gl-heading-default-margin-bottom;
1240
+ $gl-heading-6-color: $gl-text-color-heading;
1241
+ $gl-heading-scale-100-font-weight: $gl-font-weight-heading;
1242
+ $gl-heading-scale-100-color: $gl-text-color-heading;
1243
+ $gl-heading-scale-200-font-weight: $gl-font-weight-heading;
1244
+ $gl-heading-scale-200-color: $gl-text-color-heading;
1245
+ $gl-heading-scale-300-font-weight: $gl-font-weight-heading;
1246
+ $gl-heading-scale-300-color: $gl-text-color-heading;
1247
+ $gl-heading-scale-400-font-weight: $gl-font-weight-heading;
1248
+ $gl-heading-scale-400-color: $gl-text-color-heading;
1249
+ $gl-heading-scale-500-font-weight: $gl-font-weight-heading;
1250
+ $gl-heading-scale-500-color: $gl-text-color-heading;
1251
+ $gl-heading-scale-600-font-weight: $gl-font-weight-heading;
1252
+ $gl-heading-scale-600-color: $gl-text-color-heading;
1253
+ $gl-heading-scale-700-font-weight: $gl-font-weight-heading;
1254
+ $gl-heading-scale-700-color: $gl-text-color-heading;
1255
+ $gl-heading-scale-800-font-weight: $gl-font-weight-heading;
1256
+ $gl-heading-scale-800-color: $gl-text-color-heading;
1257
+ $gl-heading-scale-100-fixed-font-weight: $gl-font-weight-heading;
1258
+ $gl-heading-scale-100-fixed-color: $gl-text-color-heading;
1259
+ $gl-heading-scale-200-fixed-font-weight: $gl-font-weight-heading;
1260
+ $gl-heading-scale-200-fixed-color: $gl-text-color-heading;
1261
+ $gl-heading-scale-300-fixed-font-weight: $gl-font-weight-heading;
1262
+ $gl-heading-scale-300-fixed-color: $gl-text-color-heading;
1263
+ $gl-heading-scale-400-fixed-font-weight: $gl-font-weight-heading;
1264
+ $gl-heading-scale-400-fixed-color: $gl-text-color-heading;
1265
+ $gl-heading-scale-500-fixed-font-weight: $gl-font-weight-heading;
1266
+ $gl-heading-scale-500-fixed-color: $gl-text-color-heading;
1267
+ $gl-heading-scale-600-fixed-font-weight: $gl-font-weight-heading;
1268
+ $gl-heading-scale-600-fixed-color: $gl-text-color-heading;
1269
+ $gl-heading-scale-700-fixed-font-weight: $gl-font-weight-heading;
1270
+ $gl-heading-scale-700-fixed-color: $gl-text-color-heading;
1271
+ $gl-heading-scale-800-fixed-font-weight: $gl-font-weight-heading;
1272
+ $gl-heading-scale-800-fixed-color: $gl-text-color-heading;
1273
+ $gl-heading-display-font-weight: $gl-font-weight-heading;
1274
+ $gl-heading-display-color: $gl-text-color-heading;
1275
+ $gl-heading-1-fixed-font-weight: $gl-font-weight-heading;
1276
+ $gl-heading-1-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1277
+ $gl-heading-1-fixed-color: $gl-text-color-heading;
1278
+ $gl-heading-2-fixed-font-weight: $gl-font-weight-heading;
1279
+ $gl-heading-2-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1280
+ $gl-heading-2-fixed-color: $gl-text-color-heading;
1281
+ $gl-heading-3-fixed-font-weight: $gl-font-weight-heading;
1282
+ $gl-heading-3-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1283
+ $gl-heading-3-fixed-color: $gl-text-color-heading;
1284
+ $gl-heading-4-fixed-font-weight: $gl-font-weight-heading;
1285
+ $gl-heading-4-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1286
+ $gl-heading-4-fixed-color: $gl-text-color-heading;
1287
+ $gl-heading-5-fixed-font-weight: $gl-font-weight-heading;
1288
+ $gl-heading-5-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1289
+ $gl-heading-5-fixed-color: $gl-text-color-heading;
1290
+ $gl-heading-6-fixed-font-weight: $gl-font-weight-heading;
1291
+ $gl-heading-6-fixed-margin-bottom: $gl-heading-default-margin-bottom;
1292
+ $gl-heading-6-fixed-color: $gl-text-color-heading;
1101
1293
  $gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
1102
1294
  $gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
1103
1295
  $gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.