@linzjs/lui 10.11.2 → 11.0.0

package/dist/scss/Foundation/Utilities/Borders.scss

@@ -12,7 +12,7 @@
 @mixin border(
   $width: 1px,
   $style: solid,
-  $color: $grey-20,
+  $color: $silver,
   $borderRadius: null
 ) {
   @if ($borderRadius != null) {

package/dist/scss/Foundation/Utilities/LuiStandardHeaderBackground.scss

@@ -21,12 +21,12 @@
 
   &.lui-header-transparent {
     background: transparent;
-    color: colors.$blue-75;
+    color: colors.$sea;
     &:after {
       content: none;
     }
     .lui-header-menu-icon {
-      color: colors.$teal-75;
+      color: colors.$surfie;
     }
   }
 }

package/dist/scss/Foundation/Variables/FormVars.scss

@@ -23,6 +23,6 @@ $input-border-width-thick: 0.13rem; // 2px
 $checkbox-icon-font-size: 1.13rem; // 18px
 $checkbox-icon-line-height: spacing.$unit-md; // 24px
 $checkbox-label-spacing: $input-spacing;
-$checkbox-border-colour: colors.$blue-75;
+$checkbox-border-colour: colors.$sea;
 
 $form-error-icon-size: spacing.$unit-lg;

package/dist/scss/Foundation/Variables/_ExportCSS.scss

@@ -1,6 +1,6 @@
 @use 'LuiColors';
 
-$prefix: "--"; // Prefix string for custom CSS properties
+$prefix: '--'; // Prefix string for custom CSS properties
 
 // Merges a variable name with $prefix
 @function custom-property-name($name) {
@@ -14,80 +14,108 @@ $prefix: "--"; // Prefix string for custom CSS properties
 
 // Append SCSS variables which are desired to be accessible:
 :root {
-
-  @include define-custom-property('color-grey-80', LuiColors.$grey-80);
-  @include define-custom-property('color-grey-60', LuiColors.$grey-60);
-  @include define-custom-property('color-grey-30', LuiColors.$grey-30);
-  @include define-custom-property('color-grey-20', LuiColors.$grey-20);
-  @include define-custom-property('color-grey-10', LuiColors.$grey-10);
-  @include define-custom-property('color-grey-05', LuiColors.$grey-05);
-
-  @include define-custom-property('color-blue-100', LuiColors.$blue-100);
-  // color-blue-85,// $blue-85
-  @include define-custom-property('color-blue-75', LuiColors.$blue-75);
-  @include define-custom-property('color-blue-50', LuiColors.$blue-50);
-  @include define-custom-property('color-blue-25', LuiColors.$blue-25);
-  @include define-custom-property('color-blue-05', LuiColors.$blue-05);
-
-  @include define-custom-property('color-teal-100', LuiColors.$teal-100);
-  @include define-custom-property('color-teal-75', LuiColors.$teal-75);
-  @include define-custom-property('color-teal-50', LuiColors.$teal-50);
-  @include define-custom-property('color-teal-25', LuiColors.$teal-25);
-  @include define-custom-property('color-teal-05', LuiColors.$teal-05);
-
-  @include define-custom-property('color-green-100', LuiColors.$green-100);
-  @include define-custom-property('color-green-75', LuiColors.$green-75);
-  @include define-custom-property('color-green-50', LuiColors.$green-50);
-  @include define-custom-property('color-green-25', LuiColors.$green-25);
-  @include define-custom-property('color-green-05', LuiColors.$green-05);
+  @include define-custom-property('grey-80', LuiColors.$charcoal);
+  @include define-custom-property('grey-60', LuiColors.$fuscous);
+  @include define-custom-property('$gray', LuiColors.$gray);
+  @include define-custom-property('grey-20', LuiColors.$silver);
+  @include define-custom-property('grey-10', LuiColors.$lily);
+  @include define-custom-property('grey-05', LuiColors.$hint);
+
+  @include define-custom-property('teal', LuiColors.$teal);
+  // blue-85,// $blue-85
+  @include define-custom-property('sea', LuiColors.$sea);
+  @include define-custom-property('electric', LuiColors.$electric);
+  @include define-custom-property('spray', LuiColors.$spray);
+  @include define-custom-property('polar', LuiColors.$polar);
+
+  @include define-custom-property('sherpa', LuiColors.$sherpa);
+  @include define-custom-property('surfie', LuiColors.$surfie);
+  @include define-custom-property('persian', LuiColors.$persian);
+  @include define-custom-property('downy', LuiColors.$downy);
+  @include define-custom-property('iceberg', LuiColors.$iceberg);
+
+  @include define-custom-property('sacramento', LuiColors.$sacramento);
+  @include define-custom-property('salem', LuiColors.$salem);
+  @include define-custom-property('pigment', LuiColors.$pigment);
+  @include define-custom-property('granny', LuiColors.$granny);
+  @include define-custom-property('panache', LuiColors.$panache);
 
   @include define-custom-property('brand-primary', LuiColors.$brand-primary);
-  @include define-custom-property('brand-secondary', LuiColors.$brand-secondary);
+  @include define-custom-property(
+    'brand-secondary',
+    LuiColors.$brand-secondary
+  );
 
   // System colours,// System colours
 
   // reserved colours,// reserved colours
-  @include define-custom-property('color-success', LuiColors.$success);
-  @include define-custom-property('color-success-bg', LuiColors.$success-bg);
-  @include define-custom-property('color-info', LuiColors.$info);
-  @include define-custom-property('color-info-bg', LuiColors.$info-bg);
-  @include define-custom-property('color-warning', LuiColors.$warning);
-  @include define-custom-property('color-warning-bg', LuiColors.$warning-bg);
-  @include define-custom-property('color-error', LuiColors.$error);
-  @include define-custom-property('color-error-focus', LuiColors.$error-focus);
-  @include define-custom-property('color-error-bg', LuiColors.$error-bg);
-
-  @include define-custom-property('color-visited', LuiColors.$visited);
+  @include define-custom-property('success', LuiColors.$success);
+  @include define-custom-property('success-bg', LuiColors.$success-bg);
+  @include define-custom-property('info', LuiColors.$info);
+  @include define-custom-property('info-bg', LuiColors.$info-bg);
+  @include define-custom-property('warning', LuiColors.$warning);
+  @include define-custom-property('warning-bg', LuiColors.$warning-bg);
+  @include define-custom-property('error', LuiColors.$error);
+  @include define-custom-property('error-focus', LuiColors.$error-focus);
+  @include define-custom-property('error-bg', LuiColors.$error-bg);
+
+  @include define-custom-property('visited', LuiColors.$visited);
 
   // restricted colours for btn hover states,// restricted colours for btn hover states
-  @include define-custom-property('color-green-hover', LuiColors.$green-hover);
-  @include define-custom-property('color-green-active', LuiColors.$green-active);
-  @include define-custom-property('color-green-btn', LuiColors.$green-btn);
-  @include define-custom-property('color-txt-link', LuiColors.$txt-link);
-  @include define-custom-property('color-primary-hover-btn', LuiColors.$primary-hover-btn);
+  @include define-custom-property('green-hover', LuiColors.$green-hover);
+  @include define-custom-property(
+    'color-green-active',
+    LuiColors.$green-active
+  );
+  @include define-custom-property('green-btn', LuiColors.$green-btn);
+  @include define-custom-property('txt-link', LuiColors.$txt-link);
+  @include define-custom-property(
+    'color-primary-hover-btn',
+    LuiColors.$primary-hover-btn
+  );
   @include define-custom-property('color-selection', LuiColors.$selection);
 
   //Type
-  @include define-custom-property('heading-color', LuiColors.$teal-75);
-  @include define-custom-property('heading-color--secondary', LuiColors.$grey-80);
-  @include define-custom-property('base-type-color', LuiColors.$grey-80);
+  @include define-custom-property('heading-color', LuiColors.$surfie);
+  @include define-custom-property(
+    'heading-color--secondary',
+    LuiColors.$charcoal
+  );
+  @include define-custom-property('base-type-color', LuiColors.$charcoal);
 
   // Icons & radio/checkboxes
-  @include define-custom-property('base-icon-color', LuiColors.$blue-75);
-  @include define-custom-property('disabled-color', LuiColors.$grey-30);
-  @include define-custom-property('disabled-color-dark', LuiColors.$grey-60);
+  @include define-custom-property('base-icon-color', LuiColors.$sea);
+  @include define-custom-property('disabled-color', LuiColors.$gray);
+  @include define-custom-property('disabled-color-dark', LuiColors.$fuscous);
 
   //LINZ public site colour variables,//LINZ public site colour variables
 
-  @include define-custom-property('linz-color-primary', LuiColors.$linz-color-primary);
-  @include define-custom-property('linz-color-primary-hover', LuiColors.$linz-color-primary-hover);
-
-  @include define-custom-property('linz-color-tertiary', LuiColors.$linz-color-tertiary);
-  @include define-custom-property('linz-color-tertiary-hover', LuiColors.$linz-color-tertiary-hover);
+  @include define-custom-property(
+    'linz-color-primary',
+    LuiColors.$linz-color-primary
+  );
+  @include define-custom-property(
+    'linz-color-primary-hover',
+    LuiColors.$linz-color-primary-hover
+  );
+
+  @include define-custom-property(
+    'linz-color-tertiary',
+    LuiColors.$linz-color-tertiary
+  );
+  @include define-custom-property(
+    'linz-color-tertiary-hover',
+    LuiColors.$linz-color-tertiary-hover
+  );
 
   @include define-custom-property('color-test-pink', LuiColors.$test-pink);
 
-  @include define-custom-property('linz-linear-gradient-blue', LuiColors.$linz-linear-gradient-blue);
-  @include define-custom-property('linz-linear-gradient-teal', LuiColors.$linz-linear-gradient-teal);
-
-} // end :root
+  @include define-custom-property(
+    'linz-linear-gradient-blue',
+    LuiColors.$linz-linear-gradient-blue
+  );
+  @include define-custom-property(
+    'linz-linear-gradient-teal',
+    LuiColors.$linz-linear-gradient-teal
+  );
+} // end :root

package/dist/scss/Foundation/Variables/_ExportColors.scss

@@ -4,32 +4,33 @@
 
 // the :export directive is the magic sauce for webpack
 :export {
-
-  color-grey-80: LuiColors.$grey-80;
-  color-grey-60: LuiColors.$grey-60;
-  color-grey-30: LuiColors.$grey-30;
-  color-grey-20: LuiColors.$grey-20;
-  color-grey-10: LuiColors.$grey-10;
-  color-grey-05: LuiColors.$grey-05;
-
-  color-blue-100: LuiColors.$blue-100;
-  // color-blue-85,// $blue-85
-  color-blue-75: LuiColors.$blue-75;
-  color-blue-50: LuiColors.$blue-50;
-  color-blue-25: LuiColors.$blue-25;
-  color-blue-05: LuiColors.$blue-05;
-
-  color-teal-100: LuiColors.$teal-100;
-  color-teal-75: LuiColors.$teal-75;
-  color-teal-50: LuiColors.$teal-50;
-  color-teal-25: LuiColors.$teal-25;
-  color-teal-05: LuiColors.$teal-05;
-
-  color-green-100: LuiColors.$green-100;
-  color-green-75: LuiColors.$green-75;
-  color-green-50: LuiColors.$green-50;
-  color-green-25: LuiColors.$green-25;
-  color-green-05: LuiColors.$green-05;
+  charcoal: LuiColors.$charcoal;
+  fuscous: LuiColors.$fuscous;
+  gray: LuiColors.$gray;
+  silver: LuiColors.$silver;
+  lily: LuiColors.$lily;
+  hint: LuiColors.$hint;
+  snow: LuiColors.$snow;
+  white: LuiColors.$white;
+
+  teal: LuiColors.$teal;
+  //blue-85,// $blue-85
+  sea: LuiColors.$sea;
+  electric: LuiColors.$electric;
+  spray: LuiColors.$spray;
+  polar: LuiColors.$polar;
+
+  sherpa: LuiColors.$sherpa;
+  surfie: LuiColors.$surfie;
+  persian: LuiColors.$persian;
+  downy: LuiColors.$downy;
+  iceberg: LuiColors.$iceberg;
+
+  sacramento: LuiColors.$sacramento;
+  salem: LuiColors.$salem;
+  pigment: LuiColors.$pigment;
+  granny: LuiColors.$granny;
+  panache: LuiColors.$panache;
 
   brand-primary: LuiColors.$brand-primary;
   brand-secondary: LuiColors.$brand-secondary;
@@ -37,35 +38,36 @@
   // System colours,// System colours
 
   // reserved colours,// reserved colours
-  color-success: LuiColors.$success;
-  color-success-bg: LuiColors.$success-bg;
-  color-info: LuiColors.$info;
-  color-info-bg: LuiColors.$info-bg;
-  color-warning: LuiColors.$warning;
-  color-warning-bg: LuiColors.$warning-bg;
-  color-error: LuiColors.$error;
-  color-error-focus: LuiColors.$error-focus; // Used to highlight what input in an error state has focus
-  color-error-bg: LuiColors.$error-bg;
-
-  color-visited: LuiColors.$visited;
+  error: LuiColors.$error;
+  error-bg: LuiColors.$error-bg;
+  error-focus: LuiColors.$error-focus; // Used to highlight what input in an error state has focus
+  warning: LuiColors.$warning;
+  warning-bg: LuiColors.$warning-bg;
+  warning-focus: LuiColors.$warning-focus;
+  success: LuiColors.$success;
+  success-bg: LuiColors.$success-bg;
+  info: LuiColors.$info;
+  info-bg: LuiColors.$info-bg;
+
+  visited: LuiColors.$visited;
 
   // restricted colours for btn hover states,// restricted colours for btn hover states
-  color-green-hover: LuiColors.$green-hover;
-  color-green-active: LuiColors.$green-active;
-  color-green-btn: LuiColors.$green-btn;
-  color-txt-link: LuiColors.$txt-link;
-  color-primary-hover-btn: LuiColors.$primary-hover-btn;
-  color-selection: LuiColors.$selection;
+  green-hover: LuiColors.$green-hover;
+  green-active: LuiColors.$green-active;
+  green-btn: LuiColors.$green-btn;
+  txt-link: LuiColors.$txt-link;
+  primary-hover-btn: LuiColors.$primary-hover-btn;
+  selection: LuiColors.$selection;
 
   //Type
-  heading-color: LuiColors.$teal-75;
-  heading-color--secondary: LuiColors.$grey-80;
-  base-type-color: LuiColors.$grey-80;
+  heading-color: LuiColors.$surfie;
+  heading-color--secondary: LuiColors.$charcoal;
+  base-type-color: LuiColors.$charcoal;
 
   // Icons & radio/checkboxes
-  base-icon-color: LuiColors.$blue-75;
-  disabled-color: LuiColors.$grey-30;
-  disabled-color-dark: LuiColors.$grey-60;
+  base-icon-color: LuiColors.$sea;
+  disabled-color: LuiColors.$gray;
+  disabled-color-dark: LuiColors.$fuscous;
 
   //LINZ public site colour variables,//LINZ public site colour variables
 
@@ -79,5 +81,4 @@
 
   linz-linear-gradient-blue: LuiColors.$linz-linear-gradient-blue;
   linz-linear-gradient-teal: LuiColors.$linz-linear-gradient-teal;
-
-}// end :export
+} // end :export

