From cacd824f2b145c370e50e24f8a95a4621bbd1f99 Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 8 Jul 2026 16:15:44 -0300 Subject: [PATCH 1/3] refactor(styles): theme-adaptive shared code theme (.hljs) [spike #6606] Convert the shared highlight.js theme from its hardcoded dark palette to semantic tokens, so code blocks adapt to light/dark instead of always rendering dark. Code surface -> --color-surface-subtle; syntax colours -> the --color-text-* palette (first pass, lifted from the onboarding code card). Spike: .hljs is shared app-wide incl. the interactive value editor, so this is a visible change everywhere. Opened to see the real diff via CI visual regression before committing to a designed palette. Refs #6606 Co-Authored-By: Claude Opus 4.8 --- frontend/web/styles/3rdParty/_hljs.scss | 34 +++++++++++++------------ 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/frontend/web/styles/3rdParty/_hljs.scss b/frontend/web/styles/3rdParty/_hljs.scss index 2b564e813435..8486d9892bb9 100644 --- a/frontend/web/styles/3rdParty/_hljs.scss +++ b/frontend/web/styles/3rdParty/_hljs.scss @@ -69,11 +69,11 @@ } .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; From 678bcf18f0b2af73aa4d4b245aa947e3efb2672f Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 8 Jul 2026 16:45:21 -0300 Subject: [PATCH 2/3] refactor(styles): drop two redundant !important in the code theme Both were already won by the cascade: .select-language span.primary follows .active at equal specificity, and code[contenteditable].hljs outranks .hljs. The remaining !important beat highlight.js's own CSS / the Button / global resets. Refs #6606 Co-Authored-By: Claude Opus 4.8 --- frontend/web/styles/3rdParty/_hljs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/web/styles/3rdParty/_hljs.scss b/frontend/web/styles/3rdParty/_hljs.scss index 8486d9892bb9..6c3e64213b81 100644 --- a/frontend/web/styles/3rdParty/_hljs.scss +++ b/frontend/web/styles/3rdParty/_hljs.scss @@ -62,7 +62,7 @@ font-weight: 500; } &.primary { - color: $primary !important; + color: $primary; } } } @@ -298,6 +298,6 @@ code.txt { } code[contenteditable='false'].hljs { - cursor: default !important; + cursor: default; @include customScrollDark(); } From 44a3541b96bde9e9f7630971130003f2b812c58a Mon Sep 17 00:00:00 2001 From: Talisson Costa Date: Wed, 8 Jul 2026 16:49:33 -0300 Subject: [PATCH 3/3] docs(storybook): CodeHelp stories covering the app's use cases Render CodeHelp with the real codeHelp snippets (install, init, create identity, set traits) plus collapsed-header and embedded variants, so the shared code block can be QA'd in light and dark (theme toggle) and across languages (dropdown) in one place - the safety net for the #6606 theme change. Registers window.Button in the Storybook preview, since CodeHelp uses the global Button like Select. Refs #6606 Co-Authored-By: Claude Opus 4.8 --- frontend/.storybook/preview.js | 2 + .../documentation/pages/CodeHelp.stories.tsx | 77 +++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 frontend/documentation/pages/CodeHelp.stories.tsx diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js index 54f8d7f7c031..9925a79b1969 100644 --- a/frontend/.storybook/preview.js +++ b/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 = { diff --git a/frontend/documentation/pages/CodeHelp.stories.tsx b/frontend/documentation/pages/CodeHelp.stories.tsx new file mode 100644 index 000000000000..1cb58d0e31fd --- /dev/null +++ b/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 = { + 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 + +// 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), + }, +}