Remove backwards compatibility

app/components/buttons/Button.tsx

@@ -1,13 +1,11 @@
 import { memo } from "react";
 import type {
-  VariantValue,
   SizeValue,
   ButtonTypeValue,
   ButtonPaletteValue,
   ButtonStateValue,
 } from "../../../lib/propNormalization";
 import {
-  normalizeVariant,
   normalizeSize,
   normalizeButtonType,
   normalizeButtonPalette,
@@ -15,12 +13,6 @@ import {
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
-  /**
-   * @deprecated Use `type` and `palette` props instead. This prop is maintained for backward compatibility.
-   * Button variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
-  variant?: VariantValue;
   /**
    * Button type (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
@@ -74,7 +66,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 const Button = memo<ButtonProps>(
   ({
     children,
-    variant: variantProp,
     buttonType: typeProp,
     palette: paletteProp,
     size: sizeProp = "xsmall",
@@ -92,51 +83,14 @@ const Button = memo<ButtonProps>(
     ariaLabel,
     ...props
   }) => {
-    // Determine type and palette from either new props or legacy variant prop
-    let buttonType: "filled" | "outline" | "ghost" | "danger";
-    let buttonPalette: "default" | "inverse";
-
-    if (variantProp) {
-      // Backward compatibility: map old variant to new type/palette
-      const variant = normalizeVariant(variantProp);
-      if (variant === "filled") {
-        buttonType = "filled";
-        buttonPalette = "default";
-      } else if (variant === "filled-inverse") {
-        buttonType = "filled";
-        buttonPalette = "inverse";
-      } else if (variant === "outline") {
-        buttonType = "outline";
-        buttonPalette = "default";
-      } else if (variant === "outline-inverse") {
-        buttonType = "outline";
-        buttonPalette = "inverse";
-      } else if (variant === "ghost") {
-        buttonType = "ghost";
-        buttonPalette = "default";
-      } else if (variant === "ghost-inverse") {
-        buttonType = "ghost";
-        buttonPalette = "inverse";
-      } else if (variant === "danger") {
-        buttonType = "danger";
-        buttonPalette = "default";
-      } else {
-        // danger-inverse
-        buttonType = "danger";
-        buttonPalette = "inverse";
-      }
-    } else {
-      // Use new type/palette props
-      buttonType = normalizeButtonType(typeProp, "filled");
-      buttonPalette = normalizeButtonPalette(paletteProp, "default");
-    }
-
-    // Normalize other props
+    // Normalize props
+    const buttonType = normalizeButtonType(typeProp, "filled");
+    const buttonPalette = normalizeButtonPalette(paletteProp, "default");
     const size = normalizeSize(sizeProp);
     // State prop is for Figma alignment - actual state is handled by CSS pseudo-classes
     // We accept it for API alignment but don't use it for styling (CSS handles states)
 
-    // Map type + palette to legacy variant for styling (maintains existing styles)
+    // Map type + palette to variant string for styling (internal use only)
     const getVariantFromTypeAndPalette = (
       type: typeof buttonType,
       palette: typeof buttonPalette,

app/components/cards/RuleCard/RuleCard.view.tsx

@@ -242,7 +242,7 @@ export function RuleCardView({
                   onCustomChipClose={(chipId) => {
                     category.onCustomChipClose?.(category.name, chipId);
                   }}
-                  showAddButton={true}
+                  addButton={true}
                   addButtonText="" // Empty text for icon-only circular button
                   className="w-full"
                 />

app/components/controls/MultiSelect/MultiSelect.container.tsx

@@ -14,8 +14,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     options,
     onChipClick,
     onAddClick,
-    showAddButton: showAddButtonProp,
-    addButton: addButtonProp,
+    addButton: addButtonProp = true,
     addButtonText = "Add organization type",
     formHeader = true,
     onCustomChipConfirm,
@@ -24,8 +23,6 @@ const MultiSelectContainer = memo<MultiSelectProps>(
   }) => {
     const size = normalizeMultiSelectSize(sizeProp);
     const palette = normalizeChipPalette(paletteProp);
-    // Backward compatibility: if addButton is provided, use it; otherwise use showAddButton
-    const showAddButton = addButtonProp !== undefined ? addButtonProp : (showAddButtonProp !== undefined ? showAddButtonProp : true);
 
     return (
       <MultiSelectView
@@ -36,7 +33,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
         options={options}
         onChipClick={onChipClick}
         onAddClick={onAddClick}
-        showAddButton={showAddButton}
+        addButton={addButtonProp}
         addButtonText={addButtonText}
         formHeader={formHeader}
         onCustomChipConfirm={onCustomChipConfirm}

app/components/controls/MultiSelect/MultiSelect.types.ts

@@ -39,10 +39,6 @@ export interface MultiSelectProps {
    * Callback when add button is clicked
    */
   onAddClick?: () => void;
-  /**
-   * Show the add button (backward compatibility - use addButton instead)
-   */
-  showAddButton?: boolean;
   /**
    * Whether to show add button (Figma prop).
    * @default true
@@ -76,7 +72,7 @@ export interface MultiSelectViewProps {
   options: ChipOption[];
   onChipClick?: (chipId: string) => void;
   onAddClick?: () => void;
-  showAddButton: boolean;
+  addButton: boolean;
   addButtonText: string;
   formHeader: boolean;
   onCustomChipConfirm?: (chipId: string, value: string) => void;

app/components/controls/MultiSelect/MultiSelect.view.tsx

@@ -13,7 +13,7 @@ function MultiSelectView({
   options,
   onChipClick,
   onAddClick,
-  showAddButton,
+  addButton,
   addButtonText,
   formHeader = true,
   onCustomChipConfirm,
@@ -75,7 +75,7 @@ function MultiSelectView({
         ))}
 
         {/* Add button - Circular button with border (not ghost) when no text, ghost style when text provided */}
-        {showAddButton && (
+        {addButton && (
           <button
             type="button"
             aria-label={addButtonText || "Add option"}

app/components/controls/SelectInput/SelectInput.container.tsx

@@ -22,7 +22,6 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
   (
     {
       id,
-      label: labelProp,
       labelText,
       showLabel,
       labelVariant: labelVariantProp,
@@ -46,9 +45,8 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     },
     ref,
   ) => {
-    // Handle backward compatibility: if label is string, use it as labelText
-    const actualLabelText = labelText || labelProp;
-    const shouldShowLabel = showLabel !== undefined ? showLabel : (actualLabelText !== undefined);
+    // Determine if label should be shown
+    const shouldShowLabel = showLabel !== undefined ? showLabel : (labelText !== undefined);
     
     // Normalize state - handle "state5" as disabled
     let normalizedState = externalStateProp;
@@ -211,7 +209,7 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
 
     return (
       <SelectInputView
-        label={shouldShowLabel ? actualLabelText : undefined}
+        label={shouldShowLabel ? labelText : undefined}
         placeholder={placeholder}
         state={actualState}
         disabled={disabled}

app/components/controls/SelectInput/SelectInput.types.ts

@@ -13,17 +13,12 @@ export type SelectInputSizeValue = "small" | "medium" | "large" | "Small" | "Med
 export interface SelectInputProps {
   id?: string;
   /**
-   * Label text (backward compatibility - if provided, label is shown).
-   * For Figma alignment, use `labelText` prop instead.
-   */
-  label?: string;
-  /**
-   * Label text (Figma prop - use this for new code).
+   * Label text (Figma prop).
    */
   labelText?: string;
   /**
    * Whether to show label above input (Figma prop).
-   * If `label` or `labelText` is provided, defaults to true.
+   * If `labelText` is provided, defaults to true.
    * @default true
    */
   showLabel?: boolean;

app/components/controls/Switch/Switch.container.tsx

@@ -8,23 +8,16 @@ import { normalizeState } from "../../../../lib/propNormalization";
 const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     const {
-      checked: checkedProp,
-      propSwitch: propSwitchProp,
+      propSwitch = false,
       onChange,
       onFocus,
       onBlur,
       state: stateProp = "default",
-      label: labelProp,
-      text: textProp,
+      text,
       className = "",
       ...rest
     } = props;
     
-    // Backward compatibility: use propSwitch if provided, otherwise use checked
-    const checked = propSwitchProp !== undefined ? propSwitchProp : (checkedProp !== undefined ? checkedProp : false);
-    // Backward compatibility: use text if provided, otherwise use label
-    const label = textProp !== undefined ? textProp : labelProp;
-    
     // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
     const state = normalizeState(stateProp);
 
@@ -69,14 +62,14 @@ const SwitchContainer = memo(
       [onBlur],
     );
 
-    // Switch track styles based on checked state
+    // Switch track styles based on propSwitch state
     const getTrackStyles = useCallback(() => {
-      return checked
+      return propSwitch
         ? "bg-[var(--color-surface-inverse-tertiary)]"
         : "bg-[var(--color-surface-default-tertiary)]";
-    }, [checked]);
+    }, [propSwitch]);
 
-    // Switch thumb styles based on checked state
+    // Switch thumb styles based on propSwitch state
     const getThumbStyles = useCallback(() => {
       return "bg-[var(--color-gray-000)]";
     }, []);
@@ -118,7 +111,7 @@ const SwitchContainer = memo(
       duration-200
       flex
       items-center
-      ${checked ? "justify-end" : "justify-start"}
+      ${propSwitch ? "justify-end" : "justify-start"}
       p-[2px]
     `
       .trim()
@@ -151,9 +144,9 @@ const SwitchContainer = memo(
       <SwitchView
         ref={ref}
         switchId={switchId}
-        checked={checked}
+        propSwitch={propSwitch}
         state={state}
-        label={label}
+        text={text}
         className={className}
         switchClasses={switchClasses}
         trackClasses={trackClasses}

app/components/controls/Switch/Switch.types.ts

@@ -4,10 +4,6 @@ export interface SwitchProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   "onChange"
 > {
-  /**
-   * Whether the switch is checked (backward compatibility - use propSwitch instead).
-   */
-  checked?: boolean;
   /**
    * Whether the switch is checked (Figma prop).
    * @default false
@@ -25,10 +21,6 @@ export interface SwitchProps extends Omit<
    * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue;
-  /**
-   * Label text (backward compatibility - use text instead).
-   */
-  label?: string;
   /**
    * Label text (Figma prop).
    */
@@ -38,9 +30,9 @@ export interface SwitchProps extends Omit<
 
 export interface SwitchViewProps {
   switchId: string;
-  checked: boolean;
+  propSwitch: boolean;
   state: "default" | "hover" | "focus" | "selected";
-  label?: string;
+  text?: string;
   className: string;
   switchClasses: string;
   trackClasses: string;

app/components/controls/Switch/Switch.view.tsx

@@ -5,8 +5,8 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
   (
     {
       switchId,
-      checked,
-      label,
+      propSwitch,
+      text,
       switchClasses,
       trackClasses,
       thumbClasses,
@@ -26,8 +26,8 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
           id={switchId}
           type="button"
           role="switch"
-          aria-checked={checked}
-          aria-label={label || "Toggle switch"}
+          aria-checked={propSwitch}
+          aria-label={text || "Toggle switch"}
           onClick={onClick}
           onKeyDown={onKeyDown}
           onFocus={onFocus}
@@ -39,7 +39,7 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
             <div className={thumbClasses} />
           </div>
         </button>
-        {label && <span className={labelClasses}>{label}</span>}
+        {text && <span className={labelClasses}>{text}</span>}
       </div>
     );
   },

app/components/modals/Alert/Alert.view.tsx

@@ -55,7 +55,8 @@ export function AlertView({
         )}
       </div>
       <Button
-        variant="ghost"
+        buttonType="ghost"
+        palette="default"
         size="large"
         onClick={onClose}
         ariaLabel="Close alert"

app/components/navigation/TopNav/TopNav.container.tsx

@@ -196,13 +196,15 @@ const TopNavContainer = memo<TopNavProps>(
       containerSize: "small" | "medium" | "large" | "xlarge",
       avatarSize: "small" | "medium" | "large" | "xlarge",
     ) => {
-      // Use ghost variant when folderTop is true, standard otherwise
-      const variant = folderTop ? "ghost" : undefined;
+      // Use ghost type when folderTop is true, filled (default) otherwise
+      const buttonType = folderTop ? "ghost" : "filled";
+      const palette = "default";
 
       return (
         <Button
           size={buttonSize}
-          variant={variant}
+          buttonType={buttonType}
+          palette={palette}
           ariaLabel={t("ariaLabels.createNewRule")}
         >
           {renderAvatarGroup(containerSize, avatarSize)}

app/components/sections/AskOrganizer/AskOrganizer.view.tsx

@@ -45,7 +45,8 @@ function AskOrganizerView({
           <Button
             href={buttonHref}
             size="large"
-            variant={variant === "inverse" ? "filled-inverse" : "filled"}
+            buttonType="filled"
+            palette={variant === "inverse" ? "inverse" : "default"}
             className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
             onClick={onContactClick}
             ariaLabel={ariaLabel}

app/components/sections/NumberedCards/NumberedCards.view.tsx

@@ -49,13 +49,13 @@ function NumberedCardsView({
             <div className="text-center sm:text-left lg:text-center">
               {/* Filled button for xsm and sm breakpoints */}
               <div className="block lg:hidden">
-                <Button variant="filled" size="large">
+                <Button buttonType="filled" palette="default" size="large">
                   {t("numberedCards.buttons.createCommunityRule")}
                 </Button>
               </div>
               {/* Outline button for lg and xlg breakpoints */}
               <div className="hidden lg:block">
-                <Button variant="outline" size="large">
+                <Button buttonType="outline" palette="default" size="large">
                   {t("numberedCards.buttons.seeHowItWorks")}
                 </Button>
               </div>

app/components/sections/RuleStack/RuleStack.view.tsx

@@ -157,7 +157,8 @@ export function RuleStackView({
         min-[1024px]:mt-[var(--measures-spacing-1000,40px)]
       ">
         <Button
-          variant="outline"
+          buttonType="outline"
+          palette="default"
           size="large"
         >
           {buttonText}

app/components/type/ContentLockup/ContentLockup.view.tsx

@@ -93,19 +93,19 @@ function ContentLockupView({
         <div className="flex justify-start">
           {/* Small button for xsm and sm breakpoints */}
           <div className="block md:hidden">
-            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="small">
+            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="small">
               {ctaText}
             </Button>
           </div>
           {/* Large button for md and lg breakpoints */}
           <div className="hidden md:block xl:hidden">
-            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="large" className={buttonClassName}>
+            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="large" className={buttonClassName}>
               {ctaText}
             </Button>
           </div>
           {/* XLarge button for xl breakpoint */}
           <div className="hidden xl:block">
-            <Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="xlarge">
+            <Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="xlarge">
               {ctaText}
             </Button>
           </div>

app/components/utility/ModalFooter/ModalFooter.view.tsx

@@ -38,7 +38,7 @@ export function ModalFooterView({
       {/* Back Button - Absolutely positioned bottom left */}
       {showBackButton && (
         <div className="absolute left-[16px] top-[12px]">
-          <Button variant="outline" size="medium" onClick={onBack}>
+          <Button buttonType="outline" palette="default" size="medium" onClick={onBack}>
             {defaultBackText}
           </Button>
         </div>
@@ -55,7 +55,8 @@ export function ModalFooterView({
       {showNextButton && (
         <div className="absolute right-[16px] top-[12px]">
           <Button
-            variant="filled"
+            buttonType="filled"
+            palette="default"
             size="medium"
             onClick={onNext}
             disabled={nextButtonDisabled}