buttons from design system, substitute legacy primary by new primary,…

… books page

src/ocamlorg_frontend/components/forms.eml

@@ -10,13 +10,13 @@ let search_input ?button_attrs ?input_attrs ?dropdown_html ~label ~name _class =
         type="search"
         name="<%s name %>"
         placeholder="<%s label %>"
-        class="h-full w-full font-medium focus:border-legacy-primary-600 focus:ring-0 text-gray-800 border-legacy-primary-600 rounded-md rounded-r-none px-3 py-1 placeholder-body-400 appearance-none focus:outline-none"
+        class="h-full w-full font-medium focus:border-primary focus:ring-0 text-gray-800 border-primary rounded-md rounded-r-none px-3 py-1 placeholder-body-400 appearance-none focus:outline-none"
         <%s! Option.value ~default:"" input_attrs %>
     >
 
     <button
         aria-label="search"
-        class="h-full flex items-center justify-center rounded-r-md bg-legacy-primary-600 text-white px-4"
+        class="h-full flex items-center justify-center rounded-r-md bg-primary text-white px-4"
         <%s! Option.value ~default:"" button_attrs %>
     ><%s! Icons.magnifying_glass "w-6 h-6" %></button>
 

src/ocamlorg_frontend/components/header.eml

@@ -12,7 +12,7 @@ let menu_link
 ?(_class="")
 ()
 =
-  <a href="<%s href %>" class="font-semibold py-3 mg:py-4 px-1 lg:px-3 <%s _class %> <%s if active then "text-legacy-primary-600 underline" else "text-legacy-lighter" %> hover:text-legacy-primary-600"><%s title %></a>
+  <a href="<%s href %>" class="font-semibold py-3 mg:py-4 px-1 lg:px-3 <%s _class %> <%s if active then "text-primary underline" else "text-legacy-lighter" %> hover:text-primary"><%s title %></a>
 
 
 let render
@@ -22,7 +22,7 @@ let render
 =
 let search_dropdown () =
   <div id="header-search-results" aria-live="polite"></div>
-  <a class="flex py-2 px-2 mx-2 gap-4 hover:bg-legacy-primary-100 font-normal rounded-md text-legacy-primary-600" href="<%s Url.api %>">
+  <a class="flex py-2 px-2 mx-2 gap-4 hover:bg-legacy-primary-100 font-normal rounded-md text-primary" href="<%s Url.api %>">
     Standard Library API
     <%s! Icons.arrow_top_right_on_square "w-6 h-6" %>
   </a>
@@ -64,7 +64,7 @@ in
     </ul>
     <% if show_get_started then (%>
     <ul class="order-3 hidden lg:flex items-center">
-      <li><a href="<%s Url.getting_started %>" class="btn btn-secondary btn-sm">Get Started</a></li>
+      <li><a href="<%s Url.getting_started %>" class="btn btn-ghost h-10 px-4">Get Started</a></li>
     </ul>
     <% ); %>
     <ul class="order-1 lg:hidden flex items-center">
@@ -114,7 +114,7 @@ in
       <li><%s! menu_link ~_class:"block" ~active:(active_top_nav_item=Some Blog) ~href:Url.blog ~title:"Blog" () %></li>
       <li><%s! menu_link ~_class:"block" ~active:(active_top_nav_item=Some Playground) ~href:Url.playground ~title:"Playground" () %></li>
       <li>
-        <a href="<%s Url.api %>" class="flex py-3 px-1 gap-4 font-semibold text-legacy-primary-600">Standard Library API<%s! Icons.arrow_top_right_on_square "w-6 h-6" %></a>
+        <a href="<%s Url.api %>" class="flex py-3 px-1 gap-4 font-semibold text-primary">Standard Library API<%s! Icons.arrow_top_right_on_square "w-6 h-6" %></a>
       </li>
       <li class="mt-3 mb-6">
         <a href="<%s Url.getting_started %>" class="btn w-full">Get started</a>

src/ocamlorg_frontend/components/learn_components.eml

