Style note boxes more like current docs (#8097)

* Style note boxes more like current docs

- Switch the body font to Helvetica. Raleway isn't intended as a body
  copy face. We should continue using a Helvetica stack.
- Import the icons and colors for tip/warning/note boxes to match the
  current book.

* Use IBM plex as the body typeface

Author: markstory

.vitepress/config.js

@@ -30,6 +30,7 @@ export default defineConfig({
     ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
     ['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
     ['link', { href: 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap', rel: 'stylesheet' }],
+    ['link', { href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap', rel: 'stylesheet'}],
   ],
   rewrites: {
     ':version/:slug*': ':version/:slug*'

.vitepress/theme/custom.css

@@ -1,9 +1,23 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 22, 2016 */
+@font-face {
+    font-family: 'cake_dingbatsregular';
+    src: url('/fonts/cakedingbats-webfont.eot');
+    src: url('/fonts/cakedingbats-webfont.eot?#iefix') format('embedded-opentype'),
+         url('/fonts/cakedingbats-webfont.woff2') format('woff2'),
+         url('/fonts/cakedingbats-webfont.woff') format('woff'),
+         url('/fonts/cakedingbats-webfont.ttf') format('truetype'),
+         url('/fonts/cakedingbats-webfont.svg#cake_dingbatsregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
 /* CakePHP Theme Customization */
 :root {
     --cake-color-link: #2D7EA4;
     --cake-color-progress: #d33c43;
 
     --vp-font-family-base: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --vp-font-family-body: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
 
     /* CakePHP Brand Colors - Official Red */
     --vp-c-brand-1: #d33c43;
@@ -16,6 +30,12 @@
     --vp-c-red-2: #c8363d;
     --vp-c-red-3: #b02e34;
 
+    /* custom blocks (warning, info, tip, added, deprecated) */
+    --vp-custom-block-tip-bg: #d9edf7;
+    --vp-custom-block-note-bg: #fcf8e3;
+    --vp-custom-block-warning-bg: #f2dede;
+    --vp-custom-block-info-bg: #dff0d8;
+    --vp-custom-block-font-size: 14px;
 }
 
 /* Dark theme adjustments */
@@ -40,3 +60,47 @@
 .vp-doc a {
     color: var(--cake-color-link);
 }
+.vp-doc strong,
+.vp-doc em,
+.vp-doc i,
+.vp-doc b,
+.vp-doc li,
+.vp-doc p {
+    font-family: var(--vp-font-family-body);
+}
+
+/* Warnings, Info, Tip, Added, Deprecated callout blocks */
+.custom-block-title {
+    padding-left: 33px;
+    position: relative;
+}
+.custom-block-title:before {
+    display: block;
+    font-family: 'cake_dingbatsregular';
+    font-size: 24px;
+    line-height: 24px;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    user-select: none;
+}
+.custom-block.tip .custom-block-title:before {
+    content: 'X';
+    color: #97CAE4;
+}
+.custom-block.note .custom-block-title:before {
+    color: #E2C99C;
+    content: 'U';
+}
+.custom-block.warning .custom-block-title:before {
+    color: #E0B9B9;
+    content: 'W';
+}
+.custom-block.deprecated .custom-block-title:before {
+    color: #E0B9B9;
+    content: 'H';
+}
+.custom-block.info .custom-block-title:before {
+    color: #A7D096;
+    content: 'V';
+}