feat: add dedicated color tokens for voice call widget (#14745)
# Pull Request Template ## Description This PR introduces dedicated color tokens for the floating voice call widget instead of reusing generic design tokens. This allows the widget to maintain a distinct dark-card appearance across both light and dark themes. Adds the following tokens and applies them to `CallCard`: * `--call-widget` * `--call-widget-border` * `--call-widget-text` * `--call-widget-sub-text` Fixes https://linear.app/chatwoot/issue/CW-7353/call-notification-window-theme-update-design ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Screenshots **Light mode** <img width="1466" height="815" alt="Screenshot 2026-06-16 at 3 47 32 PM" src="https://github.com/user-attachments/assets/732164b1-5488-4cc1-8c71-01245d906842" /> **Dark mode** <img width="1466" height="815" alt="Screenshot 2026-06-16 at 3 46 54 PM" src="https://github.com/user-attachments/assets/536ab632-4c7c-486b-8fc4-a061ee40b22a" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
This commit is contained in:
@@ -145,6 +145,12 @@
|
||||
--black-alpha-2: 0, 0, 0, 0.04;
|
||||
--border-blue: 39, 129, 246, 0.5;
|
||||
--white-alpha: 255, 255, 255, 0.8;
|
||||
|
||||
// Voice call widget - light mode
|
||||
--call-widget: 33, 34, 38, 0.95;
|
||||
--call-widget-border: 255, 255, 255, 0.1;
|
||||
--call-widget-text: 237, 238, 240, 1;
|
||||
--call-widget-sub-text: 173, 177, 184, 1;
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -291,6 +297,12 @@
|
||||
--border-blue: 39, 129, 246, 0.5;
|
||||
--border-container: 255, 255, 255, 0;
|
||||
--white-alpha: 255, 255, 255, 0.1;
|
||||
|
||||
// Voice call widget - dark mode
|
||||
--call-widget: 50, 53, 61, 1;
|
||||
--call-widget-border: 255, 255, 255, 0.07;
|
||||
--call-widget-text: 237, 238, 240, 1;
|
||||
--call-widget-sub-text: 173, 177, 184, 1;
|
||||
}
|
||||
}
|
||||
// NEXT COLORS END
|
||||
|
||||
Reference in New Issue
Block a user