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

feat(WEB-249): first iteration design system primitives (typography, grid)

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-05-29 13:57:03 +02:00
parent 08e7eb2fca
commit 00f99912fc
83 changed files with 1110 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/[lang]/(live)/(public)/[contentType]/[uid]/layout.module.css
View File

@@ -1,8 +1,8 @@
.layout {
--header-height: 4.5rem;
display: grid;
font-family: var(--ff-fira-sans);
background-color: var(--Scandic-Brand-Warm-White);
display: grid;
font-family: var(--typography-Body-Regular-fontFamily);
grid-template-rows: var(--header-height) auto 1fr;
}

2
app/[lang]/(live)/middleware-error/[status]/page.module.css
View File

@@ -1,3 +1,3 @@
.layout {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
}

2
app/[lang]/webview/layout.module.css
View File

@@ -1,5 +1,5 @@
.layout {
font-family: var(--ff-fira-sans);
background-color: var(--Scandic-Brand-Warm-White);
font-family: var(--typography-Body-Regular-fontFamily);
min-height: 100dvh;
}

2
components/Header/LanguageSwitcher/language.module.css
View File

@@ -1,7 +1,7 @@
.switcher {
align-items: center;
display: none;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.4rem;
font-weight: 400;
gap: 0.6rem;

2
components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx
View File

@@ -1,6 +1,6 @@
import { _ } from "@/lib/translation"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./howItWorks.module.css"

2
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
View File

@@ -9,7 +9,7 @@ import { _ } from "@/lib/translation"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "./data"

4
components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
View File

@@ -45,7 +45,7 @@
}
.benefits {
font-family: var(--fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
line-height: var(--typography-Body-Regular-lineHeight);
margin: 0;
@@ -53,7 +53,7 @@
}
.icon {
font-family: var(--fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
position: relative;
top: 0.3rem;
height: 1.4rem;

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx
View File

@@ -1,7 +1,7 @@
import { ChevronDown, Minus } from "react-feather"
import CheckCircle from "@/components/Icons/CheckCircle"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./benefitCard.module.css"

2
components/Loyalty/Blocks/DynamicContent/OverviewTable/Title/index.tsx
View File

@@ -1,6 +1,6 @@
import { Fragment } from "react"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./overviewTableTitle.module.css"

4
components/Loyalty/Blocks/DynamicContent/index.tsx
View File

@@ -1,6 +1,6 @@
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Subtitle"
import Title from "@/components/TempDesignSystem/Title"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import HowItWorks from "./HowItWorks"
import LoyaltyLevels from "./LoyaltyLevels"

4
components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
View File

@@ -6,7 +6,7 @@
}
.title {
font-family: var(--fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 700;
@@ -14,7 +14,7 @@
}
.value {
font-family: var(--fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
margin: 0;

2
components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
View File

@@ -1,6 +1,6 @@
import { _ } from "@/lib/translation"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import ContactRow from "./ContactRow"

2
components/Loyalty/Sidebar/JoinLoyalty/index.tsx
View File

@@ -3,7 +3,7 @@ import { _ } from "@/lib/translation"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import Contact from "./Contact"

2
components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
View File

@@ -13,7 +13,7 @@
}
.preamble {
font-family: var(--fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
line-height: 2.4rem;

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

@@ -13,7 +13,7 @@
}
.cardSubtitle {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 16px;
font-weight: 400;
line-height: 14.4px;

2
components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx
View File

@@ -5,7 +5,7 @@ import { serverClient } from "@/lib/trpc/server"
import Header from "@/components/MyPages/Blocks/Header"
import CardGrid from "@/components/TempDesignSystem/CardGrid"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import levelsData from "../data"

7
components/MyPages/Blocks/Benefits/NextLevel/next.module.css
View File

@@ -31,10 +31,9 @@
}
.level {
font-size: var(--typography-Script-Mobile-fontSize, 18px);
font-weight: var(--typography-Script-Mobile-fontWeight);
font-style: italic;
/* font-family: var(--ff-biro-script-plus); */
font-family: var(--typography-Script-2-fontFamily);
font-size: var(--typography-Script-2-Desktop-fontSize);
font-weight: var(--typography-Script-2-fontWeight);
}
.cardSubtitle {

4
components/MyPages/Blocks/Challenges/challenges.module.css
View File

@@ -17,7 +17,7 @@
.subtitle {
color: var(--some-black-color, #000);
/* font-family: var(--ff-biro-script-plus); */
font-family: var(--typography-Script-1-fontFamily);
font-size: 1.6rem;
font-weight: 400;
line-height: 1.8rem;
@@ -26,7 +26,7 @@
.title {
color: var(--some-black-color, #000);
/* font-family: var(--ff-brandon-text); */
font-family: var(--typography-Title-1-fontFamily);
font-size: 1.6rem;
font-weight: 900;
inline-size: 18rem;

2
components/MyPages/Blocks/Challenges/index.tsx
View File

@@ -1,7 +1,7 @@
import { _ } from "@/lib/translation"
import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./challenges.module.css"

4
components/MyPages/Blocks/Header/index.tsx
View File

@@ -1,6 +1,6 @@
import Link from "@/components/TempDesignSystem/Link"
import Subtitle from "@/components/TempDesignSystem/Subtitle"
import Title from "@/components/TempDesignSystem/Title"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./header.module.css"

4
components/MyPages/Blocks/Overview/Friend/index.tsx
View File

@@ -1,8 +1,8 @@
import { _ } from "@/lib/translation"
import { GoodFriend } from "@/components/Levels"
import BiroScript from "@/components/TempDesignSystem/BiroScript"
import Title from "@/components/TempDesignSystem/Title"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./friend.module.css"

4
components/MyPages/Blocks/Overview/Stats/NextLevel/index.tsx
View File

@@ -1,7 +1,7 @@
import { _ } from "@/lib/translation"
import BiroScript from "@/components/TempDesignSystem/BiroScript"
import Title from "@/components/TempDesignSystem/Title"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Title from "@/components/TempDesignSystem/Text/Title"
import Label from "../Label"

2
components/MyPages/Blocks/Overview/Stats/Points/index.tsx
View File

@@ -1,4 +1,4 @@
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import Label from "../Label"

4
components/MyPages/Blocks/Shortcuts/shortcuts.module.css
View File

@@ -9,7 +9,7 @@
}
.subtitle {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.8rem;
font-weight: 400;
line-height: 2.2rem;
@@ -27,7 +27,7 @@
border-radius: 0.4rem;
color: var(--some-black-color, #000);
display: flex;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 700;
gap: 0.4rem;

2
components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
View File

@@ -1,6 +1,6 @@
import { _ } from "@/lib/translation"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./emptyPreviousStays.module.css"

2
components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx
View File

@@ -2,7 +2,7 @@ import { _ } from "@/lib/translation"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./emptyUpcomingStays.module.css"

2
components/MyPages/Blocks/Stays/StayCard/index.tsx
View File

@@ -3,7 +3,7 @@ import { Calendar } from "react-feather"
import { dt } from "@/lib/dt"
import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./stay.module.css"

2
components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
View File

@@ -2,7 +2,7 @@ import { _ } from "@/lib/translation"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./emptyUpcomingStays.module.css"

2
components/MyPages/Header/User/user.module.css
View File

@@ -4,7 +4,7 @@
border-radius: 50%;
color: var(--some-white-color, #fff);
display: flex;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.2rem;
font-weight: 600;
height: 3.5rem;

2
components/MyPages/Sidebar/index.tsx
View File

@@ -5,7 +5,7 @@ import { logout } from "@/constants/routes/handleAuth"
import { serverClient } from "@/lib/trpc/server"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./sidebar.module.css"

21
components/MyProfile/Card/Title/index.tsx
View File

@@ -1,21 +0,0 @@
import { headingVariants } from "./variants"
import type { HeadingProps } from "@/types/components/myPages/myProfile/card/title"
export default function Title({
as,
children,
className = "",
level = "h1",
uppercase = false,
weight,
}: HeadingProps) {
const Hx = level
const classNames = headingVariants({
className,
text: uppercase ? "uppercase" : undefined,
type: as ?? level,
weight,
})
return <Hx className={classNames}>{children}</Hx>
}

68
components/MyProfile/Card/Title/title.module.css
View File

@@ -1,68 +0,0 @@
.heading {
color: var(--some-black-color, #2e2e2e);
/* font-family: var(--ff-brandon-text); */
letter-spacing: 6%;
margin: 0;
padding: 0;
}
.uppercase {
text-transform: uppercase;
}
.h1 {
font-size: 2.5rem;
line-height: 3.5rem;
}
.h2 {
font-size: 1.3rem;
line-height: 1.6rem;
}
.h3 {
font-size: 1.8rem;
}
.h4 {
font-size: 1.6rem;
}
.h5 {
font-size: 1.3rem;
}
.h6 {
font-size: 1rem;
}
.light {
font-weight: 300;
}
.regular {
font-weight: 400;
}
.medium {
font-weight: 500;
}
.semiBold {
font-weight: 600;
}
.bold {
font-weight: 700;
}
.black {
font-weight: 900;
}
/* @media screen and (min-width: 1367px) {
.h1 {
font-size: 3.8rem;
line-height: 4.5rem;
}
} */

33
components/MyProfile/Card/Title/variants.ts
View File

@@ -1,33 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./title.module.css"
const config = {
variants: {
text: {
uppercase: styles.uppercase,
},
type: {
h1: styles.h1,
h2: styles.h2,
h3: styles.h3,
h4: styles.h4,
h5: styles.h5,
h6: styles.h6,
},
weight: {
light: styles.light,
regular: styles.regular,
medium: styles.medium,
semiBold: styles.semiBold,
bold: styles.bold,
black: styles.black,
},
},
defaultVariants: {
type: "h1",
weight: "medium",
},
} as const
export const headingVariants = cva(styles.heading, config)

10
components/MyProfile/Card/index.tsx
View File

@@ -1,16 +1,16 @@
import { cva } from "class-variance-authority"
import Title from "./Title"
import styles from "./card.module.css"
import type { CardProps } from "@/types/components/myPages/myProfile/card/card"
const cardStyles = cva(styles.card)
export default function Card({ className, tag = "section", ...props }: CardProps) {
export default function Card({
className,
tag = "section",
...props
}: CardProps) {
const Cmp = tag
return <Cmp className={cardStyles({ className })} {...props} />
}
Card.Title = Title

3
components/MyProfile/CommunicationPreferences/index.tsx
View File

@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./com.module.css"
export default function CommunicationPreferences() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My communication preferences</Card.Title>
<Title level="h2">My communication preferences</Title>
</Card>
)
}

3
components/MyProfile/CreditCards/index.tsx
View File

@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./creditCards.module.css"
export default function CreditCards() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My credit cards</Card.Title>
<Title level="h2">My credit cards</Title>
</Card>
)
}

4
components/MyProfile/Field/field.module.css
View File

@@ -15,7 +15,7 @@
background-color: var(--some-white-color, #fff);
border-radius: 50%;
display: flex;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
grid-area: icon;
@@ -27,7 +27,7 @@
.label,
.content {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-weight: 400;
letter-spacing: -1.5%;
line-height: 2.4rem;

3
components/MyProfile/MembershipCard/index.tsx
View File

@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./membershipCard.module.css"
export default function MembershipCard() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>Membership cards</Card.Title>
<Title level="h2">Membership cards</Title>
</Card>
)
}

3
components/MyProfile/Password/index.tsx
View File

@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./password.module.css"
export default function Password() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>Password</Card.Title>
<Title level="h2">Password</Title>
</Card>
)
}

5
components/MyProfile/Profile/Container.tsx
View File

@@ -2,6 +2,7 @@ import { cva } from "class-variance-authority"
import Image from "@/components/Image"
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./profile.module.css"
@@ -24,7 +25,9 @@ export default function Container({
src="/_static/icons/account_circle.svg"
width={40}
/>
<Card.Title uppercase>{user.name}</Card.Title>
<Title as="h4" level="h2">
{user.name}
</Title>
</header>
{children}
</Card>

3
components/MyProfile/Wishes/index.tsx
View File

@@ -1,11 +1,12 @@
import Card from "@/components/MyProfile/Card"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./wishes.module.css"
export default function Wishes() {
return (
<Card className={styles.container}>
<Card.Title level="h2" uppercase>My wishes</Card.Title>
<Title level="h2">My wishes</Title>
</Card>
)
}

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

@@ -5,34 +5,34 @@
margin: 0;
padding: 0;
text-align: center;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-weight: 600;
line-height: 150%;
letter-spacing: 1%;
}
.primary {
color: var(--font-color,);
background-color: var(--background-color,);
color: var(--font-color);
background-color: var(--background-color);
}
.primary:hover,
.primary:active,
.primary:focus {
background-color: var(--hover-background,);
color: var(--hover-color,);
background-color: var(--hover-background);
color: var(--hover-color);
}
.secondary {
background-color: transparent;
border: 0.1rem solid var(--background-color);
color: var(--background-color,);
color: var(--background-color);
}
.secondary:hover,
.secondary:active,
.secondary:focus {
border: 0.1rem solid var(--hover-color,);
border: 0.1rem solid var(--hover-color);
color: var(--hover-color);
}
@@ -66,7 +66,7 @@
.medium {
height: 3rem;
padding: 1.2rem var(--Spacing-x2,);
padding: 1.2rem var(--Spacing-x2);
font-size: 1.6rem;
}
@@ -80,68 +80,59 @@
.primaryLight {
--font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal,);
--hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,);
--hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,);
--background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal);
--hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover);
--hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
--disabled-background-color: var(
--Theme-Primary-Light-Button-Primary-Fill-Disabled,
--Theme-Primary-Light-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled,);
--disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
}
.primaryDark {
--font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Primary-Dark-Button-Primary-Fill-Disabled,
--Theme-Primary-Dark-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled,);
--disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
}
.secondaryLight {
--font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Secondary-Light-Button-Primary-Fill-Disabled,
--Theme-Secondary-Light-Button-Primary-Fill-Disabled
);
--disabled-color: var(
--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled,
--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled
);
}
.secondaryDark {
--font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Secondary-Dark-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled,
--Theme-Secondary-Dark-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
}
.tertiaryLight {
--font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Tertiary-Light-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled,
--Theme-Tertiary-Light-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
}
.tertiaryDark {
@@ -149,9 +140,8 @@
--background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled,
--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled,);
--disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}

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

@@ -45,7 +45,7 @@
.scriptedTitle {
color: var(--script-color);
font-family: var(--ff-biro-script-plus);
font-family: var(--typography-Script-2-fontFamily);
font-size: var(--typography-Script-2-fontSize);
font-weight: var(--typography-Script-2-fontWeight);
line-height: var(--typography-Script-2-lineHeight);

2
components/TempDesignSystem/Card/index.tsx
View File

@@ -1,7 +1,7 @@
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Title"
import Title from "@/components/TempDesignSystem/Text/Title"
import { cardVariants } from "./variants"

2
components/TempDesignSystem/Form/Country/country.module.css
View File

@@ -24,7 +24,7 @@
.input,
.listBoxItem {
color: var(--some-black-color, #757575);
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
letter-spacing: -1.5%;

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

@@ -3,7 +3,7 @@
}
.label {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.5rem;
font-weight: 400;
}
@@ -21,7 +21,7 @@
border-radius: var(--radius);
color: var(--some-black-color, #757575);
display: grid;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
gap: 1rem;

2
components/TempDesignSystem/Form/ErrorMessage/error.module.css
View File

@@ -1,6 +1,6 @@
.message {
color: var(--some-red-color, #d64242);
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.4rem;
font-weight: 400;
line-height: 2.2rem;

2
components/TempDesignSystem/Form/Input/input.module.css
View File

@@ -2,7 +2,7 @@
border: 0.2rem solid var(--some-black-color, #757575);
border-radius: 0.4rem;
color: var(--some-black-color, #757575);
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
height: 4rem;

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

@@ -4,7 +4,7 @@
.label {
color: var(--Base-Text-UI-Placeholder);
font-family: var(--ff-fira-sans);
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: 400;
position: absolute;
@@ -24,7 +24,7 @@
border-radius: 0.8rem;
color: var(--some-black-color, #757575);
display: grid;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: 1.6rem;
font-weight: 400;
gap: 1rem;

14
components/TempDesignSystem/Grid/Item/index.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Slot } from "@radix-ui/react-slot"
import { itemVariants } from "./variants"
import type { ItemProps } from "./item"
export default function Item({ columns, order, rows, ...props }: ItemProps) {
const classNames = itemVariants({
columns,
order,
rows,
})
return <Slot {...props} className={classNames} />
}

372
components/TempDesignSystem/Grid/Item/item.module.css Normal file
View File

@@ -0,0 +1,372 @@
.item {
margin: 0;
padding: 0;
}
.c2r1 {
grid-column: span 4;
grid-row: span 1;
}
.c2r2 {
grid-column: span 4;
grid-row: span 1;
}
.c2r3 {
grid-column: span 4;
grid-row: span 1;
}
.c2r6 {
grid-column: span 4;
grid-row: span 1;
}
.c3r1 {
grid-column: span 4;
grid-row: span 1;
}
.c3r2 {
grid-column: span 4;
grid-row: span 1;
}
.c3r3 {
grid-column: span 4;
grid-row: span 1;
}
.c3r6 {
grid-column: span 4;
grid-row: span 1;
}
.c4r1 {
grid-column: span 4;
grid-row: span 1;
}
.c4r2 {
grid-column: span 4;
grid-row: span 1;
}
.c4r3 {
grid-column: span 4;
grid-row: span 1;
}
.c4r6 {
grid-column: span 4;
grid-row: span 1;
}
.c6r1 {
grid-column: span 4;
grid-row: span 1;
}
.c6r2 {
grid-column: span 4;
grid-row: span 1;
}
.c6r3 {
grid-column: span 4;
grid-row: span 1;
}
.c6r6 {
grid-column: span 4;
grid-row: span 1;
}
.c8r1 {
grid-column: span 4;
grid-row: span 1;
}
.c8r2 {
grid-column: span 4;
grid-row: span 1;
}
.c8r3 {
grid-column: span 4;
grid-row: span 1;
}
.c8r6 {
grid-column: span 4;
grid-row: span 1;
}
.order1 {
order: 1;
}
.order2 {
order: 4;
}
.order3 {
order: 7;
}
.order4 {
order: 2;
}
.order5 {
order: 5;
}
.order6 {
order: 8;
}
.order7 {
order: 3;
}
.order8 {
order: 6;
}
.order9 {
order: 9;
}
@media screen and (min-width: 768px) {
.c2r1 {
grid-column: span 4;
grid-row: span 1;
}
.c2r2 {
grid-column: span 4;
grid-row: span 1;
}
.c2r3 {
grid-column: span 4;
grid-row: span 1;
}
.c2r6 {
grid-column: span 4;
grid-row: span 1;
}
.c3r1 {
grid-column: span 4;
grid-row: span 1;
}
.c3r2 {
grid-column: span 4;
grid-row: span 1;
}
.c3r3 {
grid-column: span 4;
grid-row: span 1;
}
.c3r6 {
grid-column: span 4;
grid-row: span 1;
}
.c4r1 {
grid-column: span 4;
grid-row: span 1;
}
.c4r2 {
grid-column: span 4;
grid-row: span 1;
}
.c4r3 {
grid-column: span 4;
grid-row: span 1;
}
.c4r6 {
grid-column: span 4;
grid-row: span 1;
}
.c6r1 {
grid-column: span 8;
grid-row: span 1;
}
.c6r2 {
grid-column: span 8;
grid-row: span 1;
}
.c6r3 {
grid-column: span 8;
grid-row: span 1;
}
.c6r6 {
grid-column: span 8;
grid-row: span 1;
}
.c8r1 {
grid-column: span 8;
grid-row: span 1;
}
.c8r2 {
grid-column: span 8;
grid-row: span 1;
}
.c8r3 {
grid-column: span 8;
grid-row: span 1;
}
.c8r6 {
grid-column: span 8;
grid-row: span 1;
}
}
@media screen and (min-width: 1367px) {
.c2r1 {
grid-column: span 2;
grid-row: span 1;
}
.c2r2 {
grid-column: span 2;
grid-row: span 2;
}
.c2r3 {
grid-column: span 2;
grid-row: span 3;
}
.c2r6 {
grid-column: span 2;
grid-row: span 6;
}
.c3r1 {
grid-column: span 3;
grid-row: span 1;
}
.c3r2 {
grid-column: span 3;
grid-row: span 2;
}
.c3r3 {
grid-column: span 3;
grid-row: span 3;
}
.c3r6 {
grid-column: span 3;
grid-row: span 6;
}
.c4r1 {
grid-column: span 4;
grid-row: span 1;
}
.c4r2 {
grid-column: span 4;
grid-row: span 2;
}
.c4r3 {
grid-column: span 4;
grid-row: span 3;
}
.c4r6 {
grid-column: span 4;
grid-row: span 6;
}
.c6r1 {
grid-column: span 6;
grid-row: span 1;
}
.c6r2 {
grid-column: span 6;
grid-row: span 2;
}
.c6r3 {
grid-column: span 6;
grid-row: span 3;
}
.c6r6 {
grid-column: span 6;
grid-row: span 6;
}
.c8r1 {
grid-column: span 8;
grid-row: span 1;
}
.c8r2 {
grid-column: span 8;
grid-row: span 2;
}
.c8r3 {
grid-column: span 8;
grid-row: span 3;
}
.c8r6 {
grid-column: span 8;
grid-row: span 6;
}
.order2 {
order: 2;
}
.order3 {
order: 3;
}
.order4 {
order: 4;
}
.order5 {
order: 5;
}
.order6 {
order: 6;
}
.order7 {
order: 7;
}
.order8 {
order: 8;
}
}

7
components/TempDesignSystem/Grid/Item/item.ts Normal file
View File

@@ -0,0 +1,7 @@
import { itemVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
export interface ItemProps
extends React.HTMLAttributes<HTMLElement>,
VariantProps<typeof itemVariants> {}

138
components/TempDesignSystem/Grid/Item/variants.ts Normal file
View File

@@ -0,0 +1,138 @@
import { cva } from "class-variance-authority"
import styles from "./item.module.css"
export const itemVariants = cva(styles.item, {
variants: {
order: {
1: styles.order1,
2: styles.order2,
3: styles.order3,
4: styles.order4,
5: styles.order5,
6: styles.order6,
7: styles.order7,
8: styles.order8,
9: styles.order9,
},
// These are only placeholder classes
// so that we can use compoundVariants
columns: {
2: styles.colTwo,
3: styles.colThree,
4: styles.colFour,
6: styles.colSix,
8: styles.colEight,
},
// These are only placeholder classes
// so that we can use compoundVariants
rows: {
1: styles.rowOne,
2: styles.rowTwo,
3: styles.rowThree,
6: styles.rowSix,
},
},
compoundVariants: [
{
class: styles.c2r1,
columns: 2,
rows: 1,
},
{
class: styles.c2r2,
columns: 2,
rows: 2,
},
{
class: styles.c2r3,
columns: 2,
rows: 3,
},
{
class: styles.c2r6,
columns: 2,
rows: 6,
},
{
class: styles.c3r1,
columns: 3,
rows: 1,
},
{
class: styles.c3r2,
columns: 3,
rows: 2,
},
{
class: styles.c3r3,
columns: 3,
rows: 3,
},
{
class: styles.c3r6,
columns: 3,
rows: 6,
},
{
class: styles.c4r1,
columns: 4,
rows: 1,
},
{
class: styles.c4r2,
columns: 4,
rows: 2,
},
{
class: styles.c4r3,
columns: 4,
rows: 3,
},
{
class: styles.c4r6,
columns: 4,
rows: 6,
},
{
class: styles.c6r1,
columns: 6,
rows: 1,
},
{
class: styles.c6r2,
columns: 6,
rows: 2,
},
{
class: styles.c6r3,
columns: 6,
rows: 3,
},
{
class: styles.c6r6,
columns: 6,
rows: 6,
},
{
class: styles.c8r1,
columns: 8,
rows: 1,
},
{
class: styles.c8r2,
columns: 8,
rows: 2,
},
{
class: styles.c8r3,
columns: 8,
rows: 3,
},
{
class: styles.c8r6,
columns: 8,
rows: 6,
},
],
})

18
components/TempDesignSystem/Grid/grid.module.css Normal file
View File

@@ -0,0 +1,18 @@
.grid {
display: grid;
gap: var(--Spacing-x2);
grid-auto-flow: dense;
grid-template-columns: repeat(4, 1fr);
}
@media screen and (min-width: 768px) {
.grid {
grid-template-columns: repeat(8, 1fr);
}
}
@media screen and (min-width: 1367px) {
.grid {
grid-template-columns: repeat(12, 1fr);
}
}

30
components/TempDesignSystem/Grid/grid.ts Normal file
View File

@@ -0,0 +1,30 @@
import type { Edges } from "@/types/requests/utils/edges"
import type { TypenameInterface } from "@/types/requests/utils/typename"
export type Order = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
export type ColSpan = 2 | 3 | 4 | 6 | 8
export type RowSpan = 1 | 2 | 3 | 6
// TODO: Extend query and fix type accordingly
export interface Row extends TypenameInterface<"Card"> {
title: string
}
type Column = {
span: ColSpan
rows: {
rowConnection: Edges<Row>
}[]
}
export interface Grid {
columns: Column[]
}
export interface GridProps
extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
children: (row: Row) => React.ReactNode
items: Grid
tag?: "aside" | "article" | "div" | "main" | "section"
}

66
components/TempDesignSystem/Grid/index.tsx Normal file
View File

@@ -0,0 +1,66 @@
import Item from "./Item"
import styles from "./grid.module.css"
import type { GridProps, Order, RowSpan } from "./grid"
export default function Grid({ children, items, tag = "section" }: GridProps) {
const Elm = tag
const allRows: number[] = items.columns.map((col) => col.rows.length)
const onlySingleRows = allRows.every((row) => row === 1)
const oneColumnWithTwoRows = allRows.includes(2)
const oneColumnWithThreeRows = allRows.includes(3)
/**
* When we have one column with 2 rows and another with 3,
* we have to reach the closest denominator which is 6 to be
* able to have the column with 2 rows span half the grid each.
*/
const doubleTheRows = oneColumnWithTwoRows && oneColumnWithThreeRows
return (
<Elm className={styles.grid}>
{items.columns.map((column, columnIndex) => {
const rows = column.rows.map((row) => row.rowConnection.edges).flat()
let rowSpan: RowSpan = 1
if (!onlySingleRows) {
if (doubleTheRows) {
switch (rows.length) {
case 1:
rowSpan = 6
break
case 2:
rowSpan = 3
break
case 3:
rowSpan = 2
break
}
} else if (oneColumnWithTwoRows) {
if (rows.length === 1) {
rowSpan = 2
}
} else if (oneColumnWithThreeRows) {
if (rows.length === 1) {
rowSpan = 3
}
}
}
return rows.map(({ node: row }, rowIndex) => {
const order = (columnIndex +
1 +
rowIndex * items.columns.length) as Order
return (
<Item
key={order}
columns={column.span}
order={order}
rows={rowSpan}
>
{children(row)}
</Item>
)
})
})}
</Elm>
)
}

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

@@ -3,7 +3,7 @@
}
.default {
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
}
.sidebar {
@@ -28,4 +28,4 @@
height: 0.2rem;
position: absolute;
width: 100%;
}
}

32
components/TempDesignSystem/BiroScript/biroScript.module.css → components/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

@@ -4,39 +4,27 @@
}
.one {
font-size: var(--typography-Script-1-Mobile-fontSize);
font-size: clamp(
var(--typography-Script-1-Mobile-fontSize),
1.3vw + 14px,
var(--typography-Script-1-Desktop-fontSize)
);
font-weight: var(--typography-Script-1-fontWeight);
letter-spacing: var(--typography-Script-1-letterSpacing);
line-height: var(--typography-Script-1-lineHeight);
}
.two {
font-size: var(--typography-Script-2-Mobile-fontSize);
font-size: clamp(
var(--typography-Script-2-Mobile-fontSize),
0.6vw + 15px,
var(--typography-Script-2-Desktop-fontSize)
);
font-weight: var(--typography-Script-2-fontWeight);
letter-spacing: var(--typography-Script-2-letterSpacing);
line-height: var(--typography-Script-2-lineHeight);
}
@media screen and (min-width: 768px) {
.one {
font-size: var(--typography-Script-1-Tablet-estimate-fontSize);
}
.two {
font-size: var(--typography-Script-2-Tablet-estimate-fontSize);
}
}
@media screen and (min-width: 1367px) {
.one {
font-size: var(--typography-Script-1-Desktop-fontSize);
}
.two {
font-size: var(--typography-Script-2-Desktop-fontSize);
}
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}

0
components/TempDesignSystem/BiroScript/biroScript.ts → components/TempDesignSystem/Text/BiroScript/biroScript.ts
View File

0
components/TempDesignSystem/BiroScript/index.tsx → components/TempDesignSystem/Text/BiroScript/index.tsx
View File

0
components/TempDesignSystem/BiroScript/variants.ts → components/TempDesignSystem/Text/BiroScript/variants.ts
View File

44
components/TempDesignSystem/Text/Body/body.module.css Normal file
View File

@@ -0,0 +1,44 @@
.body {
margin: 0;
padding: 0;
}
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
}
.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);
}
.black {
/* No black variable exist yet */
color: #000;
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}

7
components/TempDesignSystem/Text/Body/body.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bodyVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
export interface BodyProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
VariantProps<typeof bodyVariants> {}

17
components/TempDesignSystem/Text/Body/index.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { bodyVariants } from "./variants"
import type { BodyProps } from "./body"
export default function Body({
children,
className = "",
color,
textTransform,
}: BodyProps) {
const classNames = bodyVariants({
className,
color,
textTransform,
})
return <p className={classNames}>{children}</p>
}

24
components/TempDesignSystem/Text/Body/variants.ts Normal file
View File

@@ -0,0 +1,24 @@
import { cva } from "class-variance-authority"
import styles from "./body.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
},
},
defaultVariants: {
color: "black",
textTransform: "regular",
},
} as const
export const bodyVariants = cva(styles.body, config)

