From c476f29512d65133109ed8829366c4f91f1b1f91 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Mon, 16 Jun 2025 14:03:56 +0200
Subject: [PATCH] fix: use exported variable for input height

---
 .../lib/components/Input/input.module.css           |  9 ++++++---
 .../lib/components/Select/select.module.css         | 13 ++++++++-----
 packages/design-system/lib/styles/globals.css       |  3 +++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/lib/components/Input/input.module.css b/packages/design-system/lib/components/Input/input.module.css
index 295aed7a9..b8a0712b0 100644
--- a/packages/design-system/lib/components/Input/input.module.css
+++ b/packages/design-system/lib/components/Input/input.module.css
@@ -1,3 +1,6 @@
+@value globals: "../../styles/globals.css";
+@value inputContainerHeight, inputExpandedHeight from globals;
+
 .container {
   align-content: center;
   background-color: var(--Surface-Primary-Default);
@@ -5,7 +8,7 @@
   border-radius: var(--Corner-radius-md);
   display: grid;
   min-width: 0; /* allow shrinkage */
-  height: 56px;
+  height: inputContainerHeight;
   padding: 0 var(--Space-x15);
   box-sizing: border-box;
   cursor: text;
@@ -43,7 +46,7 @@
   &:focus,
   &:placeholder-shown,
   &[value]:not([value='']) {
-    height: 24px;
+    height: inputExpandedHeight;
     outline: none;
   }
 
@@ -54,7 +57,7 @@
 
 @media (hover: hover) {
   .input:active:not(:disabled) {
-    height: 24px;
+    height: inputExpandedHeight;
     outline: none;
   }
 }
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index 70c0a47f2..4eb4a069d 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -1,9 +1,12 @@
+@value globals: "../../styles/globals.css";
+@value inputContainerHeight, inputExpandedHeight from globals;
+
 .select {
   position: relative;
   background-color: var(--Surface-UI-Fill-Default);
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
-  height: 56px;
+  height: inputContainerHeight;
   box-sizing: border-box;
 
   &[data-required] .label::after {
@@ -15,7 +18,7 @@
     }
 
     .selectedText {
-      min-height: 24px;
+      min-height: inputExpandedHeight;
     }
   }
   &[data-focused] {
@@ -27,7 +30,7 @@
       outline: none;
     }
     .input {
-      min-height: 24px;
+      min-height: inputExpandedHeight;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -84,7 +87,7 @@
   width: 100%;
 
   &[value]:not([value='']) {
-    min-height: 24px;
+    min-height: inputExpandedHeight;
   }
 }
 
@@ -95,7 +98,7 @@
 }
 
 .selectedText:not(:empty) {
-  min-height: 24px;
+  min-height: inputExpandedHeight;
 }
 
 .displayText {
diff --git a/packages/design-system/lib/styles/globals.css b/packages/design-system/lib/styles/globals.css
index cdf901200..90d59ca05 100644
--- a/packages/design-system/lib/styles/globals.css
+++ b/packages/design-system/lib/styles/globals.css
@@ -1,3 +1,6 @@
+@value inputContainerHeight: 56px;
+@value inputExpandedHeight: 24px;
+
 * {
   margin: 0;
 }