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

feat(SW-375): new tokens

Browse Source 
new asset generation logic

BREAKING CHANGE: New tokens.
This commit is contained in:
Michael Zetterberg
2025-01-20 14:46:25 +01:00
parent 7ce2ee2922
commit 56973888c9
189 changed files with 34368 additions and 10344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/design-system/lib/components/Button/button.module.css Normal file
View File

@@ -0,0 +1,80 @@
.button {
border-radius: var(--Corner-radius-rounded);
border-width: 2px;
border-style: solid;
cursor: pointer;
}
.size-large {
padding: var(--Space-x2) var(--Space-x3);
}
.size-medium {
padding: var(--Space-x15) var(--Space-x2);
}
.size-small {
padding: 10px var(--Space-x2);
}
.variant-primary {
background-color: var(--Component-Button-Brand-Primary-Default);
border-color: var(--Component-Button-Brand-Primary-Border-Default);
color: var(--Component-Button-Brand-Primary-On-fill-Default);
}
.variant-primary:hover {
background-color: var(--Component-Button-Brand-Primary-Hover);
border-color: var(--Component-Button-Brand-Primary-Border-Hover);
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
}
.variant-primary:disabled {
background-color: var(--Component-Button-Brand-Primary-Disabled);
border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
}
.variant-secondary {
background-color: var(--Component-Button-Brand-Secondary-Default);
border-color: var(--Component-Button-Brand-Secondary-Border-Default);
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
}
.variant-secondary:hover {
background-color: var(--Component-Button-Brand-Secondary-Hover);
border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
}
.variant-secondary:disabled {
background-color: var(--Component-Button-Brand-Secondary-Disabled);
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
}
.variant-tertiary {
background-color: var(--Component-Button-Brand-Tertiary-Default);
border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
}
.variant-tertiary:hover {
background-color: var(--Component-Button-Brand-Tertiary-Hover);
border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
}
.variant-tertiary:disabled {
background-color: var(--Component-Button-Brand-Tertiary-Disabled);
border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
}
.variant-text {
background-color: transparent;
border-color: transparent;
/* TODO: Missing text variant tokens for button */
color: var(--Scandic-Red-100);
padding: var(--Space-x15) 0;
}