From 7ee711bb437da5c86737c7761a18c16b9f1e80df Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Wed, 11 Jun 2025 16:20:23 +0200
Subject: [PATCH] fix: use typography variables instead

explicit since composing is not allowed in nested selectors
---
 .../lib/components/Label/label.module.css     | 55 +++++++++++++++----
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/packages/design-system/lib/components/Label/label.module.css b/packages/design-system/lib/components/Label/label.module.css
index 62fc8991c..c5e6e97bb 100644
--- a/packages/design-system/lib/components/Label/label.module.css
+++ b/packages/design-system/lib/components/Label/label.module.css
@@ -1,21 +1,40 @@
 .label {
-  composes: Body-Paragraph-mdRegular from '../Typography/typography.module.css';
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.5;
+  text-decoration: none;
+
   transition: font-size 100ms ease;
   text-align: left;
   color: var(--Text-Interactive-Placeholder);
   user-select: none;
+}
 
-  &.small {
-    display: block;
-    font-size: 12px;
-  }
-  &.regular {
-    font-size: 16px;
-  }
+.small {
+  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;
 }
 
 .discreet {
-  composes: Body-Supporting-text-caption-smBold from '../Typography/typography.module.css';
+  font-family:
+    var(--Body-Supporting-text-Font-family),
+    var(--Body-Supporting-text-Font-fallback);
+  font-size: var(--Body-Supporting-text-Size);
+  font-weight: var(--Body-Supporting-text-Font-weight-2);
+  letter-spacing: var(--Body-Supporting-text-Letter-spacing);
+  text-transform: unset;
+  line-height: 1.4;
+  text-decoration: none;
+
   color: var(--Text-Default);
   order: unset;
 }
@@ -31,7 +50,14 @@ textarea:focus,
 textarea:placeholder-shown,
 textarea[value]:not([value='']) {
   & ~ .label {
-    font-size: 12px;
+    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);
   }
 }
@@ -45,7 +71,14 @@ textarea:disabled {
 
 @media (hover: hover) {
   input:active:not(:disabled) ~ .label {
-    font-size: 12px;
+    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);
   }
 }