feat: update style and components

.vitepress/config.ts

@@ -122,7 +122,7 @@ export default withMermaid(
 
       socialLinks: [
         { icon: 'github', link: 'https://github.com/iExecBlockchainComputing' },
-        { icon: 'x', link: 'https://twitter.com/iEx_ec' },
+        { icon: 'x', link: 'https://x.com/iEx_ec' },
         { icon: 'discord', link: 'https://discord.com/invite/pbt9m98wnU' },
       ],
 

.vitepress/sidebar.ts

@@ -6,7 +6,7 @@ export function getSidebar() {
       {
         text: 'GET STARTED',
         items: [
-          { text: '💡 Welcome', link: '/get-started/welcome' },
+          { text: 'Welcome', link: '/get-started/welcome' },
           {
             text: 'Toolkit',
             link: '/get-started/toolkit',

.vitepress/theme/style.css

@@ -92,37 +92,114 @@
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
+}
 
-  --vp-c-brand-1: #917600;
-  --vp-c-brand-2: #fcd15a;
-  --vp-c-brand-3: #917600;
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+/**
+ * Colors: Text
+ *
+ * - `text-1`: Used for primary text.
+ *
+ * - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
+ *
+ * - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
+ * -------------------------------------------------------------------------- */
+
+:root {
+  /* --vp-c-text-1: #3c3c43; */
+  --vp-c-text-1: #1d1d24;
+  /* --vp-c-text-2: #67676c; */
+  --vp-c-text-2: #5d5d69;
+  --vp-c-text-3: #929295;
+}
+
+.dark {
+  /* --vp-c-text-1: #dfdfd6; */
+  --vp-c-text-1: #fff;
+  /* --vp-c-text-2: #98989f; */
+  --vp-c-text-2: #a3a3a8;
+  --vp-c-text-3: #6a6a71;
+}
+
+/**
+ * Colors: Function
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attached to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ *
+ * To understand the scaling system, refer to "Colors: Palette" section.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: #183ee9;
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: #e3e8ff;
 
   --vp-c-tip-1: var(--vp-c-brand-1);
   --vp-c-tip-2: var(--vp-c-brand-2);
   --vp-c-tip-3: var(--vp-c-brand-3);
   --vp-c-tip-soft: var(--vp-c-brand-soft);
 
-  --vp-c-warning-1: var(--vp-c-yellow-1);
-  --vp-c-warning-2: var(--vp-c-yellow-2);
-  --vp-c-warning-3: var(--vp-c-yellow-3);
-  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+  --vp-c-note-1: var(--vp-c-brand-1);
+  --vp-c-note-2: var(--vp-c-brand-2);
+  --vp-c-note-3: var(--vp-c-brand-3);
+  --vp-c-note-soft: var(--vp-c-brand-soft);
+
+  --vp-c-success-1: #00704b;
+  --vp-c-success-2: var(--vp-c-green-2);
+  --vp-c-success-3: var(--vp-c-green-3);
+  --vp-c-success-soft: #eafcf6;
 
   --vp-c-important-1: var(--vp-c-purple-1);
   --vp-c-important-2: var(--vp-c-purple-2);
   --vp-c-important-3: var(--vp-c-purple-3);
   --vp-c-important-soft: var(--vp-c-purple-soft);
 
-  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-warning-1: #da7b0b;
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: #fdefde;
+
+  --vp-c-danger-1: #bf3131;
   --vp-c-danger-2: var(--vp-c-red-2);
   --vp-c-danger-3: var(--vp-c-red-3);
-  --vp-c-danger-soft: var(--vp-c-red-soft);
+  --vp-c-danger-soft: #f3d7d7;
+
+  --vp-c-caution-1: var(--vp-c-red-1);
+  --vp-c-caution-2: var(--vp-c-red-2);
+  --vp-c-caution-3: var(--vp-c-red-3);
+  --vp-c-caution-soft: var(--vp-c-red-soft);
 }
 
 .dark {
-  --vp-c-brand-1: #fcd15a;
-  --vp-c-brand-2: #917600;
-  --vp-c-brand-3: #fcd15a;
+  --vp-c-brand-1: #a2b3ff;
+  --vp-c-brand-soft: #1d2032;
+
+  --vp-c-success-1: #74ecc5;
+  --vp-c-success-soft: #243030;
+
+  --vp-c-danger-1: #bf3131;
+  --vp-c-danger-soft: #2b1d21;
+
+  --vp-c-warning-1: #f49425;
+  --vp-c-warning-soft: #312720;
 }
 
 /**
@@ -195,3 +272,69 @@ html:not(.dark) .dark-only {
 input {
   @apply w-full rounded-md border border-[var(--vp-c-divider)] bg-[var(--vp-c-bg-soft)] px-4 py-3 text-base text-[var(--vp-c-text-1)] transition focus:border-[var(--vp-c-brand-2)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-70;
 }
+
+/**
+ * Component: Banner
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --c-bg-gradient-from: #e1e6f7;
+  --c-bg-gradient-to: #f1f2f6;
+  --c-border: #b6b7c3;
+  --c-text: #b6b7c3;
+}
+
+.dark {
+  --c-bg-gradient-from: #2e334a;
+  --c-bg-gradient-to: #292b34;
+  --c-border: #5a5b68;
+  --c-text: #b6b7c3;
+}
+
+.vp-doc .custom-block {
+  @apply p-6 text-base;
+}
+
+.vp-doc .custom-block.tip {
+  @apply border-l-4 border-l-[var(--vp-c-brand-1)];
+}
+
+.vp-doc .custom-block.tip strong {
+  @apply text-[var(--vp-c-brand-1)];
+}
+
+.custom-block.tip code {
+  @apply bg-[var(--vp-code-bg)];
+}
+
+.vp-doc .custom-block.warning {
+  @apply border-l-4 border-l-[var(--vp-c-warning-1)];
+}
+
+.vp-doc .custom-block.warning strong {
+  @apply text-[var(--vp-c-warning-1)];
+}
+
+.vp-doc .custom-block.info {
+  @apply border-l-4 border-l-[var(--vp-c-info-1)];
+}
+
+.vp-doc .custom-block.info strong {
+  @apply text-[var(--vp-c-info-1)];
+}
+
+.vp-doc .custom-block.danger {
+  @apply border-l-4 border-l-[var(--vp-c-danger-1)];
+}
+
+.vp-doc .custom-block.danger strong {
+  @apply text-[var(--vp-c-danger-1)];
+}
+
+.vp-doc .custom-block.details {
+  @apply border-l-4 border-l-[var(--vp-c-details-1)];
+}
+
+.vp-doc .custom-block.details strong {
+  @apply text-[var(--vp-c-details-1)];
+}

src/components/AddressChip.vue

@@ -2,7 +2,7 @@
   <div
     class="flex shrink-0 items-center gap-2 rounded-[30px] bg-gray-800 px-3 py-2 text-white"
   >
-    <div class="text-primary text-sm font-medium">{{ displayAddress }}</div>
+    <div class="text-sm font-medium text-[#fcd15a]">{{ displayAddress }}</div>
     <div
       :class="[
         avatarStyles[avatarVisualBg],

src/components/Banner.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="relative z-0 mx-auto mb-6 max-w-3xl rounded-2xl bg-gradient-to-b from-[var(--c-border)] to-transparent px-8 pb-4 text-[var(--vp-c-text-1)] *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[15px] after:bg-gradient-to-r after:from-[var(--c-bg-gradient-from)] after:to-[var(--c-bg-gradient-to)] [&_h2]:border-0!"
+  >
+    <slot />
+  </div>
+</template>

src/components/CardWithBorder.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="rounded-2xl border border-[var(--vp-c-default-3)] bg-[var(--vp-c-bg-soft)] p-8 marker:font-bold marker:text-[var(--vp-c-brand-1)] [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+  >
+    <slot />
+  </div>
+</template>

src/components/CardWithoutBorder.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="z-0 rounded-xl bg-[var(--vp-c-bg-soft)] p-6 [&>:first-child]:mt-0! [&>:last-child]:mb-0!"
+  >
+    <slot />
+  </div>
+</template>

src/components/Container.vue

@@ -0,0 +1,37 @@
+<template>
+  <div :class="containerClasses">
+    <p v-if="title" class="mt-0! font-semibold text-current">
+      {{ title }}
+    </p>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  variant?: 'success' | 'info' | 'danger';
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'info',
+});
+
+const containerClasses = computed(() => {
+  const baseClasses =
+    'rounded-[6px] p-6 border-l-4 [&>:first-child]:mt-0! [&>:last-child]:mb-0!';
+
+  const variantClasses = {
+    success:
+      'bg-[var(--vp-c-success-soft)] border-[var(--vp-c-success-1)] [&_strong]:text-[var(--vp-c-success-1)]',
+    info: 'bg-[var(--vp-c-info-soft)] border-[var(--vp-c-info-1)] [&_strong]:text-[var(--vp-c-info-1)]',
+    tips: 'bg-[var(--vp-c-brand-soft)] border-[var(--vp-c-brand-1)] [&_strong]:text-[var(--vp-c-brand-1)]',
+    danger:
+      'bg-gradient-to-r from-[var(--vp-c-danger-1)] to-[var(--vp-c-danger-1)] border-[var(--vp-c-danger-1)]',
+  };
+
+  return `${baseClasses} ${variantClasses[props.variant]}`;
+});
+</script>

src/components/ImageViewer.vue

@@ -20,10 +20,10 @@
     <p v-if="caption" class="mt-4 font-medium">
       <Button
         as="a"
+        variant="secondary"
         :href="linkUrl"
         target="_blank"
         rel="noreferrer"
-        class="text-primary hover:text-primary2 inline-flex items-center gap-2 rounded-lg no-underline transition-colors duration-200"
       >
         {{ caption }}
       </Button>

src/components/ui/Button.vue

@@ -26,10 +26,10 @@ const props = defineProps({
 
 const buttonClasses = computed(() => {
   const baseClasses =
-    'inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-lg px-5! py-2 text-base font-medium no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+    'inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-full px-5! py-2 text-base font-medium no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
 
   if (props.variant === 'secondary') {
-    return `${baseClasses} bg-soft-bg! text-text1! border border-primary! hover:!bg-primary/10 focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
+    return `${baseClasses} bg-soft-bg! text-text1! border border-[var(--c-border)] hover:!bg-primary/10 focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)]`;
   }
 
   // Primary variant (default)

src/get-started/helloWorld.md

@@ -8,27 +8,34 @@ description:
 <script setup>
 import InfoIcon from '@/components/InfoIcon.vue'
 import ChainSelector from '@/components/ChainSelector.vue'
+import Banner from '../components/Banner.vue'
+import Container from '../components/Container.vue'
+import CardWithBorder from '../components/CardWithBorder.vue'
 </script>
 
 # 👋 Welcome to iExec
 
 > Reading time 🕒 2 min
 
-<div class="mb-0 p-6 bg-[var(--vp-c-bg-soft)] rounded-lg border border-[var(--vp-c-divider)]">
-  <div class="flex">
+<CardWithBorder>
+  <div class="flex gap-2">
     <h3 class="m-0! py-2 text-lg font-medium">🌐 Select Your Network :</h3>
     <ChainSelector />
   </div>
-</div>
+</CardWithBorder>
+
+<Banner>
+
+## Start Your Web3 Privacy Journey
+
+And learn how to build Privacy-preserving decentralized applications (DApp) with
+iExec in this interactive guide.
 
-<div class="bg-gradient-to-r from-[#fcd15a] to-[#ffad4d] rounded-[6px] px-8 pb-4 text-gray-800 max-w-3xl mx-auto mb-6">
-  <h2 class="text-2xl font-bold mt-0 border-none!">Start Your Web3 Privacy Journey</h2>
-  <p>And learn how to build Privacy-preserving decentralized applications (DApp) with iExec in this interactive guide.</p>
   <div class="mt-6 flex items-center gap-4">
     <span class="bg-gray-900 text-white px-4 py-2 rounded-full font-medium">☕ 30 minutes journey</span>
     <p>Perfect for hackathons 😊</p>
   </div>
-</div>
+</Banner>
 
 ## What you'll Learn and Build
 
@@ -125,6 +132,9 @@ Before you begin, make sure you have:
   </div>
 </div>
 
-<div class="bg-gradient-to-r from-green-400/10 to-green-400/5 rounded-[6px] p-6 border-l-4 border-green-600 mb-6">
-  <p class="m-0! font-medium">Need help setting up or got some questions? Join our <a target="_blank" href="https://discord.gg/6yrgRH6ATD">Discord Community</a> for support!</p>
-</div>
+::: tip Need help setting up or got some questions?
+
+Join our <a target="_blank" href="https://discord.gg/6yrgRH6ATD">Discord
+Community</a> for support!
+
+:::