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

feat(BOOK-757): Replaced Biroscript component with Typography

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-01-20 12:37:05 +00:00
parent 9e373ed600
commit 510f25a812
17 changed files with 92 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/scandic-web/components/TempDesignSystem/Card/card.module.css
View File

@@ -62,6 +62,10 @@
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Light-On-Surface-Accent);
}
}
.themeTwo {
@@ -72,6 +76,10 @@
.bodyText {
color: var(--Secondary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Secondary-Light-On-Surface-Accent);
}
}
.themeThree {
@@ -82,6 +90,10 @@
.bodyText {
color: var(--Tertiary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Tertiary-Light-On-Surface-Accent);
}
}
.themePrimaryDark {
@@ -92,6 +104,10 @@
.bodyText {
color: var(--Primary-Dark-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Dark-On-Surface-Accent);
}
}
.themePrimaryDim {
@@ -102,6 +118,10 @@
.bodyText {
color: var(--Primary-Dim-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Dim-On-Surface-Accent);
}
}
.themePrimaryInverted {
@@ -112,6 +132,10 @@
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Light-On-Surface-Accent);
}
}
.themePrimaryStrong {
@@ -122,6 +146,10 @@
.bodyText {
color: var(--Primary-Strong-On-Surface-Text);
}
.scriptedTitle {
color: var(--Primary-Strong-On-Surface-Accent);
}
}
.themeImage {
@@ -134,6 +162,10 @@
.content {
position: absolute;
}
.scriptedTitle {
color: var(--Base-Text-Inverted);
}
}
.scriptContainer {
@@ -144,6 +176,8 @@
.scriptedTitle {
padding: var(--Space-x1);
margin: 0;
transform: rotate(-3deg);
transform-origin: left;
}
.buttonContainer {

16
apps/scandic-web/components/TempDesignSystem/Card/index.tsx
View File

@@ -5,9 +5,7 @@ import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import { getButtonTheme, getScriptFontColor } from "./utils"
import { getButtonTheme } from "./utils"
import { cardVariants } from "./variants"
import styles from "./card.module.css"
@@ -29,7 +27,6 @@ export default function Card({
height,
}: CardProps) {
const buttonTheme = getButtonTheme(theme)
const scriptFontColor = getScriptFontColor(theme)
return (
<article
@@ -59,14 +56,9 @@ export default function Card({
<div className={styles.content}>
{scriptedTopTitle && (
<section className={styles.scriptContainer}>
<BiroScript
className={styles.scriptedTitle}
type="two"
tilted="small"
color={scriptFontColor}
>
{scriptedTopTitle}
</BiroScript>
<Typography variant="Title/Decorative/md">
<span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
</Typography>
</section>
)}
<Typography variant="Title/smLowCase" className={styles.heading}>

25
apps/scandic-web/components/TempDesignSystem/Card/utils.ts
View File

@@ -1,31 +1,6 @@
import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
import type { VariantProps } from "class-variance-authority"
import type { CardProps } from "@/components/TempDesignSystem/Card/card"
import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
export function getScriptFontColor(
theme: CardProps["theme"]
): VariantProps<typeof biroScriptVariants>["color"] {
switch (theme) {
case "one":
return "primaryLightOnSurfaceAccent"
case "two":
return "secondaryLightAccent"
case "three":
return "tertiaryLightAccent"
case "primaryDark":
return "pink"
case "primaryDim":
return "primaryDimAccent"
case "primaryInverted":
return "primaryLightOnSurfaceAccent"
case "primaryStrong":
return "primaryStrongAccent"
case "image":
return "baseText"
}
}
export function getButtonTheme(
theme: CardProps["theme"]

99
apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

@@ -1,99 +0,0 @@
.text {
display: block;
font-family: var(--typography-Script-1-fontFamily);
text-transform: none;
}
.one {
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: 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);
}
.tiltedExtraSmall {
transform: rotate(-2deg);
}
.tiltedSmall {
transform: rotate(-3deg);
}
.tiltedMedium {
transform: rotate(-4deg) translate(0px, -15px);
}
.tiltedLarge {
transform: rotate(-13deg) translate(0px, -15px);
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.peach80 {
color: var(--Base-Text-Medium-contrast);
}
.plosa {
color: var(--Primary-Light-On-Surface-Accent);
}
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.pink {
color: var(--Primary-Dark-On-Surface-Accent);
}
.secondaryLightAccent {
color: var(--Secondary-Light-On-Surface-Accent);
}
.tertiaryLightAccent {
color: var(--Tertiary-Light-On-Surface-Accent);
}
.primaryDimAccent {
color: var(--Primary-Dim-On-Surface-Accent);
}
.primaryStrongAccent {
color: var(--Primary-Strong-On-Surface-Accent);
}
.baseText {
color: var(--Base-Text-Inverted);
}

9
apps/scandic-web/components/TempDesignSystem/Text/BiroScript/biroScript.ts
View File

@@ -1,9 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { biroScriptVariants } from "./variants"
export interface BiroScriptProps
extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
VariantProps<typeof biroScriptVariants> {
asChild?: boolean
}

25
apps/scandic-web/components/TempDesignSystem/Text/BiroScript/index.tsx
View File

@@ -1,25 +0,0 @@
import { Slot } from "@radix-ui/react-slot"
import { biroScriptVariants } from "./variants"
import type { BiroScriptProps } from "./biroScript"
export default function BiroScript({
asChild = false,
className,
color,
textAlign,
type,
tilted,
...props
}: BiroScriptProps) {
const Comp = asChild ? Slot : "span"
const classNames = biroScriptVariants({
className,
color,
textAlign,
type,
tilted,
})
return <Comp className={classNames} {...props} />
}

41
apps/scandic-web/components/TempDesignSystem/Text/BiroScript/variants.ts
View File

@@ -1,41 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./biroScript.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
peach80: styles.peach80,
primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red,
pink: styles.pink,
secondaryLightAccent: styles.secondaryLightAccent,
tertiaryLightAccent: styles.tertiaryLightAccent,
primaryDimAccent: styles.primaryDimAccent,
primaryStrongAccent: styles.primaryStrongAccent,
baseText: styles.baseText,
},
textAlign: {
center: styles.center,
left: styles.left,
},
type: {
one: styles.one,
two: styles.two,
},
tilted: {
extraSmall: styles.tiltedExtraSmall,
small: styles.tiltedSmall,
medium: styles.tiltedMedium,
large: styles.tiltedLarge,
},
},
defaultVariants: {
type: "one",
},
} as const
export const biroScriptVariants = cva(styles.text, config)