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
@@ -23,14 +23,14 @@ function layoutFor(
|
||||
size === "s"
|
||||
? "px-[var(--space-500)]"
|
||||
: "px-[var(--space-1200)]";
|
||||
const containerClasses = `flex gap-[var(--space-300)] items-center ${padH} pb-[var(--space-500)] pt-[var(--space-400)] rounded-tl-[var(--radius-200,8px)] rounded-tr-[var(--radius-200,8px)] border-solid`;
|
||||
const containerClasses = `flex gap-[var(--space-300)] items-center ${padH} pb-[var(--space-500)] pt-[var(--space-400)] rounded-tl-[var(--radius-200)] rounded-tr-[var(--radius-200)] border-solid`;
|
||||
if (size === "s") {
|
||||
return {
|
||||
containerClasses,
|
||||
titleClasses:
|
||||
"text-[14px] leading-[18px] font-medium tracking-[0%]",
|
||||
descriptionClasses:
|
||||
"text-small-paragraph mt-[var(--spacing-scale-004)]",
|
||||
"text-small-paragraph mt-[var(--space-100)]",
|
||||
};
|
||||
}
|
||||
return {
|
||||
@@ -38,27 +38,27 @@ function layoutFor(
|
||||
titleClasses:
|
||||
"text-large-label",
|
||||
descriptionClasses:
|
||||
"text-large-paragraph mt-[var(--spacing-scale-004)]",
|
||||
"text-large-paragraph mt-[var(--space-100)]",
|
||||
};
|
||||
}
|
||||
|
||||
if (size === "s") {
|
||||
return {
|
||||
containerClasses:
|
||||
"flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200,8px)] border-solid",
|
||||
"flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200)] border-solid",
|
||||
titleClasses:
|
||||
"text-[14px] leading-[18px] font-medium tracking-[0%]",
|
||||
descriptionClasses:
|
||||
"text-small-paragraph mt-[var(--spacing-scale-004)]",
|
||||
"text-small-paragraph mt-[var(--space-100)]",
|
||||
};
|
||||
}
|
||||
return {
|
||||
containerClasses:
|
||||
"flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200,8px)] border-solid",
|
||||
"flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200)] border-solid",
|
||||
titleClasses:
|
||||
"text-medium-label",
|
||||
descriptionClasses:
|
||||
"text-medium-paragraph mt-[var(--spacing-scale-004)]",
|
||||
"text-medium-paragraph mt-[var(--space-100)]",
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ export function AlertView({
|
||||
width="20"
|
||||
height="20"
|
||||
>
|
||||
<rect width="20" height="20" fill="#D9D9D9" />
|
||||
<rect width="20" height="20" fill="var(--color-gray-200)" />
|
||||
</mask>
|
||||
<g mask="url(#mask0_21296_8285)">
|
||||
<path
|
||||
|
||||
@@ -72,7 +72,7 @@ export function CreateView({
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
|
||||
<div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--space-600)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ export type CreateModalBackdropVariant = "default" | "blurredYellow";
|
||||
const backdropOverlayClasses: Record<CreateModalBackdropVariant, string> = {
|
||||
default: "fixed inset-0 bg-black/50 z-[9998]",
|
||||
blurredYellow:
|
||||
"fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75",
|
||||
"fixed inset-0 z-[9998] bg-[var(--color-surface-invert-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-invert-brand-primary)]/75",
|
||||
};
|
||||
|
||||
export type CreateModalFrameViewProps = {
|
||||
@@ -56,7 +56,7 @@ export function CreateModalFrameView({
|
||||
aria-modal="true"
|
||||
aria-label={ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy}
|
||||
className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500,20px)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`}
|
||||
className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{children}
|
||||
|
||||
@@ -46,7 +46,7 @@ export const DialogView = memo(function DialogView({
|
||||
</div>
|
||||
|
||||
{children ? (
|
||||
<div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
|
||||
<div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--space-600)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -5,9 +5,9 @@ import ModalHeader from "../ModalHeader";
|
||||
import type { LoginBackdropVariant, LoginViewProps } from "./Login.types";
|
||||
|
||||
const backdropClasses: Record<LoginBackdropVariant, string> = {
|
||||
solid: "bg-[var(--color-surface-inverse-brand-primary)]",
|
||||
solid: "bg-[var(--color-surface-invert-brand-primary)]",
|
||||
blurredYellow:
|
||||
"bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75",
|
||||
"bg-[var(--color-surface-invert-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-invert-brand-primary)]/75",
|
||||
};
|
||||
|
||||
export function LoginView({
|
||||
@@ -43,7 +43,7 @@ export function LoginView({
|
||||
aria-modal="true"
|
||||
aria-label={ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy}
|
||||
className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500,20px)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`}
|
||||
className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ModalHeader onClose={onClose} showMoreOptionsButton={false} />
|
||||
|
||||
@@ -183,7 +183,7 @@ export default function LoginForm({
|
||||
return (
|
||||
<div className="flex flex-col gap-6 pt-2">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-inverse-brand-primary)]">
|
||||
<div className="relative flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface-invert-brand-primary)]">
|
||||
<MailIconInline />
|
||||
</div>
|
||||
<ContentLockup
|
||||
@@ -272,7 +272,7 @@ export default function LoginForm({
|
||||
buttonType="filled"
|
||||
palette="default"
|
||||
disabled={submitting}
|
||||
className="w-full !justify-center text-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-012)]"
|
||||
className="w-full !justify-center text-center px-[var(--space-400)] py-[var(--space-300)]"
|
||||
>
|
||||
{t("sendMagicLink")}
|
||||
</Button>
|
||||
@@ -284,7 +284,7 @@ export default function LoginForm({
|
||||
palette="default"
|
||||
disabled={submitting}
|
||||
onClick={onDismiss}
|
||||
className="w-full !justify-center text-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-012)]"
|
||||
className="w-full !justify-center text-center px-[var(--space-400)] py-[var(--space-300)]"
|
||||
>
|
||||
{t("continueWithoutSaving")}
|
||||
</Button>
|
||||
|
||||
@@ -29,12 +29,13 @@ export function ModalFooterView({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
|
||||
className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300)] rounded-br-[var(--radius-300)] shrink-0 relative ${className}`}
|
||||
>
|
||||
{showRemoveButton && (
|
||||
<div className="absolute left-[16px] top-[12px]">
|
||||
<Button
|
||||
buttonType="danger"
|
||||
buttonType="outline"
|
||||
danger
|
||||
palette="default"
|
||||
size="medium"
|
||||
onClick={onRemove}
|
||||
|
||||
@@ -130,8 +130,8 @@ export const ShareView = memo(function ShareView({
|
||||
copied={linkCopied}
|
||||
circleClassName={
|
||||
linkCopied
|
||||
? "border-2 border-[#444444] bg-[#333333]"
|
||||
: "border-[#444444] bg-[#333333] group-hover:border-2 group-hover:border-[var(--color-border-default-positive-primary)] group-hover:bg-[#444444]"
|
||||
? "border-2 border-[var(--color-gray-600)] bg-[var(--color-gray-700)]"
|
||||
: "border-[var(--color-gray-600)] bg-[var(--color-gray-700)] group-hover:border-2 group-hover:border-[var(--color-border-default-positive-primary)] group-hover:bg-[var(--color-gray-600)]"
|
||||
}
|
||||
icon={
|
||||
<ShareAssetIcon
|
||||
@@ -162,7 +162,7 @@ export const ShareView = memo(function ShareView({
|
||||
<ShareChannelTile
|
||||
label={emailLabel}
|
||||
onClick={onEmailShare}
|
||||
circleClassName="border-[var(--color-surface-default-brand-kiwi)] bg-[var(--color-surface-default-brand-kiwi)] group-hover:brightness-110"
|
||||
circleClassName="border-[var(--color-surface-invert-brand-kiwi)] bg-[var(--color-surface-invert-brand-kiwi)] group-hover:brightness-110"
|
||||
icon={<ShareAssetIcon name="mail" width={24} height={24} />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@ const TooltipContainer = memo<TooltipProps>(
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
const tooltipClasses = `absolute z-50 bg-[var(--color-surface-default-primary)] px-[var(--space-300)] py-[var(--space-200)] rounded-[var(--radius-300,12px)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex items-center whitespace-nowrap ${
|
||||
const tooltipClasses = `absolute z-50 bg-[var(--color-surface-default-primary)] px-[var(--space-300)] py-[var(--space-200)] rounded-[var(--radius-300)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex items-center whitespace-nowrap ${
|
||||
position === "top" ? "bottom-full mb-[7px]" : "top-full mt-[7px]"
|
||||
} left-1/2 -translate-x-1/2 ${isVisible ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"} transition-all duration-200`;
|
||||
|
||||
|
||||
Reference in new issue
Block a user