Reduce flickering when switching theme

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/components/Chip/styles.module.css

@@ -9,7 +9,6 @@
   margin-right: 4px;
   background-color: #f0f0f0;
   color: #5d5d5d;
-  transition: background-color 0.2s ease-in-out;
 }
 
 .head {

canon-docs/src/components/CodeBlock/styles.module.css

@@ -6,7 +6,6 @@
   overflow-x: auto;
   font-family: var(--canon-font-monospace);
   background-color: #fff;
-  transition: background-color 0.2s ease-in-out;
   margin-bottom: 1rem;
 }
 

canon-docs/src/components/Sidebar/Sidebar.module.css

@@ -15,7 +15,6 @@
     color: var(--primary);
     background-color: var(--panel);
     border: 1px solid var(--border);
-    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
     overflow: hidden;
   }
 }
@@ -74,10 +73,10 @@
   height: 26px;
   padding: 0 12px;
   border-radius: 4px;
-  transition: background-color 0.2s ease-in-out;
 
   &:hover {
     background-color: var(--surface-1);
+    transition: background-color 0.2s ease-in-out;
   }
 }
 

canon-docs/src/components/Snippet/styles.module.css

@@ -8,7 +8,6 @@
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px var(--border);
   background-color: var(--bg);
-  transition: all 0.2s ease-in-out;
   padding: 1px;
   position: relative;
 }

canon-docs/src/components/Table/styles.module.css

@@ -19,7 +19,6 @@
   text-align: left;
   background-color: var(--panel) !important;
   font-size: 16px;
-  transition: background-color 0.2s ease-in-out;
 
   & p {
     margin: 0 !important;

canon-docs/src/components/Tabs/styles.module.css

@@ -23,5 +23,7 @@
   width: var(--active-tab-width);
   height: 1px;
   background-color: var(--primary);
-  transition: all 0.2s ease-in-out;
+  transition-property: left, width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in-out;
 }

canon-docs/src/components/Toolbar/nav.module.css

@@ -30,9 +30,9 @@
   font-size: var(--canon-font-size-3);
   font-weight: var(--canon-font-weight-bold);
   cursor: pointer;
-  transition: color 0.2s ease-in-out;
 
   &:hover {
+    transition: color 0.2s ease-in-out;
     color: var(--primary);
   }
 
@@ -72,7 +72,7 @@
   height: 1px;
   border-radius: 0.25rem;
   background-color: var(--primary);
-  transition-property: translate, width, background-color;
+  transition-property: translate, width;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
 }

canon-docs/src/components/Toolbar/styles.module.css

@@ -11,7 +11,6 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--canon-space-6);
-  transition: background-color 0.2s ease-in-out;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.025);
   border: 1px solid var(--border);
 }

canon-docs/src/components/Toolbar/theme-name.module.css

@@ -18,7 +18,6 @@
   cursor: pointer;
   user-select: none;
   background-color: var(--surface-1);
-  transition: background-color 0.2s ease-in-out;
 
   &:focus-visible {
     outline: 2px solid var(--color-blue);

canon-docs/src/components/Toolbar/theme.module.css

@@ -2,14 +2,12 @@
   border-radius: 0.375rem;
   width: 100%;
   background-color: var(--surface-1);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .tabsTheme {
   width: 100px;
   border-radius: 0.375rem;
   background-color: var(--surface-1);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
 
 .list {
@@ -77,7 +75,7 @@
   height: 1.5rem;
   border-radius: 0.25rem;
   background-color: var(--panel);
-  transition-property: translate, width, background-color;
+  transition-property: translate, width;
   transition-duration: 200ms;
   transition-timing-function: ease-in-out;
 }

canon-docs/src/css/globals.css

@@ -31,7 +31,6 @@ body {
   background-color: var(--bg);
   color: var(--primary);
   font-family: var(--font-regular);
-  transition: background-color 0.2s ease-in-out;
 }
 
 iframe {