package/dist/scss/Foundation/Variables/_LuiColors.scss

@@ -3,71 +3,130 @@
 // Colours
 // ============
 
-$test-pink: #f09;
-
-$grey-80: #414042;
-$grey-60: #55504b;
-$grey-30: #989189;
-$grey-20: #beb9b4;
-$grey-10: #eaeaea;
-$grey-05: #f9f9f9;
-
-$blue-100: #00425d;
-// $blue-85: #005b80;
-$blue-75: #007198;
-$blue-50: #0096cc;
-$blue-25: #73c8e1;
-$blue-05: #e2f3f7;
-
-$teal-100: #004b50;
-$teal-75: #017a76;
-$teal-50: #00a599;
-$teal-25: #73cdc8;
-$teal-05: #dcf5f0;
-
-$green-100: #004e32;
-$green-75: #08814d;
-$green-50: #0aa245;
-$green-25: #9bd79b;
-$green-05: #e9fae7;
-
-$brand-primary: $blue-100;
-$brand-secondary: $teal-75;
+// Colours are hard. We've remapped the names in FigLui so that's what's below.
+
+// ----------------------------
+// Brand
+// ----------------------------
+
+// Blues
+$teal: #00425d;
+$sea: #007198;
+$electric: #0096cc;
+$spray: #73c8e1;
+$polar: #e2f3f7;
+$linz-linear-gradient-blue: linear-gradient(70deg, $teal 12%, $sea 100%);
+
+// Tealsno
+$sherpa: #004b50;
+$surfie: #017a76;
+$persian: #00a599;
+$downy: #73cdc8;
+$iceberg: #dcf5f0;
+$linz-linear-gradient-teal: linear-gradient(270deg, $persian 1%, $downy 100%);
+
+// Greens
+$sacramento: #004e32;
+$salem: #08814d;
+$pigment: #0aa245;
+$granny: #9bd79b;
+$panache: #e9fae7;
+
+// ----------------------------
+// Neutrals
+// ----------------------------
+
+$charcoal: #2a292c;
+$fuscous: #6b6966;
+$gray: #989189;
+$silver: #beb9b4;
+$lily: #eaeaea;
+$hint: #f9f9f9;
+$snow: #ffffff;
+$white: $snow;
+
+// ----------------------------
+// Reserved
+// ----------------------------
+
+// error
+$error: #cc0000;
+$error-bg: #f5cccc;
+$error-focus: #5a0000;
 
