Use original primary color (violet) and derived colors

Also has a darker footer on landing page
cardano-scaling · Aug 15, 2024 · c4f3060 · c4f3060
1 parent 05f4c1d
commit c4f3060
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -53,15 +53,44 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: hsl(184, 75%, 30%);
-  --ifm-color-primary-dark: hsl(184, 75%, 20%);
+  /* The original violet accent we use */
+  --ifm-color-primary: #6875e8;
+  /* Created using https://colordesigner.io/color-scheme-builder */
+  /* 6 steps to white, first 4 after main */
+  --ifm-color-primary-light: #9099e2;
+  --ifm-color-primary-lighter: #b4b8e2;
+  --ifm-color-primary-lightest: #d2d4e6;
+  --ifm-color-primary-extralight: #ebecf0;
+  /* 6 steps to black, first 3 after main */
+  --ifm-color-primary-dark: #3847c4;
+  --ifm-color-primary-darker: #353b73;
+  --ifm-color-primary-darkest: #222432;
+
+  /* Another blue color we like */
+  --ifm-color-secondary: #3c9ec8;
+  /* Created using https://colordesigner.io/color-scheme-builder */
+  /* 6 steps to white, first 4 after main */
+  --ifm-color-secondary-light: #6eadc8;
+  --ifm-color-secondary-lighter: #9bbecd;
+  --ifm-color-secondary-lightest: #c2d1d8;
+  --ifm-color-secondary-extralight: #e3e7e9;
+  /* 6 steps to black, first 3 after main */
+  --ifm-color-secondary-dark: #397b97;
+  --ifm-color-secondary-darker: #345868;
+  --ifm-color-secondary-darkest: #283940;
+
   --ifm-code-font-size: 95%;
   --ifm-navbar-height: 56px;
   font-family: "Inter";
   --ifm-color-emphasis-600: #283032;
   --doc-sidebar-hidden-width: 100px !important;
 }
 
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary: var(--ifm-color-primary-light);
+}
+
 @media (min-width: 768px) {
   :root {
     --ifm-navbar-height: 96px;
@@ -84,11 +113,6 @@ h4 {
   line-height: 30px !important;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: hsl(184, 35%, 60%);
-}
-
 html {
   @apply text-black;
 }
@@ -463,8 +487,8 @@ svg.architecture {
 }
 
 .markdown a {
-  color: #128189;
-  text-decoration-color: #128189;
+  color: var(--ifm-color-primary);
+  text-decoration-color: var(--ifm-color-primary);
 }
 
 .markdown a.card {

diff --git a/docs/src/theme/Footer/Layout/index.js b/docs/src/theme/Footer/Layout/index.js
@@ -11,7 +11,7 @@ export default function FooterLayout({ style, links, logo, copyright }) {
       className={clsx(
         "laptop:footer",
         isLandingPage
-          ? "bg-primary-dark component laptop:component-xs"
+          ? "bg-primary-darker component laptop:component-xs"
           : "bg-white py-[56px]"
       )}
     >

diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
@@ -43,13 +43,15 @@ const config: Config = {
       transparent: "transparent",
       current: "currentColor",
       primary: {
-        DEFAULT: "hsl(184, 75%, 30%)",
-        dark: "hsl(184, 75%, 20%)",
-        light: "hsl(184, 25%, 60%)",
-        lightest: "hsl(184, 55%, 93%)",
-        extralight: "hsl(184, 12%, 93%)",
+        DEFAULT: "#6875e8",
+        dark: "#3847c4",
+        darker: "#222432",
+        light: "#9099e2",
+        lighter: "#b4b8e2",
+        lightest: "#d2d4e6",
+        extralight: "#ebecf0",
       },
-      secondary: "#721F41",
+      secondary: "#3c9ec8",
       black: "#283032",
       gray: "#D4D6D6",
       white: "#FFFFFF",