SrJuggernaut/srjuggernaut-panda-preset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add focus-visible ring styles

Browse Source
This commit is contained in:
SrJuggernaut
2025-10-08 19:23:08 -06:00
parent 396f8d2fde
commit 7287c39ea6
6 changed files with 161 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/recipes/button.ts
View File

@@ -27,6 +27,9 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
transitionDuration: 'normal',
transitionTimingFunction: 'easeOut',
fontWeight: 'semibold',
focusVisibleRing: 'outside',
focusRingWidth: '2px',
focusRingOffset: '0px',
_disabled: {
cursor: 'not-allowed',
_hover: {
@@ -36,7 +39,14 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
},
variants: {
color: {
...Object.fromEntries(colorVariants.map((color) => [color, {}]))
...Object.fromEntries(
colorVariants.map((color) => [
color,
{
focusRingColor: `{colors.${color}.7}`
}
])
)
},
size: {
...Object.fromEntries(
@@ -95,6 +105,10 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_focusVisible: {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_active: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
color: `${color}.foreground`
@@ -105,7 +119,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
borderColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `${color}.4/50`
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`
}
}
}
@@ -122,6 +136,10 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_focusVisible: {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_active: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
color: `${color}.foreground`
@@ -130,13 +148,14 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`
}
}
}
}
// case 'solid' or unmatched:
default:
case 'solid':
return {
color,
variant,
@@ -152,6 +171,10 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 80%, {colors.${color}.1})`,
color: `${color}.foreground`
},
_focusVisible: {
backgroundColor: `${color}.10`,
color: `${color}.foreground`
},
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
@@ -162,6 +185,12 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
}
}
}
default:
return {
color,
variant,
css: {}
}
}
})
),