@mictonode/widget 0.3.16 → 0.3.18

package/src/App.vue

@@ -1,225 +1,225 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import pingWidget from '../lib/main';
-import { ethToEthermint, ethermintToEth } from '../lib/utils/format';
-
-// const sender = 'evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z';
-// const endpoint = 'https://api-cosmoshub-ia.cosmosia.notional.ventures'// 'https://rest.stargaze-apis.com';
-// const endpoint = 'https://api.uni.junonetwork.io'
-
-interface Config {
-    sender: string,
-    endpoint: string;
-    chainId: string;
-    hdPath: string;
-    chainName: string
-    params: string
-}
-
-// @ts-ignore
-const EVMOS: Config = {
-    sender: 'evmos1ayp22xk4nwc9lhjh6tvdat2j2klnvvk29yx87m',
-    endpoint: 'https://rest.bd.evmos.org:1317',
-    chainId: 'evmos_9001-2',
-    hdPath: "m/44'/60/0'/0/0",
-    chainName: 'evmos',
-    params: JSON.stringify({
-        proposal_id: '1',
-        validator_address: "evmosvaloper1tdss4m3x7jy9mlepm2dwy8820l7uv6m2vx6z88",
-        chain_name: 'evmos',
-        contract: 'add',
-        fees: { amount: '6000000000000000', denom: '', },
-    })
-}
-
-// @ts-ignore
-const JUNO: Config = {
-    sender: 'juno1m8mma95ta2zajqtmfp5c5y3wgeyqzcrcgcnv4a',
-    endpoint: 'https://juno-api.polkachu.com',
-    chainId: 'juno-1',
-    hdPath: "m/44'/118/0'/0/0",
-    chainName: 'juno',
-    params: JSON.stringify({
-        proposal_id: '1',
-        validator_address: "junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2",
-        chain_name: 'juno',
-        contract: 'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
-        fees: {amount: '2000', denom: ''}
-    })
-}
-
-// @ts-ignore
-const NEUTRON: Config = {
-    sender: 'neutron1m8mma95ta2zajqtmfp5c5y3wgeyqzcrc64e4gx',
-    endpoint: 'https://neutron-api.polkachu.com',
-    chainId: 'neutron-1',
-    hdPath: "m/44'/118/0'/0/0",
-    chainName: 'neutron',
-    params: JSON.stringify({
-        chain_name: 'neutron',
-        contract: 'neutron198sxsrjvt2v2lln2ajn82ks76k97mj72mtgl7309jehd0vy8rezs7e6c56',
-        fees: {amount: '2000', denom: ''}
-    })
-}
-
-// @ts-ignore
-const COSMOS: Config = {
-    sender: 'cosmos1jxv0u20scum4trha72c7ltfgfqef6nscj25050',
-    endpoint: 'https://rest.cosmos.directory/cosmoshub',
-    chainId: 'cosmoshub-4',
-    hdPath: "m/44'/118/0'/0/0",
-    chainName: 'cosmos',
-    params: JSON.stringify({
-        proposal_id: '1',
-        validator_address: "cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu",
-        chain_name: 'cosmos',
-        contract: 'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
-        fees: {amount: '6000', denom: ''}
-    })
-}
-
-// @ts-ignore
-const Archway: Config = {
-    sender: 'archway1jtdje5vq42sknl22r4wu9sahryu5wcrd3yd7z8',
-    endpoint: 'https://api.constantine.archway.tech',
-    chainId: 'constantine-3',
-    hdPath: "m/44'/118/0'/0/0",
-    chainName: 'archway',
-    params: JSON.stringify({
-        chain_name: 'archway',
-        contract: 'archway1tc7k4683zqn8krm3vq7ed5jd4l23c2h9kyswc75zpc8aeln6smqsz79j44',
-        fees: {amount: '2000', denom: ''}
-    })
-}
-
-// @ts-ignore
-const btc: Config = {
-    sender: 'bc1qjdyxk9t90jxmeqpdwkn8cd7nj6cu7x3m688xlj',
-    endpoint: 'https://devnet-2-rest.side.one',
-    chainId: 'taproot-1', // side-testnet-1
-    hdPath: "m/44'/118/0'/0/0",
-    chainName: 'S2-testnet-2',
-    params: JSON.stringify({
-        // wallet: ['okex', 'unisat']
-        // proposal_id: '1',
-        // validator_address: "evmosvaloper1tdss4m3x7jy9mlepm2dwy8820l7uv6m2vx6z88",
-        // chain_name: 'evmos',
-        // contract: 'add',
-        // fees: {amount: '6000000000000000', denom: ''}
-    })
-}
-
-
-const conf = ref(JUNO)
-// const conf = ref(btc)
-
-const types = [
-    'send',
-    'delegate',
-    'vote',
-    'redelegate',
-    'unbond',
-    'transfer',
-    'deposit',
-    'withdraw',
-    'withdraw_commission',
-    'wasm_instantiate_contract',
-    'wasm_execute_contract',
-    'wasm_store_code',
-    'wasm_migrate_contract',
-    'wasm_update_admin',
-    'wasm_clear_admin',
-];
-const toOpen = ref('send');
-
-const theme = ref('light');
-const switchTheme = () => {
-    if (theme.value === 'light') {
-        theme.value = 'dark';
-        document.documentElement.classList.add('dark');
-    } else {
-        theme.value = 'light';
-        document.documentElement.classList.remove('dark');
-    }
-    document.documentElement.setAttribute('data-theme', theme.value);
-};
-
-onMounted(() => {
-    document.documentElement.classList.add('light');
-    document.documentElement.setAttribute('data-theme', 'light');
-});
-const walletStateChange = (res: any) => {
-   console.log(res, 'resres');
-};
-
-console.log("0x88BFec573Dd3E4b7d2E6BfD4D0D6B11F843F8aa1")
-console.log(ethToEthermint("0x88BFec573Dd3E4b7d2E6BfD4D0D6B11F843F8aa1", "evmos"))
-console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
-
-</script>
-
-<template>
-    <div class="bg-gray-50 dark:bg-[#1c1f2e]  dark:text-white min-h-[100vh]">
-        Ping Widget Version: {{ pingWidget?.version }}
-
-        <div class="btn dark:bg-[#1f67f5] dark:hover:bg-[#1c1f2e] btn-sm normal-case" @click="switchTheme()">
-            Theme: {{ theme }}
-        </div>
-
-        <div>&nbsp;</div>
-        <ping-connect-wallet
-            :chain-id="conf.chainId"
-            :hd-path="conf.hdPath"
-            @change="walletStateChange"
-        />
-
-        <textarea v-model="conf.params" cols="80" rows="5"></textarea>
-        <div></div>
-
-        <select v-model="toOpen">
-            <option v-for="i in types">{{ i }}</option>
-        </select>
-
-        <br />
-
-        <label :for="toOpen" class="btn dark:bg-[#1f67f5] dark:hover:bg-[#1c1f2e] dark:text-white">{{ toOpen }}</label>
-        <ping-tx-dialog
-            :type="toOpen"
-            :sender="conf.sender"
-            :registry-name="conf.chainName"
-            :endpoint="conf.endpoint"
-            :hd-path="conf.hdPath"
-            :params="conf.params"
-        ></ping-tx-dialog>
-
-        <br />
-        // example:<br />
-        <label for="withdraw" class="btn dark:bg-[#1f67f5] dark:hover:bg-[#1c1f2e] dark:text-white">Withdraw</label>
-        <ping-tx-dialog
-            type="withdraw"
-            :sender="conf.sender"
-            :endpoint="conf.endpoint"
-            :hd-path="conf.hdPath"
-            :params="conf.params"
-        ></ping-tx-dialog>
-
-        <label for="store_code" class="btn dark:bg-[#1f67f5] dark:hover:bg-[#1c1f2e] dark:text-white">Store Code</label>
-        <ping-tx-dialog
-            type="store_code"
-            :sender="conf.sender"
-            :endpoint="conf.endpoint"
-            :registry-name="conf.chainName"
-            :hd-path="conf.hdPath"
-            :params="conf.params"
-        ></ping-tx-dialog>
-
-        <label for="PingTokenConvert" class="btn dark:bg-[#1f67f5] dark:hover:bg-[#1c1f2e] dark:text-white">Token Convert</label>
-        <ping-token-convert
-            :chain-name="conf.chainName"
-            :endpoint="conf.endpoint"
-            hd-path="m/44'/118/0'/0/0"
-        ></ping-token-convert>
-    </div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import pingWidget from '../lib/main';
+import { ethToEthermint, ethermintToEth } from '../lib/utils/format';
+
+// const sender = 'evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z';
+// const endpoint = 'https://api-cosmoshub-ia.cosmosia.notional.ventures'// 'https://rest.stargaze-apis.com';
+// const endpoint = 'https://api.uni.junonetwork.io'
+
+interface Config {
+    sender: string,
+    endpoint: string;
+    chainId: string;
+    hdPath: string;
+    chainName: string
+    params: string
+}
+
+// @ts-ignore
+const EVMOS: Config = {
+    sender: 'evmos1ayp22xk4nwc9lhjh6tvdat2j2klnvvk29yx87m',
+    endpoint: 'https://rest.bd.evmos.org:1317',
+    chainId: 'evmos_9001-2',
+    hdPath: "m/44'/60/0'/0/0",
+    chainName: 'evmos',
+    params: JSON.stringify({
+        proposal_id: '1',
+        validator_address: "evmosvaloper1tdss4m3x7jy9mlepm2dwy8820l7uv6m2vx6z88",
+        chain_name: 'evmos',
+        contract: 'add',
+        fees: { amount: '6000000000000000', denom: '', },
+    })
+}
+
+// @ts-ignore
+const JUNO: Config = {
+    sender: 'juno1m8mma95ta2zajqtmfp5c5y3wgeyqzcrcgcnv4a',
+    endpoint: 'https://juno-api.polkachu.com',
+    chainId: 'juno-1',
+    hdPath: "m/44'/118/0'/0/0",
+    chainName: 'juno',
+    params: JSON.stringify({
+        proposal_id: '1',
+        validator_address: "junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2",
+        chain_name: 'juno',
+        contract: 'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
+        fees: {amount: '2000', denom: ''}
+    })
+}
+
+// @ts-ignore
+const NEUTRON: Config = {
+    sender: 'neutron1m8mma95ta2zajqtmfp5c5y3wgeyqzcrc64e4gx',
+    endpoint: 'https://neutron-api.polkachu.com',
+    chainId: 'neutron-1',
+    hdPath: "m/44'/118/0'/0/0",
+    chainName: 'neutron',
+    params: JSON.stringify({
+        chain_name: 'neutron',
+        contract: 'neutron198sxsrjvt2v2lln2ajn82ks76k97mj72mtgl7309jehd0vy8rezs7e6c56',
+        fees: {amount: '2000', denom: ''}
+    })
+}
+
+// @ts-ignore
+const COSMOS: Config = {
+    sender: 'cosmos1jxv0u20scum4trha72c7ltfgfqef6nscj25050',
+    endpoint: 'https://rest.cosmos.directory/cosmoshub',
+    chainId: 'cosmoshub-4',
+    hdPath: "m/44'/118/0'/0/0",
+    chainName: 'cosmos',
+    params: JSON.stringify({
+        proposal_id: '1',
+        validator_address: "cosmosvaloper1jxv0u20scum4trha72c7ltfgfqef6nsch7q6cu",
+        chain_name: 'cosmos',
+        contract: 'junovaloper1jxv0u20scum4trha72c7ltfgfqef6nscm9pmg2',
+        fees: {amount: '6000', denom: ''}
+    })
+}
+
+// @ts-ignore
+const Archway: Config = {
+    sender: 'archway1jtdje5vq42sknl22r4wu9sahryu5wcrd3yd7z8',
+    endpoint: 'https://api.constantine.archway.tech',
+    chainId: 'constantine-3',
+    hdPath: "m/44'/118/0'/0/0",
+    chainName: 'archway',
+    params: JSON.stringify({
+        chain_name: 'archway',
+        contract: 'archway1tc7k4683zqn8krm3vq7ed5jd4l23c2h9kyswc75zpc8aeln6smqsz79j44',
+        fees: {amount: '2000', denom: ''}
+    })
+}
+
+// @ts-ignore
+const btc: Config = {
+    sender: 'bc1qjdyxk9t90jxmeqpdwkn8cd7nj6cu7x3m688xlj',
+    endpoint: 'https://devnet-2-rest.side.one',
+    chainId: 'taproot-1', // side-testnet-1
+    hdPath: "m/44'/118/0'/0/0",
+    chainName: 'S2-testnet-2',
+    params: JSON.stringify({
+        // wallet: ['okex', 'unisat']
+        // proposal_id: '1',
+        // validator_address: "evmosvaloper1tdss4m3x7jy9mlepm2dwy8820l7uv6m2vx6z88",
+        // chain_name: 'evmos',
+        // contract: 'add',
+        // fees: {amount: '6000000000000000', denom: ''}
+    })
+}
+
+
+const conf = ref(JUNO)
+// const conf = ref(btc)
+
+const types = [
+    'send',
+    'delegate',
+    'vote',
+    'redelegate',
+    'unbond',
+    'transfer',
+    'deposit',
+    'withdraw',
+    'withdraw_commission',
+    'wasm_instantiate_contract',
+    'wasm_execute_contract',
+    'wasm_store_code',
+    'wasm_migrate_contract',
+    'wasm_update_admin',
+    'wasm_clear_admin',
+];
+const toOpen = ref('send');
+
+const theme = ref('light');
+const switchTheme = () => {
+    if (theme.value === 'light') {
+        theme.value = 'dark';
+        document.documentElement.classList.add('dark');
+    } else {
+        theme.value = 'light';
+        document.documentElement.classList.remove('dark');
+    }
+    document.documentElement.setAttribute('data-theme', theme.value);
+};
+
+onMounted(() => {
+    document.documentElement.classList.add('light');
+    document.documentElement.setAttribute('data-theme', 'light');
+});
+const walletStateChange = (res: any) => {
+   console.log(res, 'resres');
+};
+
+console.log("0x88BFec573Dd3E4b7d2E6BfD4D0D6B11F843F8aa1")
+console.log(ethToEthermint("0x88BFec573Dd3E4b7d2E6BfD4D0D6B11F843F8aa1", "evmos"))
+console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
+
+</script>
+
+<template>
+    <div class="bg-gray-50 dark:bg-surface  dark:text-white min-h-[100vh]">
+        Ping Widget Version: {{ pingWidget?.version }}
+
+        <div class="btn btn-primary btn-sm normal-case" @click="switchTheme()">
+            Theme: {{ theme }}
+        </div>
+
+        <div>&nbsp;</div>
+        <ping-connect-wallet
+            :chain-id="conf.chainId"
+            :hd-path="conf.hdPath"
+            @change="walletStateChange"
+        />
+
+        <textarea v-model="conf.params" cols="80" rows="5"></textarea>
+        <div></div>
+
+        <select v-model="toOpen">
+            <option v-for="i in types">{{ i }}</option>
+        </select>
+
+        <br />
+
+        <label :for="toOpen" class="btn btn-primary dark:text-white">{{ toOpen }}</label>
+        <ping-tx-dialog
+            :type="toOpen"
+            :sender="conf.sender"
+            :registry-name="conf.chainName"
+            :endpoint="conf.endpoint"
+            :hd-path="conf.hdPath"
+            :params="conf.params"
+        ></ping-tx-dialog>
+
+        <br />
+        // example:<br />
+        <label for="withdraw" class="btn btn-primary dark:text-white">Withdraw</label>
+        <ping-tx-dialog
+            type="withdraw"
+            :sender="conf.sender"
+            :endpoint="conf.endpoint"
+            :hd-path="conf.hdPath"
+            :params="conf.params"
+        ></ping-tx-dialog>
+
+        <label for="store_code" class="btn btn-primary dark:text-white">Store Code</label>
+        <ping-tx-dialog
+            type="store_code"
+            :sender="conf.sender"
+            :endpoint="conf.endpoint"
+            :registry-name="conf.chainName"
+            :hd-path="conf.hdPath"
+            :params="conf.params"
+        ></ping-tx-dialog>
+
+        <label for="PingTokenConvert" class="btn btn-primary dark:text-white">Token Convert</label>
+        <ping-token-convert
+            :chain-name="conf.chainName"
+            :endpoint="conf.endpoint"
+            hd-path="m/44'/118/0'/0/0"
+        ></ping-token-convert>
+    </div>
+</template>
+
+<style scoped></style>

