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

💄(frontend) force having medium font weight buttons

Browse Source 
Improve the readability of the buttons by increasing their thickness.
This commit is contained in:
lebaudantoine
2025-04-04 14:51:20 +02:00
committed by aleb_the_flash
parent c26b1b711c
commit aa6757601d
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/src/primitives/buttonRecipe.ts
View File

@@ -42,6 +42,7 @@ export const buttonRecipe = cva({
primary: { primary: {
backgroundColor: 'primary.800', backgroundColor: 'primary.800',
color: 'white', color: 'white',
fontWeight: 'medium !important',
'&[data-hovered]': { '&[data-hovered]': {
backgroundColor: 'primary.action', backgroundColor: 'primary.action',
}, },
@@ -56,6 +57,7 @@ export const buttonRecipe = cva({
secondary: { secondary: {
backgroundColor: 'white', backgroundColor: 'white',
color: 'primary.800', color: 'primary.800',
fontWeight: 'medium !important',
borderColor: 'primary.800', borderColor: 'primary.800',
'&[data-hovered]': { '&[data-hovered]': {
backgroundColor: 'greyscale.100', backgroundColor: 'greyscale.100',
@@ -113,6 +115,7 @@ export const buttonRecipe = cva({
}, },
tertiary: { tertiary: {
backgroundColor: 'primary.100', backgroundColor: 'primary.100',
fontWeight: 'medium !important',
color: 'primary.800', color: 'primary.800',
'&[data-hovered]': { '&[data-hovered]': {
backgroundColor: 'primary.300', backgroundColor: 'primary.300',
@@ -123,6 +126,7 @@ export const buttonRecipe = cva({
}, },
tertiaryText: { tertiaryText: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontWeight: 'medium !important',
color: 'primary.900', color: 'primary.900',
'&[data-hovered]': { '&[data-hovered]': {
backgroundColor: 'primary.300', backgroundColor: 'primary.300',
@@ -133,6 +137,7 @@ export const buttonRecipe = cva({
}, },
primaryDark: { primaryDark: {
backgroundColor: 'primaryDark.100', backgroundColor: 'primaryDark.100',
fontWeight: 'medium !important',
color: 'white', color: 'white',
'&[data-pressed]': { '&[data-pressed]': {
backgroundColor: 'primaryDark.900', backgroundColor: 'primaryDark.900',
@@ -149,6 +154,7 @@ export const buttonRecipe = cva({
}, },
secondaryDark: { secondaryDark: {
backgroundColor: 'primaryDark.50', backgroundColor: 'primaryDark.50',
fontWeight: 'medium !important',
color: 'white', color: 'white',
'&[data-pressed]': { '&[data-pressed]': {
backgroundColor: 'primaryDark.200', backgroundColor: 'primaryDark.200',
@@ -164,6 +170,7 @@ export const buttonRecipe = cva({
}, },
primaryTextDark: { primaryTextDark: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontWeight: 'medium !important',
color: 'white', color: 'white',
'&[data-hovered]': { '&[data-hovered]': {
backgroundColor: 'primaryDark.100', backgroundColor: 'primaryDark.100',
@@ -179,6 +186,7 @@ export const buttonRecipe = cva({
}, },
quaternaryText: { quaternaryText: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
fontWeight: 'medium !important',
color: 'greyscale.600', color: 'greyscale.600',
'&[data-hovered]': { '&[data-hovered]': {
backgroundColor: 'greyscale.100', backgroundColor: 'greyscale.100',