@linzjs/lui 10.11.2 → 11.0.0

package/dist/scss/Components/Footer/footer.scss

@@ -15,7 +15,7 @@
 
   // colour row dividers (border top)
   div[class*='row-divider'] {
-    border-color: colors.$teal-75;
+    border-color: colors.$surfie;
   }
 
   .lui-footer-columns {
@@ -44,10 +44,10 @@
   p,
   li,
   a {
-    color: colors.$teal-05;
+    color: colors.$iceberg;
   }
 
-  background-color: colors.$teal-100;
+  background-color: colors.$sherpa;
 
   h1,
   h2,
@@ -69,7 +69,7 @@
     }
 
     &:visited {
-      color: colors.$grey-20;
+      color: colors.$silver;
     }
   }
 
@@ -82,7 +82,7 @@
       margin-top: spacing.$unit-sm;
 
       a {
-        color: colors.$teal-05;
+        color: colors.$iceberg;
       }
     }
   }

package/dist/scss/Components/Header/header.scss

@@ -87,7 +87,7 @@ $headerHeightLg: $headerRowHeightLg + $swishHeightLg;
   @include breakpoint(sm) {
     margin-left: 0;
     padding-right: spacing.$unit-lg;
-    border-right: 1px solid colors.$teal-50;
+    border-right: 1px solid colors.$persian;
   }
 
   & .clickable {

package/dist/scss/Components/HelpSection/help-section.scss

@@ -26,7 +26,7 @@
         color: colors.$brand-secondary;
         width: 20px;
         height: 32px;
-        border-right: 1px solid colors.$grey-20;
+        border-right: 1px solid colors.$silver;
         font-size: rem(18px);
         @include breakpoint(md) {
           width: 30px;

package/dist/scss/Components/LOLCommonMenu/LOLAuthorisedLink.scss

@@ -15,12 +15,12 @@
   }
 
   &.active {
-    color: colors.$teal-75;
+    color: colors.$surfie;
   }
 }
 
 .LOLAuthorisedLink-icon img {
-  border-color: colors.$teal-75;
+  border-color: colors.$surfie;
   border-width: 2px;
   border-radius: 12px;
   border-style: solid;
@@ -28,8 +28,8 @@
 }
 
 .LOLAuthorisedLink-icon-active img {
-  background-color: colors.$teal-75;
-  border-color: colors.$teal-75;
+  background-color: colors.$surfie;
+  border-color: colors.$surfie;
   border-width: 2px;
   border-radius: 12px;
   border-style: solid;

package/dist/scss/Components/LOLCommonMenu/LOLFirmSwitcherMenu.scss

@@ -26,7 +26,7 @@
     min-height: 3rem;
 
     &:hover {
-      background-color: colors.$blue-05;
+      background-color: colors.$polar;
       cursor: pointer;
     }
   }
@@ -38,5 +38,5 @@
 }
 
 .LOLFirmSwitcherMenu .material-icons-round {
-  color: colors.$teal-75;
+  color: colors.$surfie;
 }

package/dist/scss/Components/LOLCommonMenu/LOLUserLastLogin.scss

