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,
.plosa * { .plosa * {
fill: var(--Theme-Primary-Light-On-Surface-Accent); fill: var(--Primary-Light-On-Surface-Accent);
} }
.red, .red,

4
components/JsonToHtml/renderOptions.tsx
View File

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

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

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

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

@@ -1,7 +1,7 @@
.table { .table {
border: none; border: none;
border-collapse: collapse; border-collapse: collapse;
background-color: var(--Scandic-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
color: var(--UI-Grey-100); color: var(--UI-Grey-100);
} }

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

@@ -10,12 +10,12 @@
.columns { .columns {
display: none; display: none;
position: relative; position: relative;
background-color: var(--Scandic-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
} }
.mobileColumns { .mobileColumns {
background-color: var(--Scandic-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin: 0 calc(var(--Spacing-x2) * -1) calc(var(--Spacing-x9) * -1) 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 { .preamble {
color: var(--Base-Text-Primary-High-contrast); color: var(--Base-Text-High-contrast);
font-size: var(--typography-Body-Regular-fontSize); font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight); line-height: var(--typography-Body-Regular-lineHeight);
margin: 0; margin: 0;

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

@@ -17,8 +17,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--Theme-Primary-Dark-Surface-Normal); background-color: var(--Primary-Dark-Surface-Normal);
color: var(--Theme-Primary-Dark-On-Surface-Text); color: var(--Primary-Dark-On-Surface-Text);
font-size: var(--typography-Caption-Bold-fontSize); font-size: var(--typography-Caption-Bold-fontSize);
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
font-weight: var(--typography-Caption-Bold-fontWeight); font-weight: var(--typography-Caption-Bold-fontWeight);

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

@@ -1,6 +1,6 @@
.card { .card {
align-items: center; 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: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
display: flex; display: flex;

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

@@ -1,7 +1,7 @@
.container { .container {
display: grid; display: grid;
grid-template-rows: 1fr min(50px); 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); border-radius: var(--Corner-radius-Medium);
min-height: 250px; min-height: 250px;
margin-bottom: var(--Spacing-x-half); margin-bottom: var(--Spacing-x-half);

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

@@ -1,7 +1,7 @@
.container { .container {
display: grid; display: grid;
grid-template-rows: 1fr min(50px); 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); border-radius: var(--Corner-radius-Medium);
min-height: 250px; min-height: 250px;
margin-bottom: var(--Spacing-x-half); margin-bottom: var(--Spacing-x-half);

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

@@ -7,10 +7,10 @@
} }
.accordionItem.light { .accordionItem.light {
background-color: var(--Base-Surface-Primary-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
} }
.accordionItem.subtle { .accordionItem.subtle {
background-color: var(--Base-Background-Normal); background-color: var(--Base-Background-Primary-Normal);
} }
.summary { .summary {
@@ -35,7 +35,7 @@
} }
.accordionItem.subtle .summary:hover, .accordionItem.subtle .summary:hover,
.accordionItem.subtle details[open] .summary { .accordionItem.subtle details[open] .summary {
background-color: var(--Base-Surface-Primary-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
} }
.accordionItem.card .summary { .accordionItem.card .summary {

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

@@ -7,8 +7,8 @@
} }
.accordion.light { .accordion.light {
background-color: var(--Base-Surface-Primary-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
} }
.accordion.subtle { .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 { .primaryStrongPrimary {
background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal); background-color: var(--Primary-Strong-Button-Primary-Fill-Normal);
color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal); color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
} }
.primaryStrongPrimary:active, .primaryStrongPrimary:active,
.primaryStrongPrimary:focus, .primaryStrongPrimary:focus,
.primaryStrongPrimary:hover { .primaryStrongPrimary:hover {
background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Hover); background-color: var(--Primary-Strong-Button-Primary-Fill-Hover);
color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover); color: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
} }
.primaryStrongPrimary:disabled { .primaryStrongPrimary:disabled {
background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Disabled); background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled);
color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled); color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
} }
.icon.primaryStrongPrimary svg, .icon.primaryStrongPrimary svg,
.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, .icon.primaryStrongPrimary:active svg,
@@ -298,37 +298,37 @@ a.default {
.icon.primaryStrongPrimary:active svg *, .icon.primaryStrongPrimary:active svg *,
.icon.primaryStrongPrimary:focus svg *, .icon.primaryStrongPrimary:focus svg *,
.icon.primaryStrongPrimary:hover 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,
.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 { .primaryStrongSecondary {
background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Normal); background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Normal); border-color: var(--Primary-Strong-Button-Secondary-Border-Normal);
color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Normal); color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
} }
.primaryStrongSecondary:active, .primaryStrongSecondary:active,
.primaryStrongSecondary:focus, .primaryStrongSecondary:focus,
.primaryStrongSecondary:hover { .primaryStrongSecondary:hover {
background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Hover); background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Hover); border-color: var(--Primary-Strong-Button-Secondary-Border-Hover);
color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Hover); color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
} }
.primaryStrongSecondary:disabled { .primaryStrongSecondary:disabled {
background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Disabled); background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Disabled); border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled);
color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled); color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
} }
.icon.primaryStrongSecondary svg, .icon.primaryStrongSecondary svg,
.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, .icon.primaryStrongSecondary:active svg,
@@ -337,34 +337,34 @@ a.default {
.icon.primaryStrongSecondary:active svg *, .icon.primaryStrongSecondary:active svg *,
.icon.primaryStrongSecondary:focus svg *, .icon.primaryStrongSecondary:focus svg *,
.icon.primaryStrongSecondary:hover 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,
.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 { .primaryDarkPrimary {
background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal); background-color: var(--Primary-Dark-Button-Primary-Fill-Normal);
color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal); color: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
} }
.primaryDarkPrimary:active, .primaryDarkPrimary:active,
.primaryDarkPrimary:focus, .primaryDarkPrimary:focus,
.primaryDarkPrimary:hover { .primaryDarkPrimary:hover {
background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover); background-color: var(--Primary-Dark-Button-Primary-Fill-Hover);
color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover); color: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
} }
.primaryDarkPrimary:disabled { .primaryDarkPrimary:disabled {
background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Disabled); background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled);
color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled); color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
} }
.icon.primaryDarkPrimary svg, .icon.primaryDarkPrimary svg,
.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, .icon.primaryDarkPrimary:active svg,
@@ -373,37 +373,37 @@ a.default {
.icon.primaryDarkPrimary:active svg *, .icon.primaryDarkPrimary:active svg *,
.icon.primaryDarkPrimary:focus svg *, .icon.primaryDarkPrimary:focus svg *,
.icon.primaryDarkPrimary:hover 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,
.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 { .primaryDarkSecondary {
background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Normal); background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Normal); border-color: var(--Primary-Dark-Button-Secondary-Border-Normal);
color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Normal); color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
} }
.primaryDarkSecondary:active, .primaryDarkSecondary:active,
.primaryDarkSecondary:focus, .primaryDarkSecondary:focus,
.primaryDarkSecondary:hover { .primaryDarkSecondary:hover {
background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Hover); background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Hover); border-color: var(--Primary-Dark-Button-Secondary-Border-Hover);
color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Hover); color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
} }
.primaryDarkSecondary:disabled { .primaryDarkSecondary:disabled {
background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Disabled); background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Disabled); border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled);
color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled); color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
} }
.icon.primaryDarkSecondary svg, .icon.primaryDarkSecondary svg,
.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, .icon.primaryDarkSecondary:active svg,
@@ -412,34 +412,34 @@ a.default {
.icon.primaryDarkSecondary:active svg *, .icon.primaryDarkSecondary:active svg *,
.icon.primaryDarkSecondary:focus svg *, .icon.primaryDarkSecondary:focus svg *,
.icon.primaryDarkSecondary:hover 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,
.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 { .primaryLightPrimary {
background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal); background-color: var(--Primary-Light-Button-Primary-Fill-Normal);
color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal); color: var(--Primary-Light-Button-Primary-On-Fill-Normal);
} }
.primaryLightPrimary:active, .primaryLightPrimary:active,
.primaryLightPrimary:focus, .primaryLightPrimary:focus,
.primaryLightPrimary:hover { .primaryLightPrimary:hover {
background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Hover); background-color: var(--Primary-Light-Button-Primary-Fill-Hover);
color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover); color: var(--Primary-Light-Button-Primary-On-Fill-Hover);
} }
.primaryLightPrimary:disabled { .primaryLightPrimary:disabled {
background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Disabled); background-color: var(--Primary-Light-Button-Primary-Fill-Disabled);
color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled); color: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
} }
.icon.primaryLightPrimary svg, .icon.primaryLightPrimary svg,
.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, .icon.primaryLightPrimary:active svg,
@@ -448,37 +448,37 @@ a.default {
.icon.primaryLightPrimary:active svg *, .icon.primaryLightPrimary:active svg *,
.icon.primaryLightPrimary:focus svg *, .icon.primaryLightPrimary:focus svg *,
.icon.primaryLightPrimary:hover 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,
.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 { .primaryLightSecondary {
background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Normal); background-color: var(--Primary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Normal); border-color: var(--Primary-Light-Button-Secondary-Border-Normal);
color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Normal); color: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
} }
.primaryLightSecondary:active, .primaryLightSecondary:active,
.primaryLightSecondary:focus, .primaryLightSecondary:focus,
.primaryLightSecondary:hover { .primaryLightSecondary:hover {
background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Hover); background-color: var(--Primary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Hover); border-color: var(--Primary-Light-Button-Secondary-Border-Hover);
color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Hover); color: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
} }
.primaryLightSecondary:disabled { .primaryLightSecondary:disabled {
background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Disabled); background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Disabled); border-color: var(--Primary-Light-Button-Secondary-Border-Disabled);
color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled); color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
} }
.icon.primaryLightSecondary svg, .icon.primaryLightSecondary svg,
.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, .icon.primaryLightSecondary:active svg,
@@ -487,34 +487,34 @@ a.default {
.icon.primaryLightSecondary:active svg *, .icon.primaryLightSecondary:active svg *,
.icon.primaryLightSecondary:focus svg *, .icon.primaryLightSecondary:focus svg *,
.icon.primaryLightSecondary:hover 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,
.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 { .secondaryDarkPrimary {
background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal); background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal);
color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal); color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
} }
.secondaryDarkPrimary:active, .secondaryDarkPrimary:active,
.secondaryDarkPrimary:focus, .secondaryDarkPrimary:focus,
.secondaryDarkPrimary:hover { .secondaryDarkPrimary:hover {
background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover); background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover);
color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover); color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
} }
.secondaryDarkPrimary:disabled { .secondaryDarkPrimary:disabled {
background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Disabled); background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled);
color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled); color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
} }
.icon.secondaryDarkPrimary svg, .icon.secondaryDarkPrimary svg,
.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, .icon.secondaryDarkPrimary:active svg,
@@ -523,37 +523,37 @@ a.default {
.icon.secondaryDarkPrimary:active svg *, .icon.secondaryDarkPrimary:active svg *,
.icon.secondaryDarkPrimary:focus svg *, .icon.secondaryDarkPrimary:focus svg *,
.icon.secondaryDarkPrimary:hover 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,
.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 { .secondaryDarkSecondary {
background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Normal); background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Normal); border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal);
color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Normal); color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
} }
.secondaryDarkSecondary:active, .secondaryDarkSecondary:active,
.secondaryDarkSecondary:focus, .secondaryDarkSecondary:focus,
.secondaryDarkSecondary:hover { .secondaryDarkSecondary:hover {
background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Hover); background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Hover); border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover);
color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Hover); color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
} }
.secondaryDarkSecondary:disabled { .secondaryDarkSecondary:disabled {
background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Disabled); background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Disabled); border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled);
color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled); color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
} }
.icon.secondaryDarkSecondary svg, .icon.secondaryDarkSecondary svg,
.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, .icon.secondaryDarkSecondary:active svg,
@@ -562,34 +562,34 @@ a.default {
.icon.secondaryDarkSecondary:active svg *, .icon.secondaryDarkSecondary:active svg *,
.icon.secondaryDarkSecondary:focus svg *, .icon.secondaryDarkSecondary:focus svg *,
.icon.secondaryDarkSecondary:hover 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,
.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 { .secondaryLightPrimary {
background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal); background-color: var(--Secondary-Light-Button-Primary-Fill-Normal);
color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal); color: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
} }
.secondaryLightPrimary:active, .secondaryLightPrimary:active,
.secondaryLightPrimary:focus, .secondaryLightPrimary:focus,
.secondaryLightPrimary:hover { .secondaryLightPrimary:hover {
background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover); background-color: var(--Secondary-Light-Button-Primary-Fill-Hover);
color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover); color: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
} }
.secondaryLightPrimary:disabled { .secondaryLightPrimary:disabled {
background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Disabled); background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled);
color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled); color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
} }
.icon.secondaryLightPrimary svg, .icon.secondaryLightPrimary svg,
.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, .icon.secondaryLightPrimary:active svg,
@@ -598,37 +598,37 @@ a.default {
.icon.secondaryLightPrimary:active svg *, .icon.secondaryLightPrimary:active svg *,
.icon.secondaryLightPrimary:focus svg *, .icon.secondaryLightPrimary:focus svg *,
.icon.secondaryLightPrimary:hover 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,
.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 { .secondaryLightSecondary {
background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Normal); background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Normal); border-color: var(--Secondary-Light-Button-Secondary-Border-Normal);
color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Normal); color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
} }
.secondaryLightSecondary:active, .secondaryLightSecondary:active,
.secondaryLightSecondary:focus, .secondaryLightSecondary:focus,
.secondaryLightSecondary:hover { .secondaryLightSecondary:hover {
background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Hover); background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Hover); border-color: var(--Secondary-Light-Button-Secondary-Border-Hover);
color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Hover); color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
} }
.secondaryLightSecondary:disabled { .secondaryLightSecondary:disabled {
background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Disabled); background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Disabled); border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled);
color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled); color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
} }
.icon.secondaryLightSecondary svg, .icon.secondaryLightSecondary svg,
.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, .icon.secondaryLightSecondary:active svg,
@@ -637,34 +637,34 @@ a.default {
.icon.secondaryLightSecondary:active svg *, .icon.secondaryLightSecondary:active svg *,
.icon.secondaryLightSecondary:focus svg *, .icon.secondaryLightSecondary:focus svg *,
.icon.secondaryLightSecondary:hover 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,
.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 { .tertiaryDarkPrimary {
background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal); background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal);
color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal); color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
} }
.tertiaryDarkPrimary:active, .tertiaryDarkPrimary:active,
.tertiaryDarkPrimary:focus, .tertiaryDarkPrimary:focus,
.tertiaryDarkPrimary:hover { .tertiaryDarkPrimary:hover {
background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover); background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover);
color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover); color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
} }
.tertiaryDarkPrimary:disabled { .tertiaryDarkPrimary:disabled {
background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled); background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled);
color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled); color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
} }
.icon.tertiaryDarkPrimary svg, .icon.tertiaryDarkPrimary svg,
.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, .icon.tertiaryDarkPrimary:active svg,
@@ -673,37 +673,37 @@ a.default {
.icon.tertiaryDarkPrimary:active svg *, .icon.tertiaryDarkPrimary:active svg *,
.icon.tertiaryDarkPrimary:focus svg *, .icon.tertiaryDarkPrimary:focus svg *,
.icon.tertiaryDarkPrimary:hover 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,
.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 { .tertiaryDarkSecondary {
background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Normal); background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Normal); border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal);
color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Normal); color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
} }
.tertiaryDarkSecondary:active, .tertiaryDarkSecondary:active,
.tertiaryDarkSecondary:focus, .tertiaryDarkSecondary:focus,
.tertiaryDarkSecondary:hover { .tertiaryDarkSecondary:hover {
background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Hover); background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Hover); border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover);
color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Hover); color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
} }
.tertiaryDarkSecondary:disabled { .tertiaryDarkSecondary:disabled {
background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Disabled); background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Disabled); border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled);
color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled); color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
} }
.icon.tertiaryDarkSecondary svg, .icon.tertiaryDarkSecondary svg,
.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, .icon.tertiaryDarkSecondary:active svg,
@@ -712,34 +712,34 @@ a.default {
.icon.tertiaryDarkSecondary:active svg *, .icon.tertiaryDarkSecondary:active svg *,
.icon.tertiaryDarkSecondary:focus svg *, .icon.tertiaryDarkSecondary:focus svg *,
.icon.tertiaryDarkSecondary:hover 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,
.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 { .tertiaryLightPrimary {
background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal); background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal);
color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal); color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
} }
.tertiaryLightPrimary:active, .tertiaryLightPrimary:active,
.tertiaryLightPrimary:focus, .tertiaryLightPrimary:focus,
.tertiaryLightPrimary:hover { .tertiaryLightPrimary:hover {
background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover); background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover);
color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover); color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
} }
.tertiaryLightPrimary:disabled { .tertiaryLightPrimary:disabled {
background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Disabled); background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled);
color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled); color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
} }
.icon.tertiaryLightPrimary svg, .icon.tertiaryLightPrimary svg,
.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, .icon.tertiaryLightPrimary:active svg,
@@ -748,12 +748,12 @@ a.default {
.icon.tertiaryLightPrimary:active svg *, .icon.tertiaryLightPrimary:active svg *,
.icon.tertiaryLightPrimary:focus svg *, .icon.tertiaryLightPrimary:focus svg *,
.icon.tertiaryLightPrimary:hover 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,
.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 { .tertiaryLightSecondary {

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

@@ -13,27 +13,24 @@
} }
.themeOne { .themeOne {
--font-color: var(--Scandic-Brand-Burgundy); --font-color: var(--Primary-Light-On-Surface-Text);
--script-color: var(--UI-Red-70); --script-color: var(--Primary-Light-On-Surface-Accent);
--divider-color: var(--UI-Red-10);
background: var(--Scandic-Brand-Pale-Peach); background: var(--Primary-Light-Surface-Normal);
} }
.themeTwo { .themeTwo {
--font-color: var(--Scandic-Brand-Dark-Green); --font-color: var(--Secondary-Light-On-Surface-Text);
--script-color: var(--UI-Green-70); --script-color: var(--Secondary-Light-On-Surface-Accent);
--divider-color: var(--UI-Green-10);
background: var(--Scandic-Brand-Light-Green); background: var(--Secondary-Light-Surface-Normal);
} }
.themeThree { .themeThree {
--font-color: var(--Scandic-Brand-Dark-Blue); --font-color: var(--Tertiary-Light-Surface-Text);
--script-color: var(--UI-Blue-70); --script-color: var(--Tertiary-Light-On-Surface-Accent);
--divider-color: var(--UI-Blue-10);
background: var(--Scandic-Brand-Pale-Yellow); background: var(--Tertiary-Light-Surface-Normal);
} }
.scriptContainer { .scriptContainer {

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

@@ -14,7 +14,7 @@
} }
.peach { .peach {
border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider); border-bottom-color: var(--Primary-Light-On-Surface-Divider);
} }
.beige { .beige {
@@ -22,7 +22,7 @@
} }
.white { .white {
border-bottom-color: var(--Scandic-Opacity-White-100); border-bottom-color: var(--UI-Opacity-White-100);
} }
.subtle { .subtle {

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

@@ -28,11 +28,11 @@
} }
.underscored { .underscored {
font-family: var(--typography-Body-Underlined-fontFamily); font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underlined-fontSize); font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underlined-fontWeight); font-weight: var(--typography-Body-Underline-fontWeight);
letter-spacing: var(--typography-Body-Underlined-letterSpacing); letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underlined-lineHeight); line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: underline; text-decoration: underline;
} }
@@ -56,11 +56,11 @@
.myPageMobileDropdown.active { .myPageMobileDropdown.active {
background-color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
font-family: var(--typography-Body-Underlined-fontFamily); font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underlined-fontSize); font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underlined-fontWeight); font-weight: var(--typography-Body-Underline-fontWeight);
letter-spacing: var(--typography-Body-Underlined-letterSpacing); letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underlined-lineHeight); line-height: var(--typography-Body-Underline-lineHeight);
} }
.shortcut { .shortcut {

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

@@ -6,7 +6,7 @@
} }
.progress { .progress {
background-color: var(--Scandic-Opacity-Almost-Black-100); background-color: var(--UI-Opacity-Almost-Black-100);
border-radius: 40px; border-radius: 40px;
height: 20px; height: 20px;
} }

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

