new theme colors

[GurinderRawala]

Summary by CodeRabbit

• Style

  • Refreshed dark and light theme palettes with new color tokens, updated backgrounds, borders, text, gradients, and semantic colors for improved clarity and contrast
  • Revised UI surface, component, and tooltip/popover visuals for more consistent look-and-feel

• Chores

  • Updated frontend asset references and theme assets to pick up the refreshed themes

• Behavior

  • Dashboard loading now emits explicit loading signals to better coordinate loader display

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Restructures internal color tokens (introduces primary object and dedicated border object), updates many dark and light theme color values and SCSS variables, updates frontend asset hashes, and makes small component/type edits affecting theme usage and a props type plus an added optional loading callback invocation.

Changes

Cohort / File(s)	Change Summary
Color System & Tokens packages/grafana-data/src/themes/createColors.ts	Reorganized internal color shape: DarkColors now uses a primary object with main/border/text and border tokens moved to a dedicated border object; many semantic color literals (primary, secondary, info, error, success, warning), opacities, gradients, tonalOffset, and action hover/selected tokens updated for both themes.
Dark Theme SCSS public/sass/_variables.dark.generated.scss	Large set of public SCSS variables changed: action states, brand colors, new blue/red/green tokens added, layer/panel/background colors redefined, text/link colors adjusted, gradients/borders/tooltips/popovers/diff colors updated to the new dark palette.
Light Theme SCSS public/sass/_variables.light.generated.scss	Comprehensive light-theme SCSS updates: action-selected changed to #F04006, new palette entries (blue/red/green, refined grays), layer color swaps, updated brand gradients, text/heading/link colors, and numerous panel/card/input/dropdown/table/tooltip/diff tokens revised.
Frontend Build Assets public/microfrontends/fn_dashboard/index.html	Updated asset references (hashed filenames) for light/dark CSS and fn_dashboard script to match rebuilt frontend bundles.
Dashboard Page Props & Loading Hook public/app/features/dashboard/containers/DashboardPage.tsx	Props type changed to use DashboardPageProps; renders now call optional this.props?.isLoading?.(true) before loader and ...isLoading?.(false) after, adding external loading-state signaling.
Picker Styling Dependency public/app/features/variables/pickers/PickerRenderer.tsx	Theme styling moved from mode-based to explicit background.canvas and text.primary values; memoization deps updated from [mode] to [background, text].
Minor Type Punctuation public/app/fn-app/fn-app-provider.tsx	FnAppProviderProps type punctuation fixed: store: Store<StoreState>; (semicolon added).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Pay attention to mapping between the new border tokens and all consumers of border tokens.
• Verify contrast/compliance for renamed/changed semantic colors across createColors.ts and both SCSS files.
• Confirm updated asset hashes in index.html match the produced build artifacts.
• Review DashboardPage's new optional isLoading invocation for lifecycle/side-effect implications.

Possibly related PRs

• new theme colors #201 — Modifies the same theming implementation and SCSS theme variables; likely directly related to the createColors and generated SCSS changes.

Poem

🐇 I hopped through hex and hue, a ribbon in my paw,
I nudged the borders, mixed the primaries with care,
Dark and light now hum in tidy, brighter pairs,
A dash of gradient, a nip of orange flare—
Hop! The theme is brushed and fresh as morning air.

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'new theme colors' is related to the main changeset but lacks specificity about the scope and nature of changes.	Consider making the title more descriptive, such as 'Update theme color palette and system restructuring' or 'Refactor color system with new theme palette updates', to better convey the scope of internal restructuring and comprehensive color value changes across dark and light themes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6c63004 and ab854d5.

📒 Files selected for processing (4)

• public/app/features/dashboard/containers/DashboardPage.tsx (2 hunks)
• public/app/features/variables/pickers/PickerRenderer.tsx (1 hunks)
• public/app/fn-app/fn-app-provider.tsx (1 hunks)
• public/microfrontends/fn_dashboard/index.html (1 hunks)

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

packages/grafana-data/src/themes/createColors.ts (2)

109-113: Minor formatting inconsistency in border opacity values.

Line 195 uses 0.4 while line 112 (and the pattern in line 111) use 0.40. For consistency, both should use the same notation (prefer 0.40 for clarity).

- strong: `rgba(${this.blackBase}, .4)`,
+ strong: `rgba(${this.blackBase}, 0.40)`,

Also applies to: 192-196

---

118-118: Fix whitespace in rgba color values.

Lines 118 and 201 have unnecessary extra spacing in the rgba string before the final 1:

• Line 118 (DarkColors): rgba(${this.whiteBase}, 1) (two spaces)
• Line 201 (LightColors): rgba(${this.blackBase}, 1) (two spaces)

- contrastText: `rgba(${this.whiteBase},  1)`,
+ contrastText: `rgba(${this.whiteBase}, 1)`,

- contrastText: `rgba(${this.blackBase},  1)`,
+ contrastText: `rgba(${this.blackBase}, 1)`,

Also applies to: 201-201

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between b6e13b1 and 6c63004.

