fix: more input fixes for various states: placeholder shown, focus, value, error, disabled

apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css

@@ -1,59 +1,55 @@
 .container {
   align-content: center;
-  background-color: var(--Main-Grey-White);
-  border-color: var(--Scandic-Beige-40);
+  background-color: var(--Surface-Primary-Default);
+  border-color: var(--Border-Interactive-Default);
   border-style: solid;
   border-width: 1px;
   border-radius: var(--Corner-radius-md);
   display: grid;
   min-width: 0; /* allow shrinkage */
   height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
+  padding: var(--Space-x1) var(--Space-x2);
   transition: border-color 200ms ease;
 }
 
 .container:has(.input:focus) {
-  border-color: var(--Scandic-Blue-90);
+  border-color: var(--Border-Interactive-Focus);
 }
 
 .container:has(.input:disabled) {
-  background-color: var(--Main-Grey-10);
+  background-color: var(--Surface-Primary-Disabled);
   border: none;
-  color: var(--Main-Grey-40);
+  color: var(--Text-Interactive-Disabled);
 }
 
 .container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
-  border-color: var(--Scandic-Red-60);
+  border-color: var(--Border-Interactive-Error);
+
+  &:focus-within {
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Error);
+  }
 }
 
 .input {
   background: none;
   border: none;
-  color: var(--Main-Grey-100);
-  height: 18px;
+  color: var(--Text-Default);
+  height: 1px;
   margin: 0;
   order: 2;
   overflow: visible;
   padding: 0;
-}
-
-.container:has(.input:placeholder-shown) {
-  align-content: space-around;
-  gap: var(--Spacing-x-half);
-}
-
-.input:not(:focus):not(:placeholder-shown) {
-  height: 1px;
   transition: height 150ms ease;
 }
 
 .input:focus,
-.input:focus:placeholder-shown {
+.input:placeholder-shown,
+.input[value]:not([value=""]) {
   height: 18px;
-  transition: height 150ms ease;
   outline: none;
 }
 
 .input:disabled {
-  color: var(--Main-Grey-40);
+  color: var(--Text-Interactive-Disabled);
 }

apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css

@@ -1,5 +1,5 @@
 .label {
-  color: var(--UI-Grey-60);
+  color: var(--Text-Interactive-Placeholder);
   font-family: "fira sans";
   font-weight: 400;
   letter-spacing: 0.03px;
@@ -20,7 +20,7 @@ span.regular {
 }
 
 span.discreet {
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Default);
   font-weight: 500;
   order: unset;
 }
@@ -30,31 +30,19 @@ span.required:after {
 }
 
 /* Handle input and textarea fields */
-input:placeholder-shown ~ .label,
-textarea:placeholder-shown ~ .label {
-  display: block;
-  font-size: 12px;
-}
-
 input:focus ~ .label,
-textarea:focus ~ .label {
-  font-size: 12px;
-}
-
 input:placeholder-shown ~ .label,
-textarea:placeholder-shown ~ .label {
-  grid-row: 1/-1;
-}
-
-input:placeholder-shown:focus ~ .label,
-textarea:placeholder-shown.label {
-  margin-bottom: var(--Spacing-x-half);
+input[value]:not([value=""]) ~ .label,
+textarea:focus ~ .label textarea:placeholder-shown ~ .label,
+textarea[value]:not([value=""]) ~ .label {
+  font-size: 12px;
+  margin-bottom: var(--Space-x05);
 }
 
 input:disabled ~ .label,
 textarea:disabled ~ .label,
 :global(.select-container)[data-disabled] .label {
-  color: var(--Main-Grey-40);
+  color: var(--Text-Interactive-Disabled);
 }
 
 /* Handle select fields */
@@ -65,5 +53,5 @@ textarea:disabled ~ .label,
 :global(.select-container)[data-open="true"] .label:not(.discreet),
 :global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
   font-size: 12px;
-  margin-bottom: var(--Spacing-x-half);
+  margin-bottom: var(--Space-x05);
 }