Docs: use our original violet again (#1567)

Despite having a new color scheme / style guide being worked on, we
decide with this PR to stick with the original violet color and derived
shades of it.

Why? Because links are way more legible in the documentation pages (and
that's what this is all about).

---

* [x] CHANGELOG update not needed
* [x] Documentation update not needed
* [x] Haddocks update not needed
* [x] No new TODOs introduce explained herafter

docs/src/components/homepage/AnimatedText.tsx

@@ -63,7 +63,7 @@ const AnimatedText: FC = () => {
         onAnimationComplete={() => setPopTextClass("text-[#696E70]")}
       >
         {processText(
-          <h2 className="homepageText text-teal">
+          <h2 className="homepageText text-primary">
             Provides a{" "}
             <span
               className={clsx("transition-colors duration-500", popTextClass)}

docs/src/components/homepage/Carousel/Carousel.tsx

@@ -24,7 +24,7 @@ const CarouselEntry: FC<Props> = ({ idx, src, description }) => {
         <img src={src} className="w-full rounded-lg object-cover" />
       </div>
       <div className="flex flex-col gap-4 max-w-md justify-center">
-        <h4 className="text-2xl text-teal font-medium">How it works</h4>
+        <h4 className="text-2xl text-primary font-medium">How it works</h4>
         <p>{description}</p>
         {idx === 0 && (
           <div className="flex gap-4">
@@ -56,7 +56,7 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
         <Arrow
           className={clsx(
             "rotate-180 rounded-full",
-            showing < 1 ? "text-teal-lightest" : "text-teal hover:bg-teal/15"
+            showing < 1 ? "text-primary-lightest" : "text-primary hover:bg-primary/15"
           )}
         />
       </button>
@@ -65,7 +65,7 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
           key={`dot-${index}`}
           className={clsx(
             "self-center",
-            index === showing ? "text-teal" : "text-teal-lightest"
+            index === showing ? "text-primary" : "text-primary-lightest"
           )}
         />
       ))}
@@ -77,8 +77,8 @@ const Controls: FC<ControlProps> = ({ showing, handlePrev, handleNext }) => {
           className={clsx(
             "rounded-full",
             showing > HowItWorksCarouselContent.length - 2
-              ? "text-teal-lightest"
-              : "text-teal hover:bg-teal/15"
+              ? "text-primary-lightest"
+              : "text-primary hover:bg-primary/15"
           )}
         />
       </button>

docs/src/components/homepage/Carousel/ResponsiveCarousel.tsx

@@ -60,7 +60,7 @@ const Controls: FC<ControlProps> = ({ showing, onClickBullet, ...props }) => {
           <Dot
             className={clsx(
               "self-center",
-              index === showing ? "text-teal" : "text-teal-lightest"
+              index === showing ? "text-primary" : "text-primary-lightest"
             )}
           />
         </button>
@@ -101,7 +101,7 @@ const ResponsiveCarousel: FC = () => {
   return (
     <section className="bg-[#F4F5F5]">
       <div className="component relative pageContainer flex flex-col">
-        <h4 className="text-2xl text-teal font-medium pb-14">How it works</h4>
+        <h4 className="text-2xl text-primary font-medium pb-14">How it works</h4>
         <div className="flex self-center flex-col justify-center">
           <Swiper
             key={isTabletUp ? "tablet" : "mobile"}

docs/src/components/homepage/CaseStudies.tsx

@@ -10,7 +10,7 @@ const CaseStudies: FC = () => {
   const isTabletOnly = useMediaQuery(forTabletOnly);
   const isLaptopUp = useMediaQuery(forLaptop);
   return (
-    <section className="bg-teal-extralight">
+    <section className="bg-primary-extralight">
       <motion.div
         className="component pageContainer"
         initial="hidden"
@@ -22,17 +22,17 @@ const CaseStudies: FC = () => {
           hidden: { opacity: 0, y: 100 },
         }}
       >
-        <h5 className="text-base text-teal pb-14">/ CASE STUDIES</h5>
+        <h5 className="text-base text-primary pb-14">/ CASE STUDIES</h5>
         <div className="bg-white flex tablet:flex-row flex-col rounded-2xl overflow-hidden laptop:mb-10 tablet:p-8 justify-between gap-8">
           <div className="flex flex-col laptop:pt-20 gap-8 laptop:max-w-md px-4 py-8 tablet:p-0 tablet:basis-2/5">
-            <h4 className="text-2xl text-teal font-medium">Case studies</h4>
+            <h4 className="text-2xl text-primary font-medium">Case studies</h4>
             <p>{FeaturedCaseStudy.content}</p>
             <Link
-              className="bg-none text-teal self-start inline-flex gap-3 group hover:no-underline hover:text-teal"
+              className="bg-none text-primary self-start inline-flex gap-3 group hover:no-underline hover:text-primary"
               href="/use-cases"
             >
               {"View case studies "}
-              <Arrow className="mt-[3px] rounded-full group-hover:bg-teal/15" />
+              <Arrow className="mt-[3px] rounded-full group-hover:bg-primary/15" />
             </Link>
           </div>
           <motion.div

docs/src/components/homepage/Features.tsx

@@ -39,7 +39,7 @@ const Features: FC = () => {
     <section className="component bg-white">
       <div className="pageContainer">
         <motion.h5
-          className="text-base text-teal pb-14"
+          className="text-base text-primary pb-14"
           initial="hidden"
           whileInView="visible"
           viewport={{ once: true }}

docs/src/components/homepage/HomepageHero.tsx

@@ -37,7 +37,7 @@ const HomepageHero: FC = () => {
         <div className="component-lg tablet:py-[72px]">
           <div className="pb-9 tablet:max-w-[485px]">
             <motion.h1
-              className="tablet:text-[56px] tablet:leading-[67px] text-4xl leading-[48px] text-teal font-medium pb-4"
+              className="tablet:text-[56px] tablet:leading-[67px] text-4xl leading-[48px] text-primary font-medium pb-4"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ ease: "easeInOut", duration: 0.75, delay: 0.4 }}
@@ -61,7 +61,7 @@ const HomepageHero: FC = () => {
             transition={{ ease: "easeInOut", duration: 0.75, delay: 1.2 }}
           >
             <Link
-              className="inline-block px-4 py-3 border border-solid border-teal font-bold text-sm text-teal rounded-lg no-underline bg-white hover:bg-teal-extralight hover:no-underline hover:text-teal"
+              className="inline-block px-4 py-3 border border-solid border-primary font-bold text-sm text-primary rounded-lg no-underline bg-white hover:bg-primary-extralight hover:no-underline hover:text-primary"
               to="/docs/protocol-overview"
             >
               Learn more

docs/src/components/homepage/Properties.tsx

@@ -36,7 +36,7 @@ const Properties: FC = () => {
   const isLaptopUp = useMediaQuery(forLaptop);
   return (
     <motion.section
-      className="bg-teal"
+      className="bg-primary"
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}

docs/src/components/homepage/WhyHydraHead.tsx

@@ -21,7 +21,7 @@ const WhyHydraHead: FC = () => {
     >
       <div className="grid laptop:flex laptop:flex-row laptop:gap-6">
         <div className="flex flex-col basis-[41%] pt-4 order-2 laptop:-order-1 laptop:w-[472px] laptop:pt-0">
-          <h4 className="text-2xl color-darkRed font-medium text-darkRed pb-4">
+          <h4 className="text-2xl text-primary font-medium pb-4">
             {WhyHydraHeadContent.title}
           </h4>
           <p>{WhyHydraHeadContent.descriptionParagraphOne}</p>
@@ -42,13 +42,13 @@ const WhyHydraHead: FC = () => {
           </motion.div>
           <div className="w-full relative mt-4">
             <button
-              className="bg-none text-teal self-start inline-flex gap-3 group"
+              className="bg-none text-primary self-start inline-flex gap-3 group"
               onClick={() => setExpanded(!expanded)}
             >
               {`Read ${expanded ? "less" : "more"}`}{" "}
               <Arrow
                 className={clsx(
-                  "mt-[3px] rounded-full group-hover:bg-teal/15",
+                  "mt-[3px] rounded-full group-hover:bg-primary/15",
                   expanded ? "-rotate-90" : "rotate-90"
                 )}
               />
@@ -58,7 +58,7 @@ const WhyHydraHead: FC = () => {
         <div className="hidden basis-[59%] -order-1 laptop:order-2 tablet:block">
           <img
             src="hydra-docs-landing-graphic.png"
-            className="border-b border-solid border-teal laptop:border-none"
+            className="border-b border-solid border-primary laptop:border-none"
           />
         </div>
       </div>

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;
 }
@@ -417,7 +441,7 @@ svg.architecture {
 }
 
 .theme-doc-toc-mobile > button {
-  @apply font-semibold text-true-black rounded p-4 mt-12 bg-teal-extralight;
+  @apply font-semibold text-black rounded p-4 mt-12 bg-primary-extralight;
 }
 
 .theme-doc-toc-mobile > div > ul {
@@ -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 {

docs/src/theme/Footer/Copyright/index.js

@@ -3,7 +3,7 @@ import HydraLogo from "../../../components/icons/HydraLogo";
 export default function FooterCopyright({ copyright }) {
   return (
     <div
-      className="text-teal-light inline-flex gap-4 text-center"
+      className="text-primary-light inline-flex gap-4 text-center"
       // Developer provided the HTML, so assume it's safe.
       // eslint-disable-next-line react/no-danger
     >

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-teal-dark component laptop:component-xs"
+          ? "bg-primary-darker component laptop:component-xs"
           : "bg-white py-[56px]"
       )}
     >
@@ -28,18 +28,18 @@ export default function FooterLayout({ style, links, logo, copyright }) {
         >
           <div
             className={clsx(
-              "flex flex-col gap-4 border border-solid border-teal-light p-6 rounded-lg mb-14 laptop:mb-[70px]",
+              "flex flex-col gap-4 border border-solid border-primary-light p-6 rounded-lg mb-14 laptop:mb-[70px]",
               !isLandingPage && "w-[250px]"
             )}
           >
-            <div className="inline-flex items-center text-teal-light">
+            <div className="inline-flex items-center text-primary-light">
               <HydraLogo className="shrink-0" width={24} height={24} />
               <span className="border-l pl-4 ml-4 text-xl leading-[27px]">
                 Join the family
               </span>
             </div>
             <Link
-              className="px-4 py-3 justify-center text-center border text-sm border-solid bg-teal-lightest border-teal font-bold text-teal rounded-lg no-underline hover:bg-white hover:no-underline hover:text-teal"
+              className="px-4 py-3 justify-center text-center border text-sm border-solid bg-primary-lightest border-primary font-bold text-primary rounded-lg no-underline hover:bg-white hover:no-underline hover:text-primary"
               to={"/docs/get-involved"}
             >
               Get involved

docs/src/theme/Footer/LinkItem/index.js

@@ -11,7 +11,7 @@ export default function FooterLinkItem({ item }) {
   return (
     <Link
       className={clsx(
-        "footer__link-item inline-flex hover:text-teal-light",
+        "footer__link-item inline-flex hover:text-primary-light",
         isLandingPage ? "text-[#F3F4F4]" : "text-black"
       )}
       {...(href

docs/src/theme/Navbar/Content/index.js

@@ -73,15 +73,15 @@ export default function NavbarContent() {
             href="https://github.com/cardano-scaling/hydra"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-teal-light mx-3 py-1"
+            className="hover:text-primary-light mx-3 py-1"
           >
             <GithubSmall />
           </a>
           <a
             href="https://discord.com/invite/Qq5vNTg9PT"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-teal-light mx-3 py-1"
+            className="hover:text-primary-light mx-3 py-1"
           >
             <Discord />
           </a>

docs/src/theme/Navbar/MobileSidebar/Layout/index.js

@@ -9,7 +9,7 @@ export default function NavbarMobileSidebarLayout({
 }) {
   const { shown: secondaryMenuShown } = useNavbarSecondaryMenu();
   return (
-    <div className="navbar-sidebar bg-teal-extralight w-full transition-transform -translate-y-full">
+    <div className="navbar-sidebar bg-primary-extralight w-full transition-transform -translate-y-full">
       {header}
       <div
         className={clsx("navbar-sidebar__items", {

docs/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.js

@@ -36,15 +36,15 @@ export default function NavbarMobilePrimaryMenu() {
         href="https://github.com/cardano-scaling/hydra"
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-teal-light mx-3 py-1 inline-flex gap-3"
+        className="hover:text-primary-light mx-3 py-1 inline-flex gap-3"
       >
         <GithubSmall /> Github
       </a>
       <a
         href="https://github.com/cardano-scaling/hydra"
         target="_blank"
         rel="noopener noreferrer"
-        className="hover:text-teal-light mx-3 py-1 inline-flex gap-3"
+        className="hover:text-primary-light mx-3 py-1 inline-flex gap-3"
       >
         <Discord className="mt-1" /> Discord
       </a>

docs/src/theme/NavbarItem/DefaultNavbarItem.js

@@ -9,7 +9,7 @@ function DefaultNavbarItemDesktop({
   const element = (
     <NavbarNavLink
       className={clsx(
-        "hover:text-teal-light",
+        "hover:text-primary-light",
         isDropdownItem ? "dropdown__link" : "navbar__item navbar__link",
         className
       )}

docs/tailwind.config.ts

@@ -42,23 +42,18 @@ const config: Config = {
     colors: {
       transparent: "transparent",
       current: "currentColor",
-      red: "#F00000",
-      darkRed: "#721F41",
-      yellow: "#FFF500",
-      violet: "#00006D",
-      teal: {
-        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%)",
+      primary: {
+        DEFAULT: "#6875e8",
+        dark: "#3847c4",
+        darker: "#222432",
+        light: "#9099e2",
+        lighter: "#b4b8e2",
+        lightest: "#d2d4e6",
+        extralight: "#ebecf0",
       },
-      blue: {},
+      secondary: "#3c9ec8",
       black: "#283032",
-      "true-black": "#000000",
-      gray: {
-        DEFAULT: "#D4D6D6",
-      },
+      gray: "#D4D6D6",
       white: "#FFFFFF",
     },
   },