📒 Files selected for processing (4)

• packages/grafana-data/src/themes/createColors.ts (3 hunks)
• public/microfrontends/fn_dashboard/index.html (1 hunks)
• public/sass/_variables.dark.generated.scss (10 hunks)
• public/sass/_variables.light.generated.scss (11 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.ts

⚙️ CodeRabbit configuration file

**/*.ts: - Do not allow use of eslint-disable, @ts-expect-error, or @ts-ignore unless there's a clear, inline comment explaining why it's necessary.

• Suggest early returns in place of nested if, else or loops with complex branching.
• Flag function-wide scopes created by try / catch or top-level if / else. Recommend moving the inner logic to its own function.
• Flag use of try / catch for control flow. Recommend using .catch() with appropriate error handling.
• Flag try / catch that introduces a let where .catch() with const could be used instead.
• Flag catch blocks that narrow the caught error to Error. Suggest typing the catch parameter as unknown.
• Flag cases where types are narrowed manually before passing a value to the logger. Suggest passing the value directly without narrowing.
• Flag logging expressions that extract error.message or convert the error to a string. Suggest logging the full error value instead.
• Flag variables created from error.message or String(error) that are then logged. Suggest logging the original error value directly.
• When let is used to accumulate a value through conditions, suggest replacing it with a function that returns the final value directly.
• Flag let followed by a single conditional reassignment. Suggest a const with a ternary or a helper that returns the final value.
• Flag Map get-or-create patterns that assign to a let (e.g. let x = map.get(k); if (!x) { x = new ...; map.set(k, x) }). Suggest a getOrCreate* helper that returns the value and keeps the variable const.
• Flag nested conditions that can be combined into a single guard. Suggest simplifying with an early return.
• When encountering side effects such as mutation in forEach, suggest replacing with map, filter or reduce.
• Recommend introducing intermediate variables when string interpolation contains non-trivial logic.
• Ban all as type assertions everywhere, including chains like ...

Files:

• packages/grafana-data/src/themes/createColors.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-and-test

🔇 Additional comments (9)

public/microfrontends/fn_dashboard/index.html (2)

10-22: Verify that nonce attributes are injected at build/runtime.

Lines 10, 20, and 22 have empty nonce="" attributes. If these are intended as Content Security Policy (CSP) placeholders filled in by the build or server, confirm the injection mechanism. Otherwise, the empty nonce provides no CSP protection and should either be removed or populated.

---

13-14: Asset hash updates look correct.

The CSS and JavaScript asset references have been updated with new hash values, consistent with rebuilt frontend bundles for the new theme. No concerns with the path structure or references.

Also applies to: 22-22

packages/grafana-data/src/themes/createColors.ts (2)

95-99: Confirm primary object structure aligns with ThemeRichColor interface.

The new primary object structure (main, border, text) is introduced in both DarkColors and LightColors classes. Verify that this structure is compatible with the expected ThemeRichColor interface shape, particularly in how it's consumed by getRichColor() on lines 284–307.

Also applies to: 178-182

---

93-171: Color system restructuring looks sound.

The internal restructuring with the new primary object and dedicated border object is logically consistent. The color values across both DarkColors and LightColors follow a coherent pattern with proper theme inversions (light/dark text colors). The merge() composition at the end correctly combines base colors with getRichColor() enrichment.

public/sass/_variables.dark.generated.scss (2)

1-9: Verify source template was updated.

This file is auto-generated from grafana-ui/src/themes/dark.ts (as noted in the header). Ensure that the source template file was properly updated to regenerate these tokens. The extensive token updates throughout this file should be reviewed in the source template rather than in this generated artifact.

---

17-28: Token updates are consistent and comprehensive.

The dark theme color tokens have been systematically updated across all categories (actions, layers, text, gradients, forms, panels, etc.) with appropriate light values for contrast against the dark backgrounds. The new color spectrum tokens (blue-light, blue-base, etc.) and updated brand/semantic colors align with the restructured color system in createColors.ts.

Also applies to: 64-117, 136-224

public/sass/_variables.light.generated.scss (3)

1-9: Verify source template was updated.

This file is auto-generated from grafana-ui/src/themes/light.ts (as noted in the header). Ensure that the source template file was properly updated to regenerate these tokens. The extensive token updates should be reviewed in the source template rather than in this generated artifact.

---

22-28: Clarify naming semantics for color tokens.

The token names $blue-light (#141116, very dark) and $variable (#141116, very dark) in the light theme are semantically confusing. These appear to be shadow/contrast values rather than actual "light" colors or "variables". Confirm this naming aligns with the design system intent and update token names or documentation if needed for clarity.

Also applies to: 70-70, 75-75

---

60-62: Light theme token updates are consistent and comprehensive.

The light theme color tokens have been systematically updated across all categories (layers, text, forms, panels, tooltips, popovers, etc.) with appropriate dark values for contrast against light backgrounds. The updates mirror the dark theme restructuring and align with the color system changes in createColors.ts.

Also applies to: 96-112, 131-174, 210-295, 341-344