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

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

@@ -271,25 +271,25 @@ a.default {
}
.primaryStrongPrimary {
background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Normal);
color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);
background-color: var(--Primary-Strong-Button-Primary-Fill-Normal);
color: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}
.primaryStrongPrimary:active,
.primaryStrongPrimary:focus,
.primaryStrongPrimary:hover {
background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Hover);
color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover);
background-color: var(--Primary-Strong-Button-Primary-Fill-Hover);
color: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
}
.primaryStrongPrimary:disabled {
background-color: var(--Theme-Primary-Strong-Button-Primary-Fill-Disabled);
color: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled);
background-color: var(--Primary-Strong-Button-Primary-Fill-Disabled);
color: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
}
.icon.primaryStrongPrimary svg,
.icon.primaryStrongPrimary svg * {
fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Normal);
fill: var(--Primary-Strong-Button-Primary-On-Fill-Normal);
}
.icon.primaryStrongPrimary:active svg,
@@ -298,37 +298,37 @@ a.default {
.icon.primaryStrongPrimary:active svg *,
.icon.primaryStrongPrimary:focus svg *,
.icon.primaryStrongPrimary:hover svg * {
fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Hover);
fill: var(--Primary-Strong-Button-Primary-On-Fill-Hover);
}
.icon.primaryStrongPrimary:disabled svg,
.icon.primaryStrongPrimary:disabled svg * {
fill: var(--Theme-Primary-Strong-Button-Primary-On-Fill-Disabled);
fill: var(--Primary-Strong-Button-Primary-On-Fill-Disabled);
}
.primaryStrongSecondary {
background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Normal);
color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Normal);
background-color: var(--Primary-Strong-Button-Secondary-Fill-Normal);
border-color: var(--Primary-Strong-Button-Secondary-Border-Normal);
color: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
}
.primaryStrongSecondary:active,
.primaryStrongSecondary:focus,
.primaryStrongSecondary:hover {
background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Hover);
color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Hover);
background-color: var(--Primary-Strong-Button-Secondary-Fill-Hover);
border-color: var(--Primary-Strong-Button-Secondary-Border-Hover);
color: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
}
.primaryStrongSecondary:disabled {
background-color: var(--Theme-Primary-Strong-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Primary-Strong-Button-Secondary-Border-Disabled);
color: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled);
background-color: var(--Primary-Strong-Button-Secondary-Fill-Disabled);
border-color: var(--Primary-Strong-Button-Secondary-Border-Disabled);
color: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
}
.icon.primaryStrongSecondary svg,
.icon.primaryStrongSecondary svg * {
fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Normal);
fill: var(--Primary-Strong-Button-Secondary-On-Fill-Normal);
}
.icon.primaryStrongSecondary:active svg,
@@ -337,34 +337,34 @@ a.default {
.icon.primaryStrongSecondary:active svg *,
.icon.primaryStrongSecondary:focus svg *,
.icon.primaryStrongSecondary:hover svg * {
fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Hover);
fill: var(--Primary-Strong-Button-Secondary-On-Fill-Hover);
}
.icon.primaryStrongSecondary:disabled svg,
.icon.primaryStrongSecondary:disabled svg * {
fill: var(--Theme-Primary-Strong-Button-Secondary-On-Fill-Disabled);
fill: var(--Primary-Strong-Button-Secondary-On-Fill-Disabled);
}
.primaryDarkPrimary {
background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Normal);
color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
background-color: var(--Primary-Dark-Button-Primary-Fill-Normal);
color: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
}
.primaryDarkPrimary:active,
.primaryDarkPrimary:focus,
.primaryDarkPrimary:hover {
background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Hover);
color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
background-color: var(--Primary-Dark-Button-Primary-Fill-Hover);
color: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
}
.primaryDarkPrimary:disabled {
background-color: var(--Theme-Primary-Dark-Button-Primary-Fill-Disabled);
color: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
background-color: var(--Primary-Dark-Button-Primary-Fill-Disabled);
color: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
}
.icon.primaryDarkPrimary svg,
.icon.primaryDarkPrimary svg * {
fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Normal);
fill: var(--Primary-Dark-Button-Primary-On-Fill-Normal);
}
.icon.primaryDarkPrimary:active svg,
@@ -373,37 +373,37 @@ a.default {
.icon.primaryDarkPrimary:active svg *,
.icon.primaryDarkPrimary:focus svg *,
.icon.primaryDarkPrimary:hover svg * {
fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Hover);
fill: var(--Primary-Dark-Button-Primary-On-Fill-Hover);
}
.icon.primaryDarkPrimary:disabled svg,
.icon.primaryDarkPrimary:disabled svg * {
fill: var(--Theme-Primary-Dark-Button-Primary-On-Fill-Disabled);
fill: var(--Primary-Dark-Button-Primary-On-Fill-Disabled);
}
.primaryDarkSecondary {
background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Normal);
color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Normal);
background-color: var(--Primary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Primary-Dark-Button-Secondary-Border-Normal);
color: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
}
.primaryDarkSecondary:active,
.primaryDarkSecondary:focus,
.primaryDarkSecondary:hover {
background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Hover);
color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Hover);
background-color: var(--Primary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Primary-Dark-Button-Secondary-Border-Hover);
color: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
}
.primaryDarkSecondary:disabled {
background-color: var(--Theme-Primary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Primary-Dark-Button-Secondary-Border-Disabled);
color: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled);
background-color: var(--Primary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Primary-Dark-Button-Secondary-Border-Disabled);
color: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
}
.icon.primaryDarkSecondary svg,
.icon.primaryDarkSecondary svg * {
fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Normal);
fill: var(--Primary-Dark-Button-Secondary-On-Fill-Normal);
}
.icon.primaryDarkSecondary:active svg,
@@ -412,34 +412,34 @@ a.default {
.icon.primaryDarkSecondary:active svg *,
.icon.primaryDarkSecondary:focus svg *,
.icon.primaryDarkSecondary:hover svg * {
fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Hover);
fill: var(--Primary-Dark-Button-Secondary-On-Fill-Hover);
}
.icon.primaryDarkSecondary:disabled svg,
.icon.primaryDarkSecondary:disabled svg * {
fill: var(--Theme-Primary-Dark-Button-Secondary-On-Fill-Disabled);
fill: var(--Primary-Dark-Button-Secondary-On-Fill-Disabled);
}
.primaryLightPrimary {
background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Normal);
color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
background-color: var(--Primary-Light-Button-Primary-Fill-Normal);
color: var(--Primary-Light-Button-Primary-On-Fill-Normal);
}
.primaryLightPrimary:active,
.primaryLightPrimary:focus,
.primaryLightPrimary:hover {
background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Hover);
color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
background-color: var(--Primary-Light-Button-Primary-Fill-Hover);
color: var(--Primary-Light-Button-Primary-On-Fill-Hover);
}
.primaryLightPrimary:disabled {
background-color: var(--Theme-Primary-Light-Button-Primary-Fill-Disabled);
color: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
background-color: var(--Primary-Light-Button-Primary-Fill-Disabled);
color: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
}
.icon.primaryLightPrimary svg,
.icon.primaryLightPrimary svg * {
fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Normal);
fill: var(--Primary-Light-Button-Primary-On-Fill-Normal);
}
.icon.primaryLightPrimary:active svg,
@@ -448,37 +448,37 @@ a.default {
.icon.primaryLightPrimary:active svg *,
.icon.primaryLightPrimary:focus svg *,
.icon.primaryLightPrimary:hover svg * {
fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Hover);
fill: var(--Primary-Light-Button-Primary-On-Fill-Hover);
}
.icon.primaryLightPrimary:disabled svg,
.icon.primaryLightPrimary:disabled svg * {
fill: var(--Theme-Primary-Light-Button-Primary-On-Fill-Disabled);
fill: var(--Primary-Light-Button-Primary-On-Fill-Disabled);
}
.primaryLightSecondary {
background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Normal);
color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Normal);
background-color: var(--Primary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Primary-Light-Button-Secondary-Border-Normal);
color: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
}
.primaryLightSecondary:active,
.primaryLightSecondary:focus,
.primaryLightSecondary:hover {
background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Hover);
color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Hover);
background-color: var(--Primary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Primary-Light-Button-Secondary-Border-Hover);
color: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
}
.primaryLightSecondary:disabled {
background-color: var(--Theme-Primary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Primary-Light-Button-Secondary-Border-Disabled);
color: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled);
background-color: var(--Primary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Primary-Light-Button-Secondary-Border-Disabled);
color: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
}
.icon.primaryLightSecondary svg,
.icon.primaryLightSecondary svg * {
fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Normal);
fill: var(--Primary-Light-Button-Secondary-On-Fill-Normal);
}
.icon.primaryLightSecondary:active svg,
@@ -487,34 +487,34 @@ a.default {
.icon.primaryLightSecondary:active svg *,
.icon.primaryLightSecondary:focus svg *,
.icon.primaryLightSecondary:hover svg * {
fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Hover);
fill: var(--Primary-Light-Button-Secondary-On-Fill-Hover);
}
.icon.primaryLightSecondary:disabled svg,
.icon.primaryLightSecondary:disabled svg * {
fill: var(--Theme-Primary-Light-Button-Secondary-On-Fill-Disabled);
fill: var(--Primary-Light-Button-Secondary-On-Fill-Disabled);
}
.secondaryDarkPrimary {
background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Normal);
color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
background-color: var(--Secondary-Dark-Button-Primary-Fill-Normal);
color: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
}
.secondaryDarkPrimary:active,
.secondaryDarkPrimary:focus,
.secondaryDarkPrimary:hover {
background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Hover);
color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
background-color: var(--Secondary-Dark-Button-Primary-Fill-Hover);
color: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
}
.secondaryDarkPrimary:disabled {
background-color: var(--Theme-Secondary-Dark-Button-Primary-Fill-Disabled);
color: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
background-color: var(--Secondary-Dark-Button-Primary-Fill-Disabled);
color: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
}
.icon.secondaryDarkPrimary svg,
.icon.secondaryDarkPrimary svg * {
fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Normal);
fill: var(--Secondary-Dark-Button-Primary-On-Fill-Normal);
}
.icon.secondaryDarkPrimary:active svg,
@@ -523,37 +523,37 @@ a.default {
.icon.secondaryDarkPrimary:active svg *,
.icon.secondaryDarkPrimary:focus svg *,
.icon.secondaryDarkPrimary:hover svg * {
fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Hover);
fill: var(--Secondary-Dark-Button-Primary-On-Fill-Hover);
}
.icon.secondaryDarkPrimary:disabled svg,
.icon.secondaryDarkPrimary:disabled svg * {
fill: var(--Theme-Secondary-Dark-Button-Primary-On-Fill-Disabled);
fill: var(--Secondary-Dark-Button-Primary-On-Fill-Disabled);
}
.secondaryDarkSecondary {
background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Normal);
color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Normal);
background-color: var(--Secondary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Secondary-Dark-Button-Secondary-Border-Normal);
color: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
}
.secondaryDarkSecondary:active,
.secondaryDarkSecondary:focus,
.secondaryDarkSecondary:hover {
background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Hover);
color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Hover);
background-color: var(--Secondary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Secondary-Dark-Button-Secondary-Border-Hover);
color: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
}
.secondaryDarkSecondary:disabled {
background-color: var(--Theme-Secondary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Secondary-Dark-Button-Secondary-Border-Disabled);
color: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled);
background-color: var(--Secondary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Secondary-Dark-Button-Secondary-Border-Disabled);
color: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
}
.icon.secondaryDarkSecondary svg,
.icon.secondaryDarkSecondary svg * {
fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Normal);
fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Normal);
}
.icon.secondaryDarkSecondary:active svg,
@@ -562,34 +562,34 @@ a.default {
.icon.secondaryDarkSecondary:active svg *,
.icon.secondaryDarkSecondary:focus svg *,
.icon.secondaryDarkSecondary:hover svg * {
fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Hover);
fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Hover);
}
.icon.secondaryDarkSecondary:disabled svg,
.icon.secondaryDarkSecondary:disabled svg * {
fill: var(--Theme-Secondary-Dark-Button-Secondary-On-Fill-Disabled);
fill: var(--Secondary-Dark-Button-Secondary-On-Fill-Disabled);
}
.secondaryLightPrimary {
background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Normal);
color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
background-color: var(--Secondary-Light-Button-Primary-Fill-Normal);
color: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
}
.secondaryLightPrimary:active,
.secondaryLightPrimary:focus,
.secondaryLightPrimary:hover {
background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Hover);
color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
background-color: var(--Secondary-Light-Button-Primary-Fill-Hover);
color: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
}
.secondaryLightPrimary:disabled {
background-color: var(--Theme-Secondary-Light-Button-Primary-Fill-Disabled);
color: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled);
background-color: var(--Secondary-Light-Button-Primary-Fill-Disabled);
color: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
}
.icon.secondaryLightPrimary svg,
.icon.secondaryLightPrimary svg * {
fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Normal);
fill: var(--Secondary-Light-Button-Primary-On-Fill-Normal);
}
.icon.secondaryLightPrimary:active svg,
@@ -598,37 +598,37 @@ a.default {
.icon.secondaryLightPrimary:active svg *,
.icon.secondaryLightPrimary:focus svg *,
.icon.secondaryLightPrimary:hover svg * {
fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Hover);
fill: var(--Secondary-Light-Button-Primary-On-Fill-Hover);
}
.icon.secondaryLightPrimary:disabled svg,
.icon.secondaryLightPrimary:disabled svg * {
fill: var(--Theme-Secondary-Light-Button-Primary-On-Fill-Disabled);
fill: var(--Secondary-Light-Button-Primary-On-Fill-Disabled);
}
.secondaryLightSecondary {
background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Normal);
color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Normal);
background-color: var(--Secondary-Light-Button-Secondary-Fill-Normal);
border-color: var(--Secondary-Light-Button-Secondary-Border-Normal);
color: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
}
.secondaryLightSecondary:active,
.secondaryLightSecondary:focus,
.secondaryLightSecondary:hover {
background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Hover);
color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Hover);
background-color: var(--Secondary-Light-Button-Secondary-Fill-Hover);
border-color: var(--Secondary-Light-Button-Secondary-Border-Hover);
color: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
}
.secondaryLightSecondary:disabled {
background-color: var(--Theme-Secondary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Secondary-Light-Button-Secondary-Border-Disabled);
color: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled);
background-color: var(--Secondary-Light-Button-Secondary-Fill-Disabled);
border-color: var(--Secondary-Light-Button-Secondary-Border-Disabled);
color: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
}
.icon.secondaryLightSecondary svg,
.icon.secondaryLightSecondary svg * {
fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Normal);
fill: var(--Secondary-Light-Button-Secondary-On-Fill-Normal);
}
.icon.secondaryLightSecondary:active svg,
@@ -637,34 +637,34 @@ a.default {
.icon.secondaryLightSecondary:active svg *,
.icon.secondaryLightSecondary:focus svg *,
.icon.secondaryLightSecondary:hover svg * {
fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Hover);
fill: var(--Secondary-Light-Button-Secondary-On-Fill-Hover);
}
.icon.secondaryLightSecondary:disabled svg,
.icon.secondaryLightSecondary:disabled svg * {
fill: var(--Theme-Secondary-Light-Button-Secondary-On-Fill-Disabled);
fill: var(--Secondary-Light-Button-Secondary-On-Fill-Disabled);
}
.tertiaryDarkPrimary {
background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Normal);
color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
background-color: var(--Tertiary-Dark-Button-Primary-Fill-Normal);
color: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
}
.tertiaryDarkPrimary:active,
.tertiaryDarkPrimary:focus,
.tertiaryDarkPrimary:hover {
background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Hover);
color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
background-color: var(--Tertiary-Dark-Button-Primary-Fill-Hover);
color: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
}
.tertiaryDarkPrimary:disabled {
background-color: var(--Theme-Tertiary-Dark-Button-Primary-Fill-Disabled);
color: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
background-color: var(--Tertiary-Dark-Button-Primary-Fill-Disabled);
color: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}
.icon.tertiaryDarkPrimary svg,
.icon.tertiaryDarkPrimary svg * {
fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Normal);
fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Normal);
}
.icon.tertiaryDarkPrimary:active svg,
@@ -673,37 +673,37 @@ a.default {
.icon.tertiaryDarkPrimary:active svg *,
.icon.tertiaryDarkPrimary:focus svg *,
.icon.tertiaryDarkPrimary:hover svg * {
fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Hover);
fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Hover);
}
.icon.tertiaryDarkPrimary:disabled svg,
.icon.tertiaryDarkPrimary:disabled svg * {
fill: var(--Theme-Tertiary-Dark-Button-Primary-On-Fill-Disabled);
fill: var(--Tertiary-Dark-Button-Primary-On-Fill-Disabled);
}
.tertiaryDarkSecondary {
background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Normal);
color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Normal);
background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Normal);
border-color: var(--Tertiary-Dark-Button-Secondary-Border-Normal);
color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
}
.tertiaryDarkSecondary:active,
.tertiaryDarkSecondary:focus,
.tertiaryDarkSecondary:hover {
background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Hover);
color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Hover);
background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Hover);
border-color: var(--Tertiary-Dark-Button-Secondary-Border-Hover);
color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
}
.tertiaryDarkSecondary:disabled {
background-color: var(--Theme-Tertiary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Theme-Tertiary-Dark-Button-Secondary-Border-Disabled);
color: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
background-color: var(--Tertiary-Dark-Button-Secondary-Fill-Disabled);
border-color: var(--Tertiary-Dark-Button-Secondary-Border-Disabled);
color: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
}
.icon.tertiaryDarkSecondary svg,
.icon.tertiaryDarkSecondary svg * {
fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Normal);
fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Normal);
}
.icon.tertiaryDarkSecondary:active svg,
@@ -712,34 +712,34 @@ a.default {
.icon.tertiaryDarkSecondary:active svg *,
.icon.tertiaryDarkSecondary:focus svg *,
.icon.tertiaryDarkSecondary:hover svg * {
fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Hover);
fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Hover);
}
.icon.tertiaryDarkSecondary:disabled svg,
.icon.tertiaryDarkSecondary:disabled svg * {
fill: var(--Theme-Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
fill: var(--Tertiary-Dark-Button-Secondary-On-Fill-Disabled);
}
.tertiaryLightPrimary {
background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Normal);
color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
background-color: var(--Tertiary-Light-Button-Primary-Fill-Normal);
color: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
}
.tertiaryLightPrimary:active,
.tertiaryLightPrimary:focus,
.tertiaryLightPrimary:hover {
background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Hover);
color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
background-color: var(--Tertiary-Light-Button-Primary-Fill-Hover);
color: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
}
.tertiaryLightPrimary:disabled {
background-color: var(--Theme-Tertiary-Light-Button-Primary-Fill-Disabled);
color: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
background-color: var(--Tertiary-Light-Button-Primary-Fill-Disabled);
color: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
}
.icon.tertiaryLightPrimary svg,
.icon.tertiaryLightPrimary svg * {
fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Normal);
fill: var(--Tertiary-Light-Button-Primary-On-Fill-Normal);
}
.icon.tertiaryLightPrimary:active svg,
@@ -748,12 +748,12 @@ a.default {
.icon.tertiaryLightPrimary:active svg *,
.icon.tertiaryLightPrimary:focus svg *,
.icon.tertiaryLightPrimary:hover svg * {
fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Hover);
fill: var(--Tertiary-Light-Button-Primary-On-Fill-Hover);
}
.icon.tertiaryLightPrimary:disabled svg,
.icon.tertiaryLightPrimary:disabled svg * {
fill: var(--Theme-Tertiary-Light-Button-Primary-On-Fill-Disabled);
fill: var(--Tertiary-Light-Button-Primary-On-Fill-Disabled);
}
.tertiaryLightSecondary {