style tabs to align with our design (#9749)

rosieyohannan · web-flow · commit 7c6444367518 · 2025-11-12T15:44:19.000Z
* style tabs as per design

* fix font weights

* push bold to 700
diff --git a/ui/src/css/base.css b/ui/src/css/base.css
@@ -41,7 +41,7 @@ kbd,
 pre {
   font-family: var(--monospace-font-family);
   font-size: 16px;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 b,
diff --git a/ui/src/css/doc.css b/ui/src/css/doc.css
@@ -1387,7 +1387,7 @@
 .doc dl,
 .doc table {
   margin: 0 0 1rem;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 /* inline links pick up the new blue */
diff --git a/ui/src/css/site.css b/ui/src/css/site.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "typeface-inter.css";
 @import "typeface-ibm-plex-mono.css";
+@import "typeface-roboto.css";
 @import "vars.css";
 @import "base.css";
 @import "body.css";
diff --git a/ui/src/css/tabs.css b/ui/src/css/tabs.css
@@ -9,32 +9,43 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  border-bottom: 1px solid var(--color-vapor);
 }
 
 .tablist > ul li {
   align-items: center;
   background-color: #fff;
   cursor: pointer;
   display: flex;
-  font-weight: bold;
+  font-weight: 400;
   line-height: 1.5;
-  padding: 0.25em 1em;
+  padding: 1em 1px;
+  margin-right: 1.5em;
   position: relative;
 }
 
+.tablist > ul li.is-selected {
+  font-weight: 600;
+  border-bottom: 2px solid var(--color-accent-green);
+}
+
+.tablist > ul li p {
+  font-weight: inherit;
+}
+
 .tablist > ul li:focus-visible {
   outline: none;
 }
 
-.tablist.ulist,
-.tablist.ulist > ul li {
+.tablist.ulist {
   margin: 0;
 }
 
-.tablist.ulist > ul li + li {
-  margin-left: 0.25em;
+.tablist.ulist > ul li {
+  margin: 0 1.5em 0 0;
 }
 
+/* Disabled to allow borders to show
 .tabs .tablist li::after {
   content: "";
   display: block;
@@ -44,14 +55,14 @@
   left: 0;
   right: 0;
 }
+*/
 
 .tabs.is-loading .tablist li:not(:first-child),
 .tabs:not(.is-loading) .tablist li:not(.is-selected) {
-  background-color: #f5f5f5;
+  background-color: transparent;
 }
 
-.tabs.is-loading .tablist li:first-child::after,
-.tabs:not(.is-loading) .tablist li.is-selected::after {
+.tabs.is-loading .tablist li:first-child::after {
   background-color: #fff;
 }
 
@@ -69,21 +80,7 @@
 
 .tabpanel {
   background-color: #fff;
-  padding: 1.25em;
-}
-
-.tablist > ul li {
-  border: 1px solid #dcdcdc;
-  border-radius: 8px 8px 0 0;
-}
-
-.tabpanel {
-  border: 1px solid #dcdcdc;
-  border-radius: 0 0 8px 8px;
-}
-
-.tablist > ul li {
-  border-bottom: 0;
+  padding: 1.25em 0;
 }
 
 .tabs.is-loading .tabpanel + .tabpanel,
diff --git a/ui/src/css/toc.css b/ui/src/css/toc.css
@@ -13,7 +13,7 @@
 .toc .toc-menu h3 {
   color: var(--toc-heading-font-color);
   font-size: large;
-  font-weight: 400;
+  font-weight: 500;
   font-family: 'Inter', sans-serif;
   line-height: 1.3;
   margin: 0 -0.5px;
@@ -82,7 +82,7 @@
 .toc .toc-menu a {
   font-family: 'Inter', sans-serif;
   font-size: medium;
-  font-weight: 300;
+  font-weight: 400;
   color: inherit;
   border-left: 1px solid var(--toc-border-color);
   display: inline-block;
diff --git a/ui/src/css/typeface-roboto.css b/ui/src/css/typeface-roboto.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src:
+    url(~@fontsource/roboto/files/roboto-latin-700-normal.woff2) format("woff2"),
+    url(~@fontsource/roboto/files/roboto-latin-700-normal.woff) format("woff");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/ui/src/css/vars.css b/ui/src/css/vars.css
@@ -26,7 +26,7 @@
   --body-line-height: 1.6;
   --body-font-color: var(--color-body-dark);
   --body-font-family: "Inter", sans-serif;
-  --body-font-weight-bold: 600;
+  --body-font-weight-bold: 700;
   --monospace-font-family: "IBM Plex Mono", monospace;
   --monospace-font-weight-bold: 600;
   /* base */
diff --git a/ui/src/partials/article-footer.hbs b/ui/src/partials/article-footer.hbs
@@ -7,13 +7,13 @@
     <div class="inline-flex mt-6 md:mt-0 md:ml-8 space-x-4">
       <button class="rounded-md px-2 py-2 inline-flex justify-center items-center border border-vapor space-x-1">
         <img src="{{uiRootPath}}/img/thumbs-up.svg" alt="Thumbs Up" class="inline-block w-4 h-4">
-        <span class="font-light">
+        <span class="font-normal">
           Yes
         </span>
       </button>
       <button class="rounded-md px-2 py-2 inline-flex justify-center items-center border border-vapor space-x-1">
         <img src="{{uiRootPath}}/img/thumbs-down.svg" alt="Thumbs Up" class="inline-block w-4 h-4">
-        <span class="font-light">
+        <span class="font-normal">
           No
         </span>
       </button>
diff --git a/ui/src/partials/article-info-bar.hbs b/ui/src/partials/article-info-bar.hbs
@@ -23,7 +23,7 @@
   {{#if page.attributes.platform}}
     <div class="flex items-center min-w-fit space-x-1 px-3 py-2 md:py-0 border-t md:border-t-0 md:border-l border-inherit">
       {{#each (split page.attributes.platform ',')}}
-        <span class=" text-[10px] text-terminal-black border rounded-full py-1 px-1.5">{{this}}</span>
+        <span class="text-[10px] text-terminal-black border rounded-full py-1 px-1.5" style="font-family: 'Roboto', sans-serif; font-weight: 700;">{{this}}</span>
       {{/each}}
     </div>
   {{/if}}
diff --git a/ui/src/partials/article-toolbar.hbs b/ui/src/partials/article-toolbar.hbs
@@ -1,3 +1,3 @@
-<div role="navigation" aria-label="Article Toolbar" class="flex flex-col max-w-[800px] md:items-center mx-[32px] md:ml-[3.5rem] lg:ml-12 mt-6 md:mt-12 md:flex-row text-sm font-light" >
+<div role="navigation" aria-label="Article Toolbar" class="flex flex-col max-w-[800px] md:items-center mx-[32px] md:ml-[3.5rem] lg:ml-12 mt-6 md:mt-12 md:flex-row text-sm font-normal" >
   {{> breadcrumbs}}
 </div>
diff --git a/ui/src/partials/article.hbs b/ui/src/partials/article.hbs
@@ -3,7 +3,7 @@
 <h1 class="page flex items-center gap-2">
 {{{this}}}
 {{#if @root.page.attributes.badge}}
-  <span class="text-[10px] rounded-full py-1 px-1.5 {{#if @root.page.attributes.badge-classes}}{{@root.page.attributes.badge-classes}}{{else}}text-terminal-black border{{/if}}" {{#if @root.page.attributes.badge-bg}}style="background-color: {{@root.page.attributes.badge-bg}}; {{#if @root.page.attributes.badge-border}}border: 1px solid {{@root.page.attributes.badge-border}};{{/if}}"{{/if}}>{{@root.page.attributes.badge}}</span>
+  <span class="text-[10px] rounded-full py-1 px-1.5 {{#if @root.page.attributes.badge-classes}}{{@root.page.attributes.badge-classes}}{{else}}text-terminal-black border{{/if}}" {{#if @root.page.attributes.badge-bg}}style="font-family: 'Roboto', sans-serif; font-weight: 700; background-color: {{@root.page.attributes.badge-bg}}; {{#if @root.page.attributes.badge-border}}border: 1px solid {{@root.page.attributes.badge-border}};{{/if}}"{{else}}style="font-family: 'Roboto', sans-serif; font-weight: 700;"{{/if}}>{{@root.page.attributes.badge}}</span>
 {{/if}}
 </h1>
 {{/with}}
diff --git a/ui/src/partials/component-explorer-nav.hbs b/ui/src/partials/component-explorer-nav.hbs
@@ -1,9 +1,9 @@
-<nav data-component-explorer-nav class="flex flex-col md:flex-row md:items-center justify-between text-terminal-black font-medium md:font-light {{#if class}}{{class}}{{/if}} overflow-x-auto whitespace-nowrap gap-3">
+<nav data-component-explorer-nav class="flex flex-col md:flex-row md:items-center justify-between text-terminal-black font-medium md:font-normal {{#if class}}{{class}}{{/if}} overflow-x-auto whitespace-nowrap gap-3">
 
   <ul class="flex flex-col md:flex-row md:space-x-8">
     {{#each options.navList}}
       <li class="flex items-center mr-2">
-        <a href="{{{relativize ./url}}}" class="inline-block px-2 py-2 md:py-3 {{#if (eq ./name @root.page.component.name)}} text-accent-green md:text-inherit border-l-2 md:border-l-0 md:border-b-2 border-accent-green font-medium {{/if}} ">
+        <a href="{{{relativize ./url}}}" class="inline-block px-2 py-2 md:py-3 {{#if (eq ./name @root.page.component.name)}} text-accent-green md:text-inherit border-l-2 md:border-l-0 md:border-b-2 border-accent-green font-semibold {{/if}} ">
           {{{./label}}}
         </a>
       </li>
diff --git a/ui/src/partials/footer-content.hbs b/ui/src/partials/footer-content.hbs
@@ -2,7 +2,7 @@
 
   <img src="{{uiRootPath}}/img/logo.svg" alt="CircleCI Logo" class="h-[44px]">
 
-  <div class="font-light mt-6">
+  <div class="font-normal mt-6">
     <ul class="flex space-x-6 space-y-4 flex-col md:flex-row">
       <li>
         <p>
diff --git a/ui/src/partials/navigation-tree.hbs b/ui/src/partials/navigation-tree.hbs
@@ -1,5 +1,5 @@
 {{#if navigation.length}}
-<ul class="{{#if (and class (not (eq class "")))}}{{class}} {{/if}}text-terminal-black font-light">
+<ul class="{{#if (and class (not (eq class "")))}}{{class}} {{/if}}text-terminal-black font-normal">
   {{#each navigation}}
   <li data-navigation-tree-content class="my-1" data-depth="{{or ../level 0}}" {{#if (eq ./url @root.page.url)}} data-current{{/if}}>
     {{#if ./content}}

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ kbd,`
`41`	`41`	`pre {`
`42`	`42`	`font-family: var(--monospace-font-family);`
`43`	`43`	`font-size: 16px;`
`44`		`- font-weight: 300;`
	`44`	`+ font-weight: 400;`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`b,`
Original file line number	Diff line number	Diff line change
`@@ -1387,7 +1387,7 @@`
`1387`	`1387`	`.doc dl,`
`1388`	`1388`	`.doc table {`
`1389`	`1389`	`margin: 0 0 1rem;`
`1390`		`- font-weight: 300;`
	`1390`	`+ font-weight: 400;`
`1391`	`1391`	`}`
`1392`	`1392`
`1393`	`1393`	`/* inline links pick up the new blue */`