CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add focus states

Browse Source
This commit is contained in:
adilallo
2025-08-27 09:25:28 -06:00
parent 77882079e8
commit 0d113488a7
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/ContentLockup.js
+1 -1
View File
@@ -80,7 +80,7 @@ const ContentLockup = ({
{variant === "feature" && linkText && ( {variant === "feature" && linkText && (
<a <a
href={linkHref || "#"} href={linkHref || "#"}
className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors" className="font-inter font-medium text-[16px] leading-[20px] underline text-[var(--color-content-default-primary)] hover:text-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 focus:ring-offset-[#171717] rounded-sm px-1 py-0.5"
> >
{linkText} {linkText}
</a> </a>
app/components/FeatureGrid.js
+2 -1
View File
@@ -8,9 +8,10 @@ const FeatureGrid = ({ title, subtitle, className = "" }) => {
return ( return (
<div className="p-0 lg:p-[var(--spacing-scale-064)]"> <div className="p-0 lg:p-[var(--spacing-scale-064)]">
<section <section
className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] ${className}`} className={`py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:pt-[var(--spacing-scale-076)] md:pb-[var(--spacing-scale-048)] lg:pb-[var(--spacing-scale-076)] md:px-[var(--spacing-scale-048)] bg-[#171717] rounded-[var(--radius-measures-radius-xlarge)] focus-within:ring-2 focus-within:ring-[var(--color-surface-default-brand-royal)] focus-within:ring-offset-2 ${className}`}
aria-labelledby="feature-grid-headline" aria-labelledby="feature-grid-headline"
role="region" role="region"
tabIndex={-1}
> >
<div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]"> <div className="w-full mx-auto gap-[var(--spacing-scale-048)] lg:flex lg:items-start lg:gap-[var(--spacing-scale-048)] [container-type:inline-size]">
{/* Feature Content Lockup */} {/* Feature Content Lockup */}