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/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

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

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

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

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

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

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

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

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

@@ -1,17 +1,32 @@
.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);
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 {
text-transform: none;
}

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

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

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

@@ -109,5 +109,5 @@
}
.white {
color: var(--Scandic-Opacity-White-100);
color: var(--UI-Opacity-White-100);
}