chore: Update theme colors and add new Inter variable fonts (#13347)
# 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 <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
@@ -140,7 +140,9 @@ export default {
|
||||
@close-mobile-sidebar="closeMobileSidebar"
|
||||
/>
|
||||
|
||||
<main class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden">
|
||||
<main
|
||||
class="flex flex-1 h-full w-full min-h-0 px-0 overflow-hidden bg-n-surface-1"
|
||||
>
|
||||
<UpgradePage
|
||||
v-show="showUpgradePage"
|
||||
ref="upgradePageRef"
|
||||
|
||||
+1
-1
@@ -16,7 +16,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background px-6"
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1 px-6"
|
||||
>
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive v-if="keepAlive">
|
||||
|
||||
@@ -82,7 +82,7 @@ onMounted(() => performRouting());
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
|
||||
class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
|
||||
>
|
||||
<Spinner />
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@ watch(
|
||||
|
||||
<template>
|
||||
<div class="flex w-full h-full min-h-0">
|
||||
<section class="flex flex-1 h-full px-0 overflow-hidden bg-n-background">
|
||||
<section class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1">
|
||||
<router-view />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -127,7 +127,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
|
||||
>
|
||||
<ContactsDetailsLayout
|
||||
:button-label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
|
||||
|
||||
@@ -435,7 +435,7 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
|
||||
>
|
||||
<ContactsListLayout
|
||||
:search-value="searchValue"
|
||||
|
||||
@@ -207,7 +207,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-n-background">
|
||||
<div>
|
||||
<div class="multiselect-wrap--small">
|
||||
<ContactDetailsItem
|
||||
compact
|
||||
|
||||
@@ -155,7 +155,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative bg-n-background">
|
||||
<div class="relative">
|
||||
<div class="flex justify-between">
|
||||
<div class="flex justify-between w-full mb-1">
|
||||
<div>
|
||||
|
||||
+2
-2
@@ -251,8 +251,8 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
const evenClass = [
|
||||
'[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
|
||||
'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
|
||||
'[&>*:nth-child(odd)]:!bg-n-surface-1 [&>*:nth-child(even)]:!bg-n-slate-1',
|
||||
'dark:[&>*:nth-child(odd)]:!bg-n-surface-2 dark:[&>*:nth-child(even)]:!bg-n-surface-1',
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
@@ -68,7 +68,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 w-full min-h-screen max-w-full overflow-auto bg-n-background"
|
||||
class="flex flex-col gap-12 sm:gap-16 items-center justify-center py-0 px-4 w-full min-h-screen max-w-full overflow-auto bg-n-surface-1"
|
||||
>
|
||||
<div class="flex flex-col justify-start sm:justify-center gap-6">
|
||||
<div class="flex flex-col gap-1.5 items-start sm:items-center">
|
||||
|
||||
+1
-1
@@ -67,7 +67,7 @@ watch(
|
||||
<div class="flex w-full h-full min-h-0">
|
||||
<section
|
||||
v-if="isHelpCenterEnabled"
|
||||
class="flex flex-1 h-full px-0 overflow-hidden bg-n-background"
|
||||
class="flex flex-1 h-full px-0 overflow-hidden bg-n-surface-1"
|
||||
>
|
||||
<router-view />
|
||||
</section>
|
||||
|
||||
@@ -69,7 +69,7 @@ onMounted(() => performRouting());
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center w-full bg-n-background text-n-slate-11"
|
||||
class="flex items-center justify-center w-full bg-n-surface-1 text-n-slate-11"
|
||||
>
|
||||
<Spinner />
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="items-center justify-center hidden w-full h-full text-center bg-n-background lg:flex"
|
||||
class="items-center justify-center hidden w-full h-full text-center bg-n-surface-1 lg:flex"
|
||||
>
|
||||
<div v-if="uiFlags.isFetching" class="flex justify-center my-4">
|
||||
<Spinner class="text-n-brand" />
|
||||
|
||||
@@ -222,7 +222,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex w-full h-full bg-n-solid-1">
|
||||
<section class="flex w-full h-full bg-n-surface-1">
|
||||
<div
|
||||
class="flex flex-col h-full w-full lg:min-w-[340px] lg:max-w-[340px] ltr:border-r rtl:border-l border-n-weak"
|
||||
:class="!currentConversationId ? 'flex' : 'hidden xl:flex'"
|
||||
@@ -244,7 +244,7 @@ onMounted(() => {
|
||||
class="inbox-card rounded-none hover:rounded-lg hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
|
||||
:class="
|
||||
currentConversationId === notificationItem.primaryActor?.id
|
||||
? 'bg-n-alpha-1 dark:bg-n-alpha-3 rounded-lg active'
|
||||
? 'bg-n-alpha-1 dark:bg-n-alpha-3 !rounded-lg active'
|
||||
: ''
|
||||
"
|
||||
@mark-notification-as-read="markNotificationAsRead"
|
||||
|
||||
@@ -152,8 +152,7 @@ export default {
|
||||
<span
|
||||
class="text-xs font-medium hover:text-n-brand truncate min-w-0 dark:hover:text-n-brand"
|
||||
:class="{
|
||||
'text-n-blue-text dark:text-n-blue-text':
|
||||
activeSort === option.key,
|
||||
'text-n-blue-11 dark:text-n-blue-11': activeSort === option.key,
|
||||
'text-n-slate-11': activeSort !== option.key,
|
||||
}"
|
||||
>
|
||||
@@ -161,7 +160,7 @@ export default {
|
||||
</span>
|
||||
<span
|
||||
v-if="activeSort === option.key"
|
||||
class="i-lucide-check size-2.5 flex-shrink-0 text-n-blue-text"
|
||||
class="i-lucide-check size-2.5 flex-shrink-0 text-n-blue-11"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -109,7 +109,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-between w-full gap-2 border-b px-3 h-12 rtl:border-r border-n-weak flex-shrink-0"
|
||||
class="flex items-center justify-between w-full gap-2 border-b px-3 h-12 rtl:border-r border-n-weak flex-shrink-0 bg-n-surface-1"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
<BackButton
|
||||
|
||||
@@ -10,7 +10,7 @@ defineProps({
|
||||
<template>
|
||||
<div
|
||||
role="button"
|
||||
class="flex items-center w-full h-8 px-2 py-1 rounded-md cursor-pointer hover:text-n-blue-text min-w-0"
|
||||
class="flex items-center w-full h-8 px-2 py-1 rounded-md cursor-pointer hover:text-n-blue-11 min-w-0"
|
||||
>
|
||||
<span class="text-xs font-medium truncate text-n-slate-12">
|
||||
{{ label }}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
export const NOTIFICATION_TYPES_MAPPING = {
|
||||
CONVERSATION_MENTION: ['i-lucide-at-sign', 'text-n-blue-text'],
|
||||
CONVERSATION_ASSIGNMENT: ['i-lucide-chevrons-right', 'text-n-blue-text'],
|
||||
CONVERSATION_CREATION: ['i-lucide-mail-plus', 'text-n-blue-text'],
|
||||
CONVERSATION_MENTION: ['i-lucide-at-sign', 'text-n-blue-11'],
|
||||
CONVERSATION_ASSIGNMENT: ['i-lucide-chevrons-right', 'text-n-blue-11'],
|
||||
CONVERSATION_CREATION: ['i-lucide-mail-plus', 'text-n-blue-11'],
|
||||
PARTICIPATING_CONVERSATION_NEW_MESSAGE: [
|
||||
'i-lucide-message-square-plus',
|
||||
'text-n-blue-text',
|
||||
'text-n-blue-11',
|
||||
],
|
||||
ASSIGNED_CONVERSATION_NEW_MESSAGE: [
|
||||
'i-lucide-message-square-plus',
|
||||
'text-n-blue-text',
|
||||
'text-n-blue-11',
|
||||
],
|
||||
SLA_MISSED_FIRST_RESPONSE: ['i-lucide-heart-crack', 'text-n-ruby-11'],
|
||||
SLA_MISSED_NEXT_RESPONSE: ['i-lucide-heart-crack', 'text-n-ruby-11'],
|
||||
|
||||
@@ -41,7 +41,7 @@ export default {
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-background"
|
||||
class="flex justify-between items-center h-20 min-h-[3.5rem] px-4 py-2 bg-n-surface-1"
|
||||
>
|
||||
<h1 class="flex items-center mb-0 text-2xl text-n-slate-12">
|
||||
<BackButton
|
||||
|
||||
@@ -9,7 +9,7 @@ defineProps({
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-background font-inter"
|
||||
class="flex flex-col w-full h-full m-0 p-6 sm:py-8 lg:px-16 overflow-auto bg-n-surface-1 font-inter"
|
||||
>
|
||||
<div class="flex items-start w-full max-w-6xl mx-auto">
|
||||
<router-view v-slot="{ Component }">
|
||||
|
||||
@@ -19,7 +19,7 @@ const showSettingsHeader = computed(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-1 flex-col m-0 bg-n-background overflow-auto">
|
||||
<div class="flex flex-1 flex-col m-0 bg-n-surface-1 overflow-auto">
|
||||
<div
|
||||
class="mx-auto w-full flex flex-col flex-1"
|
||||
:class="{ 'max-w-6xl': !fullWidth }"
|
||||
|
||||
+2
-2
@@ -85,12 +85,12 @@ const openInNewTab = url => {
|
||||
:href="helpURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-text hover:underline"
|
||||
class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-blue-11 hover:underline"
|
||||
>
|
||||
{{ linkText }}
|
||||
<Icon
|
||||
icon="i-lucide-chevron-right"
|
||||
class="flex-shrink-0 text-n-blue-text size-4"
|
||||
class="flex-shrink-0 text-n-blue-11 size-4"
|
||||
/>
|
||||
</a>
|
||||
</CustomBrandPolicyWrapper>
|
||||
|
||||
@@ -509,7 +509,7 @@ export default {
|
||||
:header-title="inboxName"
|
||||
>
|
||||
<woot-tabs
|
||||
class="[&_ul]:p-0"
|
||||
class="[&_ul]:p-0 top-px relative"
|
||||
:index="selectedTabIndex"
|
||||
:border="false"
|
||||
@change="onTabChange"
|
||||
|
||||
@@ -210,7 +210,7 @@ export default {
|
||||
<div>
|
||||
<span
|
||||
v-if="isDayEnabled && !hasError"
|
||||
class="label bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text text-xs inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
|
||||
class="label bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-11 text-xs inline-block px-2 py-1 rounded-lg cursor-default whitespace-nowrap"
|
||||
>
|
||||
{{ totalHours }}
|
||||
</span>
|
||||
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
<div class="macro__node">
|
||||
<div>
|
||||
<span
|
||||
class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
|
||||
class="bg-n-solid-blue text-n-blue-11 py-1 px-1.5 leading-none text-sm rounded-md"
|
||||
>
|
||||
{{ $t('MACROS.EDITOR.START_FLOW') }}
|
||||
</span>
|
||||
@@ -102,7 +102,7 @@ export default {
|
||||
<div class="macro__node">
|
||||
<div>
|
||||
<span
|
||||
class="bg-n-solid-blue text-n-blue-text py-1 px-1.5 leading-none text-sm rounded-md"
|
||||
class="bg-n-solid-blue text-n-blue-11 py-1 px-1.5 leading-none text-sm rounded-md"
|
||||
>
|
||||
{{ $t('MACROS.EDITOR.END_FLOW') }}
|
||||
</span>
|
||||
|
||||
@@ -9,7 +9,7 @@ defineProps({
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-background"
|
||||
class="flex flex-col justify-between flex-1 h-full m-0 overflow-auto bg-n-surface-1"
|
||||
>
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive v-if="keepAlive">
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="reports--wrapper overflow-auto bg-n-background w-full px-6">
|
||||
<div class="reports--wrapper overflow-auto bg-n-surface-1 w-full px-6">
|
||||
<div class="max-w-[60rem] mx-auto pb-12">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user