@linzjs/lui 17.5.4 → 17.5.7

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

@@ -1,4 +1,4 @@
-@use '../../../scss/Foundation/Variables/LuiColors' as colors;
+@use '../../../scss/Foundation/Variables/ColorVars' as colors;
 
 .LuiFileInputBox-upload {
   outline: 2px dashed colors.$lily;

package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss

@@ -1,5 +1,5 @@
 @use '../../../Foundation/Variables/FontVars' as fonts;
-@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/ColorVars' as colors;
 @use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Utilities/ScreenReadersOnly' as screen;
 

package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss

@@ -1,6 +1,6 @@
 @use '../../../Foundation/Variables/FormVars' as forms;
 @use '../../../Foundation/Variables/FontVars' as fonts;
-@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/ColorVars' as colors;
 @use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Variables/MiscVars' as MiscVars;
 @use '../../../Foundation/Utilities/REM' as rem;

package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss

@@ -2,7 +2,7 @@
 @use '../../../Foundation/Variables/FontVars' as fonts;
 @use '../../../Foundation/Utilities/FluidType' as luiFluidType;
 @use '../../../Foundation/Variables/BreakpointVars' as breakpoints;
-@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/ColorVars' as colors;
 @use '../../../Foundation/Variables/MiscVars' as misc;
 @use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Utilities/REM' as rem;

package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss

@@ -1,6 +1,6 @@
 @use '../../../Foundation/Variables/FormVars' as forms;
 @use '../../../Foundation/Variables/FontVars' as fonts;
-@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/ColorVars' as colors;
 @use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Variables/MiscVars' as MiscVars;
 @use '../../../Foundation/Utilities/REM' as rem;

package/dist/scss/Components/LuiFormSection/LuiFormSectionHeader.scss

@@ -1,4 +1,4 @@
-@use '../../Foundation/Variables/LuiColors' as colors;
+@use '../../Foundation/Variables/ColorVars' as colors;
 @use '../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../Foundation/Variables/BreakpointVars' as breakpoints;
 @use "../../Foundation/Utilities" as *;

package/dist/scss/Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss

@@ -1,4 +1,4 @@
-@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/ColorVars' as colors;
 @use '../../../Foundation/Variables/SpacingVars' as spacing;
 
 .HelpInfo {

package/dist/scss/Components/LuiForms/LuiComboSelect/LuiComboSelect.scss

@@ -1,5 +1,5 @@
 @use '../../../Foundation/Variables/FormVars' as forms;
-@use '../../../Foundation/Variables/LuiColors' as colors;
+@use '../../../Foundation/Variables/ColorVars' as colors;
 @use '../../../Foundation/Variables/FontVars' as fonts;
 @use '../../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../../Foundation/Utilities/REM' as rem;

package/dist/scss/Components/LuiSearchInput/LuiSearchInput.scss

@@ -1,7 +1,7 @@
 @use '../../Foundation/Variables/BreakpointVars' as breakpoints;
 @use '../../Foundation/Variables/FormVars' as forms;
 @use '../../Foundation/Variables/FontVars' as fonts;
-@use '../../Foundation/Variables/LuiColors' as colors;
+@use '../../Foundation/Variables/ColorVars' as colors;
 @use '../../Foundation/Variables/SpacingVars' as spacing;
 @use '../../Foundation/Utilities/BoxShadow' as shadow;
 
@@ -12,7 +12,7 @@ $input-wrapper-height-sm: 40px;
 $input-wrapper-height-lg: 56px;
 
 .LuiSearchInput {
-  @include shadow.drop-shadow($size: "sm");
+  @include shadow.drop-shadow($size: 'sm');
 
   background: colors.$snow;
   border-radius: 0 3px 3px 0;
@@ -25,7 +25,7 @@ $input-wrapper-height-lg: 56px;
   &:active,
   &:focus,
   &:focus-within {
-    @include shadow.drop-shadow("md");
+    @include shadow.drop-shadow('md');
     border-radius: 3px;
   }
 }
@@ -41,7 +41,7 @@ $input-wrapper-height-lg: 56px;
   min-height: $input-wrapper-height-lg;
 
   @media (max-width: breakpoints.$breakpoint-sm) {
-    min-height: $input-wrapper-height-sm
+    min-height: $input-wrapper-height-sm;
   }
 }
 
@@ -152,7 +152,7 @@ $input-wrapper-height-lg: 56px;
 .LuiSearchInput-groupSeparator {
   margin-left: 20px;
   margin-right: 20px;
-  background-color: #C4C4C4;
+  background-color: #c4c4c4;
 }
 
 .LuiSearchInput-resultSeparator {
@@ -164,4 +164,4 @@ $input-wrapper-height-lg: 56px;
 .LuiSearchInput-skeletonItem {
   margin: 9px 0;
   height: 20px;
-}
+}

package/dist/scss/Components/LuiShadow/LuiShadow.scss

@@ -1,4 +1,4 @@
-@use '../../Foundation/Variables/LuiColors' as colors;
+@use '../../Foundation/Variables/ColorVars' as colors;
 @use '../../Foundation/Variables/SpacingVars' as spacing;
 
 // ========================

package/dist/scss/Foundation/Variables/ColorVars.scss

@@ -1,7 +1,156 @@
+@use "sass:color";
+// ============
+// Colours
+// ============
 
-// @use "Colors";
-@forward "LuiColors";
-@forward "ExportCSS";
+// Colours are hard. We've remapped the names in FigLui so that's what's below.
 
-// TODO: remove to avoid :export making it into CSS, here because components expect this to be here
-@forward "ExportColors";
+// ----------------------------
+// Brand
+// ----------------------------
+
+// Blues
+$teal: #00425d;
+$sea: #007198;
+$electric: #0096cc;
+$spray: #73c8e1;
+$polar: #e2f3f7;
+$linz-linear-gradient-blue: linear-gradient(70deg, $teal 12%, $sea 100%);
+
+// Teals
+$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;
+
+// warning
+$warning: #ea6a2e;
+$warning-bg: #fbdfd2;
+$warning-focus: #b33a01;
+
+// info
+$info: #3a7cdf;
+$info-bg: #d8e5f9;
+
+// success
+$success: $pigment;
+$success-bg: $panache;
+
+// text link
+$txt-link: #1f69c3;
+
+$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
+$primary-hover-btn: #005678;
+$primary-active-btn: $teal;
+
+$secondary-hover-btn: $polar;
+$secondary-active-btn: $sea;
+
+$tertiary-hover-btn: $polar;
+$tertiary-active-btn: $sea;
+$tertiary-btn: #f0f;
+
+$green-hover: #107c3a;
+$green-active: #094a22;
+$green-btn: $success;
+
+$error-hover-btn: #8f0000;
+$error-active-btn: #5a0000;
+
+$txt-link: $electric;
+
+//Restricted colours for spatial maps
+$hot-pink: #f81bef;
+
+//Type
+$heading-color: $surfie;
+$heading-color--secondary: $charcoal;
+$base-type-color: $charcoal;
+
+// Icons, inputs & radio/checkboxes
+$input-text: $charcoal;
+$input-placeholder: $fuscous;
+$input-placeholder-when-disabled: $gray;
+$base-icon-color: $sea;
+$disabled-color: $gray;
+$disabled-bg-color: $lily;
+$disabled-color-dark: $fuscous;
+$input-focus: $teal;
+
+//LINZ public site colour variables
+
+$linz-color-primary: #023d48;
+$linz-color-primary-hover: #01818a;
+
+$linz-color-tertiary: #e1e44a;
+$linz-color-tertiary-hover: #cdcf59;

package/dist/scss/Foundation/Variables/{_ExportColors.scss → ExportColors.scss}

@@ -1,4 +1,4 @@
-@use "LuiColors";
+@use "ColorVars" as LuiColors;
 
 // TODO: This should be used for including into components instead of ColorVars.scss
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "17.5.4",
+  "version": "17.5.7",
   "license": "MIT",
   "repository": {
     "type": "git",

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

@@ -1,121 +0,0 @@
-@use 'LuiColors';
-
-$prefix: '--'; // Prefix string for custom CSS properties
-
-// Merges a variable name with $prefix
-@function custom-property-name($name) {
-  @return $prefix + $name;
-}
-
-// Defines a custom property
-@mixin define-custom-property($name, $value) {
-  #{custom-property-name($name)}: $value;
-}
-
-// Append SCSS variables which are desired to be accessible:
-:root {
-  @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
-  );
-
-  // System colours,// System colours
-
-  // reserved colours,// reserved colours
-  @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('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.$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.$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('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

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

@@ -1,157 +0,0 @@
-@use "sass:color";
-// ============
-// Colours
-// ============
-
-// 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%);
-
-// Teals
-$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;
-
-// warning
-$warning: #ea6a2e;
-$warning-bg: #fbdfd2;
-$warning-focus: #b33a01;
-
-// info
-$info: #3a7cdf;
-$info-bg: #d8e5f9;
-
-// success
-$success: $pigment;
-$success-bg: $panache;
-
-// text link
-$txt-link: #1f69c3;
-
-$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
-$primary-hover-btn: #005678;
-$primary-active-btn: $teal;
-
-$secondary-hover-btn: $polar;
-$secondary-active-btn: $sea;
-
-$tertiary-hover-btn: $polar;
-$tertiary-active-btn: $sea;
-$tertiary-btn: #f0f;
-
-$green-hover: #107c3a;
-$green-active: #094A22;
-$green-btn: $success;
-
-$error-hover-btn: #8f0000;
-$error-active-btn: #5a0000;
-
-$txt-link: $electric;
-
-
-//Restricted colours for spatial maps
-$hot-pink: #f81bef;
-
-//Type
-$heading-color: $surfie;
-$heading-color--secondary: $charcoal;
-$base-type-color: $charcoal;
-
-// Icons, inputs & radio/checkboxes
-$input-text: $charcoal;
-$input-placeholder: $fuscous;
-$input-placeholder-when-disabled: $gray;
-$base-icon-color: $sea;
-$disabled-color: $gray;
-$disabled-bg-color: $lily;
-$disabled-color-dark: $fuscous;
-$input-focus: $teal;
-
-//LINZ public site colour variables
-
-$linz-color-primary: #023d48;
-$linz-color-primary-hover: #01818a;
-
-$linz-color-tertiary: #e1e44a;
-$linz-color-tertiary-hover: #cdcf59;