From 603c7dd2bfbdf91b5cdfc01ba2e7d0c3e545ecfe Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Fri, 13 Jun 2025 16:23:11 +0200
Subject: [PATCH 1/2] fix: make use of design system label component in select

minor tweaks to make sure input and select behaves consistently
---
 .../lib/components/Input/input.module.css     |  6 ++--
 .../lib/components/Label/Label.tsx            |  9 ++++-
 .../lib/components/Label/label.module.css     | 33 +++++++++----------
 .../lib/components/Label/variants.ts          |  3 ++
 .../lib/components/Select/Select.tsx          | 14 ++++----
 .../lib/components/Select/SelectFilter.tsx    | 17 ++++------
 .../lib/components/Select/select.module.css   | 14 ++++----
 7 files changed, 50 insertions(+), 46 deletions(-)

diff --git a/packages/design-system/lib/components/Input/input.module.css b/packages/design-system/lib/components/Input/input.module.css
index 97add50c7..295aed7a9 100644
--- a/packages/design-system/lib/components/Input/input.module.css
+++ b/packages/design-system/lib/components/Input/input.module.css
@@ -6,7 +6,7 @@
   display: grid;
   min-width: 0; /* allow shrinkage */
   height: 56px;
-  padding: var(--Space-x15);
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
   cursor: text;
 
@@ -43,7 +43,7 @@
   &:focus,
   &:placeholder-shown,
   &[value]:not([value='']) {
-    height: 18px;
+    height: 24px;
     outline: none;
   }
 
@@ -54,7 +54,7 @@
 
 @media (hover: hover) {
   .input:active:not(:disabled) {
-    height: 18px;
+    height: 24px;
     outline: none;
   }
 }
diff --git a/packages/design-system/lib/components/Label/Label.tsx b/packages/design-system/lib/components/Label/Label.tsx
index 9ee9c896e..70dd9aee3 100644
--- a/packages/design-system/lib/components/Label/Label.tsx
+++ b/packages/design-system/lib/components/Label/Label.tsx
@@ -2,11 +2,18 @@ import { labelVariants } from './variants'
 
 import type { LabelProps } from './types'
 