-// System colours
+// warning
+$warning: #ea6a2e;
+$warning-bg: #fbdfd2;
+$warning-focus: #b33a01;
 
-// reserved colours
-$success: $green-50;
-$success-bg: $green-05;
+// info
 $info: #3a7cdf;
 $info-bg: #d8e5f9;
-$warning: #ea6a2e;
-$warning-bg: #fbdfd2;
-$error: #cc0000;
-$error-focus: #5a0000; // Used to highlight what input in an error state has focus
-$error-bg: #f5cccc;
 
-$visited: #4c2c92;
-$selection: lighten($blue-25, 20%);
+// success
+$success: $pigment;
+$success-bg: $panache;
 
-// restricted colours for btn hover states
-$green-hover: #205f12;
-$green-active: #16430c;
-$green-btn: #2e881a;
+// text link
 $txt-link: #1f69c3;
-$primary-hover-btn: #004e6a;
+
+$test-pink: #f09;
+
+// --------------------------------------------------------
+// Deprecated variable sets
+// --------------------------------------------------------
+
+$grey-80: $charcoal;
+$grey-60: $fuscous;
+$grey-30: $gray;
+$grey-20: $silver;
+$grey-10: $lily;
+$grey-05: $hint;
+
+$blue-100: $teal;
+$blue-75: $sea;
+$blue-50: $electric;
+$blue-25: $spray;
+$blue-05: $polar;
+
+$teal-100: $sherpa;
+$teal-75: $surfie;
+$teal-50: $persian;
+$teal-25: $downy;
+$teal-05: $iceberg;
+
+$green-100: $sacramento;
+$green-75: $salem;
+$green-50: $pigment;
+$green-25: $granny;
+$green-05: $panache;
+
+$brand-primary: $sherpa;
+$brand-secondary: $surfie;
+
+// System colours
+
+$visited: $teal;
+$selection: lighten($spray, 20%);
+
+// restricted colours for btn hover states
+$green-hover: $salem;
+$green-active: $sacramento;
+$green-btn: $pigment;
+$txt-link: $electric;
+$primary-hover-btn: $sea;
 
 //Type
