@udixio/mcp 0.3.2

package/dist/bundled/doc-src/pages/themes.astro

@@ -0,0 +1,86 @@
+---
+import { ThemePicker } from '@/components/theme/ThemePicker';
+import { ColorTokens } from '@/components/theme/ColorTokens';
+import { TokenGallery } from '@/components/theme/TokenGallery';
+import Layout from '../layouts/layout.astro';
+import { Button, Card, TextField, Switch, Divider } from '@udixio/ui-react';
+---
+<Layout>
+  <section class="px-8 py-10">
+    <header class="mb-8">
+      <h1 class="text-3xl font-bold mb-3">Themes</h1>
+      <p class="text-base text-on-surface-variant leading-relaxed">
+        Pick a Color. Make it yours. Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon.
+      </p>
+    </header>
+
+    <div class="flex items-start justify-evenly gap-8">
+      <Card variant='filled' className="sticky top-4 p-8  max-w-lg flex-1 bg-surface-container">
+        <h2 class="text-sm font-semibold text-on-surface-variant mb-3">Theme</h2>
+        <ThemePicker client:load />
+      </Card>
+      <!--<div class="sticky top-4 space-y-8">-->
+      <!--  <section>-->
+      <!--    <h2 class="text-lg font-semibold mb-3">Buttons</h2>-->
+      <!--    <div class="flex flex-wrap gap-3">-->
+      <!--      <Button client:load>Primary</Button>-->
+      <!--      <Button client:load variant="tonal">Tonal</Button>-->
+      <!--      <Button client:load variant="outlined">Outlined</Button>-->
+      <!--      <Button client:load variant="text">Text</Button>-->
+      <!--      <Button client:load disabled>Disabled</Button>-->
+      <!--    </div>-->
+      <!--  </section>-->
+
+      <!--  <Divider />-->
+
+      <!--  <section>-->
+      <!--    <h2 class="text-lg font-semibold mb-3">TextFields</h2>-->
+      <!--    <div class="grid sm:grid-cols-2 gap-4">-->
+      <!--      <TextField client:load label="Email" name="email" placeholder="Email"  />-->
+      <!--      <TextField client:load name="password" label="Password" placeholder="Password" type="password" />-->
+      <!--      <div class="flex items-center gap-3">-->
+      <!--        <Switch client:load defaultChecked />-->
+      <!--        <span class="text-sm text-on-surface-variant">Enable notifications</span>-->
+      <!--      </div>-->
+      <!--    </div>-->
+      <!--  </section>-->
+
+      <!--  <Divider />-->
+
+      <!--  <section>-->
+      <!--    <h2 class="text-lg font-semibold mb-3">Cards</h2>-->
+      <!--    <div class="grid md:grid-cols-2 gap-4">-->
+      <!--      <Card>-->
+      <!--        <div class="p-4 space-y-2">-->
+      <!--          <h3 class="font-semibold">Hand-picked Theme</h3>-->
+      <!--          <p class="text-sm text-on-surface-variant">-->
+      <!--            Copy and paste this theme token set to get started quickly.-->
+      <!--          </p>-->
+      <!--          <div class="flex gap-2">-->
+      <!--            <Button client:load size="small">Use theme</Button>-->
+      <!--            <Button client:load size="small" variant="outlined">Copy tokens</Button>-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </Card>-->
+      <!--      <Card>-->
+      <!--        <div class="p-4 space-y-2">-->
+      <!--          <h3 class="font-semibold">Live Preview</h3>-->
+      <!--          <p class="text-sm text-on-surface-variant">Interact with components to see color ramps.</p>-->
+      <!--          <div class="flex gap-2">-->
+      <!--            <Button client:load size="small" variant="text">Secondary</Button>-->
+      <!--            <Button client:load size="small" variant="tonal">Tonal</Button>-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </Card>-->
+      <!--    </div>-->
+      <!--  </section>-->
+      <!--</div>-->
+      <section class=" flex-1 ">
+        <Card variant="filled" className="space-y-4 p-8 bg-surface-container">
+          <h2 class="text-lg font-semibold">Catalog of colors</h2>
+          <TokenGallery client:load />
+        </Card>
+      </section>
+    </div>
+  </section>
+</Layout>

package/dist/bundled/theme.json

