@linzjs/lui 13.1.5 → 15.0.2-0

package/dist/scss/Elements/Forms/plain-form-common.scss

@@ -1,4 +1,9 @@
 // Things that are common to all inputs
 
 .input {
-}
+}
+
+fieldset {
+  border: none;
+  padding: 0;
+}

package/dist/scss/Global/GenericElements/Typography.scss

@@ -1,13 +1,15 @@
 @use '../../Foundation/Variables/FontVars.scss' as fonts;
 @use '../../Foundation/Variables/ColorVars.scss' as colors;
 @use "../../Foundation/Variables/SpacingVars.scss" as spacing;
+@use "../../Foundation/Variables/BreakpointVars.scss" as *;
 @use '../../Foundation/Utilities/' as *;
 
 ////////////////////////////////////////
 //      Global Typography styling     //
 ////////////////////////////////////////
 
-// If you're looking for where we introduce fonts into our project, you're looking for `fonts.scss`
+// If you're looking for where we introduce fonts into our project, we actually use @fontsource in our local apps.
+// This is due to our build system for an NPM module not allowing us to maintain relative paths :(
 
 ////////////////////////////////////////////
 // Base definition of our global settings //
@@ -74,13 +76,6 @@ hr {
 // Adjust naming of these as you see fit
 // 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
 
-// =====================
-// Typography variables
-// =====================
-
-// Adjust naming of these as you see fit
-// 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
-
 // =====================
 // Headings
 // =====================
@@ -114,7 +109,8 @@ h6,
 h1,
 .h1 {
   @include fonts.font-light();
-  font-size: rem(44px);
+  @include fluidType--size(34px, 44px, $breakpoint-sm, $breakpoint-xl);
+  @include fluidType--lineHeight(44px, 52px, $breakpoint-sm, $breakpoint-xl);
 
   & + p {
     margin-top: spacing.$unit-sm; //32px
@@ -124,7 +120,8 @@ h1,
 h2,
 .h2 {
   @include fonts.font-light();
-  font-size: rem(32px);
+  @include fluidType--size(28px, 32px, $breakpoint-sm, $breakpoint-xl);
+  @include fluidType--lineHeight(36px, 40px, $breakpoint-sm, $breakpoint-xl);
   margin-top: spacing.$unit-xl; // 96px
 
   & + p {
@@ -135,7 +132,9 @@ h2,
 h3,
 .h3 {
   @include fonts.font-regular();
-  font-size: rem(26px);
+  @include fluidType--size(24px, 24px, $breakpoint-sm, $breakpoint-xl);
+  @include fluidType--lineHeight(32px, 32px, $breakpoint-sm, $breakpoint-xl);
+  letter-spacing: 0.2px;
   margin-top: spacing.$unit-lg; // 64px
 
   & + p {
@@ -146,7 +145,9 @@ h3,
 h4,
 .h4 {
   @include fonts.font-regular();
-  font-size: rem(22px);
+  @include fluidType--size(20px, 20px, $breakpoint-sm, $breakpoint-xl);
+  @include fluidType--lineHeight(24px, 24px, $breakpoint-sm, $breakpoint-xl);
+  letter-spacing: 0.2px;
   margin-top: spacing.$unit-lg; // 64px
 
   & + p {
@@ -157,13 +158,16 @@ h4,
 h5,
 .h5 {
   @include fonts.font-semibold();
-  font-size: rem(18px);
+  @include fluidType--size(16px, 16px, $breakpoint-sm, $breakpoint-xl);
+  @include fluidType--lineHeight(24px, 22px, $breakpoint-sm, $breakpoint-xl);
 }
 
 h6,
 .h6 {
   @include fonts.font-semibold();
-  font-size: rem(16px);
+  @include fluidType--size(14px, 14px, $breakpoint-sm, $breakpoint-xl);
+  @include fluidType--lineHeight(18px, 18px, $breakpoint-sm, $breakpoint-xl);
+  letter-spacing: 0.2px;
 }
 
 // =====================

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "13.1.5",
+  "version": "15.0.2-0",
   "license": "MIT",
   "repository": {
     "type": "git",