Skip to content

Update components to new DS theme#207

Merged
VictoriaBeilsten-Edmands merged 13 commits into
feature/diamond-ds-themefrom
vbe/ds-theme-components
Jun 12, 2026
Merged

Update components to new DS theme#207
VictoriaBeilsten-Edmands merged 13 commits into
feature/diamond-ds-themefrom
vbe/ds-theme-components

Conversation

@VictoriaBeilsten-Edmands

Copy link
Copy Markdown
Collaborator

No description provided.

@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands requested review from akademy and removed request for akademy June 5, 2026 15:20
Comment thread src/components/navigation/Breadcrumbs.tsx Outdated
Comment thread src/components/navigation/Footer.tsx
@akademy akademy self-requested a review June 8, 2026 09:14
@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands force-pushed the vbe/ds-theme-components branch 4 times, most recently from b375210 to b2a8d06 Compare June 8, 2026 10:23

@akademy akademy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I've added a few things. Also got the following questions (not about specific lines/files)

  • AppTitleBar, no longer matches the NavBar colours. Is there some way to set it to the correct colours and add it as a Storybook example?
  • Footer seems to have an odd background colour now. (You can see original matched the NavBar too https://diamondlightsource.github.io/sci-react-ui/?path=/docs/components-navigation-footer--docs )
  • The ColourSchemeButton no longer looks cool. All the hover colours have gone. This is a sad day.
  • The ColourSchemeButton also no longer matches the styling of the User control (i.e. with a filled background)

Comment thread src/components/controls/Bar.stories.tsx Outdated
Comment thread src/components/controls/Bar.test.tsx
Comment thread src/public/diamond/logo-dark-surface.svg
Comment thread src/components/navigation/Footer.tsx Outdated
Comment thread src/components/controls/Bar.tsx Outdated
Comment thread src/components/controls/ColourSchemeButton.tsx
Comment thread src/components/controls/Logo.tsx Outdated
Comment thread src/components/controls/ScrollableImages.stories.tsx
@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands force-pushed the vbe/ds-theme-components branch 2 times, most recently from 1e1866f to 3e3611f Compare June 9, 2026 14:10
@VictoriaBeilsten-Edmands

VictoriaBeilsten-Edmands commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator Author

AppTitleBar, Footer, Breadcrumbs and Navbar all use the Bar component and can use all the colours (variant + surface combinations) that are available in Bar. They have their own defaults. I've added some stories for these.
The ColourSchemeButton and User Avatar styling are similar now. The hover colours are still gone though. @zohar was talking about potentially having a 'highlight' colour.

The tests have been updated to pass.

@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands marked this pull request as ready for review June 10, 2026 10:14
zoharma
zoharma previously approved these changes Jun 10, 2026

@douglaswinter douglaswinter left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The components look great across light/dark in my opinion. Just a couple of comments.

Comment thread src/components/controls/AppTitlebar.stories.tsx Outdated
Comment thread src/components/controls/ScrollableImages.stories.tsx
Comment thread src/components/controls/Logo.stories.tsx
Comment thread src/themes/DiamondDSTheme.ts
douglaswinter
douglaswinter previously approved these changes Jun 12, 2026

@douglaswinter douglaswinter left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Looks very good.

@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands changed the base branch from feature/diamond-ds-theme to main June 12, 2026 14:47
@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands dismissed stale reviews from douglaswinter and zoharma June 12, 2026 14:47

The base branch was changed.

@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands changed the base branch from main to feature/diamond-ds-theme June 12, 2026 14:48
@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands merged commit 909e71f into feature/diamond-ds-theme Jun 12, 2026
1 check passed
@VictoriaBeilsten-Edmands VictoriaBeilsten-Edmands deleted the vbe/ds-theme-components branch June 12, 2026 14:50
VictoriaBeilsten-Edmands added a commit that referenced this pull request Jun 12, 2026
* Update components to new DS theme

* Remove multi-theme support from Storybook

* Update changelog

* Remove old theme and update docs

* Add slot text to Bar stories

Co-authored-by: Matthew Wilcoxson <akademy@users.noreply.github.com>

* Update Bar and child components

* Add inverse switch to ImageColourSchememSwitch

* Match styling of Avatar and ColourSchemeButton

* Use DiamondDS theme for tests

* Remove unused sx prop from ColourSchemeButton

* Add fixedTone to Logo and ImageColourSchemeSwitch

* Remove args from AppTitlebar stories

* Add background colour story back for ScrollableImages

---------

Co-authored-by: Matthew Wilcoxson <akademy@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants