diff --git a/src/components/global/DocDemo/index.js b/src/components/global/DocDemo/index.js
index b7611be1910..61740542956 100644
--- a/src/components/global/DocDemo/index.js
+++ b/src/components/global/DocDemo/index.js
@@ -79,7 +79,7 @@ const DocDemo = (props) => {
         <svg className="docs-demo-device__ios-notch" viewBox="0 0 219 31">
           <path
             d="M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z"
-            fill-rule="evenodd"
+            fillRule="evenodd"
           />
         </svg>
         <iframe
diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index bdd98a43e0c..8ff4415b3d1 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -44,7 +44,7 @@ export default function ColorAccordion({ ...props }) {
             })}
             style={
               {
-                'background-color': `var(--ion-color-${color})`,
+                'backgroundColor': `var(--ion-color-${color})`,
                 color: `var(--ion-color-${color}-contrast)`,
               } as any
             }
@@ -58,17 +58,17 @@ export default function ColorAccordion({ ...props }) {
               <g
                 id="Welcome"
                 stroke="none"
-                stroke-width="1"
+                strokeWidth="1"
                 fill="none"
-                fill-rule="evenodd"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                fillRule="evenodd"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
                 <g
                   id="Desktop-HD"
                   transform="translate(-1025.000000, -335.000000)"
                   stroke="currentColor"
-                  stroke-width="2"
+                  strokeWidth="2"
                 >
                   <polyline
                     id="arrow"
@@ -84,7 +84,7 @@ export default function ColorAccordion({ ...props }) {
                 className={styles.colorSubmenuItem}
                 style={
                   {
-                    'background-color': `var(--ion-color-${color}-shade)`,
+                    'backgroundColor': `var(--ion-color-${color}-shade)`,
                     color: `var(--ion-color-${color}-contrast)`,
                   } as any
                 }
@@ -98,7 +98,7 @@ export default function ColorAccordion({ ...props }) {
                 className={styles.colorSubmenuItem}
                 style={
                   {
-                    'background-color': `var(--ion-color-${color}-tint)`,
+                    'backgroundColor': `var(--ion-color-${color}-tint)`,
                     color: `var(--ion-color-${color}-contrast)`,
                   } as any
                 }