@@ -4,7 +4,7 @@
 .LOLUserLastLogin {
   width: 100%;
   height: 68px;
-  background-color: colors.$grey-10;
+  background-color: colors.$lily;
   position: absolute;
   bottom: 0;
   text-align: center;

package/dist/scss/Components/LuiFormElements/LuiFileInputBox.scss

@@ -1,7 +1,7 @@
 @use '../../../scss/Foundation/Variables/LuiColors' as luiColors;
 
 .LuiFileInputBox-upload {
-  outline: 2px dashed luiColors.$grey-10;
+  outline: 2px dashed luiColors.$lily;
   color: dimgray;
   cursor: pointer;
   position: relative;
@@ -44,7 +44,7 @@
 
 .LuiFileInputBox-upload-icon-upload {
   width: 120px;
-  fill: luiColors.$blue-75;
+  fill: luiColors.$sea;
   margin-left: auto;
   margin-right: auto;
 }
@@ -76,4 +76,3 @@
   padding-bottom: 12px;
   font-weight: 600;
 }
-

package/dist/scss/Components/LuiTabs/LuiTabs.scss

@@ -1,58 +0,0 @@
-@use "../../Foundation/Variables/ColorVars" as colors;
-@use "../../Foundation/Variables/FontVars" as fonts;
-
-.lui-tabs {
-  &-style-underline {
-    .lui-tab-group {
-      .lui-tab {
-        @include fonts.font-semibold;
-        background-color: transparent;
-        border: none;
-        border-radius: 0;
-        font-size: 1.125rem;
-        color: colors.$base-type-color;
-        &:focus {
-          outline: none;
-          // border-bottom: 2px solid $blue-50;
-          background-color: rgba(colors.$teal-50, 0.2);
-        }
-        &-active,
-        &-active:focus {
-          // border-bottom: 3px solid $brand-secondary;
-          position: relative;
-          background: none;
-          &:after {
-            content: '';
-            display: block;
-            height: 3px;
-            width: 100%;
-            padding: 0 32px;
-            left: 0;
-            right: 0;
-            box-sizing: border-box;
-            background: linear-gradient(
-              270deg,
-              colors.$teal-25 1%,
-              colors.$teal-50 100%
-            );
-            border-radius: 1.5px;
-            position: absolute;
-          }
-          outline: none;
-        }
-      }
-    }
-  }
-
-  .lui-tab-group-justified {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .lui-tab-panel {
-    display: none;
-    &.lui-tab-panel-active {
-      display: initial;
-    }
-  }
-}

package/dist/scss/Components/Menu/menu.scss

@@ -21,7 +21,7 @@
   color: colors.$base-type-color;
   @include fonts.font-light;
 
-  a[role="menuitem"] {
+  a[role='menuitem'] {
     text-decoration: none;
     color: colors.$base-type-color;
     @include fonts.font-light;
@@ -42,7 +42,7 @@ body.lui-menu-drawer-open {
   top: 0;
   right: 0;
   overflow-x: hidden;
-  border-left: 2px solid colors.$grey-10;
+  border-left: 2px solid colors.$lily;
   transition: right 0.5s, visibility 0.6s;
 
   .lui-header & {
@@ -67,7 +67,7 @@ body.lui-menu-drawer-open {
 
   &-options {
     hr {
-      background-color: colors.$grey-10;
+      background-color: colors.$lily;
     }
   }
 
@@ -78,7 +78,7 @@ body.lui-menu-drawer-open {
 
     &:hover {
       cursor: pointer;
-      background-color: colors.$blue-05;
+      background-color: colors.$polar;
     }
 
     &-label {
@@ -119,7 +119,7 @@ body.lui-menu-drawer-open {
 
 .LuiDrawerMenuSection-header {
   @include fonts.font-semibold;
-  background-color: colors.$grey-05;
+  background-color: colors.$hint;
   white-space: nowrap;
   padding-left: 16px;
   padding-right: 8px;
@@ -134,12 +134,12 @@ body.lui-menu-drawer-open {
 .LuiDrawerMenuSection-header h3 {
   @include fonts.font-semibold;
   font-size: fonts.$base-font-size;
-  color: colors.$text;
+  color: colors.$base-type-color;
   margin-top: 0;
   line-height: 32px;
 }
 
 .LuiDrawerMenuDivider {
   height: 1px;
-  background-color: colors.$grey-10;
+  background-color: colors.$lily;
 }

package/dist/scss/Components/Messaging/messaging.scss

@@ -8,8 +8,8 @@
   border-left: 50px solid #ccc;
   padding: spacing.$unit-sm 50px 16px spacing.$unit-sm;
   margin: spacing.$unit-lg 0;
-  color: colors.$grey-60;
-  background: colors.$grey-10;
+  color: colors.$fuscous;
+  background: colors.$lily;
   position: relative;
 
   p {
@@ -20,7 +20,7 @@
   h2 {
     font-size: fonts.$base-font-size;
     @include fonts.font-semibold;
-    color: colors.$grey-60;
+    color: colors.$fuscous;
     margin: 0;
   }
 
@@ -37,7 +37,7 @@
     background: none;
     padding: 0;
     border: none;
-    color: colors.$grey-60;
+    color: colors.$fuscous;
     &:hover {
       cursor: pointer;
     }
@@ -113,7 +113,7 @@
 
 .lui-msg-banner-container {
   width: 100%;
-  background: colors.$grey-10;
+  background: colors.$lily;
   padding: spacing.$unit-xxs;
   @include breakpoint(md) {
     padding: spacing.$unit-lg;

package/dist/scss/Components/Modal/modal.scss

@@ -7,7 +7,7 @@
   padding: spacing.$unit-lg;
   border-left: 0px solid transparent;
   margin: spacing.$unit-lg 0;
-  color: colors.$grey-60;
+  color: colors.$fuscous;
   background: #fff;
   position: relative;
   max-width: 600px;
@@ -15,7 +15,7 @@
   h2 {
     font-size: 1.25rem;
     @include fonts.font-semibold;
-    color: colors.$grey-60;
+    color: colors.$fuscous;
     margin: 0;
   }
   h2 + p {
@@ -101,4 +101,4 @@
 
 .lui-modal-header-title h1 {
   color: colors.$white;
-}
+}

package/dist/scss/Components/Notifications/notifications.scss

@@ -20,7 +20,7 @@
   }
 
   button {
-    color: colors.$blue-75;
+    color: colors.$sea;
   }
 
   background-color: #fff;
@@ -36,7 +36,7 @@
   );
   min-height: 100px;
   padding: spacing.$unit-lg spacing.$unit-lg 0 spacing.$unit-lg;
-  border-bottom: 1px solid colors.$blue-75;
+  border-bottom: 1px solid colors.$sea;
 
   h1 {
     color: #fff;

package/dist/scss/Elements/Buttons/buttons.scss

@@ -90,8 +90,8 @@ button {
 
   &:disabled {
     color: colors.$disabled-color;
-    background: colors.$grey-10;
-    border-color: colors.$grey-10;
+    background: colors.$lily;
+    border-color: colors.$lily;
 
     i,
     svg * {
@@ -154,35 +154,35 @@ a.lui-button {
   }
 
   &-primary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $$myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(#fff, colors.$blue-75, colors.$blue-75);
+    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
+    @include button-builder(#fff, colors.$sea, colors.$sea);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
       #fff,
       colors.$brand-primary,
       colors.$brand-primary,
       $reversed-btn-active-txt,
-      colors.$blue-100,
-      colors.$blue-100
+      colors.$teal,
+      colors.$teal
     );
   }
 
   &-secondary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $$myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(colors.$blue-75, #fff, colors.$blue-75);
+    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
+    @include button-builder(colors.$sea, #fff, colors.$sea);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
       #fff,
       colors.$brand-primary,
       colors.$brand-primary,
       $reversed-btn-active-txt,
-      colors.$blue-100,
-      colors.$blue-100
+      colors.$teal,
+      colors.$teal
     );
 
     i,
     svg * {
-      color: colors.$blue-75;
+      color: colors.$sea;
     }
 
     &:hover i {
@@ -191,7 +191,7 @@ a.lui-button {
   }
 
   &-tertiary {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $$myStrokeWeight : 2px, $myBtnLineHeight : 40px
+    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
     @include button-builder(#fff, colors.$green-btn, colors.$green-btn);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
@@ -205,7 +205,7 @@ a.lui-button {
   }
 
   &-error {
-    // var $btnTxtCol, $btnBgCol, $borderCol, $$myStrokeWeight : 2px, $myBtnLineHeight : 40px
+    // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
     @include button-builder(#fff, colors.$error, colors.$error);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
@@ -258,10 +258,10 @@ a.lui-button {
     @include button-builder(colors.$txt-link, transparent, #fff, 0, 24px);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
-      colors.$blue-100,
+      colors.$teal,
       transparent,
       none,
-      colors.$blue-100,
+      colors.$teal,
       none,
       none
     );
@@ -277,7 +277,7 @@ a.lui-button {
     }
 
     &:disabled {
-      color: colors.$grey-30;
+      color: colors.$gray;
       background: none;
       border: 0;
       text-decoration: none;
@@ -288,8 +288,8 @@ a.lui-button {
 
       i,
       svg * {
-        color: colors.$grey-30;
-        fill: colors.$grey-30;
+        color: colors.$gray;
+        fill: colors.$gray;
       }
     }
   }
@@ -307,15 +307,15 @@ a.lui-button {
     font-weight: inherit;
 
     &:disabled {
-      color: colors.$grey-30;
+      color: colors.$gray;
       background: none;
       border: 0;
       text-decoration: none;
 
       i,
       svg * {
-        color: colors.$grey-30;
-        fill: colors.$grey-30;
+        color: colors.$gray;
+        fill: colors.$gray;
       }
     }
   }
@@ -324,7 +324,7 @@ a.lui-button {
   &-icon-only-rev,
   &-icon-only-link {
     // var $btnTxtCol, $btnBgCol, $borderCol, $myStrokeWeight : 2px, $myBtnLineHeight : 40px
-    @include button-builder(colors.$blue-75, transparent, transparent);
+    @include button-builder(colors.$sea, transparent, transparent);
     // var $btnTxtColHover, $btnBgColHover, $borderColHover, $btnTxtColActive, $btnBgColActive, $borderColActive
     @include button-states-builder(
       colors.$primary-hover-btn,
@@ -490,7 +490,7 @@ a.lui-button {
     width: 100%;
 
     &.lui-button-active {
-      background-color: colors.$blue-75;
+      background-color: colors.$sea;
       -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
       -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
       box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
@@ -499,7 +499,7 @@ a.lui-button {
     }
 
     &:hover {
-      background: colors.$blue-75;
+      background: colors.$sea;
       cursor: pointer;
       color: colors.$white;
     }
@@ -534,7 +534,7 @@ a.lui-button {
         @include ScreenReadersOnly();
 
         &:checked + label {
-          background-color: colors.$blue-75;
+          background-color: colors.$sea;
           box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
           color: colors.$white;
           text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
@@ -546,7 +546,7 @@ a.lui-button {
 
         &:checked:disabled + label,
         &:disabled:checked + label:hover {
-          background-color: colors.$grey-30;
+          background-color: colors.$gray;
           color: colors.$white;
 
           .LuiDeprecatedForms & {
@@ -556,12 +556,12 @@ a.lui-button {
 
         &:focus:not([disabled]) + label {
           color: colors.$white;
-          background: colors.$blue-75;
+          background: colors.$sea;
           cursor: pointer;
         }
 
         &:disabled + label {
-          border-color: colors.$grey-30 !important; // imp! for overwrite RH border styling
+          border-color: colors.$gray !important; // imp! for overwrite RH border styling
         }
 
         &:disabled + label:hover {
@@ -584,8 +584,8 @@ a.lui-button {
         line-height: 40px;
         transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s;
         text-align: center;
-        border: 2px solid colors.$blue-75;
-        color: colors.$blue-75;
+        border: 2px solid colors.$sea;
+        color: colors.$sea;
         border-radius: 0;
         border-right: none;
         width: 100%;
@@ -593,7 +593,7 @@ a.lui-button {
 
         &:hover {
           color: colors.$white;
-          background: colors.$blue-75;
+          background: colors.$sea;
           cursor: pointer;
         }
       }
@@ -614,7 +614,7 @@ a.lui-button {
       @include ScreenReadersOnly();
 
       &:checked + label {
-        background-color: colors.$blue-75;
+        background-color: colors.$sea;
         box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5);
         color: colors.$white;
         text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
@@ -622,7 +622,7 @@ a.lui-button {
 
       &:focus + label {
         color: colors.$white;
-        background: colors.$blue-75;
+        background: colors.$sea;
         cursor: pointer;
       }
     }
@@ -635,8 +635,8 @@ a.lui-button {
       line-height: 40px;
       transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s;
       text-align: center;
-      border: 2px solid colors.$blue-75;
-      color: colors.$blue-75;
+      border: 2px solid colors.$sea;
+      color: colors.$sea;
       border-radius: 0;
       border-right: none;
       width: 100%;
@@ -644,7 +644,7 @@ a.lui-button {
 
       &:hover {
         color: colors.$white;
-        background: colors.$blue-75;
+        background: colors.$sea;
         cursor: pointer;
       }
     }
@@ -661,7 +661,7 @@ a.lui-button {
       grid-column: span 12;
 
       label {
-        border-right: 2px solid colors.$blue-75;
+        border-right: 2px solid colors.$sea;
         border-radius: 0 spacing.$unit-xs spacing.$unit-xs 0;
       }
     }
@@ -718,7 +718,7 @@ a.lui-button {
       grid-column: span 8;
 
       label {
-        border-right: 2px solid colors.$blue-75;
+        border-right: 2px solid colors.$sea;
         border-radius: 0 spacing.$unit-xs spacing.$unit-xs 0;
       }
     }

package/dist/scss/Elements/Forms/FormComponents/Inputs.scss

@@ -25,7 +25,7 @@
     @include fonts.font-regular;
     font-size: $my-font-size;
     color: colors.$input-text;
-    border: forms.$input-border-width solid colors.$grey-20;
+    border: forms.$input-border-width solid colors.$silver;
     border-radius: misc.$borderRadius;
     line-height: $my-input-height;
     width: 100%;
@@ -161,7 +161,7 @@
       right: 14px;
       top: 0;
       line-height: $my-line-height;
-      color: colors.$grey-20;
+      color: colors.$silver;
     }
   }
 }

package/dist/scss/Elements/Forms/FormComponents/RadiosCheckboxes.scss

@@ -27,10 +27,10 @@
       position: relative;
       margin: 0;
       &:disabled {
-        border: forms.$input-border-width solid colors.$grey-30;
-        background-color: colors.$grey-10;
+        border: forms.$input-border-width solid colors.$gray;
+        background-color: colors.$lily;
         + label {
-          color: colors.$grey-30;
+          color: colors.$gray;
         }
       }
     }

package/dist/scss/Elements/Icons/icons.scss

@@ -46,5 +46,5 @@
 }
 
 .lui-inactive-icon {
-  color: colors.$grey-30;
+  color: colors.$gray;
 }

package/dist/scss/Elements/Tables/tables.scss

@@ -28,7 +28,7 @@ table {
   }
 
   thead {
-    border-top: 1px solid colors.$grey-30;
+    border-top: 1px solid colors.$gray;
     //automatically style the th in a thead row, but for headers in a column, use the class name on a cell
     th,
     .lui-table-head-cell {
@@ -38,12 +38,12 @@ table {
   }
 
   tbody {
-    border-top: 1px solid colors.$grey-30;
-    border-bottom: 1px solid colors.$grey-30;
+    border-top: 1px solid colors.$gray;
+    border-bottom: 1px solid colors.$gray;
   }
 
   tr {
-    border-bottom: 1px solid colors.$grey-10;
+    border-bottom: 1px solid colors.$lily;
     //adding white border to the top so there is a clear division between rows when background colour changes on selection
     &:not(:first-child) {
       border-top: 1px solid #fff;
@@ -51,7 +51,7 @@ table {
   }
 
   .lui-table-row-selected {
-    background-color: colors.$blue-05 !important;
+    background-color: colors.$polar !important;
   }
 
   th {
@@ -106,19 +106,19 @@ table {
   &-table-zebra {
     tr {
       &:nth-child(even) {
-        background-color: colors.$grey-05;
+        background-color: colors.$hint;
       }
     }
   }
 
   // A class to apply the zebra styling to a specific tag. Could be a <tr>, a <div>, a <li>. Use your App logic for alternating styling between rows as there is no CSS to do this
   &-row-zebra {
-    background-color: colors.$grey-05;
+    background-color: colors.$hint;
   }
 
   // To be applied on a <tbody> and only has scope for the rows within that level, it won't style child rows, so it won't affect nested tables
   &-table-first-level-row-zebra > tr:nth-child(even) {
-    background-color: colors.$grey-05;
+    background-color: colors.$hint;
   }
 }