Merge pull request #2061 from OctopusDeploy/sf/mac-os-bold

Bold text rendering for Mac OS.
OctopusDeploy · Oct 30, 2023 · 7d61d0b · 7d61d0b
2 parents 1ac9ddb + 78846ab
commit 7d61d0b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 40 deletions.
diff --git a/dictionary-octopus.txt b/dictionary-octopus.txt
@@ -12,6 +12,8 @@ hotfix
 hotfixes
 HSTS
 ITSM
+kustomization
+kustomize
 lifecycles
 maxage
 msiexec
@@ -24,6 +26,7 @@ Octopub
 octopusdeploy
 octopusid
 octopuslabs
+Octostache
 OIDC
 onlylogs
 reprioritize
@@ -36,11 +39,12 @@ Schannel
 sthumb
 swaggerui
 systemprofile
+tabpanel
 Trivy
 upgradelog
+WCAG
+webfonts
 WIXUI
 workertools
+xlarge
 xmark
-kustomize
-Octostache
-kustomization
diff --git a/public/docs/css/main.css b/public/docs/css/main.css
@@ -171,6 +171,7 @@ mark {
 
 strong {
     font-weight: bold;
+    font-family: var(--bold-font);
 }
 
 .page-content > *,
@@ -200,32 +201,32 @@ strong {
 
 .hint {
     color: var(--color-hint);
-    border-color: var(--bordercolor-hint);
-    background-color: var(--bgcolor-hint);
+    border-color: var(--border-color-hint);
+    background-color: var(--bg-color-hint);
 }
 
 .info {
     color: var(--color-info);
-    border-color: var(--bordercolor-info);
-    background-color: var(--bgcolor-info);
+    border-color: var(--border-color-info);
+    background-color: var(--bg-color-info);
 }
 
 .success {
     color: var(--color-success);
-    border-color: var(--bordercolor-success);
-    background-color: var(--bgcolor-success);
+    border-color: var(--border-color-success);
+    background-color: var(--bg-color-success);
 }
 
 .warning {
     color: var(--color-warning);
-    border-color: var(--bordercolor-warning);
-    background-color: var(--bgcolor-warning);
+    border-color: var(--border-color-warning);
+    background-color: var(--bg-color-warning);
 }
 
 .problem {
     color: var(--color-problem);
-    border-color: var(--bordercolor-problem);
-    background-color: var(--bgcolor-problem);
+    border-color: var(--border-color-problem);
+    background-color: var(--bg-color-problem);
 }
 
 .question {
@@ -594,7 +595,7 @@ nav.skip-links a:focus {
 }
 
 .site-nav {
-    background-color: var(--bgcolor-menu);
+    background-color: var(--bg-color-menu);
     height: calc(100vh - 110px);
     top: 110px;
 }
@@ -666,7 +667,7 @@ nav.skip-links a:focus {
 }
 
 .site-nav details[open] {
-    border-inline-start: 1px solid var(--bordercolor-menu-open);
+    border-inline-start: 1px solid var(--border-color-menu-open);
 }
 
 .site-nav details summary::-webkit-details-marker,
@@ -685,7 +686,7 @@ nav.skip-links a:focus {
 }
 
 .site-nav details[open] > summary {
-    background-color: var(--bgcolor-menu-open);
+    background-color: var(--bg-color-menu-open);
     font-weight: bold;
 }
 
@@ -746,7 +747,7 @@ nav.skip-links a:focus {
 }
 
 .content-group header {
-    border-block-end: 1px solid var(--bordercolor-header);
+    border-block-end: 1px solid var(--border-color-header);
     margin-block-end: 1.5rem;
     padding-block-end: 1.5rem;
 }
@@ -1364,7 +1365,7 @@ nav.skip-links a:focus {
     text-align: center;
     padding: 0.2em 0.6em 0.3em 0.6em;
     color: var(--color-hint);
-    background-color: var(--bgcolor-hint);
+    background-color: var(--bg-color-hint);
 }
 
 .site-search-results > li {
@@ -1413,7 +1414,7 @@ nav.skip-links a:focus {
     text-align: center;
     padding: 0.2em 1.6em 0.3em 1.6em;
     color: var(--color-hint);
-    background-color: var(--bgcolor-hint);
+    background-color: var(--bg-color-hint);
 }
 
 @media (max-width: 860px) {
@@ -1834,18 +1835,18 @@ a.button {
     text-align: center;
     padding: 0.2em 1.6em 0.3em 1.6em;
     color: var(--color-hint);
-    background-color: var(--bgcolor-hint);
+    background-color: var(--bg-color-hint);
 }
 
 a.button:hover,
 a.button:focus {
-    color: var(--bgcolor-hint);
+    color: var(--bg-color-hint);
     background-color: var(--color-hint);
 }
 
 a.button.trial {
     color: var(--color-trial);
-    background-color: var(--bgcolor-trial);
+    background-color: var(--bg-color-trial);
 }
 
 a.button.trial:hover,
@@ -1881,7 +1882,7 @@ a.button.trial:focus {
     margin-block-start: 4px;
     border: 2px solid var(--border-color-tab);
     border-radius: var(--standard-radius) var(--standard-radius) 0 0;
-    background: var(--bgcolor-tab);
+    background: var(--bg-color-tab);
     outline: none;
     font-size: var(--font-size-small);
     font-weight: bold;

diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css
@@ -1,5 +1,5 @@
 /* Recommended Tools
-    Check accessibility for colour combinations
+    Check accessibility for color combinations
     https://toolness.github.io/accessible-color-matrix/
 */
 
@@ -82,44 +82,44 @@
     --color-subtitle: var(--navy-600);
     --font-size-subtitle: var(--font-size-large);
 
-    --bordercolor-header: var(--navy-200);
+    --border-color-header: var(--navy-200);
 
     --color-menu-link: var(--navy-600);
     --color-menu-link-alt: var(--blue-500);
     --color-menu-marker: var(--navy-300);
-    --bgcolor-menu: var(--blue-qqq);
-    --bgcolor-menu-open: var(--blue-100);
-    --bordercolor-menu-open: var(--navy-200);
+    --bg-color-menu: var(--blue-qqq);
+    --bg-color-menu-open: var(--blue-100);
+    --border-color-menu-open: var(--navy-200);
     --gap-menu: 0.6em;
 
     --navigation-width: 280px;
 
-    --bgcolor-tab: var(--navy-200);
+    --bg-color-tab: var(--navy-200);
     --border-color-tab: var(--navy-200);
     --border-color-tab-active: var(--navy-400);
 
     --color-hint: #124164;
-    --bgcolor-hint: #e5f4ff;
-    --bordercolor-hint: var(--blue-500);
+    --bg-color-hint: #e5f4ff;
+    --border-color-hint: var(--blue-500);
 
     --color-info: #124164;
-    --bgcolor-info: #e5f4ff;
-    --bordercolor-info: var(--blue-500);
+    --bg-color-info: #e5f4ff;
+    --border-color-info: var(--blue-500);
 
     --color-success: #04502f;
-    --bgcolor-success: #e8ffeb;
-    --bordercolor-success: #00b065;
+    --bg-color-success: #e8ffeb;
+    --border-color-success: #00b065;
 
     --color-warning: #a23623;
-    --bgcolor-warning: #fefae9;
-    --bordercolor-warning: #fc8431;
+    --bg-color-warning: #fefae9;
+    --border-color-warning: #fc8431;
 
     --color-problem: #931919;
-    --bgcolor-problem: #fff2ee;
-    --bordercolor-problem: #ff4848;
+    --bg-color-problem: #fff2ee;
+    --border-color-problem: #ff4848;
 
     --color-trial: var(--blue-grey-medium);
-    --bgcolor-trial: var(--light-green);
+    --bg-color-trial: var(--light-green);
 
     /* To be checked and cleaned */
 
@@ -135,6 +135,7 @@
 
     --heading-font: RobotoBold,Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
     --body-font: RobotoRegular,Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
+    --bold-font: RobotoBold,'Helvetica Neue',Helvetica,Arial,sans-serif;
     --code-font: Consolas, monaco, monospace;