Skip to content

[UIK-5273][theme] Add page-bg variable #2985

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

Draft
j-mnizhek wants to merge 4 commits into
base: release/v17
Choose a base branch
from
Draft

[UIK-5273][theme] Add page-bg variable #2985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
327754a
[theme] add page-bg variable
j-mnizhek Jun 5, 2026
d66ed64
[stories] update stories for theme
j-mnizhek Jun 5, 2026
76ae518
Merge branch 'release/v17' into UIK-5273/theme-add-page-bg-variable
j-mnizhek Jun 5, 2026
05f7536
Merge branch 'release/v17' into UIK-5273/theme-add-page-bg-variable
j-mnizhek Jun 5, 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: 1 addition & 1 deletion stories/patterns/core/advanced/all-components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
const [tab, setTab] = React.useState(defaultTab);

return (
<Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }} p={8}>
<Box w='calc(100vw - 64px)' bg='page-bg' p={8}>
<PageHeader />

<TabLine size='l' mx={-8} px={8} mt={8} value={tab} onChange={setTab}>
Expand Down
4 changes: 2 additions & 2 deletions stories/patterns/core/advanced/components/Components/PaywallMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ export function PaywallMessage() {
<Box
p={6}
wMax={400}
bg='page-bg'
borderRadius='popper-rounded'
style={{
borderRadius: 'var(--intergalactic-popper-rounded)',
backgroundColor: 'var(--intergalactic-bg-primary-neutral)',
boxShadow: 'var(--intergalactic-box-shadow-popper)',
}}
>
Expand Down
2 changes: 1 addition & 1 deletion stories/patterns/core/advanced/components/Components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export function Components() {
</Card.Body>
</Card>

<Flex direction='column' px={4} gap={6} w='100%' aria-labelledby='components-surface-heading'>
<Flex direction='column' gap={6} w='100%' aria-labelledby='components-surface-heading'>
<Text tag='h3' size={400} id='components-surface-heading'>
Surface
</Text>
Expand Down
2 changes: 1 addition & 1 deletion stories/patterns/core/tests/all-components/components/Dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export function Dashboard({ showPrimaryTableFooter = false }: DashboardProps) {
);

return (
<Box style={{ background: 'var(--intergalactic-bg-secondary-neutral)' }}>
<Box bg='page-bg'>
<Box my={4} w='100%'>
<FeedbackRatingFormExample />
</Box>
Expand Down
2 changes: 1 addition & 1 deletion stories/patterns/core/tests/all-components/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function Demo({ defaultTab = 1 }: { defaultTab?: number }) {
const [tab, setTab] = React.useState(defaultTab);

return (
<Box w='calc(100vw - 64px)' style={{ background: 'var(--intergalactic-bg-secondary-neutral)', overflowX: 'clip' }} p={8}>
<Box w='calc(100vw - 64px)' bg='page-bg' style={{ overflowX: 'clip' }} p={8}>
<PageHeader />

<TabLine size='l' mx={-8} px={8} mt={8} value={tab} onChange={setTab}>
Expand Down
12 changes: 9 additions & 3 deletions tools/theme/src/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1450,9 +1450,12 @@ export const theme: Theme = {
value: success.opaqueAt(L_BG_LIGHT),
description: 'Background color for the "Start tracking" date on the X-axis of the chart grid.',
},
header_bg: { value: '#382E5E' },
header_border_primary: { value: '#382E5E' },
header_border_secondary: { value: 'rgba(255,255,255, 0.15)' },
header_bg: { value: '{semanticTokens.colors.page.bg}' },
header_border_primary: { value: '{semanticTokens.colors.border.primary}' },
header_border_secondary: { value: '{semanticTokens.colors.border.primary}' },
page_bg: { value: neutral.at(0.97),
description: 'Background fill for the whole product page.',
},
Copy link
Copy Markdown
Contributor

@ilyabrower ilyabrower Jun 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you think about adding sidebar_nav_bg?

Copy link
Copy Markdown
Member Author

@j-mnizhek j-mnizhek Jun 5, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought about this and several additional variables for the future (screenshot from our private repo), but then we with Lesha hought that, for now, we could add only this one.

Actually I'm not strongly against these several new ones. I worry only about their usage by teams
image

sidebar_nav_control_hover: {
value: neutral.opaqueAt(L_BG_SECONDARY_HOVER),
description: 'Sidebar navigation row hover background.',
Expand Down Expand Up @@ -2481,6 +2484,9 @@ type SemanticColors = {
secondary: Value;
};
};
page: {
bg: Value;
};
sidebar: {
nav: {
control: {
Expand Down
12 changes: 9 additions & 3 deletions website/docs/style/design-tokens/design-tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2349,17 +2349,23 @@
},
{
"name": "--intergalactic-header-bg",
"value": "#382E5E",
"value": "oklch(0.97 0.001 180)",
"components": []
},
{
"name": "--intergalactic-header-border-primary",
"value": "#382E5E",
"value": "oklch(0.137 0.026 175.7 / 0.161)",
"components": []
},
{
"name": "--intergalactic-header-border-secondary",
"value": "rgba(255,255,255, 0.15)",
"value": "oklch(0.137 0.026 175.7 / 0.161)",
"components": []
},
{
"name": "--intergalactic-page-bg",
"value": "oklch(0.97 0.001 180)",
"description": "Background fill for the whole product page.",
"components": []
},
{
Expand Down
Loading