Skip to content

refactor(styles): theme-adaptive shared code theme #8023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
talissoncosta wants to merge 9 commits into
base: main
Choose a base branch
from
Open

refactor(styles): theme-adaptive shared code theme #8023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
edcf4f0
feat(tokens): add code syntax colour tokens
talissoncosta Jul 17, 2026
c0035f9
refactor(styles): theme-adaptive shared code theme
talissoncosta Jul 17, 2026
9e25723
refactor(components): add embedded prop, explicit Button import, getR…
talissoncosta Jul 17, 2026
64027e3
test(storybook): add Highlight stories
talissoncosta Jul 17, 2026
7a4c081
fix(styles): markup tag names use the title colour, not red
talissoncosta Jul 17, 2026
904981b
test(storybook): add JSX Highlight story
talissoncosta Jul 17, 2026
dd347ec
fix(code-help): correct the React init snippet
talissoncosta Jul 8, 2026
a353029
fix(styles): only show the embedded code scrollbar on overflow
talissoncosta Jul 17, 2026
a1f42d2
fix(code-help): copy real brackets, not HTML entities
talissoncosta Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/.storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ global.Select = (props) =>
window.Tooltip = Tooltip
window.Row = Row
window.FormGroup = FormGroup
// isMobile is set at app boot; stub it so components that read it render in Storybook.
window.isMobile = false

