feat: update style and components (#54)

Co-authored-by: Mathis Debuire <[email protected]>

Author: ErwanDecoster

.vitepress/config.ts

@@ -123,7 +123,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);
+}
+
+/**
+ * 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".
+ * -------------------------------------------------------------------------- */
 
-  --vp-c-brand-1: #917600;
-  --vp-c-brand-2: #fcd15a;
-  --vp-c-brand-3: #917600;
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+: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,124 @@ 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)];
+}
+
+/**
+   * HomePage: rewrite
+   * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: var(--vp-c-text-1);
+  --vp-button-brand-bg: #fcd15a;
+  --vp-button-brand-hover-bg: #fcd15a;
+}
+
+.VPHero .VPButton {
+  @apply font-medium transition hover:-translate-y-0.5 hover:shadow-md;
+}
+
+.VPHero .VPButton.brand {
+  @apply text-[var(--vp-c-black)]!;
+}
+
+.VPImage.image-src {
+  @apply max-h-none max-w-none lg:size-[448px]!;
+}
+
+article.box .icon {
+  @apply size-14 rounded-[14px] bg-[var(--vp-c-bg-soft)] p-2;
+  box-shadow:
+    -12.835px -12.835px 21.392px 0 var(--vp-c-bg),
+    12.835px 12.835px 21.392px 0 var(--vp-c-bg);
+}
+
+.image .image-container {
+  @apply relative flex items-center justify-center;
+}
+
+.image .image-container::before {
+  @apply pointer-events-none absolute top-[60%] left-1/2 -z-10 h-[929px] w-[995px] -translate-x-1/2 -translate-y-1/2 bg-contain bg-center bg-no-repeat;
+  content: '';
+  background-image: url('/bg-gradient.svg');
+}
+
+.image .image-container .VPImage.image-src {
+  @apply relative z-10;
+}
+
+.VPHero.has-image.VPHomeHero {
+  @apply pb-0;
+}
+
+.VPLink.link.VPFeature {
+  @apply relative rounded-[32px] border bg-gradient-to-b from-[var(--vp-c-white)] to-[var(--vp-c-white)] transition-all duration-300 *:relative *:z-20 after:absolute after:inset-px after:z-10 after:rounded-[31px] after:bg-[var(--vp-c-bg-soft)] hover:shadow-lg;
+}
+
+.dark .VPLink.link.VPFeature {
+  @apply from-[var(--c-border)] to-transparent;
+}