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

XLarge header breakpoint

Browse Source
This commit is contained in:
adilallo
2025-08-03 21:08:20 -06:00
parent 8d50130718
commit 37caada856
4 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/MenuBarItem.js
+18 -2
View File
@@ -9,7 +9,18 @@ export default function MenuBarItem({
}) {
const variantStyles = {
default:
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
};
const activeOutlineStyles = {
xsmall:
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
default:
"active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
xlarge:
"active:outline-2 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
};
const sizeStyles = {
@@ -21,18 +32,23 @@ export default function MenuBarItem({
"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
xlarge:
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
};
const smallTextStyle =
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
const largeTextStyle =
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
const xlargeTextStyle =
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]";
const textStyles = {
default: smallTextStyle,
xsmall: smallTextStyle,
xsmallUseCases: smallTextStyle,
large: largeTextStyle,
xlarge: xlargeTextStyle,
};
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
@@ -42,7 +58,7 @@ export default function MenuBarItem({
finalVariant = "default";
}
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${activeOutlineStyles[size]} ${className}`;
if (disabled) {
return (