@gitlab/ui 66.15.0 → 66.16.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.
- package/CHANGELOG.md +7 -0
- package/dist/index.css.map +1 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/dist/utility_classes.css +1 -1
- package/dist/utility_classes.css.map +1 -1
- package/package.json +1 -1
- package/src/scss/mixins.scss +19 -9
- package/src/scss/utilities.scss +350 -92
- package/src/scss/utility-mixins/typography.scss +153 -1
|
@@ -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:
|