fix: break out css variables

components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css

@@ -1,5 +1,4 @@
 .label {
-  align-self: flex-start;
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);
@@ -9,7 +8,6 @@
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   transition: all 200ms ease;
   width: min(100%, 600px);
-  height: 100%;
 }
 
 .label:hover {

components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx

@@ -1,108 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { privacyPolicy } from "@/constants/currentWebHrefs"
-
-import { CheckIcon } from "@/components/Icons"
-import LoginButton from "@/components/LoginButton"
-import useLang from "@/hooks/useLang"
-
-import Link from "../../Link"
-import Caption from "../../Text/Caption"
-import Footnote from "../../Text/Footnote"
-import Checkbox from "../Checkbox"
-
-import styles from "./joinScandicFriendsCard.module.css"
-
-type JoinScandicFriendsCardProps = {
-  name: string
-  difference: { price: number; currency: string }
-}
-
-export default function JoinScandicFriendsCard({
-  name,
-  difference,
-}: JoinScandicFriendsCardProps) {
-  const lang = useLang()
-  const intl = useIntl()
-
-  const list = [
-    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
-    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
-    { title: intl.formatMessage({ id: "Join at no cost" }) },
-  ]
-
-  return (
-    <div className={styles.cardContainer}>
-      <Checkbox name={name} className={styles.checkBox}>
-        <div>
-          <Caption type="label" textTransform="uppercase" color="red">
-            {intl.formatMessage(
-              {
-                id: "Only pay {amount} {currency}",
-              },
-              {
-                amount: intl.formatNumber(difference.price),
-                currency: difference.currency,
-              }
-            )}
-          </Caption>
-          <Caption
-            type="label"
-            textTransform="uppercase"
-            color="uiTextHighContrast"
-          >
-            {intl.formatMessage({ id: "Join Scandic Friends" })}
-          </Caption>
-        </div>
-      </Checkbox>
-
-      <Footnote color="uiTextHighContrast" className={styles.login}>
-        {intl.formatMessage({ id: "Already a friend?" })}{" "}
-        <LoginButton
-          color="burgundy"
-          position="enter details"
-          trackingId="join-scandic-friends-enter-details"
-          variant="breadcrumb"
-          target="_blank"
-        >
-          {intl.formatMessage({ id: "Log in" })}
-        </LoginButton>
-      </Footnote>
-
-      <div className={styles.list}>
-        {list.map((item) => (
-          <Caption
-            key={item.title}
-            color="uiTextPlaceholder"
-            className={styles.listItem}
-          >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
-          </Caption>
-        ))}
-      </div>
-      <Footnote color="uiTextPlaceholder" className={styles.terms}>
-        {intl.formatMessage<React.ReactNode>(
-          {
-            id: "signup.terms",
-          },
-          {
-            termsLink: (str) => (
-              <Link
-                variant="default"
-                textDecoration="underline"
-                size="tiny"
-                target="_blank"
-                color="uiTextPlaceholder"
-                href={privacyPolicy[lang]}
-              >
-                {str}
-              </Link>
-            ),
-          }
-        )}
-      </Footnote>
-    </div>
-  )
-}

components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -1,55 +0,0 @@
-.cardContainer {
-  align-self: flex-start;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border: 1px solid var(--Base-Border-Subtle);
-  border-radius: var(--Corner-radius-Large);
-  display: grid;
-  gap: var(--Spacing-x-one-and-half);
-  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
-  grid-template-areas:
-    "checkbox"
-    "list"
-    "login"
-    "terms";
-  width: min(100%, 600px);
-}
-
-.login {
-  grid-area: login;
-}
-
-.checkBox {
-  align-self: center;
-  grid-area: checkbox;
-}
-
-.list {
-  display: grid;
-  grid-area: list;
-  gap: var(--Spacing-x1);
-}
-
-.listItem {
-  display: flex;
-}
-
-.terms {
-  border-top: 1px solid var(--Base-Border-Normal);
-  grid-area: terms;
-  padding-top: var(--Spacing-x1);
-}
-
-@media screen and (min-width: 768px) {
-  .cardContainer {
-    grid-template-columns: 1fr auto;
-    gap: var(--Spacing-x2);
-    grid-template-areas:
-      "checkbox login"
-      "list list"
-      "terms terms";
-  }
-  .list {
-    display: flex;
-    gap: var(--Spacing-x1);
-  }
-}

components/TempDesignSystem/Link/link.module.css

@@ -16,7 +16,7 @@
 .breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -24,7 +24,7 @@
 .link.breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */
+  font-weight: 500; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }