diff --git a/packages/css-theme/src/_elements.scss b/packages/css-theme/src/_elements.scss
index 048eb361e50..91e054a56a0 100644
--- a/packages/css-theme/src/_elements.scss
+++ b/packages/css-theme/src/_elements.scss
@@ -5,3 +5,4 @@
 @import "elements/blockquote";
 @import "elements/figure";
 @import "elements/table";
+@import "elements/button";
diff --git a/packages/css-theme/src/_variables.scss b/packages/css-theme/src/_variables.scss
index c2757dc33d6..c90cf53032b 100644
--- a/packages/css-theme/src/_variables.scss
+++ b/packages/css-theme/src/_variables.scss
@@ -14,6 +14,12 @@ $fc-accentbg-dark: $oc-teal-8;
 $fc-link-light: $oc-blue-6;
 $fc-link-dark: $oc-blue-3;
 
+$fc-info-light: $oc-blue-6;
+$fc-success-light: $oc-green-7;
+$fc-danger-light: $oc-red-6;
+$fc-warning-light: $oc-yellow-6;
+$fc-accent-light: $oc-grape-6;
+
 $fc-draft-fabric-light: $oc-gray-9;
 $fc-draft-lining-light: $oc-lime-7;
 $fc-draft-interfacing-light: $oc-red-7;
diff --git a/packages/css-theme/src/elements/_button.scss b/packages/css-theme/src/elements/_button.scss
new file mode 100644
index 00000000000..b6aeea4c2d4
--- /dev/null
+++ b/packages/css-theme/src/elements/_button.scss
@@ -0,0 +1,60 @@
+.theme-wrapper.dark,
+.theme-wrapper.light {
+  .MuiButton-containedPrimary.info {
+    background-color: $fc-info-light;
+  }
+  .MuiButton-containedPrimary.info:hover {
+    background-color: darken($fc-info-light, 10%);
+  }
+
+  .MuiButton-containedPrimary.success {
+    background-color: $fc-success-light;
+  }
+  .MuiButton-containedPrimary.success:hover {
+    background-color: darken($fc-success-light, 10%);
+  }
+
+  .MuiButton-containedPrimary.warning {
+    background-color: $fc-warning-light;
+  }
+  .MuiButton-containedPrimary.warning:hover {
+    background-color: darken($fc-warning-light, 10%);
+  }
+
+  .MuiButton-containedPrimary.danger {
+    background-color: $fc-danger-light;
+  }
+  .MuiButton-containedPrimary.danger:hover {
+    background-color: darken($fc-danger-light, 10%);
+  }
+
+  .MuiButton-containedPrimary.accent {
+    background-color: $fc-accent-light;
+  }
+  .MuiButton-containedPrimary.accent:hover {
+    background-color: darken($fc-accent-light, 10%);
+  }
+}
+
+.theme-wrapper.light {
+  .MuiButton-containedPrimary {
+    background-color: $fc-bg-dark;
+  }
+  .MuiButton-containedPrimary:hover {
+    background-color: #000;
+  }
+  .MuiButton-contained.Mui-disabled {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+}
+.theme-wrapper.dark {
+  .MuiButton-containedPrimary {
+    background-color: $fc-bg-light;
+  }
+  .MuiButton-containedPrimary:hover {
+    background-color: darken($fc-bg-light, 10%);
+  }
+  .MuiButton-contained.Mui-disabled {
+    background-color: rgba(2550, 255, 255, 0.12);
+  }
+}