package/src/main.ts

@@ -1,4 +1,7 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Import MictoNode Design System (aligned with Explorer Phase 7)
+import './styles/design-system.css'
+
+createApp(App).mount('#app')

package/src/styles/design-system.css

@@ -0,0 +1,184 @@
+/**
+ * MictoNode Widget Design System
+ * Aligned with Explorer Design System (Phase 7)
+ *
+ * Theme: "The Data Cathedral" - Premium Blockchain Explorer
+ *
+ * Color Philosophy:
+ * - LCH (Lightness, Chroma, Hue) for perceptual uniformity
+ * - 60-30-10 Rule: 60% neutral, 30% brand, 10% accent
+ * - Protected Palette: #0066ff (primary), #0f1419 (dark base)
+ *
+ * Token Structure:
+ * - Semantic naming (not color names)
+ * - Scale-based variants (50-950)
+ * - LCH values for precise color manipulation
+ */
+
+:root {
+  /* ==========================================================================
+     LCH COLOR TOKENS
+     ========================================================================== */
+
+  /* Primary Scale - Deep Blue (#0066ff base) */
+  --color-primary-50: lch(95% 15% 250deg);
+  --color-primary-100: lch(90% 20% 250deg);
+  --color-primary-200: lch(82% 30% 250deg);
+  --color-primary-300: lch(72% 45% 250deg);
+  --color-primary-400: lch(60% 60% 250deg);
+  --color-primary-500: lch(52% 70% 250deg); /* #0066ff equivalent */
+  --color-primary-600: lch(48% 75% 250deg);
+  --color-primary-700: lch(42% 70% 250deg);
+  --color-primary-800: lch(35% 60% 250deg);
+  --color-primary-900: lch(28% 50% 250deg);
+  --color-primary-950: lch(20% 35% 250deg);
+
+  /* Accent Scale - Teal/Cyan for modern feel */
+  --color-accent-50: lch(96% 10% 190deg);
+  --color-accent-100: lch(92% 15% 190deg);
+  --color-accent-200: lch(85% 25% 190deg);
+  --color-accent-300: lch(78% 40% 190deg);
+  --color-accent-400: lch(70% 55% 190deg);
+  --color-accent-500: lch(65% 65% 190deg);
+  --color-accent-600: lch(60% 70% 190deg);
+  --color-accent-700: lch(52% 65% 190deg);
+  --color-accent-800: lch(45% 55% 190deg);
+  --color-accent-900: lch(38% 45% 190deg);
+  --color-accent-950: lch(28% 30% 190deg);
+
+  /* Neutral Scale - Cool greys for "Data Cathedral" mood */
+  --color-neutral-50: lch(98% 2% 250deg);
+  --color-neutral-100: lch(95% 3% 250deg);
+  --color-neutral-200: lch(90% 4% 250deg);
+  --color-neutral-300: lch(80% 5% 250deg);
+  --color-neutral-400: lch(65% 6% 250deg);
+  --color-neutral-500: lch(50% 8% 250deg);
+  --color-neutral-600: lch(40% 10% 250deg);
+  --color-neutral-700: lch(30% 12% 250deg);
+  --color-neutral-800: lch(20% 10% 250deg);
+  --color-neutral-900: lch(12% 6% 250deg);
+  --color-neutral-950: lch(5% 2.4 256deg); /* Exact #0f1419 */
+
+  /* Semantic Colors */
+  --color-success: lch(65% 55% 145deg); /* #3fb68b equivalent */
+  --color-warning: lch(75% 60% 45deg); /* #f59e0b equivalent */
+  --color-error: lch(60% 65% 25deg); /* #ff5353 equivalent */
+  --color-info: lch(60% 70% 250deg); /* #0066ff equivalent */
+
+  /* ==========================================================================
+     SEMANTIC ALIAS TOKENS
+     Purpose-driven names that resolve to scale tokens above.
+     Use these in components for intent, not color.
+     ========================================================================== */
+
+  /* Text */
+  --color-text-brand: var(--color-primary-500);
+  --color-text-muted: var(--color-neutral-400);
+
+  /* Surface (backgrounds) */
+  --color-surface: var(--color-neutral-50); /* Light mode main bg */
+  --color-surface-raised: var(--color-neutral-100); /* Card/panel bg */
+  --color-surface-overlay: var(--color-neutral-200); /* Modal/dropdown bg */
+
+  /* Borders */
+  --color-border-subtle: var(--color-neutral-200);
+  --color-border-default: var(--color-neutral-300);
+
+  /* Interactive */
+  --color-interactive: var(--color-primary-500);
+  --color-interactive-hover: var(--color-primary-600);
+
+  /* ==========================================================================
+     SPACING TOKENS (8-Point Grid)
+     ========================================================================== */
+  --space-0: 0;
+  --space-1: 0.25rem; /* 4px */
+  --space-2: 0.5rem; /* 8px */
+  --space-3: 0.75rem; /* 12px */
+  --space-4: 1rem; /* 16px */
+  --space-5: 1.25rem; /* 20px */
+  --space-6: 1.5rem; /* 24px */
+  --space-8: 2rem; /* 32px */
+  --space-10: 2.5rem; /* 40px */
+  --space-12: 3rem; /* 48px */
+  --space-16: 4rem; /* 64px */
+  --space-20: 5rem; /* 80px */
+  --space-24: 6rem; /* 96px */
+
+  /* ==========================================================================
+     RADIUS TOKENS
+     ========================================================================== */
+  --radius-none: 0;
+  --radius-sm: 0.25rem; /* 4px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.75rem; /* 12px */
+  --radius-xl: 1rem; /* 16px */
+  --radius-2xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+
+  /* ==========================================================================
+     SHADOW TOKENS (Multi-layer for depth)
+     ========================================================================== */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1);
+  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-glow-primary: 0 0 20px lch(52% 70% 250deg / 0.3);
+  --shadow-glow-accent: 0 0 20px lch(65% 65% 190deg / 0.3);
+
+  /* ==========================================================================
+     Z-INDEX LAYERS
+     ========================================================================== */
+  --z-base: 0;
+  --z-above: 10;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal-backdrop: 400;
+  --z-modal: 500;
+  --z-popover: 600;
+  --z-tooltip: 700;
+
+  /* ==========================================================================
+     TRANSITION TOKENS
+     ========================================================================== */
+  --duration-fast: 150ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Physics-based bounce */
+}
+
+/* Dark Mode Overrides */
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Adjust luminance for dark mode while preserving hue/chroma */
+    --color-primary-500: lch(60% 70% 250deg); /* Brighter for contrast */
+    --color-accent-500: lch(70% 65% 190deg);
+  }
+}
+
+/* Manual dark mode class support */
+html.dark,
+html[data-theme='dark'] {
+  --color-primary-500: lch(60% 70% 250deg);
+  --color-accent-500: lch(70% 65% 190deg);
+
+  /* Semantic alias dark overrides */
+  --color-text-brand: var(--color-primary-400); /* WCAG AA */
+  --color-text-muted: var(--color-neutral-400);
+  --color-surface: var(--color-neutral-950); /* #0f1419 */
+  --color-surface-raised: var(--color-neutral-900); /* Card bg */
+  --color-surface-overlay: var(--color-neutral-800); /* Modal bg */
+  --color-border-subtle: var(--color-neutral-800);
+  --color-border-default: var(--color-neutral-700);
+  --color-interactive: var(--color-primary-500);
+  --color-interactive-hover: var(--color-primary-400);
+}

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />