refactor(styles): theme-adaptive shared code theme (.hljs) [spike #6606]

frontend/.storybook/preview.js

@@ -17,6 +17,7 @@ import ReactSelect, { components as selectComponents } from 'react-select'
 import Tooltip from '../web/components/Tooltip'
 import Row from '../web/components/base/grid/Row'
 import FormGroup from '../web/components/base/grid/FormGroup'
+import Button from '../web/components/base/forms/Button'
 
 window.React = React
 window.propTypes = PropTypes
@@ -55,6 +56,7 @@ global.Select = (props) =>
 window.Tooltip = Tooltip
 window.Row = Row
 window.FormGroup = FormGroup
+window.Button = Button
 
 /** @type { import('storybook').Preview } */
 const preview = {

frontend/documentation/pages/CodeHelp.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from 'storybook'
+
+import CodeHelp from 'components/CodeHelp'
+import Constants from 'common/constants'
+
+// A stand-in environment key for the snippets.
+const ENV = 'YOUR_ENVIRONMENT_KEY'
+
+const meta: Meta<typeof CodeHelp> = {
+  component: CodeHelp,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The shared code-example component, used across SDK setup, identities, segments and environment docs. These stories mirror those real use cases with the actual `codeHelp` snippets. Use the theme toggle in the toolbar to QA the code block (surface + syntax colours) in light and dark, and the language dropdown to check each SDK.',
+      },
+    },
+    layout: 'padded',
+  },
+  title: 'Components/CodeHelp',
+}
+export default meta
+
+type Story = StoryObj<typeof CodeHelp>
+
+// Installing the SDK (SDK integration page).
+export const Install: Story = {
+  args: {
+    showInitially: true,
+    snippets: Constants.codeHelp.INSTALL,
+    title: 'Installing the SDK',
+  },
+}
+
+// Initialising the client, keyed by the environment (the most common use).
+export const Initialise: Story = {
+  args: {
+    showInitially: true,
+    snippets: Constants.codeHelp.INIT(ENV),
+    title: 'Initialising your project',
+  },
+}
+
+// Creating an identity (identities pages).
+export const CreateIdentity: Story = {
+  args: {
+    showInitially: true,
+    snippets: Constants.codeHelp.CREATE_USER(ENV),
+    title: 'Creating an identity',
+  },
+}
+
+// Setting traits (identities pages).
+export const SetTraits: Story = {
+  args: {
+    showInitially: true,
+    snippets: Constants.codeHelp.USER_TRAITS(ENV),
+    title: 'Setting traits',
+  },
+}
+
+// Default entry point: the collapsed CalloutBar header before it's opened.
+export const CollapsedHeader: Story = {
+  args: {
+    snippets: Constants.codeHelp.INSTALL,
+    title: 'Installing the SDK',
+  },
+}
+
+// Embedded with no header and no docs links (e.g. inside another panel).
+export const Embedded: Story = {
+  args: {
+    hideDocs: true,
+    hideHeader: true,
+    snippets: Constants.codeHelp.INIT(ENV),
+  },
+}

frontend/web/styles/3rdParty/_hljs.scss

@@ -62,18 +62,18 @@
         font-weight: 500;
       }
       &.primary {
-        color: $primary !important;
+        color: $primary;
       }
     }
   }
 }
 .hljs {
   a {
-    color: white !important;
+    color: var(--color-text-action) !important;
     text-decoration: underline;
     .hljs-regexp,
     .hljs-comment {
-      color: white !important;
+      color: var(--color-text-action) !important;
     }
   }
   cursor: text;
@@ -83,9 +83,11 @@
   overflow-x: auto;
   @include customScrollDark();
   padding: 0.5em;
-  background: $code-bg;
+  // #6606 spike: theme-adaptive code surface (light in light mode, dark in
+  // dark) via semantic tokens, replacing the hardcoded dark $code-bg.
+  background: var(--color-surface-subtle);
   border-radius: $border-radius;
-  border: 1px solid $basic-alpha-8;
+  border: 1px solid var(--color-border-default);
   &.no-pad {
     margin-bottom: 0;
   }
@@ -99,13 +101,13 @@
 }
 .yaml {
   .hljs-bullet {
-    color: #eee;
+    color: var(--color-text-default);
   }
   .hljs-attr {
-    color: #64c77c;
+    color: var(--color-text-success);
   }
   .hljs-string {
-    color: #4c96ec;
+    color: var(--color-text-info);
   }
 }
 .hljs-container {
@@ -177,7 +179,7 @@
 }
 
 .hljs {
-  color: $code-color;
+  color: var(--color-text-default);
   padding: 18px;
 }
 
@@ -186,7 +188,7 @@
 }
 .hljs-strong,
 .hljs-emphasis {
-  color: #a8a8a2;
+  color: var(--color-text-secondary);
 }
 
 .hljs-bullet,
@@ -195,12 +197,12 @@
 .hljs-number,
 .hljs-regexp,
 .hljs-literal {
-  color: $info;
+  color: var(--color-text-info);
 }
 
 .hljs-code,
 .hljs-selector-class {
-  color: #a6e22e;
+  color: var(--color-text-success);
 }
 
 .hljs-emphasis {
@@ -213,15 +215,15 @@
 .hljs-attribute,
 .hljs-name,
 .hljs-variable {
-  color: $warning;
+  color: var(--color-text-action);
 }
 
 .hljs-params {
-  color: #b9b9b9;
+  color: var(--color-text-secondary);
 }
 
 .hljs-string {
-  color: $success;
+  color: var(--color-text-success);
 }
 
 .hljs-subst,
@@ -235,13 +237,13 @@
 .hljs-template-tag,
 .hljs-template-variable,
 .hljs-addition {
-  color: $secondary400;
+  color: var(--color-text-info);
 }
 
 .hljs-comment,
 .hljs-deletion,
 .hljs-meta {
-  color: #7f7f7f;
+  color: var(--color-text-secondary);
 }
 .value-editor pre {
   overflow: hidden;
@@ -296,6 +298,6 @@ code.txt {
 }
 
 code[contenteditable='false'].hljs {
-  cursor: default !important;
+  cursor: default;
   @include customScrollDark();
 }