@@ -17,10 +17,10 @@
.input { .input {
align-items: center; align-items: center;
background-color: var(--Scandic-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
border: none; border: none;
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-radius-Medium);
color: var(--Base-Text-UI-High-contrast); color: var(--UI-Text-High-contrast);
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
height: 60px; height: 60px;

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

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

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

@@ -26,12 +26,12 @@
} }
.underlined { .underlined {
font-family: var(--typography-Body-Underlined-fontFamily); font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underlined-fontSize); font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underlined-fontWeight); font-weight: var(--typography-Body-Underline-fontWeight);
letter-spacing: var(--typography-Body-Underlined-letterSpacing); letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underlined-lineHeight); line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: var(--typography-Body-Underlined-textDecoration); text-decoration: var(--typography-Body-Underline-textDecoration);
} }
.textAlignCenter { .textAlignCenter {
@@ -63,7 +63,7 @@
} }
.white { .white {
color: var(--Scandic-Opacity-White-100); color: var(--UI-Opacity-White-100);
} }
.peach50 { .peach50 {

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

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

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

@@ -46,5 +46,5 @@
} }
.textMediumContrast { .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, color,
textAlign, textAlign,
textTransform, textTransform,
type,
...props ...props
}: SubtitleProps) { }: SubtitleProps) {
if (checkForEmptyChildren(props.children) === 0) { if (checkForEmptyChildren(props.children) === 0) {
@@ -22,6 +23,7 @@ export default function Subtitle({
color, color,
textAlign, textAlign,
textTransform, textTransform,
type,
}) })
return <Comp className={classNames} {...props} /> return <Comp className={classNames} {...props} />
} }

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