-export function Label({ children, className, required, size }: LabelProps) {
+export function Label({
+  children,
+  className,
+  selected,
+  required,
+  size,
+}: LabelProps) {
   const classNames = labelVariants({
     className,
     size,
     required,
+    selected,
   })
 
   return <span className={classNames}>{children}</span>
diff --git a/packages/design-system/lib/components/Label/label.module.css b/packages/design-system/lib/components/Label/label.module.css
index 6f3c4049a..385d2f5c6 100644
--- a/packages/design-system/lib/components/Label/label.module.css
+++ b/packages/design-system/lib/components/Label/label.module.css
@@ -43,23 +43,22 @@
   content: ' *';
 }
 
-input:focus,
-input:placeholder-shown,
-input[value]:not([value='']),
-textarea:focus,
-textarea:placeholder-shown,
-textarea[value]:not([value='']) {
-  & ~ .label {
-    font-family: var(--Label-Font-family), var(--Label-Font-fallback);
-    font-size: var(--Label-Size);
-    font-weight: var(--Label-Font-weight);
-    letter-spacing: var(--Label-Letter-spacing);
-    text-transform: unset;
-    line-height: 1.5;
-    text-decoration: none;
+input:focus ~ .label,
+input:placeholder-shown ~ .label,
+input[value]:not([value='']) ~ .label,
+textarea:focus ~ .label,
+textarea:placeholder-shown ~ .label,
+textarea[value]:not([value='']) ~ .label,
+.selected {
+  font-family: var(--Label-Font-family), var(--Label-Font-fallback);
+  font-size: var(--Label-Size);
+  font-weight: var(--Label-Font-weight);
+  letter-spacing: var(--Label-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
 
-    margin-bottom: var(--Space-x05);
-  }
+  margin-bottom: var(--Space-x025);
 }
 
 input:disabled,
@@ -79,7 +78,7 @@ textarea:disabled {
     line-height: 1.5;
     text-decoration: none;
 
-    margin-bottom: var(--Space-x05);
+    margin-bottom: var(--Space-x025);
   }
 }
 
diff --git a/packages/design-system/lib/components/Label/variants.ts b/packages/design-system/lib/components/Label/variants.ts
index ee28aab93..53162bc49 100644
--- a/packages/design-system/lib/components/Label/variants.ts
+++ b/packages/design-system/lib/components/Label/variants.ts
@@ -12,6 +12,9 @@ export const labelVariants = cva(styles.label, {
     required: {
       true: styles.required,
     },
+    selected: {
+      true: styles.selected,
+    },
   },
   defaultVariants: {
     size: 'regular',
diff --git a/packages/design-system/lib/components/Select/Select.tsx b/packages/design-system/lib/components/Select/Select.tsx
index 409b6d9de..92e574798 100644
--- a/packages/design-system/lib/components/Select/Select.tsx
+++ b/packages/design-system/lib/components/Select/Select.tsx
@@ -16,6 +16,7 @@ import type { SelectProps, SelectFilterProps } from './types'
 
 import styles from './select.module.css'
 import { useState } from 'react'
+import { Label } from '../Label'
 
 export function Select({
   name,
@@ -64,15 +65,12 @@ export function Select({
           {({ selectedText }) => {
             return (
               <>
-                <Typography
-                  variant={
-                    selectedText || isOpen
-                      ? 'Label/xsRegular'
-                      : 'Body/Paragraph/mdRegular'
-                  }
+                <Label
+                  className={styles.label}
+                  selected={Boolean(selectedText || isOpen)}
                 >
-                  <span className={styles.label}>{label}</span>
-                </Typography>
+                  {label}
+                </Label>
                 <Typography variant="Body/Paragraph/mdRegular">
                   <span className={styles.selectedText}>{selectedText}</span>
                 </Typography>
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index 7c80e1b4a..bb958efa1 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -7,7 +7,7 @@ import {
   Key,
   ListBox,
   Popover,
-  Label,
+  Label as AriaLabel,
   ComboBoxStateContext,
 } from 'react-aria-components'
 import {
@@ -26,6 +26,7 @@ import { SelectItem } from './SelectItem'
 import type { SelectFilterProps } from './types'
 
 import styles from './select.module.css'
+import { Label } from '../Label'
 
 /**
  * ComboBoxInner
@@ -124,7 +125,7 @@ export function SelectFilter({
       {...props}
     >
       <ComboBoxInner inputRef={inputRef}>
-        <Label>
+        <AriaLabel>
           {icon ? (
             <MaterialIcon
               icon={icon}
@@ -135,13 +136,9 @@ export function SelectFilter({
           ) : null}
 
           <span className={styles.displayText}>
-            <Typography
-              variant={
-                focus || value ? 'Label/xsRegular' : 'Body/Paragraph/mdRegular'
-              }
-            >
-              <span className={styles.label}>{label}</span>
-            </Typography>
+            <Label className={styles.label} selected={Boolean(focus || value)}>
+              {label}
+            </Label>
             <Typography variant="Body/Paragraph/mdRegular">
               <Input
                 ref={inputRef}
@@ -151,7 +148,7 @@ export function SelectFilter({
               />
             </Typography>
           </span>
-        </Label>
+        </AriaLabel>
         <Button className={styles.button}>
           <MaterialIcon
             icon="chevron_right"
diff --git a/packages/design-system/lib/components/Select/select.module.css b/packages/design-system/lib/components/Select/select.module.css
index 539b6ea8e..70c0a47f2 100644
--- a/packages/design-system/lib/components/Select/select.module.css
+++ b/packages/design-system/lib/components/Select/select.module.css
@@ -4,6 +4,7 @@
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   height: 56px;
+  box-sizing: border-box;
 
   &[data-required] .label::after {
     content: ' *';
@@ -14,7 +15,7 @@
     }
 
     .selectedText {
-      min-height: 18px;
+      min-height: 24px;
     }
   }
   &[data-focused] {
@@ -26,7 +27,7 @@
       outline: none;
     }
     .input {
-      min-height: 18px;
+      min-height: 24px;
     }
     .label {
       color: var(--Text-Interactive-Focus);
@@ -58,8 +59,8 @@
   align-items: center;
   gap: var(--Space-x1);
   width: 100%;
-  height: 56px;
-  padding: var(--Space-x15);
+  height: 100%;
+  padding: 0 var(--Space-x15);
   box-sizing: border-box;
 
   .button {
@@ -83,7 +84,7 @@
   width: 100%;
 
   &[value]:not([value='']) {
-    min-height: 18px;
+    min-height: 24px;
   }
 }
 
@@ -94,13 +95,12 @@
 }
 
 .selectedText:not(:empty) {
-  min-height: 18px;
+  min-height: 24px;
 }
 
 .displayText {
   display: flex;
   flex-direction: column;
-  gap: calc(var(--Space-x05) / 2);
   flex: 1;
   justify-content: center;
   height: 100%;

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 2/2] 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;
 }