@linzjs/lui 11.6.0 → 11.10.0

package/dist/scss/Components/LuiBadge/LuiBadge.scss

@@ -0,0 +1,51 @@
+@use '../../Foundation/Variables/FormVars' as luiForms;
+@use "../../Foundation/Variables/MiscVars.scss" as misc;
+@use "../../Foundation/Variables/ColorVars.scss" as colors;
+@use '../../Foundation/Variables/FontVars.scss' as fonts;
+@use '../../Foundation/Variables/SpacingVars.scss' as spacing;
+@use "../../Foundation/Utilities" as *;
+
+.LuiBadge {
+  @include fonts.font-semibold();
+  color: colors.$fuscous;
+  background: transparent;
+  border: 1px solid colors.$fuscous;
+  border-radius: 4px;
+  display: inline-flex;
+  font-size: rem(12px);
+  line-height: rem(16px);
+  margin-top: 0;
+  padding: {
+    top: spacing.$unit-xxs * 0.5; // 2px
+    right: spacing.$unit-xxs; // 4px
+    bottom: spacing.$unit-xxs * 0.5; //2px
+    left: spacing.$unit-xxs; // 4px
+  }
+}
+
+.LuiBadge--sm {
+  font-size: rem(10px);
+  line-height: rem(14px);
+  padding: {
+    right: spacing.$unit-xxs; // 4px
+    left: spacing.$unit-xxs; // 4px
+  }
+}
+
+.LuiBadge--lg {
+  font-size: rem(14px);
+  line-height: rem(20px);
+  padding: {
+    right: spacing.$unit-xs; // 8px
+    left: spacing.$unit-xs; // 8px
+  }
+}
+
+.LuiBadge--fill {
+  background: colors.$snow;
+}
+
+.LuiBadge--warning {
+  border-color: colors.$warning;
+  color: colors.$warning;
+}

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

@@ -86,4 +86,11 @@
   position: absolute;
   left: 0;
   top: 2px;
+}
+
+.LuiSelect-mandatory {
+  display: inline-block;
+  width: 10px;
+  margin: 0 0 0 -10px;
+  color: luiColors.$error;
 }

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

@@ -2,6 +2,7 @@
 @use '../../../Foundation/Variables/FontVars' as luiFonts;
 @use '../../../Foundation/Utilities/FluidType' as luiFluidType;
 @use '../../../Foundation/Variables/BreakpointVars' as luiBreakpoints;
+@use '../../../Foundation/Variables/LuiColors' as luiColors;
 
 // =============================
 // TextArea
@@ -80,4 +81,11 @@
   position: absolute;
   left: 0;
   top: 2px;
+}
+
+.LuiTextAreaInput-mandatory {
+  display: inline-block;
+  width: 10px;
+  margin: 0 0 0 -10px;
+  color: luiColors.$error;
 }

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

@@ -1,6 +1,13 @@
 @use '../../../Foundation/Variables/FormVars' as luiForms;
 @use '../../../Foundation/Variables/FontVars' as luiFonts;
 @use '../../../Foundation/Variables/LuiColors' as luiColors;
+@use '../../../Foundation/Variables/SpacingVars' as luiSpacing;
+@use '../../../Foundation/Utilities/REM.scss' as rem;
+
+$input-spacing: luiSpacing.$unit-xs; // 8px
+
+$label-font-size: rem.rem(14px);
+$label-line-height: luiSpacing.$unit-md;
 
 .LuiTextInput {
   margin-bottom: 24px;
@@ -11,6 +18,11 @@
 }
 
 .LuiTextInput-label {
+  margin-bottom: $input-spacing;
+  line-height: $label-line-height;
+}
+
+.LuiTextInput-label-text {
   @include luiForms.formLabel;
 }
 
@@ -85,11 +97,12 @@
 }
 
 .LuiTextInput-error {
+  @include luiFonts.font-semibold();
   position: relative;
   color: luiColors.$error;
   text-align: left;
   padding-left: 22px;
-  font-size: 14px;
+  font-size: $label-font-size;
   line-height: 20px;
   margin-top: 2px;
 }
@@ -102,6 +115,8 @@
 
 .LuiTextInput-mandatory {
   display: inline-block;
+  @include luiFonts.font-semibold();
+  font-size: $label-font-size;
   width: 10px;
   margin: 0 0 0 -10px;
   color: luiColors.$error;

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

@@ -64,7 +64,10 @@
   heading-color--secondary: LuiColors.$charcoal;
   base-type-color: LuiColors.$charcoal;
 
-  // Icons & radio/checkboxes
+  // Icons, inputs & radio/checkboxes
+  input-text: LuiColors.$input-text;
+  input-placeholder: LuiColors.$input-placeholder;
+  input-placeholder-when-disabled: LuiColors.$input-placeholder-when-disabled;
   base-icon-color: LuiColors.$sea;
   disabled-color: LuiColors.$gray;
   disabled-color-dark: LuiColors.$fuscous;

package/dist/scss/base.scss

@@ -69,10 +69,11 @@
 @forward "./Components/LuiFormSection/LuiFormSectionHeader.scss";
 @forward "./Components/LuiFormSection/LuiHelpInfo/LuiHelpInfo.scss";
 @forward "./Components/LuiShadow/LuiShadow.scss";
+@forward "./Components/LuiBadge/LuiBadge.scss";
 
 // The following have scss next to the component that is yet to be hooked up with the react implementation
 // LuiTabs
 @forward "./Components/LuiTabs/LuiTabs.scss";
 
 // LuiIcon
-@forward "./Components/LuiIcon/LuiIcons.scss";
+@forward "./Components/LuiIcon/LuiIcons.scss";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "11.6.0",
+  "version": "11.10.0",
   "license": "MIT",
   "repository": {
     "type": "git",