@gitlab/ui 66.15.0 → 66.18.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 (24) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/components/base/modal/modal.js +1 -1
  3. package/dist/components/regions/empty_state/empty_state.js +2 -2
  4. package/dist/index.css +1 -1
  5. package/dist/index.css.map +1 -1
  6. package/dist/tokens/css/tokens.css +1 -1
  7. package/dist/tokens/css/tokens.dark.css +1 -1
  8. package/dist/tokens/js/tokens.dark.js +1 -1
  9. package/dist/tokens/js/tokens.js +1 -1
  10. package/dist/tokens/scss/_tokens.dark.scss +1 -1
  11. package/dist/tokens/scss/_tokens.scss +1 -1
  12. package/dist/utility_classes.css +1 -1
  13. package/dist/utility_classes.css.map +1 -1
  14. package/package.json +14 -14
  15. package/src/components/base/modal/modal.scss +1 -3
  16. package/src/components/base/modal/modal.spec.js +2 -2
  17. package/src/components/base/modal/modal.vue +2 -2
  18. package/src/components/regions/empty_state/empty_state.scss +3 -0
  19. package/src/components/regions/empty_state/empty_state.spec.js +11 -1
  20. package/src/components/regions/empty_state/empty_state.vue +60 -59
  21. package/src/scss/components.scss +1 -0
  22. package/src/scss/mixins.scss +19 -9
  23. package/src/scss/utilities.scss +350 -92
  24. package/src/scss/utility-mixins/typography.scss +153 -1
package/src/scss/utility-mixins/typography.scss CHANGED
@@ -28,6 +28,158 @@
28
28
  }
29
29
 
30
30
  /**
31
+ * Heading utility
32
+ *
33
+ * naming convention: gl-heading-{level}
34
+ * Notes:
35
+ * - Includes a default margin bottom
36
+ * - Fixed sizes have limited use, check
37
+ * https://design.gitlab.com/product-foundations/type-fundamentals
38
+ */
39
+
40
+ @mixin gl-heading-scale-6 {
41
+ @include gl-heading-scale-200;
42
+ margin-bottom: $gl-mb-heading;
43
+ }
44
+
45
+ @mixin gl-heading-scale-6-fixed {
46
+ @include gl-heading-scale-200-fixed;
47
+ margin-bottom: $gl-mb-heading;
48
+ }
49
+
50
+ @mixin gl-heading-scale-5 {
51
+ @include gl-heading-scale-300;
52
+ margin-bottom: $gl-mb-heading;
53
+ }
54
+
55
+ @mixin gl-heading-scale-5-fixed {
56
+ @include gl-heading-scale-300-fixed;
57
+ margin-bottom: $gl-mb-heading;
58
+ }
59
+
60
+ @mixin gl-heading-4 {
61
+ @include gl-heading-scale-400;
62
+ margin-bottom: $gl-mb-heading;
63
+ }
64
+
65
+ @mixin gl-heading-4-fixed {
66
+ @include gl-heading-scale-400-fixed;
67
+ margin-bottom: $gl-mb-heading;
68
+ }
69
+
70
+ @mixin gl-heading-3 {
71
+ @include gl-heading-scale-500;
72
+ margin-bottom: $gl-mb-heading;
73
+ }
74
+
75
+ @mixin gl-heading-3-fixed {
76
+ @include gl-heading-scale-500-fixed;
77
+ margin-bottom: $gl-mb-heading;
78
+ }
79
+
80
+ @mixin gl-heading-2 {
81
+ @include gl-heading-scale-600;
82
+ margin-bottom: $gl-mb-heading;
83
+ }
84
+
85
+ @mixin gl-heading-2-fixed {
86
+ @include gl-heading-scale-600-fixed;
87
+ margin-bottom: $gl-mb-heading;
88
+ }
89
+
90
+ @mixin gl-heading-1 {
91
+ @include gl-heading-scale-700;
92
+ margin-bottom: $gl-mb-heading;
93
+ }
94
+
95
+ @mixin gl-heading-1-fixed {
96
+ @include gl-heading-scale-700-fixed;
97
+ margin-bottom: $gl-mb-heading;
98
+ }
99
+
100
+ @mixin gl-heading-0 {
101
+ @include gl-heading-scale-800;
102
+ margin-bottom: $gl-mb-heading-display;
103
+ }
104
+
105
+ /**
106
+ * Heading scale utility
107
+ *
108
+ * naming convention: gl-heading-scale-{size-variable-value}
109
+ *
110
+ * Notes:
111
+ * - For contextual heading size adjustments only, check
112
+ * https://design.gitlab.com/product-foundations/type-fundamentals
113
+ * - See variables.scss for font-size default and fixed scales.
114
+ */
115
+
116
+ @mixin gl-heading-scale-100 {
117
+ @include gl-heading-scale(100);
118
+ }
119
+
120
+ @mixin gl-heading-scale-100-fixed {
121
+ @include gl-heading-scale(100, $fixed: true);
122
+ }
123
+
124
+ @mixin gl-heading-scale-200 {
125
+ @include gl-heading-scale(200);
126
+ }
127
+
128
+ @mixin gl-heading-scale-200-fixed {
129
+ @include gl-heading-scale(200, $fixed: true);
130
+ }
131
+
132
+ @mixin gl-heading-scale-300 {
133
+ @include gl-heading-scale(300);
134
+ }
135
+
136
+ @mixin gl-heading-scale-300-fixed {
137
+ @include gl-heading-scale(300, $fixed: true);
138
+ }
139
+
140
+ @mixin gl-heading-scale-400 {
141
+ @include gl-heading-scale(400);
142
+ }
143
+
144
+ @mixin gl-heading-scale-400-fixed {
145
+ @include gl-heading-scale(400, $fixed: true);
146
+ }
147
+
148
+ @mixin gl-heading-scale-500 {
149
+ @include gl-heading-scale(500);
150
+ }
151
+
152
+ @mixin gl-heading-scale-500-fixed {
153
+ @include gl-heading-scale(500, $fixed: true);
154
+ }
155
+
156
+ @mixin gl-heading-scale-600 {
157
+ @include gl-heading-scale(600);
158
+ }
159
+
160
+ @mixin gl-heading-scale-600-fixed {
161
+ @include gl-heading-scale(600, $fixed: true);
162
+ }
163
+
164
+ @mixin gl-heading-scale-700 {
165
+ @include gl-heading-scale(700);
166
+ }
167
+
168
+ @mixin gl-heading-scale-700-fixed {
169
+ @include gl-heading-scale(700, $fixed: true);
170
+ }
171
+
172
+ @mixin gl-heading-scale-800 {
173
+ @include gl-heading-scale(800);
174
+ }
175
+
176
+ @mixin gl-heading-scale-800-fixed {
177
+ @include gl-heading-scale(800, $fixed: true);
178
+ }
179
+
180
+ /**
181
+ * DEPRECATED
182
+ * TODO: migrate all of these away
31
183
  * Font size utility
32
184
  *
33
185
  * naming convention: gl-font-{type-scale-size}
@@ -142,7 +294,7 @@
142
294
  /**
143
295
  * Line height utilities.
144
296
  *
145
- * naming convention:
297
+ * naming convention:
146
298
  * - gl-line-height-ratio-{ratio-multiplied-by-1000}
147
299
  * - gl-line-height-{line-height-in-pixels}
148
300
  * notes: