7b6d130d7d
Now that we have all the official design tokens we can use them to build the button component in various colors matching the design system's ones.
72 lines
1.7 KiB
SCSS
72 lines
1.7 KiB
SCSS
.c__button {
|
|
display: flex;
|
|
align-items: center;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
|
|
|
|
padding: 0 var(--c--theme--spacings--s);
|
|
|
|
height: var(--c--components--button--height);
|
|
border-radius: var(--c--components--button--border-radius);
|
|
font-size: var(--c--components--button--font-size);
|
|
font-weight: var(--c--components--button--font-weight);
|
|
|
|
&--primary {
|
|
background-color: var(--c--theme--colors--primary-500);
|
|
color: var(--c--theme--colors--primary-text);
|
|
|
|
&:hover {
|
|
background-color: var(--c--theme--colors--primary-600);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--c--theme--colors--primary-500);
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
background-color: var(--c--theme--colors--secondary-500);
|
|
color: var(--c--theme--colors--secondary-text);
|
|
|
|
&:hover {
|
|
background-color: var(--c--theme--colors--secondary-600);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--c--theme--colors--secondary-500);
|
|
}
|
|
}
|
|
|
|
&--tertiary {
|
|
background-color: transparent;
|
|
color: var(--c--theme--colors--greyscale-800);
|
|
|
|
&:hover {
|
|
color: var(--c--theme--colors--greyscale-900);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--c--theme--colors--greyscale-800);
|
|
}
|
|
}
|
|
|
|
&--danger {
|
|
background-color: var(--c--theme--colors--danger-500);
|
|
color: var(--c--theme--colors--danger-text);
|
|
|
|
&:hover {
|
|
background-color: var(--c--theme--colors--danger-600);
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--c--theme--colors--danger-500);
|
|
}
|
|
}
|
|
|
|
&[disabled] {
|
|
cursor: not-allowed;
|
|
background-color: var(--c--theme--colors--greyscale-200);
|
|
color: var(--c--theme--colors--greyscale-400);
|
|
}
|
|
} |