refactor: move divider to design system

remove not used variants and duplicate colors

apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx

@@ -5,6 +5,7 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -13,7 +14,6 @@ import { PaymentMethodEnum } from "@/constants/booking"
 import MySavedCards from "@/components/HotelReservation/MySavedCards"
 import PaymentOption from "@/components/HotelReservation/PaymentOption"
 import Modal from "@/components/Modal"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 
 import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
@@ -102,7 +102,7 @@ export default function ConfirmBooking({
             </div>
           </Modal>
         </div>
-        <Divider color="subtle" />
+        <Divider />
         <Typography variant="Body/Supporting text (caption)/smRegular">
           <p>
             {intl.formatMessage({

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -9,10 +9,10 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -168,7 +168,7 @@ export default function PriceChangeSummary({
                               </div>
                             ))}
                           </div>
-                          <Divider color="primaryLightSubtle" />
+                          <Divider color="Border/Divider/Subtle" />
                         </Fragment>
                       )
                     })}

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { Button } from "@scandic-hotels/design-system/Button"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { dt } from "@/lib/dt"
@@ -13,7 +14,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -126,7 +126,7 @@ export default function SummaryUI({
           color="CurrentColor"
         />
       </header>
-      <Divider color="primaryLightSubtle" />
+      <Divider color="Border/Divider/Subtle" />
       {rooms.map(({ room }, idx) => {
         const roomNumber = idx + 1
         const adults = room.adults
@@ -353,7 +353,7 @@ export default function SummaryUI({
                 nights={nights}
               />
             </div>
-            <Divider color="primaryLightSubtle" />
+            <Divider color="Border/Divider/Subtle" />
           </Fragment>
         )
       })}
@@ -422,7 +422,10 @@ export default function SummaryUI({
           isBreakfastIncluded={isAllBreakfastIncluded}
           alignCenter
         />
-        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
+        <Divider
+          className={styles.bottomDivider}
+          color="Border/Divider/Subtle"
+        />
       </div>
       {showSignupPromo && roomOneMemberPrice && !isMember ? (
         <SignupPromoDesktop