@@ -0,0 +1,359 @@
+{
+  "config": {
+    "sourceColor": "#D0BCFE",
+    "contrastLevel": 0,
+    "isDark": false,
+    "variant": "udixio"
+  },
+  "palettes": {
+    "primary": {
+      "hue": 300.0152986005599,
+      "chroma": 36.29533886072321
+    },
+    "secondary": {
+      "hue": 300.0152986005599,
+      "chroma": 25.925242043373725
+    },
+    "tertiary": {
+      "hue": 340.0152986005599,
+      "chroma": 36.29533886072321
+    },
+    "neutral": {
+      "hue": 300.0152986005599,
+      "chroma": 5
+    },
+    "neutralVariant": {
+      "hue": 300.0152986005599,
+      "chroma": 8.5
+    },
+    "error": {
+      "hue": 12,
+      "chroma": 60
+    },
+    "success": {
+      "hue": 139.29847801164726,
+      "chroma": 36.29533886072321
+    }
+  },
+  "colors": {
+    "light": {
+      "surface": {
+        "hex": "#08070b",
+        "tone": 2
+      },
+      "surfaceDim": {
+        "hex": "#07060a",
+        "tone": 1.875
+      },
+      "surfaceBright": {
+        "hex": "#2f2c35",
+        "tone": 18.75
+      },
+      "surfaceContainerLowest": {
+        "hex": "#000000",
+        "tone": 0
+      },
+      "surfaceContainerLow": {
+        "hex": "#0e0d12",
+        "tone": 3.75
+      },
+      "surfaceContainer": {
+        "hex": "#18161c",
+        "tone": 7.5
+      },
+      "surfaceContainerHigh": {
+        "hex": "#1f1d24",
+        "tone": 11.25
+      },
+      "surfaceContainerHighest": {
+        "hex": "#27242d",
+        "tone": 15
+      },
+      "onSurface": {
+        "hex": "#ece5f2",
+        "tone": 91.89255446900523
+      },
+      "onSurfaceVariant": {
+        "hex": "#b2a9bf",
+        "tone": 70.6670973597044
+      },
+      "outline": {
+        "hex": "#7b7488",
+        "tone": 49.975015785795186
+      },
+      "outlineVariant": {
+        "hex": "#4c4659",
+        "tone": 31.11818614883073
+      },
+      "inverseSurface": {
+        "hex": "#fdf7fe",
+        "tone": 98
+      },
+      "inverseOnSurface": {
+        "hex": "#322f34",
+        "tone": 20
+      },
+      "primary": {
+        "hex": "#d0bcfe",
+        "tone": 79.91569507109415
+      },
+      "onPrimary": {
+        "hex": "#47366e",
+        "tone": 27.050206044411844
+      },
+      "primaryContainer": {
+        "hex": "#594982",
+        "tone": 35
+      },
+      "onPrimaryContainer": {
+        "hex": "#eadeff",
+        "tone": 90.25485057913157
+      },
+      "inversePrimary": {
+        "hex": "#665590",
+        "tone": 40.25874552870627
+      },
+      "secondary": {
+        "hex": "#cebfec",
+        "tone": 79.91569507109415
+      },
+      "onSecondary": {
+        "hex": "#453a5e",
+        "tone": 27.050206044411844
+      },
+      "secondaryContainer": {
+        "hex": "#403659",
+        "tone": 25
+      },
+      "onSecondaryContainer": {
+        "hex": "#c7b8e4",
+        "tone": 77.37660027159667
+      },
+      "tertiary": {
+        "hex": "#f5b1e1",
+        "tone": 79.91569507109415
+      },
+      "onTertiary": {
+        "hex": "#612e55",
+        "tone": 27.050206044411844
+      },
+      "tertiaryContainer": {
+        "hex": "#c98ab7",
+        "tone": 65
+      },
+      "onTertiaryContainer": {
+        "hex": "#3b0c33",
+        "tone": 12.257958114295151
+      },
+      "error": {
+        "hex": "#f97386",
+        "tone": 65
+      },
+      "onError": {
+        "hex": "#490013",
+        "tone": 12.257958114295151
+      },
+      "errorContainer": {
+        "hex": "#871c34",
+        "tone": 30
+      },
+      "onErrorContainer": {
+        "hex": "#ff97a3",
+        "tone": 73.66014029004793
+      },
+      "surfaceVariant": {
+        "hex": "#27242d",
+        "tone": 14.858401356924812
+      },
+      "surfaceTint": {
+        "hex": "#d0bcfe",
+        "tone": 79.91569507109415
+      },
+      "background": {
+        "hex": "#08070b",
+        "tone": 2.057199563661161
+      },
+      "onBackground": {
+        "hex": "#ece5f2",
+        "tone": 91.81137421020676
+      },
+      "success": {
+        "hex": "#a8d291",
+        "tone": 79.91569507109415
+      },
+      "onSuccess": {
+        "hex": "#254817",
+        "tone": 27.050206044411844
+      },
+      "successContainer": {
+        "hex": "#204312",
+        "tone": 25
+      },
+      "onSuccessContainer": {
+        "hex": "#a1cb8b",
+        "tone": 77.37660027159667
+      }
+    },
+    "dark": {
+      "surface": {
+        "hex": "#08070b",
+        "tone": 2
+      },
+      "surfaceDim": {
+        "hex": "#07060a",
+        "tone": 1.875
+      },
+      "surfaceBright": {
+        "hex": "#2f2c35",
+        "tone": 18.75
+      },
+      "surfaceContainerLowest": {
+        "hex": "#000000",
+        "tone": 0
+      },
+      "surfaceContainerLow": {
+        "hex": "#0e0d12",
+        "tone": 3.75
+      },
+      "surfaceContainer": {
+        "hex": "#18161c",
+        "tone": 7.5
+      },
+      "surfaceContainerHigh": {
+        "hex": "#1f1d24",
+        "tone": 11.25
+      },
+      "surfaceContainerHighest": {
+        "hex": "#27242d",
+        "tone": 15
+      },
+      "onSurface": {
+        "hex": "#ece5f2",
+        "tone": 91.89255446900523
+      },
+      "onSurfaceVariant": {
+        "hex": "#b2a9bf",
+        "tone": 70.6670973597044
+      },
+      "outline": {
+        "hex": "#7b7488",
+        "tone": 49.975015785795186
+      },
+      "outlineVariant": {
+        "hex": "#4c4659",
+        "tone": 31.11818614883073
+      },
+      "inverseSurface": {
+        "hex": "#fdf7fe",
+        "tone": 98
+      },
+      "inverseOnSurface": {
+        "hex": "#322f34",
+        "tone": 20
+      },
+      "primary": {
+        "hex": "#d0bcfe",
+        "tone": 79.91569507109415
+      },
+      "onPrimary": {
+        "hex": "#47366e",
+        "tone": 27.050206044411844
+      },
+      "primaryContainer": {
+        "hex": "#594982",
+        "tone": 35
+      },
+      "onPrimaryContainer": {
+        "hex": "#eadeff",
+        "tone": 90.25485057913157
+      },
+      "inversePrimary": {
+        "hex": "#665590",
+        "tone": 40.25874552870627
+      },
+      "secondary": {
+        "hex": "#cebfec",
+        "tone": 79.91569507109415
+      },
+      "onSecondary": {
+        "hex": "#453a5e",
+        "tone": 27.050206044411844
+      },
+      "secondaryContainer": {
+        "hex": "#403659",
+        "tone": 25
+      },
+      "onSecondaryContainer": {
+        "hex": "#c7b8e4",
+        "tone": 77.37660027159667
+      },
+      "tertiary": {
+        "hex": "#f5b1e1",
+        "tone": 79.91569507109415
+      },
+      "onTertiary": {
+        "hex": "#612e55",
+        "tone": 27.050206044411844
+      },
+      "tertiaryContainer": {
+        "hex": "#c98ab7",
+        "tone": 65
+      },
+      "onTertiaryContainer": {
+        "hex": "#3b0c33",
+        "tone": 12.257958114295151
+      },
+      "error": {
+        "hex": "#f97386",
+        "tone": 65
+      },
+      "onError": {
+        "hex": "#490013",
+        "tone": 12.257958114295151
+      },
+      "errorContainer": {
+        "hex": "#871c34",
+        "tone": 30
+      },
+      "onErrorContainer": {
+        "hex": "#ff97a3",
+        "tone": 73.66014029004793
+      },
+      "surfaceVariant": {
+        "hex": "#27242d",
+        "tone": 14.858401356924812
+      },
+      "surfaceTint": {
+        "hex": "#d0bcfe",
+        "tone": 79.91569507109415
+      },
+      "background": {
+        "hex": "#08070b",
+        "tone": 2.057199563661161
+      },
+      "onBackground": {
+        "hex": "#ece5f2",
+        "tone": 91.81137421020676
+      },
+      "success": {
+        "hex": "#a8d291",
+        "tone": 79.91569507109415
+      },
+      "onSuccess": {
+        "hex": "#254817",
+        "tone": 27.050206044411844
+      },
+      "successContainer": {
+        "hex": "#204312",
+        "tone": 25
+      },
+      "onSuccessContainer": {
+        "hex": "#a1cb8b",
+        "tone": 77.37660027159667
+      }
+    }
+  },
+  "customPalettes": [
+    "success"
+  ]
+}