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

Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilalloandCursor committed 2026-11-02 17:03:43 -07:00
1 parent 63d5d21ae0
commit e808fe70bf
162 files changed
+1385 -1377
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.storybook/fonts.css
+1 -4
View File
@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Bricolage+Grotesque:wght@400;500;700;800&family=Space+Grotesk:wght@400;500;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Bricolage+Grotesque:wght@400;500;700;800&display=swap");
:root { :root {
--font-inter: --font-inter:
@@ -7,7 +7,4 @@
--font-bricolage-grotesque: --font-bricolage-grotesque:
"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial; Roboto, "Helvetica Neue", Arial;
--font-space-grotesk:
"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, "Helvetica Neue", Arial;
} }
app/(admin)/monitor/MonitorPageContent.tsx
+27 -27
View File
@@ -13,10 +13,10 @@ export default function MonitorPageContent() {
<div className="min-h-screen bg-[var(--color-surface-default-primary)]"> <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
<Top folderTop={false} /> <Top folderTop={false} />
<main className="container mx-auto px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)]"> <main className="container mx-auto px-[var(--space-600)] py-[var(--space-800)]">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="mb-[var(--spacing-scale-032)]"> <div className="mb-[var(--space-800)]">
<h1 className="text-4xl font-bold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-016)]"> <h1 className="text-4xl font-bold text-[var(--color-content-default-primary)] mb-[var(--space-400)]">
{p.title} {p.title}
</h1> </h1>
<p className="text-[var(--font-size-body-large)] text-[var(--color-content-default-secondary)]"> <p className="text-[var(--font-size-body-large)] text-[var(--color-content-default-secondary)]">
@@ -24,12 +24,12 @@ export default function MonitorPageContent() {
</p> </p>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-scale-032)] mb-[var(--spacing-scale-032)]"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--space-800)] mb-[var(--space-800)]">
<div className="p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]"> <div className="p-[var(--space-600)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-400)]">
<h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]"> <h2 className="text-2xl font-semibold mb-[var(--space-400)] text-[var(--color-content-default-primary)]">
{p.performanceTargets.title} {p.performanceTargets.title}
</h2> </h2>
<div className="space-y-[var(--spacing-scale-012)]"> <div className="space-y-[var(--space-300)]">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.performanceTargets.loadTime} {p.performanceTargets.loadTime}
@@ -73,42 +73,42 @@ export default function MonitorPageContent() {
</div> </div>
</div> </div>
<div className="p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]"> <div className="p-[var(--space-600)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-400)]">
<h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]"> <h2 className="text-2xl font-semibold mb-[var(--space-400)] text-[var(--color-content-default-primary)]">
{p.optimizationStatus.title} {p.optimizationStatus.title}
</h2> </h2>
<div className="space-y-[var(--spacing-scale-012)]"> <div className="space-y-[var(--space-300)]">
<div className="flex items-center gap-[var(--spacing-scale-008)]"> <div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span> <span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.codeSplitting} {p.optimizationStatus.codeSplitting}
</span> </span>
</div> </div>
<div className="flex items-center gap-[var(--spacing-scale-008)]"> <div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span> <span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.reactMemo} {p.optimizationStatus.reactMemo}
</span> </span>
</div> </div>
<div className="flex items-center gap-[var(--spacing-scale-008)]"> <div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span> <span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.imageOptimization} {p.optimizationStatus.imageOptimization}
</span> </span>
</div> </div>
<div className="flex items-center gap-[var(--spacing-scale-008)]"> <div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span> <span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.fontPreloading} {p.optimizationStatus.fontPreloading}
</span> </span>
</div> </div>
<div className="flex items-center gap-[var(--spacing-scale-008)]"> <div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span> <span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.bundleAnalysis} {p.optimizationStatus.bundleAnalysis}
</span> </span>
</div> </div>
<div className="flex items-center gap-[var(--spacing-scale-008)]"> <div className="flex items-center gap-[var(--space-200)]">
<span className="text-green-600">✅</span> <span className="text-green-600">✅</span>
<span className="text-[var(--font-size-body-medium)]"> <span className="text-[var(--font-size-body-medium)]">
{p.optimizationStatus.errorBoundaries} {p.optimizationStatus.errorBoundaries}
@@ -120,40 +120,40 @@ export default function MonitorPageContent() {
<WebVitalsDashboard /> <WebVitalsDashboard />
<div className="mt-[var(--spacing-scale-032)] p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]"> <div className="mt-[var(--space-800)] p-[var(--space-600)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-400)]">
<h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]"> <h2 className="text-2xl font-semibold mb-[var(--space-400)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.title} {p.monitoringCommands.title}
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-016)]"> <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--space-400)]">
<div> <div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]"> <h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.bundleAnalyze.title} {p.monitoringCommands.bundleAnalyze.title}
</h3> </h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm"> <code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.bundleAnalyze.command} {p.monitoringCommands.bundleAnalyze.command}
</code> </code>
</div> </div>
<div> <div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]"> <h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.e2ePerformance.title} {p.monitoringCommands.e2ePerformance.title}
</h3> </h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm"> <code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.e2ePerformance.command} {p.monitoringCommands.e2ePerformance.command}
</code> </code>
</div> </div>
<div> <div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]"> <h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.lhciDesktop.title} {p.monitoringCommands.lhciDesktop.title}
</h3> </h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm"> <code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.lhciDesktop.command} {p.monitoringCommands.lhciDesktop.command}
</code> </code>
</div> </div>
<div> <div>
<h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]"> <h3 className="font-semibold mb-[var(--space-200)] text-[var(--color-content-default-primary)]">
{p.monitoringCommands.performanceBudget.title} {p.monitoringCommands.performanceBudget.title}
</h3> </h3>
<code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm"> <code className="block p-[var(--space-200)] bg-[var(--color-surface-invert-brand-primary)] text-[var(--color-content-invert-primary)] rounded-[var(--radius-300)] text-sm">
{p.monitoringCommands.performanceBudget.command} {p.monitoringCommands.performanceBudget.command}
</code> </code>
</div> </div>
app/(app)/create/components/ApplicableScopeField.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ function ApplicableScopeFieldComponent({
<button <button
type="button" type="button"
onClick={() => setIsAdding(true)} onClick={() => setIsAdding(true)}
className="inline-flex items-center gap-[var(--measures-spacing-050,2px)] rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent" className="inline-flex items-center gap-[var(--space-050)] rounded-[var(--radius-full)] px-[var(--space-250)] py-[var(--space-200)] text-x-small-label text-[color:var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
> >
<AddGlyph /> <AddGlyph />
{addLabel} {addLabel}
app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function CreateFlowLockupCardStepShell({
className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS} className={CREATE_FLOW_MD_CENTERED_SHELL_CLASS}
> >
<div <div
className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`} className={`mx-auto flex w-full min-w-0 flex-col gap-4 md:grid md:w-full md:grid-cols-2 md:justify-items-center md:gap-[var(--space-1200)] ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
> >
<div <div
className={`flex min-w-0 flex-col justify-start md:justify-center ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`} className={`flex min-w-0 flex-col justify-start md:justify-center ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
+4 -4
View File
@@ -60,14 +60,14 @@ export function CreateFlowTwoColumnSelectShell({
> >
<div <div
className={ className={
"flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-400,16px)] " + "flex w-full min-w-0 flex-col items-start gap-[var(--space-400)] " +
"max-lg:flex-none lg:max-h-full lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " + "max-lg:flex-none lg:max-h-full lg:min-h-0 lg:flex-1 lg:flex-row lg:flex-nowrap " +
`${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--measures-spacing-1200,48px)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}` `${rowLgCrossAlignClass} lg:justify-center lg:gap-[var(--space-1200)] lg:overflow-hidden ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`
} }
> >
<div <div
className={ className={
`flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--measures-spacing-200,8px)] ` + `flex w-full min-w-0 shrink-0 flex-col items-start gap-[var(--space-200)] ` +
`lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}` `lg:flex-1 lg:justify-center lg:py-[12px] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
} }
> >
@@ -75,7 +75,7 @@ export function CreateFlowTwoColumnSelectShell({
</div> </div>
<div <div
className={ className={
`relative flex w-full min-w-0 flex-col items-start gap-[var(--measures-spacing-800,32px)] ` + `relative flex w-full min-w-0 flex-col items-start gap-[var(--space-800)] ` +
`overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto ${CREATE_FLOW_SCROLL_END_PAD_CLASS} ` + `overflow-x-hidden lg:min-h-0 lg:flex-1 lg:overflow-y-auto ${CREATE_FLOW_SCROLL_END_PAD_CLASS} ` +
`${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}` `${CREATE_FLOW_SCROLL_REGION_CLASS} ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`
} }
app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardFieldBlocksSummary.view.tsx
+1 -1
View File
@@ -134,7 +134,7 @@ function CustomMethodCardFieldBlocksSummaryViewComponent({
block.blockTitle || block.blockTitle ||
noFileChosen noFileChosen
} }
className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain" className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
/> />
) : ( ) : (
<p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]"> <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
app/(app)/create/components/CustomMethodCardFieldBlocksSummary/CustomMethodCardUploadBlockRow.view.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ function CustomMethodCardUploadBlockRowViewComponent({
<img <img
src={assetUrlTrimmed} src={assetUrlTrimmed}
alt={uploadPreviewImageAlt} alt={uploadPreviewImageAlt}
className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain" className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
/> />
</div> </div>
) : ( ) : (
app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
+3 -3
View File
@@ -57,7 +57,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
key={block.id} key={block.id}
draggable draggable
aria-grabbed={isDragging ? true : undefined} aria-grabbed={isDragging ? true : undefined}
className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--measures-radius-medium,8px)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${ className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--radius-400)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
isDropTarget isDropTarget
? "relative z-10 border-[var(--color-border-invert-primary)]" ? "relative z-10 border-[var(--color-border-invert-primary)]"
: isDragging : isDragging
@@ -74,7 +74,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
tabIndex={0} tabIndex={0}
aria-label={dragHandleAriaLabel} aria-label={dragHandleAriaLabel}
onPointerDown={onHandlePointerDown} onPointerDown={onHandlePointerDown}
className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--measures-radius-200,8px)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]" className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--radius-200)] px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
> >
<DragHandleGlyph /> <DragHandleGlyph />
</span> </span>
@@ -82,7 +82,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
type="button" type="button"
aria-label={title} aria-label={title}
onClick={() => onEditBlock(block)} onClick={() => onEditBlock(block)}
className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]" className="flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-[var(--radius-200)] border-0 bg-transparent px-0 text-left cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)]"
> >
<span className="flex h-8 w-8 shrink-0 items-center justify-center self-center"> <span className="flex h-8 w-8 shrink-0 items-center justify-center self-center">
<Icon <Icon
app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardFieldBodies.view.tsx
+5 -5
View File
@@ -46,7 +46,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
if (fieldType === "text") { if (fieldType === "text") {
return ( return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]"> <div className="flex flex-col gap-[var(--space-600)]">
<InputWithCounter <InputWithCounter
label={copy.text.blockTitleLabel} label={copy.text.blockTitleLabel}
placeholder={copy.text.blockTitlePlaceholder} placeholder={copy.text.blockTitlePlaceholder}
@@ -80,7 +80,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
if (fieldType === "badges") { if (fieldType === "badges") {
return ( return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]"> <div className="flex flex-col gap-[var(--space-600)]">
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<InputLabel <InputLabel
label={copy.badges.blockTitleLabel} label={copy.badges.blockTitleLabel}
@@ -114,7 +114,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
if (fieldType === "upload") { if (fieldType === "upload") {
return ( return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]"> <div className="flex flex-col gap-[var(--space-600)]">
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
@@ -154,7 +154,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
<img <img
src={uploadPreviewTrimmed} src={uploadPreviewTrimmed}
alt={copy.upload.uploadPreviewImageAlt} alt={copy.upload.uploadPreviewImageAlt}
className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain" className="max-h-[160px] max-w-full rounded-[var(--radius-200)] object-contain"
/> />
</div> </div>
) : ( ) : (
@@ -184,7 +184,7 @@ function CustomMethodCardWizardFieldBodiesViewComponent({
} }
return ( return (
<div className="flex flex-col gap-[var(--spacing-scale-024)]"> <div className="flex flex-col gap-[var(--space-600)]">
<InputWithCounter <InputWithCounter
label={copy.proportion.blockTitleLabel} label={copy.proportion.blockTitleLabel}
placeholder={copy.proportion.blockTitlePlaceholder} placeholder={copy.proportion.blockTitlePlaceholder}
app/(app)/create/components/FinalReviewChipEditModal.tsx
+1 -1
View File
@@ -1112,7 +1112,7 @@ export function FinalReviewChipEditModal({
} }
ariaLabel={target?.chipLabel || "Edit chip details"} ariaLabel={target?.chipLabel || "Edit chip details"}
> >
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2"> <div className="flex flex-col gap-[var(--space-600)] pb-2">
{draft?.groupKey === "coreValues" && {draft?.groupKey === "coreValues" &&
target && target &&
(modalUsesWizardFieldBlocksBody ? ( (modalUsesWizardFieldBlocksBody ? (
app/(app)/create/components/ModalTextAreaField.tsx
+2 -2
View File
@@ -107,13 +107,13 @@ function ModalTextAreaFieldComponent({
<button <button
type="button" type="button"
onClick={() => onChange(draftSource)} onClick={() => onChange(draftSource)}
className="flex shrink-0 items-center justify-center gap-[var(--measures-spacing-050,2px)] overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-250,10px)] py-[var(--measures-spacing-200,8px)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent" className="flex shrink-0 items-center justify-center gap-[var(--space-050)] overflow-clip rounded-[var(--radius-full)] px-[var(--space-250)] py-[var(--space-200)] text-x-small-label text-[color:var(--color-content-default-primary,white)] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
> >
<PlusGlyph /> <PlusGlyph />
{generateDraftLabel} {generateDraftLabel}
</button> </button>
{generateDraftHint ? ( {generateDraftHint ? (
<p className="text-[length:var(--sizing-300,12px)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]"> <p className="text-[length:var(--sizing-300)] leading-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)]">
{generateDraftHint} {generateDraftHint}
</p> </p>
) : null} ) : null}
app/(app)/create/components/createFlowLayoutTokens.ts
+1 -1
View File
@@ -48,7 +48,7 @@ export const CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS =
export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS = export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS =
"w-full min-w-0 lg:mx-auto lg:max-w-[640px]"; "w-full min-w-0 lg:mx-auto lg:max-w-[640px]";
/** Two 640px columns + `--measures-spacing-1200` (48px) gutter. */ /** Two 640px columns + `--space-1200` (48px) gutter. */
export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS = export const CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS =
"w-full min-w-0 lg:max-w-[1328px]"; "w-full min-w-0 lg:max-w-[1328px]";
app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ function CoreValueEditFieldsComponent({
); );
return ( return (
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2"> <div className="flex flex-col gap-[var(--space-600)] pb-2">
<ModalTextAreaField <ModalTextAreaField
label={t.meaningLabel} label={t.meaningLabel}
value={value.meaning} value={value.meaning}
app/(app)/create/screens/completed/CompletedScreen.tsx
+1 -1
View File
@@ -165,7 +165,7 @@ export function CompletedScreen() {
<> <>
<div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-[var(--color-teal-teal50,#c9fef9)] md:h-full"> <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden bg-[var(--color-teal-teal50,#c9fef9)] md:h-full">
<div <div
className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`} className={`mx-auto grid min-h-0 w-full grid-cols-1 gap-4 ${CREATE_FLOW_PAGE_GUTTER_CLASS} max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:grid-cols-2 md:grid-rows-1 md:items-stretch md:justify-items-center md:gap-[var(--space-1200)] md:overflow-hidden md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
> >
<div <div
className={`flex flex-col justify-start max-md:min-h-min max-md:overflow-visible min-h-0 overflow-hidden md:justify-center md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`} className={`flex flex-col justify-start max-md:min-h-min max-md:overflow-visible min-h-0 overflow-hidden md:justify-center md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/(app)/create/screens/informational/InformationalScreen.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export function InformationalScreen() {
contentTopBelowMd="space-1400" contentTopBelowMd="space-1400"
> >
<div <div
className={`flex flex-col items-center gap-[var(--measures-spacing-1200,48px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`} className={`flex flex-col items-center gap-[var(--space-1200)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
> >
<CreateFlowHeaderLockup <CreateFlowHeaderLockup
title={copy.title} title={copy.title}
app/(app)/create/screens/review/CommunityReviewScreen.tsx
+1 -1
View File
@@ -133,7 +133,7 @@ export function CommunityReviewScreen() {
contentTopBelowMd="space-1400" contentTopBelowMd="space-1400"
> >
<div <div
className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--measures-spacing-1200,48px)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`} className={`flex w-full min-w-0 flex-col items-center gap-6 lg:mx-auto lg:w-full lg:grid lg:grid-cols-2 lg:items-center lg:justify-items-center lg:gap-x-[var(--space-1200)] lg:gap-y-6 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
> >
<div <div
className={`flex flex-col justify-center lg:min-h-[212px] ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`} className={`flex flex-col justify-center lg:min-h-[212px] ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
+1 -1
View File
@@ -190,7 +190,7 @@ export function ConfirmStakeholdersScreen() {
hasLeadingIcon={false} hasLeadingIcon={false}
hasBodyText={false} hasBodyText={false}
onClose={() => setToastDismissed(true)} onClose={() => setToastDismissed(true)}
className="w-full !px-[var(--space-600,24px)] !py-[var(--space-400,16px)] md:!py-4" className="w-full !px-[var(--space-600)] !py-[var(--space-400)] md:!py-4"
/> />
</div> </div>
)} )}
app/(app)/create/screens/upload/CommunityUploadScreen.tsx
+1 -1
View File
@@ -241,7 +241,7 @@ export function CommunityUploadScreen() {
<img <img
src={displaySrc ?? ""} src={displaySrc ?? ""}
alt={u.previewAlt} alt={u.previewAlt}
className="max-h-[200px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain" className="max-h-[200px] max-w-full rounded-[var(--radius-200)] object-contain"
/> />
</div> </div>
) : ( ) : (
app/(app)/create/utils/createFlowFooterClassNames.ts
+2 -2
View File
@@ -12,8 +12,8 @@
*/ */
export const CREATE_FLOW_FOOTER_BUTTON_CLASS = export const CREATE_FLOW_FOOTER_BUTTON_CLASS =
"!text-x-small-label md:!text-small-label " + "!text-x-small-label md:!text-small-label " +
"!px-[var(--spacing-measures-spacing-200,8px)] md:!px-[var(--spacing-measures-spacing-250,10px)] " + "!px-[var(--space-200)] md:!px-[var(--space-250)] " +
"!py-[var(--spacing-measures-spacing-200,8px)] md:!py-[var(--spacing-measures-spacing-250,10px)]"; "!py-[var(--space-200)] md:!py-[var(--space-250)]";
/** /**
* Template-review "Use without changes" (ghost variant) renders on a dark * Template-review "Use without changes" (ghost variant) renders on a dark
app/(app)/login/page.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import Login from "../../components/modals/Login";
import LoginForm from "../../components/modals/Login/LoginForm"; import LoginForm from "../../components/modals/Login/LoginForm";
const loginPageBgClass = const loginPageBgClass =
"min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]"; "min-h-[100dvh] bg-[var(--color-surface-invert-brand-primary)]";
function LoginLoadingFallback() { function LoginLoadingFallback() {
const t = useTranslation("pages.login"); const t = useTranslation("pages.login");
app/(app)/profile/_components/ProfilePage.view.tsx
+3 -2
View File
@@ -510,7 +510,8 @@ export function ProfilePageView({
<Button <Button
type="button" type="button"
size="medium" size="medium"
buttonType="danger" buttonType="outline"
danger
palette="default" palette="default"
onClick={onConfirmDeleteAccount} onClick={onConfirmDeleteAccount}
disabled={accountDeleteBusy} disabled={accountDeleteBusy}
@@ -576,7 +577,7 @@ export function ProfilePageView({
> >
{emailChangeRequestSent ? ( {emailChangeRequestSent ? (
<div className="flex flex-col gap-3 pt-2"> <div className="flex flex-col gap-3 pt-2">
<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)]">
<Icon name="mail" size={22} aria-hidden /> <Icon name="mail" size={22} aria-hidden />
</div> </div>
</div> </div>
app/(dev)/components-preview/page.tsx
+8 -8
View File
@@ -39,9 +39,9 @@ const listSampleItems = [
export default function ComponentsPreview() { export default function ComponentsPreview() {
return ( return (
<div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--spacing-scale-032)]"> <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-[var(--space-800)]">
<div className="mx-auto max-w-[1200px] space-y-[var(--spacing-scale-040)]"> <div className="mx-auto max-w-[1200px] space-y-[var(--space-1000)]">
<header className="space-y-[var(--spacing-scale-008)]"> <header className="space-y-[var(--space-200)]">
<h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]"> <h1 className="font-bricolage-grotesque text-[48px] font-bold leading-[56px] text-[var(--color-content-default-primary)]">
Component Preview Component Preview
</h1> </h1>
@@ -52,11 +52,11 @@ export default function ComponentsPreview() {
</p> </p>
</header> </header>
<section className="space-y-[var(--spacing-scale-016)]"> <section className="space-y-[var(--space-400)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]"> <h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Link Link
</h2> </h2>
<div className="flex flex-col gap-8 rounded-[var(--radius-300,12px)] bg-[var(--color-surface-default-secondary)] p-[var(--spacing-scale-032)]"> <div className="flex flex-col gap-8 rounded-[var(--radius-300)] bg-[var(--color-surface-default-secondary)] p-[var(--space-800)]">
<div> <div>
<p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]"> <p className="mb-4 text-small-paragraph text-[var(--color-content-default-tertiary)]">
Light surface Light surface
@@ -153,7 +153,7 @@ export default function ComponentsPreview() {
</div> </div>
</section> </section>
<section className="space-y-[var(--spacing-scale-016)]"> <section className="space-y-[var(--space-400)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]"> <h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
Divider Divider
</h2> </h2>
@@ -177,7 +177,7 @@ export default function ComponentsPreview() {
</div> </div>
</section> </section>
<section className="space-y-[var(--spacing-scale-024)]"> <section className="space-y-[var(--space-600)]">
<h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]"> <h2 className="font-bricolage-grotesque text-large-heading text-[var(--color-content-default-primary)]">
List List
</h2> </h2>
@@ -185,7 +185,7 @@ export default function ComponentsPreview() {
List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row: List frame: S (21863:45631), M (21863:45493), L (21844:4405). Row:
ListEntry (21844:4118). ListEntry (21844:4118).
</p> </p>
<div className="space-y-[var(--spacing-scale-024)]"> <div className="space-y-[var(--space-600)]">
<div> <div>
<h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]"> <h3 className="mb-2 text-sm font-medium text-[var(--color-content-default-secondary)]">
Small Small
app/(marketing)/_components/LegalDocumentPage.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ type LegalDocumentPageProps = {
const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g; const INLINE_LINK = /\[([^\]]+)\]\(([^)]+)\)/g;
const ARTICLE_COLUMN_CLASS = const ARTICLE_COLUMN_CLASS =
"mx-auto flex w-full flex-col gap-[var(--space-800,32px)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-none xl:text-xx-large-paragraph"; "mx-auto flex w-full flex-col gap-[var(--space-800)] text-[var(--color-content-default-primary)] text-medium-paragraph sm:max-w-[390px] sm:text-large-paragraph md:max-w-[472px] lg:max-w-[700px] lg:text-x-large-paragraph xl:max-w-none xl:text-xx-large-paragraph";
const LINK_CLASS = "underline decoration-solid underline-offset-2"; const LINK_CLASS = "underline decoration-solid underline-offset-2";
@@ -160,7 +160,7 @@ export default function LegalDocumentPage({
/> />
<article <article
className="relative z-10 flex w-full justify-center p-[var(--spacing-scale-024)] sm:px-0 sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]" className="relative z-10 flex w-full justify-center p-[var(--space-600)] sm:px-0 sm:py-[var(--space-800)] xl:px-[calc(268/1440*100%)]"
data-node-id="19003:23574" data-node-id="19003:23574"
> >
<div className={ARTICLE_COLUMN_CLASS}> <div className={ARTICLE_COLUMN_CLASS}>
@@ -177,7 +177,7 @@ export default function LegalDocumentPage({
{page.sections.map((section) => ( {page.sections.map((section) => (
<section <section
key={section.heading} key={section.heading}
className="flex w-full flex-col gap-[var(--space-200,8px)]" className="flex w-full flex-col gap-[var(--space-200)]"
data-name="TextBlock" data-name="TextBlock"
> >
<h2 className="w-full font-bold">{section.heading}</h2> <h2 className="w-full font-bold">{section.heading}</h2>
app/(marketing)/_components/MarketingRuleStackSection.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { gridEntriesForSlugOrderWithCatalogFallback } from "../../../lib/templat
const RuleStack = dynamic(() => import("../../components/sections/RuleStack"), { const RuleStack = dynamic(() => import("../../components/sections/RuleStack"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" /> <section className="py-[var(--space-800)] min-h-[400px]" />
), ),
ssr: true, ssr: true,
}); });
app/(marketing)/blog/[slug]/page.tsx
+4 -4
View File
@@ -23,7 +23,7 @@ const RelatedArticles = dynamic(
() => import("../../../components/sections/RelatedArticles"), () => import("../../../components/sections/RelatedArticles"),
{ {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" /> <section className="py-[var(--space-800)] min-h-[400px]" />
), ),
ssr: true, ssr: true,
}, },
@@ -228,12 +228,12 @@ export default async function BlogPostPage({ params }: PageProps) {
data-node-id="19031:10426" data-node-id="19031:10426"
className=" className="
relative z-10 flex w-full justify-center relative z-10 flex w-full justify-center
p-[var(--spacing-scale-024)] p-[var(--space-600)]
sm:px-0 sm:py-[var(--spacing-scale-032)] sm:px-0 sm:py-[var(--space-800)]
xl:px-[calc(268/1440*100%)] xl:px-[calc(268/1440*100%)]
" "
> >
<div className="post-body w-full text-[var(--color-content-inverse-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none"> <div className="post-body w-full text-[var(--color-content-invert-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none">
<div dangerouslySetInnerHTML={{ __html: post.htmlContent }} /> <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
</div> </div>
</article> </article>
app/(marketing)/how-it-works/page.tsx
+2 -2
View File
@@ -20,7 +20,7 @@ const RelatedArticles = dynamic(
() => import("../../components/sections/RelatedArticles"), () => import("../../components/sections/RelatedArticles"),
{ {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" /> <section className="py-[var(--space-800)] min-h-[400px]" />
), ),
ssr: true, ssr: true,
}, },
@@ -110,7 +110,7 @@ export default function HowItWorksPage() {
<div className="relative w-full overflow-x-clip"> <div className="relative w-full overflow-x-clip">
<ContentTemplateDecorativeShapes variant="guide" /> <ContentTemplateDecorativeShapes variant="guide" />
<article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)] xl:px-[calc(268/1440*100%)]"> <article className="relative z-10 p-[var(--space-600)] sm:py-[var(--space-800)] xl:px-[calc(268/1440*100%)]">
<div <div
className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none" className="post-body text-[var(--color-content-default-primary)] text-medium-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-none"
dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }} dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
app/(marketing)/learn/page.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ export default function LearnPage() {
*/} */}
<div <div
data-testid="learn-article-grid" data-testid="learn-article-grid"
className="flex flex-col space-y-[var(--spacing-scale-002)] sm:space-y-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-024)] sm:pb-[var(--spacing-scale-024)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--spacing-scale-008)] smd:space-y-0 smd:px-[var(--spacing-scale-020)] smd:pt-[var(--spacing-scale-024)] smd:pb-[var(--spacing-scale-024)] md:gap-[var(--spacing-scale-016)] md:px-[var(--spacing-scale-032)] xmd:gap-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-064)] lg:pt-[var(--spacing-scale-032)] lg:pb-[var(--spacing-scale-064)] lg2:gap-x-[var(--spacing-scale-016)] lg2:gap-y-[var(--spacing-scale-024)] xl:gap-x-[var(--spacing-scale-016)] xl:gap-y-[var(--spacing-scale-016)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--spacing-scale-008))/2)] md:[&>*]:w-[calc((100%-var(--spacing-scale-016))/2)] xmd:[&>*]:w-[calc((100%-2*var(--spacing-scale-012))/3)] lg:[&>*]:w-[calc((100%-2*var(--spacing-scale-016))/3)] lg2:[&>*]:w-[calc((100%-3*var(--spacing-scale-016))/4)] xl:[&>*]:w-[calc((100%-4*var(--spacing-scale-016))/5)]" className="flex flex-col space-y-[var(--space-050)] sm:space-y-[var(--space-200)] sm:px-[var(--space-500)] sm:pt-[var(--space-600)] sm:pb-[var(--space-600)] smd:flex-row smd:flex-wrap smd:justify-center smd:gap-[var(--space-200)] smd:space-y-0 smd:px-[var(--space-500)] smd:pt-[var(--space-600)] smd:pb-[var(--space-600)] md:gap-[var(--space-400)] md:px-[var(--space-800)] xmd:gap-[var(--space-300)] lg:gap-[var(--space-400)] lg:px-[var(--space-1800)] lg:pt-[var(--space-800)] lg:pb-[var(--space-1800)] lg2:gap-x-[var(--space-400)] lg2:gap-y-[var(--space-600)] xl:gap-x-[var(--space-400)] xl:gap-y-[var(--space-400)] [&>*]:min-w-0 [&>*]:w-full smd:[&>*]:w-[calc((100%-var(--space-200))/2)] md:[&>*]:w-[calc((100%-var(--space-400))/2)] xmd:[&>*]:w-[calc((100%-2*var(--space-300))/3)] lg:[&>*]:w-[calc((100%-2*var(--space-400))/3)] lg2:[&>*]:w-[calc((100%-3*var(--space-400))/4)] xl:[&>*]:w-[calc((100%-4*var(--space-400))/5)]"
> >
{allPosts.map((post) => ( {allPosts.map((post) => (
<ContentThumbnailTemplate <ContentThumbnailTemplate
app/(marketing)/page.tsx
+5 -5
View File
@@ -13,14 +13,14 @@ export const metadata: Metadata = routeMetadata("/");
// Code split below-the-fold components to reduce initial bundle size // Code split below-the-fold components to reduce initial bundle size
const LogoWall = dynamic(() => import("../components/sections/LogoWall"), { const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[200px]" /> <section className="py-[var(--space-800)] min-h-[200px]" />
), ),
ssr: true, ssr: true,
}); });
const CardSteps = dynamic(() => import("../components/sections/CardSteps"), { const CardSteps = dynamic(() => import("../components/sections/CardSteps"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[300px]" /> <section className="py-[var(--space-800)] min-h-[300px]" />
), ),
ssr: true, ssr: true,
}); });
@@ -29,7 +29,7 @@ const FeatureGrid = dynamic(
() => import("../components/sections/FeatureGrid"), () => import("../components/sections/FeatureGrid"),
{ {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[500px]" /> <section className="py-[var(--space-800)] min-h-[500px]" />
), ),
ssr: true, ssr: true,
}, },
@@ -37,7 +37,7 @@ const FeatureGrid = dynamic(
const QuoteBlock = dynamic(() => import("../components/sections/QuoteBlock"), { const QuoteBlock = dynamic(() => import("../components/sections/QuoteBlock"), {
loading: () => ( loading: () => (
<section className="py-[var(--spacing-scale-032)] min-h-[300px]" /> <section className="py-[var(--space-800)] min-h-[300px]" />
), ),
ssr: true, ssr: true,
}); });
@@ -102,7 +102,7 @@ export default function Page() {
<CardSteps {...cardStepsData} /> <CardSteps {...cardStepsData} />
<Suspense <Suspense
fallback={ fallback={
<section className="py-[var(--spacing-scale-032)] min-h-[400px]" /> <section className="py-[var(--space-800)] min-h-[400px]" />
} }
> >
<MarketingRuleStackSection /> <MarketingRuleStackSection />
app/(marketing)/rules/[id]/page.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default async function PublicRuleDetailPage({ params }: PageProps) {
return ( return (
<article className="min-h-screen bg-[var(--color-teal-teal50,#c9fef9)]"> <article className="min-h-screen bg-[var(--color-teal-teal50,#c9fef9)]">
<div className="mx-auto flex max-w-[1200px] flex-col gap-[var(--measures-spacing-1200,48px)] px-5 py-[var(--spacing-scale-048,48px)] md:px-12 md:py-[var(--spacing-scale-064,64px)]"> <div className="mx-auto flex max-w-[1200px] flex-col gap-[var(--space-1200)] px-5 py-[var(--space-1200)] md:px-12 md:py-[var(--space-1800)]">
<HeaderLockup <HeaderLockup
title={rule.title} title={rule.title}
description={description} description={description}
app/(marketing)/use-cases/[slug]/page.tsx
+1 -1
View File
@@ -131,7 +131,7 @@ export default async function UseCaseDetailPage({ params }: PageProps) {
/> />
<article <article
data-figma-node="22015:42622" data-figma-node="22015:42622"
className="flex w-full items-center justify-center self-stretch px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-064)] xl:px-[256px]" className="flex w-full items-center justify-center self-stretch px-[var(--space-600)] py-[var(--space-800)] sm:px-[var(--space-800)] md:px-[var(--space-1200)] lg:px-[var(--space-1800)] xl:px-[256px]"
> >
<div <div
className="use-case-body" className="use-case-body"
app/(marketing)/use-cases/page.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ const RelatedArticles = dynamic(
() => import("../../components/sections/RelatedArticles"), () => import("../../components/sections/RelatedArticles"),
{ {
loading: () => ( loading: () => (
<section className="min-h-[400px] bg-black py-[var(--spacing-scale-032)]" /> <section className="min-h-[400px] bg-black py-[var(--space-800)]" />
), ),
ssr: true, ssr: true,
}, },
@@ -176,7 +176,7 @@ export default function UseCasesPage() {
<div className="bg-[var(--color-surface-default-primary)]"> <div className="bg-[var(--color-surface-default-primary)]">
<Suspense <Suspense
fallback={ fallback={
<section className="min-h-[400px] py-[var(--spacing-scale-032)]" /> <section className="min-h-[400px] py-[var(--space-800)]" />
} }
> >
<MarketingRuleStackSection <MarketingRuleStackSection
app/(marketing)/use-cases/use-cases.css
+1 -1
View File
@@ -9,7 +9,7 @@
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
line-height: 130%; line-height: 130%;
color: var(--color-content-inverse-primary); color: var(--color-content-invert-primary);
word-break: break-word; word-break: break-word;
} }
app/(marketing-case-study)/use-cases/[slug]/rule/_components/UseCaseCompletedRule.view.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ export function UseCaseCompletedRuleView({
onExit={onExit} onExit={onExit}
/> />
<div <div
className={`mx-auto grid w-full min-h-0 flex-1 grid-cols-1 gap-4 px-5 max-md:max-w-[639px] max-md:gap-6 max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:flex-1 md:grid-cols-2 md:grid-rows-1 md:items-start md:justify-items-center md:gap-[var(--measures-spacing-1200,48px)] md:overflow-hidden md:px-12 md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`} className={`mx-auto grid w-full min-h-0 flex-1 grid-cols-1 gap-4 px-5 max-md:max-w-[639px] max-md:gap-6 max-md:overflow-y-auto max-md:overscroll-y-contain max-md:pt-[var(--space-800)] max-md:pb-8 md:h-full md:flex-1 md:grid-cols-2 md:grid-rows-1 md:items-start md:justify-items-center md:gap-[var(--space-1200)] md:overflow-hidden md:px-12 md:py-0 ${CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS}`}
> >
<div <div
className={`relative z-[1] flex flex-col justify-start max-md:shrink-0 max-md:pb-4 md:sticky md:top-0 md:z-[1] md:flex md:h-[calc(100dvh-4rem)] md:max-h-[calc(100dvh-4rem)] md:flex-col md:justify-center md:self-start md:overflow-hidden md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`} className={`relative z-[1] flex flex-col justify-start max-md:shrink-0 max-md:pb-4 md:sticky md:top-0 md:z-[1] md:flex md:h-[calc(100dvh-4rem)] md:max-h-[calc(100dvh-4rem)] md:flex-col md:justify-center md:self-start md:overflow-hidden md:pb-8 ${CREATE_FLOW_MD_UP_GRID_CELL_CLASS}`}
app/components/asset/Avatar/Avatar.tsx
+6 -6
View File
@@ -29,13 +29,13 @@ export interface AvatarProps {
const SIZE_CLASS: Record<AvatarSizeValue, string> = { const SIZE_CLASS: Record<AvatarSizeValue, string> = {
small: small:
"h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] text-xx-small-label", "h-[var(--space-400)] w-[var(--space-400)] text-xx-small-label",
medium: medium:
"h-[var(--spacing-scale-018)] w-[var(--spacing-scale-018)] text-xx-small-label", "h-[var(--sizing-450)] w-[var(--sizing-450)] text-xx-small-label",
large: large:
"h-[var(--spacing-scale-024)] w-[var(--spacing-scale-024)] text-xx-small-label", "h-[var(--space-600)] w-[var(--space-600)] text-xx-small-label",
xlarge: xlarge:
"h-[var(--spacing-scale-032)] w-[var(--spacing-scale-032)] text-x-small-label", "h-[var(--space-800)] w-[var(--space-800)] text-x-small-label",
}; };
function formatAvatarInitials(value: string): string { function formatAvatarInitials(value: string): string {
@@ -92,8 +92,8 @@ const Avatar = memo<AvatarProps>(
const radiusClass = const radiusClass =
shape === "rounded-square" shape === "rounded-square"
? "rounded-[var(--measures-radius-200,8px)]" ? "rounded-[var(--radius-200)]"
: "rounded-[var(--radius-measures-radius-full)]"; : "rounded-[var(--radius-full)]";
const fallbackChrome = const fallbackChrome =
variant === "outlined" variant === "outlined"
? "border-[1.5px] border-solid border-[var(--color-content-default-brand-primary)] bg-transparent text-[var(--color-content-default-brand-primary)]" ? "border-[1.5px] border-solid border-[var(--color-content-default-brand-primary)] bg-transparent text-[var(--color-content-default-brand-primary)]"
app/components/asset/AvatarContainer/AvatarContainer.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ const AvatarContainer = memo<AvatarContainerProps>(
({ children, size: sizeProp = "small", className = "", ...props }) => { ({ children, size: sizeProp = "small", className = "", ...props }) => {
const size = sizeProp; const size = sizeProp;
const sizeStyles: Record<string, string> = { const sizeStyles: Record<string, string> = {
small: "flex -space-x-[var(--spacing-scale-008)]", small: "flex -space-x-[var(--space-200)]",
medium: "flex -space-x-[9px]", medium: "flex -space-x-[9px]",
large: "flex -space-x-[var(--spacing-scale-010)]", large: "flex -space-x-[var(--space-250)]",
xlarge: "flex -space-x-[13px]", xlarge: "flex -space-x-[13px]",
}; };
app/components/asset/Logo/Logo.tsx
+7 -7
View File
@@ -40,8 +40,8 @@ const Logo = memo<LogoProps>(
// instances scale that lockup. // instances scale that lockup.
const sizes: Record<string, SizeConfig> = { const sizes: Record<string, SizeConfig> = {
default: { default: {
containerHeight: "h-[var(--spacing-scale-040)]", containerHeight: "h-[var(--space-1000)]",
gap: "gap-[var(--spacing-scale-006)]", gap: "gap-[var(--space-150)]",
textSize: "text-[21.97px]", textSize: "text-[21.97px]",
lineHeight: "leading-[27.05px]", lineHeight: "leading-[27.05px]",
iconSize: "w-[27px] h-[27px]", iconSize: "w-[27px] h-[27px]",
@@ -57,16 +57,16 @@ const Logo = memo<LogoProps>(
"w-[27.96px] h-[27.96px] md:w-[38.18px] md:h-[38.18px] lg:w-[55.91px] lg:h-[55.91px]", "w-[27.96px] h-[27.96px] md:w-[38.18px] md:h-[38.18px] lg:w-[55.91px] lg:h-[55.91px]",
}, },
createFlow: { createFlow: {
containerHeight: "h-[30px] md:h-[var(--spacing-scale-040)]", containerHeight: "h-[30px] md:h-[var(--space-1000)]",
gap: "gap-[4.5px] md:gap-[var(--spacing-scale-006)]", gap: "gap-[4.5px] md:gap-[var(--space-150)]",
textSize: "text-[16.48px] md:text-[21.97px]", textSize: "text-[16.48px] md:text-[21.97px]",
lineHeight: "leading-[20.28px] md:leading-[27.05px]", lineHeight: "leading-[20.28px] md:leading-[27.05px]",
iconSize: "w-[20.25px] h-[20.25px] md:w-[27px] md:h-[27px]", iconSize: "w-[20.25px] h-[20.25px] md:w-[27px] md:h-[27px]",
}, },
topNavFolderTop: { topNavFolderTop: {
containerHeight: containerHeight:
"h-[14.1px] sm:h-[21.35px] md:h-[var(--spacing-scale-032)] lg:h-[var(--spacing-scale-040)] xl:h-[50.35px]", "h-[14.1px] sm:h-[21.35px] md:h-[var(--space-800)] lg:h-[var(--space-1000)] xl:h-[50.35px]",
gap: "gap-0 sm:gap-[3.2px] md:gap-[4.8px] lg:gap-[var(--spacing-scale-006)] xl:gap-[7.5px]", gap: "gap-0 sm:gap-[3.2px] md:gap-[4.8px] lg:gap-[var(--space-150)] xl:gap-[7.5px]",
textSize: textSize:
"text-[11.57px] sm:text-[11.72px] md:text-[17.58px] lg:text-[21.97px] xl:text-[27.47px]", "text-[11.57px] sm:text-[11.72px] md:text-[17.58px] lg:text-[21.97px] xl:text-[27.47px]",
lineHeight: lineHeight:
@@ -76,7 +76,7 @@ const Logo = memo<LogoProps>(
}, },
topNavHeader: { topNavHeader: {
containerHeight: containerHeight:
"h-[14.2px] sm:h-[21.22px] md:h-[var(--spacing-scale-032)] lg:h-[40.69px] xl:h-[50.35px]", "h-[14.2px] sm:h-[21.22px] md:h-[var(--space-800)] lg:h-[40.69px] xl:h-[50.35px]",
gap: "gap-0 sm:gap-[3.18px] md:gap-[4.85px] lg:gap-[6.06px] xl:gap-[7.5px]", gap: "gap-0 sm:gap-[3.18px] md:gap-[4.85px] lg:gap-[6.06px] xl:gap-[7.5px]",
textSize: textSize:
"text-[11.57px] sm:text-[11.66px] md:text-[17.76px] lg:text-[22.2px] xl:text-[27.47px]", "text-[11.57px] sm:text-[11.66px] md:text-[17.76px] lg:text-[22.2px] xl:text-[27.47px]",
app/components/buttons/Button/Button.tsx
+26 -19
View File
@@ -28,6 +28,11 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
* @default "default" * @default "default"
*/ */
state?: ButtonStateValue; state?: ButtonStateValue;
/**
* Danger treatment beside Type. Renders the outline button in red.
* @default false
*/
danger?: boolean;
/** /**
* Whether to show a leading icon (Figma prop). * Whether to show a leading icon (Figma prop).
* @default false * @default false
@@ -62,6 +67,7 @@ const Button = memo<ButtonProps>(
palette: paletteProp, palette: paletteProp,
size: sizeProp = "xsmall", size: sizeProp = "xsmall",
state: _stateProp, state: _stateProp,
danger = false,
hasIconLeading = false, hasIconLeading = false,
hasIconFollowing = false, hasIconFollowing = false,
hasText = true, hasText = true,
@@ -89,20 +95,21 @@ const Button = memo<ButtonProps>(
if (type === "outline" && palette === "default") return "outline"; if (type === "outline" && palette === "default") return "outline";
if (type === "outline" && palette === "inverse") return "outline-inverse"; if (type === "outline" && palette === "inverse") return "outline-inverse";
if (type === "ghost" && palette === "default") return "ghost"; if (type === "ghost" && palette === "default") return "ghost";
if (type === "ghost" && palette === "inverse") return "ghost-inverse"; return "ghost-inverse";
if (type === "danger" && palette === "default") return "danger";
// danger + inverse
return "danger-inverse";
}; };
const variant = getVariantFromTypeAndPalette(buttonType, buttonPalette); const variant = danger
? buttonPalette === "inverse"
? "danger-inverse"
: "danger"
: getVariantFromTypeAndPalette(buttonType, buttonPalette);
const sizeStyles: Record<string, string> = { const sizeStyles: Record<string, string> = {
xsmall: "p-[var(--spacing-scale-004)] gap-[var(--spacing-scale-002)]", xsmall: "p-[var(--space-100)] gap-[var(--space-050)]",
small: "p-[var(--spacing-scale-008)] gap-[var(--spacing-scale-002)]", small: "p-[var(--space-200)] gap-[var(--space-050)]",
medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]", medium: "p-[var(--space-250)] gap-[var(--space-100)]",
large: "p-[var(--spacing-scale-012)] gap-[var(--spacing-scale-006)]", large: "p-[var(--space-300)] gap-[var(--space-150)]",
xlarge: "p-[var(--spacing-scale-016)] gap-[var(--spacing-scale-008)]", xlarge: "p-[var(--space-400)] gap-[var(--space-200)]",
}; };
const fontStyles: Record<string, string> = { const fontStyles: Record<string, string> = {
@@ -115,21 +122,21 @@ const Button = memo<ButtonProps>(
const variantStyles: Record<string, string> = { const variantStyles: Record<string, string> = {
filled: filled:
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] focus-visible:bg-[var(--color-surface-inverse-primary)] focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-[var(--color-surface-invert-primary)] text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-invert-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] focus-visible:bg-[var(--color-surface-invert-primary)] focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[var(--shadow-focus-default)] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
"filled-inverse": "filled-inverse":
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] focus-visible:bg-[var(--color-surface-default-primary)] focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] focus-visible:bg-[var(--color-surface-default-primary)] focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[var(--shadow-focus-invert)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
outline: outline:
"bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-invert-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-invert-primary)] focus-visible:shadow-[var(--shadow-focus-default)] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
"outline-inverse": "outline-inverse":
"bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-default-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-default-primary)] focus-visible:shadow-[var(--shadow-focus-invert)] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
ghost: ghost:
"bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[var(--shadow-focus-default)] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
"ghost-inverse": "ghost-inverse":
"bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[var(--shadow-focus-invert)] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
danger: danger:
"bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-border-default-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-default-negative-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-transparent text-[var(--color-content-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-default-negative-primary)] focus-visible:shadow-[var(--shadow-focus-default)] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
"danger-inverse": "danger-inverse":
"bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-invert-negative-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100", "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-invert-negative-primary)] focus-visible:shadow-[var(--shadow-focus-invert)] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
}; };
// Hover/focus: color + border only — no scale and no extra outline (those // Hover/focus: color + border only — no scale and no extra outline (those
@@ -137,7 +144,7 @@ const Button = memo<ButtonProps>(
// and cards: color, opacity, or shadow on hover; scale only on press. // and cards: color, opacity, or shadow on hover; scale only on press.
// State prop is informational for Figma alignment; CSS pseudo-classes own // State prop is informational for Figma alignment; CSS pseudo-classes own
// the actual interaction states. // the actual interaction states.
const baseStyles = `inline-flex items-center justify-start box-border whitespace-nowrap shrink-0 touch-manipulation [-webkit-tap-highlight-color:transparent] ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-[transform,color,background-color,border-color,box-shadow] duration-150 ease-out cursor-pointer ${variantStyles[variant]}`; const baseStyles = `inline-flex items-center justify-start box-border whitespace-nowrap shrink-0 touch-manipulation [-webkit-tap-highlight-color:transparent] ${sizeStyles[size]} rounded-[var(--radius-full)] ${fontStyles[size]} transition-[transform,color,background-color,border-color,box-shadow] duration-150 ease-out cursor-pointer ${variantStyles[variant]}`;
const combinedStyles = `${baseStyles} ${className}`; const combinedStyles = `${baseStyles} ${className}`;
const sharedA11y = { const sharedA11y = {
app/components/buttons/Vertical/Vertical.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ function VerticalComponent({
"data-testid": dataTestId, "data-testid": dataTestId,
}: VerticalProps) { }: VerticalProps) {
const base = const base =
"box-border flex w-full min-w-[90px] cursor-pointer flex-col items-center gap-[var(--spacing-scale-008)] rounded-[var(--spacing-scale-004)] border border-solid border-[var(--color-border-default-brand-primary)] bg-transparent px-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60"; "box-border flex w-full min-w-[90px] cursor-pointer flex-col items-center gap-[var(--space-200)] rounded-[var(--space-100)] border border-solid border-[var(--color-border-default-brand-primary)] bg-transparent px-[var(--space-200)] py-[var(--space-300)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] disabled:cursor-not-allowed disabled:opacity-60";
return ( return (
<button <button
app/components/cards/CardStack/CardStack.view.tsx
+1 -1
View File
@@ -52,7 +52,7 @@ function CardStackAddCardButton({
type="button" type="button"
onClick={onClick} onClick={onClick}
aria-label={ariaLabel} aria-label={ariaLabel}
className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]" className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--radius-400)] bg-[var(--color-surface-default-secondary)] text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
> >
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<svg <svg
app/components/cards/Icon/Icon.view.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export function IconView({
return ( return (
<div <div
data-figma-node="22084-859659" data-figma-node="22084-859659"
className={`relative flex h-[350px] w-full min-w-[240px] max-w-[480px] flex-col items-start justify-between border border-solid border-[var(--color-border-default-secondary)] bg-transparent p-[var(--measures-spacing-020)] ${interactionClass} ${className}`} className={`relative flex h-[350px] w-full min-w-[240px] max-w-[480px] flex-col items-start justify-between border border-solid border-[var(--color-border-default-secondary)] bg-transparent p-[var(--space-500)] ${interactionClass} ${className}`}
tabIndex={interactive ? 0 : undefined} tabIndex={interactive ? 0 : undefined}
role={interactive ? "button" : "article"} role={interactive ? "button" : "article"}
aria-label={interactive ? `${title}: ${description}` : undefined} aria-label={interactive ? `${title}: ${description}` : undefined}
app/components/cards/Mini/Mini.container.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ const MiniContainer = memo<MiniProps>(
({ ({
children, children,
className = "", className = "",
backgroundColor = "bg-[var(--color-surface-default-brand-royal)]", backgroundColor = "bg-[var(--color-surface-invert-brand-royal)]",
panelContent, panelContent,
label, label,
labelLine1, labelLine1,
@@ -51,7 +51,7 @@ const MiniContainer = memo<MiniProps>(
...baseProps, ...baseProps,
href, href,
className: className:
"block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]", "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-invert-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-500)]",
tabIndex: 0, tabIndex: 0,
}, },
}; };
@@ -64,7 +64,7 @@ const MiniContainer = memo<MiniProps>(
...baseProps, ...baseProps,
onClick, onClick,
className: className:
"block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]", "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-invert-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-500)]",
tabIndex: 0, tabIndex: 0,
onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => { onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
if (e.key === "Enter" || e.key === " ") { if (e.key === "Enter" || e.key === " ") {
app/components/cards/Mini/Mini.view.tsx
+2 -2
View File
@@ -30,8 +30,8 @@ function MiniView({
: `h-[186px] flex flex-col gap-[7px] ${className}`; : `h-[186px] flex flex-col gap-[7px] ${className}`;
const panelClass = featureGridShell const panelClass = featureGridShell
? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center` ? `h-[138px] shrink-0 rounded-[var(--radius-400)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
: `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`; : `flex-1 rounded-[var(--radius-500)] border border-[1px] py-[var(--space-800)] px-[var(--space-600)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`;
const imageClass = featureGridShell const imageClass = featureGridShell
? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}` ? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`
app/components/cards/Rule/Rule.view.tsx
+3 -3
View File
@@ -233,10 +233,10 @@ export function RuleView({
const borderRadiusClass = className?.includes("rounded-") const borderRadiusClass = className?.includes("rounded-")
? "" // If className already has border radius, don't add size-based one ? "" // If className already has border radius, don't add size-based one
: isExtraSmall : isExtraSmall
? "rounded-[var(--measures-radius-200,8px)]" ? "rounded-[var(--radius-200)]"
: isSmall : isSmall
? "rounded-[var(--measures-radius-300,12px)]" ? "rounded-[var(--radius-300)]"
: "rounded-[var(--radius-measures-radius-small)]"; : "rounded-[var(--radius-300)]";
function renderBottomLink(link: RuleBottomLink) { function renderBottomLink(link: RuleBottomLink) {
const shared = { const shared = {
app/components/cards/Selection/Selection.view.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import type { SelectionViewProps } from "./Selection.types";
function InfoIcon() { function InfoIcon() {
return ( return (
<span <span
className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]" className="flex h-[var(--space-400)] w-[var(--space-400)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
aria-hidden aria-hidden
> >
? ?
@@ -65,7 +65,7 @@ export function SelectionView({
const cardIdProp = selectionId ? { "data-card-id": selectionId } : {}; const cardIdProp = selectionId ? { "data-card-id": selectionId } : {};
if (size === "m") { if (size === "m") {
const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`; const baseClasses = `select-none rounded-[var(--radius-200)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
return ( return (
<div <div
@@ -92,7 +92,7 @@ export function SelectionView({
); );
} }
const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`; const baseClasses = `select-none rounded-[var(--radius-200)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
return ( return (
<div <div
app/components/cards/Stat/Stat.view.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ function StatView({
return ( return (
<article <article
className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[var(--color-surface-invert-primary,white)] px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:h-[170px] sm:min-h-0 sm:p-[var(--spacing-scale-024)] ${className}`.trim()} className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-500)] bg-[var(--color-surface-invert-primary,white)] px-[var(--space-600)] py-[var(--space-800)] sm:h-[170px] sm:min-h-0 sm:p-[var(--space-600)] ${className}`.trim()}
> >
<div className="relative flex w-full flex-col items-start"> <div className="relative flex w-full flex-col items-start">
<div className="relative flex items-center"> <div className="relative flex items-center">
app/components/cards/Step/Step.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ interface StepProps {
const Step = memo<StepProps>(({ number, text, size: sizeProp }) => { const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
const baseClasses = const baseClasses =
"bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg"; "bg-[var(--color-surface-invert-primary)] rounded-[12px] shadow-lg";
if (sizeProp) { if (sizeProp) {
const size = sizeProp; const size = sizeProp;
app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ export function TemplateChipDetailModal({
nextButtonText={t("closeButton")} nextButtonText={t("closeButton")}
ariaLabel={resolved?.title || "Template entry details"} ariaLabel={resolved?.title || "Template entry details"}
> >
<div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2"> <div className="flex flex-col gap-[var(--space-600)] pb-2">
{resolved?.body ?? ( {resolved?.body ?? (
<p className="text-small-paragraph text-[color:var(--color-content-default-secondary,#a3a3a3)]"> <p className="text-small-paragraph text-[color:var(--color-content-default-secondary,#a3a3a3)]">
{t("fallback.bodyLabel")} {t("fallback.bodyLabel")}
app/components/content/ContentContainer/ContentContainer.container.tsx
+11 -11
View File
@@ -31,10 +31,10 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const onLight = tone === "onLight"; const onLight = tone === "onLight";
const titleColor = onLight const titleColor = onLight
? "text-[var(--color-content-default-primary)] group-hover:text-[var(--color-content-default-brand-primary)]" ? "text-[var(--color-content-default-primary)] group-hover:text-[var(--color-content-default-brand-primary)]"
: "text-[var(--color-content-inverse-brand-royal)] group-hover:text-blue-200"; : "text-[var(--color-content-invert-brand-royal)] group-hover:text-blue-200";
const bodyColor = onLight const bodyColor = onLight
? "text-[var(--color-content-default-secondary)]" ? "text-[var(--color-content-default-secondary)]"
: "text-[var(--color-content-inverse-brand-royal)]"; : "text-[var(--color-content-invert-brand-royal)]";
const getIconImage = (slug: string): string => { const getIconImage = (slug: string): string => {
const resolvedSlug = const resolvedSlug =
@@ -63,24 +63,24 @@ const ContentContainerContainer = memo<ContentContainerProps>(
const containerClasses = const containerClasses =
size === "xs" size === "xs"
? "relative z-20 flex h-full flex-col gap-[var(--measures-spacing-012)]" ? "relative z-20 flex h-full flex-col gap-[var(--space-300)]"
: isUseCase : isUseCase
? "relative z-20 flex h-full w-full min-w-0 flex-col gap-[var(--measures-spacing-024)]" ? "relative z-20 flex h-full w-full min-w-0 flex-col gap-[var(--space-600)]"
: "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]"; : "relative z-20 h-full flex flex-col gap-[var(--space-300)] sm:gap-[var(--space-400)] md:gap-[18px] lg:gap-[var(--space-600)]";
const contentGapClasses = const contentGapClasses =
size === "xs" size === "xs"
? "flex flex-col gap-[var(--measures-spacing-008)]" ? "flex flex-col gap-[var(--space-200)]"
: isUseCase : isUseCase
? "flex w-full min-w-0 flex-col gap-[var(--measures-spacing-016)]" ? "flex w-full min-w-0 flex-col gap-[var(--space-400)]"
: "flex flex-col gap-[var(--measures-spacing-008)] sm:gap-[var(--measures-spacing-012)] md:gap-[var(--measures-spacing-008)] lg:gap-[var(--measures-spacing-016)] xl:gap-[var(--measures-spacing-004)]"; : "flex flex-col gap-[var(--space-200)] sm:gap-[var(--space-300)] md:gap-[var(--space-200)] lg:gap-[var(--space-400)] xl:gap-[var(--space-100)]";
const textGapClasses = const textGapClasses =
size === "xs" size === "xs"
? "flex flex-col gap-[var(--measures-spacing-004)]" ? "flex flex-col gap-[var(--space-100)]"
: isUseCase : isUseCase
? "flex w-full min-w-0 flex-col gap-[var(--measures-spacing-004)]" ? "flex w-full min-w-0 flex-col gap-[var(--space-100)]"
: "flex flex-col gap-[var(--measures-spacing-004)] md:gap-[var(--measures-spacing-002)] lg:gap-[var(--measures-spacing-004)]"; : "flex flex-col gap-[var(--space-100)] md:gap-[var(--space-050)] lg:gap-[var(--space-100)]";
const titleClasses = const titleClasses =
size === "xs" size === "xs"
app/components/content/ContentContainer/ContentContainer.view.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ function ContentContainerView({
</div> </div>
</div> </div>
<div className="flex min-w-0 items-end gap-[var(--measures-spacing-008)]"> <div className="flex min-w-0 items-end gap-[var(--space-200)]">
{/* Author Name */} {/* Author Name */}
<span className={authorClasses}>{post.frontmatter.author}</span> <span className={authorClasses}>{post.frontmatter.author}</span>
app/components/controls/AddCustomField/AddCustomField.view.tsx
+2 -2
View File
@@ -51,9 +51,9 @@ function AddCustomFieldViewComponent({
<button <button
type="button" type="button"
onClick={onPressAdd} onClick={onPressAdd}
className={`flex h-[88px] w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] px-6 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()} className={`flex h-[88px] w-full shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius-400)] bg-[var(--color-surface-default-secondary)] px-6 text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] ${className ?? ""}`.trim()}
> >
<span className="flex items-center gap-[var(--spacing-scale-006)] rounded-full px-4 py-3"> <span className="flex items-center gap-[var(--space-150)] rounded-full px-4 py-3">
<svg <svg
width="20" width="20"
height="20" height="20"
app/components/controls/Checkbox/Checkbox.container.tsx
+4 -4
View File
@@ -56,7 +56,7 @@ const CheckboxContainer = memo<CheckboxProps>(
// Default state: tertiary border, with hover and focus states via CSS // Default state: tertiary border, with hover and focus states via CSS
// Hover changes border to brand primary color // Hover changes border to brand primary color
// Focus removes border and shows shadow (double ring: 2px white inner, 4px dark outer) // Focus removes border and shows shadow (double ring: 2px white inner, 4px dark outer)
return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid border-[var(--color-border-default-tertiary,#464646)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] focus:border-transparent focus:shadow-[0px_0px_0px_2px_var(--color-border-invert-primary,white),0px_0px_0px_4px_var(--color-border-default-primary,#141414)] focus:outline-none`; return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid border-[var(--color-border-default-control)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] focus:border-transparent focus:shadow-[var(--shadow-focus-invert)] focus:outline-none`;
} }
// Inverse mode styles per Figma // Inverse mode styles per Figma
@@ -64,7 +64,7 @@ const CheckboxContainer = memo<CheckboxProps>(
// Inverse: transparent background, white border // Inverse: transparent background, white border
// Hover changes border to brand primary color // Hover changes border to brand primary color
// Focus shows shadow (2px dark inner, 4px white outer) - note: reversed from standard // Focus shows shadow (2px dark inner, 4px white outer) - note: reversed from standard
return `${baseBox} bg-transparent border border-solid border-[var(--color-border-invert-primary,white)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] focus:shadow-[0px_0px_0px_2px_var(--color-border-default-primary,#141414),0px_0px_0px_4px_var(--color-border-invert-primary,white)] focus:outline-none`; return `${baseBox} bg-transparent border border-solid border-[var(--color-border-invert-primary,white)] hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] focus:shadow-[var(--shadow-focus-default)] focus:outline-none`;
} }
return baseBox; return baseBox;
@@ -76,12 +76,12 @@ const CheckboxContainer = memo<CheckboxProps>(
const checkGlyphColor = checked const checkGlyphColor = checked
? isStandard ? isStandard
? "var(--color-content-default-brand-primary, #fefcc9)" // Light yellow/cream for standard mode ? "var(--color-content-default-brand-primary, #fefcc9)" // Light yellow/cream for standard mode
: "var(--color-content-inverse-primary, #000000)" // Black for inverse mode : "var(--color-content-invert-primary, #000000)" // Black for inverse mode
: "transparent"; : "transparent";
// Label color // Label color
const labelColor = isInverse const labelColor = isInverse
? "var(--color-content-inverse-primary)" ? "var(--color-content-invert-primary)"
: "var(--color-content-default-primary)"; : "var(--color-content-default-primary)";
const handleToggle = (e: React.MouseEvent | React.KeyboardEvent) => { const handleToggle = (e: React.MouseEvent | React.KeyboardEvent) => {
app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx
+2 -2
View File
@@ -39,7 +39,7 @@ export function CheckboxGroupView({
<span <span
className={`text-small-paragraph ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-invert-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
}`} }`}
> >
@@ -48,7 +48,7 @@ export function CheckboxGroupView({
<span <span
className={`text-small-paragraph ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]" ? "text-[var(--color-content-invert-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-tertiary,#b4b4b4)]" : "text-[var(--color-content-default-tertiary,#b4b4b4)]"
}`} }`}
> >
app/components/controls/Chip/Chip.view.tsx
+15 -15
View File
@@ -32,20 +32,20 @@ function chipSurfaceStyle(
if (palette === "inverse") { if (palette === "inverse") {
if (state === "disabled") { if (state === "disabled") {
return paint( return paint(
"var(--color-surface-inverse-tertiary)", "var(--color-surface-invert-tertiary)",
"var(--color-content-inverse-primary)", "var(--color-content-invert-primary)",
); );
} }
if (state === "selected") { if (state === "selected") {
return paint( return paint(
"var(--color-surface-default-semi-opaque)", "var(--color-surface-default-semi-opaque)",
"var(--color-content-inverse-primary)", "var(--color-content-invert-primary)",
"var(--color-border-default-primary)", "var(--color-border-default-primary)",
); );
} }
return paint( return paint(
"transparent", "transparent",
"var(--color-content-inverse-primary)", "var(--color-content-invert-primary)",
"var(--color-border-default-primary)", "var(--color-border-default-primary)",
); );
} }
@@ -72,7 +72,7 @@ function chipSurfaceStyle(
return paint( return paint(
"transparent", "transparent",
"var(--color-content-default-brand-primary, #fefcc9)", "var(--color-content-default-brand-primary, #fefcc9)",
"var(--color-border-default-tertiary, #464646)", "var(--color-border-default-control)",
); );
} }
@@ -110,11 +110,11 @@ function ChipView({
// Custom state has different padding // Custom state has different padding
const sizeClasses = isCustom const sizeClasses = isCustom
? isSmall ? isSmall
? "px-[var(--measures-spacing-100,4px)] py-[3px] text-x-small-paragraph" ? "px-[var(--space-100)] py-[3px] text-x-small-paragraph"
: "px-[var(--measures-spacing-150,6px)] py-[10px] text-medium-paragraph" : "px-[var(--space-150)] py-[10px] text-medium-paragraph"
: isSmall : isSmall
? "h-[30px] px-[var(--measures-spacing-200,8px)] gap-[var(--measures-spacing-050,2px)] text-x-small-label" ? "h-[30px] px-[var(--space-200)] gap-[var(--space-050)] text-x-small-label"
: "px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-300,12px)] gap-[var(--measures-spacing-150,6px)] text-medium-label"; : "px-[var(--space-300)] py-[var(--space-300)] gap-[var(--space-150)] text-medium-label";
const baseClasses = ` const baseClasses = `
appearance-none appearance-none
@@ -122,7 +122,7 @@ function ChipView({
max-w-full max-w-full
items-center items-center
justify-center justify-center
rounded-[var(--measures-radius-full,9999px)] rounded-[var(--radius-full)]
overflow-clip overflow-clip
box-border box-border
focus:outline-none focus:outline-none
@@ -185,7 +185,7 @@ function ChipView({
{onCheck && ( {onCheck && (
<button <button
type="button" type="button"
className="flex items-center justify-center p-[var(--measures-spacing-150,6px)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.1))] transition-colors disabled:opacity-50 disabled:cursor-not-allowed" className="flex items-center justify-center p-[var(--space-150)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.1))] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
aria-label={confirmAriaLabel} aria-label={confirmAriaLabel}
disabled={!inputValue || !inputValue.trim()} disabled={!inputValue || !inputValue.trim()}
onClick={(event) => { onClick={(event) => {
@@ -227,8 +227,8 @@ function ChipView({
className="bg-transparent border-none outline-none flex-1 min-w-0 font-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[color:var(--color-content-default-tertiary,#b4b4b4)]" className="bg-transparent border-none outline-none flex-1 min-w-0 font-normal text-[color:var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[color:var(--color-content-default-tertiary,#b4b4b4)]"
style={{ style={{
fontSize: isSmall fontSize: isSmall
? "var(--sizing-300,12px)" ? "var(--sizing-300)"
: "var(--sizing-400,16px)", : "var(--sizing-400)",
lineHeight: isSmall ? "16px" : "24px", lineHeight: isSmall ? "16px" : "24px",
}} }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@@ -240,7 +240,7 @@ function ChipView({
{onClose && ( {onClose && (
<button <button
type="button" type="button"
className="flex items-center justify-center p-[var(--measures-spacing-150,6px)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.1))] transition-colors" className="flex items-center justify-center p-[var(--space-150)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.1))] transition-colors"
aria-label={closeAriaLabel} aria-label={closeAriaLabel}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
@@ -309,7 +309,7 @@ function ChipView({
{onRemove && !isDisabled && ( {onRemove && !isDisabled && (
<button <button
type="button" type="button"
className="ml-[var(--measures-spacing-050,2px)] p-[var(--measures-spacing-050,2px)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.05))]" className="ml-[var(--space-050)] p-[var(--space-050)] rounded-full hover:bg-[var(--color-surface-default-semi-opaque,rgba(0,0,0,0.05))]"
aria-label={`Remove ${label}`} aria-label={`Remove ${label}`}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
app/components/controls/Incrementer/Incrementer.view.tsx
+2 -2
View File
@@ -4,7 +4,7 @@ import { memo } from "react";
import type { IncrementerViewProps } from "./Incrementer.types"; import type { IncrementerViewProps } from "./Incrementer.types";
const STEP_BUTTON_CLASSES = const STEP_BUTTON_CLASSES =
"bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,opacity] duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50"; "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--radius-full)] px-[var(--space-200)] py-[var(--space-150)] transition-[background,color,opacity] duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50";
function MinusIcon() { function MinusIcon() {
return ( return (
@@ -75,7 +75,7 @@ function IncrementerView({
</button> </button>
<span <span
aria-live="polite" aria-live="polite"
className={`shrink-0 whitespace-nowrap text-[length:var(--sizing-350,14px)] font-medium leading-[18px] ${valueColor}`} className={`shrink-0 whitespace-nowrap text-[length:var(--sizing-350)] font-medium leading-[18px] ${valueColor}`}
> >
{displayValue} {displayValue}
</span> </span>
app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx
+5
View File
@@ -17,8 +17,11 @@ const IncrementerBlockContainer = ({
labelSize = "s", labelSize = "s",
palette = "default", palette = "default",
blockClassName = "", blockClassName = "",
state = "default",
disabled,
...incrementerProps ...incrementerProps
}: IncrementerBlockProps) => { }: IncrementerBlockProps) => {
const isDisabled = state === "disabled" || Boolean(disabled);
return ( return (
<IncrementerBlockView <IncrementerBlockView
label={label} label={label}
@@ -28,6 +31,8 @@ const IncrementerBlockContainer = ({
labelSize={labelSize} labelSize={labelSize}
palette={palette} palette={palette}
blockClassName={blockClassName} blockClassName={blockClassName}
state={state}
disabled={isDisabled}
{...incrementerProps} {...incrementerProps}
/> />
); );
app/components/controls/IncrementerBlock/IncrementerBlock.types.ts
+7
View File
@@ -1,3 +1,4 @@
import type { IncrementerBlockStateValue } from "../../../../lib/propNormalization";
import type { IncrementerProps } from "../Incrementer/Incrementer.types"; import type { IncrementerProps } from "../Incrementer/Incrementer.types";
import type { import type {
InputLabelPaletteValue, InputLabelPaletteValue,
@@ -5,6 +6,11 @@ import type {
} from "../../type/InputLabel/InputLabel.types"; } from "../../type/InputLabel/InputLabel.types";
export interface IncrementerBlockProps extends IncrementerProps { export interface IncrementerBlockProps extends IncrementerProps {
/**
* One state axis. Disabled dims the block and turns off both buttons.
* @default "default"
*/
state?: IncrementerBlockStateValue;
/** Label text displayed above the incrementer. */ /** Label text displayed above the incrementer. */
label: string; label: string;
/** Show the help "?" icon next to the label. Defaults to `true`. */ /** Show the help "?" icon next to the label. Defaults to `true`. */
@@ -31,6 +37,7 @@ export interface IncrementerBlockProps extends IncrementerProps {
} }
export interface IncrementerBlockViewProps extends IncrementerProps { export interface IncrementerBlockViewProps extends IncrementerProps {
state: IncrementerBlockStateValue;
label: string; label: string;
helpIcon: boolean; helpIcon: boolean;
helperText: boolean | string | undefined; helperText: boolean | string | undefined;
app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx
+8 -2
View File
@@ -13,12 +13,14 @@ function IncrementerBlockView({
labelSize, labelSize,
palette, palette,
blockClassName, blockClassName,
state: _state,
disabled,
className, className,
...incrementerProps ...incrementerProps
}: IncrementerBlockViewProps) { }: IncrementerBlockViewProps) {
return ( return (
<div <div
className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] py-[8px] ${blockClassName}`.trim()} className={`flex flex-col items-start gap-[var(--space-300)] py-[8px] ${disabled ? "opacity-60" : ""} ${blockClassName}`.trim()}
data-figma-node="19883:13283" data-figma-node="19883:13283"
> >
<InputLabel <InputLabel
@@ -29,7 +31,11 @@ function IncrementerBlockView({
size={labelSize} size={labelSize}
palette={palette} palette={palette}
/> />
<Incrementer {...incrementerProps} className={className} /> <Incrementer
{...incrementerProps}
disabled={disabled}
className={className}
/>
</div> </div>
); );
} }
app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ function InfoMessageBoxView({
return ( return (
<div <div
className={`flex w-full min-w-0 items-start gap-[var(--measures-spacing-200,8px)] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] ${className}`} className={`flex w-full min-w-0 items-start gap-[var(--space-200)] p-[var(--space-500)] rounded-[var(--radius-300)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-invert-secondary,#1f1f1f)] ${className}`}
role="region" role="region"
aria-label={title} aria-label={title}
> >
app/components/controls/InputWithCounter/InputWithCounter.view.tsx
+5 -5
View File
@@ -15,10 +15,10 @@ export function InputWithCounterView({
}: InputWithCounterProps) { }: InputWithCounterProps) {
const inputId = useId(); const inputId = useId();
return ( return (
<div className={`space-y-[var(--spacing-scale-008)] ${className}`}> <div className={`space-y-[var(--space-200)] ${className}`}>
{/* Label with help icon */} {/* Label with help icon */}
{label && ( {label && (
<div className="flex items-center gap-[var(--spacing-scale-002)]"> <div className="flex items-center gap-[var(--space-050)]">
<label <label
htmlFor={inputId} htmlFor={inputId}
className="text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]" className="text-[14px] leading-[20px] font-medium text-[var(--color-content-default-primary)]"
@@ -43,12 +43,12 @@ export function InputWithCounterView({
width="12" width="12"
height="12" height="12"
> >
<rect width="12" height="12" fill="#D9D9D9" /> <rect width="12" height="12" fill="var(--color-gray-200)" />
</mask> </mask>
<g mask="url(#mask0_21296_8257)"> <g mask="url(#mask0_21296_8257)">
<path <path
d="M5.99449 8.80766C6.13725 8.80766 6.25784 8.75838 6.35624 8.6598C6.45463 8.56123 6.50383 8.44055 6.50383 8.29779C6.50383 8.15502 6.45454 8.03444 6.35596 7.93605C6.25739 7.83765 6.13672 7.78845 5.99395 7.78845C5.85118 7.78845 5.7306 7.83774 5.63221 7.93631C5.53381 8.03489 5.48461 8.15556 5.48461 8.29833C5.48461 8.44109 5.5339 8.56168 5.63248 8.66008C5.73105 8.75847 5.85172 8.80766 5.99449 8.80766ZM5.64038 7.01729H6.34421C6.35062 6.77114 6.38668 6.5745 6.45239 6.42739C6.51809 6.28028 6.67754 6.08525 6.93075 5.8423C7.15062 5.62243 7.31905 5.41938 7.43604 5.23316C7.55302 5.04695 7.61151 4.82703 7.61151 4.57343C7.61151 4.14307 7.45687 3.80689 7.14759 3.5649C6.8383 3.32292 6.47243 3.20193 6.04999 3.20193C5.63269 3.20193 5.28734 3.3133 5.01394 3.53606C4.74055 3.75881 4.54552 4.02115 4.42885 4.32306L5.07114 4.58075C5.13204 4.41473 5.2362 4.25303 5.38364 4.09566C5.53108 3.93829 5.74999 3.8596 6.04038 3.8596C6.33589 3.8596 6.55432 3.94053 6.69566 4.1024C6.83701 4.26426 6.90769 4.4423 6.90769 4.63654C6.90769 4.80641 6.85929 4.96185 6.76249 5.10288C6.6657 5.2439 6.5423 5.38012 6.3923 5.51154C6.0641 5.80769 5.85673 6.0439 5.77019 6.22019C5.68365 6.39647 5.64038 6.66217 5.64038 7.01729ZM6.00082 10.75C5.34386 10.75 4.72634 10.6253 4.14828 10.376C3.5702 10.1266 3.06736 9.78827 2.63975 9.36085C2.21213 8.93343 1.8736 8.43081 1.62416 7.85299C1.37472 7.27518 1.25 6.65779 1.25 6.00083C1.25 5.34386 1.37467 4.72634 1.624 4.14828C1.87333 3.5702 2.21171 3.06736 2.63913 2.63975C3.06655 2.21213 3.56917 1.8736 4.14699 1.62416C4.7248 1.37472 5.34218 1.25 5.99915 1.25C6.65612 1.25 7.27363 1.37467 7.8517 1.624C8.42978 1.87333 8.93262 2.21171 9.36023 2.63913C9.78784 3.06655 10.1264 3.56917 10.3758 4.14699C10.6253 4.7248 10.75 5.34218 10.75 5.99915C10.75 6.65612 10.6253 7.27363 10.376 7.8517C10.1266 8.42978 9.78827 8.93262 9.36085 9.36023C8.93343 9.78784 8.43081 10.1264 7.85299 10.3758C7.27518 10.6253 6.65779 10.75 6.00082 10.75ZM5.99999 9.99999C7.11665 9.99999 8.06249 9.61249 8.83749 8.83749C9.61249 8.06249 9.99999 7.11665 9.99999 5.99999C9.99999 4.88332 9.61249 3.93749 8.83749 3.16249C8.06249 2.38749 7.11665 1.99999 5.99999 1.99999C4.88332 1.99999 3.93749 2.38749 3.16249 3.16249C2.38749 3.93749 1.99999 4.88332 1.99999 5.99999C1.99999 7.11665 2.38749 8.06249 3.16249 8.83749C3.93749 9.61249 4.88332 9.99999 5.99999 9.99999Z" d="M5.99449 8.80766C6.13725 8.80766 6.25784 8.75838 6.35624 8.6598C6.45463 8.56123 6.50383 8.44055 6.50383 8.29779C6.50383 8.15502 6.45454 8.03444 6.35596 7.93605C6.25739 7.83765 6.13672 7.78845 5.99395 7.78845C5.85118 7.78845 5.7306 7.83774 5.63221 7.93631C5.53381 8.03489 5.48461 8.15556 5.48461 8.29833C5.48461 8.44109 5.5339 8.56168 5.63248 8.66008C5.73105 8.75847 5.85172 8.80766 5.99449 8.80766ZM5.64038 7.01729H6.34421C6.35062 6.77114 6.38668 6.5745 6.45239 6.42739C6.51809 6.28028 6.67754 6.08525 6.93075 5.8423C7.15062 5.62243 7.31905 5.41938 7.43604 5.23316C7.55302 5.04695 7.61151 4.82703 7.61151 4.57343C7.61151 4.14307 7.45687 3.80689 7.14759 3.5649C6.8383 3.32292 6.47243 3.20193 6.04999 3.20193C5.63269 3.20193 5.28734 3.3133 5.01394 3.53606C4.74055 3.75881 4.54552 4.02115 4.42885 4.32306L5.07114 4.58075C5.13204 4.41473 5.2362 4.25303 5.38364 4.09566C5.53108 3.93829 5.74999 3.8596 6.04038 3.8596C6.33589 3.8596 6.55432 3.94053 6.69566 4.1024C6.83701 4.26426 6.90769 4.4423 6.90769 4.63654C6.90769 4.80641 6.85929 4.96185 6.76249 5.10288C6.6657 5.2439 6.5423 5.38012 6.3923 5.51154C6.0641 5.80769 5.85673 6.0439 5.77019 6.22019C5.68365 6.39647 5.64038 6.66217 5.64038 7.01729ZM6.00082 10.75C5.34386 10.75 4.72634 10.6253 4.14828 10.376C3.5702 10.1266 3.06736 9.78827 2.63975 9.36085C2.21213 8.93343 1.8736 8.43081 1.62416 7.85299C1.37472 7.27518 1.25 6.65779 1.25 6.00083C1.25 5.34386 1.37467 4.72634 1.624 4.14828C1.87333 3.5702 2.21171 3.06736 2.63913 2.63975C3.06655 2.21213 3.56917 1.8736 4.14699 1.62416C4.7248 1.37472 5.34218 1.25 5.99915 1.25C6.65612 1.25 7.27363 1.37467 7.8517 1.624C8.42978 1.87333 8.93262 2.21171 9.36023 2.63913C9.78784 3.06655 10.1264 3.56917 10.3758 4.14699C10.6253 4.7248 10.75 5.34218 10.75 5.99915C10.75 6.65612 10.6253 7.27363 10.376 7.8517C10.1266 8.42978 9.78827 8.93262 9.36085 9.36023C8.93343 9.78784 8.43081 10.1264 7.85299 10.3758C7.27518 10.6253 6.65779 10.75 6.00082 10.75ZM5.99999 9.99999C7.11665 9.99999 8.06249 9.61249 8.83749 8.83749C9.61249 8.06249 9.99999 7.11665 9.99999 5.99999C9.99999 4.88332 9.61249 3.93749 8.83749 3.16249C8.06249 2.38749 7.11665 1.99999 5.99999 1.99999C4.88332 1.99999 3.93749 2.38749 3.16249 3.16249C2.38749 3.93749 1.99999 4.88332 1.99999 5.99999C1.99999 7.11665 2.38749 8.06249 3.16249 8.83749C3.93749 9.61249 4.88332 9.99999 5.99999 9.99999Z"
fill="var(--color-content-brand-darker-accent-2)" fill="var(--color-content-default-brand-secondary)"
/> />
</g> </g>
</svg> </svg>
@@ -69,7 +69,7 @@ export function InputWithCounterView({
} }
}} }}
maxLength={maxLength} maxLength={maxLength}
className={`w-full h-[36px] px-[12px] py-[8px] bg-[var(--color-surface-default-primary)] border-2 border-[var(--color-border-default-tertiary)] rounded-[var(--measures-radius-medium,8px)] text-medium-paragraph text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] focus:outline-none ${inputClassName}`} className={`w-full h-[36px] px-[12px] py-[8px] bg-[var(--color-surface-default-primary)] border-2 border-[var(--color-border-default-tertiary)] rounded-[var(--radius-400)] text-medium-paragraph text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary)] focus:outline-none ${inputClassName}`}
/> />
</div> </div>
app/components/controls/MultiSelect/MultiSelect.view.tsx
+10 -10
View File
@@ -31,8 +31,8 @@ function MultiSelectView({
// Size-based spacing // Size-based spacing
const gapClass = isSmall const gapClass = isSmall
? "gap-[var(--measures-spacing-200,8px)]" ? "gap-[var(--space-200)]"
: "gap-[var(--measures-spacing-300,12px)]"; : "gap-[var(--space-300)]";
const chipSize = size; const chipSize = size;
const selectedCount = options.filter((o) => o.state === "selected").length; const selectedCount = options.filter((o) => o.state === "selected").length;
@@ -43,7 +43,7 @@ function MultiSelectView({
return ( return (
<div <div
className={`flex flex-col ${isSmall ? "gap-[var(--measures-spacing-200,8px)]" : "gap-[var(--measures-spacing-300,12px)]"} items-start relative w-full ${className}`} className={`flex flex-col ${isSmall ? "gap-[var(--space-200)]" : "gap-[var(--space-300)]"} items-start relative w-full ${className}`}
> >
{/* Label using InputLabel component */} {/* Label using InputLabel component */}
{formHeader && label && ( {formHeader && label && (
@@ -133,12 +133,12 @@ function MultiSelectView({
className={ className={
!addButtonText !addButtonText
? // Circular button with border (Rule style) ? // Circular button with border (Rule style)
`${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))] border-[1.25px] ${isInverse ? "border-[var(--color-border-default-primary,#141414)]" : "border-[var(--color-border-default-tertiary,#464646)]"} border-solid flex items-center justify-center ${isSmall ? "size-[30px]" : "size-[40px]"} rounded-[var(--measures-radius-full,9999px)] shrink-0 transition-opacity` `${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} bg-[var(--color-surface-default-transparent,rgba(0,0,0,0))] border-[1.25px] ${isInverse ? "border-[var(--color-border-default-primary,#141414)]" : "border-[var(--color-border-default-control)]"} border-solid flex items-center justify-center ${isSmall ? "size-[30px]" : "size-[40px]"} rounded-[var(--radius-full)] shrink-0 transition-opacity`
: // Text add control (default palette: white label + brand “+”; inverse: inverse primary for both) : // Text add control (default palette: white label + brand “+”; inverse: inverse primary for both)
`${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} flex items-center justify-center overflow-hidden rounded-[var(--measures-radius-full,9999px)] shrink-0 transition-opacity ${ `${atLimit ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:opacity-80"} flex items-center justify-center overflow-hidden rounded-[var(--radius-full)] shrink-0 transition-opacity ${
isSmall isSmall
? "gap-[var(--measures-spacing-100,4px)] px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-200,8px)]" ? "gap-[var(--space-100)] px-[var(--space-300)] py-[var(--space-200)]"
: "gap-[var(--measures-spacing-150,6px)] px-[var(--space-400,16px)] py-[var(--measures-spacing-300,12px)]" : "gap-[var(--space-150)] px-[var(--space-400)] py-[var(--space-300)]"
}` }`
} }
> >
@@ -151,7 +151,7 @@ function MultiSelectView({
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className={`shrink-0 ${ className={`shrink-0 ${
!addButtonText && isInverse !addButtonText && isInverse
? "text-[var(--color-content-inverse-primary,black)]" ? "text-[var(--color-content-invert-primary,black)]"
: "text-[var(--color-content-default-brand-primary,#fefcc9)]" : "text-[var(--color-content-default-brand-primary,#fefcc9)]"
}`} }`}
> >
@@ -165,9 +165,9 @@ function MultiSelectView({
</svg> </svg>
{addButtonText && ( {addButtonText && (
<span <span
className={`font-medium ${isSmall ? "text-[length:var(--sizing-300,12px)] leading-[14px]" : "text-medium-label"} ${ className={`font-medium ${isSmall ? "text-[length:var(--sizing-300)] leading-[14px]" : "text-medium-label"} ${
isInverse isInverse
? "text-[color:var(--color-content-inverse-primary,black)]" ? "text-[color:var(--color-content-invert-primary,black)]"
: "text-[color:var(--color-content-default-primary,white)]" : "text-[color:var(--color-content-default-primary,white)]"
}`} }`}
> >
app/components/controls/RadioButton/RadioButton.container.tsx
+5 -5
View File
@@ -54,14 +54,14 @@ const RadioButtonContainer = ({
// When checked, border is brand primary (but changes to invert tertiary on focus) // When checked, border is brand primary (but changes to invert tertiary on focus)
const defaultBorder = checked const defaultBorder = checked
? "border-[var(--color-border-default-brand-primary,#fdfaa8)]" ? "border-[var(--color-border-default-brand-primary,#fdfaa8)]"
: "border-[var(--color-border-default-tertiary,#464646)]"; : "border-[var(--color-border-default-control)]";
// When focused and checked, border should be invert tertiary (#2d2d2d) per Figma // When focused and checked, border should be invert tertiary (#2d2d2d) per Figma
const focusBorder = checked const focusBorder = checked
? "focus:border-[var(--color-content-invert-tertiary,#2d2d2d)]" ? "focus:border-[var(--color-content-invert-tertiary,#2d2d2d)]"
: "focus:border-[var(--color-border-default-tertiary,#464646)]"; : "focus:border-[var(--color-border-default-control)]";
return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid ${defaultBorder} hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] ${focusBorder} focus:shadow-[0px_0px_0px_2px_var(--color-border-invert-primary,white),0px_0px_0px_4px_var(--color-border-default-primary,#141414)] focus:outline-none`; return `${baseBox} bg-[var(--color-surface-default-primary)] border border-solid ${defaultBorder} hover:border-[var(--color-border-default-brand-primary,#fdfaa8)] ${focusBorder} focus:shadow-[var(--shadow-focus-invert)] focus:outline-none`;
} }
// Inverse mode styles // Inverse mode styles
@@ -83,7 +83,7 @@ const RadioButtonContainer = ({
? "focus:border-[var(--color-border-invert-primary,white)]" ? "focus:border-[var(--color-border-invert-primary,white)]"
: "focus:border-[var(--color-border-invert-primary,white)]"; : "focus:border-[var(--color-border-invert-primary,white)]";
return `${baseBox} bg-transparent border border-solid ${defaultBorder} ${hoverBorder} ${focusBorder} focus:shadow-[0px_0px_0px_2px_var(--color-border-default-primary,#141414),0px_0px_0px_4px_var(--color-border-invert-primary,white)] focus:outline-none`; return `${baseBox} bg-transparent border border-solid ${defaultBorder} ${hoverBorder} ${focusBorder} focus:shadow-[var(--shadow-focus-default)] focus:outline-none`;
} }
return baseBox; return baseBox;
@@ -93,7 +93,7 @@ const RadioButtonContainer = ({
// Label color // Label color
const labelColor = isInverse const labelColor = isInverse
? "var(--color-content-inverse-primary)" ? "var(--color-content-invert-primary)"
: "var(--color-content-default-primary)"; : "var(--color-content-default-primary)";
// Generate unique ID for accessibility if not provided // Generate unique ID for accessibility if not provided
app/components/controls/RadioGroup/RadioGroup.view.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ export function RadioGroupView({
<span <span
className={`text-small-paragraph ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-invert-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
}`} }`}
> >
@@ -52,7 +52,7 @@ export function RadioGroupView({
<span <span
className={`text-small-paragraph ${ className={`text-small-paragraph ${
mode === "inverse" mode === "inverse"
? "text-[var(--color-content-inverse-secondary,#1f1f1f)]" ? "text-[var(--color-content-invert-secondary,#1f1f1f)]"
: "text-[var(--color-content-default-secondary,#b4b4b4)]" : "text-[var(--color-content-default-secondary,#b4b4b4)]"
}`} }`}
> >
app/components/controls/SelectInput/SelectDropdown.tsx
+2 -3
View File
@@ -11,9 +11,9 @@ interface SelectDropdownProps extends React.HTMLAttributes<HTMLDivElement> {
const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>( const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
({ className = "", children, ariaLabel, ...props }, ref) => { ({ className = "", children, ariaLabel, ...props }, ref) => {
const menuClasses = ` const menuClasses = `
bg-black bg-[var(--color-surface-default-primary)]
border border-[var(--color-border-default-tertiary)] border border-[var(--color-border-default-tertiary)]
rounded-[var(--measures-radius-medium)] rounded-[var(--radius-400)]
shadow-lg shadow-lg
p-[4px] p-[4px]
min-w-[200px] min-w-[200px]
@@ -29,7 +29,6 @@ const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
className={menuClasses} className={menuClasses}
role="listbox" role="listbox"
aria-label={ariaLabel} aria-label={ariaLabel}
style={{ backgroundColor: "#000000" }}
{...props} {...props}
> >
{children} {children}
app/components/controls/SelectInput/SelectInput.view.tsx
+14 -8
View File
@@ -109,7 +109,7 @@ export function SelectInputView({
.replace(/\s+/g, " "); .replace(/\s+/g, " ");
if (disabled) { if (disabled) {
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-inverse-tertiary,#2d2d2d)] border-[var(--color-border-default-primary)] cursor-not-allowed opacity-40`; return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-invert-tertiary,#2d2d2d)] border-[var(--color-border-default-primary)] cursor-not-allowed opacity-40`;
} }
if (error) { if (error) {
@@ -118,16 +118,16 @@ export function SelectInputView({
if (state === "focus") { if (state === "focus") {
// Focus state: secondary background, tertiary border, with focus ring // Focus state: secondary background, tertiary border, with focus ring
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-tertiary)]`; return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-control)]`;
} }
if (state === "active" || isOpen) { if (state === "active" || isOpen) {
// Active state per Figma: secondary background, tertiary border // Active state per Figma: secondary background, tertiary border
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border-[var(--color-border-default-tertiary)]`; return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border-[var(--color-border-default-control)]`;
} }
// Default state per Figma: secondary background, primary border (subtle) // Default state per Figma: secondary background, primary border (subtle)
return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border-[var(--color-border-default-primary)]`; return `${baseClasses} bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border-[var(--color-border-default-control)]`;
}; };
const buttonClasses = getButtonClasses(); const buttonClasses = getButtonClasses();
@@ -145,8 +145,8 @@ export function SelectInputView({
return ( return (
<div className={containerClasses}> <div className={containerClasses}>
{label && ( {label && (
<div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full"> <div className="flex flex-wrap gap-[var(--space-100)_var(--space-200)] items-baseline pr-[var(--space-100)] relative shrink-0 w-full">
<div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0"> <div className="flex gap-[var(--space-050)] items-center relative shrink-0">
<label id={labelId} className={labelClasses}> <label id={labelId} className={labelClasses}>
{label} {label}
</label> </label>
@@ -214,7 +214,7 @@ export function SelectInputView({
</button> </button>
{state === "focus" && ( {state === "focus" && (
<div <div
className="absolute border-2 border-solid border-[var(--color-border-inverse-primary)] inset-0 rounded-[8px] shadow-[0px_0px_0px_2px_var(--color-border-default-primary)] pointer-events-none z-10" className="absolute border-2 border-solid border-[var(--color-border-invert-primary)] inset-0 rounded-[8px] shadow-[0px_0px_0px_2px_var(--color-border-default-primary)] pointer-events-none z-10"
aria-hidden="true" aria-hidden="true"
/> />
)} )}
@@ -269,7 +269,13 @@ export function SelectInputView({
</div> </div>
{textHint && ( {textHint && (
<div className="flex items-start relative shrink-0 w-full"> <div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]"> <p
className={`flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative ${
ariaInvalid
? "text-[color:var(--color-content-default-negative-primary)]"
: "text-[color:var(--color-content-default-tertiary)]"
}`}
>
{hintDefault} {hintDefault}
</p> </p>
</div> </div>
app/components/controls/SelectOption/SelectOption.container.tsx
+2 -2
View File
@@ -44,13 +44,13 @@ const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
transition-colors duration-150 transition-colors duration-150
${ ${
selected selected
? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]" ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300)]"
: "" : ""
} }
${ ${
disabled disabled
? "opacity-50 cursor-not-allowed" ? "opacity-50 cursor-not-allowed"
: "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--measures-radius-small)]" : "hover:!bg-[var(--color-surface-default-secondary)] hover:!rounded-[var(--radius-300)]"
} }
${className} ${className}
` `
app/components/controls/Switch/Switch.container.tsx
+7 -7
View File
@@ -69,7 +69,7 @@ const SwitchContainer = memo(
// Switch track styles based on propSwitch state // Switch track styles based on propSwitch state
const getTrackStyles = useCallback(() => { const getTrackStyles = useCallback(() => {
return propSwitch return propSwitch
? "bg-[var(--color-surface-inverse-tertiary)]" ? "bg-[var(--color-surface-invert-tertiary)]"
: "bg-[var(--color-surface-default-tertiary)]"; : "bg-[var(--color-surface-default-tertiary)]";
}, [propSwitch]); }, [propSwitch]);
@@ -81,7 +81,7 @@ const SwitchContainer = memo(
// Focus styles // Focus styles
const getFocusStyles = useCallback(() => { const getFocusStyles = useCallback(() => {
if (state === "focus") { if (state === "focus") {
return "shadow-[0_0_5px_3px_#3281F8] rounded-full"; return "shadow-[var(--shadow-focus-default)] rounded-full";
} }
return ""; return "";
}, [state]); }, [state]);
@@ -98,7 +98,7 @@ const SwitchContainer = memo(
transition-all transition-all
duration-200 duration-200
focus:outline-none focus:outline-none
focus-visible:shadow-[0_0_5px_3px_#3281F8] focus-visible:shadow-[var(--shadow-focus-default)]
focus-visible:rounded-full focus-visible:rounded-full
${focusStyles} ${focusStyles}
${className} ${className}
@@ -123,9 +123,9 @@ const SwitchContainer = memo(
const thumbClasses = ` const thumbClasses = `
${thumbStyles} ${thumbStyles}
w-[var(--measures-sizing-020)] w-[var(--space-500)]
h-[var(--measures-sizing-020)] h-[var(--space-500)]
rounded-[var(--measures-radius-xlarge)] rounded-[var(--radius-500)]
transition-all transition-all
duration-200 duration-200
shadow-sm shadow-sm
@@ -134,7 +134,7 @@ const SwitchContainer = memo(
.replace(/\s+/g, " "); .replace(/\s+/g, " ");
const labelClasses = ` const labelClasses = `
ml-[var(--measures-spacing-008)] ml-[var(--space-200)]
text-small-paragraph text-small-paragraph
text-[var(--color-content-default-primary)] text-[var(--color-content-default-primary)]
` `
app/components/controls/TextArea/TextArea.container.tsx
+12 -12
View File
@@ -61,7 +61,7 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
: "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph", : "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph",
label: "text-x-small-label", label: "text-x-small-label",
container: "gap-[4px]", container: "gap-[4px]",
radius: "var(--measures-radius-xsmall)", radius: "var(--radius-200)",
}, },
medium: { medium: {
textarea: textarea:
@@ -70,13 +70,13 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
: "h-[100px] px-[12px] py-[8px] text-small-paragraph", : "h-[100px] px-[12px] py-[8px] text-small-paragraph",
label: "text-small-label", label: "text-small-label",
container: "gap-[8px]", container: "gap-[8px]",
radius: "var(--measures-radius-xsmall)", radius: "var(--radius-200)",
}, },
large: { large: {
textarea: "h-[150px] px-[12px] py-[8px] text-medium-paragraph", textarea: "h-[150px] px-[12px] py-[8px] text-medium-paragraph",
label: "text-medium-label", label: "text-medium-label",
container: "gap-[12px]", container: "gap-[12px]",
radius: "var(--measures-radius-small)", radius: "var(--radius-300)",
}, },
}; };
@@ -90,13 +90,13 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
if (disabled) { if (disabled) {
return { return {
textarea: textarea:
"border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-tertiary,#b4b4b4)] cursor-not-allowed opacity-60 min-h-[356px] h-[356px] px-[var(--measures-spacing-300,12px)] py-[var(--space-250,10px)]", "border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-tertiary,#b4b4b4)] cursor-not-allowed opacity-60 min-h-[356px] h-[356px] px-[var(--space-300)] py-[var(--space-250)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
} }
return { return {
textarea: textarea:
"border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)] min-h-[356px] h-[356px] px-[var(--measures-spacing-300,12px)] py-[var(--space-250,10px)] focus:outline-none focus:ring-0", "border-0 bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)] min-h-[356px] h-[356px] px-[var(--space-300)] py-[var(--space-250)] focus:outline-none focus:ring-0",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
} }
@@ -111,7 +111,7 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
} }
return { return {
textarea: textarea:
"border-0 bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)] focus:text-[var(--color-content-default-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-default-tertiary)] focus:ring-inset", "border-0 bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-tertiary,#b4b4b4)] placeholder:text-[var(--color-content-default-tertiary,#b4b4b4)] focus:text-[var(--color-content-default-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-default-control)] focus:ring-inset",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
} }
@@ -119,7 +119,7 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
if (disabled) { if (disabled) {
return { return {
textarea: textarea:
"bg-[var(--color-content-default-secondary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] cursor-not-allowed", "bg-[var(--color-content-default-secondary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-control)] cursor-not-allowed",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
} }
@@ -136,25 +136,25 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
case "active": case "active":
return { return {
textarea: textarea:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)]", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-control)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
case "hover": case "hover":
return { return {
textarea: textarea:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] shadow-[0_0_0_2px_var(--color-border-default-tertiary)]", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-control)] shadow-[0_0_0_2px_var(--color-border-default-control)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
case "focus": case "focus":
return { return {
textarea: textarea:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-utility-info)] shadow-[0_0_5px_3px_#3281F8]", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-control)] shadow-[var(--shadow-focus-default)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
default: default:
return { return {
textarea: textarea:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-tertiary)] hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border border-[var(--color-border-default-control)] hover:shadow-[0_0_0_2px_var(--color-border-default-control)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
} }
@@ -176,7 +176,7 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
const textareaClasses = ` const textareaClasses = `
scrollbar-design w-full transition-all duration-200 ease-in-out resize-none scrollbar-design w-full transition-all duration-200 ease-in-out resize-none
${appearance === "embedded" || appearance === "compose" ? "rounded-[var(--radius-300,12px)]" : "border"} ${appearance === "embedded" || appearance === "compose" ? "rounded-[var(--radius-300)]" : "border"}
${appearance === "compose" ? "text-medium-paragraph" : currentSize.textarea} ${appearance === "compose" ? "text-medium-paragraph" : currentSize.textarea}
${stateStyles.textarea} ${stateStyles.textarea}
${className} ${className}
app/components/controls/TextArea/TextArea.view.tsx
+10 -4
View File
@@ -31,15 +31,15 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
size: _size, size: _size,
labelVariant: _labelVariant, labelVariant: _labelVariant,
state: _state, state: _state,
error: _error, error = false,
...props ...props
}, },
ref, ref,
) => { ) => {
const labelEl = label ? ( const labelEl = label ? (
formHeader ? ( formHeader ? (
<div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full"> <div className="flex flex-wrap gap-[var(--space-100)_var(--space-200)] items-baseline pr-[var(--space-100)] relative shrink-0 w-full">
<div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0"> <div className="flex gap-[var(--space-050)] items-center relative shrink-0">
<label <label
id={labelId} id={labelId}
htmlFor={textareaId} htmlFor={textareaId}
@@ -90,7 +90,13 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
</div> </div>
{textHint ? ( {textHint ? (
<div className="flex items-start relative shrink-0 w-full"> <div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]"> <p
className={`flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative ${
error
? "text-[color:var(--color-content-default-negative-primary)]"
: "text-[color:var(--color-content-default-tertiary)]"
}`}
>
{typeof textHint === "string" ? textHint : hintDefault} {typeof textHint === "string" ? textHint : hintDefault}
</p> </p>
</div> </div>
app/components/controls/TextInput/TextInput.container.tsx
+7 -7
View File
@@ -83,13 +83,13 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
"h-[32px] px-[10px] py-[6px] text-[16px] md:text-[14px]", "h-[32px] px-[10px] py-[6px] text-[16px] md:text-[14px]",
label: "text-[12px] leading-[16px] font-medium", label: "text-[12px] leading-[16px] font-medium",
container: "gap-[6px]", container: "gap-[6px]",
radius: "var(--measures-radius-200,8px)", radius: "var(--radius-200)",
} }
: { : {
input: "h-[40px] px-[12px] py-[8px] text-[16px]", input: "h-[40px] px-[12px] py-[8px] text-[16px]",
label: "text-[14px] leading-[20px] font-medium", label: "text-[14px] leading-[20px] font-medium",
container: "gap-[8px]", container: "gap-[8px]",
radius: "var(--measures-radius-200,8px)", radius: "var(--radius-200)",
}; };
// State styles based on Figma designs // State styles based on Figma designs
@@ -102,7 +102,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
if (disabled) { if (disabled) {
return { return {
input: input:
"bg-[var(--color-surface-default-secondary)] text-[var(--color-content-inverse-tertiary,#2d2d2d)] border border-solid border-[var(--color-border-default-primary)] cursor-not-allowed", "bg-[var(--color-surface-default-secondary)] text-[var(--color-content-invert-tertiary,#2d2d2d)] border border-solid border-[var(--color-border-default-primary)] cursor-not-allowed",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
inputWrapper: "relative", inputWrapper: "relative",
focusRing: "", focusRing: "",
@@ -127,7 +127,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
? "font-medium leading-[20px]" ? "font-medium leading-[20px]"
: "font-normal leading-[24px]"; : "font-normal leading-[24px]";
return { return {
input: `bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-solid border-[var(--color-border-default-tertiary)] ${filledStyles}`, input: `bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-solid border-[var(--color-border-default-control)] ${filledStyles}`,
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
inputWrapper: "relative", inputWrapper: "relative",
focusRing: "", focusRing: "",
@@ -138,11 +138,11 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
? "font-medium leading-[20px]" ? "font-medium leading-[20px]"
: "font-normal leading-[24px]"; : "font-normal leading-[24px]";
return { return {
input: `bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-tertiary)] ${filledStyles}`, input: `bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-control)] ${filledStyles}`,
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
inputWrapper: "relative", inputWrapper: "relative",
focusRing: focusRing:
"absolute border-2 border-solid border-[var(--color-border-inverse-primary)] inset-0 rounded-[var(--measures-radius-200,8px)] shadow-[0px_0px_0px_2px_var(--color-border-default-primary)] pointer-events-none", "absolute inset-0 rounded-[var(--radius-200)] shadow-[var(--shadow-focus-default)] pointer-events-none",
}; };
} }
default: { default: {
@@ -151,7 +151,7 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
: "font-normal leading-[24px]"; : "font-normal leading-[24px]";
// Default state uses primary border (matches Figma - border color same as background, so border is subtle) // Default state uses primary border (matches Figma - border color same as background, so border is subtle)
return { return {
input: `bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-primary)] ${filledStyles}`, input: `bg-[var(--color-surface-default-secondary)] text-[var(--color-content-default-primary)] border border-solid border-[var(--color-border-default-control)] ${filledStyles}`,
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
inputWrapper: "relative", inputWrapper: "relative",
focusRing: "", focusRing: "",
app/components/controls/TextInput/TextInput.view.tsx
+9 -3
View File
@@ -43,8 +43,8 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
) => { ) => {
const labelEl = label ? ( const labelEl = label ? (
formHeader ? ( formHeader ? (
<div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full"> <div className="flex flex-wrap gap-[var(--space-100)_var(--space-200)] items-baseline pr-[var(--space-100)] relative shrink-0 w-full">
<div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0"> <div className="flex gap-[var(--space-050)] items-center relative shrink-0">
<label <label
id={labelId} id={labelId}
htmlFor={inputId} htmlFor={inputId}
@@ -106,7 +106,13 @@ export const TextInputView = forwardRef<HTMLInputElement, TextInputViewProps>(
</div> </div>
{textHint && ( {textHint && (
<div className="flex items-start relative shrink-0 w-full"> <div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)]"> <p
className={`flex-[1_0_0] text-x-small-paragraph min-h-px min-w-px relative ${
error
? "text-[color:var(--color-content-default-negative-primary)]"
: "text-[color:var(--color-content-default-tertiary)]"
}`}
>
{typeof textHint === "string" ? textHint : hintDefault} {typeof textHint === "string" ? textHint : hintDefault}
</p> </p>
</div> </div>
app/components/controls/Toggle/Toggle.container.tsx
+4 -4
View File
@@ -33,7 +33,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
// Size styles - single size with specific dimensions // Size styles - single size with specific dimensions
const sizeStyles = { const sizeStyles = {
toggle: "h-[var(--measures-sizing-032)] px-[16px] py-[8px] gap-[4px]", toggle: "h-[var(--space-800)] px-[16px] py-[8px] gap-[4px]",
label: "text-[12px] leading-[16px]", label: "text-[12px] leading-[16px]",
}; };
@@ -61,7 +61,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
case "focus": case "focus":
return { return {
toggle: toggle:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[var(--shadow-focus-default)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
default: default:
@@ -82,7 +82,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
case "focus": case "focus":
return { return {
toggle: toggle:
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]", "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[var(--shadow-focus-default)]",
label: "text-[var(--color-content-default-secondary)]", label: "text-[var(--color-content-default-secondary)]",
}; };
default: default:
@@ -112,7 +112,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
transition-all transition-all
duration-200 duration-200
focus:outline-none focus:outline-none
focus-visible:shadow-[0_0_5px_1px_#3281F8] focus-visible:shadow-[var(--shadow-focus-default)]
${!checked ? "hover:!bg-[var(--color-surface-default-secondary)]" : ""} ${!checked ? "hover:!bg-[var(--color-surface-default-secondary)]" : ""}
flex flex
items-center items-center
app/components/controls/ToggleGroup/ToggleGroup.container.tsx
+8 -8
View File
@@ -34,13 +34,13 @@ const ToggleGroupContainer = memo(
const getPositionStyles = useCallback((pos: string): string => { const getPositionStyles = useCallback((pos: string): string => {
switch (pos) { switch (pos) {
case "left": case "left":
return "rounded-l-[var(--measures-radius-medium)] rounded-r-none"; return "rounded-l-[var(--radius-400)] rounded-r-none";
case "middle": case "middle":
return "rounded-none"; return "rounded-none";
case "right": case "right":
return "rounded-r-[var(--measures-radius-medium)] rounded-l-none"; return "rounded-r-[var(--radius-400)] rounded-l-none";
default: default:
return "rounded-[var(--measures-radius-medium)]"; return "rounded-[var(--radius-400)]";
} }
}, []); }, []);
@@ -50,7 +50,7 @@ const ToggleGroupContainer = memo(
case "hover": case "hover":
return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)]"; return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)]";
case "focus": case "focus":
return "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[0_0_5px_1px_#3281F8]"; return "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] shadow-[var(--shadow-focus-default)]";
case "selected": case "selected":
return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)] shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]"; return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)] shadow-[inset_0_0_0_1px_var(--color-border-default-secondary)]";
case "default": case "default":
@@ -104,9 +104,9 @@ const ToggleGroupContainer = memo(
const toggleClasses = ` const toggleClasses = `
${positionStyles} ${positionStyles}
${stateStyles} ${stateStyles}
py-[var(--measures-spacing-008)] py-[var(--space-200)]
px-[var(--measures-spacing-008)] px-[var(--space-200)]
gap-[var(--measures-spacing-008)] gap-[var(--space-200)]
font-medium font-medium
text-[12px] text-[12px]
leading-[12px] leading-[12px]
@@ -114,7 +114,7 @@ const ToggleGroupContainer = memo(
transition-all transition-all
duration-200 duration-200
focus:outline-none focus:outline-none
focus-visible:shadow-[0_0_5px_1px_#3281F8] focus-visible:shadow-[var(--shadow-focus-default)]
hover:bg-[var(--color-magenta-magenta100)] hover:bg-[var(--color-magenta-magenta100)]
flex flex
items-center items-center
app/components/controls/Upload/Upload.container.tsx
+7 -1
View File
@@ -3,6 +3,7 @@
import { memo } from "react"; import { memo } from "react";
import { useTranslation } from "../../../contexts/MessagesContext"; import { useTranslation } from "../../../contexts/MessagesContext";
import UploadView from "./Upload.view"; import UploadView from "./Upload.view";
import type { UploadStateValue } from "../../../../lib/propNormalization";
import type { UploadProps } from "./Upload.types"; import type { UploadProps } from "./Upload.types";
/** /**
@@ -12,6 +13,8 @@ import type { UploadProps } from "./Upload.types";
const UploadContainer = memo<UploadProps>( const UploadContainer = memo<UploadProps>(
({ ({
active = true, active = true,
state,
hasLabel,
label, label,
showHelpIcon = true, showHelpIcon = true,
hintText, hintText,
@@ -19,10 +22,13 @@ const UploadContainer = memo<UploadProps>(
className = "", className = "",
}) => { }) => {
const t = useTranslation("controlsChrome"); const t = useTranslation("controlsChrome");
const resolvedState: UploadStateValue =
state ?? (active ? "default" : "disabled");
return ( return (
<UploadView <UploadView
active={active} state={resolvedState}
hasLabel={hasLabel ?? Boolean(label)}
label={label} label={label}
showHelpIcon={showHelpIcon} showHelpIcon={showHelpIcon}
hintText={hintText ?? t("uploadHintDefault")} hintText={hintText ?? t("uploadHintDefault")}
app/components/controls/Upload/Upload.types.ts
+14 -1
View File
@@ -1,11 +1,23 @@
import type { UploadStateValue } from "../../../../lib/propNormalization";
export interface UploadProps { export interface UploadProps {
/** /**
* Whether the upload component is in active state. * Whether the upload component is in active state.
* When active, button has white background with black text. * When active, button has white background with black text.
* When inactive, button has dark background with gray text. * When inactive, button has dark background with gray text.
* Prefer `state`. `active={false}` maps to `disabled`.
* @default true * @default true
*/ */
active?: boolean; active?: boolean;
/**
* Figma state axis. Disabled dims the control and turns the button off.
*/
state?: UploadStateValue;
/**
* Show the label. The upload step uses the control with this off.
* Defaults to true when `label` is set.
*/
hasLabel?: boolean;
/** /**
* Label text displayed above the upload component * Label text displayed above the upload component
*/ */
@@ -31,7 +43,8 @@ export interface UploadProps {
} }
export interface UploadViewProps { export interface UploadViewProps {
active: boolean; state: UploadStateValue;
hasLabel: boolean;
label?: string; label?: string;
showHelpIcon: boolean; showHelpIcon: boolean;
hintText: string; hintText: string;
app/components/controls/Upload/Upload.view.tsx
+20 -9
View File
@@ -5,7 +5,8 @@ import InputLabel from "../../type/InputLabel";
import type { UploadViewProps } from "./Upload.types"; import type { UploadViewProps } from "./Upload.types";
function UploadView({ function UploadView({
active = true, state,
hasLabel,
label, label,
showHelpIcon = true, showHelpIcon = true,
hintText, hintText,
@@ -14,7 +15,8 @@ function UploadView({
onClick, onClick,
className = "", className = "",
}: UploadViewProps) { }: UploadViewProps) {
const isActive = active; const isActive = state !== "disabled";
const isDisabled = state === "disabled";
// Button styles based on active state // Button styles based on active state
const buttonBgClass = isActive const buttonBgClass = isActive
@@ -37,10 +39,10 @@ function UploadView({
return ( return (
<div <div
className={`flex flex-col gap-[var(--measures-spacing-300,12px)] items-start relative w-full ${className}`} className={`flex flex-col gap-[var(--space-300)] items-start relative w-full ${className}`}
> >
{/* Label using InputLabel component */} {/* Label using InputLabel component */}
{label && ( {hasLabel && label ? (
<InputLabel <InputLabel
label={label} label={label}
helpIcon={showHelpIcon} helpIcon={showHelpIcon}
@@ -49,15 +51,24 @@ function UploadView({
size="s" size="s"
palette="default" palette="default"
/> />
)} ) : null}
{/* Upload container — max width per create-flow spec */} {/* Upload container — max width per create-flow spec */}
<div className="bg-[var(--color-surface-default-secondary,#141414)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--measures-radius-200,8px)] px-[var(--measures-spacing-600,24px)] py-[var(--measures-spacing-1200,48px)]"> <div
className={`bg-[var(--color-surface-default-secondary,#141414)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--radius-200)] px-[var(--space-600)] py-[var(--space-1200)] ${
state === "error"
? "border border-[var(--color-border-default-utility-negative)]"
: ""
} ${state === "focus" ? "shadow-[var(--shadow-focus-default)]" : ""}`}
>
{/* Upload button */} {/* Upload button */}
<button <button
type="button" type="button"
onClick={onClick} onClick={onClick}
className={`${buttonBgClass} flex gap-[var(--measures-spacing-150,6px)] items-center justify-center overflow-clip px-[var(--space-400,16px)] py-[var(--measures-spacing-300,12px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`} disabled={isDisabled}
className={`${buttonBgClass} flex gap-[var(--space-150)] items-center justify-center overflow-clip px-[var(--space-400)] py-[var(--space-300)] rounded-[var(--radius-full)] shrink-0 hover:opacity-80 transition-opacity ${
state === "hover" ? "opacity-80" : ""
} ${state === "active" ? "scale-[0.98]" : ""}`}
aria-label={uploadAriaLabel} aria-label={uploadAriaLabel}
> >
{/* Upload icon */} {/* Upload icon */}
@@ -98,7 +109,7 @@ function UploadView({
</div> </div>
{/* Button text */} {/* Button text */}
<div <div
className={`flex flex-col font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`} className={`flex flex-col font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400)] whitespace-nowrap ${buttonTextColor}`}
> >
<p className="leading-[20px]">{uploadButtonLabel}</p> <p className="leading-[20px]">{uploadButtonLabel}</p>
</div> </div>
@@ -106,7 +117,7 @@ function UploadView({
{/* Description text */} {/* Description text */}
<div <div
className={`flex flex-[1_0_0] flex-col font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`} className={`flex flex-[1_0_0] flex-col font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350)] ${descriptionTextColor}`}
> >
<p className="leading-[20px] whitespace-pre-wrap">{hintText}</p> <p className="leading-[20px] whitespace-pre-wrap">{hintText}</p>
</div> </div>
app/components/layout/Accordion/Accordion.view.tsx
+7 -7
View File
@@ -11,20 +11,20 @@ const SIZE_CLASSES: Record<
> = { > = {
s: { s: {
header: header:
"min-h-[88px] gap-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-020)] items-center", "min-h-[88px] gap-[var(--space-400)] px-[var(--space-400)] py-[var(--space-500)] items-center",
title: "text-[14px] font-medium leading-[18px]", title: "text-[14px] font-medium leading-[18px]",
subhead: "text-x-small-label", subhead: "text-x-small-label",
}, },
/** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */ /** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */
m: { m: {
header: header:
"min-h-[104px] gap-[var(--spacing-scale-024)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-024)] items-center", "min-h-[104px] gap-[var(--space-600)] px-[var(--space-400)] py-[var(--space-600)] items-center",
title: "text-large-label font-medium leading-6", title: "text-large-label font-medium leading-6",
subhead: "text-[14px] leading-[18px] font-medium", subhead: "text-[14px] leading-[18px] font-medium",
}, },
l: { l: {
header: header:
"min-h-[135px] gap-[var(--spacing-scale-048)] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-032)] items-center", "min-h-[135px] gap-[var(--space-1200)] px-[var(--space-400)] py-[var(--space-800)] items-center",
/** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */ /** Figma Large: X Large Label 24 Regular, lh 28 (21842-2869). */
title: "text-x-large-label font-normal leading-7", title: "text-x-large-label font-normal leading-7",
subhead: "text-large-label", subhead: "text-large-label",
@@ -32,9 +32,9 @@ const SIZE_CLASSES: Record<
}; };
const PANEL_CLASSES: Record<AccordionSizeValue, string> = { const PANEL_CLASSES: Record<AccordionSizeValue, string> = {
s: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-020)] text-small-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]", s: "px-[var(--space-400)] pb-[var(--space-500)] text-small-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
m: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-024)] text-medium-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]", m: "px-[var(--space-400)] pb-[var(--space-600)] text-medium-paragraph text-[var(--color-content-default-secondary,#d2d2d2)]",
l: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-032)] text-[18px] font-normal leading-[26px] text-[var(--color-content-default-secondary,#d2d2d2)]", l: "px-[var(--space-400)] pb-[var(--space-800)] text-[18px] font-normal leading-[26px] text-[var(--color-content-default-secondary,#d2d2d2)]",
}; };
function withLgClasses(base: string, lg: string): string { function withLgClasses(base: string, lg: string): string {
@@ -122,7 +122,7 @@ function AccordionView({
onClick={onToggle} onClick={onToggle}
className={`flex w-full ${sizeClass.header} text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-content-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-secondary)]`} className={`flex w-full ${sizeClass.header} text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-content-default-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-secondary)]`}
> >
<span className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-scale-004)]"> <span className="flex min-w-0 flex-1 flex-col gap-[var(--space-100)]">
<span <span
className={`text-[var(--color-content-default-primary,white)] ${sizeClass.title}`} className={`text-[var(--color-content-default-primary,white)] ${sizeClass.title}`}
> >
app/components/layout/listSizeLayout.ts
+4 -4
View File
@@ -39,7 +39,7 @@ type RowLayout = {
export const listEntrySizeLayout: Record<ListSize, RowLayout> = { export const listEntrySizeLayout: Record<ListSize, RowLayout> = {
s: { s: {
shell: `${rowShellBase} min-h-0 gap-1.5 py-[var(--spacing-scale-012)]`, shell: `${rowShellBase} min-h-0 gap-1.5 py-[var(--space-300)]`,
textCol: "flex min-w-0 flex-1 flex-col items-start justify-center", textCol: "flex min-w-0 flex-1 flex-col items-start justify-center",
title: title:
"min-w-0 flex-1 text-sm font-medium leading-[18px] text-[var(--color-content-default-primary)]", "min-w-0 flex-1 text-sm font-medium leading-[18px] text-[var(--color-content-default-primary)]",
@@ -48,7 +48,7 @@ export const listEntrySizeLayout: Record<ListSize, RowLayout> = {
rowFigma: FIGMA_LIST_ENTRY_ROW.s, rowFigma: FIGMA_LIST_ENTRY_ROW.s,
}, },
m: { m: {
shell: `${rowShellBase} min-h-16 gap-[var(--spacing-scale-008)] py-[var(--spacing-scale-012)]`, shell: `${rowShellBase} min-h-16 gap-[var(--space-200)] py-[var(--space-300)]`,
textCol: "flex min-w-0 flex-1 flex-col items-start justify-center", textCol: "flex min-w-0 flex-1 flex-col items-start justify-center",
title: title:
"min-w-0 flex-1 text-large-label text-[var(--color-content-default-primary)]", "min-w-0 flex-1 text-large-label text-[var(--color-content-default-primary)]",
@@ -57,9 +57,9 @@ export const listEntrySizeLayout: Record<ListSize, RowLayout> = {
rowFigma: FIGMA_LIST_ENTRY_ROW.m, rowFigma: FIGMA_LIST_ENTRY_ROW.m,
}, },
l: { l: {
shell: `${rowShellBase} min-h-16 gap-[var(--spacing-scale-012)] py-[var(--spacing-scale-016)]`, shell: `${rowShellBase} min-h-16 gap-[var(--space-300)] py-[var(--space-400)]`,
textCol: textCol:
"flex min-w-0 flex-1 flex-col items-start justify-center gap-[var(--spacing-scale-004)]", "flex min-w-0 flex-1 flex-col items-start justify-center gap-[var(--space-100)]",
title: title:
"min-w-0 flex-1 text-x-large-label text-[var(--color-content-default-primary)]", "min-w-0 flex-1 text-x-large-label text-[var(--color-content-default-primary)]",
description: description:
app/components/modals/Alert/Alert.container.tsx
+7 -7
View File
@@ -23,14 +23,14 @@ function layoutFor(
size === "s" size === "s"
? "px-[var(--space-500)]" ? "px-[var(--space-500)]"
: "px-[var(--space-1200)]"; : "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") { if (size === "s") {
return { return {
containerClasses, containerClasses,
titleClasses: titleClasses:
"text-[14px] leading-[18px] font-medium tracking-[0%]", "text-[14px] leading-[18px] font-medium tracking-[0%]",
descriptionClasses: descriptionClasses:
"text-small-paragraph mt-[var(--spacing-scale-004)]", "text-small-paragraph mt-[var(--space-100)]",
}; };
} }
return { return {
@@ -38,27 +38,27 @@ function layoutFor(
titleClasses: titleClasses:
"text-large-label", "text-large-label",
descriptionClasses: descriptionClasses:
"text-large-paragraph mt-[var(--spacing-scale-004)]", "text-large-paragraph mt-[var(--space-100)]",
}; };
} }
if (size === "s") { if (size === "s") {
return { return {
containerClasses: 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: titleClasses:
"text-[14px] leading-[18px] font-medium tracking-[0%]", "text-[14px] leading-[18px] font-medium tracking-[0%]",
descriptionClasses: descriptionClasses:
"text-small-paragraph mt-[var(--spacing-scale-004)]", "text-small-paragraph mt-[var(--space-100)]",
}; };
} }
return { return {
containerClasses: 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: titleClasses:
"text-medium-label", "text-medium-label",
descriptionClasses: descriptionClasses:
"text-medium-paragraph mt-[var(--spacing-scale-004)]", "text-medium-paragraph mt-[var(--space-100)]",
}; };
} }
app/components/modals/Alert/Alert.view.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ export function AlertView({
width="20" width="20"
height="20" height="20"
> >
<rect width="20" height="20" fill="#D9D9D9" /> <rect width="20" height="20" fill="var(--color-gray-200)" />
</mask> </mask>
<g mask="url(#mask0_21296_8285)"> <g mask="url(#mask0_21296_8285)">
<path <path
app/components/modals/Create/Create.view.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export function CreateView({
</div> </div>
) : null} ) : 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} {children}
</div> </div>
app/components/modals/Create/CreateModalFrame.view.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ export type CreateModalBackdropVariant = "default" | "blurredYellow";
const backdropOverlayClasses: Record<CreateModalBackdropVariant, string> = { const backdropOverlayClasses: Record<CreateModalBackdropVariant, string> = {
default: "fixed inset-0 bg-black/50 z-[9998]", default: "fixed inset-0 bg-black/50 z-[9998]",
blurredYellow: 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 = { export type CreateModalFrameViewProps = {
@@ -56,7 +56,7 @@ export function CreateModalFrameView({
aria-modal="true" aria-modal="true"
aria-label={ariaLabel} aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy} 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()} onClick={(e) => e.stopPropagation()}
> >
{children} {children}
app/components/modals/Dialog/Dialog.view.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export const DialogView = memo(function DialogView({
</div> </div>
{children ? ( {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} {children}
</div> </div>
) : null} ) : null}
app/components/modals/Login/Login.view.tsx
+3 -3
View File
@@ -5,9 +5,9 @@ import ModalHeader from "../ModalHeader";
import type { LoginBackdropVariant, LoginViewProps } from "./Login.types"; import type { LoginBackdropVariant, LoginViewProps } from "./Login.types";
const backdropClasses: Record<LoginBackdropVariant, string> = { const backdropClasses: Record<LoginBackdropVariant, string> = {
solid: "bg-[var(--color-surface-inverse-brand-primary)]", solid: "bg-[var(--color-surface-invert-brand-primary)]",
blurredYellow: 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({ export function LoginView({
@@ -43,7 +43,7 @@ export function LoginView({
aria-modal="true" aria-modal="true"
aria-label={ariaLabel} aria-label={ariaLabel}
aria-labelledby={ariaLabelledBy} 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()} onClick={(e) => e.stopPropagation()}
> >
<ModalHeader onClose={onClose} showMoreOptionsButton={false} /> <ModalHeader onClose={onClose} showMoreOptionsButton={false} />
app/components/modals/Login/LoginForm.tsx
+3 -3
View File
@@ -183,7 +183,7 @@ export default function LoginForm({
return ( return (
<div className="flex flex-col gap-6 pt-2"> <div className="flex flex-col gap-6 pt-2">
<div className="flex flex-col gap-3"> <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 /> <MailIconInline />
</div> </div>
<ContentLockup <ContentLockup
@@ -272,7 +272,7 @@ export default function LoginForm({
buttonType="filled" buttonType="filled"
palette="default" palette="default"
disabled={submitting} 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")} {t("sendMagicLink")}
</Button> </Button>
@@ -284,7 +284,7 @@ export default function LoginForm({
palette="default" palette="default"
disabled={submitting} disabled={submitting}
onClick={onDismiss} 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")} {t("continueWithoutSaving")}
</Button> </Button>
app/components/modals/ModalFooter/ModalFooter.view.tsx
+3 -2
View File
@@ -29,12 +29,13 @@ export function ModalFooterView({
return ( return (
<div <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 && ( {showRemoveButton && (
<div className="absolute left-[16px] top-[12px]"> <div className="absolute left-[16px] top-[12px]">
<Button <Button
buttonType="danger" buttonType="outline"
danger
palette="default" palette="default"
size="medium" size="medium"
onClick={onRemove} onClick={onRemove}
app/components/modals/Share/Share.view.tsx
+3 -3
View File
@@ -130,8 +130,8 @@ export const ShareView = memo(function ShareView({
copied={linkCopied} copied={linkCopied}
circleClassName={ circleClassName={
linkCopied linkCopied
? "border-2 border-[#444444] bg-[#333333]" ? "border-2 border-[var(--color-gray-600)] bg-[var(--color-gray-700)]"
: "border-[#444444] bg-[#333333] group-hover:border-2 group-hover:border-[var(--color-border-default-positive-primary)] group-hover:bg-[#444444]" : "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={ icon={
<ShareAssetIcon <ShareAssetIcon
@@ -162,7 +162,7 @@ export const ShareView = memo(function ShareView({
<ShareChannelTile <ShareChannelTile
label={emailLabel} label={emailLabel}
onClick={onEmailShare} 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} />} icon={<ShareAssetIcon name="mail" width={24} height={24} />}
/> />
</div> </div>
app/components/modals/Tooltip/Tooltip.container.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const TooltipContainer = memo<TooltipProps>(
return <>{children}</>; 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]" 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`; } left-1/2 -translate-x-1/2 ${isVisible ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"} transition-all duration-200`;
app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx
+3 -3
View File
@@ -28,7 +28,7 @@ export function CreateFlowFooterView({
<div className={CREATE_FLOW_PAGE_GUTTER_CLASS}> <div className={CREATE_FLOW_PAGE_GUTTER_CLASS}>
<div className={`mx-auto w-full ${contentMaxClass}`}> <div className={`mx-auto w-full ${contentMaxClass}`}>
{progressBar && ( {progressBar && (
<div className="pt-[var(--spacing-measures-spacing-300,12px)]"> <div className="pt-[var(--space-300)]">
<ProportionBar <ProportionBar
progress={proportionBarProgress} progress={proportionBarProgress}
variant={proportionBarVariant} variant={proportionBarVariant}
@@ -36,12 +36,12 @@ export function CreateFlowFooterView({
</div> </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 <Button
buttonType="ghost" buttonType="ghost"
palette="default" palette="default"
size="xsmall" 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} onClick={onBackClick}
disabled={!onBackClick} disabled={!onBackClick}
> >
app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx
+8 -8
View File
@@ -8,10 +8,10 @@ import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types";
import { CREATE_FLOW_PAGE_GUTTER_CLASS } from "../../../(app)/create/components/createFlowLayoutTokens"; import { CREATE_FLOW_PAGE_GUTTER_CLASS } from "../../../(app)/create/components/createFlowLayoutTokens";
const outlineButtonClass = 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 = 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 }) { function KebabIcon({ className = "" }: { className?: string }) {
return ( return (
@@ -110,7 +110,7 @@ export function CreateFlowTopNavView({
aria-expanded={exportMenuOpen} aria-expanded={exportMenuOpen}
aria-controls={exportMenuId} aria-controls={exportMenuId}
onClick={() => setExportMenuOpen((o) => !o)} 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> <span>{exportLabel}</span>
<svg <svg
@@ -129,7 +129,7 @@ export function CreateFlowTopNavView({
</svg> </svg>
</Button> </Button>
{exportMenuOpen ? ( {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 <Popover
id={exportMenuId} id={exportMenuId}
menuAriaLabel={exportPopoverMenuAriaLabel} menuAriaLabel={exportPopoverMenuAriaLabel}
@@ -230,13 +230,13 @@ export function CreateFlowTopNavView({
aria-label={bannerAriaLabel} aria-label={bannerAriaLabel}
> >
<nav <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" role="navigation"
aria-label={navAriaLabel} aria-label={navAriaLabel}
> >
<Logo size="createFlow" wordmark palette={buttonPalette} /> <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 ? ( {useKebabMenu ? (
<div className="relative" ref={actionsWrapRef}> <div className="relative" ref={actionsWrapRef}>
<Button <Button
@@ -249,12 +249,12 @@ export function CreateFlowTopNavView({
aria-expanded={actionsMenuOpen} aria-expanded={actionsMenuOpen}
aria-controls={actionsMenuId} aria-controls={actionsMenuId}
onClick={() => setActionsMenuOpen((open) => !open)} onClick={() => setActionsMenuOpen((open) => !open)}
className={`!px-[var(--spacing-scale-010,10px)] ${outlineButtonClass}`} className={`!px-[var(--space-250)] ${outlineButtonClass}`}
> >
<KebabIcon /> <KebabIcon />
</Button> </Button>
{actionsMenuOpen ? ( {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}> <Popover id={actionsMenuId} menuAriaLabel={actionsMenuAriaLabel}>
{actionMenuItems.map((item, index) => ( {actionMenuItems.map((item, index) => (
<ListItem <ListItem
app/components/navigation/Footer.tsx
+26 -26
View File
@@ -53,39 +53,39 @@ const Footer = memo(() => {
<footer className="bg-[var(--color-surface-default-primary)] w-full"> <footer className="bg-[var(--color-surface-default-primary)] w-full">
<div <div
className="mx-auto flex max-w-[1920px] flex-col className="mx-auto flex max-w-[1920px] flex-col
gap-[var(--spacing-measures-spacing-040)] gap-[var(--space-1000)]
px-[var(--spacing-measures-spacing-016)] px-[var(--space-400)]
py-[var(--spacing-measures-spacing-040)] py-[var(--space-1000)]
md:gap-[var(--spacing-measures-spacing-024)] md:gap-[var(--space-600)]
md:px-[var(--spacing-measures-spacing-032)] md:px-[var(--space-800)]
md:py-[var(--spacing-measures-spacing-024)] md:py-[var(--space-600)]
lg:gap-[var(--spacing-measures-spacing-060,60px)] lg:gap-[var(--space-1500)]
lg:px-[var(--spacing-scale-064)] lg:px-[var(--space-1800)]
lg:py-[var(--spacing-scale-096)]" lg:py-[var(--space-2400)]"
> >
<div <div
className="flex w-full flex-col className="flex w-full flex-col
gap-[var(--spacing-scale-032)] gap-[var(--space-800)]
md:gap-[var(--spacing-scale-048)] md:gap-[var(--space-1200)]
lg:gap-[var(--spacing-measures-spacing-060,60px)]" lg:gap-[var(--space-1500)]"
> >
<Logo size="footer" wordmark /> <Logo size="footer" wordmark />
<div <div
className="flex w-full flex-col 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" md:flex-row md:items-start md:justify-between md:gap-0"
> >
<div <div
className="order-2 flex flex-col className="order-2 flex flex-col
gap-[var(--spacing-scale-048)] gap-[var(--space-1200)]
md:order-1 md:max-w-[min(100%,334px)] md:order-1 md:max-w-[min(100%,334px)]
lg:max-w-[min(100%,334px)] lg:max-w-[min(100%,334px)]
lg:gap-[var(--spacing-scale-064)]" lg:gap-[var(--space-1800)]"
> >
<div <div
className="flex flex-col className="flex flex-col
gap-[var(--spacing-measures-spacing-016,16px)]" gap-[var(--space-400)]"
> >
<div className={orgNameClass}>{t("organization.name")}</div> <div className={orgNameClass}>{t("organization.name")}</div>
<a <a
@@ -98,11 +98,11 @@ const Footer = memo(() => {
<div <div
className="flex flex-col className="flex flex-col
gap-[var(--spacing-measures-spacing-016,16px)]" gap-[var(--space-400)]"
> >
<a <a
href={t("social.bluesky.url")} 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")} aria-label={t("social.bluesky.ariaLabel")}
> >
{/* eslint-disable-next-line @next/next/no-img-element -- social logo */} {/* eslint-disable-next-line @next/next/no-img-element -- social logo */}
@@ -117,7 +117,7 @@ const Footer = memo(() => {
</a> </a>
<a <a
href={t("social.gitea.url")} 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")} aria-label={t("social.gitea.ariaLabel")}
> >
{/* eslint-disable-next-line @next/next/no-img-element -- social icon */} {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
@@ -132,7 +132,7 @@ const Footer = memo(() => {
</a> </a>
<a <a
href={t("social.mastodon.url")} 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")} aria-label={t("social.mastodon.ariaLabel")}
> >
{/* eslint-disable-next-line @next/next/no-img-element -- social icon */} {/* eslint-disable-next-line @next/next/no-img-element -- social icon */}
@@ -153,9 +153,9 @@ const Footer = memo(() => {
aria-label={tChrome("footerAriaLabel")} aria-label={tChrome("footerAriaLabel")}
className="order-1 flex w-full max-w-full flex-col className="order-1 flex w-full max-w-full flex-col
items-start 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: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}> <Link href="/use-cases" className={primaryLinkClass}>
{t("navigation.useCases")} {t("navigation.useCases")}
@@ -174,9 +174,9 @@ const Footer = memo(() => {
<div <div
className="flex w-full flex-col className="flex w-full flex-col
gap-[var(--spacing-scale-032)] gap-[var(--space-800)]
text-[var(--color-content-default-primary)] 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:whitespace-nowrap
md:text-x-small-paragraph md:text-x-small-paragraph
lg:text-small-paragraph" lg:text-small-paragraph"
@@ -198,12 +198,12 @@ const Footer = memo(() => {
</p> </p>
<div <div
className="flex w-full min-w-0 flex-col flex-wrap className="flex w-full min-w-0 flex-col flex-wrap
gap-[var(--spacing-scale-032)] gap-[var(--space-800)]
text-small-paragraph text-small-paragraph
text-[var(--color-content-default-primary)] text-[var(--color-content-default-primary)]
md:max-w-[min(100%,396px)] md:max-w-[min(100%,396px)]
md:flex-row md:flex-nowrap md:content-center md:items-center md:justify-end 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 md:text-x-small-paragraph
lg:max-w-none lg:max-w-none
lg:gap-10 lg:gap-10
app/components/navigation/Menu.tsx
+5 -5
View File
@@ -31,15 +31,15 @@ const Menu = memo<MenuProps>(
string string
> = { > = {
"X Small": "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: 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: 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: 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": "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}`; const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
app/components/navigation/MenuItem/MenuItem.container.tsx
+11 -11
View File
@@ -33,16 +33,16 @@ const MenuItemContainer = memo<MenuItemProps>(
string string
> = { > = {
"X Small": reducedPadding "X Small": reducedPadding
? "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]" ? "px-[var(--space-100)] py-[var(--space-050)]"
: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]", : "px-[var(--space-100)] py-[var(--space-050)]",
Small: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]", Small: "px-[var(--space-100)] py-[var(--space-050)]",
Medium: reducedPadding Medium: reducedPadding
? "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] h-[32px]" ? "px-[var(--space-050)] py-[var(--space-200)] h-[32px]"
: "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] h-[32px]", : "px-[var(--space-200)] py-[var(--space-200)] h-[32px]",
Large: 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": "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 // Text styles based on Figma specifications
@@ -74,11 +74,11 @@ const MenuItemContainer = memo<MenuItemProps>(
const inverseModeStyles: Record<"default" | "hover" | "selected", string> = const inverseModeStyles: Record<"default" | "hover" | "selected", string> =
{ {
default: 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: 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: 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 // Get state styles based on mode
@@ -86,7 +86,7 @@ const MenuItemContainer = memo<MenuItemProps>(
mode === "inverse" ? inverseModeStyles : defaultModeStyles; mode === "inverse" ? inverseModeStyles : defaultModeStyles;
// Base styles // 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 // Interactive styles
const interactiveStyles = const interactiveStyles =
app/components/navigation/NavigationItem/NavigationItem.container.tsx
+3 -3
View File
@@ -30,9 +30,9 @@ const NavigationItemContainer = memo<NavigationItemProps>(
// Size styles // Size styles
const sizeStyles: Record<string, string> = { const sizeStyles: Record<string, string> = {
default: 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: 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 // Text styles based on size
@@ -42,7 +42,7 @@ const NavigationItemContainer = memo<NavigationItemProps>(
xsmall: "text-xx-small-label", 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 // Determine which variant to use
let finalVariant = variant; let finalVariant = variant;
app/components/navigation/Top/Top.container.tsx
+8 -8
View File
@@ -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. */ /** Padding/type that tracks lg/xl Menu sizes without cloning the items per breakpoint. */
const NAV_ITEM_RESPONSIVE_CLASS = 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 = 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 = 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 = 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>( const TopContainer = memo<TopProps>(
({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => { ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
@@ -182,8 +182,8 @@ const TopContainer = memo<TopProps>(
size="small" size="small"
className={ className={
folderTop folderTop
? "md:-space-x-[9px] 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(--spacing-scale-010)] xl:-space-x-[13px]" : "lg:-space-x-[var(--space-250)] xl:-space-x-[13px]"
} }
> >
{avatarImageSources.map((src, index) => ( {avatarImageSources.map((src, index) => (
@@ -194,8 +194,8 @@ const TopContainer = memo<TopProps>(
size="small" size="small"
className={ className={
folderTop 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)]" ? "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(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]" : "lg:h-[var(--space-600)] lg:w-[var(--space-600)] xl:h-[var(--space-800)] xl:w-[var(--space-800)]"
} }
/> />
))} ))}
app/components/navigation/Top/Top.view.tsx
+9 -9
View File
@@ -23,7 +23,7 @@ function TopView({
const t = useTranslation(folderTop ? "homeHeader" : "header"); const t = useTranslation(folderTop ? "homeHeader" : "header");
const loginControl = logIn ? ( 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()} {renderLoginButton()}
</Menu> </Menu>
) : null; ) : null;
@@ -42,11 +42,11 @@ function TopView({
aria-label={t("ariaLabels.homePageNavigationHeader")} aria-label={t("ariaLabels.homePageNavigationHeader")}
> >
<nav <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" role="navigation"
aria-label={t("ariaLabels.mainNavigation")} 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"> <div className="relative z-[1] shrink-0">
<Logo <Logo
size={logoSize} size={logoSize}
@@ -56,12 +56,12 @@ function TopView({
</div> </div>
<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" data-top="nav"
> >
<Menu <Menu
size="X Small" 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()} {renderNavigationItems()}
</Menu> </Menu>
@@ -91,7 +91,7 @@ function TopView({
</div> </div>
<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" data-top="auth"
> >
{loginControl} {loginControl}
@@ -123,7 +123,7 @@ function TopView({
aria-label={t("ariaLabels.mainNavigationHeader")} aria-label={t("ariaLabels.mainNavigationHeader")}
> >
<nav <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" role="navigation"
aria-label={t("ariaLabels.mainNavigation")} aria-label={t("ariaLabels.mainNavigation")}
> >
@@ -141,14 +141,14 @@ function TopView({
> >
<Menu <Menu
size="X Small" size="X Small"
className="min-w-0 lg:gap-[var(--spacing-scale-012)]" className="min-w-0 lg:gap-[var(--space-300)]"
> >
{renderNavigationItems()} {renderNavigationItems()}
</Menu> </Menu>
</div> </div>
<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" data-top="auth"
> >
{loginControl} {loginControl}
app/components/progress/ProportionBar/ProportionBar.view.tsx
+2 -2
View File
@@ -65,7 +65,7 @@ export function ProportionBarView({
aria-label={ariaLabelText} aria-label={ariaLabelText}
> >
{/* Background layer - 3 segments */} {/* Background layer - 3 segments */}
<div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px]"> <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px]">
<div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-l-[var(--radius-full)]" /> <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-l-[var(--radius-full)]" />
<div className="flex-1 h-full bg-[var(--color-surface-default-secondary)]" /> <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)]" />
<div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-r-[var(--radius-full)]" /> <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-r-[var(--radius-full)]" />
@@ -77,7 +77,7 @@ export function ProportionBarView({
only the outermost left/right edges of the whole bar can round to match the only the outermost left/right edges of the whole bar can round to match the
background capsule. background capsule.
*/} */}
<div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px] overflow-hidden"> <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px] overflow-hidden">
{/* First section - for 1-X: (X+1)/6 filled, for 2-X and 3-X: fully filled */} {/* First section - for 1-X: (X+1)/6 filled, for 2-X and 3-X: fully filled */}
<div className="flex-1 h-full relative"> <div className="flex-1 h-full relative">
{fullSegments === 1 ? ( {fullSegments === 1 ? (
app/components/progress/Stepper/Stepper.container.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import type { StepperProps } from "./Stepper.types";
const StepperContainer = memo<StepperProps>( const StepperContainer = memo<StepperProps>(
({ active = 1, totalSteps = 5, className = "" }) => { ({ active = 1, totalSteps = 5, className = "" }) => {
const stepperClasses = `flex gap-[var(--spacing-scale-012)] items-center relative`; const stepperClasses = `flex gap-[var(--space-300)] items-center relative`;
return ( return (
<StepperView <StepperView
app/components/progress/Stepper/Stepper.view.tsx
+2 -2
View File
@@ -37,8 +37,8 @@ export function StepperView({
cx="6" cx="6"
cy="6" cy="6"
r="5.5" r="5.5"
fill="var(--color-surface-inverse-secondary)" fill="var(--color-surface-invert-secondary)"
stroke="var(--color-surface-inverse-secondary)" stroke="var(--color-surface-invert-secondary)"
strokeWidth="1" strokeWidth="1"
/> />
</svg> </svg>
app/components/sections/Accordion/Accordion.view.tsx
+2 -2
View File
@@ -22,9 +22,9 @@ function FaqAccordionView({
return ( return (
<section <section
aria-labelledby={headingId} aria-labelledby={headingId}
className={`bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] md:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-096)] ${className}`.trim()} className={`bg-[var(--color-surface-default-secondary)] px-[var(--space-100)] py-[var(--space-800)] md:px-[var(--space-2400)] md:py-[var(--space-1800)] lg:px-[var(--space-4000)] lg:py-[var(--space-2400)] ${className}`.trim()}
> >
<div className="mx-auto flex w-full flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]"> <div className="mx-auto flex w-full flex-col items-center gap-[var(--space-2400)] md:gap-[var(--space-1000)]">
<h2 <h2
id={headingId} id={headingId}
className="w-full text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]" className="w-full text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]"
app/components/sections/AskOrganizer/AskOrganizer.container.tsx
+6 -6
View File
@@ -62,17 +62,17 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
const sectionPadding = const sectionPadding =
resolvedVariant === "compact" resolvedVariant === "compact"
? "py-[var(--spacing-scale-016)] px-[var(--spacing-scale-016)] md:py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-032)]" ? "py-[var(--space-400)] px-[var(--space-400)] md:py-[var(--space-800)] md:px-[var(--space-800)]"
: resolvedVariant === "use-case-detail" || resolvedVariant === "inverse" : resolvedVariant === "use-case-detail" || resolvedVariant === "inverse"
? "w-full py-[var(--spacing-scale-032)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]" ? "w-full py-[var(--space-800)] px-[var(--space-800)] md:py-[var(--space-2400)] md:px-[var(--space-1800)]"
: "py-[var(--spacing-scale-040)] px-[var(--spacing-scale-032)] md:py-[var(--spacing-scale-096)] md:px-[var(--spacing-scale-064)]"; : "py-[var(--space-1000)] px-[var(--space-800)] md:py-[var(--space-2400)] md:px-[var(--space-1800)]";
const contentGap = const contentGap =
resolvedVariant === "compact" resolvedVariant === "compact"
? "gap-[var(--spacing-scale-020)]" ? "gap-[var(--space-500)]"
: resolvedVariant === "use-case-detail" : resolvedVariant === "use-case-detail"
? "gap-[var(--spacing-scale-040)]" ? "gap-[var(--space-1000)]"
: "gap-[var(--spacing-scale-040)]"; : "gap-[var(--space-1000)]";
const labelledBy = title ? "ask-organizer-headline" : undefined; const labelledBy = title ? "ask-organizer-headline" : undefined;
Loaded 100 of 162 files, more files were not shown because too many files have changed in this diff. Show more