@linzjs/lui 12.1.4 → 12.2.0-roll-up.0

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

@@ -1,185 +0,0 @@
-@use '../../Foundation/Variables/FontVars.scss' as fonts;
-@use '../../Foundation/Variables/ColorVars.scss' as colors;
-@use "../../Foundation/Variables/SpacingVars.scss" as spacing;
-@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`
-
-////////////////////////////////////////////
-// Base definition of our global settings //
-////////////////////////////////////////////
-
-html {
-  @include fonts.font-light();
-  font-size: fonts.$base-font-size;
-  line-height: fonts.$base-line-height;
-  color: colors.$base-type-color;
-  // Better Font Rendering
-  font-feature-settings: 'kern' 1;
-  font-kerning: normal;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// Text highlight color
-// NOTE: must be specified individually
-//highlight colour when selecting text on the page
-
-::selection {
-  background: colors.$selection; /* WebKit/Blink Browsers */
-  color: colors.$brand-primary;
-}
-::-moz-selection {
-  background: colors.$selection; /* Gecko Browsers */
-  color: colors.$brand-primary;
-}
-
-em,
-i {
-  @include fonts.font-italic;
-}
-strong,
-b {
-  @include fonts.font-semibold;
-}
-
-sub,
-sup {
-  @extend %small !optional;
-  line-height: 0;
-}
-
-hr {
-  border: none;
-  margin: 0;
-  background-color: colors.$charcoal;
-  height: 1px;
-}
-
-// Phone numbers ============
-// Avoid wrapping phone numbers onto multiple lines
-[href='tel'] {
-  white-space: nowrap;
-}
-
-// =====================
-// 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
-
-// =====================
-// 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
-// =====================
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p {
-  line-height: 1.5;
-  margin-bottom: 0;
-}
-
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3,
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  color: colors.$heading-color;
-}
-
-h1,
-.h1 {
-  @include fonts.font-light();
-  font-size: rem(44px);
-
-  & + p {
-    margin-top: spacing.$unit-sm; //32px
-  }
-}
-
-h2,
-.h2 {
-  @include fonts.font-light();
-  font-size: rem(32px);
-  margin-top: spacing.$unit-xl; // 96px
-
-  & + p {
-    margin-top: spacing.$unit-sm; // 32px
-  }
-}
-
-h3,
-.h3 {
-  @include fonts.font-regular();
-  font-size: rem(26px);
-  margin-top: spacing.$unit-lg; // 64px
-
-  & + p {
-    margin-top: spacing.$unit-sm; // 32px
-  }
-}
-
-h4,
-.h4 {
-  @include fonts.font-regular();
-  font-size: rem(22px);
-  margin-top: spacing.$unit-lg; // 64px
-
-  & + p {
-    margin-top: spacing.$unit-sm; // 32px
-  }
-}
-
-h5,
-.h5 {
-  @include fonts.font-semibold();
-  font-size: rem(18px);
-}
-
-h6,
-.h6 {
-  @include fonts.font-semibold();
-  font-size: rem(16px);
-}
-
-// =====================
-// Body
-// =====================
-
-p,
-.p {
-  @include fonts.font-light();
-  font-size: rem(16px);
-  margin-top: spacing.$unit-lg; //64px
-}
-
-p.lui-small {
-  @include fonts.font-light();
-  font-size: rem(13px);
-  line-height: rem(20px);
-  margin-top: spacing.$unit-lg; //64px
-}

package/dist/scss/Global/GenericElements/_index.scss

@@ -1,7 +0,0 @@
-// @forward 'Buttons';
-// @forward "FontFace";
-// @forward 'Icon';
-@forward 'Link';
-@forward "Lists";
-@forward 'Todo';
-@forward "Typography";

package/dist/scss/Global/Layout/Container.scss

@@ -1,60 +0,0 @@
-@use '../../Foundation/Variables/BreakpointVars.scss' as breakpoints;
-@use '../../Foundation/Utilities/' as *;
-///////////////////////////////
-// Container
-///////////////////////////////
-
-// Need to explain what's going on here –
-// So we are adding a little padding left and right of both sides of container to make sure content doesn't butt right up against the edges. It adds the container padding on the inside to give a little breathing room in containers. The next step is to ensure that the padding doesn't reduce the size of the breakpoint so we add it back to the breakpoint.
-
-// There is also a variation that removed the padding and just lets content hit the sides.
-
-$container-padding: 2.5%;
-
-%Container {
-  display: block;
-  margin: 0 auto;
-}
-
-%Container--noPadding {
-  max-width: breakpoints.$breakpoint1;
-
-  @include breakpoint(sm) {
-    max-width: breakpoints.$breakpoint2;
-  }
-
-  @include breakpoint(md) {
-    max-width: breakpoints.$breakpoint3;
-  }
-
-  @include breakpoint(lg) {
-    max-width: breakpoints.$breakpoint4;
-  }
-}
-
-%Container--padding {
-  padding: 0 $container-padding;
-  max-width: calc(#{breakpoints.$breakpoint1} + (#{$container-padding} * 2));
-
-  @include breakpoint(sm) {
-    max-width: calc(#{breakpoints.$breakpoint2} + (#{$container-padding} * 2));
-  }
-
-  @include breakpoint(md) {
-    max-width: calc(#{breakpoints.$breakpoint3} + (#{$container-padding} * 2));
-  }
-
-  @include breakpoint(lg) {
-    max-width: calc(#{breakpoints.$breakpoint4} + (#{$container-padding} * 2));
-  }
-}
-
-.Container {
-  @extend %Container;
-  @extend %Container--padding;
-}
-
-.Container--noPadding {
-  @extend %Container;
-  @extend %Container--padding;
-}

package/dist/scss/Global/Layout/Layout.scss

@@ -1,67 +0,0 @@
-@use '../../Foundation/Variables/ColorVars.scss' as colors;
-@use '../../Foundation/Variables/BreakpointVars.scss' as breakpoints;
-
-// ==========================================
-// Main layout
-// ==========================================
-
-html {
-  height: 100%;
-  overflow: visible;
-  min-height: auto;
-  scroll-behavior: smooth;
-}
-
-body {
-  height: 100%;
-  min-height: 100vh;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  margin: 0;
-}
-
-// set universal box sizing, plus the declaration in the HTML above
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-#root {
-  height: 100%;
-}
-
-.Main {
-  display: grid;
-  min-height: 100%;
-  grid-template-areas:
-    'Header'
-    'Content'
-    'Footer';
-  grid-template-rows: auto 1fr auto;
-}
-
-.Content {
-  grid-area: Content;
-}
-
-// ! ************************************************
-// ! TODO: Move these two to their actual components
-// ! ************************************************
-.lui-header-primary {
-  grid-area: Header;
-}
-
-.lui-footer {
-  grid-area: Footer;
-}
-
-// ! ************************************************
-// ! TODO: Figure out where to place this
-// ! ************************************************
-
-.lui-section-dark {
-  background-color: colors.$hint;
-  border-top: 1px solid colors.$lily;
-  border-bottom: 1px solid colors.$lily;
-}

package/dist/scss/Global/Layout/_index.scss

@@ -1,2 +0,0 @@
-@forward "Container";
-@forward 'Layout';

package/dist/scss/Global/_index.scss

@@ -1,2 +0,0 @@
-@forward './GenericElements/index';
-@forward './Layout/index';