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/Button.js
+16 -3
View File
@@ -19,6 +19,8 @@ export default function Button({
"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]", "px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
large: large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]", "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
xlarge:
"px-[var(--spacing-scale-020)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-008)]",
}; };
const fontStyles = { const fontStyles = {
@@ -28,16 +30,27 @@ export default function Button({
"font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]", "font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]",
large: large:
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]", "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
xlarge:
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
}; };
const variantStyles = { const variantStyles = {
default: default:
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-1 hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[1.5px] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-inverse-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
secondary: secondary:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-[var(--border-color-default-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-primary)] hover:border-[var(--border-color-default-primary)] active:bg-[var(--color-surface-default-tertiary)] active:text-[var(--color-content-default-primary)] active:border-[var(--border-color-default-primary)] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-[var(--border-color-default-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-primary)] hover:border-[var(--border-color-default-primary)] active:bg-[var(--color-surface-default-tertiary)] active:text-[var(--color-content-default-primary)] active:border-[var(--border-color-default-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
}; };
const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]}`; const hoverOutlineStyles = {
xsmall: "hover:outline-1",
small: "hover:outline-1",
large: "hover:outline-2",
xlarge: "hover:outline-[2.5px]",
};
const focusStyles = "focus:shadow-[0_0_10px_1px_#FFFDD2] focus:outline-none";
const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]} ${hoverOutlineStyles[size]} ${focusStyles}`;
let finalVariant = variant; let finalVariant = variant;
if (disabled) { if (disabled) {
app/components/Header.js
+18 -4
View File
@@ -26,7 +26,12 @@ export default function Header() {
size: "headerMd", size: "headerMd",
showText: true, showText: true,
}, },
{ breakpoint: "hidden lg:block", size: "headerLg", showText: true }, {
breakpoint: "hidden lg:block xl:hidden",
size: "headerLg",
showText: true,
},
{ breakpoint: "hidden xl:block", size: "headerXl", showText: true },
]; ];
const renderNavigationItems = (size) => { const renderNavigationItems = (size) => {
@@ -84,7 +89,7 @@ export default function Header() {
return ( return (
<header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]"> <header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
<div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"> <div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
<div> <div>
{logoConfig.map((config, index) => ( {logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}> <div key={index} className={config.breakpoint}>
@@ -114,10 +119,14 @@ export default function Header() {
</MenuBar> </MenuBar>
</div> </div>
<div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]"> <div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar> <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
</div> </div>
<div className="hidden xl:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-032)]">
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
</div>
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]"> <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center"> <div className="flex items-center">
{renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")} {renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
@@ -125,11 +134,16 @@ export default function Header() {
</div> </div>
</div> </div>
<div className="hidden lg:flex items-center"> <div className="hidden lg:flex xl:hidden items-center">
{renderLoginButton("large", "mr-[var(--spacing-scale-012)]")} {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
{renderCreateRuleButton("large", "xlarge", "xlarge")} {renderCreateRuleButton("large", "xlarge", "xlarge")}
</div> </div>
<div className="hidden xl:flex items-center">
{renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
<div className="block md:hidden"> <div className="block md:hidden">
{renderCreateRuleButton("xsmall", "small", "small")} {renderCreateRuleButton("xsmall", "small", "small")}
</div> </div>
app/components/Logo.js
+10 -1
View File
@@ -23,12 +23,19 @@ export default function Logo({ size = "default", showText = true }) {
iconSize: "w-[22.02px] h-[22.02px]", iconSize: "w-[22.02px] h-[22.02px]",
}, },
headerLg: { headerLg: {
containerHeight: "h-[27.05px]", containerHeight: "h-[28px]",
gap: "gap-[6.55px]", gap: "gap-[6.55px]",
textSize: "text-[21.97px]", textSize: "text-[21.97px]",
lineHeight: "leading-[27.05px]", lineHeight: "leading-[27.05px]",
iconSize: "w-[27.05px] h-[27.05px]", iconSize: "w-[27.05px] h-[27.05px]",
}, },
headerXl: {
containerHeight: "h-[34px]",
gap: "gap-[8.19px]",
textSize: "text-[27.47px]",
lineHeight: "leading-[33.81px]",
iconSize: "w-[33.81px] h-[33.81px]",
},
footer: { footer: {
containerHeight: "h-[calc(40px*1.37)]", containerHeight: "h-[calc(40px*1.37)]",
gap: "gap-[calc(8px*1.37)]", gap: "gap-[calc(8px*1.37)]",
@@ -52,6 +59,8 @@ export default function Logo({ size = "default", showText = true }) {
? sizes.headerMd ? sizes.headerMd
: size === "headerLg" : size === "headerLg"
? sizes.headerLg ? sizes.headerLg
: size === "headerXl"
? sizes.headerXl
: size === "footer" : size === "footer"
? sizes.footer ? sizes.footer
: size === "footerLg" : size === "footerLg"
app/components/MenuBarItem.js
+18 -2
View File
@@ -9,7 +9,18 @@ export default function MenuBarItem({
}) { }) {
const variantStyles = { const variantStyles = {
default: 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 = { 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)]", "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
large: large:
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]", "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 = const smallTextStyle =
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]"; "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
const largeTextStyle = const largeTextStyle =
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]"; "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
const xlargeTextStyle =
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]";
const textStyles = { const textStyles = {
default: smallTextStyle, default: smallTextStyle,
xsmall: smallTextStyle, xsmall: smallTextStyle,
xsmallUseCases: smallTextStyle, xsmallUseCases: smallTextStyle,
large: largeTextStyle, 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`; 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"; finalVariant = "default";
} }
const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`; const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${activeOutlineStyles[size]} ${className}`;
if (disabled) { if (disabled) {
return ( return (