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

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/TempDesignSystem/Link/link.module.css
+81 -20
View File
@@ -6,36 +6,97 @@
font-family: var(--typography-Body-Regular-fontFamily);
}
.breadcrumb {
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);
}
.myPage {
color: var(--some-black-color, #000);
font-family: var(--ff-fira-sans);
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.6%;
line-height: 2.4rem;
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: underline;
}
.shortcut {
align-items: center;
border-bottom: 0.5px solid var(--Scandic-Beige-20);
display: grid;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
gap: var(--Spacing-x2);
grid-template-columns: 1fr auto;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: var(--typography-Body-Regular-lineHeight);
padding: var(--Spacing-x3);
}
.shortcut:last-of-type {
border-bottom: none;
}
.sidebar {
align-items: center;
color: var(--some-text-color, #111);
border-radius: var(--Corner-radius-Medium);
display: flex;
font-size: 1.6rem;
font-weight: 400;
gap: 0.6rem;
line-height: 1.9rem;
position: relative;
gap: var(--Spacing-x1);
padding: var(--Spacing-x1);
}
.activeSidebar {
font-weight: 600;
background-color: var(--Scandic-Brand-Warm-White);
}
.activeSidebar::before {
bottom: -0.4rem;
background-color: var(--some-text-color, #000);
content: "";
height: 0.2rem;
position: absolute;
width: 100%;
.black {
color: #000;
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.peach80 {
color: var(--Scandic-Peach-80);
}
.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);
}
.activeRegular {
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);
}
.small {
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);
}
.activeSmall {
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);
}