-$heading-color: $teal-75;
-$heading-color--secondary: $grey-80;
-$base-type-color: $grey-80;
+$heading-color: $surfie;
+$heading-color--secondary: $charcoal;
+$base-type-color: $charcoal;
 
 // Icons, inputs & radio/checkboxes
-$input-text: $base-type-color;
-$input-placeholder: #989189;
-$base-icon-color: $blue-75;
-$disabled-color: $grey-30;
-$disabled-color-dark: $grey-30;
+$input-text: $charcoal;
+$input-placeholder: $gray;
+$base-icon-color: $sea;
+$disabled-color: $gray;
+$disabled-color-dark: $gray;
 
 //LINZ public site colour variables
 
@@ -76,68 +135,3 @@ $linz-color-primary-hover: #01818a;
 
 $linz-color-tertiary: #e1e44a;
 $linz-color-tertiary-hover: #cdcf59;
-
-$linz-linear-gradient-blue: linear-gradient( 70deg, $brand-primary 12%, $blue-75 100% );
-$linz-linear-gradient-teal: linear-gradient( 270deg, $teal-50 1%, $teal-25 100% );
-
-
-
-// TODO: Are the below old branding colors? Move to separate file?
-
-// Brand ============
-
-$blue: #003b59;
-$pastel: #b2c4cd;
-$mystic: #e5ebee;
-$elephant: #0c3345;
-
-$mineral: #00a9a5;
-$ice: #6fd1cf;
-$wind: #b1e9e6;
-
-$green: #cbe612;
-$yellow: #ffd52d;
-$orange: #ed8b00;
-$red: #cf0025;
-$pink: #cf0059;
-$purple: #8552af;
-
-// Tones ============
-
-$black: #002030;
-$grey: #7f8f97;
-$white: #fff;
-
-// Text ============
-$text: $grey-80;
-$link: $blue;
-$active: $pink;
-$highlight: $active;
-
-// Messages ============
-$success: $green-50;
-$success-bg: $green-05;
-$info: #3a7cdf;
-$info-bg: #d8e5f9;
-$warning: #ea6a2e;
-$warning-focus: #b33a01;
-$warning-bg: #fbdfd2;
-$error: #cc0000;
-$error-focus: #5a0000; // Used to highlight what input in an error state has focus
-$error-bg: #f5cccc;
-
-$error: $error;
-$info: $info;
-$success: $success;
-$warning: $warning;
-
-// Name-spacing ============
-$primary: $white;
-$primary-light: hsl(color.hue($primary), color.saturation($primary), 75%);
-$primary-dark: hsl(color.hue($primary), color.saturation($primary), 25%);
-$secondary: $blue;
-$secondary-light: hsl(color.hue($secondary), color.saturation($secondary), 75%);
-$secondary-dark: hsl(color.hue($secondary), color.saturation($secondary), 25%);
-$tertiary: $elephant;
-
-$borderColour: $base-type-color;

