From 21f07c584b59eb0a57c387c831cf9483fa997c20 Mon Sep 17 00:00:00 2001 From: Christel Westerberg Date: Tue, 9 Jul 2024 08:01:24 +0200 Subject: [PATCH] chore: update design system and names of tokens --- components/Icons/icon.module.css | 2 +- components/JsonToHtml/renderOptions.tsx | 4 +- components/Levels/levels.module.css | 2 +- .../LargeTable/largeTable.module.css | 2 +- .../OverviewTable/overviewTable.module.css | 4 +- .../DynamicContent/dynamicContent.module.css | 2 +- components/MyPages/Avatar/avatar.module.css | 4 +- .../Benefits/CurrentLevel/current.module.css | 2 +- .../emptyUpcomingStays.module.css | 2 +- .../emptyUpcomingStays.module.css | 2 +- .../AccordionItem/accordionItem.module.css | 6 +- .../Accordion/accordion.module.css | 4 +- .../TempDesignSystem/Button/button.module.css | 270 +++++++++--------- .../TempDesignSystem/Card/card.module.css | 23 +- .../Divider/divider.module.css | 4 +- .../TempDesignSystem/Link/link.module.css | 20 +- .../ProgressBar/progressbar.module.css | 2 +- .../TempDesignSystem/Select/select.module.css | 4 +- .../Text/BiroScript/biroScript.module.css | 2 +- .../Text/Body/body.module.css | 14 +- .../Text/Caption/caption.module.css | 2 +- .../Text/Footnote/footnote.module.css | 2 +- .../TempDesignSystem/Text/Subtitle/index.tsx | 2 + .../Text/Subtitle/subtitle.module.css | 33 ++- .../Text/Subtitle/variants.ts | 5 + .../Text/Title/title.module.css | 2 +- package-lock.json | 4 +- package.json | 2 +- 28 files changed, 223 insertions(+), 204 deletions(-) diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css index 336a409a1..73b8f38a3 100644 --- a/components/Icons/icon.module.css +++ b/components/Icons/icon.module.css @@ -34,7 +34,7 @@ .plosa, .plosa * { - fill: var(--Theme-Primary-Light-On-Surface-Accent); + fill: var(--Primary-Light-On-Surface-Accent); } .red, diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx index 2757fffef..d0e596754 100644 --- a/components/JsonToHtml/renderOptions.tsx +++ b/components/JsonToHtml/renderOptions.tsx @@ -605,14 +605,14 @@ export const renderOptions: RenderOptions = { if (className === AvailableParagraphFormatEnum["subtitle-1"]) { return ( - + {children} ) } if (className === AvailableParagraphFormatEnum["subtitle-2"]) { return ( - + {children} ) diff --git a/components/Levels/levels.module.css b/components/Levels/levels.module.css index c1f246a03..6d1faecb5 100644 --- a/components/Levels/levels.module.css +++ b/components/Levels/levels.module.css @@ -15,7 +15,7 @@ .plosa, .plosa * { - fill: var(--Theme-Primary-Light-On-Surface-Accent); + fill: var(--Primary-Light-On-Surface-Accent); } .red, diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css index 53b059dc1..4b27568bd 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css @@ -1,7 +1,7 @@ .table { border: none; border-collapse: collapse; - background-color: var(--Scandic-Opacity-White-100); + background-color: var(--UI-Opacity-White-100); border-radius: var(--Corner-radius-Medium); color: var(--UI-Grey-100); } diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css index 3262b4d07..dbab394c3 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css @@ -10,12 +10,12 @@ .columns { display: none; position: relative; - background-color: var(--Scandic-Opacity-White-100); + background-color: var(--UI-Opacity-White-100); border-radius: var(--Corner-radius-Medium); } .mobileColumns { - background-color: var(--Scandic-Opacity-White-100); + background-color: var(--UI-Opacity-White-100); display: grid; grid-template-columns: 1fr 1fr; margin: 0 calc(var(--Spacing-x2) * -1) calc(var(--Spacing-x9) * -1) diff --git a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css index 0232da65d..ccb14cbd9 100644 --- a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css +++ b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css @@ -17,7 +17,7 @@ } .preamble { - color: var(--Base-Text-Primary-High-contrast); + color: var(--Base-Text-High-contrast); font-size: var(--typography-Body-Regular-fontSize); line-height: var(--typography-Body-Regular-lineHeight); margin: 0; diff --git a/components/MyPages/Avatar/avatar.module.css b/components/MyPages/Avatar/avatar.module.css index 0beb3c3d2..5898e3f58 100644 --- a/components/MyPages/Avatar/avatar.module.css +++ b/components/MyPages/Avatar/avatar.module.css @@ -17,8 +17,8 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--Theme-Primary-Dark-Surface-Normal); - color: var(--Theme-Primary-Dark-On-Surface-Text); + background-color: var(--Primary-Dark-Surface-Normal); + color: var(--Primary-Dark-On-Surface-Text); font-size: var(--typography-Caption-Bold-fontSize); font-family: var(--typography-Body-Regular-fontFamily); font-weight: var(--typography-Caption-Bold-fontWeight); diff --git a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css index bc26baf04..64e65574b 100644 --- a/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css +++ b/components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css @@ -1,6 +1,6 @@ .card { align-items: center; - background-color: var(--Scandic-Opacity-White-100); + background-color: var(--UI-Opacity-White-100); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Medium); display: flex; diff --git a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css index 438b06f54..e6c7a9872 100644 --- a/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css +++ b/components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css @@ -1,7 +1,7 @@ .container { display: grid; grid-template-rows: 1fr min(50px); - background-color: var(--Base-Surface-Primary-Normal); + background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-Medium); min-height: 250px; margin-bottom: var(--Spacing-x-half); diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css index 438b06f54..e6c7a9872 100644 --- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css +++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css @@ -1,7 +1,7 @@ .container { display: grid; grid-template-rows: 1fr min(50px); - background-color: var(--Base-Surface-Primary-Normal); + background-color: var(--Base-Surface-Primary-light-Normal); border-radius: var(--Corner-radius-Medium); min-height: 250px; margin-bottom: var(--Spacing-x-half); diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css index 234566ac5..ae0d0e20e 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css @@ -7,10 +7,10 @@ } .accordionItem.light { - background-color: var(--Base-Surface-Primary-Normal); + background-color: var(--Base-Surface-Primary-light-Normal); } .accordionItem.subtle { - background-color: var(--Base-Background-Normal); + background-color: var(--Base-Background-Primary-Normal); } .summary { @@ -35,7 +35,7 @@ } .accordionItem.subtle .summary:hover, .accordionItem.subtle details[open] .summary { - background-color: var(--Base-Surface-Primary-Normal); + background-color: var(--Base-Surface-Primary-light-Normal); } .accordionItem.card .summary { diff --git a/components/TempDesignSystem/Accordion/accordion.module.css b/components/TempDesignSystem/Accordion/accordion.module.css index 63529495b..0f9be355e 100644 --- a/components/TempDesignSystem/Accordion/accordion.module.css +++ b/components/TempDesignSystem/Accordion/accordion.module.css @@ -7,8 +7,8 @@ } .accordion.light { - background-color: var(--Base-Surface-Primary-Normal); + background-color: var(--Base-Surface-Primary-light-Normal); } .accordion.subtle { - background-color: var(--Base-Background-Normal); + background-color: var(--Base-Background-Primary-Normal); } diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index 6b01a8529..db14f131a 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/components/TempDesignSystem/Button/button.module.css @@ -271,25 +271,25 @@ a.default { } .primaryStrongPrimary { - background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal); - color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal); + background-color: var(--Primary-Strong-Button-Primary-Fill-Normal); + color: var(--Primary-Strong-Button-Primary-On-Fill-Normal); } .primaryStrongPrimary:active, .primaryStrongPrimary:focus, .primaryStrongPrimary:hover { - background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Hover); - color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover); + background-color: var(--Primary-Strong-Button-Primary-Fill-Hover); + color: var(--Primary-Strong-Button-Primary-On-Fill-Hover); } .primaryStrongPrimary:disabled { - background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Disabled); - color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled); + background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled); + color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled); } .icon.primaryStrongPrimary svg, .icon.primaryStrongPrimary svg * { - fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal); + fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal); } .icon.primaryStrongPrimary:active svg, @@ -298,37 +298,37 @@ a.default { .icon.primaryStrongPrimary:active svg *, .icon.primaryStrongPrimary:focus svg *, .icon.primaryStrongPrimary:hover svg * { - fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover); + fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover); } .icon.primaryStrongPrimary:disabled svg, .icon.primaryStrongPrimary:disabled svg * { - fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled); + fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled); } .primaryStrongSecondary { - background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Normal); - border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Normal); - color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Normal); + background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal); + border-color: var(--Primary-Strong-Button-Secondary-Border-Normal); + color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal); } .primaryStrongSecondary:active, .primaryStrongSecondary:focus, .primaryStrongSecondary:hover { - background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Hover); - border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Hover); - color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Hover); + background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover); + border-color: var(--Primary-Strong-Button-Secondary-Border-Hover); + color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover); } .primaryStrongSecondary:disabled { - background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Disabled); - border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Disabled); - color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled); + background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled); + border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled); + color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled); } .icon.primaryStrongSecondary svg, .icon.primaryStrongSecondary svg * { - fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Normal); + fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal); } .icon.primaryStrongSecondary:active svg, @@ -337,34 +337,34 @@ a.default { .icon.primaryStrongSecondary:active svg *, .icon.primaryStrongSecondary:focus svg *, .icon.primaryStrongSecondary:hover svg * { - fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Hover); + fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover); } .icon.primaryStrongSecondary:disabled svg, .icon.primaryStrongSecondary:disabled svg * { - fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled); + fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled); } .primaryDarkPrimary { - background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal); - color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal); + background-color: var(--Primary-Dark-Button-Primary-Fill-Normal); + color: var(--Primary-Dark-Button-Primary-On-Fill-Normal); } .primaryDarkPrimary:active, .primaryDarkPrimary:focus, .primaryDarkPrimary:hover { - background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover); - color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover); + background-color: var(--Primary-Dark-Button-Primary-Fill-Hover); + color: var(--Primary-Dark-Button-Primary-On-Fill-Hover); } .primaryDarkPrimary:disabled { - background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Disabled); - color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled); + background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled); + color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled); } .icon.primaryDarkPrimary svg, .icon.primaryDarkPrimary svg * { - fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal); + fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal); } .icon.primaryDarkPrimary:active svg, @@ -373,37 +373,37 @@ a.default { .icon.primaryDarkPrimary:active svg *, .icon.primaryDarkPrimary:focus svg *, .icon.primaryDarkPrimary:hover svg * { - fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover); + fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover); } .icon.primaryDarkPrimary:disabled svg, .icon.primaryDarkPrimary:disabled svg * { - fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled); + fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled); } .primaryDarkSecondary { - background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Normal); - border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Normal); - color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Normal); + background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal); + border-color: var(--Primary-Dark-Button-Secondary-Border-Normal); + color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal); } .primaryDarkSecondary:active, .primaryDarkSecondary:focus, .primaryDarkSecondary:hover { - background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Hover); - border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Hover); - color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Hover); + background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover); + border-color: var(--Primary-Dark-Button-Secondary-Border-Hover); + color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover); } .primaryDarkSecondary:disabled { - background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Disabled); - border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Disabled); - color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled); + background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled); + border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled); + color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled); } .icon.primaryDarkSecondary svg, .icon.primaryDarkSecondary svg * { - fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Normal); + fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal); } .icon.primaryDarkSecondary:active svg, @@ -412,34 +412,34 @@ a.default { .icon.primaryDarkSecondary:active svg *, .icon.primaryDarkSecondary:focus svg *, .icon.primaryDarkSecondary:hover svg * { - fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Hover); + fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover); } .icon.primaryDarkSecondary:disabled svg, .icon.primaryDarkSecondary:disabled svg * { - fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled); + fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled); } .primaryLightPrimary { - background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal); - color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal); + background-color: var(--Primary-Light-Button-Primary-Fill-Normal); + color: var(--Primary-Light-Button-Primary-On-Fill-Normal); } .primaryLightPrimary:active, .primaryLightPrimary:focus, .primaryLightPrimary:hover { - background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Hover); - color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover); + background-color: var(--Primary-Light-Button-Primary-Fill-Hover); + color: var(--Primary-Light-Button-Primary-On-Fill-Hover); } .primaryLightPrimary:disabled { - background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Disabled); - color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled); + background-color: var(--Primary-Light-Button-Primary-Fill-Disabled); + color: var(--Primary-Light-Button-Primary-On-Fill-Disabled); } .icon.primaryLightPrimary svg, .icon.primaryLightPrimary svg * { - fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal); + fill: var(--Primary-Light-Button-Primary-On-Fill-Normal); } .icon.primaryLightPrimary:active svg, @@ -448,37 +448,37 @@ a.default { .icon.primaryLightPrimary:active svg *, .icon.primaryLightPrimary:focus svg *, .icon.primaryLightPrimary:hover svg * { - fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover); + fill: var(--Primary-Light-Button-Primary-On-Fill-Hover); } .icon.primaryLightPrimary:disabled svg, .icon.primaryLightPrimary:disabled svg * { - fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled); + fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled); } .primaryLightSecondary { - background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Normal); - border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Normal); - color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Normal); + background-color: var(--Primary-Light-Button-Secondary-Fill-Normal); + border-color: var(--Primary-Light-Button-Secondary-Border-Normal); + color: var(--Primary-Light-Button-Secondary-On-Fill-Normal); } .primaryLightSecondary:active, .primaryLightSecondary:focus, .primaryLightSecondary:hover { - background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Hover); - border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Hover); - color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Hover); + background-color: var(--Primary-Light-Button-Secondary-Fill-Hover); + border-color: var(--Primary-Light-Button-Secondary-Border-Hover); + color: var(--Primary-Light-Button-Secondary-On-Fill-Hover); } .primaryLightSecondary:disabled { - background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Disabled); - border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Disabled); - color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled); + background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled); + border-color: var(--Primary-Light-Button-Secondary-Border-Disabled); + color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled); } .icon.primaryLightSecondary svg, .icon.primaryLightSecondary svg * { - fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Normal); + fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal); } .icon.primaryLightSecondary:active svg, @@ -487,34 +487,34 @@ a.default { .icon.primaryLightSecondary:active svg *, .icon.primaryLightSecondary:focus svg *, .icon.primaryLightSecondary:hover svg * { - fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Hover); + fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover); } .icon.primaryLightSecondary:disabled svg, .icon.primaryLightSecondary:disabled svg * { - fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled); + fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled); } .secondaryDarkPrimary { - background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal); - color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal); + background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal); + color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal); } .secondaryDarkPrimary:active, .secondaryDarkPrimary:focus, .secondaryDarkPrimary:hover { - background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover); - color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover); + background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover); + color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover); } .secondaryDarkPrimary:disabled { - background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Disabled); - color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled); + background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled); + color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled); } .icon.secondaryDarkPrimary svg, .icon.secondaryDarkPrimary svg * { - fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal); + fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal); } .icon.secondaryDarkPrimary:active svg, @@ -523,37 +523,37 @@ a.default { .icon.secondaryDarkPrimary:active svg *, .icon.secondaryDarkPrimary:focus svg *, .icon.secondaryDarkPrimary:hover svg * { - fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover); + fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover); } .icon.secondaryDarkPrimary:disabled svg, .icon.secondaryDarkPrimary:disabled svg * { - fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled); + fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled); } .secondaryDarkSecondary { - background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Normal); - border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Normal); - color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Normal); + background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal); + border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal); + color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal); } .secondaryDarkSecondary:active, .secondaryDarkSecondary:focus, .secondaryDarkSecondary:hover { - background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Hover); - border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Hover); - color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Hover); + background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover); + border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover); + color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover); } .secondaryDarkSecondary:disabled { - background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Disabled); - border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Disabled); - color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled); + background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled); + border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled); + color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled); } .icon.secondaryDarkSecondary svg, .icon.secondaryDarkSecondary svg * { - fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Normal); + fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal); } .icon.secondaryDarkSecondary:active svg, @@ -562,34 +562,34 @@ a.default { .icon.secondaryDarkSecondary:active svg *, .icon.secondaryDarkSecondary:focus svg *, .icon.secondaryDarkSecondary:hover svg * { - fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Hover); + fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover); } .icon.secondaryDarkSecondary:disabled svg, .icon.secondaryDarkSecondary:disabled svg * { - fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled); + fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled); } .secondaryLightPrimary { - background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal); - color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal); + background-color: var(--Secondary-Light-Button-Primary-Fill-Normal); + color: var(--Secondary-Light-Button-Primary-On-Fill-Normal); } .secondaryLightPrimary:active, .secondaryLightPrimary:focus, .secondaryLightPrimary:hover { - background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover); - color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover); + background-color: var(--Secondary-Light-Button-Primary-Fill-Hover); + color: var(--Secondary-Light-Button-Primary-On-Fill-Hover); } .secondaryLightPrimary:disabled { - background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Disabled); - color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled); + background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled); + color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled); } .icon.secondaryLightPrimary svg, .icon.secondaryLightPrimary svg * { - fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal); + fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal); } .icon.secondaryLightPrimary:active svg, @@ -598,37 +598,37 @@ a.default { .icon.secondaryLightPrimary:active svg *, .icon.secondaryLightPrimary:focus svg *, .icon.secondaryLightPrimary:hover svg * { - fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover); + fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover); } .icon.secondaryLightPrimary:disabled svg, .icon.secondaryLightPrimary:disabled svg * { - fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled); + fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled); } .secondaryLightSecondary { - background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Normal); - border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Normal); - color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Normal); + background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal); + border-color: var(--Secondary-Light-Button-Secondary-Border-Normal); + color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal); } .secondaryLightSecondary:active, .secondaryLightSecondary:focus, .secondaryLightSecondary:hover { - background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Hover); - border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Hover); - color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Hover); + background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover); + border-color: var(--Secondary-Light-Button-Secondary-Border-Hover); + color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover); } .secondaryLightSecondary:disabled { - background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Disabled); - border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Disabled); - color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled); + background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled); + border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled); + color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled); } .icon.secondaryLightSecondary svg, .icon.secondaryLightSecondary svg * { - fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Normal); + fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal); } .icon.secondaryLightSecondary:active svg, @@ -637,34 +637,34 @@ a.default { .icon.secondaryLightSecondary:active svg *, .icon.secondaryLightSecondary:focus svg *, .icon.secondaryLightSecondary:hover svg * { - fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Hover); + fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover); } .icon.secondaryLightSecondary:disabled svg, .icon.secondaryLightSecondary:disabled svg * { - fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled); + fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled); } .tertiaryDarkPrimary { - background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal); - color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal); + background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal); + color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal); } .tertiaryDarkPrimary:active, .tertiaryDarkPrimary:focus, .tertiaryDarkPrimary:hover { - background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover); - color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover); + background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover); + color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover); } .tertiaryDarkPrimary:disabled { - background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled); - color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled); + background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled); + color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled); } .icon.tertiaryDarkPrimary svg, .icon.tertiaryDarkPrimary svg * { - fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal); + fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal); } .icon.tertiaryDarkPrimary:active svg, @@ -673,37 +673,37 @@ a.default { .icon.tertiaryDarkPrimary:active svg *, .icon.tertiaryDarkPrimary:focus svg *, .icon.tertiaryDarkPrimary:hover svg * { - fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover); + fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover); } .icon.tertiaryDarkPrimary:disabled svg, .icon.tertiaryDarkPrimary:disabled svg * { - fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled); + fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled); } .tertiaryDarkSecondary { - background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Normal); - border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Normal); - color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Normal); + background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal); + border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal); + color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal); } .tertiaryDarkSecondary:active, .tertiaryDarkSecondary:focus, .tertiaryDarkSecondary:hover { - background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Hover); - border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Hover); - color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Hover); + background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover); + border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover); + color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover); } .tertiaryDarkSecondary:disabled { - background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Disabled); - border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Disabled); - color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled); + background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled); + border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled); + color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled); } .icon.tertiaryDarkSecondary svg, .icon.tertiaryDarkSecondary svg * { - fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Normal); + fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal); } .icon.tertiaryDarkSecondary:active svg, @@ -712,34 +712,34 @@ a.default { .icon.tertiaryDarkSecondary:active svg *, .icon.tertiaryDarkSecondary:focus svg *, .icon.tertiaryDarkSecondary:hover svg * { - fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Hover); + fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover); } .icon.tertiaryDarkSecondary:disabled svg, .icon.tertiaryDarkSecondary:disabled svg * { - fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled); + fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled); } .tertiaryLightPrimary { - background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal); - color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal); + background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal); + color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal); } .tertiaryLightPrimary:active, .tertiaryLightPrimary:focus, .tertiaryLightPrimary:hover { - background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover); - color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover); + background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover); + color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover); } .tertiaryLightPrimary:disabled { - background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Disabled); - color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled); + background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled); + color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled); } .icon.tertiaryLightPrimary svg, .icon.tertiaryLightPrimary svg * { - fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal); + fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal); } .icon.tertiaryLightPrimary:active svg, @@ -748,12 +748,12 @@ a.default { .icon.tertiaryLightPrimary:active svg *, .icon.tertiaryLightPrimary:focus svg *, .icon.tertiaryLightPrimary:hover svg * { - fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover); + fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover); } .icon.tertiaryLightPrimary:disabled svg, .icon.tertiaryLightPrimary:disabled svg * { - fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled); + fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled); } .tertiaryLightSecondary { diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css index bf2605a63..e7a2124d8 100644 --- a/components/TempDesignSystem/Card/card.module.css +++ b/components/TempDesignSystem/Card/card.module.css @@ -13,27 +13,24 @@ } .themeOne { - --font-color: var(--Scandic-Brand-Burgundy); - --script-color: var(--UI-Red-70); - --divider-color: var(--UI-Red-10); + --font-color: var(--Primary-Light-On-Surface-Text); + --script-color: var(--Primary-Light-On-Surface-Accent); - background: var(--Scandic-Brand-Pale-Peach); + background: var(--Primary-Light-Surface-Normal); } .themeTwo { - --font-color: var(--Scandic-Brand-Dark-Green); - --script-color: var(--UI-Green-70); - --divider-color: var(--UI-Green-10); + --font-color: var(--Secondary-Light-On-Surface-Text); + --script-color: var(--Secondary-Light-On-Surface-Accent); - background: var(--Scandic-Brand-Light-Green); + background: var(--Secondary-Light-Surface-Normal); } .themeThree { - --font-color: var(--Scandic-Brand-Dark-Blue); - --script-color: var(--UI-Blue-70); - --divider-color: var(--UI-Blue-10); + --font-color: var(--Tertiary-Light-Surface-Text); + --script-color: var(--Tertiary-Light-On-Surface-Accent); - background: var(--Scandic-Brand-Pale-Yellow); + background: var(--Tertiary-Light-Surface-Normal); } .scriptContainer { @@ -60,4 +57,4 @@ p.bodyText { display: flex; gap: var(--Spacing-x1); justify-content: center; -} \ No newline at end of file +} diff --git a/components/TempDesignSystem/Divider/divider.module.css b/components/TempDesignSystem/Divider/divider.module.css index 54eb49731..e4031ab65 100644 --- a/components/TempDesignSystem/Divider/divider.module.css +++ b/components/TempDesignSystem/Divider/divider.module.css @@ -14,7 +14,7 @@ } .peach { - border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider); + border-bottom-color: var(--Primary-Light-On-Surface-Divider); } .beige { @@ -22,7 +22,7 @@ } .white { - border-bottom-color: var(--Scandic-Opacity-White-100); + border-bottom-color: var(--UI-Opacity-White-100); } .subtle { diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css index 86e4069ac..137ef254c 100644 --- a/components/TempDesignSystem/Link/link.module.css +++ b/components/TempDesignSystem/Link/link.module.css @@ -28,11 +28,11 @@ } .underscored { - font-family: var(--typography-Body-Underlined-fontFamily); - font-size: var(--typography-Body-Underlined-fontSize); - font-weight: var(--typography-Body-Underlined-fontWeight); - letter-spacing: var(--typography-Body-Underlined-letterSpacing); - line-height: var(--typography-Body-Underlined-lineHeight); + font-family: var(--typography-Body-Underline-fontFamily); + font-size: var(--typography-Body-Underline-fontSize); + font-weight: var(--typography-Body-Underline-fontWeight); + letter-spacing: var(--typography-Body-Underline-letterSpacing); + line-height: var(--typography-Body-Underline-lineHeight); text-decoration: underline; } @@ -56,11 +56,11 @@ .myPageMobileDropdown.active { background-color: var(--Scandic-Brand-Pale-Peach); border-radius: var(--Corner-radius-Medium); - font-family: var(--typography-Body-Underlined-fontFamily); - font-size: var(--typography-Body-Underlined-fontSize); - font-weight: var(--typography-Body-Underlined-fontWeight); - letter-spacing: var(--typography-Body-Underlined-letterSpacing); - line-height: var(--typography-Body-Underlined-lineHeight); + font-family: var(--typography-Body-Underline-fontFamily); + font-size: var(--typography-Body-Underline-fontSize); + font-weight: var(--typography-Body-Underline-fontWeight); + letter-spacing: var(--typography-Body-Underline-letterSpacing); + line-height: var(--typography-Body-Underline-lineHeight); } .shortcut { diff --git a/components/TempDesignSystem/ProgressBar/progressbar.module.css b/components/TempDesignSystem/ProgressBar/progressbar.module.css index 368fe5f6f..5561eb587 100644 --- a/components/TempDesignSystem/ProgressBar/progressbar.module.css +++ b/components/TempDesignSystem/ProgressBar/progressbar.module.css @@ -6,7 +6,7 @@ } .progress { - background-color: var(--Scandic-Opacity-Almost-Black-100); + background-color: var(--UI-Opacity-Almost-Black-100); border-radius: 40px; height: 20px; } diff --git a/components/TempDesignSystem/Select/select.module.css b/components/TempDesignSystem/Select/select.module.css index fa77bc6d8..c6a95aae2 100644 --- a/components/TempDesignSystem/Select/select.module.css +++ b/components/TempDesignSystem/Select/select.module.css @@ -17,10 +17,10 @@ .input { align-items: center; - background-color: var(--Scandic-Opacity-White-100); + background-color: var(--UI-Opacity-White-100); border: none; border-radius: var(--Corner-radius-Medium); - color: var(--Base-Text-UI-High-contrast); + color: var(--UI-Text-High-contrast); display: flex; gap: var(--Spacing-x-half); height: 60px; diff --git a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css index e7df4085a..a357a0c88 100644 --- a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css +++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css @@ -63,7 +63,7 @@ } .plosa { - color: var(--Theme-Primary-Light-On-Surface-Accent); + color: var(--Primary-Light-On-Surface-Accent); } .red { diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css index 58898c85e..09cfb6112 100644 --- a/components/TempDesignSystem/Text/Body/body.module.css +++ b/components/TempDesignSystem/Text/Body/body.module.css @@ -26,12 +26,12 @@ } .underlined { - font-family: var(--typography-Body-Underlined-fontFamily); - font-size: var(--typography-Body-Underlined-fontSize); - font-weight: var(--typography-Body-Underlined-fontWeight); - letter-spacing: var(--typography-Body-Underlined-letterSpacing); - line-height: var(--typography-Body-Underlined-lineHeight); - text-decoration: var(--typography-Body-Underlined-textDecoration); + font-family: var(--typography-Body-Underline-fontFamily); + font-size: var(--typography-Body-Underline-fontSize); + font-weight: var(--typography-Body-Underline-fontWeight); + letter-spacing: var(--typography-Body-Underline-letterSpacing); + line-height: var(--typography-Body-Underline-lineHeight); + text-decoration: var(--typography-Body-Underline-textDecoration); } .textAlignCenter { @@ -63,7 +63,7 @@ } .white { - color: var(--Scandic-Opacity-White-100); + color: var(--UI-Opacity-White-100); } .peach50 { diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css index 09361d5bf..536fed0a8 100644 --- a/components/TempDesignSystem/Text/Caption/caption.module.css +++ b/components/TempDesignSystem/Text/Caption/caption.module.css @@ -38,7 +38,7 @@ } .textMediumContrast { - color: var(--Base-Text-UI-Medium-contrast); + color: var(--UI-Text-Medium-contrast); } .center { diff --git a/components/TempDesignSystem/Text/Footnote/footnote.module.css b/components/TempDesignSystem/Text/Footnote/footnote.module.css index bf4aff206..a020842ae 100644 --- a/components/TempDesignSystem/Text/Footnote/footnote.module.css +++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css @@ -46,5 +46,5 @@ } .textMediumContrast { - color: var(--Base-Text-UI-Medium-contrast); + color: var(--UI-Text-Medium-contrast); } diff --git a/components/TempDesignSystem/Text/Subtitle/index.tsx b/components/TempDesignSystem/Text/Subtitle/index.tsx index 94924c295..6c79a85c4 100644 --- a/components/TempDesignSystem/Text/Subtitle/index.tsx +++ b/components/TempDesignSystem/Text/Subtitle/index.tsx @@ -11,6 +11,7 @@ export default function Subtitle({ color, textAlign, textTransform, + type, ...props }: SubtitleProps) { if (checkForEmptyChildren(props.children) === 0) { @@ -22,6 +23,7 @@ export default function Subtitle({ color, textAlign, textTransform, + type, }) return } diff --git a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css index 943a96e95..5ece6f396 100644 --- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css +++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css @@ -1,17 +1,32 @@ .subtitle { - font-family: var(--typography-Subtitle-fontFamily); - font-size: clamp( - var(--typography-Subtitle-Mobile-fontSize), - 0.3vw + 15px, - var(--typography-Subtitle-Desktop-fontSize) - ); - font-weight: var(--typography-Subtitle-fontWeight); - letter-spacing: var(--typography-Subtitle-letterSpacing); - line-height: var(--typography-Subtitle-lineHeight); margin: var(--Spacing-x0); padding: var(--Spacing-x0); } +.one { + font-family: var(--typography-Subtitle-1-fontFamily); + font-size: clamp( + var(--typography-Subtitle-1-Mobile-fontSize), + 0.3vw + 15px, + var(--typography-Subtitle-1-Desktop-fontSize) + ); + font-weight: var(--typography-Subtitle-1-fontWeight); + letter-spacing: var(--typography-Subtitle-1-letterSpacing); + line-height: var(--typography-Subtitle-1-lineHeight); +} + +.two { + font-family: var(--typography-Subtitle-2-fontFamily); + font-size: clamp( + var(--typography-Subtitle-2-Mobile-fontSize), + 0.3vw + 15px, + var(--typography-Subtitle-2-Desktop-fontSize) + ); + font-weight: var(--typography-Subtitle-2-fontWeight); + letter-spacing: var(--typography-Subtitle-2-letterSpacing); + line-height: var(--typography-Subtitle-2-lineHeight); +} + .regular { text-transform: none; } diff --git a/components/TempDesignSystem/Text/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts index b4598b12a..3f32c2fb7 100644 --- a/components/TempDesignSystem/Text/Subtitle/variants.ts +++ b/components/TempDesignSystem/Text/Subtitle/variants.ts @@ -17,11 +17,16 @@ const config = { regular: styles.regular, uppercase: styles.uppercase, }, + type: { + one: styles.one, + two: styles.two, + }, }, defaultVariants: { color: "burgundy", textAlign: "left", textTransform: "regular", + type: "one", }, } as const diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css index 4cdd268ed..a63443328 100644 --- a/components/TempDesignSystem/Text/Title/title.module.css +++ b/components/TempDesignSystem/Text/Title/title.module.css @@ -109,5 +109,5 @@ } .white { - color: var(--Scandic-Opacity-White-100); + color: var(--UI-Opacity-White-100); } diff --git a/package-lock.json b/package-lock.json index 88676b645..bdfaf06a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@hookform/resolvers": "^3.3.4", "@netlify/plugin-nextjs": "^5.1.1", "@radix-ui/react-slot": "^1.0.2", - "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.7", + "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.8", "@t3-oss/env-nextjs": "^0.9.2", "@tanstack/react-query": "^5.28.6", "@trpc/client": "^11.0.0-next-beta.318", @@ -5246,7 +5246,7 @@ }, "node_modules/@scandic-hotels/design-system": { "version": "0.1.0", - "resolved": "git+https://x-token-auth:ATCTT3xFfGN0gu4BSBWR71ifMM-_iAT2ip_jnjF0OjTkYhEB3sn71fPCGuMUA7O3BxJ2oHptZVGAlVvMUoeo3Wfute7RYido9HlvrVjemqns9hR3WSf6eNHhsSy5bLtxQ6VK7mnSSAGHaCqTejxirs_PmOB_jPIi1Ft4OEDehtnMxCteg8rO-IE%3D27DF8E0B@bitbucket.org/scandic-swap/design-system.git#cdd0818b65d66fcf91e3c15e661b672705b5f59e", + "resolved": "git+https://x-token-auth:ATCTT3xFfGN0gu4BSBWR71ifMM-_iAT2ip_jnjF0OjTkYhEB3sn71fPCGuMUA7O3BxJ2oHptZVGAlVvMUoeo3Wfute7RYido9HlvrVjemqns9hR3WSf6eNHhsSy5bLtxQ6VK7mnSSAGHaCqTejxirs_PmOB_jPIi1Ft4OEDehtnMxCteg8rO-IE%3D27DF8E0B@bitbucket.org/scandic-swap/design-system.git#a24a425525c021cebb7d1ff6126400aa21ca749f", "peerDependencies": { "react": "^18.2.0", "react-aria-components": "^1.0.1", diff --git a/package.json b/package.json index 04649dc82..20d9d62e2 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "@hookform/resolvers": "^3.3.4", "@netlify/plugin-nextjs": "^5.1.1", "@radix-ui/react-slot": "^1.0.2", - "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.7", + "@scandic-hotels/design-system": "git+https://x-token-auth:$DESIGN_SYSTEM_ACCESS_TOKEN@bitbucket.org/scandic-swap/design-system.git#v0.1.0-rc.8", "@t3-oss/env-nextjs": "^0.9.2", "@tanstack/react-query": "^5.28.6", "@trpc/client": "^11.0.0-next-beta.318",