Merge pull request #18 from boostorg/develop

fix: var styling fixes

Author: fromagge

static/css/v3/code-block.css

@@ -1,7 +1,7 @@
 :root {
   --code-block-bg: var(--color-bg-secondary);
   --code-block-border: var(--color-border);
-  --code-block-text: var(--color-syntax-text);
+  --code-block-text: var(--color-syntax-cpp-text);
   --code-block-bg-standalone: var(--color-primary-grey-100);
   --code-block-border-standalone: var(--color-border);
   --code-block-bg-grey: var(--color-primary-grey-100);
@@ -67,7 +67,7 @@
 
 .code-block__inner code {
   font-weight: 500;
-  color: var(--color-syntax-text) !important;
+  color: var(--color-syntax-cpp-text) !important;
   white-space: break-spaces !important;
 }
 

static/css/v3/content.css

@@ -35,7 +35,7 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
 
 .content-detail-icon__icon:hover {
   color: var(--color-icon-primary);
-  cursor: pointer;
+  cursor: default;
 }
 
 .content-detail-icon__icon svg {

static/css/v3/header.css

@@ -140,7 +140,7 @@
   gap: 2px;
   height: 24px;
   padding: 8px;
-  color: var(--Text-Primary, #050816);
+  color: var(--color-text-primary, #050816);
   font-family: var(--Typefaces-Sans, "Mona Sans VF");
   font-size: var(--Sizes-XS, 12px);
   font-style: normal;

static/css/v3/semantics.css

@@ -86,7 +86,8 @@
   --color-syntax-comments: var(--color-syntax-strong-grey);
   --color-syntax-green: var(--color-syntax-strong-green);
   --color-syntax-pink: var(--color-syntax-strong-pink);
-  --color-syntax-text: var(--color-primary-black);
+  --color-syntax-cpp-text: var(--color-primary-black);
+  --color-syntax-hljs-text: var(--color-primary-black);
   --color-syntax-yellow: var(--color-syntax-strong-yellow);
 
   /* ============================================

static/css/v3/themes.css

@@ -70,14 +70,13 @@ html.dark {
   --color-syntax-comments: var(--color-syntax-weak-grey);
   --color-syntax-green: var(--color-syntax-weak-green);
   --color-syntax-pink: var(--color-syntax-weak-pink);
-  --color-syntax-text: var(--color-primary-white);
+  --color-syntax-cpp-text: var(--color-primary-white);
   --color-syntax-yellow: var(--color-syntax-weak-yellow);
 
   /* Tag */
   --color-tag-fill: var(--color-primary-grey-900);
   --color-tag-fill-hover: var(--color-primary-grey-850);
   --color-tag-stroke: #ffffff1a;
-  /* Category tag dark: single source for neutral and colored tag surfaces (no raw primitives in category-tags.css) */
   --color-tag-neutral-bg: var(--color-primary-grey-900);
   --color-tag-neutral-bg-hover: var(--color-primary-grey-800);
   --color-tag-neutral-border: var(--color-primary-grey-900);
@@ -86,21 +85,19 @@ html.dark {
   --color-tag-colored-border: var(--color-primary-grey-800);
   --color-tag-colored-text: var(--color-text-primary);
 
-  /* Code block (dark backgrounds + contrast so code is readable) */
   --code-block-bg-standalone: var(--color-primary-grey-900);
   --code-block-border-standalone: var(--color-border);
   --code-block-bg-grey: var(--color-primary-grey-900);
   --code-block-card-btn-bg: var(--color-primary-grey-800);
 
-  /* Syntax highlighting (C++ / cpp-highlight, Atom One Dark palette) */
   --color-syntax-keyword: #c678dd;
   --color-syntax-string: #98c379;
   --color-syntax-preprocessor: #e06c75;
   --color-syntax-comment: #5c6370;
   --color-syntax-attribute: #d19a66;
   --color-syntax-number: #98c379;
   --color-syntax-function: #61afef;
-  --color-syntax-text: #abb2bf;
+  --color-syntax-hljs-text: #abb2bf;
 
   /* Text */
   --color-text-error: var(--color-error-mid);

static/css/v3/wysiwyg-editor.css

@@ -429,7 +429,7 @@ background-color: var(--color-surface-brand-accent-default, #f7f7f8) !important;
 .wysiwyg-editor__prose pre code {
   padding: 0;
   background: none;
-  color: var(--color-syntax-text, var(--color-text-primary));
+  color: var(--color-syntax-hljs-text, var(--color-text-primary));
   font-weight: inherit;
   font-size: inherit;
   border-radius: 0;