/** @type { import('storybook').Preview } */
const preview = {
Expand Down
8 changes: 4 additions & 4 deletions frontend/common/code-help/create-user/create-user-next.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function HomePage() {

export default function App({ Component, pageProps, flagsmithState } {
return (
<FlagsmithProvider
<FlagsmithProvider
serverState={flagsmithState}
options={{
environmentID: "${envId}",${
Expand All @@ -32,9 +32,9 @@ export default function App({ Component, pageProps, flagsmithState } {
: ''
}
}}
flagsmith={flagsmith}&gt;
&lt;Component {...pageProps} />
&lt;/FlagsmithProvider>
flagsmith={flagsmith}>
<Component {...pageProps} />
</FlagsmithProvider>
);
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/common/code-help/create-user/create-user-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { FlagsmithProvider } from '${NPM_CLIENT}/react';

export default function App() {
return (
&lt;FlagsmithProvider
<FlagsmithProvider
options={{
environmentID: '${envId}',${
Constants.isCustomFlagsmithUrl()
Expand All @@ -20,9 +20,9 @@ export default function App() {
identity: '${userId || USER_ID}',
traits: {${TRAIT_NAME}: 21},
}}
flagsmith={flagsmith}&gt;
flagsmith={flagsmith}>
{...Your app}
&lt;/FlagsmithProvider>
</FlagsmithProvider>
);
}

Expand Down
32 changes: 16 additions & 16 deletions frontend/common/code-help/init/init-next-app-router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import { FeatureFlagProvider } from "./components/FeatureFlagProvider";

export default async function RootLayout({
children,
}: Readonly&lt;{
}: Readonly<{
children: React.ReactNode;
}&gt;) {
}>) {
await flagsmith.init({
environmentID: "${envId}",${
Constants.isCustomFlagsmithUrl()
Expand All @@ -21,16 +21,16 @@ export default async function RootLayout({
const serverState = flagsmith.getState();

return (
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta name="viewport" content="initial-scale=1, width=device-width" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;FeatureFlagProvider serverState={serverState}&gt;
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</head>
<body>
<FeatureFlagProvider serverState={serverState}>
{children}
&lt;/FeatureFlagProvider&gt;
&lt;/body&gt;
&lt;/html&gt;
</FeatureFlagProvider>
</body>
</html>
);
}

Expand All @@ -48,13 +48,13 @@ export const FeatureFlagProvider = ({
}: {
serverState: IState;
children: ReactNode;
}) =&gt; {
}) => {
const flagsmithInstance = useRef(createFlagsmithInstance());

return (
&lt;FlagsmithProvider flagsmith={flagsmithInstance.current} serverState={serverState}>
&lt;&gt;{children}&lt;/&gt;
&lt;/FlagsmithProvider&gt;
<FlagsmithProvider flagsmith={flagsmithInstance.current} serverState={serverState}>
<>{children}</>
</FlagsmithProvider>
);
};

Expand All @@ -69,6 +69,6 @@ export default function HomePage() {
const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value

return (
&lt;&gt;{...}&lt;/&gt;
<>{...}</>
);
}`
10 changes: 5 additions & 5 deletions frontend/common/code-help/init/init-next-pages-router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { FlagsmithProvider } from '@flagsmith/flagsmith/react';

export default function App({ Component, pageProps, flagsmithState } {
return (
&lt;FlagsmithProvider
<FlagsmithProvider
serverState={flagsmithState}
options={{
environmentID: "${envId}",${
Expand All @@ -17,9 +17,9 @@ export default function App({ Component, pageProps, flagsmithState } {
: ''
}
}}
flagsmith={flagsmith}&gt;
&lt;Component {...pageProps} />
&lt;/FlagsmithProvider>
flagsmith={flagsmith}>
<Component {...pageProps} />
</FlagsmithProvider>
);
}

Expand All @@ -43,6 +43,6 @@ export default function HomePage() {
const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled
const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value
return (
&lt;>{...}&lt;/>
<>{...}</>
);
}`
38 changes: 18 additions & 20 deletions frontend/common/code-help/init/init-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,33 @@ import Constants from 'common/constants'
export default (
envId,
{ FEATURE_NAME, FEATURE_NAME_ALT, LIB_NAME, NPM_CLIENT },
) => `// App root
import ${LIB_NAME} from "${NPM_CLIENT}";
import { FlagsmithProvider } from '@flagsmith/flagsmith/react';
) => `import ${LIB_NAME} from "${NPM_CLIENT}";
import { FlagsmithProvider, useFlags } from '${NPM_CLIENT}/react';

export function HomePage() {
const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled
const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value
return (
<>
{\`${FEATURE_NAME}: \${${FEATURE_NAME}}\`}
{\`${FEATURE_NAME_ALT}: \${${FEATURE_NAME_ALT}}\`}
</>
);
}

export default function App() {
return (
&lt;FlagsmithProvider
<FlagsmithProvider
options={{
environmentID: '${envId}',${
Constants.isCustomFlagsmithUrl()
? `\n api: '${Constants.getFlagsmithSDKUrl()}',`
: ''
}
}}
flagsmith={flagsmith}&gt;
{...Your app}
&lt;/FlagsmithProvider>
);
}

// Home Page
import ${LIB_NAME} from '${NPM_CLIENT}';
import { useFlags, useFlagsmith } from '${NPM_CLIENT}/react';

export default function HomePage() {
const flags = useFlags(['${FEATURE_NAME}','${FEATURE_NAME_ALT}']); // only causes re-render if specified flag values / traits change
const ${FEATURE_NAME} = flags.${FEATURE_NAME}.enabled
const ${FEATURE_NAME_ALT} = flags.${FEATURE_NAME_ALT}.value
return (
&lt;>{...}&lt;/>
flagsmith={${LIB_NAME}}>
<HomePage />
</FlagsmithProvider>
);
}`
10 changes: 5 additions & 5 deletions frontend/common/code-help/traits/traits-next.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,15 @@ export default function HomePage() {
};

return (
&lt;>{...}&lt;/>
<>{...}</>
);
}

//Option 2: Alternatively, if you wish to do this serverside

export default function App({ Component, pageProps, flagsmithState } {
return (
&lt;FlagsmithProvider
<FlagsmithProvider
serverState={flagsmithState}
options={{
environmentID: "${envId}",${
Expand All @@ -40,9 +40,9 @@ export default function App({ Component, pageProps, flagsmithState } {
: ''
}
}}
flagsmith={flagsmith}&gt;
&lt;Component {...pageProps} />
&lt;/FlagsmithProvider>
flagsmith={flagsmith}>
<Component {...pageProps} />
</FlagsmithProvider>
);
}

Expand Down
8 changes: 4 additions & 4 deletions frontend/common/code-help/traits/traits-react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { FlagsmithProvider } from '${NPM_CLIENT}/react';

export default function App() {
return (
&lt;FlagsmithProvider
<FlagsmithProvider
options={{
environmentID: '${envId}',${
Constants.isCustomFlagsmithUrl()
Expand All @@ -20,9 +20,9 @@ export default function App() {
identity: '${userId || USER_ID}',
traits: {${TRAIT_NAME}: 21},
}}
flagsmith={flagsmith}&gt;
flagsmith={flagsmith}>
{...Your app}
&lt;/FlagsmithProvider>
</FlagsmithProvider>
);
}

Expand All @@ -46,6 +46,6 @@ export default function HomePage() {
};

return (
&lt;>{...}&lt;/>
<>{...}</>
);
}`
11 changes: 11 additions & 0 deletions frontend/common/theme/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,17 @@
"warning": { "cssVar": "--color-text-warning", "light": "#ff9f43", "dark": "#ff9f43" },
"info": { "cssVar": "--color-text-info", "light": "#0aaddf", "dark": "#0aaddf" }
},
"code": {
"text": { "cssVar": "--color-code-text", "light": "#2d3443", "dark": "#9da4ae" },
"comment": { "cssVar": "--color-code-comment", "light": "#9da4ae", "dark": "#656d7b" },
"keyword": { "cssVar": "--color-code-keyword", "light": "#6837fc", "dark": "#906af6" },
"name": { "cssVar": "--color-code-name", "light": "#ef4d56", "dark": "#f57c78" },
"literal": { "cssVar": "--color-code-literal", "light": "#0b8bb2", "dark": "#45bce0" },
"string": { "cssVar": "--color-code-string", "light": "#27ab95", "dark": "#56ccad" },
"variable": { "cssVar": "--color-code-variable", "light": "#d06907", "dark": "#efb47c" },
"title": { "cssVar": "--color-code-title", "light": "#0aaddf", "dark": "#7ecde2" },
"builtin": { "cssVar": "--color-code-builtin", "light": "#d4b050", "dark": "#f9dc80" }
},
"border": {
"default": { "cssVar": "--color-border-default", "light": "rgba(101, 109, 123, 0.16)", "dark": "rgba(255, 255, 255, 0.16)" },
"strong": { "cssVar": "--color-border-strong", "light": "rgba(101, 109, 123, 0.24)", "dark": "rgba(255, 255, 255, 0.24)" },
Expand Down
11 changes: 11 additions & 0 deletions frontend/common/theme/tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,17 @@ export const colorBorderStrong =
export const colorBorderSuccess = 'var(--color-border-success, #27ab95)'
export const colorBorderWarning = 'var(--color-border-warning, #ff9f43)'

// Code
export const colorCodeBuiltin = 'var(--color-code-builtin, #d4b050)'
export const colorCodeComment = 'var(--color-code-comment, #9da4ae)'
export const colorCodeKeyword = 'var(--color-code-keyword, #6837fc)'
export const colorCodeLiteral = 'var(--color-code-literal, #0b8bb2)'
export const colorCodeName = 'var(--color-code-name, #ef4d56)'
export const colorCodeString = 'var(--color-code-string, #27ab95)'
export const colorCodeText = 'var(--color-code-text, #2d3443)'
export const colorCodeTitle = 'var(--color-code-title, #0aaddf)'
export const colorCodeVariable = 'var(--color-code-variable, #d06907)'

// Icon
export const colorIconAction = 'var(--color-icon-action, #6837fc)'
export const colorIconDanger = 'var(--color-icon-danger, #ef4d56)'
Expand Down
2 changes: 2 additions & 0 deletions frontend/documentation/SemanticTokens.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const TOKEN_PREFIX = '--color-'
const GROUP_LABELS: Record<string, string> = {
border: 'Border',
brand: 'Brand',
code: 'Code',
danger: 'Danger',
icon: 'Icon',
info: 'Info',
Expand Down Expand Up @@ -83,6 +84,7 @@ function readTokens(): TokenGroupData[] {
'brand',
'surface',
'text',
'code',
'border',
'icon',
'danger',
Expand Down
Loading
Loading