♻️(react) update Button component props and refactor related components

This commit modifies the Button component to switch the `variant` and
`color` props, ensuring consistency across various components that
utilize the Button. The changes include updates in the Alert, Modal,
Tooltip, and other components to reflect this new prop structure.
Additionally, several test and story files have been adjusted to
accommodate these changes, enhancing the overall component architecture.

packages/react/src/components/Alert/AlertAdditionalExpandable.tsx

@@ -16,8 +16,8 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
 
   const iconButton = (
     <Button
-      variant={props.type}
+      color={props.type}
-      color="tertiary"
+      variant="tertiary"
       size="nano"
       aria-label={
         expanded

packages/react/src/components/Alert/Utils.tsx

@@ -14,7 +14,7 @@ export const AlertWrapper = (props: AlertProps) => {
         props.className,
         {
           "c__alert--hide": props.hide,
-        },
+        }
       )}
     >
       {props.children}
@@ -42,8 +42,8 @@ export const AlertClose = (props: AlertProps) => {
   return (
     props.canClose && (
       <Button
-        variant={props.type}
+        color={props.type}
-        color="tertiary"
+        variant="tertiary"
         size="small"
         icon={<span className="material-icons">close</span>}
         aria-label={t("components.alert.close_aria_label")}
@@ -60,8 +60,8 @@ export const AlertButtons = (props: AlertProps) => {
     <>
       {props.tertiaryLabel && (
         <Button
-          color="tertiary"
+          variant="tertiary"
-          variant={props.type}
+          color={props.type}
           onClick={props.tertiaryOnClick}
           {...props.tertiaryProps}
         >
@@ -70,8 +70,8 @@ export const AlertButtons = (props: AlertProps) => {
       )}
       {props.primaryLabel && (
         <Button
-          variant={props.type}
+          color={props.type}
-          color="secondary"
+          variant="secondary"
           onClick={props.primaryOnClick}
           {...props.primaryProps}
         >

packages/react/src/components/Alert/index.spec.tsx

@@ -17,7 +17,7 @@ describe("<Alert/>", () => {
     render(
       <CunninghamProvider>
         <Alert type={type}>Alert component</Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     const $icon = document.querySelector(".c__alert__icon");
     if (icon) {
@@ -32,7 +32,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} additional="Additional information">
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     expect(screen.getByText("Additional information")).toBeInTheDocument();
   });
@@ -42,7 +42,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} primaryLabel="Primary">
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Primary" });
   });
@@ -52,7 +52,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} tertiaryLabel="Tertiary">
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Tertiary" });
   });
@@ -66,7 +66,7 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Primary" });
     screen.getByRole("button", { name: "Tertiary" });
@@ -78,14 +78,14 @@ describe("<Alert/>", () => {
           type={VariantType.INFO}
           buttons={
             <>
-              <Button color="primary">Primary Custom</Button>
+              <Button variant="primary">Primary Custom</Button>
-              <Button color="secondary">Secondary Custom</Button>
+              <Button variant="secondary">Secondary Custom</Button>
             </>
           }
         >
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     screen.getByRole("button", { name: "Primary Custom" });
     screen.getByRole("button", { name: "Secondary Custom" });
@@ -96,7 +96,7 @@ describe("<Alert/>", () => {
         <Alert type={VariantType.INFO} canClose={true}>
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
 
     screen.getByText("Alert component");
@@ -165,14 +165,14 @@ describe("<Alert/>", () => {
         >
           Alert component
         </Alert>
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
 
     const user = userEvent.setup();
 
     screen.getByText("Alert component");
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
 
     const $expandButton = screen.getByRole("button", { name: "Expand alert" });
@@ -184,7 +184,7 @@ describe("<Alert/>", () => {
     await user.click($shrinkButton);
 
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
   });
   it("can expand the alert controlled", async () => {
@@ -226,7 +226,7 @@ describe("<Alert/>", () => {
 
     screen.getByText("Expanded: false");
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
 
     // Expand from alert.
@@ -246,14 +246,14 @@ describe("<Alert/>", () => {
 
     screen.getByText("Expanded: false");
     expect(
-      screen.queryByText("Additional information"),
+      screen.queryByText("Additional information")
     ).not.toBeInTheDocument();
   });
 
   it("renders with className", async () => {
     render(<Alert className="my-custom-class" />);
     expect(
-      document.querySelector(".c__alert.my-custom-class"),
+      document.querySelector(".c__alert.my-custom-class")
     ).toBeInTheDocument();
   });
 });

packages/react/src/components/Alert/index.stories.tsx

@@ -58,10 +58,10 @@ export const CustomButtons: Story = {
     canClose: true,
     buttons: (
       <div style={{ display: "flex", gap: "0.5rem" }}>
-        <Button variant="brand" color="primary">
+        <Button color="brand" variant="primary">
           Primary
         </Button>
-        <Button variant="brand" color="secondary">
+        <Button color="brand" variant="secondary">
           Secondary
         </Button>
       </div>

packages/react/src/components/Button/index.stories.tsx

@@ -11,10 +11,10 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 type AllButtonsProps = ButtonProps & {
-  variant: ButtonProps["variant"];
+  color: ButtonProps["color"];
 };
 
-const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
+const AllButtons = ({ color = "brand" }: AllButtonsProps) => {
   return (
     <div
       style={{
@@ -33,24 +33,24 @@ const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
           justifyContent: "start",
         }}
       >
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Primary</h4>
+        <h4 className={`clr-content-semantic-${color}-primary`}>Primary</h4>
-        <Button {...Primary.args} variant={variant} />
+        <Button {...Primary.args} color={color} />
-        <Button {...PrimaryDisabled.args} variant={variant} />
+        <Button {...PrimaryDisabled.args} color={color} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Secondary</h4>
+        <h4 className={`clr-content-semantic-${color}-primary`}>Secondary</h4>
-        <Button {...Secondary.args} variant={variant} />
+        <Button {...Secondary.args} color={color} />
-        <Button {...SecondaryDisabled.args} variant={variant} />
+        <Button {...SecondaryDisabled.args} color={color} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Tertiary</h4>
+        <h4 className={`clr-content-semantic-${color}-primary`}>Tertiary</h4>
-        <Button {...BrandTertiary.args} variant={variant} />
+        <Button {...BrandTertiary.args} color={color} />
-        <Button {...TertiaryDisabled.args} variant={variant} />
+        <Button {...TertiaryDisabled.args} color={color} />
       </div>
       <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-        <h4 className={`clr-content-semantic-${variant}-primary`}>Bordered</h4>
+        <h4 className={`clr-content-semantic-${color}-primary`}>Bordered</h4>
-        <Button {...Bordered.args} variant={variant} />
+        <Button {...Bordered.args} color={color} />
-        <Button {...BrandBorderedDisabled.args} variant={variant} />
+        <Button {...BrandBorderedDisabled.args} color={color} />
       </div>
     </div>
   );
@@ -58,44 +58,44 @@ const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
 
 export const AllBrands: Story = {
   render: () => {
-    return <AllButtons variant="brand" />;
+    return <AllButtons color="brand" />;
   },
 };
 
 export const AllNeutrals: Story = {
   render: () => {
-    return <AllButtons variant="neutral" />;
+    return <AllButtons color="neutral" />;
   },
 };
 
 export const AllWarnings: Story = {
   render: () => {
-    return <AllButtons variant="warning" />;
+    return <AllButtons color="warning" />;
   },
 };
 
 export const AllErrors: Story = {
   render: () => {
-    return <AllButtons variant="error" />;
+    return <AllButtons color="error" />;
   },
 };
 
 export const AllSuccesses: Story = {
   render: () => {
-    return <AllButtons variant="success" />;
+    return <AllButtons color="success" />;
   },
 };
 
 export const AllInfos: Story = {
   render: () => {
-    return <AllButtons variant="info" />;
+    return <AllButtons color="info" />;
   },
 };
 
 const Primary: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -103,7 +103,7 @@ const Primary: Story = {
 const PrimaryDisabled: Story = {
   args: {
     children: "Disabled",
-    color: "primary",
+    variant: "primary",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -112,7 +112,7 @@ const PrimaryDisabled: Story = {
 const Secondary: Story = {
   args: {
     children: "Secondary",
-    color: "secondary",
+    variant: "secondary",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -120,7 +120,7 @@ const Secondary: Story = {
 const SecondaryDisabled: Story = {
   args: {
     children: "Disabled",
-    color: "secondary",
+    variant: "secondary",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -129,7 +129,7 @@ const SecondaryDisabled: Story = {
 const BrandTertiary: Story = {
   args: {
     children: "Tertiary",
-    color: "tertiary",
+    variant: "tertiary",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -137,7 +137,7 @@ const BrandTertiary: Story = {
 const TertiaryDisabled: Story = {
   args: {
     children: "Disabled",
-    color: "tertiary",
+    variant: "tertiary",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -146,7 +146,7 @@ const TertiaryDisabled: Story = {
 const Bordered: Story = {
   args: {
     children: "Bordered",
-    color: "bordered",
+    variant: "bordered",
     icon: <span className="material-icons">bolt</span>,
   },
 };
@@ -154,7 +154,7 @@ const Bordered: Story = {
 const BrandBorderedDisabled: Story = {
   args: {
     children: " Disabled",
-    color: "bordered",
+    variant: "bordered",
     disabled: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -163,14 +163,14 @@ const BrandBorderedDisabled: Story = {
 export const Medium: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
   },
 };
 
 export const Small: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     size: "small",
   },
 };
@@ -178,7 +178,7 @@ export const Small: Story = {
 export const Nano: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     size: "nano",
   },
 };
@@ -186,7 +186,7 @@ export const Nano: Story = {
 export const FullWidth: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     fullWidth: true,
   },
 };
@@ -194,7 +194,7 @@ export const FullWidth: Story = {
 export const FullWidthWithIcon: Story = {
   args: {
     children: "Primary",
-    color: "primary",
+    variant: "primary",
     fullWidth: true,
     icon: <span className="material-icons">bolt</span>,
   },
@@ -204,7 +204,7 @@ export const IconLeft: Story = {
   args: {
     children: "Icon",
     icon: <span className="material-icons">bolt</span>,
-    color: "primary",
+    variant: "primary",
   },
 };
 
@@ -213,7 +213,7 @@ export const IconRight: Story = {
     children: "Icon",
     iconPosition: "right",
     icon: <span className="material-icons">bolt</span>,
-    color: "primary",
+    variant: "primary",
   },
 };
 
@@ -221,7 +221,7 @@ export const IconOnly: Story = {
   args: {
     "aria-label": "Button with only an icon",
     icon: <span className="material-icons">bolt</span>,
-    color: "primary",
+    variant: "primary",
   },
 };
 
@@ -229,7 +229,7 @@ export const AsLink: Story = {
   args: {
     children: "Go to fun-mooc.fr",
     icon: <span className="material-icons">link</span>,
-    color: "primary",
+    variant: "primary",
     href: "https://www.fun-mooc.fr/",
     target: "_blank",
     rel: "noopener noreferrer",

packages/react/src/components/Button/index.tsx

@@ -13,7 +13,7 @@ export type ButtonElement = HTMLButtonElement & HTMLAnchorElement;
 export type ButtonProps = Omit<DomProps, "color"> &
   RefAttributes<ButtonElement> & {
     size?: "medium" | "small" | "nano";
-    variant?:
+    color?:
       | "brand"
       | "neutral"
       | "info"
@@ -21,7 +21,7 @@ export type ButtonProps = Omit<DomProps, "color"> &
       | "warning"
       | "error"
       | "success";
-    color?: "primary" | "secondary" | "tertiary" | "bordered";
+    variant?: "primary" | "secondary" | "tertiary" | "bordered";
     icon?: ReactNode;
     iconPosition?: "left" | "right";
     active?: boolean;
@@ -30,10 +30,10 @@ export type ButtonProps = Omit<DomProps, "color"> &
 
 export const Button = ({
   children,
-  color = "primary",
+  variant = "primary",
   size = "medium",
   iconPosition = "left",
-  variant = "brand",
+  color = "brand",
   icon,
   active,
   className,
@@ -43,8 +43,8 @@ export const Button = ({
 }: ButtonProps) => {
   const classes = [
     "c__button",
-    "c__button--" + variant,
+    "c__button--" + color,
-    ["c__button--", variant, "--", color].join(""),
+    ["c__button--", color, "--", variant].join(""),
     "c__button--" + size,
     className,
   ];
@@ -60,7 +60,7 @@ export const Button = ({
   if (fullWidth) {
     classes.push("c__button--full-width");
   }
-  if (["primary-text", "tertiary-text"].includes(color)) {
+  if (["primary-text", "tertiary-text"].includes(variant)) {
     classes.push("c__button--text");
   }
   if (props.href && props.disabled) {
@@ -79,6 +79,6 @@ export const Button = ({
       {!!icon && iconPosition === "left" && iconElement}
       {children}
       {!!icon && iconPosition === "right" && iconElement}
-    </>,
+    </>
   );
 };

packages/react/src/components/DataGrid/index.spec.tsx

@@ -97,7 +97,7 @@ describe("<DataGrid/>", () => {
 
     fetchMock.mockIf(
       "https://example.com/?page=1&sort=lastName&sortOrder=desc",
-      () => deferred.promise,
+      () => deferred.promise
     );
 
     render(<Component />);
@@ -115,8 +115,8 @@ describe("<DataGrid/>", () => {
         JSON.stringify({
           rows: database.slice(0, 10),
           count: database.length,
-        }),
+        })
-      ),
+      )
     );
 
     // Make sure the loader disappears.
@@ -124,8 +124,8 @@ describe("<DataGrid/>", () => {
       expect(
         screen.queryByRole("status", {
           name: "Loading data",
-        }),
+        })
-      ).toBeNull(),
+      ).toBeNull()
     );
 
     // Make sure the rows are rendered.
@@ -154,7 +154,7 @@ describe("<DataGrid/>", () => {
     deferred = new Deferred();
     fetchMock.mockIf(
       "https://example.com/?page=2&sort=lastName&sortOrder=desc",
-      () => deferred.promise,
+      () => deferred.promise
     );
 
     // Go to page 2.
@@ -187,8 +187,8 @@ describe("<DataGrid/>", () => {
         JSON.stringify({
           rows: database.slice(10, 20),
           count: database.length,
-        }),
+        })
-      ),
+      )
     );
 
     // Make sure the loader disappears.
@@ -196,8 +196,8 @@ describe("<DataGrid/>", () => {
       expect(
         screen.queryByRole("status", {
           name: "Loading data",
-        }),
+        })
-      ).toBeNull(),
+      ).toBeNull()
     );
 
     // Make sure the rows are rendered.
@@ -248,7 +248,7 @@ describe("<DataGrid/>", () => {
                 id: "buttonValidator",
                 renderCell: () => (
                   <Button
-                    color="tertiary"
+                    variant="tertiary"
                     size="small"
                     icon={<span className="material-icons">delete</span>}
                   />
@@ -330,15 +330,15 @@ describe("<DataGrid/>", () => {
       expect(tds.length).toBe(3);
       expect(tds[0].textContent).toEqual(row.firstName);
       expect(Array.from(tds[0].classList)).toContain(
-        "c__datagrid__row__cell--highlight",
+        "c__datagrid__row__cell--highlight"
       );
       expect(tds[1].textContent).toEqual(row.lastName);
       expect(Array.from(tds[1].classList)).not.toContain(
-        "c__datagrid__row__cell--highlight",
+        "c__datagrid__row__cell--highlight"
       );
       expect(tds[2].textContent).toEqual(row.email);
       expect(Array.from(tds[2].classList)).toContain(
-        "c__datagrid__row__cell--highlight",
+        "c__datagrid__row__cell--highlight"
       );
     });
   });
@@ -395,10 +395,10 @@ describe("<DataGrid/>", () => {
           rows={[]}
           className="my-custom-class"
         />
-      </CunninghamProvider>,
+      </CunninghamProvider>
     );
     expect(
-      document.querySelector(".c__datagrid.my-custom-class"),
+      document.querySelector(".c__datagrid.my-custom-class")
     ).toBeInTheDocument();
   });
 

packages/react/src/components/DataGrid/index.stories.tsx

@@ -43,7 +43,7 @@ export const EmptyCustomWithButton = () => {
       emptyPlaceholderLabel="This table is empty, create the first object"
       emptyCta={
         <Button
-          color="secondary"
+          variant="secondary"
           icon={<span className="material-icons">add</span>}
         >
           Create object
@@ -114,7 +114,7 @@ export const ClientSideWithoutPagination = () => {
           id: "actions",
           renderCell: () => (
             <Button
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
@@ -198,14 +198,14 @@ export const FullServerSide = () => {
     setTimeout(() => {
       // Set the pagination length.
       pagination.setPagesCount(
-        Math.ceil(sortedDatabase.length / pagination.pageSize),
+        Math.ceil(sortedDatabase.length / pagination.pageSize)
       );
       // Select the rows to display on the current page.
       setRows(
         sortedDatabase.slice(
           (pagination.page - 1) * pagination.pageSize,
-          pagination.page * pagination.pageSize,
+          pagination.page * pagination.pageSize
-        ),
+        )
       );
       setIsLoading(false);
     }, 1000);
@@ -254,8 +254,8 @@ export const FullServerSide = () => {
           id: "actions",
           renderCell: () => (
             <Button
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />
@@ -286,7 +286,7 @@ export const DataListOnly = () => {
           id: "actions",
           renderCell: () => {
             return (
-              <Button size="small" color="secondary">
+              <Button size="small" variant="secondary">
                 Do it
               </Button>
             );
@@ -328,7 +328,7 @@ export const WithColumnWidth = () => {
           size: 50,
           renderCell: () => (
             <Button
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">delete</span>}
             />

packages/react/src/components/Forms/DatePicker/Calendar.tsx

@@ -256,8 +256,8 @@ const CalendarAux = ({
         <div className="c__calendar__wrapper__header">
           <div className="c__calendar__wrapper__header__actions">
             <Button
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_before</span>}
               {...{
@@ -272,8 +272,8 @@ const CalendarAux = ({
             />
             <Button
               className="c__calendar__wrapper__header__actions__dropdown"
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
@@ -285,8 +285,8 @@ const CalendarAux = ({
               )}
             </Button>
             <Button
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_next</span>}
               type="button"
@@ -302,8 +302,8 @@ const CalendarAux = ({
           </div>
           <div className="c__calendar__wrapper__header__actions">
             <Button
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_before</span>}
               onClick={() => state.focusPreviousSection(true)}
@@ -318,8 +318,8 @@ const CalendarAux = ({
             />
             <Button
               className="c__calendar__wrapper__header__actions__dropdown"
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               iconPosition="right"
               icon={<span className="material-icons">arrow_drop_down</span>}
@@ -331,8 +331,8 @@ const CalendarAux = ({
               )}
             </Button>
             <Button
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="small"
               icon={<span className="material-icons">navigate_next</span>}
               onClick={() => state.focusNextSection(true)}

packages/react/src/components/Forms/DatePicker/CalendarCell.tsx

@@ -58,8 +58,8 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
       >
         <Button
           size="small"
-          variant={isSelected ? "brand" : "neutral"}
+          color={isSelected ? "brand" : "neutral"}
-          color={
+          variant={
             (
               isRangeCalendar(state)
                 ? isSelectionStart || isSelectionEnd

packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx

@@ -150,8 +150,8 @@ const DatePickerAux = ({
                     ? "components.forms.date_picker.toggle_button_aria_label_close"
                     : "components.forms.date_picker.toggle_button_aria_label_open"
                 )}
-                variant="neutral"
+                color="neutral"
-                color="tertiary"
+                variant="tertiary"
                 size="small"
                 className="c__date-picker__wrapper__toggle"
                 icon={
@@ -167,8 +167,8 @@ const DatePickerAux = ({
                 "c__date-picker__inner__action--hidden":
                   labelAsPlaceholder || disabled,
               })}
-              variant="neutral"
+              color="neutral"
-              color="tertiary"
+              variant="tertiary"
               size="nano"
               icon={<span className="material-icons">close</span>}
               onClick={onClear}

packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx

@@ -38,8 +38,8 @@ export const FileUploaderMulti = ({
               <div className="c__file-uploader__file__specs">
                 <span>{formatBytes(file.size)}</span>
                 <Button
-                  color="tertiary"
+                  variant="tertiary"
-                  variant="neutral"
+                  color="neutral"
                   size="nano"
                   aria-label={t(
                     "components.forms.file_uploader.delete_file_name",

packages/react/src/components/Forms/Input/InputPassword.tsx

@@ -22,8 +22,8 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
               {showPassword ? "visibility_off" : "visibility"}
             </span>
           }
-          color="tertiary"
+          variant="tertiary"
-          variant="neutral"
+          color="neutral"
           size="small"
           aria-label={t(
             `components.forms.input.password.${showPassword ? "hide" : "show"}_password`

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -138,8 +138,8 @@ export const SelectMonoAux = ({
                   {clearable && !disabled && downshiftReturn.selectedItem && (
                     <>
                       <Button
-                        color="tertiary"
+                        variant="tertiary"
-                        variant="neutral"
+                        color="neutral"
                         size="nano"
                         aria-label={t(
                           "components.forms.select.clear_button_aria_label"
@@ -157,8 +157,8 @@ export const SelectMonoAux = ({
                   )}
 
                   <Button
-                    color="tertiary"
+                    variant="tertiary"
-                    variant="neutral"
+                    color="neutral"
                     size="nano"
                     className="c__select__inner__actions__open"
                     icon={

packages/react/src/components/Forms/Select/multi-common.tsx

@@ -117,8 +117,8 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                     props.selectedItems.length > 0 && (
                       <>
                         <Button
-                          color="tertiary"
+                          variant="tertiary"
-                          variant="neutral"
+                          color="neutral"
                           size="nano"
                           aria-label={t(
                             "components.forms.select.clear_all_button_aria_label"
@@ -135,8 +135,8 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                       </>
                     )}
                   <Button
-                    color="tertiary"
+                    variant="tertiary"
-                    variant="neutral"
+                    color="neutral"
                     size="nano"
                     className="c__select__inner__actions__open"
                     icon={

packages/react/src/components/Forms/Select/multi-selected-items.tsx

@@ -39,8 +39,8 @@ const SelectedItemsChips = ({
         <SelectedOption option={selectedItemForRender} {...props} />
         <Button
           tabIndex={-1}
-          color="tertiary"
+          variant="tertiary"
-          variant="neutral"
+          color="neutral"
           disabled={disabled}
           size="small"
           aria-label={t("components.forms.select.clear_button_aria_label")}

packages/react/src/components/Modal/ConfirmationModal.tsx

@@ -20,7 +20,7 @@ export const ConfirmationModal = ({
       actions={
         <>
           <Button
-            color="secondary"
+            variant="secondary"
             fullWidth={true}
             onClick={() => onDecide(null)}
           >

packages/react/src/components/Modal/DeleteConfirmationModal.tsx

@@ -23,7 +23,7 @@ export const DeleteConfirmationModal = ({
       actions={
         <>
           <Button
-            color="secondary"
+            variant="secondary"
             fullWidth={true}
             onClick={() => onDecide(null)}
           >
@@ -32,7 +32,7 @@ export const DeleteConfirmationModal = ({
           <Button
             fullWidth={true}
             onClick={() => onDecide("delete")}
-            variant="error"
+            color="error"
           >
             {t("components.modals.helpers.delete_confirmation.delete")}
           </Button>

packages/react/src/components/Modal/EdgeCases.stories.tsx

@@ -57,11 +57,11 @@ export const StackedModals = {
             Open Modals
           </Button>
           <Modal
-            leftActions={<Button color="tertiary">Tertiary</Button>}
+            leftActions={<Button variant="tertiary">Tertiary</Button>}
             rightActions={
               <>
-                <Button color="secondary">Secondary</Button>
+                <Button variant="secondary">Secondary</Button>
-                <Button color="primary">Primary</Button>
+                <Button variant="primary">Primary</Button>
               </>
             }
             size={ModalSize.LARGE}
@@ -70,11 +70,11 @@ export const StackedModals = {
             {longLorem.text}
           </Modal>
           <Modal
-            leftActions={<Button color="tertiary">Tertiary</Button>}
+            leftActions={<Button variant="tertiary">Tertiary</Button>}
             rightActions={
               <>
-                <Button color="secondary">Secondary</Button>
+                <Button variant="secondary">Secondary</Button>
-                <Button color="primary">Primary</Button>
+                <Button variant="primary">Primary</Button>
               </>
             }
             size={ModalSize.MEDIUM}
@@ -83,11 +83,11 @@ export const StackedModals = {
             {longLorem.text}
           </Modal>
           <Modal
-            leftActions={<Button color="tertiary">Tertiary</Button>}
+            leftActions={<Button variant="tertiary">Tertiary</Button>}
             rightActions={
               <>
-                <Button color="secondary">Secondary</Button>
+                <Button variant="secondary">Secondary</Button>
-                <Button color="primary">Primary</Button>
+                <Button variant="primary">Primary</Button>
               </>
             }
             size={ModalSize.SMALL}

packages/react/src/components/Modal/index.stories.tsx

@@ -97,7 +97,7 @@ export const PrimaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
     rightActions: (
-      <Button color="primary" fullWidth={true}>
+      <Button variant="primary" fullWidth={true}>
         Primary
       </Button>
     ),
@@ -108,7 +108,7 @@ export const SecondaryButton: Story = {
   args: {
     size: ModalSize.MEDIUM,
     rightActions: (
-      <Button color="secondary" fullWidth={true}>
+      <Button variant="secondary" fullWidth={true}>
         Secondary
       </Button>
     ),
@@ -119,12 +119,12 @@ export const TwoButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
     leftActions: (
-      <Button color="secondary" fullWidth={true}>
+      <Button variant="secondary" fullWidth={true}>
         Secondary
       </Button>
     ),
     rightActions: (
-      <Button color="primary" fullWidth={true}>
+      <Button variant="primary" fullWidth={true}>
         Primary
       </Button>
     ),
@@ -135,16 +135,16 @@ export const ThreeButtons: Story = {
   args: {
     size: ModalSize.MEDIUM,
     leftActions: (
-      <Button color="tertiary" fullWidth={true}>
+      <Button variant="tertiary" fullWidth={true}>
         Tertiary
       </Button>
     ),
     rightActions: (
       <>
-        <Button color="secondary" fullWidth={true}>
+        <Button variant="secondary" fullWidth={true}>
           Secondary
         </Button>
-        <Button color="primary" fullWidth={true}>
+        <Button variant="primary" fullWidth={true}>
           Primary
         </Button>
       </>
@@ -157,8 +157,8 @@ export const CenterButtons: Story = {
     size: ModalSize.MEDIUM,
     actions: (
       <>
-        <Button color="secondary">Secondary</Button>
+        <Button variant="secondary">Secondary</Button>
-        <Button color="primary">Primary</Button>
+        <Button variant="primary">Primary</Button>
       </>
     ),
   },
@@ -179,7 +179,7 @@ export const ExampleApplication: Story = {
         touch.
       </>
     ),
-    rightActions: <Button color="primary">I understand</Button>,
+    rightActions: <Button variant="primary">I understand</Button>,
   },
   parameters: {
     docs: {
@@ -193,11 +193,11 @@ export const ExampleApplication: Story = {
 export const FullWithContent: Story = {
   args: {
     size: ModalSize.FULL,
-    leftActions: <Button color="tertiary">Tertiary</Button>,
+    leftActions: <Button variant="tertiary">Tertiary</Button>,
     rightActions: (
       <>
-        <Button color="secondary">Secondary</Button>
+        <Button variant="secondary">Secondary</Button>
-        <Button color="primary">Primary</Button>
+        <Button variant="primary">Primary</Button>
       </>
     ),
     children: longLorem.text,

packages/react/src/components/Modal/index.tsx

@@ -99,8 +99,8 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
           <div className="c__modal__close">
             <Button
               icon={<span className="material-icons">close</span>}
-              color="tertiary"
+              variant="tertiary"
-              variant="neutral"
+              color="neutral"
               size="small"
               onClick={props.onClose}
             />

packages/react/src/components/Pagination/index.tsx

@@ -106,8 +106,8 @@ export const Pagination = ({
     <div className="c__pagination">
       <div className="c__pagination__list">
         <Button
-          variant="neutral"
+          color="neutral"
-          color="tertiary"
+          variant="tertiary"
           aria-label={t("components.pagination.previous_aria")}
           onClick={onPreviousClick}
           disabled={!canPrevious}
@@ -122,8 +122,8 @@ export const Pagination = ({
             )}
             {_page === page ? (
               <Button
-                variant="neutral"
+                color="neutral"
-                color="bordered"
+                variant="bordered"
                 active={true}
                 aria-label={t("components.pagination.current_page_aria", {
                   page: _page,
@@ -134,8 +134,8 @@ export const Pagination = ({
               </Button>
             ) : (
               <Button
-                variant="neutral"
+                color="neutral"
-                color="tertiary"
+                variant="tertiary"
                 aria-label={t("components.pagination.goto_page_aria", {
                   page: _page,
                 })}
@@ -148,8 +148,8 @@ export const Pagination = ({
           </Fragment>
         ))}
         <Button
-          variant="neutral"
+          color="neutral"
-          color="tertiary"
+          variant="tertiary"
           aria-label={t("components.pagination.next_aria")}
           onClick={onNextClick}
           disabled={!canNext}

packages/react/src/components/Toast/index.spec.tsx

@@ -97,7 +97,7 @@ describe("<Toast />", () => {
         <Button
           onClick={() =>
             toast("Toast content", VariantType.NEUTRAL, {
-              actions: <Button color="tertiary">Tertiary</Button>,
+              actions: <Button variant="tertiary">Tertiary</Button>,
             })
           }
         >

packages/react/src/components/Toast/index.stories.tsx

@@ -78,8 +78,8 @@ export const InfoCustom: Story = {
     type: VariantType.INFO,
     actions: (
       <>
-        <Button color="primary">Primary</Button>
+        <Button variant="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
+        <Button variant="secondary">Secondary</Button>
       </>
     ),
   },

packages/react/src/components/Toast/index.tsx

@@ -45,7 +45,7 @@ export const Toast = (props: ToastProps) => {
 
   const removeAfterAnimation = async () => {
     await Promise.allSettled(
-      container.current!.getAnimations().map((animation) => animation.finished),
+      container.current!.getAnimations().map((animation) => animation.finished)
     );
     props.onDelete?.();
   };
@@ -71,7 +71,7 @@ export const Toast = (props: ToastProps) => {
         {props.primaryLabel && (
           <div className="c__toast__content__buttons">
             <Button
-              color="primary"
+              variant="primary"
               onClick={props.primaryOnClick}
               {...props.primaryProps}
             >

packages/react/src/components/Tooltip/index.spec.tsx

@@ -14,10 +14,10 @@ describe("<Tooltip />", () => {
   it("appear on button hover and then disappear", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     const button = screen.getByRole("button");
@@ -33,10 +33,10 @@ describe("<Tooltip />", () => {
   it("appear on button focus and then disappear", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -51,10 +51,10 @@ describe("<Tooltip />", () => {
   it("sets entering and exiting class", async () => {
     render(
       <Tooltip content="Hi there" closeDelay={0}>
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -102,10 +102,10 @@ describe("<Tooltip />", () => {
         }
         closeDelay={0}
       >
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     const button = screen.getByRole("button");
@@ -128,10 +128,10 @@ describe("<Tooltip />", () => {
         closeDelay={0}
         className="my-custom-class"
       >
-        <Button size="nano" color="tertiary">
+        <Button size="nano" variant="tertiary">
           ⬅️
         </Button>
-      </Tooltip>,
+      </Tooltip>
     );
 
     const button = screen.getByRole("button");

packages/react/src/components/Tooltip/index.stories.tsx

@@ -26,8 +26,8 @@ export const Default = {
       <Button
         size="small"
         icon={<span className="material-icons">info</span>}
-        color="tertiary"
+        variant="tertiary"
-        variant="neutral"
+        color="neutral"
       />
     ),
     content:
@@ -40,22 +40,22 @@ export const Placements = {
     return (
       <div>
         <Tooltip placement="left" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ⬅️
           </Button>
         </Tooltip>
         <Tooltip placement="bottom" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ⬇️
           </Button>
         </Tooltip>
         <Tooltip placement="top" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ⬆️
           </Button>
         </Tooltip>
         <Tooltip placement="right" content="Hi there">
-          <Button size="nano" color="tertiary" variant="neutral">
+          <Button size="nano" variant="tertiary" color="neutral">
             ➡️
           </Button>
         </Tooltip>
@@ -131,8 +131,8 @@ export const WithHtml = {
       <Button
         size="small"
         icon={<span className="material-icons">info</span>}
-        color="tertiary"
+        variant="tertiary"
-        variant="neutral"
+        color="neutral"
       />
     ),
     placement: "right",