diff --git a/apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css b/apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css index 7f039aed6..e1e342dfb 100644 --- a/apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css +++ b/apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css @@ -1,3 +1,4 @@ .layout { - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); } diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css index cf31d6d3b..631dbc359 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css @@ -4,7 +4,8 @@ .layout { display: grid; - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); grid-template-rows: auto 1fr; min-height: 100dvh; max-width: var(--max-width-page); diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css index 99838eb26..ae59068a3 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css +++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css @@ -1,6 +1,7 @@ .layout { display: grid; - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); grid-template-rows: auto 1fr; position: relative; } diff --git a/apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css b/apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css index 7f039aed6..e1e342dfb 100644 --- a/apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css +++ b/apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css @@ -1,3 +1,4 @@ .layout { - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); } diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx index 20d042821..542cf96bb 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx @@ -1,9 +1,8 @@ import { redirect } from "next/navigation" import { z } from "zod" -import Footnote from "@scandic-hotels/design-system/Footnote" import Image from "@scandic-hotels/design-system/Image" -import Link from "@scandic-hotels/design-system/OldDSLink" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { env } from "@/env/server" @@ -94,27 +93,24 @@ export default async function SASxScandicLoginPage( {intentDescriptions[parsedParams.intent]}

- - {intl.formatMessage( - { - id: "linkEuroBonusAccount.manualRedirectLinkMessage", - defaultMessage: - "If you are not redirected automatically, please click here.", - }, - { - loginLink: (str) => ( - - {str} - - ), - } - )} - + +

+ {intl.formatMessage( + { + id: "linkEuroBonusAccount.manualRedirectLinkMessage", + defaultMessage: + "If you are not redirected automatically, please click here.", + }, + { + loginLink: (str) => ( + + {str} + + ), + } + )} +

+ ) } diff --git a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css index 8cd3dc88c..90c4423eb 100644 --- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css +++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css @@ -42,7 +42,8 @@ width: 34px; height: 0px; padding: var(--Space-x3) 0; - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); border: 1px solid var(--Base-Border-Normal); border-radius: var(--Corner-Radius-md); text-align: center; diff --git a/apps/scandic-web/app/[lang]/webview/layout.module.css b/apps/scandic-web/app/[lang]/webview/layout.module.css index 54d4f69e4..70c4ec991 100644 --- a/apps/scandic-web/app/[lang]/webview/layout.module.css +++ b/apps/scandic-web/app/[lang]/webview/layout.module.css @@ -1,5 +1,6 @@ .layout { background-color: var(--Background-Primary); - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); min-height: 100dvh; } diff --git a/apps/scandic-web/app/not-found.module.css b/apps/scandic-web/app/not-found.module.css index 7f039aed6..e1e342dfb 100644 --- a/apps/scandic-web/app/not-found.module.css +++ b/apps/scandic-web/app/not-found.module.css @@ -1,3 +1,4 @@ .layout { - font-family: var(--typography-Body-Regular-fontFamily); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css index a97a4ed7b..ec913a364 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css @@ -16,18 +16,14 @@ .iconTh { padding: var(--Space-x5) var(--Space-x2) var(--Space-x2); - font-weight: var(--typography-Caption-Regular-fontWeight); vertical-align: bottom; } .summaryTh { - font-size: var(--typography-Caption-Regular-fontSize); - font-weight: var(--typography-Caption-Regular-fontWeight); padding: 0 var(--Space-x2) var(--Space-x2); vertical-align: top; } .select { - font-weight: var(--typography-Caption-Regular-fontWeight); padding: 0 var(--Space-x2) var(--Space-x2); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx index 778f70683..74d5dc55c 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx @@ -1,3 +1,5 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + import MembershipLevelIcon from "@/components/Levels/Icon" import LevelSummary from "../../LevelSummary" @@ -37,12 +39,14 @@ export default function DesktopHeader({ {levels.map((level, idx) => { return ( - - - + + + + ) })} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx index 9b5de3fd4..da10ebc24 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx @@ -82,10 +82,12 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) { -

+ +

+ ) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css index 7cdbdeb9f..ccfdb3654 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css @@ -15,14 +15,11 @@ } .td { - font-size: var(--typography-Footnote-Regular-fontSize); text-align: center; } .rewardTh { padding: var(--Space-x3) var(--Space-x2); - font-size: var(--typography-Caption-Regular-fontSize); - font-weight: var(--typography-Caption-Regular-fontWeight); } .details[open] .chevron { diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx index c092275f3..fe907a8ea 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx @@ -1,5 +1,7 @@ import { useIntl } from "react-intl" +import { Typography } from "@scandic-hotels/design-system/Typography" + import styles from "./levelSummary.module.css" import type { LevelSummaryProps } from "@/types/components/overviewTable" @@ -32,7 +34,9 @@ export default function LevelSummary({ return (

- {pointsMsg} + + {pointsMsg} + {showDescription && (

{level.description}

)} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css index 4d4a4290d..bc619b7bc 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css @@ -8,16 +8,14 @@ .levelRequirements { border-radius: var(--Corner-Radius-md); - background-color: var(--Scandic-Brand-Pale-Peach); - color: var(--Scandic-Peach-80); + background-color: var(--Surface-Brand-Primary-1-Default); + color: var(--Text-Interactive-Secondary); padding: var(--Space-x05) var(--Space-x1); text-align: center; width: 100%; } .levelSummaryText { - font-size: var(--typography-Caption-Regular-fontSize); - line-height: var(--typography-Body-Regular-lineHeight); margin: 0; } @@ -26,12 +24,3 @@ padding: var(--Space-x05) var(--Space-x1); } } -@media screen and (min-width: 1367px) { - .levelRequirements { - font-size: var(--typography-Footnote-Regular-fontSize); - } - - .levelSummaryText { - font-size: var(--typography-Caption-Regular-fontSize); - } -} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx index 47c3ef1e0..4c601d58a 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx @@ -27,10 +27,12 @@ export default function RewardCard({ -

+ +

+

diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css index c18ab3be2..1fbf33a19 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css @@ -12,8 +12,6 @@ } .rewardCardDescription { - font-size: var(--typography-Caption-Regular-fontSize); - line-height: 150%; padding-right: var(--Space-x4); } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx index 422a821f8..3a778b8d5 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx @@ -1,6 +1,7 @@ import { Minus } from "react-feather" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./rewardValue.module.css" @@ -21,8 +22,8 @@ export default function RewardValue({ reward }: RewardValueProps) { ) } return ( -
- {reward.value} -
+ +
{reward.value}
+ ) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css index 6ffd5e9bb..d3ba44be6 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css +++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css @@ -7,17 +7,6 @@ text-wrap: balance; } -.rewardValue { - font-size: var(--typography-Body-Bold-fontSize); - font-weight: var(--typography-Body-Bold-fontWeight); -} - -.rewardValueDetails { - font-size: var(--typography-Footnote-Regular-fontSize); - text-align: center; - color: var(--UI-Grey-80); -} - .checkIcon { display: inline-flex; } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx index 7668823da..ba52e4d4d 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx @@ -10,6 +10,7 @@ import { useMediaQuery } from "usehooks-ts" import { useMarkerHover } from "@scandic-hotels/common/hooks/map/useMarkerHover" import { InfoWindow } from "@scandic-hotels/design-system/Map/InfoWindow" +import { Typography } from "@scandic-hotels/design-system/Typography" import { useDestinationPageCitiesMapStore } from "@/stores/destination-page-cities-map" @@ -79,7 +80,10 @@ export default function CityClusterMarker({ })} anchorPoint={AdvancedMarkerAnchorPoint.CENTER} > - {sizeAsText} + + {sizeAsText} + + {isDesktop && isHovered ? ( - -

{contact.display_text}

- - +

{contact.display_text}

+ + ) : null} + {Icon ? : null} {val} - - {footnote && {footnote}} + + {footnote && ( + +

{footnote}

+ + )}
) } diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css index f583bc9ac..7e37b2deb 100644 --- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css +++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css @@ -13,18 +13,9 @@ gap: var(--Space-x15); } -.contact > div { - display: flex; - justify-content: center; -} - @media screen and (min-width: 1367px) { .contactContainer { align-items: start; padding-top: var(--Space-x2); } - - .contact > div { - justify-content: start; - } } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx index 53d8d6d0f..1c82cc0de 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx @@ -1,13 +1,11 @@ -import Footnote from "@scandic-hotels/design-system/Footnote" +import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./list.module.css" export default function Label({ children }: React.PropsWithChildren) { return ( -
  • - - {children} - -
    • + +
  • {children}
    • +     ) } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css index 04a267032..46ef18dbe 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css @@ -5,5 +5,6 @@ } .label { - padding: 0 var(--Space-x1); + padding: 0 var(--Space-x1) var(--Space-x05); + color: var(--Text-Tertiary); } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx index de7dfd28e..789822b1f 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx @@ -6,7 +6,6 @@ import { useIntl } from "react-intl" import { useDebounceValue } from "usehooks-ts" import { Divider } from "@scandic-hotels/design-system/Divider" -import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" @@ -192,16 +191,14 @@ export default function SearchList({ {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && ( <> - - {intl.formatMessage({ - id: "bookingWidget.searchList.latestSearches", - defaultMessage: "Latest searches", - })} - + +

    + {intl.formatMessage({ + id: "bookingWidget.searchList.latestSearches", + defaultMessage: "Latest searches", + })} +

    +     - - {intl.formatMessage({ - id: "bookingWidget.searchList.latestSearches", - defaultMessage: "Latest searches", - })} - + +

    + {intl.formatMessage({ + id: "bookingWidget.searchList.latestSearches", + defaultMessage: "Latest searches", + })} +

    +     -
    - + +

    {intl.formatMessage( { id: "enterDetails.joinScandicFriendsCard.terms", @@ -93,19 +92,18 @@ export default function JoinScandicFriendsCard({ }, { termsAndConditionsLink: (str) => ( - {str} - + ), } )} - -

    +

    + ) } diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css index 53a12f7d3..33282a34b 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css @@ -28,6 +28,7 @@ .terms { grid-area: terms; + color: var(--Text-Secondary); } @media screen and (min-width: 768px) { diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx index 10e9fa32b..8824e9eca 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx @@ -4,9 +4,8 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" -import Footnote from "@scandic-hotels/design-system/Footnote" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" -import Link from "@scandic-hotels/design-system/OldDSLink" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext" @@ -97,8 +96,8 @@ export function PartnerSASJoinScandicFriendsCard({ /> -
    - + +

    {intl.formatMessage( { id: "enterDetails.joinScandicFriendsCard.terms", @@ -107,19 +106,18 @@ export function PartnerSASJoinScandicFriendsCard({ }, { termsAndConditionsLink: (str) => ( - {str} - + ), } )} - -

    +

    + ) } diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css index 0d08ea31c..247a93351 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css @@ -31,6 +31,7 @@ .terms { grid-area: terms; + color: var(--Text-Secondary); } @media screen and (min-width: 768px) { diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx index 6b5634dab..90e6c7e7d 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx @@ -4,10 +4,9 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" -import Footnote from "@scandic-hotels/design-system/Footnote" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" import { LoginButton } from "@scandic-hotels/design-system/LoginButton" -import Link from "@scandic-hotels/design-system/OldDSLink" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { trackEvent } from "@scandic-hotels/tracking/base" import { trackLoginClick } from "@scandic-hotels/tracking/navigation" @@ -101,8 +100,8 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) { })} -
    - + +

    {intl.formatMessage( { id: "enterDetails.joinScandicFriendsCard.terms", @@ -111,19 +110,18 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) { }, { termsAndConditionsLink: (str) => ( - {str} - + ), } )} - -

    +

    + ) } diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css index d0f9cbefd..075ff9acd 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css @@ -34,6 +34,7 @@ .terms { grid-area: terms; + color: var(--Text-Secondary); } @media screen and (min-width: 768px) { diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx index ba2f4218f..6089ec020 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx @@ -4,9 +4,8 @@ import { useIntl } from "react-intl" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" -import Footnote from "@scandic-hotels/design-system/Footnote" import Checkbox from "@scandic-hotels/design-system/Form/Checkbox" -import Link from "@scandic-hotels/design-system/OldDSLink" +import { TextLink } from "@scandic-hotels/design-system/TextLink" import { Typography } from "@scandic-hotels/design-system/Typography" import { trpc } from "@scandic-hotels/trpc/client" @@ -94,8 +93,8 @@ export function PartnerSASJoinScandicFriendsCard({ /> -
    - + +

    {intl.formatMessage( { id: "enterDetails.joinScandicFriendsCard.terms", @@ -104,19 +103,18 @@ export function PartnerSASJoinScandicFriendsCard({ }, { termsAndConditionsLink: (str) => ( - {str} - + ), } )} - -

    +

    + ) } diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css index 0d08ea31c..247a93351 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css @@ -31,6 +31,7 @@ .terms { grid-area: terms; + color: var(--Text-Secondary); } @media screen and (min-width: 768px) { diff --git a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx b/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx index d3a9fde57..487200469 100644 --- a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx @@ -6,7 +6,6 @@ import { useIntl } from "react-intl" import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation" import { Button } from "@scandic-hotels/design-system/Button" -import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers" @@ -47,20 +46,14 @@ export default function SelectedRoom() {
    - -

    + +

    {intl.formatMessage({ id: "common.room", defaultMessage: "Room", })}

    - +     {badgeContent && {badgeContent}} - - - + +

    + +

    +

    ) : null } diff --git a/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx b/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx index 1531bcd04..e27a07c38 100644 --- a/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx +++ b/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx @@ -2,7 +2,7 @@ import { useIntl } from "react-intl" -import Footnote from "@scandic-hotels/design-system/Footnote" +import { Typography } from "@scandic-hotels/design-system/Typography" import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext" @@ -14,9 +14,11 @@ export default function SignupPromoMobile() { data-footer-spacing-signup className={styles.memberDiscountBannerMobile} > - - - + +

    + +

    +
    ) } diff --git a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css index 629dfe753..6d2e65bf1 100644 --- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css +++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css @@ -5,6 +5,7 @@ display: flex; align-items: center; justify-content: center; + color: var(--Text-Default); } .memberDiscountBannerDesktop { @@ -16,10 +17,11 @@ padding: var(--Space-x15) var(--Space-x2); gap: var(--Space-x2); position: relative; + color: var(--Text-Default); } .red { - color: var(--Text-Accent-Primary); + color: var(--Scandic-Brand-Scandic-Red); } .badge { diff --git a/packages/design-system/lib/components/Footnote/footnote.module.css b/packages/design-system/lib/components/Footnote/footnote.module.css deleted file mode 100644 index cddf0ef0d..000000000 --- a/packages/design-system/lib/components/Footnote/footnote.module.css +++ /dev/null @@ -1,82 +0,0 @@ -.footnote { - margin: 0; - padding: 0; -} - -.footnoteFontOnly { - font-style: normal; -} - -.bold { - font-family: var(--typography-Footnote-Bold-fontFamily); - font-size: var(--typography-Footnote-Bold-fontSize); - font-weight: var(--typography-Footnote-Bold-fontWeight); - letter-spacing: var(--typography-Footnote-Bold-letterSpacing); - line-height: var(--typography-Footnote-Bold-lineHeight); - text-decoration: var(--typography-Footnote-Bold-textDecoration); -} - -.regular { - font-family: var(--typography-Footnote-Regular-fontFamily); - font-size: var(--typography-Footnote-Regular-fontSize); - font-weight: var(--typography-Footnote-Regular-fontWeight); - letter-spacing: var(--typography-Footnote-Regular-letterSpacing); - line-height: var(--typography-Footnote-Regular-lineHeight); - text-decoration: var(--typography-Footnote-Regular-textDecoration); -} - -.labels { - font-family: var(--typography-Footnote-Labels-fontFamily); - font-size: var(--typography-Footnote-Labels-fontSize); - font-weight: var(--typography-Footnote-Labels-fontWeight); - letter-spacing: var(--typography-Footnote-Labels-letterSpacing); - line-height: var(--typography-Footnote-Labels-lineHeight); - text-decoration: var(--typography-Footnote-Labels-textDecoration); -} - -.uppercase { - text-transform: uppercase; -} - -.center { - text-align: center; -} - -.left { - text-align: left; -} - -.black { - color: var(--Main-Grey-100); -} - -.burgundy { - color: var(--Scandic-Brand-Burgundy); -} - -.pale { - color: var(--Scandic-Brand-Pale-Peach); -} - -.peach50 { - color: var(--Scandic-Peach-50); -} - -.uiTextMediumContrast { - color: var(--UI-Text-Medium-contrast); -} - -.uiTextHighContrast { - color: var(--UI-Text-High-contrast); -} -.uiTextPlaceholder { - color: var(--UI-Text-Placeholder); -} - -.white { - color: var(--Main-Grey-White); -} - -.baseTextDisabled { - color: var(--Base-Text-Disabled); -} diff --git a/packages/design-system/lib/components/Footnote/index.tsx b/packages/design-system/lib/components/Footnote/index.tsx deleted file mode 100644 index f76237c37..000000000 --- a/packages/design-system/lib/components/Footnote/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { Slot } from "@radix-ui/react-slot" - -import { footnoteFontOnlyVariants, footnoteVariants } from "./variants" - -import type { VariantProps } from "class-variance-authority" - -interface FootnoteProps - extends - Omit, "color">, - VariantProps { - asChild?: boolean - fontOnly?: boolean -} - -/** - * @deprecated Use `@scandic-hotels/design-system/Typography` instead. - */ -export default function Footnote({ - asChild = false, - className = "", - color, - fontOnly = false, - textAlign, - textTransform, - type, - ...props -}: FootnoteProps) { - const Comp = asChild ? Slot : "p" - const classNames = fontOnly - ? footnoteFontOnlyVariants({ - className, - textAlign, - textTransform, - type, - }) - : footnoteVariants({ - className, - color, - textAlign, - textTransform, - type, - }) - return -} diff --git a/packages/design-system/lib/components/Footnote/variants.ts b/packages/design-system/lib/components/Footnote/variants.ts deleted file mode 100644 index a7595df73..000000000 --- a/packages/design-system/lib/components/Footnote/variants.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { cva } from "class-variance-authority" - -import styles from "./footnote.module.css" - -const config = { - variants: { - type: { - regular: styles.regular, - bold: styles.bold, - label: styles.labels, - }, - color: { - black: styles.black, - burgundy: styles.burgundy, - pale: styles.pale, - peach50: styles.peach50, - uiTextMediumContrast: styles.uiTextMediumContrast, - uiTextHighContrast: styles.uiTextHighContrast, - uiTextPlaceholder: styles.uiTextPlaceholder, - white: styles.white, - baseTextDisabled: styles.baseTextDisabled, - }, - textAlign: { - center: styles.center, - left: styles.left, - }, - textTransform: { - uppercase: styles.uppercase, - }, - }, - defaultVariants: { - type: "regular", - }, -} as const - -export const footnoteVariants = cva(styles.footnote, config) - -const fontOnlyConfig = { - variants: { - type: { - regular: styles.regular, - bold: styles.bold, - label: styles.labels, - }, - textAlign: { - center: styles.center, - left: styles.left, - }, - textTransform: { - uppercase: styles.uppercase, - }, - }, - defaultVariants: { - type: "regular", - }, -} as const - -export const footnoteFontOnlyVariants = cva( - styles.footnoteFontOnly, - fontOnlyConfig -) diff --git a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css index ccd53976a..9339b626f 100644 --- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css +++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css @@ -35,8 +35,3 @@ justify-content: start; align-items: baseline; } - -.perNight { - font-weight: 400; - font-size: var(--typography-Caption-Regular-fontSize); -} diff --git a/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx b/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx index fafd0ef96..61779ea1d 100644 --- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx +++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx @@ -1,8 +1,8 @@ import { cx } from "class-variance-authority" import { useIntl } from "react-intl" -import { Divider } from "../../Divider" import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType" +import { Divider } from "../../Divider" import { Typography } from "../../Typography" import styles from "./hotelPriceCard.module.css" @@ -117,14 +117,16 @@ export function HotelPriceCard({ >

    {productTypePrices.localPrice.currency} - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - - / - {intl.formatMessage({ - id: "common.night", - defaultMessage: "night", - })} - + + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + + / + {intl.formatMessage({ + id: "common.night", + defaultMessage: "night", + })} + +

    diff --git a/packages/design-system/lib/components/OldDSLink/link.module.css b/packages/design-system/lib/components/OldDSLink/link.module.css index 181ebfda9..bec6176e2 100644 --- a/packages/design-system/lib/components/OldDSLink/link.module.css +++ b/packages/design-system/lib/components/OldDSLink/link.module.css @@ -50,30 +50,15 @@ gap: var(--Space-x05); } -.breadcrumb { - font-family: var(--typography-Footnote-Bold-fontFamily); - font-size: var(--typography-Footnote-Bold-fontSize); - font-weight: 500; - letter-spacing: var(--typography-Footnote-Bold-letterSpacing); - line-height: var(--typography-Footnote-Bold-lineHeight); -} - -.link.breadcrumb { - font-family: var(--typography-Footnote-Bold-fontFamily); - font-size: var(--typography-Footnote-Bold-fontSize); - font-weight: 500; - letter-spacing: var(--typography-Footnote-Bold-letterSpacing); - line-height: var(--typography-Footnote-Bold-lineHeight); -} - .myPageMobileDropdown { display: flex; align-items: center; color: var(--Scandic-Brand-Burgundy); - font-family: var(--typography-Body-Regular-fontFamily); - font-size: var(--typography-Body-Regular-fontSize); - line-height: var(--typography-Body-Regular-lineHeight); - letter-spacing: var(--typography-Body-Regular-letterSpacing); + font-family: + var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback); + font-size: var(--Body-Paragraph-Size); + line-height: 1.5; + letter-spacing: var(--Body-Paragraph-Letter-spacing); padding: var(--Space-x1); border-radius: var(--Corner-Radius-md); gap: var(--Space-x1); @@ -97,11 +82,12 @@ .shortcut { display: grid; align-items: center; - font-family: var(--typography-Body-Regular-fontFamily); - font-size: var(--typography-Body-Regular-fontSize); - font-weight: var(--typography-Body-Regular-fontWeight); - letter-spacing: var(--typography-Body-Regular-letterSpacing); - line-height: var(--typography-Body-Regular-lineHeight); + 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); + line-height: 1.5; gap: var(--Space-x2); grid-template-columns: 1fr auto; padding: var(--Space-x2) var(--Space-x3); @@ -133,22 +119,13 @@ line-height: 140%; } -/* Tiny should be removed, it's not a variant of the Link*/ -.tiny { - font-family: var(--typography-Footnote-Regular-fontFamily); - font-size: var(--typography-Footnote-Regular-fontSize); - font-weight: var(--typography-Footnote-Regular-fontWeight); - letter-spacing: var(--typography-Footnote-Regular-letterSpacing); - line-height: var(--typography-Footnote-Regular-lineHeight); -} - .bold { - font-family: var(--typography-Body-Bold-fontFamily); - font-size: var(--typography-Body-Bold-fontSize); - font-weight: 500 - /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */; - letter-spacing: var(--typography-Body-Bold-letterSpacing); - line-height: var(--typography-Body-Bold-lineHeight); + 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-2); + letter-spacing: var(--Body-Paragraph-Letter-spacing); + line-height: 1.5; } .menu { diff --git a/packages/design-system/lib/components/OldDSLink/variants.ts b/packages/design-system/lib/components/OldDSLink/variants.ts index 3edb79c02..847227a78 100644 --- a/packages/design-system/lib/components/OldDSLink/variants.ts +++ b/packages/design-system/lib/components/OldDSLink/variants.ts @@ -18,7 +18,6 @@ export const linkVariants = cva(styles.link, { size: { small: styles.small, large: styles.large, - tiny: styles.tiny, none: "", }, textDecoration: { @@ -29,7 +28,6 @@ export const linkVariants = cva(styles.link, { }, variant: { icon: styles.icon, - breadcrumb: styles.breadcrumb, myPageMobileDropdown: styles.myPageMobileDropdown, navigation: styles.navigation, menu: styles.menu, diff --git a/packages/design-system/lib/design-system-new-deprecated.css b/packages/design-system/lib/design-system-new-deprecated.css index 7ba0f6952..e8232e429 100644 --- a/packages/design-system/lib/design-system-new-deprecated.css +++ b/packages/design-system/lib/design-system-new-deprecated.css @@ -1,131 +1,3 @@ -:root { - --typography-Body-Bold-fontFamily: "fira sans"; - --typography-Body-Bold-fontSize: 16px; - --typography-Body-Bold-fontWeight: "medium"; - --typography-Body-Bold-letterSpacing: 1.2000000476837158%; - --typography-Body-Bold-lineHeight: 150%; - --typography-Body-Bold-textDecoration: "none"; - --typography-Body-Regular-fontFamily: "fira sans"; - --typography-Body-Regular-fontSize: 16px; - --typography-Body-Regular-fontWeight: "regular"; - --typography-Body-Regular-letterSpacing: 1.2000000476837158%; - --typography-Body-Regular-lineHeight: 150%; - --typography-Body-Regular-textDecoration: "none"; - --typography-Body-Underline-fontFamily: "fira sans"; - --typography-Body-Underline-fontSize: 16px; - --typography-Body-Underline-letterSpacing: 1.2000000476837158%; - --typography-Body-Underline-lineHeight: 150%; - --typography-Body-Underline-textDecoration: "underline"; - --typography-Caption-Bold-fontFamily: "fira sans"; - --typography-Caption-Bold-fontSize: 14px; - --typography-Caption-Bold-fontWeight: "medium"; - --typography-Caption-Bold-letterSpacing: 1.399999976158142%; - --typography-Caption-Bold-lineHeight: 139.9999976158142%; - --typography-Caption-Bold-textDecoration: "none"; - --typography-Caption-Labels-fontFamily: "brandon text"; - --typography-Caption-Labels-fontSize: 14px; - --typography-Caption-Labels-fontWeight: "bold"; - --typography-Caption-Labels-letterSpacing: 1.399999976158142%; - --typography-Caption-Labels-lineHeight: 150%; - --typography-Caption-Labels-textDecoration: "none"; - --typography-Caption-Regular-fontFamily: "fira sans"; - --typography-Caption-Regular-fontSize: 14px; - --typography-Caption-Regular-fontWeight: "regular"; - --typography-Caption-Regular-letterSpacing: 1.399999976158142%; - --typography-Caption-Regular-lineHeight: 139.9999976158142%; - --typography-Caption-Regular-textDecoration: "none"; - --typography-Caption-Underline-fontFamily: "fira sans"; - --typography-Caption-Underline-fontSize: 14px; - --typography-Caption-Underline-fontWeight: "medium"; - --typography-Caption-Underline-letterSpacing: 1.399999976158142%; - --typography-Caption-Underline-lineHeight: 139.9999976158142%; - --typography-Caption-Underline-textDecoration: "underline"; - --typography-Footnote-Bold-fontFamily: "fira sans"; - --typography-Footnote-Bold-fontSize: 12px; - --typography-Footnote-Bold-fontWeight: "medium"; - --typography-Footnote-Bold-letterSpacing: 1.399999976158142%; - --typography-Footnote-Bold-lineHeight: 150%; - --typography-Footnote-Bold-textDecoration: "none"; - --typography-Footnote-Labels-fontFamily: "brandon text"; - --typography-Footnote-Labels-fontSize: 12px; - --typography-Footnote-Labels-fontWeight: "bold"; - --typography-Footnote-Labels-letterSpacing: 1.399999976158142%; - --typography-Footnote-Labels-lineHeight: 150%; - --typography-Footnote-Labels-textDecoration: "none"; - --typography-Footnote-Regular-fontFamily: "fira sans"; - --typography-Footnote-Regular-fontSize: 12px; - --typography-Footnote-Regular-fontWeight: "regular"; - --typography-Footnote-Regular-letterSpacing: 1.399999976158142%; - --typography-Footnote-Regular-lineHeight: 150%; - --typography-Footnote-Regular-textDecoration: "none"; - --typography-Preamble-Desktop-fontSize: 20px; - --typography-Preamble-fontFamily: "fira sans"; - --typography-Preamble-fontWeight: "regular"; - --typography-Preamble-letterSpacing: 1%; - --typography-Preamble-lineHeight: 139.9999976158142%; - --typography-Preamble-Mobile-fontSize: 18px; - --typography-Preamble-textDecoration: "none"; - --typography-Script-1-Desktop-fontSize: 32px; - --typography-Script-1-fontFamily: "biro script plus"; - --typography-Script-1-fontWeight: "regular"; - --typography-Script-1-letterSpacing: 2%; - --typography-Script-1-lineHeight: 110.00000238418579%; - --typography-Script-1-Mobile-fontSize: 24px; - --typography-Script-2-Desktop-fontSize: 24px; - --typography-Script-2-fontWeight: "regular"; - --typography-Script-2-letterSpacing: 2%; - --typography-Script-2-lineHeight: 110.00000238418579%; - --typography-Script-2-Mobile-fontSize: 20px; - --typography-Subtitle-1-Desktop-fontSize: 24px; - --typography-Subtitle-1-fontFamily: "fira sans"; - --typography-Subtitle-1-letterSpacing: 1%; - --typography-Subtitle-1-lineHeight: 120.00000476837158%; - --typography-Subtitle-1-Mobile-fontSize: 20px; - --typography-Subtitle-2-Desktop-fontSize: 20px; - --typography-Subtitle-2-fontFamily: "fira sans"; - --typography-Subtitle-2-fontSize: 20px; - --typography-Subtitle-2-fontWeight: "medium"; - --typography-Subtitle-2-letterSpacing: 1%; - --typography-Subtitle-2-lineHeight: 120.00000476837158%; - --typography-Subtitle-2-Mobile-fontSize: 18px; - --typography-Title-1-Desktop-fontSize: 64px; - --typography-Title-1-fontFamily: "brandon text"; - --typography-Title-1-fontSize: 64px; - --typography-Title-1-fontWeight: "black"; - --typography-Title-1-letterSpacing: 0.25%; - --typography-Title-1-lineHeight: 110.00000238418579%; - --typography-Title-1-Mobile-fontSize: 48px; - --typography-Title-1-textDecoration: "none"; - --typography-Title-2-Desktop-fontSize: 48px; - --typography-Title-2-fontFamily: "brandon text"; - --typography-Title-2-fontWeight: "black"; - --typography-Title-2-letterSpacing: 0.25%; - --typography-Title-2-lineHeight: 110.00000238418579%; - --typography-Title-2-Mobile-fontSize: 36px; - --typography-Title-2-textDecoration: "none"; - --typography-Title-3-Desktop-fontSize: 36px; - --typography-Title-3-fontFamily: "brandon text"; - --typography-Title-3-fontSize: 36px; - --typography-Title-3-fontWeight: "black"; - --typography-Title-3-letterSpacing: 0.25%; - --typography-Title-3-lineHeight: 110.00000238418579%; - --typography-Title-3-Mobile-fontSize: 30px; - --typography-Title-3-textDecoration: "none"; - --typography-Title-4-Desktop-fontSize: 28px; - --typography-Title-4-fontFamily: "brandon text"; - --typography-Title-4-fontWeight: "bold"; - --typography-Title-4-letterSpacing: 0.25%; - --typography-Title-4-lineHeight: 110.00000238418579%; - --typography-Title-4-Mobile-fontSize: 24px; - --typography-Title-4-textDecoration: "none"; - --typography-Title-5-Desktop-fontSize: 24px; - --typography-Title-5-fontFamily: "brandon text"; - --typography-Title-5-fontWeight: "black"; - --typography-Title-5-letterSpacing: 0.25%; - --typography-Title-5-lineHeight: 110.00000238418579%; - --typography-Title-5-Mobile-fontSize: 20px; - --typography-Title-5-textDecoration: "none"; -} :root { --Base-Border-Hover: var(--Scandic-Peach-80); --Base-Border-Inverted: var(--UI-Opacity-White-100); diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 9d69e1e7c..2ee72a2e4 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -26,7 +26,6 @@ "./Divider": "./lib/components/Divider/index.tsx", "./FacilityToIcon": "./lib/components/FacilityToIcon/index.tsx", "./FakeButton": "./lib/components/FakeButton/index.tsx", - "./Footnote": "./lib/components/Footnote/index.tsx", "./Form/Checkbox": "./lib/components/Form/Checkbox/index.tsx", "./Form/Country": "./lib/components/Form/Country/index.tsx", "./Form/Date": "./lib/components/Form/Date/index.tsx",