public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DesignSystem: Menu and popover styling update to use new elevated background token (#100255)

Browse Source 
* DesignSystem: Menu and popover styling tweak proposal

* Fix submenu

* Themes: Add elevated prop

* Update themes

* update

* Fixed tests

* Update

* fix markdown lint

* Update packages/grafana-data/src/themes/createColors.ts

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

* Update contribute/style-guides/themes.md

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

* Update

* Update

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Torkel Ödegaard
2025-02-11 12:27:04 +01:00
committed by GitHub
parent d87ef806f0
commit 9bdacf3833
31 changed files with 90 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
contribute/style-guides/themes.md
+6 -5
View File
@@ -96,11 +96,12 @@ Example use cases:
### Background colors
| Property | When to use |
| --------------------------------- | ------------------------------------------------------------------------------------------------ |
| theme.colors.background.canvas | Dashboard background. A background surface for panels and panes that use primary background |
| theme.colors.background.primary | The default content background for content panes and panels |
| theme.colors.background.secondary | For cards and other surfaces that need to stand out when placed on top of the primary background |
| Property | When to use |
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| theme.colors.background.canvas | Dashboard background. A background surface for panels and panes that use primary background |
| theme.colors.background.primary | The default content background for content panes and panels |
| theme.colors.background.secondary | For cards and other surfaces that need to stand out when placed on top of the primary background |
| theme.colors.background.elevated | For popovers and menu backgrounds. This is the same color as primary in most light themes but in dark themes it has a brighter shade to help give it contrast against the primary background |
### Borders