diff --git a/packages/canon/.storybook/themes/spotify.css b/packages/canon/.storybook/themes/spotify.css
index 74c7138a21..6fca586a00 100644
--- a/packages/canon/.storybook/themes/spotify.css
+++ b/packages/canon/.storybook/themes/spotify.css
@@ -22,7 +22,7 @@
       format('woff');
 }
 
-[data-theme='dark'][data-theme-name='spotify'] {
+[data-theme-name='spotify'] {
   --canon-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr,
     CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
   --canon-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr,
@@ -30,20 +30,118 @@
   --canon-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr,
     CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva;
 
-  /* Gray scale */
-  --canon-gray-1: #191919;
-  --canon-gray-2: #242424;
-  --canon-gray-3: #373737;
-  --canon-gray-4: #464646;
-  --canon-gray-5: #575757;
-  --canon-gray-6: #7b7b7b;
-  --canon-gray-7: #9e9e9e;
-  --canon-gray-8: #b4b4b4;
+  .canon-Button {
+    border-radius: var(--canon-radius-3);
+    padding-inline: var(--canon-space-3);
+  }
 
-  /* Background Colors */
-  --canon-bg: #000000;
-  --canon-bg-surface-1: #191919;
-  --canon-bg-surface-2: #242424;
+  .canon-ButtonIcon {
+    padding: 0;
+  }
+
+  .canon-MenuTrigger {
+    all: unset;
+    display: inline-flex;
+  }
+
+  .canon-MenuPopup {
+    box-sizing: border-box;
+    max-width: 21.25rem;
+  }
+
+  .canon-MenuSubmenuTrigger,
+  .canon-MenuItem {
+    height: auto;
+    min-height: 2rem;
+  }
+
+  .canon-Text {
+    font-family: var(--canon-font-text);
+  }
+
+  .canon-Heading {
+    font-family: var(--canon-font-title);
+  }
+
+  .canon-TableRow {
+    border: none;
+    border-radius: var(--canon-radius-4);
+  }
+
+  .canon-TableRow:hover td:first-child {
+    border-top-left-radius: var(--canon-radius-2);
+    border-bottom-left-radius: var(--canon-radius-2);
+  }
+
+  .canon-TableRow:hover td:last-child {
+    border-top-right-radius: var(--canon-radius-2);
+    border-bottom-right-radius: var(--canon-radius-2);
+  }
+
+  .canon-TableBody:before,
+  .canon-TableBody:after {
+    line-height: var(--canon-space-1);
+    content: '\200C';
+    display: block;
+  }
+
+  .canon-TableHeader .canon-TableRow {
+    border-bottom: 1px solid var(--canon-border);
+  }
+
+  .canon-TableHead {
+    font-size: var(--canon-font-size-2);
+    color: var(--canon-fg-secondary);
+    font-weight: var(--canon-font-weight-regular);
+  }
+
+  .canon-ScrollAreaRoot {
+    width: 100%;
+    /* TODO: Bring this as a fix in OS */
+    height: unset;
+  }
+
+  .canon-TabsIndicator {
+    background-color: var(--canon-bg-underline);
+  }
+
+  .canon-TabsTab[data-selected] {
+    background: radial-gradient(
+      ellipse at bottom,
+      rgba(209, 110, 203, 0.25) 0%,
+      transparent 95%
+    );
+  }
+}
+
+[data-theme='light'][data-theme-name='spotify'] {
+  --canon-bg: var(--canon-gray-1);
+  --canon-bg-surface-1: var(--canon-white);
+  --canon-bg-surface-2: var(--canon-gray-2);
+  --canon-bg-solid: #1ed760;
+  --canon-bg-solid-hover: #3be477;
+  --canon-bg-solid-pressed: #1abc54;
+  --canon-bg-solid-disabled: var(--canon-gray-2);
+
+  --canon-fg-primary: var(--canon-black);
+  --canon-fg-secondary: var(--canon-gray-7);
+  --canon-fg-solid: var(--canon-black);
+
+  --canon-border: var(--canon-gray-3);
+  --canon-border-hover: rgba(255, 255, 255, 0.4);
+  --canon-border-pressed: rgba(255, 255, 255, 0.5);
+  --canon-border-disabled: rgba(255, 255, 255, 0.2);
+  --canon-border-danger: #f87a7a;
+  --canon-border-warning: #e36d05;
+  --canon-border-success: #53db83;
+
+  --canon-ring: rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'][data-theme-name='spotify'] {
+  --canon-bg: var(--canon-black);
+  --canon-bg-surface-1: var(--canon-gray-1);
+  --canon-bg-surface-2: var(--canon-gray-2);
   --canon-bg-solid: #1ed760;
   --canon-bg-solid-hover: #3be477;
   --canon-bg-solid-pressed: #1abc54;
@@ -57,21 +155,19 @@
   --canon-bg-success: #132d21;
   --canon-bg-underline: #d16ecb;
 
-  /* Foreground Colors */
-  --canon-fg-primary: #ffffff;
-  --canon-fg-secondary: #9e9e9e;
-  --canon-fg-link: #ffffff;
-  --canon-fg-link-hover: #ffffff;
-  --canon-fg-disabled: #575757;
-  --canon-fg-solid: #000000;
+  --canon-fg-primary: var(--canon-white);
+  --canon-fg-secondary: var(--canon-gray-7);
+  --canon-fg-link: var(--canon-white);
+  --canon-fg-link-hover: var(--canon-white);
+  --canon-fg-disabled: var(--canon-gray-5);
+  --canon-fg-solid: var(--canon-black);
   --canon-fg-solid-disabled: #083618;
-  --canon-fg-tint: #ffffff;
-  --canon-fg-tint-disabled: #575757;
+  --canon-fg-tint: var(--canon-white);
+  --canon-fg-tint-disabled: var(--canon-gray-5);
   --canon-fg-danger: #e22b2b;
   --canon-fg-warning: #e36d05;
   --canon-fg-success: #1db954;
 
-  /* Border Colors */
   --canon-border: var(--canon-gray-3);
   --canon-border-hover: rgba(255, 255, 255, 0.4);
   --canon-border-pressed: rgba(255, 255, 255, 0.5);
@@ -80,115 +176,5 @@
   --canon-border-warning: #e36d05;
   --canon-border-success: #53db83;
 
-  /* Ring Colors */
   --canon-ring: rgba(255, 255, 255, 0.2);
 }
-
-#root {
-  padding-top: var(--header-height);
-}
-
-.canon-Button,
-.canon-IconButton {
-  border-radius: var(--canon-radius-3);
-  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out;
-}
-
-.canon-Button--variant-primary,
-.canon-IconButton--variant-primary {
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--canon-bg-solid);
-    background-color: transparent;
-    color: var(--canon-fg-primary);
-  }
-
-  &:active {
-    background-color: rgba(30, 215, 96, 0.1);
-  }
-
-  &:disabled {
-    background-color: var(--canon-bg-solid-disabled);
-    color: var(--canon-fg-solid-disabled);
-    box-shadow: none;
-  }
-}
-
-.canon-Button[data-size='medium'],
-.canon-Button[data-size='small'] {
-  padding-inline: var(--canon-space-3);
-}
-
-.canon-MenuTrigger {
-  all: unset;
-  display: inline-flex;
-}
-
-.canon-MenuPopup {
-  box-sizing: border-box;
-  max-width: 21.25rem;
-}
-
-.canon-MenuSubmenuTrigger,
-.canon-MenuItem {
-  height: auto;
-  min-height: 2rem;
-}
-
-.canon-Text {
-  font-family: var(--canon-font-text);
-}
-
-.canon-Heading {
-  font-family: var(--canon-font-title);
-}
-
-.canon-TableRow {
-  border: none;
-  border-radius: var(--canon-radius-4);
-}
-
-.canon-TableRow:hover td:first-child {
-  border-top-left-radius: var(--canon-radius-2);
-  border-bottom-left-radius: var(--canon-radius-2);
-}
-
-.canon-TableRow:hover td:last-child {
-  border-top-right-radius: var(--canon-radius-2);
-  border-bottom-right-radius: var(--canon-radius-2);
-}
-
-.canon-TableBody:before,
-.canon-TableBody:after {
-  line-height: var(--canon-space-1);
-  content: '\200C';
-  display: block;
-}
-
-.canon-TableHeader .canon-TableRow {
-  border-bottom: 1px solid var(--canon-border);
-}
-
-.canon-TableHead {
-  font-size: var(--canon-font-size-2);
-  color: var(--canon-fg-secondary);
-  font-weight: var(--canon-font-weight-regular);
-}
-
-.canon-ScrollAreaRoot {
-  width: 100%;
-  /* TODO: Bring this as a fix in OS */
-  height: unset;
-}
-
-.canon-TabsIndicator {
-  background-color: var(--canon-bg-underline);
-}
-
-.canon-TabsTab[data-selected] {
-  background: radial-gradient(
-    ellipse at bottom,
-    rgba(209, 110, 203, 0.25) 0%,
-    transparent 95%
-  );
-}