@linzjs/lui 15.0.1 → 15.0.2-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/dist/assets/icons/control_point.svg +11 -1
- package/dist/assets/icons/{note_add-24px.svg → note_add.svg} +0 -0
- package/dist/assets/icons/{timeline-24px.svg → timeline.svg} +0 -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/svg-content.tsx +41 -162
- package/dist/index.js +41 -42
- package/dist/index.js.map +1 -1
- package/dist/lui.css +255 -6
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +41 -42
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Global/GenericElements/Typography.scss +18 -14
- package/package.json +1 -1
|
@@ -1,13 +1,15 @@
|
|
|
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
|
////////////////////////////////////////
|
|
7
8
|
// Global Typography styling //
|
|
8
9
|
////////////////////////////////////////
|
|
9
10
|
|
|
10
|
-
// If you're looking for where we introduce fonts into our project,
|
|
11
|
+
// If you're looking for where we introduce fonts into our project, we actually use @fontsource in our local apps.
|
|
12
|
+
// This is due to our build system for an NPM module not allowing us to maintain relative paths :(
|
|
11
13
|
|
|
12
14
|
////////////////////////////////////////////
|
|
13
15
|
// Base definition of our global settings //
|
|
@@ -74,13 +76,6 @@ hr {
|
|
|
74
76
|
// Adjust naming of these as you see fit
|
|
75
77
|
// It is suggested to have something that describes the utility that the font is being used for – here we're assuming heading font and body font are discrete use-cases
|
|
76
78
|
|
|
77
|
-
// =====================
|
|
78
|
-
// Typography variables
|
|
79
|
-
// =====================
|
|
80
|
-
|
|
81
|
-
// Adjust naming of these as you see fit
|
|
82
|
-
// It is suggested to have something that describes the utility that the font is being used for – here we're assuming heading font and body font are discrete use-cases
|
|
83
|
-
|
|
84
79
|
// =====================
|
|
85
80
|
// Headings
|
|
86
81
|
// =====================
|
|
@@ -114,7 +109,8 @@ h6,
|
|
|
114
109
|
h1,
|
|
115
110
|
.h1 {
|
|
116
111
|
@include fonts.font-light();
|
|
117
|
-
|
|
112
|
+
@include fluidType--size(34px, 44px, $breakpoint-sm, $breakpoint-xl);
|
|
113
|
+
@include fluidType--lineHeight(44px, 52px, $breakpoint-sm, $breakpoint-xl);
|
|
118
114
|
|
|
119
115
|
& + p {
|
|
120
116
|
margin-top: spacing.$unit-sm; //32px
|
|
@@ -124,7 +120,8 @@ h1,
|
|
|
124
120
|
h2,
|
|
125
121
|
.h2 {
|
|
126
122
|
@include fonts.font-light();
|
|
127
|
-
|
|
123
|
+
@include fluidType--size(28px, 32px, $breakpoint-sm, $breakpoint-xl);
|
|
124
|
+
@include fluidType--lineHeight(36px, 40px, $breakpoint-sm, $breakpoint-xl);
|
|
128
125
|
margin-top: spacing.$unit-xl; // 96px
|
|
129
126
|
|
|
130
127
|
& + p {
|
|
@@ -135,7 +132,9 @@ h2,
|
|
|
135
132
|
h3,
|
|
136
133
|
.h3 {
|
|
137
134
|
@include fonts.font-regular();
|
|
138
|
-
|
|
135
|
+
@include fluidType--size(24px, 24px, $breakpoint-sm, $breakpoint-xl);
|
|
136
|
+
@include fluidType--lineHeight(32px, 32px, $breakpoint-sm, $breakpoint-xl);
|
|
137
|
+
letter-spacing: 0.2px;
|
|
139
138
|
margin-top: spacing.$unit-lg; // 64px
|
|
140
139
|
|
|
141
140
|
& + p {
|
|
@@ -146,7 +145,9 @@ h3,
|
|
|
146
145
|
h4,
|
|
147
146
|
.h4 {
|
|
148
147
|
@include fonts.font-regular();
|
|
149
|
-
|
|
148
|
+
@include fluidType--size(20px, 20px, $breakpoint-sm, $breakpoint-xl);
|
|
149
|
+
@include fluidType--lineHeight(24px, 24px, $breakpoint-sm, $breakpoint-xl);
|
|
150
|
+
letter-spacing: 0.2px;
|
|
150
151
|
margin-top: spacing.$unit-lg; // 64px
|
|
151
152
|
|
|
152
153
|
& + p {
|
|
@@ -157,13 +158,16 @@ h4,
|
|
|
157
158
|
h5,
|
|
158
159
|
.h5 {
|
|
159
160
|
@include fonts.font-semibold();
|
|
160
|
-
|
|
161
|
+
@include fluidType--size(16px, 16px, $breakpoint-sm, $breakpoint-xl);
|
|
162
|
+
@include fluidType--lineHeight(24px, 22px, $breakpoint-sm, $breakpoint-xl);
|
|
161
163
|
}
|
|
162
164
|
|
|
163
165
|
h6,
|
|
164
166
|
.h6 {
|
|
165
167
|
@include fonts.font-semibold();
|
|
166
|
-
|
|
168
|
+
@include fluidType--size(14px, 14px, $breakpoint-sm, $breakpoint-xl);
|
|
169
|
+
@include fluidType--lineHeight(18px, 18px, $breakpoint-sm, $breakpoint-xl);
|
|
170
|
+
letter-spacing: 0.2px;
|
|
167
171
|
}
|
|
168
172
|
|
|
169
173
|
// =====================
|
package/package.json
CHANGED