package/dist/scss/Global/GenericElements/Link.scss

@@ -54,16 +54,16 @@ a {
 
 // Is Link being used?
 .Link {
-  color: colors.$active;
+  color: colors.$txt-link;
   @include hover.hover('is-active') {
-    color: colors.$active;
+    color: colors.$txt-link;
   }
 }
 
 .Link--reversed {
   color: colors.$white;
   @include hover.hover('is-active') {
-    color: colors.$black;
+    color: colors.$charcoal;
   }
 }
 

package/dist/scss/Global/GenericElements/Todo.scss

@@ -17,7 +17,7 @@
 // ============
 // Config
 // ============
-$todo-color: colors.$primary;
+$todo-color: colors.$test-pink;
 $todo-text-color: colors.$white;
 $todo-throb-speed: 1.2s;
 

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

@@ -17,7 +17,7 @@ html {
   @include fonts.font-light();
   font-size: fonts.$base-font-size;
   line-height: fonts.$base-line-height;
-  color: colors.$text;
+  color: colors.$base-type-color;
   // Better Font Rendering
   font-feature-settings: 'kern' 1;
   font-kerning: normal;
@@ -57,7 +57,7 @@ sup {
 hr {
   border: none;
   margin: 0;
-  background-color: colors.$borderColour;
+  background-color: colors.$charcoal;
   height: 1px;
 }
 

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

@@ -61,7 +61,7 @@ body {
 // ! ************************************************
 
 .lui-section-dark {
-  background-color: colors.$grey-05;
-  border-top: 1px solid colors.$grey-10;
-  border-bottom: 1px solid colors.$grey-10;
+  background-color: colors.$hint;
+  border-top: 1px solid colors.$lily;
+  border-bottom: 1px solid colors.$lily;
 }

package/dist/scss/Vendor/print.scss

@@ -24,9 +24,9 @@
   .lui-header-primary {
     .lui-header-top-section {
       background: none;
-      border-bottom: 1px solid colors.$grey-80;
+      border-bottom: 1px solid colors.$charcoal;
       h1 {
-        color: colors.$grey-80 !important;
+        color: colors.$charcoal !important;
         @include fonts.font-semibold;
       }
     }