35
components/TempDesignSystem/Text/Caption/caption.module.css Normal file
View File

@@ -0,0 +1,35 @@
.body {
margin: 0;
padding: 0;
}
.bold {
font-family: var(--typography-Caption-Bold-fontFamily);
font-size: var(--typography-Caption-Bold-fontSize);
font-weight: var(--typography-Caption-Bold-fontWeight);
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight);
text-decoration: var(--typography-Caption-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
font-weight: var(--typography-Caption-Regular-fontWeight);
letter-spacing: var(--typography-Caption-Regular-letterSpacing);
line-height: var(--typography-Caption-Regular-lineHeight);
text-decoration: var(--typography-Caption-Regular-textDecoration);
}
.black {
/* No black variable exist yet */
color: #000;
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}

7
components/TempDesignSystem/Text/Caption/caption.ts Normal file
View File

@@ -0,0 +1,7 @@
import { captionVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
export interface CaptionProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
VariantProps<typeof captionVariants> {}

17
components/TempDesignSystem/Text/Caption/index.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { captionVariants } from "./variants"
import type { CaptionProps } from "./caption"
export default function Caption({
children,
className = "",
color,
textTransform,
}: CaptionProps) {
const classNames = captionVariants({
className,
color,
textTransform,
})
return <p className={classNames}>{children}</p>
}

23
components/TempDesignSystem/Text/Caption/variants.ts Normal file
View File

@@ -0,0 +1,23 @@
import { cva } from "class-variance-authority"
import styles from "./caption.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
},
},
defaultVariants: {
color: "black",
textTransform: "regular",
},
} as const
export const captionVariants = cva(styles.caption, config)

