diff --git a/.storybook/fonts.css b/.storybook/fonts.css index 56d499b..8d5fcdc 100644 --- a/.storybook/fonts.css +++ b/.storybook/fonts.css @@ -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 { --font-inter: @@ -7,7 +7,4 @@ --font-bricolage-grotesque: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; - --font-space-grotesk: - "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", - Roboto, "Helvetica Neue", Arial; } diff --git a/app/(admin)/monitor/MonitorPageContent.tsx b/app/(admin)/monitor/MonitorPageContent.tsx index 91fe526..f40f56e 100644 --- a/app/(admin)/monitor/MonitorPageContent.tsx +++ b/app/(admin)/monitor/MonitorPageContent.tsx @@ -13,10 +13,10 @@ export default function MonitorPageContent() {
-
+
-
-

+
+

{p.title}

@@ -24,12 +24,12 @@ export default function MonitorPageContent() {

-
-
-

+
+
+

{p.performanceTargets.title}

-
+
{p.performanceTargets.loadTime} @@ -73,42 +73,42 @@ export default function MonitorPageContent() {
-
-

+
+

{p.optimizationStatus.title}

-
-
+
+
✅ {p.optimizationStatus.codeSplitting}
-
+
✅ {p.optimizationStatus.reactMemo}
-
+
✅ {p.optimizationStatus.imageOptimization}
-
+
✅ {p.optimizationStatus.fontPreloading}
-
+
✅ {p.optimizationStatus.bundleAnalysis}
-
+
✅ {p.optimizationStatus.errorBoundaries} @@ -120,40 +120,40 @@ export default function MonitorPageContent() { -
-

+
+

{p.monitoringCommands.title}

-
+
-

+

{p.monitoringCommands.bundleAnalyze.title}

- + {p.monitoringCommands.bundleAnalyze.command}
-

+

{p.monitoringCommands.e2ePerformance.title}

- + {p.monitoringCommands.e2ePerformance.command}
-

+

{p.monitoringCommands.lhciDesktop.title}

- + {p.monitoringCommands.lhciDesktop.command}
-

+

{p.monitoringCommands.performanceBudget.title}

- + {p.monitoringCommands.performanceBudget.command}
diff --git a/app/(app)/create/components/ApplicableScopeField.tsx b/app/(app)/create/components/ApplicableScopeField.tsx index 61d9467..8dd6d06 100644 --- a/app/(app)/create/components/ApplicableScopeField.tsx +++ b/app/(app)/create/components/ApplicableScopeField.tsx @@ -117,7 +117,7 @@ function ApplicableScopeFieldComponent({ {generateDraftHint ? ( -

+

{generateDraftHint}

) : null} diff --git a/app/(app)/create/components/createFlowLayoutTokens.ts b/app/(app)/create/components/createFlowLayoutTokens.ts index 438fad4..d9d26d8 100644 --- a/app/(app)/create/components/createFlowLayoutTokens.ts +++ b/app/(app)/create/components/createFlowLayoutTokens.ts @@ -48,7 +48,7 @@ export const CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS = export const CREATE_FLOW_MD_UP_GRID_CELL_CLASS = "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 = "w-full min-w-0 lg:max-w-[1328px]"; diff --git a/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx b/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx index 22da817..bff8dcb 100644 --- a/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx +++ b/app/(app)/create/components/methodEditFields/CoreValueEditFields.tsx @@ -42,7 +42,7 @@ function CoreValueEditFieldsComponent({ ); return ( -
+
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" />
)} diff --git a/app/(app)/create/screens/upload/CommunityUploadScreen.tsx b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx index 5aa8af1..1049784 100644 --- a/app/(app)/create/screens/upload/CommunityUploadScreen.tsx +++ b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx @@ -241,7 +241,7 @@ export function CommunityUploadScreen() { {u.previewAlt}
) : ( diff --git a/app/(app)/create/utils/createFlowFooterClassNames.ts b/app/(app)/create/utils/createFlowFooterClassNames.ts index ba3ae73..17bbeff 100644 --- a/app/(app)/create/utils/createFlowFooterClassNames.ts +++ b/app/(app)/create/utils/createFlowFooterClassNames.ts @@ -12,8 +12,8 @@ */ export const CREATE_FLOW_FOOTER_BUTTON_CLASS = "!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)]"; + "!px-[var(--space-200)] md:!px-[var(--space-250)] " + + "!py-[var(--space-200)] md:!py-[var(--space-250)]"; /** * Template-review "Use without changes" (ghost variant) renders on a dark diff --git a/app/(app)/login/page.tsx b/app/(app)/login/page.tsx index 10bebd6..54f18f3 100644 --- a/app/(app)/login/page.tsx +++ b/app/(app)/login/page.tsx @@ -8,7 +8,7 @@ import Login from "../../components/modals/Login"; import LoginForm from "../../components/modals/Login/LoginForm"; const loginPageBgClass = - "min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]"; + "min-h-[100dvh] bg-[var(--color-surface-invert-brand-primary)]"; function LoginLoadingFallback() { const t = useTranslation("pages.login"); diff --git a/app/(app)/profile/_components/ProfilePage.view.tsx b/app/(app)/profile/_components/ProfilePage.view.tsx index 7f1db4e..925c38f 100644 --- a/app/(app)/profile/_components/ProfilePage.view.tsx +++ b/app/(app)/profile/_components/ProfilePage.view.tsx @@ -510,7 +510,8 @@ export function ProfilePageView({ {displayValue} diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx b/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx index 35c0201..5bf15e3 100644 --- a/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx +++ b/app/components/controls/IncrementerBlock/IncrementerBlock.container.tsx @@ -17,8 +17,11 @@ const IncrementerBlockContainer = ({ labelSize = "s", palette = "default", blockClassName = "", + state = "default", + disabled, ...incrementerProps }: IncrementerBlockProps) => { + const isDisabled = state === "disabled" || Boolean(disabled); return ( ); diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts b/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts index 8742ff2..d7c7997 100644 --- a/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts +++ b/app/components/controls/IncrementerBlock/IncrementerBlock.types.ts @@ -1,3 +1,4 @@ +import type { IncrementerBlockStateValue } from "../../../../lib/propNormalization"; import type { IncrementerProps } from "../Incrementer/Incrementer.types"; import type { InputLabelPaletteValue, @@ -5,6 +6,11 @@ import type { } from "../../type/InputLabel/InputLabel.types"; 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: string; /** 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 { + state: IncrementerBlockStateValue; label: string; helpIcon: boolean; helperText: boolean | string | undefined; diff --git a/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx b/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx index 828497e..f3aaeba 100644 --- a/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx +++ b/app/components/controls/IncrementerBlock/IncrementerBlock.view.tsx @@ -13,12 +13,14 @@ function IncrementerBlockView({ labelSize, palette, blockClassName, + state: _state, + disabled, className, ...incrementerProps }: IncrementerBlockViewProps) { return (
- +
); } diff --git a/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx b/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx index 77d5426..3ab9cc1 100644 --- a/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx +++ b/app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx @@ -45,7 +45,7 @@ function InfoMessageBoxView({ return (
diff --git a/app/components/controls/InputWithCounter/InputWithCounter.view.tsx b/app/components/controls/InputWithCounter/InputWithCounter.view.tsx index 3685c68..e42c94c 100644 --- a/app/components/controls/InputWithCounter/InputWithCounter.view.tsx +++ b/app/components/controls/InputWithCounter/InputWithCounter.view.tsx @@ -15,10 +15,10 @@ export function InputWithCounterView({ }: InputWithCounterProps) { const inputId = useId(); return ( -
+
{/* Label with help icon */} {label && ( -
+
diff --git a/app/components/controls/MultiSelect/MultiSelect.view.tsx b/app/components/controls/MultiSelect/MultiSelect.view.tsx index 2eb3448..f691de2 100644 --- a/app/components/controls/MultiSelect/MultiSelect.view.tsx +++ b/app/components/controls/MultiSelect/MultiSelect.view.tsx @@ -31,8 +31,8 @@ function MultiSelectView({ // Size-based spacing const gapClass = isSmall - ? "gap-[var(--measures-spacing-200,8px)]" - : "gap-[var(--measures-spacing-300,12px)]"; + ? "gap-[var(--space-200)]" + : "gap-[var(--space-300)]"; const chipSize = size; const selectedCount = options.filter((o) => o.state === "selected").length; @@ -43,7 +43,7 @@ function MultiSelectView({ return (
{/* Label using InputLabel component */} {formHeader && label && ( @@ -133,12 +133,12 @@ function MultiSelectView({ className={ !addButtonText ? // 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) - `${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 - ? "gap-[var(--measures-spacing-100,4px)] px-[var(--measures-spacing-300,12px)] py-[var(--measures-spacing-200,8px)]" - : "gap-[var(--measures-spacing-150,6px)] px-[var(--space-400,16px)] py-[var(--measures-spacing-300,12px)]" + ? "gap-[var(--space-100)] px-[var(--space-300)] py-[var(--space-200)]" + : "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" className={`shrink-0 ${ !addButtonText && isInverse - ? "text-[var(--color-content-inverse-primary,black)]" + ? "text-[var(--color-content-invert-primary,black)]" : "text-[var(--color-content-default-brand-primary,#fefcc9)]" }`} > @@ -165,9 +165,9 @@ function MultiSelectView({ {addButtonText && ( diff --git a/app/components/controls/RadioButton/RadioButton.container.tsx b/app/components/controls/RadioButton/RadioButton.container.tsx index c54bad4..f740ef4 100644 --- a/app/components/controls/RadioButton/RadioButton.container.tsx +++ b/app/components/controls/RadioButton/RadioButton.container.tsx @@ -54,14 +54,14 @@ const RadioButtonContainer = ({ // When checked, border is brand primary (but changes to invert tertiary on focus) const defaultBorder = checked ? "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 const focusBorder = checked ? "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 @@ -83,7 +83,7 @@ const RadioButtonContainer = ({ ? "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; @@ -93,7 +93,7 @@ const RadioButtonContainer = ({ // Label color const labelColor = isInverse - ? "var(--color-content-inverse-primary)" + ? "var(--color-content-invert-primary)" : "var(--color-content-default-primary)"; // Generate unique ID for accessibility if not provided diff --git a/app/components/controls/RadioGroup/RadioGroup.view.tsx b/app/components/controls/RadioGroup/RadioGroup.view.tsx index d9a53cd..125444a 100644 --- a/app/components/controls/RadioGroup/RadioGroup.view.tsx +++ b/app/components/controls/RadioGroup/RadioGroup.view.tsx @@ -43,7 +43,7 @@ export function RadioGroupView({ @@ -52,7 +52,7 @@ export function RadioGroupView({ diff --git a/app/components/controls/SelectInput/SelectDropdown.tsx b/app/components/controls/SelectInput/SelectDropdown.tsx index 2897024..79237d0 100644 --- a/app/components/controls/SelectInput/SelectDropdown.tsx +++ b/app/components/controls/SelectInput/SelectDropdown.tsx @@ -11,9 +11,9 @@ interface SelectDropdownProps extends React.HTMLAttributes { const SelectDropdown = forwardRef( ({ className = "", children, ariaLabel, ...props }, ref) => { const menuClasses = ` - bg-black + bg-[var(--color-surface-default-primary)] border border-[var(--color-border-default-tertiary)] - rounded-[var(--measures-radius-medium)] + rounded-[var(--radius-400)] shadow-lg p-[4px] min-w-[200px] @@ -29,7 +29,6 @@ const SelectDropdown = forwardRef( className={menuClasses} role="listbox" aria-label={ariaLabel} - style={{ backgroundColor: "#000000" }} {...props} > {children} diff --git a/app/components/controls/SelectInput/SelectInput.view.tsx b/app/components/controls/SelectInput/SelectInput.view.tsx index f06b1e9..e257868 100644 --- a/app/components/controls/SelectInput/SelectInput.view.tsx +++ b/app/components/controls/SelectInput/SelectInput.view.tsx @@ -109,7 +109,7 @@ export function SelectInputView({ .replace(/\s+/g, " "); 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) { @@ -118,16 +118,16 @@ export function SelectInputView({ if (state === "focus") { // 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) { // 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) - 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(); @@ -145,8 +145,8 @@ export function SelectInputView({ return (
{label && ( -
-
+
+
@@ -214,7 +214,7 @@ export function SelectInputView({ {state === "focus" && ( {textHint && (
-

+

{hintDefault}

diff --git a/app/components/controls/SelectOption/SelectOption.container.tsx b/app/components/controls/SelectOption/SelectOption.container.tsx index 49571c9..05d0a9b 100644 --- a/app/components/controls/SelectOption/SelectOption.container.tsx +++ b/app/components/controls/SelectOption/SelectOption.container.tsx @@ -44,13 +44,13 @@ const SelectOptionContainer = forwardRef( transition-colors duration-150 ${ selected - ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--measures-radius-small)]" + ? "bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300)]" : "" } ${ disabled ? "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} ` diff --git a/app/components/controls/Switch/Switch.container.tsx b/app/components/controls/Switch/Switch.container.tsx index 9a6be27..1f1a392 100644 --- a/app/components/controls/Switch/Switch.container.tsx +++ b/app/components/controls/Switch/Switch.container.tsx @@ -69,7 +69,7 @@ const SwitchContainer = memo( // Switch track styles based on propSwitch state const getTrackStyles = useCallback(() => { return propSwitch - ? "bg-[var(--color-surface-inverse-tertiary)]" + ? "bg-[var(--color-surface-invert-tertiary)]" : "bg-[var(--color-surface-default-tertiary)]"; }, [propSwitch]); @@ -81,7 +81,7 @@ const SwitchContainer = memo( // Focus styles const getFocusStyles = useCallback(() => { if (state === "focus") { - return "shadow-[0_0_5px_3px_#3281F8] rounded-full"; + return "shadow-[var(--shadow-focus-default)] rounded-full"; } return ""; }, [state]); @@ -98,7 +98,7 @@ const SwitchContainer = memo( transition-all duration-200 focus:outline-none - focus-visible:shadow-[0_0_5px_3px_#3281F8] + focus-visible:shadow-[var(--shadow-focus-default)] focus-visible:rounded-full ${focusStyles} ${className} @@ -123,9 +123,9 @@ const SwitchContainer = memo( const thumbClasses = ` ${thumbStyles} - w-[var(--measures-sizing-020)] - h-[var(--measures-sizing-020)] - rounded-[var(--measures-radius-xlarge)] + w-[var(--space-500)] + h-[var(--space-500)] + rounded-[var(--radius-500)] transition-all duration-200 shadow-sm @@ -134,7 +134,7 @@ const SwitchContainer = memo( .replace(/\s+/g, " "); const labelClasses = ` - ml-[var(--measures-spacing-008)] + ml-[var(--space-200)] text-small-paragraph text-[var(--color-content-default-primary)] ` diff --git a/app/components/controls/TextArea/TextArea.container.tsx b/app/components/controls/TextArea/TextArea.container.tsx index f363456..ea284df 100644 --- a/app/components/controls/TextArea/TextArea.container.tsx +++ b/app/components/controls/TextArea/TextArea.container.tsx @@ -61,7 +61,7 @@ const TextAreaContainer = forwardRef( : "h-[60px] px-[12px] py-[8px] text-xx-small-paragraph", label: "text-x-small-label", container: "gap-[4px]", - radius: "var(--measures-radius-xsmall)", + radius: "var(--radius-200)", }, medium: { textarea: @@ -70,13 +70,13 @@ const TextAreaContainer = forwardRef( : "h-[100px] px-[12px] py-[8px] text-small-paragraph", label: "text-small-label", container: "gap-[8px]", - radius: "var(--measures-radius-xsmall)", + radius: "var(--radius-200)", }, large: { textarea: "h-[150px] px-[12px] py-[8px] text-medium-paragraph", label: "text-medium-label", container: "gap-[12px]", - radius: "var(--measures-radius-small)", + radius: "var(--radius-300)", }, }; @@ -90,13 +90,13 @@ const TextAreaContainer = forwardRef( if (disabled) { return { 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)]", }; } return { 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)]", }; } @@ -111,7 +111,7 @@ const TextAreaContainer = forwardRef( } return { 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)]", }; } @@ -119,7 +119,7 @@ const TextAreaContainer = forwardRef( if (disabled) { return { 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)]", }; } @@ -136,25 +136,25 @@ const TextAreaContainer = forwardRef( case "active": return { 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)]", }; case "hover": return { 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)]", }; case "focus": return { 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)]", }; default: return { 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)]", }; } @@ -176,7 +176,7 @@ const TextAreaContainer = forwardRef( const textareaClasses = ` 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} ${stateStyles.textarea} ${className} diff --git a/app/components/controls/TextArea/TextArea.view.tsx b/app/components/controls/TextArea/TextArea.view.tsx index 49ae97e..aa7d07a 100644 --- a/app/components/controls/TextArea/TextArea.view.tsx +++ b/app/components/controls/TextArea/TextArea.view.tsx @@ -31,15 +31,15 @@ export const TextAreaView = forwardRef( size: _size, labelVariant: _labelVariant, state: _state, - error: _error, + error = false, ...props }, ref, ) => { const labelEl = label ? ( formHeader ? ( -
-
+
+
{textHint ? (
-

+

{typeof textHint === "string" ? textHint : hintDefault}

diff --git a/app/components/controls/TextInput/TextInput.container.tsx b/app/components/controls/TextInput/TextInput.container.tsx index 3be6e29..57d87ca 100644 --- a/app/components/controls/TextInput/TextInput.container.tsx +++ b/app/components/controls/TextInput/TextInput.container.tsx @@ -83,13 +83,13 @@ const TextInputContainer = forwardRef( "h-[32px] px-[10px] py-[6px] text-[16px] md:text-[14px]", label: "text-[12px] leading-[16px] font-medium", container: "gap-[6px]", - radius: "var(--measures-radius-200,8px)", + radius: "var(--radius-200)", } : { input: "h-[40px] px-[12px] py-[8px] text-[16px]", label: "text-[14px] leading-[20px] font-medium", container: "gap-[8px]", - radius: "var(--measures-radius-200,8px)", + radius: "var(--radius-200)", }; // State styles based on Figma designs @@ -102,7 +102,7 @@ const TextInputContainer = forwardRef( if (disabled) { return { 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)]", inputWrapper: "relative", focusRing: "", @@ -127,7 +127,7 @@ const TextInputContainer = forwardRef( ? "font-medium leading-[20px]" : "font-normal leading-[24px]"; 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)]", inputWrapper: "relative", focusRing: "", @@ -138,11 +138,11 @@ const TextInputContainer = forwardRef( ? "font-medium leading-[20px]" : "font-normal leading-[24px]"; 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)]", inputWrapper: "relative", 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: { @@ -151,7 +151,7 @@ const TextInputContainer = forwardRef( : "font-normal leading-[24px]"; // Default state uses primary border (matches Figma - border color same as background, so border is subtle) 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)]", inputWrapper: "relative", focusRing: "", diff --git a/app/components/controls/TextInput/TextInput.view.tsx b/app/components/controls/TextInput/TextInput.view.tsx index b1f002a..7415786 100644 --- a/app/components/controls/TextInput/TextInput.view.tsx +++ b/app/components/controls/TextInput/TextInput.view.tsx @@ -43,8 +43,8 @@ export const TextInputView = forwardRef( ) => { const labelEl = label ? ( formHeader ? ( -
-
+
+
{textHint && (
-

+

{typeof textHint === "string" ? textHint : hintDefault}

diff --git a/app/components/controls/Toggle/Toggle.container.tsx b/app/components/controls/Toggle/Toggle.container.tsx index 8daef15..91e0b60 100644 --- a/app/components/controls/Toggle/Toggle.container.tsx +++ b/app/components/controls/Toggle/Toggle.container.tsx @@ -33,7 +33,7 @@ const ToggleContainer = forwardRef( // Size styles - single size with specific dimensions 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]", }; @@ -61,7 +61,7 @@ const ToggleContainer = forwardRef( case "focus": return { 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)]", }; default: @@ -82,7 +82,7 @@ const ToggleContainer = forwardRef( case "focus": return { 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)]", }; default: @@ -112,7 +112,7 @@ const ToggleContainer = forwardRef( transition-all duration-200 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)]" : ""} flex items-center diff --git a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx index 625d921..7a46d66 100644 --- a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx +++ b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx @@ -34,13 +34,13 @@ const ToggleGroupContainer = memo( const getPositionStyles = useCallback((pos: string): string => { switch (pos) { case "left": - return "rounded-l-[var(--measures-radius-medium)] rounded-r-none"; + return "rounded-l-[var(--radius-400)] rounded-r-none"; case "middle": return "rounded-none"; case "right": - return "rounded-r-[var(--measures-radius-medium)] rounded-l-none"; + return "rounded-r-[var(--radius-400)] rounded-l-none"; default: - return "rounded-[var(--measures-radius-medium)]"; + return "rounded-[var(--radius-400)]"; } }, []); @@ -50,7 +50,7 @@ const ToggleGroupContainer = memo( case "hover": return "bg-[var(--color-magenta-magenta100)] text-[var(--color-content-default-primary)]"; 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": 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": @@ -104,9 +104,9 @@ const ToggleGroupContainer = memo( const toggleClasses = ` ${positionStyles} ${stateStyles} - py-[var(--measures-spacing-008)] - px-[var(--measures-spacing-008)] - gap-[var(--measures-spacing-008)] + py-[var(--space-200)] + px-[var(--space-200)] + gap-[var(--space-200)] font-medium text-[12px] leading-[12px] @@ -114,7 +114,7 @@ const ToggleGroupContainer = memo( transition-all duration-200 focus:outline-none - focus-visible:shadow-[0_0_5px_1px_#3281F8] + focus-visible:shadow-[var(--shadow-focus-default)] hover:bg-[var(--color-magenta-magenta100)] flex items-center diff --git a/app/components/controls/Upload/Upload.container.tsx b/app/components/controls/Upload/Upload.container.tsx index dbb0f11..029a5a1 100644 --- a/app/components/controls/Upload/Upload.container.tsx +++ b/app/components/controls/Upload/Upload.container.tsx @@ -3,6 +3,7 @@ import { memo } from "react"; import { useTranslation } from "../../../contexts/MessagesContext"; import UploadView from "./Upload.view"; +import type { UploadStateValue } from "../../../../lib/propNormalization"; import type { UploadProps } from "./Upload.types"; /** @@ -12,6 +13,8 @@ import type { UploadProps } from "./Upload.types"; const UploadContainer = memo( ({ active = true, + state, + hasLabel, label, showHelpIcon = true, hintText, @@ -19,10 +22,13 @@ const UploadContainer = memo( className = "", }) => { const t = useTranslation("controlsChrome"); + const resolvedState: UploadStateValue = + state ?? (active ? "default" : "disabled"); return ( {/* Label using InputLabel component */} - {label && ( + {hasLabel && label ? ( - )} + ) : null} {/* Upload container — max width per create-flow spec */} -
+
{/* Upload button */}
{/* Button text */}

{uploadButtonLabel}

@@ -106,7 +117,7 @@ function UploadView({ {/* Description text */}

{hintText}

diff --git a/app/components/layout/Accordion/Accordion.view.tsx b/app/components/layout/Accordion/Accordion.view.tsx index e44cfe4..0985277 100644 --- a/app/components/layout/Accordion/Accordion.view.tsx +++ b/app/components/layout/Accordion/Accordion.view.tsx @@ -11,20 +11,20 @@ const SIZE_CLASSES: Record< > = { s: { 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]", subhead: "text-x-small-label", }, /** Figma: Layout / Accordion — Medium (22135-890258; header gap/px/py + Large/Label 18/24). */ m: { 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", subhead: "text-[14px] leading-[18px] font-medium", }, l: { 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). */ title: "text-x-large-label font-normal leading-7", subhead: "text-large-label", @@ -32,9 +32,9 @@ const SIZE_CLASSES: Record< }; const PANEL_CLASSES: Record = { - s: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-020)] 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)]", - l: "px-[var(--spacing-scale-016)] pb-[var(--spacing-scale-032)] text-[18px] font-normal leading-[26px] 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(--space-400)] pb-[var(--space-600)] text-medium-paragraph 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 { @@ -122,7 +122,7 @@ function AccordionView({ 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)]`} > - + diff --git a/app/components/layout/listSizeLayout.ts b/app/components/layout/listSizeLayout.ts index e3b4123..9643cbc 100644 --- a/app/components/layout/listSizeLayout.ts +++ b/app/components/layout/listSizeLayout.ts @@ -39,7 +39,7 @@ type RowLayout = { export const listEntrySizeLayout: Record = { 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", title: "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 = { rowFigma: FIGMA_LIST_ENTRY_ROW.s, }, 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", title: "min-w-0 flex-1 text-large-label text-[var(--color-content-default-primary)]", @@ -57,9 +57,9 @@ export const listEntrySizeLayout: Record = { rowFigma: FIGMA_LIST_ENTRY_ROW.m, }, 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: - "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: "min-w-0 flex-1 text-x-large-label text-[var(--color-content-default-primary)]", description: diff --git a/app/components/modals/Alert/Alert.container.tsx b/app/components/modals/Alert/Alert.container.tsx index 91e7cd0..edae058 100644 --- a/app/components/modals/Alert/Alert.container.tsx +++ b/app/components/modals/Alert/Alert.container.tsx @@ -23,14 +23,14 @@ function layoutFor( size === "s" ? "px-[var(--space-500)]" : "px-[var(--space-1200)]"; - const containerClasses = `flex gap-[var(--space-300)] items-center ${padH} pb-[var(--space-500)] pt-[var(--space-400)] rounded-tl-[var(--radius-200,8px)] rounded-tr-[var(--radius-200,8px)] border-solid`; + const containerClasses = `flex gap-[var(--space-300)] items-center ${padH} pb-[var(--space-500)] pt-[var(--space-400)] rounded-tl-[var(--radius-200)] rounded-tr-[var(--radius-200)] border-solid`; if (size === "s") { return { containerClasses, titleClasses: "text-[14px] leading-[18px] font-medium tracking-[0%]", descriptionClasses: - "text-small-paragraph mt-[var(--spacing-scale-004)]", + "text-small-paragraph mt-[var(--space-100)]", }; } return { @@ -38,27 +38,27 @@ function layoutFor( titleClasses: "text-large-label", descriptionClasses: - "text-large-paragraph mt-[var(--spacing-scale-004)]", + "text-large-paragraph mt-[var(--space-100)]", }; } if (size === "s") { return { containerClasses: - "flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200,8px)] border-solid", + "flex gap-[var(--space-300)] items-center p-[var(--space-300)] rounded-[var(--radius-200)] border-solid", titleClasses: "text-[14px] leading-[18px] font-medium tracking-[0%]", descriptionClasses: - "text-small-paragraph mt-[var(--spacing-scale-004)]", + "text-small-paragraph mt-[var(--space-100)]", }; } return { containerClasses: - "flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200,8px)] border-solid", + "flex gap-[var(--space-300)] items-center px-[var(--space-600)] py-[var(--space-400)] rounded-[var(--radius-200)] border-solid", titleClasses: "text-medium-label", descriptionClasses: - "text-medium-paragraph mt-[var(--spacing-scale-004)]", + "text-medium-paragraph mt-[var(--space-100)]", }; } diff --git a/app/components/modals/Alert/Alert.view.tsx b/app/components/modals/Alert/Alert.view.tsx index 41d0c63..8a1a6c0 100644 --- a/app/components/modals/Alert/Alert.view.tsx +++ b/app/components/modals/Alert/Alert.view.tsx @@ -81,7 +81,7 @@ export function AlertView({ width="20" height="20" > - + ) : null} -
+
{children}
diff --git a/app/components/modals/Create/CreateModalFrame.view.tsx b/app/components/modals/Create/CreateModalFrame.view.tsx index 77bf386..c18e0b2 100644 --- a/app/components/modals/Create/CreateModalFrame.view.tsx +++ b/app/components/modals/Create/CreateModalFrame.view.tsx @@ -9,7 +9,7 @@ export type CreateModalBackdropVariant = "default" | "blurredYellow"; const backdropOverlayClasses: Record = { default: "fixed inset-0 bg-black/50 z-[9998]", blurredYellow: - "fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75", + "fixed inset-0 z-[9998] bg-[var(--color-surface-invert-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-invert-brand-primary)]/75", }; export type CreateModalFrameViewProps = { @@ -56,7 +56,7 @@ export function CreateModalFrameView({ aria-modal="true" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} - className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500,20px)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`} + className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`} onClick={(e) => e.stopPropagation()} > {children} diff --git a/app/components/modals/Dialog/Dialog.view.tsx b/app/components/modals/Dialog/Dialog.view.tsx index 218060b..79900af 100644 --- a/app/components/modals/Dialog/Dialog.view.tsx +++ b/app/components/modals/Dialog/Dialog.view.tsx @@ -46,7 +46,7 @@ export const DialogView = memo(function DialogView({
{children ? ( -
+
{children}
) : null} diff --git a/app/components/modals/Login/Login.view.tsx b/app/components/modals/Login/Login.view.tsx index 39240a8..281cdcf 100644 --- a/app/components/modals/Login/Login.view.tsx +++ b/app/components/modals/Login/Login.view.tsx @@ -5,9 +5,9 @@ import ModalHeader from "../ModalHeader"; import type { LoginBackdropVariant, LoginViewProps } from "./Login.types"; const backdropClasses: Record = { - solid: "bg-[var(--color-surface-inverse-brand-primary)]", + solid: "bg-[var(--color-surface-invert-brand-primary)]", blurredYellow: - "bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75", + "bg-[var(--color-surface-invert-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-invert-brand-primary)]/75", }; export function LoginView({ @@ -43,7 +43,7 @@ export function LoginView({ aria-modal="true" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} - className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500,20px)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`} + className={`flex min-h-0 max-h-[90vh] w-full max-w-[560px] shrink-0 flex-col overflow-hidden rounded-[var(--radius-500)] bg-[var(--color-surface-default-primary)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] z-[9999] ${className}`} onClick={(e) => e.stopPropagation()} > diff --git a/app/components/modals/Login/LoginForm.tsx b/app/components/modals/Login/LoginForm.tsx index 795aa3e..2699de3 100644 --- a/app/components/modals/Login/LoginForm.tsx +++ b/app/components/modals/Login/LoginForm.tsx @@ -183,7 +183,7 @@ export default function LoginForm({ return (
-
+
{t("sendMagicLink")} @@ -284,7 +284,7 @@ export default function LoginForm({ palette="default" disabled={submitting} onClick={onDismiss} - className="w-full !justify-center text-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-012)]" + className="w-full !justify-center text-center px-[var(--space-400)] py-[var(--space-300)]" > {t("continueWithoutSaving")} diff --git a/app/components/modals/ModalFooter/ModalFooter.view.tsx b/app/components/modals/ModalFooter/ModalFooter.view.tsx index b71781a..cd8a21a 100644 --- a/app/components/modals/ModalFooter/ModalFooter.view.tsx +++ b/app/components/modals/ModalFooter/ModalFooter.view.tsx @@ -29,12 +29,13 @@ export function ModalFooterView({ return (
{showRemoveButton && (
diff --git a/app/components/modals/Tooltip/Tooltip.container.tsx b/app/components/modals/Tooltip/Tooltip.container.tsx index 9b17351..2a767cb 100644 --- a/app/components/modals/Tooltip/Tooltip.container.tsx +++ b/app/components/modals/Tooltip/Tooltip.container.tsx @@ -23,7 +23,7 @@ const TooltipContainer = memo( return <>{children}; } - const tooltipClasses = `absolute z-50 bg-[var(--color-surface-default-primary)] px-[var(--space-300)] py-[var(--space-200)] rounded-[var(--radius-300,12px)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex items-center whitespace-nowrap ${ + const tooltipClasses = `absolute z-50 bg-[var(--color-surface-default-primary)] px-[var(--space-300)] py-[var(--space-200)] rounded-[var(--radius-300)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] flex items-center whitespace-nowrap ${ position === "top" ? "bottom-full mb-[7px]" : "top-full mt-[7px]" } left-1/2 -translate-x-1/2 ${isVisible ? "opacity-100 visible" : "opacity-0 invisible pointer-events-none"} transition-all duration-200`; diff --git a/app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx b/app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx index 83f4d33..307b367 100644 --- a/app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx +++ b/app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx @@ -28,7 +28,7 @@ export function CreateFlowFooterView({
{progressBar && ( -
+
)} -
+
{exportMenuOpen ? ( -
+