Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed
1 parent
63d5d21ae0
commit
e808fe70bf
162 files changed
+1385
-1377
No files matched your search
@@ -28,7 +28,7 @@ export function CreateFlowFooterView({
|
||||
<div className={CREATE_FLOW_PAGE_GUTTER_CLASS}>
|
||||
<div className={`mx-auto w-full ${contentMaxClass}`}>
|
||||
{progressBar && (
|
||||
<div className="pt-[var(--spacing-measures-spacing-300,12px)]">
|
||||
<div className="pt-[var(--space-300)]">
|
||||
<ProportionBar
|
||||
progress={proportionBarProgress}
|
||||
variant={proportionBarVariant}
|
||||
@@ -36,12 +36,12 @@ export function CreateFlowFooterView({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between py-[var(--spacing-measures-spacing-300,12px)] gap-[var(--spacing-measures-spacing-300,12px)]">
|
||||
<div className="flex items-center justify-between py-[var(--space-300)] gap-[var(--space-300)]">
|
||||
<Button
|
||||
buttonType="ghost"
|
||||
palette="default"
|
||||
size="xsmall"
|
||||
className="!text-x-small-label md:!text-small-label !px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"
|
||||
className="!text-x-small-label md:!text-small-label !px-[var(--space-200)] md:!px-[var(--space-250)] !py-[var(--space-200)] md:!py-[var(--space-250)]"
|
||||
onClick={onBackClick}
|
||||
disabled={!onBackClick}
|
||||
>
|
||||
|
||||
@@ -8,10 +8,10 @@ import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types";
|
||||
import { CREATE_FLOW_PAGE_GUTTER_CLASS } from "../../../(app)/create/components/createFlowLayoutTokens";
|
||||
|
||||
const outlineButtonClass =
|
||||
"md:!text-x-small-label !text-xx-small-label !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]";
|
||||
"md:!text-x-small-label !text-xx-small-label !px-[var(--space-150)] md:!px-[var(--space-200)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]";
|
||||
|
||||
const exitButtonFigmaClass =
|
||||
"!rounded-[var(--radius-measures-radius-full,9999px)] !border-[1.25px] !px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!text-x-small-label";
|
||||
"!rounded-[var(--radius-full)] !border-[1.25px] !px-[var(--space-250)] !py-[var(--space-200)] md:!text-x-small-label";
|
||||
|
||||
function KebabIcon({ className = "" }: { className?: string }) {
|
||||
return (
|
||||
@@ -110,7 +110,7 @@ export function CreateFlowTopNavView({
|
||||
aria-expanded={exportMenuOpen}
|
||||
aria-controls={exportMenuId}
|
||||
onClick={() => setExportMenuOpen((o) => !o)}
|
||||
className={`justify-center gap-[var(--spacing-scale-002,2px)] !pl-[var(--spacing-scale-012,12px)] !pr-[var(--spacing-scale-006,6px)] md:!pr-[var(--spacing-scale-006,6px)] ${outlineButtonClass}`}
|
||||
className={`justify-center gap-[var(--space-050)] !pl-[var(--space-300)] !pr-[var(--space-150)] md:!pr-[var(--space-150)] ${outlineButtonClass}`}
|
||||
>
|
||||
<span>{exportLabel}</span>
|
||||
<svg
|
||||
@@ -129,7 +129,7 @@ export function CreateFlowTopNavView({
|
||||
</svg>
|
||||
</Button>
|
||||
{exportMenuOpen ? (
|
||||
<div className="absolute right-0 top-[calc(100%+var(--spacing-measures-spacing-200,8px))] z-[300]">
|
||||
<div className="absolute right-0 top-[calc(100%+var(--space-200))] z-[300]">
|
||||
<Popover
|
||||
id={exportMenuId}
|
||||
menuAriaLabel={exportPopoverMenuAriaLabel}
|
||||
@@ -230,13 +230,13 @@ export function CreateFlowTopNavView({
|
||||
aria-label={bannerAriaLabel}
|
||||
>
|
||||
<nav
|
||||
className={`flex items-center justify-between mx-auto w-full max-w-[1920px] ${CREATE_FLOW_PAGE_GUTTER_CLASS} py-[var(--spacing-measures-spacing-300,12px)] md:py-[var(--spacing-measures-spacing-016,16px)]`}
|
||||
className={`flex items-center justify-between mx-auto w-full max-w-[1920px] ${CREATE_FLOW_PAGE_GUTTER_CLASS} py-[var(--space-300)] md:py-[var(--space-400)]`}
|
||||
role="navigation"
|
||||
aria-label={navAriaLabel}
|
||||
>
|
||||
<Logo size="createFlow" wordmark palette={buttonPalette} />
|
||||
|
||||
<div className="flex flex-wrap items-center justify-end gap-[var(--spacing-scale-012,12px)]">
|
||||
<div className="flex flex-wrap items-center justify-end gap-[var(--space-300)]">
|
||||
{useKebabMenu ? (
|
||||
<div className="relative" ref={actionsWrapRef}>
|
||||
<Button
|
||||
@@ -249,12 +249,12 @@ export function CreateFlowTopNavView({
|
||||
aria-expanded={actionsMenuOpen}
|
||||
aria-controls={actionsMenuId}
|
||||
onClick={() => setActionsMenuOpen((open) => !open)}
|
||||
className={`!px-[var(--spacing-scale-010,10px)] ${outlineButtonClass}`}
|
||||
className={`!px-[var(--space-250)] ${outlineButtonClass}`}
|
||||
>
|
||||
<KebabIcon />
|
||||
</Button>
|
||||
{actionsMenuOpen ? (
|
||||
<div className="absolute right-0 top-[calc(100%+var(--spacing-measures-spacing-200,8px))] z-[300]">
|
||||
<div className="absolute right-0 top-[calc(100%+var(--space-200))] z-[300]">
|
||||
<Popover id={actionsMenuId} menuAriaLabel={actionsMenuAriaLabel}>
|
||||
{actionMenuItems.map((item, index) => (
|
||||
<ListItem
|
||||
|
||||
@@ -53,39 +53,39 @@ const Footer = memo(() => {
|
||||
<footer className="bg-[var(--color-surface-default-primary)] w-full">
|
||||
<div
|
||||
className="mx-auto flex max-w-[1920px] flex-col
|
||||
gap-[var(--spacing-measures-spacing-040)]
|
||||
px-[var(--spacing-measures-spacing-016)]
|
||||
py-[var(--spacing-measures-spacing-040)]
|
||||
md:gap-[var(--spacing-measures-spacing-024)]
|
||||
md:px-[var(--spacing-measures-spacing-032)]
|
||||
md:py-[var(--spacing-measures-spacing-024)]
|
||||
lg:gap-[var(--spacing-measures-spacing-060,60px)]
|
||||
lg:px-[var(--spacing-scale-064)]
|
||||
lg:py-[var(--spacing-scale-096)]"
|
||||
gap-[var(--space-1000)]
|
||||
px-[var(--space-400)]
|
||||
py-[var(--space-1000)]
|
||||
md:gap-[var(--space-600)]
|
||||
md:px-[var(--space-800)]
|
||||
md:py-[var(--space-600)]
|
||||
lg:gap-[var(--space-1500)]
|
||||
lg:px-[var(--space-1800)]
|
||||
lg:py-[var(--space-2400)]"
|
||||
>
|
||||
<div
|
||||
className="flex w-full flex-col
|
||||
gap-[var(--spacing-scale-032)]
|
||||
md:gap-[var(--spacing-scale-048)]
|
||||
lg:gap-[var(--spacing-measures-spacing-060,60px)]"
|
||||
gap-[var(--space-800)]
|
||||
md:gap-[var(--space-1200)]
|
||||
lg:gap-[var(--space-1500)]"
|
||||
>
|
||||
<Logo size="footer" wordmark />
|
||||
|
||||
<div
|
||||
className="flex w-full flex-col
|
||||
gap-[var(--spacing-scale-048)]
|
||||
gap-[var(--space-1200)]
|
||||
md:flex-row md:items-start md:justify-between md:gap-0"
|
||||
>
|
||||
<div
|
||||
className="order-2 flex flex-col
|
||||
gap-[var(--spacing-scale-048)]
|
||||
gap-[var(--space-1200)]
|
||||
md:order-1 md:max-w-[min(100%,334px)]
|
||||
lg:max-w-[min(100%,334px)]
|
||||
lg:gap-[var(--spacing-scale-064)]"
|
||||
lg:gap-[var(--space-1800)]"
|
||||
>
|
||||
<div
|
||||
className="flex flex-col
|
||||
gap-[var(--spacing-measures-spacing-016,16px)]"
|
||||
gap-[var(--space-400)]"
|
||||
>
|
||||
<div className={orgNameClass}>{t("organization.name")}</div>
|
||||
<a
|
||||
@@ -98,11 +98,11 @@ const Footer = memo(() => {
|
||||
|
||||
<div
|
||||
className="flex flex-col
|
||||
gap-[var(--spacing-measures-spacing-016,16px)]"
|
||||
gap-[var(--space-400)]"
|
||||
>
|
||||
<a
|
||||
href={t("social.bluesky.url")}
|
||||
className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||
className={`group inline-flex w-fit max-w-full items-center gap-[var(--space-150)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||
aria-label={t("social.bluesky.ariaLabel")}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
|
||||
@@ -117,7 +117,7 @@ const Footer = memo(() => {
|
||||
</a>
|
||||
<a
|
||||
href={t("social.gitea.url")}
|
||||
className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||
className={`group inline-flex w-fit max-w-full items-center gap-[var(--space-150)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||
aria-label={t("social.gitea.ariaLabel")}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
|
||||
@@ -132,7 +132,7 @@ const Footer = memo(() => {
|
||||
</a>
|
||||
<a
|
||||
href={t("social.mastodon.url")}
|
||||
className={`group inline-flex w-fit max-w-full items-center gap-[var(--spacing-measures-spacing-06,6px)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||
className={`group inline-flex w-fit max-w-full items-center gap-[var(--space-150)] ${linkFocusClass} p-2 -m-2 cursor-pointer`}
|
||||
aria-label={t("social.mastodon.ariaLabel")}
|
||||
>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
|
||||
@@ -153,9 +153,9 @@ const Footer = memo(() => {
|
||||
aria-label={tChrome("footerAriaLabel")}
|
||||
className="order-1 flex w-full max-w-full flex-col
|
||||
items-start
|
||||
gap-[var(--spacing-scale-032)]
|
||||
gap-[var(--space-800)]
|
||||
md:order-2 md:ml-auto md:w-auto md:items-end md:text-right
|
||||
md:gap-[var(--spacing-scale-032)]"
|
||||
md:gap-[var(--space-800)]"
|
||||
>
|
||||
<Link href="/use-cases" className={primaryLinkClass}>
|
||||
{t("navigation.useCases")}
|
||||
@@ -174,9 +174,9 @@ const Footer = memo(() => {
|
||||
|
||||
<div
|
||||
className="flex w-full flex-col
|
||||
gap-[var(--spacing-scale-032)]
|
||||
gap-[var(--space-800)]
|
||||
text-[var(--color-content-default-primary)]
|
||||
md:flex-row md:items-start md:justify-between md:gap-[var(--spacing-scale-040)]
|
||||
md:flex-row md:items-start md:justify-between md:gap-[var(--space-1000)]
|
||||
md:whitespace-nowrap
|
||||
md:text-x-small-paragraph
|
||||
lg:text-small-paragraph"
|
||||
@@ -198,12 +198,12 @@ const Footer = memo(() => {
|
||||
</p>
|
||||
<div
|
||||
className="flex w-full min-w-0 flex-col flex-wrap
|
||||
gap-[var(--spacing-scale-032)]
|
||||
gap-[var(--space-800)]
|
||||
text-small-paragraph
|
||||
text-[var(--color-content-default-primary)]
|
||||
md:max-w-[min(100%,396px)]
|
||||
md:flex-row md:flex-nowrap md:content-center md:items-center md:justify-end
|
||||
md:gap-[var(--spacing-scale-040)]
|
||||
md:gap-[var(--space-1000)]
|
||||
md:text-x-small-paragraph
|
||||
lg:max-w-none
|
||||
lg:gap-10
|
||||
|
||||
@@ -31,15 +31,15 @@ const Menu = memo<MenuProps>(
|
||||
string
|
||||
> = {
|
||||
"X Small":
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-025)] rounded-[var(--space-100)]",
|
||||
Small:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)] rounded-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-100)] rounded-[var(--space-100)]",
|
||||
Medium:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)] rounded-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-100)] rounded-[var(--space-100)]",
|
||||
Large:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)] rounded-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-300)] rounded-[var(--space-100)]",
|
||||
"X Large":
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)] rounded-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-100)] py-[var(--space-100)] gap-[var(--space-300)] rounded-[var(--space-100)]",
|
||||
};
|
||||
|
||||
const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
|
||||
|
||||
@@ -33,16 +33,16 @@ const MenuItemContainer = memo<MenuItemProps>(
|
||||
string
|
||||
> = {
|
||||
"X Small": reducedPadding
|
||||
? "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]"
|
||||
: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]",
|
||||
Small: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]",
|
||||
? "px-[var(--space-100)] py-[var(--space-050)]"
|
||||
: "px-[var(--space-100)] py-[var(--space-050)]",
|
||||
Small: "px-[var(--space-100)] py-[var(--space-050)]",
|
||||
Medium: reducedPadding
|
||||
? "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] h-[32px]"
|
||||
: "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] h-[32px]",
|
||||
? "px-[var(--space-050)] py-[var(--space-200)] h-[32px]"
|
||||
: "px-[var(--space-200)] py-[var(--space-200)] h-[32px]",
|
||||
Large:
|
||||
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]",
|
||||
"px-[var(--space-400)] py-[var(--space-400)] h-[44px]",
|
||||
"X Large":
|
||||
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]",
|
||||
"px-[var(--space-400)] py-[var(--space-400)] h-[44px]",
|
||||
};
|
||||
|
||||
// Text styles based on Figma specifications
|
||||
@@ -74,11 +74,11 @@ const MenuItemContainer = memo<MenuItemProps>(
|
||||
const inverseModeStyles: Record<"default" | "hover" | "selected", string> =
|
||||
{
|
||||
default:
|
||||
"bg-transparent text-[var(--color-content-inverse-primary,black)] hover:bg-[var(--color-surface-inverse-brand-secondary)] hover:text-[var(--color-content-inverse-primary,black)]",
|
||||
"bg-transparent text-[var(--color-content-invert-primary,black)] hover:bg-[var(--color-surface-invert-brand-secondary)] hover:text-[var(--color-content-invert-primary,black)]",
|
||||
hover:
|
||||
"bg-[var(--color-surface-inverse-brand-secondary)] text-[var(--color-content-inverse-primary,black)]",
|
||||
"bg-[var(--color-surface-invert-brand-secondary)] text-[var(--color-content-invert-primary,black)]",
|
||||
selected:
|
||||
"border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-inverse-primary,black)] bg-transparent hover:bg-[var(--color-surface-inverse-brand-secondary)]",
|
||||
"border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-invert-primary,black)] bg-transparent hover:bg-[var(--color-surface-invert-brand-secondary)]",
|
||||
};
|
||||
|
||||
// Get state styles based on mode
|
||||
@@ -86,7 +86,7 @@ const MenuItemContainer = memo<MenuItemProps>(
|
||||
mode === "inverse" ? inverseModeStyles : defaultModeStyles;
|
||||
|
||||
// Base styles
|
||||
const baseStyles = `inline-flex items-center whitespace-nowrap ${sizeStyles[size]} ${textStyles[size]} rounded-[var(--radius-measures-radius-full)] transition-all duration-200 ease-in-out cursor-pointer`;
|
||||
const baseStyles = `inline-flex items-center whitespace-nowrap ${sizeStyles[size]} ${textStyles[size]} rounded-[var(--radius-full)] transition-all duration-200 ease-in-out cursor-pointer`;
|
||||
|
||||
// Interactive styles
|
||||
const interactiveStyles =
|
||||
|
||||
@@ -30,9 +30,9 @@ const NavigationItemContainer = memo<NavigationItemProps>(
|
||||
// Size styles
|
||||
const sizeStyles: Record<string, string> = {
|
||||
default:
|
||||
"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-400)] py-[var(--space-400)] gap-[var(--space-100)]",
|
||||
xsmall:
|
||||
"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
|
||||
"px-[var(--space-100)] py-[var(--space-050)] gap-[var(--space-100)]",
|
||||
};
|
||||
|
||||
// Text styles based on size
|
||||
@@ -42,7 +42,7 @@ const NavigationItemContainer = memo<NavigationItemProps>(
|
||||
xsmall: "text-xx-small-label",
|
||||
};
|
||||
|
||||
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-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
|
||||
|
||||
// Determine which variant to use
|
||||
let finalVariant = variant;
|
||||
|
||||
@@ -32,16 +32,16 @@ export const avatarImages = avatarImageSources.map((src, index) => ({
|
||||
|
||||
/** Padding/type that tracks lg/xl Menu sizes without cloning the items per breakpoint. */
|
||||
const NAV_ITEM_RESPONSIVE_CLASS =
|
||||
"lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
|
||||
"lg:px-[var(--space-400)] lg:py-[var(--space-400)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
|
||||
|
||||
const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
|
||||
"md:px-[var(--spacing-scale-008)] md:py-[var(--spacing-scale-008)] md:h-[32px] md:text-x-small-label lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
|
||||
"md:px-[var(--space-200)] md:py-[var(--space-200)] md:h-[32px] md:text-x-small-label lg:px-[var(--space-400)] lg:py-[var(--space-400)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
|
||||
|
||||
const CREATE_RULE_RESPONSIVE_CLASS =
|
||||
"lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
|
||||
"lg:p-[var(--space-300)] lg:gap-[var(--space-150)] lg:text-medium-label xl:p-[var(--space-400)] xl:gap-[var(--space-200)] xl:text-x-large-label";
|
||||
|
||||
const FOLDER_CREATE_RULE_RESPONSIVE_CLASS =
|
||||
"md:p-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-002)] md:text-x-small-label lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
|
||||
"md:p-[var(--space-200)] md:gap-[var(--space-050)] md:text-x-small-label lg:p-[var(--space-300)] lg:gap-[var(--space-150)] lg:text-medium-label xl:p-[var(--space-400)] xl:gap-[var(--space-200)] xl:text-x-large-label";
|
||||
|
||||
const TopContainer = memo<TopProps>(
|
||||
({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
|
||||
@@ -182,8 +182,8 @@ const TopContainer = memo<TopProps>(
|
||||
size="small"
|
||||
className={
|
||||
folderTop
|
||||
? "md:-space-x-[9px] lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
|
||||
: "lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
|
||||
? "md:-space-x-[9px] lg:-space-x-[var(--space-250)] xl:-space-x-[13px]"
|
||||
: "lg:-space-x-[var(--space-250)] xl:-space-x-[13px]"
|
||||
}
|
||||
>
|
||||
{avatarImageSources.map((src, index) => (
|
||||
@@ -194,8 +194,8 @@ const TopContainer = memo<TopProps>(
|
||||
size="small"
|
||||
className={
|
||||
folderTop
|
||||
? "md:h-[var(--spacing-scale-018)] md:w-[var(--spacing-scale-018)] lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
|
||||
: "lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
|
||||
? "md:h-[var(--sizing-450)] md:w-[var(--sizing-450)] lg:h-[var(--space-600)] lg:w-[var(--space-600)] xl:h-[var(--space-800)] xl:w-[var(--space-800)]"
|
||||
: "lg:h-[var(--space-600)] lg:w-[var(--space-600)] xl:h-[var(--space-800)] xl:w-[var(--space-800)]"
|
||||
}
|
||||
/>
|
||||
))}
|
||||
|
||||
@@ -23,7 +23,7 @@ function TopView({
|
||||
const t = useTranslation(folderTop ? "homeHeader" : "header");
|
||||
|
||||
const loginControl = logIn ? (
|
||||
<Menu size="X Small" className="lg:gap-[var(--spacing-scale-012)]">
|
||||
<Menu size="X Small" className="lg:gap-[var(--space-300)]">
|
||||
{renderLoginButton()}
|
||||
</Menu>
|
||||
) : null;
|
||||
@@ -42,11 +42,11 @@ function TopView({
|
||||
aria-label={t("ariaLabels.homePageNavigationHeader")}
|
||||
>
|
||||
<nav
|
||||
className="relative mx-auto flex h-[50px] items-end justify-between pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]"
|
||||
className="relative mx-auto flex h-[50px] items-end justify-between pl-[var(--space-200)] pr-[var(--space-400)] pt-[var(--space-250)] sm:h-[62px] sm:px-[var(--space-250)] sm:pr-[var(--space-500)] sm:pt-[var(--space-250)] md:h-[68px] md:px-[var(--space-400)] md:pr-[var(--space-800)] md:pt-[var(--space-400)] lg:h-[68px] lg:pl-[var(--space-600)] lg:pr-[var(--space-1400)] lg:pt-[var(--space-400)] xl:h-[88px] xl:pl-[var(--space-1200)] xl:pr-[var(--space-1400)] xl:pt-[var(--space-600)]"
|
||||
role="navigation"
|
||||
aria-label={t("ariaLabels.mainNavigation")}
|
||||
>
|
||||
<div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] w-fit min-w-0 items-center self-end overflow-visible rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:w-auto sm:flex-1 sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:min-w-0 md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:mr-[var(--spacing-scale-024)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:mr-[var(--spacing-scale-032)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]">
|
||||
<div className="HeaderTab header-breakpoint-transition relative flex h-[var(--space-1000)] w-fit min-w-0 items-center self-end overflow-visible rounded-tl-[var(--radius-400)] rounded-tr-[var(--radius-400)] bg-[var(--color-surface-invert-brand-primary)] pl-[var(--space-300)] pr-[var(--space-300)] sm:mr-[var(--space-200)] sm:h-[52px] sm:w-auto sm:flex-1 sm:rounded-t-[var(--radius-500)] sm:pr-[var(--space-150)] md:h-[52px] md:min-w-0 md:rounded-t-[var(--radius-500)] md:pl-[var(--space-600)] md:pr-[var(--space-300)] lg:mr-[var(--space-600)] lg:h-[52px] lg:rounded-t-[var(--radius-500)] lg:pl-[var(--space-600)] lg:pr-[var(--space-1200)] xl:mr-[var(--space-800)] xl:h-[64px] xl:rounded-t-[var(--radius-500)] xl:pl-[var(--space-800)] xl:pr-[var(--space-3000)]">
|
||||
<div className="relative z-[1] shrink-0">
|
||||
<Logo
|
||||
size={logoSize}
|
||||
@@ -56,12 +56,12 @@ function TopView({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="relative z-[1] shrink-0 md:absolute md:top-1/2 md:left-[calc(50vw-var(--spacing-scale-016))] md:-translate-x-1/2 md:-translate-y-1/2 lg:left-[calc(50vw-var(--spacing-scale-024))] xl:left-[calc(50vw-var(--spacing-scale-048))]"
|
||||
className="relative z-[1] shrink-0 md:absolute md:top-1/2 md:left-[calc(50vw-var(--space-400))] md:-translate-x-1/2 md:-translate-y-1/2 lg:left-[calc(50vw-var(--space-600))] xl:left-[calc(50vw-var(--space-1200))]"
|
||||
data-top="nav"
|
||||
>
|
||||
<Menu
|
||||
size="X Small"
|
||||
className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]"
|
||||
className="md:gap-[var(--space-100)] lg:gap-[var(--space-300)]"
|
||||
>
|
||||
{renderNavigationItems()}
|
||||
</Menu>
|
||||
@@ -91,7 +91,7 @@ function TopView({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] self-center md:gap-[var(--spacing-scale-010)]"
|
||||
className="flex shrink-0 items-center gap-[var(--space-100)] self-center md:gap-[var(--space-250)]"
|
||||
data-top="auth"
|
||||
>
|
||||
{loginControl}
|
||||
@@ -123,7 +123,7 @@ function TopView({
|
||||
aria-label={t("ariaLabels.mainNavigationHeader")}
|
||||
>
|
||||
<nav
|
||||
className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
|
||||
className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--space-400)] py-[var(--space-200)] sm:px-[var(--space-400)] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:px-[var(--space-1800)] lg:py-[var(--space-400)]"
|
||||
role="navigation"
|
||||
aria-label={t("ariaLabels.mainNavigation")}
|
||||
>
|
||||
@@ -141,14 +141,14 @@ function TopView({
|
||||
>
|
||||
<Menu
|
||||
size="X Small"
|
||||
className="min-w-0 lg:gap-[var(--spacing-scale-012)]"
|
||||
className="min-w-0 lg:gap-[var(--space-300)]"
|
||||
>
|
||||
{renderNavigationItems()}
|
||||
</Menu>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex shrink-0 items-center justify-self-end gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
|
||||
className="flex shrink-0 items-center justify-self-end gap-[var(--space-100)] md:gap-[var(--space-250)] lg:gap-[var(--space-100)]"
|
||||
data-top="auth"
|
||||
>
|
||||
{loginControl}
|
||||
|
||||
Reference in new issue
Block a user