scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: update design system and names of tokens

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-09 08:01:24 +02:00
parent c5473f477e
commit 21f07c584b
28 changed files with 223 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Icons/icon.module.css
View File

@@ -34,7 +34,7 @@
.plosa,
.plosa * {
fill: var(--Theme-Primary-Light-On-Surface-Accent);
fill: var(--Primary-Light-On-Surface-Accent);
}
.red,

4
components/JsonToHtml/renderOptions.tsx
View File

@@ -605,14 +605,14 @@ export const renderOptions: RenderOptions = {
if (className === AvailableParagraphFormatEnum["subtitle-1"]) {
return (
<Subtitle key={id} {...props}>
<Subtitle key={id} {...props} type="one">
{children}
</Subtitle>
)
}
if (className === AvailableParagraphFormatEnum["subtitle-2"]) {
return (
<Subtitle key={id} {...props}>
<Subtitle key={id} {...props} type="two">
{children}
</Subtitle>
)

2
components/Levels/levels.module.css
View File

@@ -15,7 +15,7 @@
.plosa,
.plosa * {
fill: var(--Theme-Primary-Light-On-Surface-Accent);
fill: var(--Primary-Light-On-Surface-Accent);
}
.red,

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
View File

@@ -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);
}

4
components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css
View File

@@ -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)

2
components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css
View File

@@ -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;

4
components/MyPages/Avatar/avatar.module.css
View File

@@ -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);

2
components/MyPages/Blocks/Benefits/CurrentLevel/current.module.css
View File

@@ -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;

2
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -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);

2
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
View File

@@ -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);

6
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
View File

@@ -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 {

4
components/TempDesignSystem/Accordion/accordion.module.css
View File

@@ -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);
}

270
components/TempDesignSystem/Button/button.module.css
View File

@@ -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 {

23
components/TempDesignSystem/Card/card.module.css
View File

@@ -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;
}
}

4
components/TempDesignSystem/Divider/divider.module.css
View File

@@ -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 {

20
components/TempDesignSystem/Link/link.module.css
View File

@@ -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 {

2
components/TempDesignSystem/ProgressBar/progressbar.module.css
View File

@@ -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;
}

4
components/TempDesignSystem/Select/select.module.css
View File

@@ -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;

2
components/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

@@ -63,7 +63,7 @@
}
.plosa {
color: var(--Theme-Primary-Light-On-Surface-Accent);
color: var(--Primary-Light-On-Surface-Accent);
}
.red {

14
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -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 {

2
components/TempDesignSystem/Text/Caption/caption.module.css
View File

@@ -38,7 +38,7 @@
}
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
color: var(--UI-Text-Medium-contrast);
}
.center {

2
components/TempDesignSystem/Text/Footnote/footnote.module.css
View File

@@ -46,5 +46,5 @@
}
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
color: var(--UI-Text-Medium-contrast);
}

2
components/TempDesignSystem/Text/Subtitle/index.tsx
View File

@@ -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 <Comp className={classNames} {...props} />
}

33
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -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;
}

5
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

@@ -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

2
components/TempDesignSystem/Text/Title/title.module.css
View File

@@ -109,5 +109,5 @@
}
.white {
color: var(--Scandic-Opacity-White-100);
color: var(--UI-Opacity-White-100);
}

4
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",