@@ -1,17 +1,32 @@
.subtitle { .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); margin: var(--Spacing-x0);
padding: 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 { .regular {
text-transform: none; text-transform: none;
} }

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

@@ -17,11 +17,16 @@ const config = {
regular: styles.regular, regular: styles.regular,
uppercase: styles.uppercase, uppercase: styles.uppercase,
}, },
type: {
one: styles.one,
two: styles.two,
},
}, },
defaultVariants: { defaultVariants: {
color: "burgundy", color: "burgundy",
textAlign: "left", textAlign: "left",
textTransform: "regular", textTransform: "regular",
type: "one",
}, },
} as const } as const

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

@@ -109,5 +109,5 @@
} }
.white { .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", "@hookform/resolvers": "^3.3.4",
"@netlify/plugin-nextjs": "^5.1.1", "@netlify/plugin-nextjs": "^5.1.1",
"@radix-ui/react-slot": "^1.0.2", "@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", "@t3-oss/env-nextjs": "^0.9.2",
"@tanstack/react-query": "^5.28.6", "@tanstack/react-query": "^5.28.6",
"@trpc/client": "^11.0.0-next-beta.318", "@trpc/client": "^11.0.0-next-beta.318",
@@ -5246,7 +5246,7 @@
}, },
"node_modules/@scandic-hotels/design-system": { "node_modules/@scandic-hotels/design-system": {
"version": "0.1.0", "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": { "peerDependencies": {
"react": "^18.2.0", "react": "^18.2.0",
"react-aria-components": "^1.0.1", "react-aria-components": "^1.0.1",

2
package.json
View File

@@ -31,7 +31,7 @@
"@hookform/resolvers": "^3.3.4", "@hookform/resolvers": "^3.3.4",
"@netlify/plugin-nextjs": "^5.1.1", "@netlify/plugin-nextjs": "^5.1.1",
"@radix-ui/react-slot": "^1.0.2", "@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", "@t3-oss/env-nextjs": "^0.9.2",
"@tanstack/react-query": "^5.28.6", "@tanstack/react-query": "^5.28.6",
"@trpc/client": "^11.0.0-next-beta.318", "@trpc/client": "^11.0.0-next-beta.318",