fix font weights

rosieyohannan · rosieyohannan · commit cf3fed2ddbad · 2025-11-12T14:12:16.000Z
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/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/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 */`