35
components/TempDesignSystem/Text/Footnote/footnote.module.css Normal file
View File

@@ -0,0 +1,35 @@
.body {
margin: 0;
padding: 0;
}
.bold {
font-family: var(--typography-Footnote-Bold-fontFamily);
font-size: var(--typography-Footnote-Bold-fontSize);
font-weight: var(--typography-Footnote-Bold-fontWeight);
letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
line-height: var(--typography-Footnote-Bold-lineHeight);
text-decoration: var(--typography-Footnote-Bold-textDecoration);
}
.regular {
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: var(--typography-Footnote-Regular-fontWeight);
letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
line-height: var(--typography-Footnote-Regular-lineHeight);
text-decoration: var(--typography-Footnote-Regular-textDecoration);
}
.black {
/* No black variable exist yet */
color: #000;
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}

7
components/TempDesignSystem/Text/Footnote/footnote.ts Normal file
View File

@@ -0,0 +1,7 @@
import { footnoteVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
export interface FootnoteProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
VariantProps<typeof footnoteVariants> {}

17
components/TempDesignSystem/Text/Footnote/index.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { footnoteVariants } from "./variants"
import type { FootnoteProps } from "./footnote"
export default function Footnote({
children,
className = "",
color,
textTransform,
}: FootnoteProps) {
const classNames = footnoteVariants({
className,
color,
textTransform,
})
return <p className={classNames}>{children}</p>
}

23
components/TempDesignSystem/Text/Footnote/variants.ts Normal file
View File

@@ -0,0 +1,23 @@
import { cva } from "class-variance-authority"
import styles from "./footnote.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
},
},
defaultVariants: {
color: "black",
textTransform: "regular",
},
} as const
export const footnoteVariants = cva(styles.footnote, config)

