refactor(tokens): replace light and dark with morandi

apps/docs/src/tokens.stories.tsx

@@ -1,5 +1,6 @@
 import {
   colorTokens,
+  defaultTheme,
   defaultMotionAccessibility,
   defaultMotionPack,
   motionTokens,
@@ -194,7 +195,7 @@ function TokensOverview({
               </p>
             </div>
           </div>
-          <div className="grid gap-4 lg:grid-cols-3">
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
             {themeNames.map((themeName) => (
               <ThemeCard key={themeName} themeName={themeName} />
             ))}
@@ -391,7 +392,7 @@ export const Overview: Story = {
   args: {
     motionAccessibility: defaultMotionAccessibility,
     motionPack: defaultMotionPack,
-    theme: "light"
+    theme: defaultTheme
   },
   render: (_args, context) => (
     <TokensOverview