studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) add text variants to Button

Browse Source 
These variant are smaller buttons without background that can be used
in cases where we want the Button to have a minimal design.
This commit is contained in:
Nathan Vasse
2023-12-20 11:01:54 +01:00
committed by NathanVss
parent 6d91c1d19f
commit e90a5dd6e6
5 changed files with 83 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/react/src/components/Button/_index.scss
View File

@@ -39,6 +39,10 @@
pointer-events: none;
}
&--text {
font-weight: var(--c--components--button--text-font-weight);
}
&--full-width {
width: 100%;
justify-content: center;
@@ -49,6 +53,10 @@
font-size: var(--c--components--button--medium-font-size);
padding: 0 var(--c--theme--spacings--s);
&.c__button--text {
height: var(--c--components--button--medium-text-height);
}
&.c__button--icon-only {
width: var(--c--components--button--medium-height);
}
@@ -119,6 +127,24 @@
}
}
&--primary-text {
color: var(--c--theme--colors--primary-600);
background-color: transparent;
&:hover, &:focus-visible {
background-color: var(--c--theme--colors--primary-100);
color: var(--c--theme--colors--primary-700);
}
&:active, &.c__button--active {
background-color: transparent;
}
&:disabled {
background-color: transparent;
}
}
&--secondary {
background-color: var(--c--theme--colors--primary-100);
color: var(--c--theme--colors--primary-700);
@@ -135,16 +161,17 @@
}
&--tertiary {
background-color: transparent;
color: var(--c--theme--colors--greyscale-800);
background-color: var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--greyscale-700);
font-weight: var(--c--theme--font--weights--medium);
&:hover, &:focus-visible {
background-color: var(--c--theme--colors--greyscale-200);
color: var(--c--theme--colors--greyscale-900);
background-color: var(--c--theme--colors--greyscale-700);
color: var(--c--theme--colors--greyscale-000);
}
&:active, &.c__button--active {
background-color: var(--c--theme--colors--greyscale-100);
background-color: var(--c--theme--colors--greyscale-000);
color: var(--c--theme--colors--greyscale-800);
}
@@ -153,6 +180,25 @@
}
}
&--tertiary-text {
color: var(--c--theme--colors--greyscale-700);
background-color: transparent;
&:hover, &:focus-visible {
background-color: var(--c--theme--colors--greyscale-100);
color: var(--c--theme--colors--greyscale-800);
}
&:active, &.c__button--active {
background-color: transparent;
}
&:disabled {
background-color: transparent;
}
}
&--danger {
background-color: var(--c--theme--colors--danger-500);
color: var(--c--theme--colors--danger-text);