0
components/TempDesignSystem/Subtitle/index.tsx → components/TempDesignSystem/Text/Subtitle/index.tsx
View File

18
components/TempDesignSystem/Subtitle/subtitle.module.css → components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -1,6 +1,10 @@
.subtitle {
font-family: var(--typography-Subtitle-fontFamily);
font-size: var(--typography-Subtitle-Mobile-fontSize);
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);
@@ -8,18 +12,6 @@
padding: 0;
}
@media screen and (min-width: 768px) {
.subtitle {
font-size: var(--typography-Subtitle-Tablet-estimate-fontSize);
}
}
@media screen and (min-width: 1367px) {
.subtitle {
font-size: var(--typography-Subtitle-Desktop-fontSize);
}
}
.regular {
text-transform: none;
}

0
components/TempDesignSystem/Subtitle/subtitle.ts → components/TempDesignSystem/Text/Subtitle/subtitle.ts
View File

0
components/TempDesignSystem/Subtitle/variants.ts → components/TempDesignSystem/Text/Subtitle/variants.ts
View File

0
components/TempDesignSystem/Title/index.tsx → components/TempDesignSystem/Text/Title/index.tsx
View File

149
components/TempDesignSystem/Title/title.module.css → components/TempDesignSystem/Text/Title/title.module.css
View File

