From 2a69b37958a2ec521a80e62ebcc0e9b7c18eef3e Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Thu, 29 Jan 2026 04:06:04 +0530 Subject: [PATCH] chore: Update theme colors and add new Inter variable fonts (#13347) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request Template ## Description This PR includes the following updates: 1. Updated the design system color tokens by introducing new tokens for surfaces, overlays, buttons, labels, and cards, along with refinements to existing shades. 2. Refreshed both light and dark themes with adjusted background, border, and solid colors. 3. Replaced static Inter font files with the Inter variable font (including italic), supporting weights from 100–900. 4. Added custom font weights (420, 440, 460, 520) along with custom typography classes to enable more fine-grained and consistent typography control. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## 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 --------- Co-authored-by: Pranav --- app/javascript/dashboard/App.vue | 2 +- .../dashboard/assets/scss/_next-colors.scss | 68 ++++-- .../assets/scss/plugins/_multiselect.scss | 2 +- .../components/ExclusionRules.vue | 2 +- .../Campaigns/CampaignLayout.vue | 2 +- .../LiveChatCampaign/LiveChatCampaignForm.vue | 2 +- .../SMSCampaign/SMSCampaignForm.vue | 2 +- .../WhatsAppCampaign/WhatsAppCampaignForm.vue | 2 +- .../Companies/CompaniesListLayout.vue | 2 +- .../Contacts/ContactsDetailsLayout.vue | 2 +- .../ContactsForm/ContactImportDialog.vue | 2 +- .../Contacts/ContactsListLayout.vue | 2 +- .../Contacts/ContactsSidebar/ContactMerge.vue | 2 +- .../CustomAttributes/OtherAttribute.vue | 2 +- .../components-next/EmptyStateLayout.vue | 8 +- .../HelpCenter/ArticleCard/ArticleCard.vue | 2 +- .../HelpCenter/CategoryCard/CategoryCard.vue | 2 +- .../HelpCenter/HelpCenterLayout.vue | 2 +- .../HelpCenter/LocaleCard/LocaleCard.vue | 2 +- .../Pages/CategoryPage/CategoryForm.vue | 2 +- .../components-next/Inbox/InboxCard.vue | 6 +- .../components-next/button/Button.vue | 10 +- .../components-next/captain/PageLayout.vue | 2 +- .../assistant/AddNewScenariosDialog.vue | 2 +- .../assistant/AssistantForm.vue | 2 +- .../customTool/CustomToolForm.vue | 2 +- .../pageComponents/document/DocumentForm.vue | 2 +- .../pageComponents/inbox/ConnectInboxForm.vue | 2 +- .../pageComponents/response/ResponseForm.vue | 2 +- .../changelog-card/StackedChangelogCard.vue | 2 +- .../components-next/filter/ConditionRow.vue | 4 +- .../components-next/filter/operators.js | 2 +- .../components-next/message/MessageList.vue | 2 +- .../message/bubbles/Template/CSAT.vue | 2 +- .../message/bubbles/Template/CallToAction.vue | 8 +- .../pagination/PaginationFooter.vue | 2 +- .../components-next/sidebar/ChannelLeaf.vue | 6 +- .../sidebar/MobileSidebarLauncher.vue | 2 +- .../components-next/sidebar/Sidebar.vue | 201 +++++++++++++++--- .../sidebar/SidebarAccountSwitcher.vue | 25 ++- .../sidebar/SidebarChangelogButton.vue | 46 ++++ .../sidebar/SidebarChangelogCard.vue | 10 + .../sidebar/SidebarCollapsedPopover.vue | 198 +++++++++++++++++ .../components-next/sidebar/SidebarGroup.vue | 187 ++++++++++++---- .../sidebar/SidebarGroupHeader.vue | 16 +- .../sidebar/SidebarGroupLeaf.vue | 6 +- .../sidebar/SidebarProfileMenu.vue | 20 +- .../sidebar/SidebarSubGroup.vue | 8 +- .../components-next/sidebar/provider.js | 81 ++++++- .../components-next/switch/Switch.vue | 2 +- .../components-next/tabbar/TabBar.vue | 2 +- .../components/Accordion/AccordionItem.vue | 4 +- .../dashboard/components/ChatList.vue | 2 +- .../dashboard/components/ChatListHeader.vue | 2 +- .../components/copilot/CopilotContainer.vue | 2 +- .../ui/DatePicker/components/CalendarWeek.vue | 2 +- .../dashboard/components/ui/Tabs/TabsItem.vue | 14 +- .../components/widgets/ChatTypeTabs.vue | 2 +- .../widgets/conversation/ConversationBox.vue | 5 +- .../widgets/conversation/ConversationCard.vue | 5 +- .../conversation/ConversationHeader.vue | 2 +- .../conversation/ConversationSidebar.vue | 2 +- .../conversation/EmptyState/EmptyState.vue | 2 +- .../widgets/conversation/MessagesView.vue | 2 +- .../conversation/OnboardingFeatureCard.vue | 2 +- .../conversation/linear/CreateOrLinkIssue.vue | 2 +- .../modules/search/components/SearchInput.vue | 2 +- .../modules/search/components/SearchView.vue | 2 +- .../dashboard/routes/dashboard/Dashboard.vue | 4 +- .../pages/CampaignsPageRouteView.vue | 2 +- .../captain/pages/AssistantsIndexPage.vue | 2 +- .../captain/pages/CaptainPageRouteView.vue | 2 +- .../contacts/pages/ContactManageView.vue | 2 +- .../contacts/pages/ContactsIndex.vue | 2 +- .../conversation/ConversationAction.vue | 2 +- .../conversation/ConversationParticipant.vue | 2 +- .../customAttributes/CustomAttributes.vue | 4 +- .../helpcenter/components/UpgradePage.vue | 2 +- .../pages/HelpCenterPageRouteView.vue | 2 +- .../helpcenter/pages/PortalsIndexPage.vue | 2 +- .../dashboard/inbox/InboxEmptyState.vue | 2 +- .../routes/dashboard/inbox/InboxList.vue | 4 +- .../inbox/components/InboxDisplayMenu.vue | 5 +- .../inbox/components/InboxItemHeader.vue | 2 +- .../dashboard/inbox/components/MenuItem.vue | 2 +- .../inbox/helpers/InboxViewHelpers.js | 10 +- .../dashboard/settings/SettingsHeader.vue | 2 +- .../dashboard/settings/SettingsWrapper.vue | 2 +- .../routes/dashboard/settings/Wrapper.vue | 2 +- .../components/BaseSettingsHeader.vue | 4 +- .../dashboard/settings/inbox/Settings.vue | 2 +- .../settings/inbox/components/BusinessDay.vue | 2 +- .../dashboard/settings/macros/MacroNodes.vue | 4 +- .../dashboard/settings/profile/Wrapper.vue | 2 +- .../reports/components/ReportsWrapper.vue | 2 +- .../fonts/Inter/InterVariable-Italic.woff2 | Bin 0 -> 380904 bytes .../assets/fonts/Inter/InterVariable.woff2 | Bin 0 -> 345588 bytes app/javascript/shared/assets/fonts/inter.scss | 50 +---- .../widget/components/PreChat/Form.vue | 2 +- tailwind.config.js | 7 + theme/colors.js | 30 ++- 101 files changed, 927 insertions(+), 265 deletions(-) create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarChangelogButton.vue create mode 100644 app/javascript/dashboard/components-next/sidebar/SidebarCollapsedPopover.vue create mode 100644 app/javascript/shared/assets/fonts/Inter/InterVariable-Italic.woff2 create mode 100644 app/javascript/shared/assets/fonts/Inter/InterVariable.woff2 diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue index a63cb1a90..61d7631e7 100644 --- a/app/javascript/dashboard/App.vue +++ b/app/javascript/dashboard/App.vue @@ -131,7 +131,7 @@ export default {
diff --git a/app/javascript/dashboard/assets/scss/_next-colors.scss b/app/javascript/dashboard/assets/scss/_next-colors.scss index 4d7975a32..784edce6c 100644 --- a/app/javascript/dashboard/assets/scss/_next-colors.scss +++ b/app/javascript/dashboard/assets/scss/_next-colors.scss @@ -107,21 +107,39 @@ --violet-11: 101 85 183; --violet-12: 47 38 95; - --background-color: 253 253 253; - --text-blue: 8 109 224; + --background-color: 247 247 247; + --surface-1: 254 254 254; + --surface-2: 255 255 255; + --surface-active: 255 255 255; + --background-input-box: 0, 0, 0, 0.03; + --text-blue: 1 22 44; + --text-purple: 2 4 49; + --text-amber: 37 24 1; --border-container: 236 236 236; - --border-strong: 235 235 235; + --border-strong: 226 227 231; --border-weak: 234 234 234; + --border-blue-strong: 18 61 117; --solid-1: 255 255 255; --solid-2: 255 255 255; --solid-3: 255 255 255; --solid-active: 255 255 255; - --solid-amber: 252 232 193; + --solid-amber: 255 228 181; --solid-blue: 218 236 255; + --solid-blue-2: 251 253 255; --solid-iris: 230 231 255; + --solid-purple: 230 231 255; + --solid-red: 254 200 201; + --solid-amber-button: 255 221 141; + --card-color: 255 255 255; + --overlay: 0, 0, 0, 0.12; + --overlay-avatar: 255, 255, 255, 0.67; + --button-color: 255 255 255; + --button-hover-color: 255, 255, 255, 0.2; + --label-background: 247 247 247; + --label-border: 0, 0, 0, 0.04; - --alpha-1: 67, 67, 67, 0.06; - --alpha-2: 201, 202, 207, 0.15; + --alpha-1: 215, 215, 215, 0.22; + --alpha-2: 196, 197, 198, 0.22; --alpha-3: 255, 255, 255, 0.96; --black-alpha-1: 0, 0, 0, 0.12; --black-alpha-2: 0, 0, 0, 0.04; @@ -235,25 +253,43 @@ --violet-11: 169 153 236; --violet-12: 226 221 254; - --background-color: 18 18 19; - --border-strong: 52 52 52; - --border-weak: 38 38 42; + --background-color: 28 29 32; + --surface-1: 20 21 23; + --surface-2: 22 23 26; + --surface-active: 53 57 66; + --background-input-box: 255, 255, 255, 0.02; + --text-blue: 213 234 255; + --text-purple: 232 233 254; + --text-amber: 255 247 234; + --border-strong: 46 45 50; + --border-weak: 31 31 37; + --border-blue-strong: 201 226 255; --solid-1: 23 23 26; --solid-2: 29 30 36; --solid-3: 44 45 54; --solid-active: 53 57 66; - --solid-amber: 42 37 30; - --solid-blue: 16 49 91; + --solid-amber: 56 50 41; + --solid-blue: 15 57 102; + --solid-blue-2: 26 29 35; --solid-iris: 38 42 101; - --text-blue: 126 182 255; + --solid-purple: 51 51 107; + --solid-red: 90 33 34; + --solid-amber-button: 255 221 141; + --card-color: 28 30 34; + --overlay: 0, 0, 0, 0.4; + --overlay-avatar: 0, 0, 0, 0.05; + --button-color: 42 43 51; + --button-hover-color: 0, 0, 0, 0.15; + --label-background: 36 38 45; + --label-border: 255, 255, 255, 0.03; - --alpha-1: 36, 36, 36, 0.8; - --alpha-2: 139, 147, 182, 0.15; - --alpha-3: 36, 38, 45, 0.9; + --alpha-1: 35, 36, 42, 0.8; + --alpha-2: 147, 153, 176, 0.12; + --alpha-3: 33, 34, 38, 0.95; --black-alpha-1: 0, 0, 0, 0.3; --black-alpha-2: 0, 0, 0, 0.2; --border-blue: 39, 129, 246, 0.5; - --border-container: 236, 236, 236, 0; + --border-container: 255, 255, 255, 0; --white-alpha: 255, 255, 255, 0.1; } } diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index b4154e4d8..9567d66c3 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -7,7 +7,7 @@ @apply bg-n-slate-3; &::after { - @apply text-n-blue-text; + @apply text-n-blue-11; } } } diff --git a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue index 351e3240f..965f532f4 100644 --- a/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue +++ b/app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue @@ -119,7 +119,7 @@ onMounted(() => { ) " :items="filteredTags" - class="[&>button]:!text-n-blue-text [&>div]:min-w-64" + class="[&>button]:!text-n-blue-11 [&>div]:min-w-64" @add="onClickAddTag" />
diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue index 184e8bd10..01a207797 100644 --- a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue +++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue @@ -20,7 +20,7 @@ const handleButtonClick = () => {