@linzjs/lui 15.0.1 → 15.0.3
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 +14 -0
- package/dist/assets/icons/arrow_drop_right.svg +5 -0
- package/dist/assets/icons/control_point.svg +11 -1
- package/dist/assets/icons/copy.svg +5 -0
- package/dist/assets/icons/link.svg +5 -0
- package/dist/assets/icons/menu.svg +5 -0
- package/dist/assets/icons/more_vert.svg +5 -0
- package/dist/assets/icons/{note_add-24px.svg → note_add.svg} +0 -0
- package/dist/assets/icons/{order_histroy.svg → order_history.svg} +0 -0
- package/dist/assets/icons/{timeline-24px.svg → timeline.svg} +0 -0
- package/dist/assets/icons/unlink.svg +5 -0
- package/dist/assets/icons/{view_quilt-24px.svg → view_quilt.svg} +0 -0
- package/dist/assets/icons/{waves-24px.svg → waves.svg} +0 -0
- package/dist/assets/icons/zoom_centre.svg +5 -0
- package/dist/assets/svg-content.tsx +91 -163
- package/dist/index.js +63 -43
- package/dist/index.js.map +1 -1
- package/dist/lui.css +327 -0
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +63 -43
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Global/GenericElements/Typography.scss +91 -0
- package/package.json +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use '../../Foundation/Variables/FontVars.scss' as fonts;
|
|
2
2
|
@use '../../Foundation/Variables/ColorVars.scss' as colors;
|
|
3
3
|
@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
|
|
4
|
+
@use "../../Foundation/Variables/BreakpointVars.scss" as *;
|
|
4
5
|
@use '../../Foundation/Utilities/' as *;
|
|
5
6
|
|
|
6
7
|
////////////////////////////////////////
|
|
@@ -183,3 +184,93 @@ p.lui-small {
|
|
|
183
184
|
line-height: rem(20px);
|
|
184
185
|
margin-top: spacing.$unit-lg; //64px
|
|
185
186
|
}
|
|
187
|
+
|
|
188
|
+
// ====================================================================================
|
|
189
|
+
// Headings 22/02/2022 – these are the next iteration of typographic updates
|
|
190
|
+
// These will replace the type above and the picket fence will be removed
|
|
191
|
+
// To view the changes in your app, add the class LuiBeta-fonts220222
|
|
192
|
+
// ====================================================================================
|
|
193
|
+
|
|
194
|
+
.LuiBeta-fonts220222 {
|
|
195
|
+
h1,
|
|
196
|
+
.h1 {
|
|
197
|
+
@include fonts.font-light();
|
|
198
|
+
@include fluidType--size(34px, 44px, $breakpoint-sm, $breakpoint-xl);
|
|
199
|
+
@include fluidType--lineHeight(44px, 52px, $breakpoint-sm, $breakpoint-xl);
|
|
200
|
+
|
|
201
|
+
& + p {
|
|
202
|
+
margin-top: spacing.$unit-sm; //32px
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
h2,
|
|
207
|
+
.h2 {
|
|
208
|
+
@include fonts.font-light();
|
|
209
|
+
@include fluidType--size(28px, 32px, $breakpoint-sm, $breakpoint-xl);
|
|
210
|
+
@include fluidType--lineHeight(36px, 40px, $breakpoint-sm, $breakpoint-xl);
|
|
211
|
+
margin-top: spacing.$unit-xl; // 96px
|
|
212
|
+
|
|
213
|
+
& + p {
|
|
214
|
+
margin-top: spacing.$unit-sm; // 32px
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
h3,
|
|
219
|
+
.h3 {
|
|
220
|
+
@include fonts.font-regular();
|
|
221
|
+
@include fluidType--size(24px, 24px, $breakpoint-sm, $breakpoint-xl);
|
|
222
|
+
@include fluidType--lineHeight(32px, 32px, $breakpoint-sm, $breakpoint-xl);
|
|
223
|
+
letter-spacing: 0.2px;
|
|
224
|
+
margin-top: spacing.$unit-lg; // 64px
|
|
225
|
+
|
|
226
|
+
& + p {
|
|
227
|
+
margin-top: spacing.$unit-sm; // 32px
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
h4,
|
|
232
|
+
.h4 {
|
|
233
|
+
@include fonts.font-regular();
|
|
234
|
+
@include fluidType--size(20px, 20px, $breakpoint-sm, $breakpoint-xl);
|
|
235
|
+
@include fluidType--lineHeight(24px, 24px, $breakpoint-sm, $breakpoint-xl);
|
|
236
|
+
letter-spacing: 0.2px;
|
|
237
|
+
margin-top: spacing.$unit-lg; // 64px
|
|
238
|
+
|
|
239
|
+
& + p {
|
|
240
|
+
margin-top: spacing.$unit-sm; // 32px
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
h5,
|
|
245
|
+
.h5 {
|
|
246
|
+
@include fonts.font-semibold();
|
|
247
|
+
@include fluidType--size(16px, 16px, $breakpoint-sm, $breakpoint-xl);
|
|
248
|
+
@include fluidType--lineHeight(24px, 22px, $breakpoint-sm, $breakpoint-xl);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
h6,
|
|
252
|
+
.h6 {
|
|
253
|
+
@include fonts.font-semibold();
|
|
254
|
+
@include fluidType--size(14px, 14px, $breakpoint-sm, $breakpoint-xl);
|
|
255
|
+
@include fluidType--lineHeight(18px, 18px, $breakpoint-sm, $breakpoint-xl);
|
|
256
|
+
letter-spacing: 0.2px;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
// =====================
|
|
260
|
+
// Body
|
|
261
|
+
// =====================
|
|
262
|
+
|
|
263
|
+
p,
|
|
264
|
+
.p {
|
|
265
|
+
@include fonts.font-light();
|
|
266
|
+
font-size: rem(16px);
|
|
267
|
+
margin-top: spacing.$unit-lg; //64px
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
p.lui-small {
|
|
271
|
+
@include fonts.font-light();
|
|
272
|
+
font-size: rem(13px);
|
|
273
|
+
line-height: rem(20px);
|
|
274
|
+
margin-top: spacing.$unit-lg; //64px
|
|
275
|
+
}
|
|
276
|
+
}
|
package/package.json
CHANGED