@mictonode/widget 0.3.17 → 0.3.19

package/src/App.vue

@@ -159,10 +159,10 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
 </script>
 
 <template>
-    <div class="bg-gray-50 dark:bg-[#0f1419]  dark:text-white min-h-[100vh]">
+    <div class="bg-gray-50 dark:bg-surface  dark:text-white min-h-[100vh]">
         Ping Widget Version: {{ pingWidget?.version }}
 
-        <div class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] btn-sm normal-case" @click="switchTheme()">
+        <div class="btn btn-primary btn-sm normal-case" @click="switchTheme()">
             Theme: {{ theme }}
         </div>
 
@@ -182,7 +182,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
 
         <br />
 
-        <label :for="toOpen" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">{{ toOpen }}</label>
+        <label :for="toOpen" class="btn btn-primary dark:text-white">{{ toOpen }}</label>
         <ping-tx-dialog
             :type="toOpen"
             :sender="conf.sender"
@@ -194,7 +194,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
 
         <br />
         // example:<br />
-        <label for="withdraw" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">Withdraw</label>
+        <label for="withdraw" class="btn btn-primary dark:text-white">Withdraw</label>
         <ping-tx-dialog
             type="withdraw"
             :sender="conf.sender"
@@ -203,7 +203,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
             :params="conf.params"
         ></ping-tx-dialog>
 
-        <label for="store_code" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">Store Code</label>
+        <label for="store_code" class="btn btn-primary dark:text-white">Store Code</label>
         <ping-tx-dialog
             type="store_code"
             :sender="conf.sender"
@@ -213,7 +213,7 @@ console.log(ethermintToEth("evmos13zl7c4ea60jt05hxhl2dp443r7zrlz4plc5m8z"))
             :params="conf.params"
         ></ping-tx-dialog>
 
-        <label for="PingTokenConvert" class="btn dark:bg-[#0066ff] dark:hover:bg-[#0f1419] dark:text-white">Token Convert</label>
+        <label for="PingTokenConvert" class="btn btn-primary dark:text-white">Token Convert</label>
         <ping-token-convert
             :chain-name="conf.chainName"
             :endpoint="conf.endpoint"

package/src/styles/design-system.css

@@ -57,7 +57,7 @@
   --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(8% 4% 250deg);
+  --color-neutral-950: lch(5% 2.4 256deg); /* Exact #0f1419 */
 
   /* Semantic Colors */
   --color-success: lch(65% 55% 145deg); /* #3fb68b equivalent */
@@ -65,6 +65,29 @@
   --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)
      ========================================================================== */
@@ -147,4 +170,15 @@ 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/tailwind.config.js

@@ -154,58 +154,5 @@ export default {
             },
         },
     },
-    plugins: [require('daisyui')],
-    daisyui: {
-        themes: [
-            {
-                light: {
-                    ...require('daisyui/src/theming/themes')['[data-theme=light]'],
-                    // PROTECTED: Primary color #0066ff (synced with explorer)
-                    primary: '#0066ff',
-                    'primary-focus': '#0052cc',
-                    'primary-content': '#ffffff',
-                    secondary: '#1e40af',
-                    'secondary-focus': '#1e3a8a',
-                    'secondary-content': '#ffffff',
-                    accent: '#3b82f6',
-                    'accent-focus': '#2563eb',
-                    'accent-content': '#ffffff',
-                    info: '#0066ff',
-                    success: '#3fb68b',
-                    warning: '#f59e0b',
-                    error: '#ff5353',
-                    neutral: '#1e40af',
-                    'neutral-focus': '#1e3a8a',
-                    'neutral-content': '#ffffff',
-                },
-            },
-            {
-                dark: {
-                    ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
-                    // PROTECTED: Primary color #0066ff (synced with explorer)
-                    primary: '#0066ff',
-                    'primary-focus': '#0052cc',
-                    'primary-content': '#ffffff',
-                    secondary: '#1e40af',
-                    'secondary-focus': '#1e3a8a',
-                    'secondary-content': '#ffffff',
-                    accent: '#3b82f6',
-                    'accent-focus': '#2563eb',
-                    'accent-content': '#ffffff',
-                    info: '#0066ff',
-                    success: '#3fb68b',
-                    warning: '#f59e0b',
-                    error: '#ff5353',
-                    neutral: '#1e40af',
-                    'neutral-focus': '#1e3a8a',
-                    'neutral-content': '#ffffff',
-                    // Explorer DS overrides (S4 4.20)
-                    'base-100': '#0f1419',
-                    'base-200': '#1a1f2e',
-                    'base-300': '#232a3a',
-                    'base-content': '#e5e7eb',
-                },
-            },
-        ],
-    },
+    plugins: [],
 };