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

feat(WEB-249): first iteration design system primitives (typography, grid)

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-05-29 13:57:03 +02:00
parent 08e7eb2fca
commit 00f99912fc
83 changed files with 1110 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/TempDesignSystem/Button/button.module.css
View File

@@ -5,34 +5,34 @@
margin: 0;
padding: 0;
text-align: center;
font-family: var(--ff-fira-sans);
font-family: var(--typography-Body-Regular-fontFamily);
font-weight: 600;
line-height: 150%;
letter-spacing: 1%;
}
.primary {
color: var(--font-color,);
background-color: var(--background-color,);
color: var(--font-color);
background-color: var(--background-color);
}
.primary:hover,
.primary:active,
.primary:focus {
background-color: var(--hover-background,);
color: var(--hover-color,);
background-color: var(--hover-background);
color: var(--hover-color);
}
.secondary {
background-color: transparent;
border: 0.1rem solid var(--background-color);
color: var(--background-color,);
color: var(--background-color);
}
.secondary:hover,
.secondary:active,
.secondary:focus {
border: 0.1rem solid var(--hover-color,);
border: 0.1rem solid var(--hover-color);
color: var(--hover-color);
}
@@ -66,7 +66,7 @@
.medium {
height: 3rem;
padding: 1.2rem var(--Spacing-x2,);
padding: 1.2rem var(--Spacing-x2);
font-size: 1.6rem;
}
@@ -80,68 +80,59 @@
.primaryLight {
--font-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal,);
--hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover,);
--hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover,);
--background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal);
--hover-background: var(--Theme-Primary-Light-Button-Primary-Fill-Hover);
--hover-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
--disabled-background-color: var(
--Theme-Primary-Light-Button-Primary-Fill-Disabled,
--Theme-Primary-Light-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled,);
--disabled-color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
}
.primaryDark {
--font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Primary-Dark-Button-Primary-Fill-Disabled,
--Theme-Primary-Dark-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled,);
--disabled-color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
}
.secondaryLight {
--font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Secondary-Light-Button-Primary-Fill-Disabled,
--Theme-Secondary-Light-Button-Primary-Fill-Disabled
);
--disabled-color: var(
--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled,
--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled
);
}
.secondaryDark {
--font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Secondary-Dark-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled,
--Theme-Secondary-Dark-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
}
.tertiaryLight {
--font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal,);
--background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal,);
--hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover,);
--hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover,);
--font-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
--background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Tertiary-Light-Button-Primary-Fill-Disabled,
);
--disabled-color: var(
--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled,
--Theme-Tertiary-Light-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
}
.tertiaryDark {
@@ -149,9 +140,8 @@
--background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
--hover-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
--hover-background: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
--disabled-background-color: var(
--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled,
--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled
);
--disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled,);
--disabled-color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}