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

Merged in chore/sw-3145-move-body (pull request #2505)

Browse Source 
chore(SW-3145): Move Body component to design-system

* Move Body component to design-system


Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
2025-07-03 08:04:36 +00:00
parent d32b8c4333
commit 75a377b59e
78 changed files with 141 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/scandic-web/components/TempDesignSystem/Text/Body/body.module.css
-149
View File
@@ -1,149 +0,0 @@
.body {
margin: 0;
padding: 0;
}
.bodyFontOnly {
font-style: normal;
}
.bold {
font-family: var(--typography-Body-Bold-fontFamily);
font-size: var(--typography-Body-Bold-fontSize);
font-weight: 500;
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: 400;
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-Underline-fontFamily);
font-size: var(--typography-Body-Underline-fontSize);
font-weight: 500;
letter-spacing: var(--typography-Body-Underline-letterSpacing);
line-height: var(--typography-Body-Underline-lineHeight);
text-decoration: var(--typography-Body-Underline-textDecoration);
}
.uppercase {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Bold-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
text-decoration: var(--typography-Body-Regular-textDecoration);
text-transform: uppercase;
}
.textAlignCenter {
text-align: center;
}
.textAlignLeft {
text-align: left;
}
.textAlignRight {
text-align: right;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.grey {
color: var(--UI-Grey-60);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.textMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.baseTextHighContrast {
color: var(--Base-Text-High-contrast);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.white {
color: var(--UI-Opacity-White-100);
}
.peach50 {
color: var(--Primary-Dark-On-Surface-Accent);
}
.baseTextMediumContrast {
color: var(--Base-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextPlaceholder {
color: var(--UI-Text-Placeholder);
}
.disabled {
color: var(--Base-Text-Disabled);
}
.primaryLight {
color: var(--Primary-Light-On-Surface-Text);
}
.secondaryLight {
color: var(--Secondary-Light-On-Surface-Text);
}
.tertiaryLight {
color: var(--Tertiary-Light-On-Surface-Text);
}
.primaryDark {
color: var(--Primary-Dark-On-Surface-Text);
}
.primaryDim {
color: var(--Primary-Dim-On-Surface-Text);
}
.primaryStrong {
color: var(--Primary-Strong-On-Surface-Text);
}
.baseText {
color: var(--Base-Text-Inverted);
}
.success {
color: var(--UI-Semantic-Success);
}
apps/scandic-web/components/TempDesignSystem/Text/Body/body.ts
-10
View File
@@ -1,10 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { bodyVariants } from "./variants"
export interface BodyProps
extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
VariantProps<typeof bodyVariants> {
asChild?: boolean
fontOnly?: boolean
}
apps/scandic-web/components/TempDesignSystem/Text/Body/index.tsx
-30
View File
@@ -1,30 +0,0 @@
import { Slot } from "@radix-ui/react-slot"
import { bodyFontOnlyVariants, bodyVariants } from "./variants"
import type { BodyProps } from "./body"
export default function Body({
asChild = false,
className = "",
color,
fontOnly = false,
textAlign,
textTransform,
...props
}: BodyProps) {
const Comp = asChild ? Slot : "p"
const classNames = fontOnly
? bodyFontOnlyVariants({
className,
textAlign,
textTransform,
})
: bodyVariants({
className,
color,
textAlign,
textTransform,
})
return <Comp className={classNames} {...props} />
}
apps/scandic-web/components/TempDesignSystem/Text/Body/variants.ts
-71
View File
@@ -1,71 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./body.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
disabled: styles.disabled,
grey: styles.grey,
pale: styles.pale,
red: styles.red,
textMediumContrast: styles.textMediumContrast,
baseTextMediumContrast: styles.baseTextMediumContrast,
baseTextHighContrast: styles.baseTextHighContrast,
white: styles.white,
peach50: styles.peach50,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,
primaryLight: styles.primaryLight,
secondaryLight: styles.secondaryLight,
tertiaryLight: styles.tertiaryLight,
primaryDark: styles.primaryDark,
primaryDim: styles.primaryDim,
primaryStrong: styles.primaryStrong,
baseText: styles.baseText,
success: styles.success,
},
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
uppercase: styles.uppercase,
},
},
defaultVariants: {
color: "black",
textAlign: "left",
textTransform: "regular",
},
} as const
export const bodyVariants = cva(styles.body, config)
const fontOnlyconfig = {
variants: {
textAlign: {
center: styles.textAlignCenter,
left: styles.textAlignLeft,
right: styles.textAlignRight,
},
textTransform: {
bold: styles.bold,
regular: styles.regular,
underlined: styles.underlined,
uppercase: styles.uppercase,
},
},
defaultVariants: {
textAlign: "left",
textTransform: "regular",
},
} as const
export const bodyFontOnlyVariants = cva(styles.bodyFontOnly, fontOnlyconfig)