@@ -85,13 +85,20 @@ let tutorial_block ~icon ~title ~heading ~description ~(tutorial_links: link lis
     <%s see_more.title %>
   </a>
 
-let pricing_tag = 
-  <div class="absolute -mt-3 ml-3 w-16 h-16">
-    <div class="bg-primary rotate-[-10deg] rounded-full w-16 h-16 flex items-center justify-center" style="filter: drop-shadow(-4px -2px 4px rgb(0 0 0 / 0.25));">
-      <div class="text-center text-white text-base font-bold leading-7 tracking-wide">
-        FREE
+let book_cover ~free cover_src = 
+  <div class="relative">
+    <% (if free then %>
+    <div class="absolute -mt-8 ml-3 w-16 h-16">
+      <div class="bg-primary rotate-[-10deg] rounded-full w-16 h-16 flex items-center justify-center" style="filter: drop-shadow(-4px -2px 4px rgb(0 0 0 / 0.25));">
+        <div class="text-center text-white text-base font-bold leading-7 tracking-wide">
+          FREE
+        </div>
       </div>
     </div>
+    <% ); %>
+    <img src="<%s Ocamlorg_static.Media.url cover_src %>"
+      class="w-full border z-10"
+      alt="">
   </div>
 
 let book_recommendation ~(link : link) (book: Data.Book.t) =
@@ -101,8 +108,8 @@ let book_recommendation ~(link : link) (book: Data.Book.t) =
   | Advanced -> advanced_section_icon
   in
   block_container ~icon:(icon_for_difficulty book.difficulty) ~title:"RECOMMENDED BOOK" ~heading:book.title @@
-    <div class="mt-6 grid grid-cols-2 gap-6">
-      <img src="<%s Ocamlorg_static.Media.url book.cover %>" alt="">
+    <div class="mt-6 grid grid-cols-2 gap-6 pt-6">
+      <%s! book_cover ~free:(book.pricing = "free") book.cover %>
       <div class="">
         <%s! skill_tag book.difficulty %>
         <% (match book.recommendation with None -> () | Some recommendation -> %>

src/ocamlorg_frontend/components/navmap.eml

@@ -59,7 +59,7 @@ let rec nested_render ~path (item : toc) =
         <a href="<%s href %>" <%s! htmx_attributes %> class="flex">
         <span class="no-expand"><span class="<%s if item.title = fragment then "" else "opacity-80" %> <%s icon_style item.kind %>"></span></span>
         </a>
-        <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-legacy-primary-600">
+        <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-primary">
           <%s! item.title %>
         </a>
         <% ); %>
@@ -80,12 +80,12 @@ let rec nested_render ~path (item : toc) =
             <span class="<%s if item.title = fragment then "" else "opacity-80" %> <%s icon_style item.kind %>"></span>
           </span>
           <% (match item.href with | None -> %>
-            <span x-on:click="open = ! open" class="<%s title_style %> <%s if item.title = fragment then "white-200" else "gray-900" %>" :class="open ? 'text-legacy-primary-600' : ''">
+            <span x-on:click="open = ! open" class="<%s title_style %> <%s if item.title = fragment then "white-200" else "gray-900" %>" :class="open ? 'text-primary' : ''">
               <%s! item.title %> 
               <span class="arrow-expand absolute right-0.5 px-3" :class="open ? 'open' : ''"><%s! Icons.chevron_down "h-5 w-5" %></span>
             </span>
           <% | Some href -> %>
-          <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-legacy-primary-600" :class="open ? 'text-legacy-primary-600' : ''">
+          <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-primary" :class="open ? 'text-primary' : ''">
             <%s! item.title %>
           </a>
           <span x-on:click="open = ! open" class="sign-expand mr-2 px-2" :class="open ? 'open' : ''"></span>
@@ -112,7 +112,7 @@ let render
     <% (match maptoc with [] ->  %>
     <span class="block py-2 text-gray-700">Package contains no libraries</span>
     <% | _ -> %>
-      <a class="py-1 font-medium text-legacy-default hover:text-legacy-primary-600 transition-colors" href="<%s Url.Package.documentation package.name ?version %>">
+      <a class="py-1 font-medium text-legacy-default hover:text-primary transition-colors" href="<%s Url.Package.documentation package.name ?version %>">
         package <%s package.name %>
       </a>
     <ul>

src/ocamlorg_frontend/components/pagination.eml

@@ -7,7 +7,7 @@ let paginated_href ~base_url ~page ~queries =
   queries)
 
 let link ~base_url ~page ~current ~queries =
-  let active_class = "border-2 border-current text-legacy-primary-600" in
+  let active_class = "border-2 border-current text-primary" in
   let non_active_class = "border border-body-100 text-legacy-lighter hover:bg-gray-50 hover:no-underline" in
   <a href="<%s (paginated_href ~base_url ~page ~queries) %>"
     class="w-10 h-10 lg:w-14 lg:h-14 rounded-lg flex items-center justify-center <%s if page = current then active_class else non_active_class %>">

src/ocamlorg_frontend/css/partials/buttons.css

@@ -1,45 +1,61 @@
 @layer components {
   .btn {
-    @apply rounded-lg bg-legacy-primary-600 px-5 h-12 font-semibold text-white whitespace-nowrap transition-colors inline-flex items-center justify-center space-x-3 text-base;
+    @apply rounded bg-primary border border-primary font-normal text-lg text-white whitespace-nowrap transition-colors inline-flex items-center justify-center space-x-3;
   }
 
-  .btn:active {
-    @apply bg-legacy-primary-800;
-  }
-
-  .btn:hover {
-    @apply bg-legacy-primary-700;
+  .btn {
+    @apply px-7 h-11;
   }
 
   .btn-lg {
-    @apply px-10 h-14 space-x-4;
+    @apply px-7 h-16 space-x-4;
   }
 
   .btn-sm {
-    @apply px-4 h-10 text-sm;
+    @apply px-5 h-8 text-sm;
+  }
+
+  .btn:active {
+    @apply bg-primary_dark;
+  }
+
+  .btn:hover {
+    @apply bg-primary_dark border-primary_dark;
   }
 
   .btn-secondary {
-    @apply bg-transparent border-legacy-primary-600 text-legacy-primary-600 border;
+    @apply bg-secondary border-secondary;
   }
 
   .btn-secondary:hover {
-    @apply bg-opacity-5 bg-legacy-primary-600;
+    @apply bg-secondary_bt_hover border-secondary_bt_hover;
   }
 
   .btn-secondary:active {
-    @apply bg-opacity-10 bg-legacy-primary-600;
+    @apply bg-secondary_bt_hover;
   }
 
   .btn-tertiary {
-    @apply bg-transparent border;
+    @apply bg-tertiary border-tertiary;
   }
 
   .btn-tertiary:hover {
-    @apply bg-legacy-default dark:bg-legacy-dark-default bg-opacity-10;
+    @apply bg-tertiary_bt_hover border-tertiary_bt_hover;
   }
 
   .btn-tertiary:active {
-    @apply bg-legacy-default dark:bg-legacy-dark-default bg-opacity-20;
+    @apply bg-tertiary_bt_hover;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent border-primary text-primary border text-base font-semibold;
+  }
+
+  .btn-ghost:hover {
+    @apply text-white bg-primary border-primary;
+  }
+
+  .btn-ghost:active {
+    @apply  text-white bg-primary_dark;
   }
 }

src/ocamlorg_frontend/css/styles.css

@@ -171,39 +171,39 @@ tt {
 }
 
 .sidebar a.active {
-  @apply text-legacy-primary-600 bg-legacy-primary-100;
+  @apply text-primary bg-legacy-primary-100;
 }
 
 table a:hover {
   @apply underline;
 }
 
 .right-sidebar a:hover {
-  @apply text-legacy-primary-600;
+  @apply text-primary;
 }
 
 .news-stories button:hover {
-  @apply border-legacy-primary-600 text-legacy-primary-600;
+  @apply border-primary text-primary;
 }
 
 .news-stories button:hover i {
-  @apply text-legacy-primary-600;
+  @apply text-primary;
 }
 
 .top-level-container .prose ul li::before {
   display: none;
 }
 
 footer a:hover {
-  @apply text-legacy-primary-600;
+  @apply text-primary;
 }
 
 [x-cloak] {
   display: none !important;
 }
 
 .link-orange {
-  @apply text-legacy-primary-600 hover:underline;
+  @apply text-primary hover:underline;
 }
 
 .page-toc li a {

src/ocamlorg_frontend/layouts/learn_layout.eml

@@ -81,7 +81,7 @@ let sidebar
 ~(section: section)
 =
   let sidebar_link ~title ~href ~current =
-    <a class="border-l-2 py-2 px-3 rounded-sm leading-6 <%s if current then {|font-bold text-legacy-primary-700 bg-legacy-primary-100 border-legacy-primary-600|} else {|text-legacy-default hover:bg-gray-100 border-transparent|} %>" href="<%s href %>">
+    <a class="border-l-2 py-2 px-3 rounded-sm leading-6 <%s if current then {|font-bold text-legacy-primary-700 bg-legacy-primary-100 border-primary|} else {|text-legacy-default hover:bg-gray-100 border-transparent|} %>" href="<%s href %>">
       <%s title %>
     </a>
   in

src/ocamlorg_frontend/layouts/package_layout.eml

@@ -76,7 +76,7 @@ Layout.base
         <div id="in-package-search" class="relative w-full">
           <div class="flex w-full items-center overflow-hidden">
             <% if Option.is_some search_index_digest then (%>
-              <input id="in-package-search-input" type="search" name="q" class="min-w-0 focus:border-gray-800 text-gray-800 border-legacy-primary-600 h-10 rounded-l-md appearance-none px-4 flex-grow"
+              <input id="in-package-search-input" type="search" name="q" class="min-w-0 focus:border-gray-800 text-gray-800 border-primary h-10 rounded-l-md appearance-none px-4 flex-grow"
                 tabindex="1"
                 autocomplete="off"
                 aria-owns="in-package-search-results"
@@ -87,7 +87,7 @@ Layout.base
                 onfocus="this.select(); this.setAttribute('aria-expanded', true)"
                 onblur="this.setAttribute('aria-expanded', false)"
                 >
-              <div aria-hidden="true" class="h-10 rounded-r-md bg-legacy-primary-600 text-white flex items-center justify-center px-4">
+              <div aria-hidden="true" class="h-10 rounded-r-md bg-primary text-white flex items-center justify-center px-4">
                 <%s! Icons.magnifying_glass "w-6 h-6" %>
               </div>
               <button class="ml-4 btn btn-sm" @click.prevent.stop="search_instructions = !search_instructions" title="show search instructions">

src/ocamlorg_frontend/pages/about.eml

@@ -10,7 +10,7 @@ Layout.render
       <div class="flex items-center justify-center space-x-8 mt-11 lg:space-x-24">
         <div>
           <a
-            class="hover:text-legacy-primary-600 rounded-lg hover:bg-legacy-primary-100 h-28 w-28 inline-block transition-colors"
+            class="hover:text-primary rounded-lg hover:bg-legacy-primary-100 h-28 w-28 inline-block transition-colors"
             href="#strength"
           >
             <%s! Icons.lightning "h-10 w-10 mb-4 m-auto mt-6" %>
@@ -19,7 +19,7 @@ Layout.render
         </div>
         <div>
           <a
-            class="hover:text-legacy-primary-600 h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
+            class="hover:text-primary h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
             href="#history"
           >
             <%s! Icons.clock "h-10 w-10 mb-4 m-auto mt-6" %>
@@ -28,7 +28,7 @@ Layout.render
         </div>
         <div>
           <a
-            class="hover:text-legacy-primary-600 h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
+            class="hover:text-primary h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
             href="#features"
           >
             <%s! Icons.features "h-10 w-10 mb-4 m-auto mt-6" %>

src/ocamlorg_frontend/pages/academic_users.eml

@@ -35,31 +35,31 @@ Layout.render
     </div>
     <div :class="continent != 'All' ? 'hidden' : 'grid-logos'">
       <% users |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
       <% ); %>
     </div>
     <div :class="continent != 'North America' ? 'hidden' : 'grid-logos'">
       <% users |> List.filter (fun x -> x.Data.Academic_institution.continent = "North America") |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
       <% ); %>
     </div>
     <div :class="continent != 'Europe' ? 'hidden' : 'grid-logos'">
       <% users |> List.filter (fun x -> x.Data.Academic_institution.continent = "Europe") |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
       <% ); %>
     </div>
     <div :class="continent != 'Asia' ? 'hidden' : 'grid-logos'">
       <% users |> List.filter (fun x -> x.Data.Academic_institution.continent = "Asia") |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
@@ -73,7 +73,7 @@ Layout.render
     <div class="container-fluid">
       <div class=" ">
         <div class="text-center">
-          <h2 class="font-bold text-legacy-primary-600 mb-6">Academic Resources</h2>
+          <h2 class="font-bold text-primary mb-6">Academic Resources</h2>
           <div class="text-lg text-white mb-16">Here are some of the resources that may be helpful to you</div>
         </div>
 
@@ -107,7 +107,7 @@ Layout.render
       </div>
     </div>
   </div>
-  <div class="bg-legacy-primary-600">
+  <div class="bg-primary">
     <div class="container-fluid">
       <div class="text-center text-white lg:p-16 py-10">
         <h3 class="font-bold mb-6">Interested in Learning More?</h3>