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

chore: update design system tokens

Browse Source
This commit is contained in:
Christel Westerberg
2024-07-10 07:36:30 +02:00
parent 21f07c584b
commit 7068fb4e15
22 changed files with 116 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
font-weight: 500;
letter-spacing: var(--typography-Body-Bold-letterSpacing);
line-height: var(--typography-Body-Bold-lineHeight);
text-decoration: var(--typography-Body-Bold-textDecoration);
@@ -19,7 +19,7 @@
.regular {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
font-weight: 400;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
@@ -28,7 +28,7 @@
.underlined {
font-family: var(--typography-Body-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize);
font-weight: var(--typography-Body-Underline-fontWeight);
font-weight: 500;
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: var(--typography-Body-Underline-textDecoration);

21
components/TempDesignSystem/Text/Preamble/index.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { Slot } from "@radix-ui/react-slot"
import { preambleVariants } from "./variants"
import type { CaptionProps } from "./preamble"
export default function Preamble({
asChild = false,
className = "",
color,
textAlign,
...props
}: CaptionProps) {
const Comp = asChild ? Slot : "p"
const classNames = preambleVariants({
className,
color,
textAlign,
})
return <Comp className={classNames} {...props} />
}

42
components/TempDesignSystem/Text/Preamble/preamble.module.css Normal file
View File

@@ -0,0 +1,42 @@
.preamble {
margin: 0;
padding: 0;
font-family: var(--typography-Preamble-fontFamily);
font-size: clamp(
var(--typography-Preamble-Mobile-fontSize),
0.3vw + 15px,
var(--typography-Preamble-Desktop-fontSize)
);
font-weight: var(--typography-Preamble-fontWeight);
letter-spacing: var(--typography-Preamble-letterSpacing);
line-height: var(--typography-Preamble-lineHeight);
text-decoration: var(--typography-Preamble-textDecoration);
}
.preambleFontOnly {
font-style: normal;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
}
.center {
text-align: center;
}
.left {
text-align: left;
}

9
components/TempDesignSystem/Text/Preamble/preamble.ts Normal file
View File

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

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

@@ -0,0 +1,23 @@
import { cva } from "class-variance-authority"
import styles from "./preamble.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
textMediumContrast: styles.textMediumContrast,
},
textAlign: {
center: styles.center,
left: styles.left,
},
},
defaultVariants: {
color: "black",
},
} as const
export const preambleVariants = cva(styles.preamble, config)

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

@@ -10,7 +10,7 @@
0.3vw + 15px,
var(--typography-Subtitle-1-Desktop-fontSize)
);
font-weight: var(--typography-Subtitle-1-fontWeight);
font-weight: 600;
letter-spacing: var(--typography-Subtitle-1-letterSpacing);
line-height: var(--typography-Subtitle-1-lineHeight);
}
@@ -22,7 +22,7 @@
0.3vw + 15px,
var(--typography-Subtitle-2-Desktop-fontSize)
);
font-weight: var(--typography-Subtitle-2-fontWeight);
font-weight: 600;
letter-spacing: var(--typography-Subtitle-2-letterSpacing);
line-height: var(--typography-Subtitle-2-lineHeight);
}

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

@@ -1,6 +1,7 @@
.heading {
margin: 0;
padding: 0;
font-weight: 500;
}
.h1 {
@@ -10,7 +11,6 @@
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);
@@ -23,7 +23,6 @@
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);
@@ -36,7 +35,6 @@
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);
@@ -49,7 +47,6 @@
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);
@@ -62,7 +59,6 @@
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);

1
components/TempDesignSystem/Text/Title/variants.ts
View File

@@ -33,6 +33,7 @@ const config = {
color: "burgundy",
textAlign: "left",
type: "h1",
textTransform: "uppercase",
},
} as const