fix: make incomplete steps in accordion look disabled

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -61,6 +61,9 @@ export default function SectionAccordion({
   function onModify() {
     navigate(step)
   }
+
+  const textColor =
+    isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
     <section className={styles.wrapper} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
@@ -78,15 +81,11 @@ export default function SectionAccordion({
               asChild
               textTransform="uppercase"
               type="label"
-              color="uiTextHighContrast"
+              color={textColor}
             >
               <h2>{header}</h2>
             </Footnote>
-            <Subtitle
-              className={styles.selection}
-              type="two"
-              color="uiTextHighContrast"
-            >
+            <Subtitle className={styles.selection} type="two" color={textColor}>
               {title}
             </Subtitle>
 

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx

@@ -81,7 +81,7 @@ export default function PriceList({
               </Body>
             </div>
           ) : (
-            <Subtitle type="two" color="disabled">
+            <Subtitle type="two" color="baseTextDisabled">
               {intl.formatMessage({ id: "n/a" })}
             </Subtitle>
           )}

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -76,3 +76,7 @@
 .white {
   color: var(--Main-Grey-White);
 }
+
+.baseTextDisabled {
+  color: var(--Base-Text-Disabled);
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -18,6 +18,7 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
       white: styles.white,
+      baseTextDisabled: styles.baseTextDisabled,
     },
     textAlign: {
       center: styles.center,

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -79,6 +79,6 @@
   color: var(--Scandic-Brand-Scandic-Red);
 }
 
-.disabled {
+.baseTextDisabled {
   color: var(--Base-Text-Disabled);
 }

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -7,7 +7,7 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
-      disabled: styles.disabled,
+      baseTextDisabled: styles.baseTextDisabled,
       pale: styles.pale,
       baseTextMediumContrast: styles.baseTextMediumContrast,
       uiTextHighContrast: styles.uiTextHighContrast,