@@ -3,6 +3,71 @@
padding: 0;
}
.h1 {
font-family: var(--typography-Title-1-fontFamily);
font-size: clamp(
var(--typography-Title-1-Mobile-fontSize),
2.6vw + 27px,
var(--typography-Title-1-Desktop-fontSize)
);
font-weight: var(--typography-Title-1-fontWeight);
letter-spacing: var(--typography-Title-1-letterSpacing);
line-height: var(--typography-Title-1-lineHeight);
text-decoration: var(--typography-Title-1-textDecoration);
}
.h2 {
font-family: var(--typography-Title-2-fontFamily);
font-size: clamp(
var(--typography-Title-2-Mobile-fontSize),
2vw + 20px,
var(--typography-Title-2-Desktop-fontSize)
);
font-weight: var(--typography-Title-2-fontWeight);
letter-spacing: var(--typography-Title-2-letterSpacing);
line-height: var(--typography-Title-2-lineHeight);
text-decoration: var(--typography-Title-2-textDecoration);
}
.h3 {
font-family: var(--typography-Title-3-fontFamily);
font-size: clamp(
var(--typography-Title-3-Mobile-fontSize),
0.6vw + 27px,
var(--typography-Title-3-Desktop-fontSize)
);
font-weight: var(--typography-Title-3-fontWeight);
letter-spacing: var(--typography-Title-3-letterSpacing);
line-height: var(--typography-Title-3-lineHeight);
text-decoration: var(--typography-Title-3-textDecoration);
}
.h4 {
font-family: var(--typography-Title-4-fontFamily);
font-size: clamp(
var(--typography-Title-4-Mobile-fontSize),
0.6vw + 19px,
var(--typography-Title-4-Desktop-fontSize)
);
font-weight: var(--typography-Title-4-fontWeight);
letter-spacing: var(--typography-Title-4-letterSpacing);
line-height: var(--typography-Title-4-lineHeight);
text-decoration: var(--typography-Title-4-textDecoration);
}
.h5 {
font-family: var(--typography-Title-5-fontFamily);
font-size: clamp(
var(--typography-Title-5-Mobile-fontSize),
0.3vw + 17px,
var(--typography-Title-5-Desktop-fontSize)
);
font-weight: var(--typography-Title-5-fontWeight);
letter-spacing: var(--typography-Title-5-letterSpacing);
line-height: var(--typography-Title-5-lineHeight);
text-decoration: var(--typography-Title-5-textDecoration);
}
.regular {
text-transform: none;
}
@@ -11,90 +76,6 @@
text-transform: uppercase;
}
.h1 {
font-family: var(--typography-Title-1-fontFamily);
font-size: var(--typography-Title-1-Mobile-fontSize);
font-weight: var(--typography-Title-1-fontWeight);
letter-spacing: var(--typography-Title-1-letterSpacing);
line-height: var(--typography-Title-1-lineHeight);
}
.h2 {
font-family: var(--typography-Title-2-fontFamily);
font-size: var(--typography-Title-2-Mobile-fontSize);
font-weight: var(--typography-Title-2-fontWeight);
letter-spacing: var(--typography-Title-2-letterSpacing);
line-height: var(--typography-Title-2-lineHeight);
}
.h3 {
font-family: var(--typography-Title-3-fontFamily);
font-size: var(--typography-Title-3-Mobile-fontSize);
font-weight: var(--typography-Title-3-fontWeight);
letter-spacing: var(--typography-Title-3-letterSpacing);
line-height: var(--typography-Title-3-lineHeight);
}
.h4 {
font-family: var(--typography-Title-4-fontFamily);
font-size: var(--typography-Title-4-Mobile-fontSize);
font-weight: var(--typography-Title-4-fontWeight);
letter-spacing: var(--typography-Title-4-letterSpacing);
line-height: var(--typography-Title-4-lineHeight);
}
.h5 {
font-family: var(--typography-Title-5-fontFamily);
font-size: var(--typography-Title-5-Mobile-fontSize);
font-weight: var(--typography-Title-5-fontWeight);
letter-spacing: var(--typography-Title-5-letterSpacing);
line-height: var(--typography-Title-5-lineHeight);
}
@media screen and (min-width: 768px) {
.h1 {
font-size: var(--typography-Title-1-Tablet-estimate-fontSize);
}
.h2 {
font-size: var(--typography-Title-2-Tablet-estimate-fontSize);
}
.h3 {
font-size: var(--typography-Title-3-Tablet-estimate-fontSize);
}
.h4 {
font-size: var(--typography-Title-4-Tablet-estimate-fontSize);
}
.h5 {
font-size: var(--typography-Title-5-Tablet-estimate-fontSize);
}
}
@media screen and (min-width: 1367px) {
.h1 {
font-size: var(--typography-Title-1-Desktop-fontSize);
}
.h2 {
font-size: var(--typography-Title-2-Desktop-fontSize);
}
.h3 {
font-size: var(--typography-Title-3-Desktop-fontSize);
}
.h4 {
font-size: var(--typography-Title-4-Desktop-fontSize);
}
.h5 {
font-size: var(--typography-Title-5-Desktop-fontSize);
}
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}

0
components/TempDesignSystem/Title/title.ts → components/TempDesignSystem/Text/Title/title.ts
View File

0
components/TempDesignSystem/Title/variants.ts → components/TempDesignSystem/Text/Title/variants.ts
View File

17
lib/graphql/Fragments/Grid.graphql Normal file
View File

@@ -0,0 +1,17 @@
fragment Grid on Grid {
columns {
span
rows {
rowConnection {
edges {
node {
__typename
... on Card {
title
}
}
}
}
}
}
}

11
types/components/myPages/myProfile/card/title.ts
View File

@@ -1,11 +0,0 @@
import { headingVariants } from "@/components/MyProfile/Card/Title/variants"
import type { VariantProps } from "class-variance-authority"
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
as?: HeadingLevel
level?: HeadingLevel
uppercase?: boolean
}