Merge branch 'main' into feat/ai-assistant

* chore: custom notifiers in alert manager

* chore: lint fixs

* chore: fix email linter

* chore: added tracing to msteamsv2 notifier

* feat: alert manager template to template title and notification body

* chore: updated test name + code for timeout errors

* chore: added utils for using variables with $ notation

* chore: exposed templates for alertmanager types

* feat: added preprocessor for alert templater

* chore: hooked preProcess function in expandTitle and body, added labels and annotations in alertdata

* chore: fix lint issues

* chore: added handling for missing variable used in template

* feat: converted alerttemplater to interface and updated tests

* refactor: added extractCommonKV instead of 2 different functions

* test: fix preprocessor test case

* feat: added support for  and  in templating

* chore: lint fix

* chore: renamed the interface

* chore: added test for missing function

* refactor: test case and sb related changed

* refactor: comments and test improvements

* chore: lint fix

* chore: updated comments

* chore: updated newline to markdown format

* chore: updated br with new line in test and logs added

* refactor: review comments

* refactor: lint fixes

* chore: updated licenses for notifiers

* chore: updated email notifier from upstream

* feat: return single templating result from  with flag for template type

* fix: variables with symbols in template

* chore: removed notifier test files

* refactor: changes as per internal review

* chore: lint issue

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

docs/api/openapi.yml

@@ -3892,8 +3892,6 @@ components:
           type: string
         oldPassword:
           type: string
-        userId:
-          type: string
       type: object
     TypesDeprecatedUser:
       properties:
@@ -4272,63 +4270,6 @@ paths:
       summary: Get resources
       tags:
       - authz
-  /api/v1/changePassword/{id}:
-    post:
-      deprecated: false
-      description: This endpoint changes the password by id
-      operationId: ChangePassword
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TypesChangePasswordRequest'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Change password
-      tags:
-      - users
   /api/v1/channels:
     get:
       deprecated: false
@@ -6068,9 +6009,9 @@ paths:
       - fields
   /api/v1/getResetPasswordToken/{id}:
     get:
-      deprecated: false
+      deprecated: true
       description: This endpoint returns the reset password token by id
-      operationId: GetResetPasswordToken
+      operationId: GetResetPasswordTokenDeprecated
       parameters:
       - in: path
         name: id
@@ -10894,6 +10835,129 @@ paths:
       summary: Update user v2
       tags:
       - users
+  /api/v2/users/{id}/reset_password_tokens:
+    get:
+      deprecated: false
+      description: This endpoint returns the existing reset password token for a user.
+      operationId: GetResetPasswordToken
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TypesResetPasswordToken'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get reset password token for a user
+      tags:
+      - users
+    put:
+      deprecated: false
+      description: This endpoint creates or regenerates a reset password token for
+        a user. If a valid token exists, it is returned. If expired, a new one is
+        created.
+      operationId: CreateResetPasswordToken
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TypesResetPasswordToken'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Create or regenerate reset password token for a user
+      tags:
+      - users
   /api/v2/users/{id}/roles:
     get:
       deprecated: false
@@ -11134,6 +11198,57 @@ paths:
       summary: Update my user v2
       tags:
       - users
+  /api/v2/users/me/factor_password:
+    put:
+      deprecated: false
+      description: This endpoint updates the password of the user I belong to
+      operationId: UpdateMyPassword
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TypesChangePasswordRequest'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Updates my password
+      tags:
+      - users
   /api/v2/zeus/hosts:
     get:
       deprecated: false

docs/contributing/onboarding.md

@@ -7,12 +7,12 @@ This guide explains how to add new data sources to the SigNoz onboarding flow. T
 The configuration is located at:
 
 ```
-frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json
+frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
 ```
 
-## JSON Structure Overview
+## Structure Overview
 
-The configuration file is a JSON array containing data source objects. Each object represents a selectable option in the onboarding flow.
+The configuration file exports a TypeScript array (`onboardingConfigWithLinks`) containing data source objects. Each object represents a selectable option in the onboarding flow. SVG logos are imported as ES modules at the top of the file.
 
 ## Data Source Object Keys
 
@@ -24,7 +24,7 @@ The configuration file is a JSON array containing data source objects. Each obje
 | `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
 | `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
 | `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
+| `imgUrl` | `string` | Imported SVG URL **(SVG required)** (e.g., `import ec2Url from '@/assets/Logos/ec2.svg'`, then use `ec2Url`) |
 
 ### Optional Keys
 
@@ -57,36 +57,34 @@ The `module` key determines where users are redirected after completing onboardi
 
 The `question` object enables multi-step selection flows:
 
-```json
-{
-  "question": {
-    "desc": "What would you like to monitor?",
-    "type": "select",
-    "helpText": "Choose the telemetry type you want to collect.",
-    "helpLink": "/docs/azure-monitoring/overview/",
-    "helpLinkText": "Read the guide →",
-    "options": [
-        {
-            "key": "logging",
-            "label": "Logs",
-            "imgUrl": "/Logos/azure-vm.svg",
-            "link": "/docs/azure-monitoring/app-service/logging/"
-        },
-        {
-            "key": "metrics",
-            "label": "Metrics",
-            "imgUrl": "/Logos/azure-vm.svg",
-            "link": "/docs/azure-monitoring/app-service/metrics/"
-        },
-        {
-            "key": "tracing",
-            "label": "Traces",
-            "imgUrl": "/Logos/azure-vm.svg",
-            "link": "/docs/azure-monitoring/app-service/tracing/"
-        }
-    ]
-  }
-}
+```ts
+question: {
+  desc: 'What would you like to monitor?',
+  type: 'select',
+  helpText: 'Choose the telemetry type you want to collect.',
+  helpLink: '/docs/azure-monitoring/overview/',
+  helpLinkText: 'Read the guide →',
+  options: [
+    {
+      key: 'logging',
+      label: 'Logs',
+      imgUrl: azureVmUrl,
+      link: '/docs/azure-monitoring/app-service/logging/',
+    },
+    {
+      key: 'metrics',
+      label: 'Metrics',
+      imgUrl: azureVmUrl,
+      link: '/docs/azure-monitoring/app-service/metrics/',
+    },
+    {
+      key: 'tracing',
+      label: 'Traces',
+      imgUrl: azureVmUrl,
+      link: '/docs/azure-monitoring/app-service/tracing/',
+    },
+  ],
+},
 ```
 
 ### Question Keys
@@ -106,152 +104,161 @@ Options can be simple (direct link) or nested (with another question):
 
 ### Simple Option (Direct Link)
 
-```json
+```ts
 {
-  "key": "aws-ec2-logs",
-  "label": "Logs",
-  "imgUrl": "/Logos/ec2.svg",
-  "link": "/docs/userguide/collect_logs_from_file/"
-}
+  key: 'aws-ec2-logs',
+  label: 'Logs',
+  imgUrl: ec2Url,
+  link: '/docs/userguide/collect_logs_from_file/',
+},
 ```
 
 ### Option with Internal Redirect
 
-```json
+```ts
 {
-  "key": "aws-ec2-metrics-one-click",
-  "label": "One Click AWS",
-  "imgUrl": "/Logos/ec2.svg",
-  "link": "/integrations?integration=aws-integration&service=ec2",
-  "internalRedirect": true
-}
+  key: 'aws-ec2-metrics-one-click',
+  label: 'One Click AWS',
+  imgUrl: ec2Url,
+  link: '/integrations?integration=aws-integration&service=ec2',
+  internalRedirect: true,
+},
 ```
 
 > **Important**: Set `internalRedirect: true` only for internal app routes (like `/integrations?...`). Docs links should NOT have this flag.
 
 ### Nested Option (Multi-step Flow)
 
-```json
+```ts
 {
-  "key": "aws-ec2-metrics",
-  "label": "Metrics",
-  "imgUrl": "/Logos/ec2.svg",
-  "question": {
-    "desc": "How would you like to set up monitoring?",
-    "helpText": "Choose your setup method.",
-    "options": [...]
-  }
-}
+  key: 'aws-ec2-metrics',
+  label: 'Metrics',
+  imgUrl: ec2Url,
+  question: {
+    desc: 'How would you like to set up monitoring?',
+    helpText: 'Choose your setup method.',
+    options: [...],
+  },
+},
 ```
 
 ## Examples
 
 ### Simple Data Source (Direct Link)
 
-```json
+```ts
+import elbUrl from '@/assets/Logos/elb.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "dataSource": "aws-elb",
-  "label": "AWS ELB",
-  "tags": ["AWS"],
-  "module": "logs",
-  "relatedSearchKeywords": [
-    "aws",
-    "aws elb",
-    "elb logs",
-    "elastic load balancer"
+  dataSource: 'aws-elb',
+  label: 'AWS ELB',
+  tags: ['AWS'],
+  module: 'logs',
+  relatedSearchKeywords: [
+    'aws',
+    'aws elb',
+    'elb logs',
+    'elastic load balancer',
   ],
-  "imgUrl": "/Logos/elb.svg",
-  "link": "/docs/aws-monitoring/elb/"
-}
+  imgUrl: elbUrl,
+  link: '/docs/aws-monitoring/elb/',
+},
 ```
 
 ### Data Source with Single Question Level
 
-```json
+```ts
+import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "dataSource": "app-service",
-  "label": "App Service",
-  "imgUrl": "/Logos/azure-vm.svg",
-  "tags": ["Azure"],
-  "module": "apm",
-  "relatedSearchKeywords": ["azure", "app service"],
-  "question": {
-    "desc": "What telemetry data do you want to visualise?",
-    "type": "select",
-    "options": [
+  dataSource: 'app-service',
+  label: 'App Service',
+  imgUrl: azureVmUrl,
+  tags: ['Azure'],
+  module: 'apm',
+  relatedSearchKeywords: ['azure', 'app service'],
+  question: {
+    desc: 'What telemetry data do you want to visualise?',
+    type: 'select',
+    options: [
       {
-        "key": "logging",
-        "label": "Logs",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/logging/"
+        key: 'logging',
+        label: 'Logs',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/logging/',
       },
       {
-        "key": "metrics",
-        "label": "Metrics",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/metrics/"
+        key: 'metrics',
+        label: 'Metrics',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/metrics/',
       },
       {
-        "key": "tracing",
-        "label": "Traces",
-        "imgUrl": "/Logos/azure-vm.svg",
-        "link": "/docs/azure-monitoring/app-service/tracing/"
-      }
-    ]
-  }
-}
+        key: 'tracing',
+        label: 'Traces',
+        imgUrl: azureVmUrl,
+        link: '/docs/azure-monitoring/app-service/tracing/',
+      },
+    ],
+  },
+},
 ```
 
 ### Data Source with Nested Questions (2-3 Levels)
 
-```json
+```ts
+import ec2Url from '@/assets/Logos/ec2.svg';
+
+// inside the onboardingConfigWithLinks array:
 {
-  "dataSource": "aws-ec2",
-  "label": "AWS EC2",
-  "tags": ["AWS"],
-  "module": "logs",
-  "relatedSearchKeywords": ["aws", "aws ec2", "ec2 logs", "ec2 metrics"],
-  "imgUrl": "/Logos/ec2.svg",
-  "question": {
-    "desc": "What would you like to monitor for AWS EC2?",
-    "type": "select",
-    "helpText": "Choose the type of telemetry data you want to collect.",
-    "options": [
+  dataSource: 'aws-ec2',
+  label: 'AWS EC2',
+  tags: ['AWS'],
+  module: 'logs',
+  relatedSearchKeywords: ['aws', 'aws ec2', 'ec2 logs', 'ec2 metrics'],
+  imgUrl: ec2Url,
+  question: {
+    desc: 'What would you like to monitor for AWS EC2?',
+    type: 'select',
+    helpText: 'Choose the type of telemetry data you want to collect.',
+    options: [
       {
-        "key": "aws-ec2-logs",
-        "label": "Logs",
-        "imgUrl": "/Logos/ec2.svg",
-        "link": "/docs/userguide/collect_logs_from_file/"
+        key: 'aws-ec2-logs',
+        label: 'Logs',
+        imgUrl: ec2Url,
+        link: '/docs/userguide/collect_logs_from_file/',
       },
       {
-        "key": "aws-ec2-metrics",
-        "label": "Metrics",
-        "imgUrl": "/Logos/ec2.svg",
-        "question": {
-          "desc": "How would you like to set up EC2 Metrics monitoring?",
-          "helpText": "One Click uses AWS CloudWatch integration. Manual setup uses OpenTelemetry.",
-          "helpLink": "/docs/aws-monitoring/one-click-vs-manual/",
-          "helpLinkText": "Read the comparison guide →",
-          "options": [
+        key: 'aws-ec2-metrics',
+        label: 'Metrics',
+        imgUrl: ec2Url,
+        question: {
+          desc: 'How would you like to set up EC2 Metrics monitoring?',
+          helpText: 'One Click uses AWS CloudWatch integration. Manual setup uses OpenTelemetry.',
+          helpLink: '/docs/aws-monitoring/one-click-vs-manual/',
+          helpLinkText: 'Read the comparison guide →',
+          options: [
             {
-              "key": "aws-ec2-metrics-one-click",
-              "label": "One Click AWS",
-              "imgUrl": "/Logos/ec2.svg",
-              "link": "/integrations?integration=aws-integration&service=ec2",
-              "internalRedirect": true
+              key: 'aws-ec2-metrics-one-click',
+              label: 'One Click AWS',
+              imgUrl: ec2Url,
+              link: '/integrations?integration=aws-integration&service=ec2',
+              internalRedirect: true,
             },
             {
-              "key": "aws-ec2-metrics-manual",
-              "label": "Manual Setup",
-              "imgUrl": "/Logos/ec2.svg",
-              "link": "/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/"
-            }
-          ]
-        }
-      }
-    ]
-  }
-}
+              key: 'aws-ec2-metrics-manual',
+              label: 'Manual Setup',
+              imgUrl: ec2Url,
+              link: '/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/',
+            },
+          ],
+        },
+      },
+    ],
+  },
+},
 ```
 
 ## Best Practices
@@ -270,11 +277,16 @@ Options can be simple (direct link) or nested (with another question):
 
 ### 3. Logos
 
-- Place logo files in `public/Logos/`
+- Place logo files in `src/assets/Logos/`
 - Use SVG format
-- Reference as `"/Logos/your-logo.svg"`
+- Import the SVG at the top of the file and reference the imported variable:
+  ```ts
+  import myServiceUrl from '@/assets/Logos/my-service.svg';
+  // then in the config object:
+  imgUrl: myServiceUrl,
+  ```
 - **Fetching Icons**: New icons can be easily fetched from [OpenBrand](https://openbrand.sh/). Use the pattern `https://openbrand.sh/?url=<TARGET_URL>`, where `<TARGET_URL>` is the URL-encoded link to the service's website. For example, to get Render's logo, use [https://openbrand.sh/?url=https%3A%2F%2Frender.com](https://openbrand.sh/?url=https%3A%2F%2Frender.com).
-- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo public/Logos/your-logo.svg` to minimise their size before committing.
+- **Optimize new SVGs**: Run any newly downloaded SVGs through an optimizer like [SVGOMG (svgo)](https://svgomg.net/) or use `npx svgo src/assets/Logos/your-logo.svg` to minimise their size before committing.
 
 ### 4. Links
 
@@ -290,8 +302,8 @@ Options can be simple (direct link) or nested (with another question):
 
 ## Adding a New Data Source
 
-1. Add your data source object to the JSON array
-2. Ensure the logo exists in `public/Logos/`
+1. Add the logo SVG to `src/assets/Logos/` and add a top-level import in the config file (e.g., `import myServiceUrl from '@/assets/Logos/my-service.svg'`)
+2. Add your data source object to the `onboardingConfigWithLinks` array, referencing the imported variable for `imgUrl`
 3. Test the flow locally with `yarn dev`
 4. Validation:
    - Navigate to the [onboarding page](http://localhost:3301/get-started-with-signoz-cloud) on your local machine

frontend/index.html

@@ -62,6 +62,29 @@
 		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
 	</head>
 	<body data-theme="default">
+		<script>
+			// Apply theme class synchronously before React renders to prevent flash.
+			// Mirrors the logic in ThemeProvider (hooks/useDarkMode/index.tsx).
+			(function () {
+				try {
+					var theme = localStorage.getItem('THEME');
+					var autoSwitch = localStorage.getItem('THEME_AUTO_SWITCH') === 'true';
+					if (autoSwitch) {
+						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+							? 'dark'
+							: 'light';
+					}
+					if (theme === 'light') {
+						document.body.classList.add('lightMode');
+					} else {
+						// Default to dark when no preference is stored
+						document.body.classList.add('dark', 'darkMode');
+					}
+				} catch (e) {
+					document.body.classList.add('dark', 'darkMode');
+				}
+			})();
+		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 

frontend/jest.config.ts

@@ -15,6 +15,7 @@ const config: Config.InitialOptions = {
 			'<rootDir>/__mocks__/fileMock.ts',
 		'^@/(.*)$': '<rootDir>/src/$1',
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
+		'\\.module\\.mjs$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
 		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
@@ -44,7 +45,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,6 +24,30 @@ window.matchMedia =
 		};
 	};
 
+// Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
+// These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
+// jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),
+// causing SyntaxErrors during getComputedStyle / getByRole calls.
+const _origGetComputedStyle = window.getComputedStyle;
+window.getComputedStyle = function (
+	elt: Element,
+	pseudoElt?: string | null,
+): CSSStyleDeclaration {
+	try {
+		return _origGetComputedStyle.call(window, elt, pseudoElt);
+	} catch {
+		// Return a minimal CSSStyleDeclaration so callers (testing-library, Radix UI)
+		// see the element as visible and without animations.
+		return ({
+			display: '',
+			visibility: '',
+			opacity: '1',
+			animationName: 'none',
+			getPropertyValue: () => '',
+		} as unknown) as CSSStyleDeclaration;
+	}
+};
+
 beforeAll(() => server.listen());
 
 afterEach(() => server.resetHandlers());

frontend/package.json

@@ -48,14 +48,13 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
-    "@signozhq/badge": "0.0.2",
     "@signozhq/button": "0.0.2",
     "@signozhq/calendar": "0.0.0",
     "@signozhq/callout": "0.0.2",
     "@signozhq/checkbox": "0.0.2",
     "@signozhq/combobox": "0.0.2",
     "@signozhq/command": "0.0.0",
-    "@signozhq/design-tokens": "2.1.1",
+    "@signozhq/design-tokens": "2.1.4",
     "@signozhq/dialog": "^0.0.2",
     "@signozhq/drawer": "0.0.4",
     "@signozhq/icons": "0.1.0",
@@ -63,11 +62,8 @@
     "@signozhq/popover": "0.0.0",
     "@signozhq/radio-group": "0.0.2",
     "@signozhq/resizable": "0.0.0",
-    "@signozhq/sonner": "0.1.0",
-    "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
-    "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
@@ -129,6 +125,7 @@
     "react": "18.2.0",
     "react-addons-update": "15.6.3",
     "react-beautiful-dnd": "13.1.1",
+    "react-chartjs-2": "4",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
@@ -152,6 +149,7 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "rehype-raw": "7.0.0",
+    "remark-gfm": "^3.0.1",
     "rollup-plugin-visualizer": "7.0.0",
     "rrule": "2.8.1",
     "stream": "^0.0.2",

frontend/req.md

@@ -0,0 +1,9 @@
+# SigNoz AI Assistant
+
+1. Chat interface (Side Drawer View)
+    1. Should be able to expand the view to full screen (open in a new route - with converstation ID)
+    2. Conversation would be stream (for in process message), the older messages would be listed (Virtualized) - older - newest
+2. Input Section
+    1.  Users should be able to upload images / files to the chat
+
+

frontend/src/AppRoutes/index.tsx

@@ -221,7 +221,8 @@ function App(): JSX.Element {
 	useEffect(() => {
 		if (
 			pathname === ROUTES.ONBOARDING ||
-			pathname.startsWith('/public/dashboard/')
+			pathname.startsWith('/public/dashboard/') ||
+			pathname.startsWith('/ai-assistant/')
 		) {
 			window.Pylon?.('hideChatBubble');
 		} else {

frontend/src/AppRoutes/pageComponents.ts

@@ -311,3 +311,10 @@ export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),
 );
+
+export const AIAssistantPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "AI Assistant Page" */ 'pages/AIAssistantPage/AIAssistantPage'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -2,6 +2,7 @@ import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 
 import {
+	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
 	AlertTypeSelectionPage,
@@ -488,6 +489,13 @@ const routes: AppRoutes[] = [
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.AI_ASSISTANT,
+		exact: true,
+		component: AIAssistantPage,
+		key: 'AI_ASSISTANT',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/ai/chat.ts

@@ -0,0 +1,467 @@
+/**
+ * AI Assistant API client.
+ *
+ * Flow:
+ *   1. POST /api/v1/assistant/threads                                           → { threadId }
+ *   2. POST /api/v1/assistant/threads/{threadId}/messages                       → { executionId }
+ *   3. GET  /api/v1/assistant/executions/{executionId}/events                    → SSE stream (closes on 'done')
+ *
+ * For subsequent messages in the same thread, repeat steps 2–3.
+ * Approval/clarification events pause the stream; use approveExecution/clarifyExecution
+ * to resume, which each return a new executionId to open a fresh SSE stream.
+ */
+
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+// Direct URL to the AI backend — set VITE_AI_BACKEND_URL in .env to override.
+const AI_BACKEND =
+	import.meta.env.VITE_AI_BACKEND_URL || 'http://localhost:8001';
+const BASE = `${AI_BACKEND}/api/v1/assistant`;
+
+function authHeaders(): Record<string, string> {
+	const token = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) || '';
+	return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
+// ---------------------------------------------------------------------------
+// SSE event types
+// ---------------------------------------------------------------------------
+
+export type SSEEvent =
+	| { type: 'status'; executionId: string; state: string; eventId: number }
+	| {
+			type: 'message';
+			executionId: string;
+			messageId: string;
+			delta: string;
+			done: boolean;
+			actions: unknown[] | null;
+			eventId: number;
+	  }
+	| {
+			type: 'thinking';
+			executionId: string;
+			content: string;
+			eventId: number;
+	  }
+	| {
+			type: 'tool_call';
+			executionId: string;
+			toolName: string;
+			toolInput: unknown;
+			eventId: number;
+	  }
+	| {
+			type: 'tool_result';
+			executionId: string;
+			toolName: string;
+			result: unknown;
+			eventId: number;
+	  }
+	| {
+			type: 'approval';
+			executionId: string;
+			approvalId: string;
+			actionType: string;
+			resourceType: string;
+			summary: string;
+			diff: { before: unknown; after: unknown } | null;
+			eventId: number;
+	  }
+	| {
+			type: 'clarification';
+			executionId: string;
+			clarificationId: string;
+			message: string;
+			discoveredContext: Record<string, unknown> | null;
+			fields: ClarificationFieldRaw[];
+			eventId: number;
+	  }
+	| {
+			type: 'error';
+			executionId: string;
+			error: { type: string; code: string; message: string; details: unknown };
+			retryAction: 'auto' | 'manual' | 'none';
+			eventId: number;
+	  }
+	| { type: 'conversation'; threadId: string; title: string; eventId: number }
+	| {
+			type: 'done';
+			executionId: string;
+			tokenInput: number;
+			tokenOutput: number;
+			latencyMs: number;
+			toolCallCount?: number;
+			retryCount?: number;
+			eventId: number;
+	  };
+
+export interface ClarificationFieldRaw {
+	id: string;
+	type: string;
+	label: string;
+	required?: boolean;
+	options?: string[] | null;
+	default?: string | string[] | null;
+}
+
+// ---------------------------------------------------------------------------
+// Step 1 — Create thread
+// POST /api/v1/assistant/threads → { threadId }
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Thread listing & detail
+// ---------------------------------------------------------------------------
+
+export interface ThreadSummary {
+	threadId: string;
+	title: string | null;
+	state: string | null;
+	activeExecutionId: string | null;
+	archived: boolean;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface ThreadListResponse {
+	threads: ThreadSummary[];
+	nextCursor: string | null;
+	hasMore: boolean;
+}
+
+export interface MessageSummaryBlock {
+	type: string;
+	content?: string;
+	toolCallId?: string;
+	toolName?: string;
+	toolInput?: unknown;
+	result?: unknown;
+	success?: boolean;
+}
+
+export interface MessageSummary {
+	messageId: string;
+	role: string;
+	contentType: string;
+	content: string | null;
+	complete: boolean;
+	toolCalls: Record<string, unknown>[] | null;
+	blocks: MessageSummaryBlock[] | null;
+	actions: unknown[] | null;
+	feedbackRating: 'positive' | 'negative' | null;
+	feedbackComment: string | null;
+	executionId: string | null;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface ThreadDetailResponse {
+	threadId: string;
+	title: string | null;
+	state: string | null;
+	activeExecutionId: string | null;
+	archived: boolean;
+	createdAt: string;
+	updatedAt: string;
+	messages: MessageSummary[];
+	pendingApproval: unknown | null;
+	pendingClarification: unknown | null;
+}
+
+export async function listThreads(
+	cursor?: string | null,
+	limit = 20,
+): Promise<ThreadListResponse> {
+	const params = new URLSearchParams({ limit: String(limit) });
+	if (cursor) {
+		params.set('cursor', cursor);
+	}
+	const res = await fetch(`${BASE}/threads?${params.toString()}`, {
+		headers: { ...authHeaders() },
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to list threads: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	return res.json();
+}
+
+export async function updateThread(
+	threadId: string,
+	update: { title?: string | null; archived?: boolean | null },
+): Promise<ThreadSummary> {
+	const res = await fetch(`${BASE}/threads/${threadId}`, {
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify(update),
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to update thread: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	return res.json();
+}
+
+export async function getThreadDetail(
+	threadId: string,
+): Promise<ThreadDetailResponse> {
+	const res = await fetch(`${BASE}/threads/${threadId}`, {
+		headers: { ...authHeaders() },
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to get thread: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	return res.json();
+}
+
+// ---------------------------------------------------------------------------
+// Thread creation
+// ---------------------------------------------------------------------------
+
+export async function createThread(signal?: AbortSignal): Promise<string> {
+	const res = await fetch(`${BASE}/threads`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({}),
+		signal,
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to create thread: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	const data: { threadId: string } = await res.json();
+	return data.threadId;
+}
+
+// ---------------------------------------------------------------------------
+// Step 2 — Send message
+// POST /api/v1/assistant/threads/{threadId}/messages → { executionId }
+// ---------------------------------------------------------------------------
+
+/** Fetches the thread's active executionId for reconnect on thread_busy (409). */
+async function getActiveExecutionId(threadId: string): Promise<string | null> {
+	const res = await fetch(`${BASE}/threads/${threadId}`, {
+		headers: { ...authHeaders() },
+	});
+	if (!res.ok) {
+		return null;
+	}
+	const data: { activeExecutionId?: string | null } = await res.json();
+	return data.activeExecutionId ?? null;
+}
+
+export async function sendMessage(
+	threadId: string,
+	content: string,
+	signal?: AbortSignal,
+): Promise<string> {
+	const res = await fetch(`${BASE}/threads/${threadId}/messages`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ content }),
+		signal,
+	});
+
+	if (res.status === 409) {
+		// Thread has an active execution — reconnect to it instead of failing.
+		const executionId = await getActiveExecutionId(threadId);
+		if (executionId) {
+			return executionId;
+		}
+	}
+
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to send message: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	const data: { executionId: string } = await res.json();
+	return data.executionId;
+}
+
+// ---------------------------------------------------------------------------
+// Step 3 — Stream execution events
+// GET /api/v1/assistant/executions/{executionId}/events → SSE
+// ---------------------------------------------------------------------------
+
+function parseSSELine(line: string): SSEEvent | null {
+	if (!line.startsWith('data: ')) {
+		return null;
+	}
+	const json = line.slice('data: '.length).trim();
+	if (!json || json === '[DONE]') {
+		return null;
+	}
+	try {
+		return JSON.parse(json) as SSEEvent;
+	} catch {
+		return null;
+	}
+}
+
+function parseSSEChunk(chunk: string): SSEEvent[] {
+	return chunk
+		.split('\n\n')
+		.map((part) => part.split('\n').find((l) => l.startsWith('data: ')) ?? '')
+		.map(parseSSELine)
+		.filter((e): e is SSEEvent => e !== null);
+}
+
+async function* readSSEReader(
+	reader: ReadableStreamDefaultReader<Uint8Array>,
+): AsyncGenerator<SSEEvent> {
+	const decoder = new TextDecoder();
+	let lineBuffer = '';
+	try {
+		// eslint-disable-next-line no-constant-condition
+		while (true) {
+			// eslint-disable-next-line no-await-in-loop
+			const { done, value } = await reader.read();
+			if (done) {
+				break;
+			}
+			lineBuffer += decoder.decode(value, { stream: true });
+			const parts = lineBuffer.split('\n\n');
+			lineBuffer = parts.pop() ?? '';
+			yield* parts.flatMap(parseSSEChunk);
+		}
+		yield* parseSSEChunk(lineBuffer);
+	} finally {
+		reader.releaseLock();
+	}
+}
+
+export async function* streamEvents(
+	executionId: string,
+	signal?: AbortSignal,
+): AsyncGenerator<SSEEvent> {
+	const res = await fetch(`${BASE}/executions/${executionId}/events`, {
+		headers: { ...authHeaders() },
+		signal,
+	});
+	if (!res.ok || !res.body) {
+		throw new Error(`SSE stream failed: ${res.status} ${res.statusText}`);
+	}
+	yield* readSSEReader(res.body.getReader());
+}
+
+// ---------------------------------------------------------------------------
+// Approval / Clarification / Cancel actions
+// ---------------------------------------------------------------------------
+
+/** Approve a pending action. Returns a new executionId — open a fresh SSE stream for it. */
+export async function approveExecution(
+	approvalId: string,
+	signal?: AbortSignal,
+): Promise<string> {
+	const res = await fetch(`${BASE}/approve`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ approvalId }),
+		signal,
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to approve: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	const data: { executionId: string } = await res.json();
+	return data.executionId;
+}
+
+/** Reject a pending action. */
+export async function rejectExecution(
+	approvalId: string,
+	signal?: AbortSignal,
+): Promise<void> {
+	const res = await fetch(`${BASE}/reject`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ approvalId }),
+		signal,
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to reject: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+}
+
+/** Submit clarification answers. Returns a new executionId — open a fresh SSE stream for it. */
+export async function clarifyExecution(
+	clarificationId: string,
+	answers: Record<string, unknown>,
+	signal?: AbortSignal,
+): Promise<string> {
+	const res = await fetch(`${BASE}/clarify`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ clarificationId, answers }),
+		signal,
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to clarify: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+	const data: { executionId: string } = await res.json();
+	return data.executionId;
+}
+
+/** Cancel the active execution on a thread. */
+export async function cancelExecution(
+	threadId: string,
+	signal?: AbortSignal,
+): Promise<void> {
+	const res = await fetch(`${BASE}/cancel`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ threadId }),
+		signal,
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to cancel: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+}
+
+// ---------------------------------------------------------------------------
+// Feedback
+// ---------------------------------------------------------------------------
+
+export type FeedbackRating = 'positive' | 'negative';
+
+export async function submitFeedback(
+	messageId: string,
+	rating: FeedbackRating,
+	comment?: string,
+): Promise<void> {
+	const res = await fetch(`${BASE}/messages/${messageId}/feedback`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', ...authHeaders() },
+		body: JSON.stringify({ rating, comment: comment ?? null }),
+	});
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		throw new Error(
+			`Failed to submit feedback: ${res.status} ${res.statusText} — ${body}`,
+		);
+	}
+}

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -4837,10 +4837,6 @@ export interface TypesChangePasswordRequestDTO {
 	 * @type string
 	 */
 	oldPassword?: string;
-	/**
-	 * @type string
-	 */
-	userId?: string;
 }
 
 export interface TypesDeprecatedUserDTO {
@@ -5204,9 +5200,6 @@ export type AuthzResources200 = {
 	status: string;
 };
 
-export type ChangePasswordPathParameters = {
-	id: string;
-};
 export type ListChannels200 = {
 	/**
 	 * @type array
@@ -5604,10 +5597,10 @@ export type GetFieldsValues200 = {
 	status: string;
 };
 
-export type GetResetPasswordTokenPathParameters = {
+export type GetResetPasswordTokenDeprecatedPathParameters = {
 	id: string;
 };
-export type GetResetPasswordToken200 = {
+export type GetResetPasswordTokenDeprecated200 = {
 	data: TypesResetPasswordTokenDTO;
 	/**
 	 * @type string
@@ -6579,6 +6572,28 @@ export type GetUser200 = {
 export type UpdateUserPathParameters = {
 	id: string;
 };
+export type GetResetPasswordTokenPathParameters = {
+	id: string;
+};
+export type GetResetPasswordToken200 = {
+	data: TypesResetPasswordTokenDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateResetPasswordTokenPathParameters = {
+	id: string;
+};
+export type CreateResetPasswordToken201 = {
+	data: TypesResetPasswordTokenDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetRolesByUserIDPathParameters = {
 	id: string;
 };

frontend/src/api/generated/services/users/index.ts

@@ -20,12 +20,15 @@ import { useMutation, useQuery } from 'react-query';
 import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
-	ChangePasswordPathParameters,
 	CreateInvite201,
+	CreateResetPasswordToken201,
+	CreateResetPasswordTokenPathParameters,
 	DeleteUserPathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
+	GetResetPasswordTokenDeprecated200,
+	GetResetPasswordTokenDeprecatedPathParameters,
 	GetResetPasswordTokenPathParameters,
 	GetRolesByUserID200,
 	GetRolesByUserIDPathParameters,
@@ -53,134 +56,36 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
-/**
- * This endpoint changes the password by id
- * @summary Change password
- */
-export const changePassword = (
-	{ id }: ChangePasswordPathParameters,
-	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/changePassword/${id}`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: typesChangePasswordRequestDTO,
-		signal,
-	});
-};
-
-export const getChangePasswordMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof changePassword>>,
-		TError,
-		{
-			pathParams: ChangePasswordPathParameters;
-			data: BodyType<TypesChangePasswordRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof changePassword>>,
-	TError,
-	{
-		pathParams: ChangePasswordPathParameters;
-		data: BodyType<TypesChangePasswordRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['changePassword'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof changePassword>>,
-		{
-			pathParams: ChangePasswordPathParameters;
-			data: BodyType<TypesChangePasswordRequestDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return changePassword(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ChangePasswordMutationResult = NonNullable<
-	Awaited<ReturnType<typeof changePassword>>
->;
-export type ChangePasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
-export type ChangePasswordMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Change password
- */
-export const useChangePassword = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof changePassword>>,
-		TError,
-		{
-			pathParams: ChangePasswordPathParameters;
-			data: BodyType<TypesChangePasswordRequestDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof changePassword>>,
-	TError,
-	{
-		pathParams: ChangePasswordPathParameters;
-		data: BodyType<TypesChangePasswordRequestDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getChangePasswordMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
 /**
  * This endpoint returns the reset password token by id
+ * @deprecated
  * @summary Get reset password token
  */
-export const getResetPasswordToken = (
-	{ id }: GetResetPasswordTokenPathParameters,
+export const getResetPasswordTokenDeprecated = (
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<GetResetPasswordToken200>({
+	return GeneratedAPIInstance<GetResetPasswordTokenDeprecated200>({
 		url: `/api/v1/getResetPasswordToken/${id}`,
 		method: 'GET',
 		signal,
 	});
 };
 
-export const getGetResetPasswordTokenQueryKey = ({
+export const getGetResetPasswordTokenDeprecatedQueryKey = ({
 	id,
-}: GetResetPasswordTokenPathParameters) => {
+}: GetResetPasswordTokenDeprecatedPathParameters) => {
 	return [`/api/v1/getResetPasswordToken/${id}`] as const;
 };
 
-export const getGetResetPasswordTokenQueryOptions = <
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+export const getGetResetPasswordTokenDeprecatedQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenPathParameters,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 			TError,
 			TData
 		>;
@@ -189,11 +94,11 @@ export const getGetResetPasswordTokenQueryOptions = <
 	const { query: queryOptions } = options ?? {};
 
 	const queryKey =
-		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
+		queryOptions?.queryKey ?? getGetResetPasswordTokenDeprecatedQueryKey({ id });
 
 	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getResetPasswordToken>>
-	> = ({ signal }) => getResetPasswordToken({ id }, signal);
+		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
+	> = ({ signal }) => getResetPasswordTokenDeprecated({ id }, signal);
 
 	return {
 		queryKey,
@@ -201,35 +106,39 @@ export const getGetResetPasswordTokenQueryOptions = <
 		enabled: !!id,
 		...queryOptions,
 	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getResetPasswordToken>>,
+		Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 		TError,
 		TData
 	> & { queryKey: QueryKey };
 };
 
-export type GetResetPasswordTokenQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getResetPasswordToken>>
+export type GetResetPasswordTokenDeprecatedQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>
 >;
-export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
+export type GetResetPasswordTokenDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Get reset password token
  */
 
-export function useGetResetPasswordToken<
-	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+export function useGetResetPasswordTokenDeprecated<
+	TData = Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 	TError = ErrorType<RenderErrorResponseDTO>
 >(
-	{ id }: GetResetPasswordTokenPathParameters,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: {
 		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			Awaited<ReturnType<typeof getResetPasswordTokenDeprecated>>,
 			TError,
 			TData
 		>;
 	},
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
+	const queryOptions = getGetResetPasswordTokenDeprecatedQueryOptions(
+		{ id },
+		options,
+	);
 
 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -241,15 +150,16 @@ export function useGetResetPasswordToken<
 }
 
 /**
+ * @deprecated
  * @summary Get reset password token
  */
-export const invalidateGetResetPasswordToken = async (
+export const invalidateGetResetPasswordTokenDeprecated = async (
 	queryClient: QueryClient,
-	{ id }: GetResetPasswordTokenPathParameters,
+	{ id }: GetResetPasswordTokenDeprecatedPathParameters,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
+		{ queryKey: getGetResetPasswordTokenDeprecatedQueryKey({ id }) },
 		options,
 	);
 
@@ -1407,6 +1317,189 @@ export const useUpdateUser = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns the existing reset password token for a user.
+ * @summary Get reset password token for a user
+ */
+export const getResetPasswordToken = (
+	{ id }: GetResetPasswordTokenPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetResetPasswordToken200>({
+		url: `/api/v2/users/${id}/reset_password_tokens`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetResetPasswordTokenQueryKey = ({
+	id,
+}: GetResetPasswordTokenPathParameters) => {
+	return [`/api/v2/users/${id}/reset_password_tokens`] as const;
+};
+
+export const getGetResetPasswordTokenQueryOptions = <
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetResetPasswordTokenPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetResetPasswordTokenQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getResetPasswordToken>>
+	> = ({ signal }) => getResetPasswordToken({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getResetPasswordToken>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetResetPasswordTokenQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getResetPasswordToken>>
+>;
+export type GetResetPasswordTokenQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get reset password token for a user
+ */
+
+export function useGetResetPasswordToken<
+	TData = Awaited<ReturnType<typeof getResetPasswordToken>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetResetPasswordTokenPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getResetPasswordToken>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetResetPasswordTokenQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get reset password token for a user
+ */
+export const invalidateGetResetPasswordToken = async (
+	queryClient: QueryClient,
+	{ id }: GetResetPasswordTokenPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetResetPasswordTokenQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates or regenerates a reset password token for a user. If a valid token exists, it is returned. If expired, a new one is created.
+ * @summary Create or regenerate reset password token for a user
+ */
+export const createResetPasswordToken = ({
+	id,
+}: CreateResetPasswordTokenPathParameters) => {
+	return GeneratedAPIInstance<CreateResetPasswordToken201>({
+		url: `/api/v2/users/${id}/reset_password_tokens`,
+		method: 'PUT',
+	});
+};
+
+export const getCreateResetPasswordTokenMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createResetPasswordToken>>,
+		TError,
+		{ pathParams: CreateResetPasswordTokenPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createResetPasswordToken>>,
+	TError,
+	{ pathParams: CreateResetPasswordTokenPathParameters },
+	TContext
+> => {
+	const mutationKey = ['createResetPasswordToken'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof createResetPasswordToken>>,
+		{ pathParams: CreateResetPasswordTokenPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return createResetPasswordToken(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateResetPasswordTokenMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createResetPasswordToken>>
+>;
+
+export type CreateResetPasswordTokenMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create or regenerate reset password token for a user
+ */
+export const useCreateResetPasswordToken = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createResetPasswordToken>>,
+		TError,
+		{ pathParams: CreateResetPasswordTokenPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createResetPasswordToken>>,
+	TError,
+	{ pathParams: CreateResetPasswordTokenPathParameters },
+	TContext
+> => {
+	const mutationOptions = getCreateResetPasswordTokenMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * This endpoint returns the user roles by user id
  * @summary Get user roles
@@ -1850,3 +1943,84 @@ export const useUpdateMyUserV2 = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint updates the password of the user I belong to
+ * @summary Updates my password
+ */
+export const updateMyPassword = (
+	typesChangePasswordRequestDTO: BodyType<TypesChangePasswordRequestDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/users/me/factor_password`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesChangePasswordRequestDTO,
+	});
+};
+
+export const getUpdateMyPasswordMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMyPassword>>,
+		TError,
+		{ data: BodyType<TypesChangePasswordRequestDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateMyPassword>>,
+	TError,
+	{ data: BodyType<TypesChangePasswordRequestDTO> },
+	TContext
+> => {
+	const mutationKey = ['updateMyPassword'];
+	const { mutation: mutationOptions } = options
+		? options.mutation &&
+		  'mutationKey' in options.mutation &&
+		  options.mutation.mutationKey
+			? options
+			: { ...options, mutation: { ...options.mutation, mutationKey } }
+		: { mutation: { mutationKey } };
+
+	const mutationFn: MutationFunction<
+		Awaited<ReturnType<typeof updateMyPassword>>,
+		{ data: BodyType<TypesChangePasswordRequestDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return updateMyPassword(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateMyPasswordMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateMyPassword>>
+>;
+export type UpdateMyPasswordMutationBody = BodyType<TypesChangePasswordRequestDTO>;
+export type UpdateMyPasswordMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Updates my password
+ */
+export const useUpdateMyPassword = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateMyPassword>>,
+		TError,
+		{ data: BodyType<TypesChangePasswordRequestDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateMyPassword>>,
+	TError,
+	{ data: BodyType<TypesChangePasswordRequestDTO> },
+	TContext
+> => {
+	const mutationOptions = getUpdateMyPasswordMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

frontend/src/api/v1/factor_password/changeMyPassword.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/changeMyPassword';
-
-const changeMyPassword = async (
-	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
-	try {
-		const response = await axios.post<PayloadProps>(
-			`/changePassword/${props.userId}`,
-			{
-				...props,
-			},
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default changeMyPassword;

frontend/src/api/v1/factor_password/getResetPasswordToken.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import {
-	GetResetPasswordToken,
-	PayloadProps,
-	Props,
-} from 'types/api/user/getResetPasswordToken';
-
-const getResetPasswordToken = async (
-	props: Props,
-): Promise<SuccessResponseV2<GetResetPasswordToken>> => {
-	try {
-		const response = await axios.get<PayloadProps>(
-			`/getResetPasswordToken/${props.userId}`,
-		);
-
-		return {
-			httpStatusCode: response.status,
-			data: response.data.data,
-		};
-	} catch (error) {
-		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-	}
-};
-
-export default getResetPasswordToken;

frontend/src/auto-import-registry.d.ts

@@ -10,7 +10,6 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
-import '@signozhq/badge';
 import '@signozhq/button';
 import '@signozhq/calendar';
 import '@signozhq/callout';
@@ -25,9 +24,6 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
-import '@signozhq/sonner';
-import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
-import '@signozhq/tooltip';
 import '@signozhq/ui';

frontend/src/components/AlertDetailsFilters/Filters.styles.scss

@@ -2,13 +2,6 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: var(--bg-ink-300);
-	border: 1px solid var(--bg-slate-400);
-}
-
-.lightMode {
-	.reset-button {
-		background: var(--bg-vanilla-100);
-		border-color: var(--bg-vanilla-300);
-	}
+	background: var(--l3-background);
+	border: 1px solid var(--l1-border);
 }

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -3,7 +3,7 @@
 	justify-content: center;
 	align-items: center;
 	height: 100vh;
-	background-color: var(--bg-ink-400, #121317); // Dark theme background
+	background-color: var(--l2-background); // Background
 
 	.app-loading-content {
 		display: flex;
@@ -28,7 +28,7 @@
 			.brand-title {
 				font-size: 20px;
 				font-weight: 600;
-				color: var(--bg-vanilla-100, #ffffff); // White text for dark theme
+				color: var(--l1-foreground); // Primary text
 				margin: 0;
 			}
 		}
@@ -37,7 +37,7 @@
 			margin-bottom: 24px;
 
 			.ant-typography {
-				color: var(--bg-vanilla-400, #c0c1c3); // Light gray text for dark theme
+				color: var(--l2-foreground); // Secondary text
 			}
 		}
 
@@ -46,7 +46,7 @@
 			width: 150px;
 			height: 12px;
 			border-radius: 2px;
-			color: var(--bg-robin-500, #4e74f8); // Primary blue color
+			color: var(--primary-background); // Primary blue color
 			border: 2px solid;
 			position: relative;
 		}
@@ -67,38 +67,6 @@
 	}
 }
 
-// Light theme styles - more specific selector
-.app-loading-container.lightMode {
-	background-color: var(
-		--bg-vanilla-100,
-		#ffffff
-	) !important; // White background for light theme
-
-	.app-loading-content {
-		.brand {
-			.brand-title {
-				color: var(--bg-ink-400, #121317) !important; // Dark text for light theme
-			}
-		}
-
-		.brand-tagline {
-			.ant-typography {
-				color: var(
-					--bg-ink-300,
-					#6b7280
-				) !important; // Dark gray text for light theme
-			}
-		}
-
-		.loader {
-			color: var(
-				--bg-robin-500,
-				#4e74f8
-			) !important; // Keep primary blue color for consistency
-		}
-	}
-}
-
 .perilin-bg {
 	position: absolute;
 	top: 0;
@@ -112,41 +80,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		transparent 100%
 	);
 }
-
-// Dark theme styles - ensure dark theme is properly applied
-.app-loading-container.dark {
-	background-color: var(--bg-ink-400, #121317) !important; // Dark background
-
-	.app-loading-content {
-		.brand {
-			.brand-title {
-				color: var(
-					--bg-vanilla-100,
-					#ffffff
-				) !important; // White text for dark theme
-			}
-		}
-
-		.brand-tagline {
-			.ant-typography {
-				color: var(
-					--bg-vanilla-400,
-					#c0c1c3
-				) !important; // Light gray text for dark theme
-			}
-		}
-
-		.loader {
-			color: var(--bg-robin-500, #4e74f8) !important; // Primary blue color
-		}
-	}
-}

frontend/src/components/AuthError/AuthError.styles.scss

@@ -4,12 +4,13 @@
 	animation: horizontal-shaking 300ms ease-out;
 
 	.error-content {
-		background: rgba(229, 72, 77, 0.1);
-		border: 1px solid rgba(229, 72, 77, 0.2);
+		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		border-radius: 4px;
 
 		&__summary-section {
-			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
+			border-bottom: 1px solid
+				color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		}
 
 		&__summary {
@@ -31,7 +32,7 @@
 		}
 
 		&__error-code {
-			color: #fadadb;
+			color: var(--bg-cherry-100);
 			font-size: 13px;
 			font-weight: 500;
 			line-height: 1;
@@ -39,7 +40,7 @@
 		}
 
 		&__error-message {
-			color: #f5b6b8;
+			color: var(--bg-cherry-300);
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
@@ -51,13 +52,13 @@
 		}
 
 		&__message-badge-label-text {
-			color: #fadadb;
+			color: var(--bg-cherry-100);
 		}
 
 		&__message-badge-line {
 			background-image: radial-gradient(
 				circle,
-				rgba(229, 72, 77, 0.3) 1px,
+				color-mix(in srgb, var(--bg-cherry-500) 30%, transparent) 1px,
 				transparent 2px
 			);
 		}
@@ -71,23 +72,23 @@
 		}
 
 		&__message-item {
-			color: #f5b6b8;
+			color: var(--bg-cherry-300);
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
 			letter-spacing: -0.065px;
 
 			&::before {
-				background: #f5b6b8;
+				background: var(--bg-cherry-300);
 			}
 		}
 
 		&__scroll-hint {
-			background: rgba(229, 72, 77, 0.2);
+			background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		}
 
 		&__scroll-hint-text {
-			color: #fadadb;
+			color: var(--bg-cherry-100);
 		}
 	}
 
@@ -100,27 +101,28 @@
 .lightMode {
 	.auth-error-container {
 		.error-content {
-			background: rgba(229, 72, 77, 0.1);
-			border-color: rgba(229, 72, 77, 0.2);
-
 			&__error-code {
-				color: var(--bg-ink-100);
+				color: var(--l2-foreground);
 			}
 
 			&__error-message {
-				color: var(--bg-ink-400);
+				color: var(--l1-foreground);
+			}
+
+			&__message-badge-label-text {
+				color: var(--l2-foreground);
 			}
 
 			&__message-item {
-				color: var(--bg-ink-400);
+				color: var(--l1-foreground);
 
 				&::before {
-					background: var(--bg-ink-400);
+					background: var(--l3-background);
 				}
 			}
 
 			&__scroll-hint-text {
-				color: var(--bg-ink-100);
+				color: var(--l2-foreground);
 			}
 		}
 	}

frontend/src/components/AuthPageContainer/AuthFooter.styles.scss

@@ -16,8 +16,8 @@
 	justify-content: center;
 	gap: 16px;
 	padding: 12px;
-	background: var(--bg-ink-400);
-	border: 1px solid var(--bg-ink-200);
+	background: var(--l2-background);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
 }
 
@@ -32,7 +32,7 @@
 	width: 6px;
 	height: 6px;
 	border-radius: 9999px;
-	background: #25e192;
+	background: var(--bg-forest-500);
 	flex-shrink: 0;
 }
 
@@ -49,7 +49,7 @@
 	font-size: 11px;
 	font-weight: 400;
 	line-height: 1;
-	color: var(--text-neutral-dark-100);
+	color: var(--l2-foreground);
 	text-align: center;
 }
 
@@ -67,16 +67,16 @@
 
 .auth-footer-link-icon {
 	flex-shrink: 0;
-	color: var(--text-neutral-dark-50);
+	color: var(--l1-foreground);
 }
 
 .auth-footer-link-status {
 	.auth-footer-text {
-		color: #25e192;
+		color: var(--bg-forest-500);
 	}
 
 	.auth-footer-link-icon {
-		color: #25e192;
+		color: var(--bg-forest-500);
 	}
 }
 
@@ -84,14 +84,12 @@
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background: var(--bg-ink-200);
+	background: var(--l3-background);
 	flex-shrink: 0;
 }
 
 .lightMode {
 	.auth-footer-content {
-		background: var(--bg-base-white);
-		border-color: var(--bg-vanilla-300);
 		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
 	}
 
@@ -108,8 +106,4 @@
 	.auth-footer-link-icon {
 		color: var(--text-neutral-light-100);
 	}
-
-	.auth-footer-separator {
-		background: var(--bg-vanilla-300);
-	}
 }

frontend/src/components/AuthPageContainer/AuthHeader.styles.scss

@@ -30,7 +30,7 @@
 	font-size: 15.4px;
 	font-weight: 500;
 	line-height: 17.5px;
-	color: var(--text-neutral-dark-50);
+	color: var(--l1-foreground);
 	white-space: nowrap;
 }
 
@@ -41,7 +41,7 @@
 	gap: 8px;
 	height: 32px;
 	padding: 10px 16px;
-	background: var(--bg-ink-400);
+	background: var(--l2-background);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -52,13 +52,13 @@
 		font-size: 11px;
 		font-weight: 500;
 		line-height: 1;
-		color: var(--text-neutral-dark-100);
+		color: var(--l2-foreground);
 		text-align: center;
 	}
 
 	svg {
 		flex-shrink: 0;
-		color: var(--text-neutral-dark-100);
+		color: var(--l2-foreground);
 	}
 
 	&:hover {
@@ -67,16 +67,8 @@
 }
 
 .lightMode {
-	.auth-header-logo-text {
-		color: var(--text-neutral-light-100);
-	}
-
 	.auth-header-help-button {
-		background: var(--bg-vanilla-200);
-
-		span,
-		svg {
-			color: var(--text-neutral-light-200);
-		}
+		background: var(--l2-background);
+		border: 1px solid var(--l1-border);
 	}
 }

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -4,7 +4,7 @@
 	position: relative;
 	min-height: 100vh;
 	width: 100%;
-	background: var(--bg-neutral-dark-1000);
+	background: var(--l1-background);
 	display: flex;
 	flex-direction: column;
 }
@@ -43,13 +43,13 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		rgba(11, 12, 14, 0.1) 0%,
-		rgba(11, 12, 14, 0) 56.77%
+		color-mix(in srgb, var(--background) 10%, transparent) 0%,
+		transparent 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		rgba(11, 12, 14, 0.1) 0%,
-		rgba(11, 12, 14, 0) 56.77%
+		color-mix(in srgb, var(--background) 10%, transparent) 0%,
+		transparent 56.77%
 	);
 }
 
@@ -65,7 +65,7 @@
 	border-radius: 956px;
 	background: radial-gradient(
 		ellipse at center -500px,
-		rgba(78, 116, 248, 0.3) 0%,
+		color-mix(in srgb, var(--primary-background) 30%, transparent) 0%,
 		transparent 70%
 	);
 	opacity: 0.3;
@@ -85,8 +85,8 @@
 	height: 100%;
 	background-image: repeating-linear-gradient(
 		to bottom,
-		var(--bg-ink-200) 0px,
-		var(--bg-ink-200) 4px,
+		var(--l1-border) 0px,
+		var(--l1-border) 4px,
 		transparent 4px,
 		transparent 8px
 	);
@@ -145,19 +145,19 @@
 }
 
 .lightMode {
-	.auth-page-wrapper {
-		background: var(--bg-base-white);
-	}
-
 	.bg-dot-pattern {
-		background: radial-gradient(circle, rgba(35, 38, 46, 1) 1px, transparent 1px);
+		background: radial-gradient(
+			circle,
+			var(--l3-background) 1px,
+			transparent 1px
+		);
 		background-size: 12px 12px;
 	}
 
 	.auth-page-gradient {
 		background: radial-gradient(
 			ellipse at center top,
-			rgba(78, 116, 248, 0.12) 0%,
+			color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
 			transparent 60%
 		);
 		opacity: 0.8;
@@ -167,15 +167,4 @@
 			filter: blur(300px);
 		}
 	}
-
-	.auth-page-line-left,
-	.auth-page-line-right {
-		background-image: repeating-linear-gradient(
-			to bottom,
-			var(--bg-vanilla-300) 0px,
-			var(--bg-vanilla-300) 4px,
-			transparent 4px,
-			transparent 8px
-		);
-	}
 }

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss

@@ -21,8 +21,8 @@
 				min-width: 164px;
 
 				border-radius: 2px;
-				border: 1px solid var(--bg-slate-400);
-				background: var(--bg-ink-300);
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
 			}
 		}
 	}
@@ -31,16 +31,3 @@
 		flex-shrink: 0;
 	}
 }
-
-.lightMode {
-	.celery-overview-filters {
-		.celery-filters {
-			.config-select-option {
-				.ant-select-selector {
-					border: 1px solid var(--bg-vanilla-300);
-					background: var(--bg-vanilla-100);
-				}
-			}
-		}
-	}
-}

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -27,10 +27,10 @@
 				font-size: 12px;
 				line-height: 18px;
 
-				background: var(--bg-ink-500);
+				background: var(--l1-background);
 				border-bottom: none;
 
-				color: var(--Vanilla-400, #c0c1c3);
+				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -47,8 +47,8 @@
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--bg-vanilla-100);
-				background: var(--bg-ink-500);
+				color: var(--l1-foreground);
+				background: var(--l1-background);
 			}
 
 			.progress-container {
@@ -59,7 +59,7 @@
 			}
 
 			.ant-table-tbody > tr:hover > td {
-				background: rgba(255, 255, 255, 0.04);
+				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}
 
 			.ant-table-cell:first-child {
@@ -89,7 +89,7 @@
 			position: relative;
 			bottom: 0;
 			width: 100%;
-			background: var(--bg-ink-500);
+			background: var(--l1-background);
 			padding: 4px;
 			margin: 0;
 
@@ -100,48 +100,11 @@
 				border-radius: 4px;
 
 				&-active {
-					background: var(--bg-robin-500);
-					border-color: var(--bg-robin-500);
+					background: var(--primary-background);
+					border-color: var(--primary-background);
 
 					a {
-						color: var(--bg-ink-500) !important;
-					}
-				}
-			}
-		}
-	}
-}
-
-.lightMode {
-	.celery-overview-table-container {
-		.celery-overview-table {
-			.ant-table {
-				.ant-table-thead > tr > th {
-					background: var(--bg-vanilla-100);
-					color: var(--text-ink-300);
-				}
-
-				.ant-table-cell {
-					background: var(--bg-vanilla-100);
-					color: var(--bg-ink-500);
-				}
-
-				.ant-table-tbody > tr:hover > td {
-					background: rgba(0, 0, 0, 0.04);
-				}
-			}
-
-			.ant-pagination {
-				background: var(--bg-vanilla-100);
-
-				.ant-pagination-item {
-					&-active {
-						background: var(--bg-robin-500);
-						border-color: var(--bg-robin-500);
-
-						a {
-							color: var(--bg-vanilla-100) !important;
-						}
+						color: var(--primary-foreground) !important;
 					}
 				}
 			}

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss

@@ -18,21 +18,8 @@
 				min-width: 164px;
 
 				border-radius: 2px;
-				border: 1px solid var(--bg-slate-400);
-				background: var(--bg-ink-300);
-			}
-		}
-	}
-}
-
-.lightMode {
-	.celery-task-filters {
-		.celery-filters {
-			.config-select-option {
-				.ant-select-selector {
-					border: 1px solid var(--bg-vanilla-300);
-					background: var(--bg-vanilla-100);
-				}
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
 			}
 		}
 	}

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss

@@ -1,7 +1,7 @@
 .celery-task-detail-drawer {
 	.ant-drawer-wrapper-body {
-		background: var(--bg-ink-500);
-		border: 1px solid var(--bg-ink-300);
+		background: var(--l1-background);
+		border: 1px solid var(--l1-border);
 	}
 
 	.ant-drawer-body {
@@ -11,17 +11,17 @@
 			border: none;
 			.ant-card-body {
 				height: 100%;
-				background: var(--bg-ink-500);
+				background: var(--l1-background);
 
 				.ant-table {
-					background: var(--bg-ink-500);
+					background: var(--l1-background);
 				}
 			}
 		}
 	}
 
 	.ant-drawer-header {
-		border-bottom: 1px solid var(--bg-ink-300);
+		border-bottom: 1px solid var(--l1-border);
 		.ant-drawer-header-title {
 			.ant-drawer-close {
 				position: absolute;
@@ -29,7 +29,7 @@
 			}
 
 			button > svg {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 			}
 
 			.ant-drawer-title {
@@ -38,7 +38,7 @@
 				align-items: flex-start;
 
 				.title {
-					color: var(--bg-vanilla-100);
+					color: var(--l1-foreground);
 					font-family: Inter;
 					font-size: 18px;
 					font-style: normal;
@@ -48,7 +48,7 @@
 				}
 
 				.subtitle {
-					color: var(--bg-vanilla-400);
+					color: var(--l2-foreground);
 					font-family: Inter;
 					font-size: 12px;
 					font-style: normal;
@@ -60,10 +60,10 @@
 	}
 
 	.ant-drawer-footer {
-		border-top: 1px solid var(--bg-ink-300);
+		border-top: 1px solid var(--l1-border);
 
 		.footer-text {
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 			font-family: Inter;
 			font-size: 14px;
 			font-style: normal;
@@ -72,51 +72,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.celery-task-detail-drawer {
-		.ant-drawer-wrapper-body {
-			background: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300);
-		}
-
-		.ant-drawer-body {
-			.ant-card {
-				.ant-card-body {
-					background: var(--bg-vanilla-100);
-
-					.ant-table {
-						background: var(--bg-vanilla-100);
-					}
-				}
-			}
-		}
-
-		.ant-drawer-header {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-			.ant-drawer-header-title {
-				button > svg {
-					color: var(--bg-ink-500);
-				}
-
-				.ant-drawer-title {
-					.title {
-						color: var(--bg-ink-400);
-					}
-
-					.subtitle {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		.ant-drawer-footer {
-			border-top: 1px solid var(--bg-vanilla-300);
-
-			.footer-text {
-				color: var(--bg-ink-400);
-			}
-		}
-	}
-}

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -40,13 +40,8 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid var(--bg-slate-500);
-		background: linear-gradient(
-				0deg,
-				rgba(171, 189, 255, 0) 0%,
-				rgba(171, 189, 255, 0) 100%
-			),
-			#0b0c0e;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(0deg, transparent 0%, transparent 100%), #0b0c0e;
 
 		.ant-card-body {
 			height: 100%;
@@ -147,13 +142,13 @@
 		gap: 16px;
 		align-items: center;
 
-		border: 1px dashed var(--bg-slate-50);
+		border: 1px dashed var(--l1-border);
 		border-radius: 4px;
 		padding: 6px 24px 6px 12px;
 		width: max-content;
 
 		.configure-option-Info-text {
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 			font-size: 12px;
 			font-weight: 400;
 		}
@@ -161,7 +156,7 @@
 
 	.row-panel {
 		border-radius: 4px;
-		background: rgba(18, 19, 23, 0.4);
+		background: color-mix(in srgb, var(--card) 40%, transparent);
 		padding: 8px;
 		display: flex;
 		gap: 6px;
@@ -180,12 +175,12 @@
 			align-items: center;
 
 			.row-icon {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				cursor: pointer;
 			}
 
 			.section-title {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -198,7 +193,7 @@
 }
 
 .celery-task-states {
-	border-bottom: 1px solid var(--bg-ink-200);
+	border-bottom: 1px solid var(--l1-border);
 
 	&__tab {
 		min-width: 140px;
@@ -207,11 +202,11 @@
 		position: relative;
 
 		&:not([data-last-tab='true']) {
-			border-right: 1px solid var(--bg-ink-200);
+			border-right: 1px solid var(--l1-border);
 		}
 
 		&--selected {
-			background-color: rgba(38, 38, 38, 0.5);
+			background-color: var(--l3-background);
 		}
 	}
 
@@ -225,7 +220,7 @@
 	&__label {
 		font-family: 'Inter';
 		font-size: 14px;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		line-height: 20px;
 		font-weight: 500;
 	}
@@ -233,7 +228,7 @@
 	&__value {
 		font-family: 'Geist Mono';
 		font-size: 24px;
-		color: var(--bg-vanilla-100);
+		color: var(--l1-foreground);
 		line-height: 32px;
 	}
 
@@ -243,46 +238,15 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: var(--bg-vanilla-100);
+		background-color: var(--l1-foreground);
 	}
 }
 
 .lightMode {
 	.celery-task-graph-grid-container {
 		.celery-task-graph-worker-count {
-			border: 1px solid var(--bg-vanilla-300);
 			background: unset;
 		}
-
-		.row-panel .row-panel-section .section-title {
-			color: var(--bg-ink-400);
-		}
-	}
-
-	.celery-task-states {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-
-		&__tab {
-			&:not([data-last-tab='true']) {
-				border-right: 1px solid var(--bg-vanilla-300);
-			}
-
-			&--selected {
-				background-color: var(--bg-vanilla-200);
-			}
-		}
-
-		&__label {
-			color: var(--bg-ink-500);
-		}
-
-		&__value {
-			color: var(--bg-slate-100);
-		}
-
-		&__indicator {
-			background-color: var(--bg-ink-400);
-		}
 	}
 
 	.configure-option-Info {

frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss

@@ -26,7 +26,7 @@
 		}
 	}
 	&--negative {
-		background: rgba(229, 72, 77, 0.1);
+		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
 
 		.change-percentage-pill {
 			&__icon {

frontend/src/components/ChangelogModal/ChangelogModal.styles.scss

@@ -1,7 +1,7 @@
 .changelog-modal {
 	.ant-modal-content {
 		padding: unset;
-		background-color: var(--bg-ink-400, #121317);
+		background-color: var(--l2-background);
 
 		.ant-modal-header {
 			margin-bottom: unset;
@@ -16,12 +16,12 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		background-color: var(--bg-ink-400, #121317);
+		background-color: var(--l2-background);
 		padding: 16px;
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--text-vanilla-100, #fff);
-		border-bottom: 1px solid var(--bg-slate-500, #161922);
+		color: var(--l1-foreground);
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&-footer.scroll-available {
@@ -32,14 +32,14 @@
 
 	&-footer {
 		position: relative;
-		border: 1px solid var(--bg-slate-500, #161922);
+		border: 1px solid var(--l1-border);
 		padding: 12px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 
 		&-label {
-			color: var(--text-robin-400, #7190f9);
+			color: var(--text-robin-400);
 			font-size: 14px;
 			line-height: 24px;
 			position: relative;
@@ -54,7 +54,7 @@
 				width: 6px;
 				height: 6px;
 				border-radius: 100%;
-				background-color: var(--bg-robin-500, #7190f9);
+				background-color: var(--primary-background);
 			}
 		}
 
@@ -77,7 +77,7 @@
 			.scroll-btn {
 				all: unset;
 				padding: 4px 12px 4px 10px;
-				background-color: var(--bg-slate-400, #1d212d);
+				background-color: var(--l1-border);
 				border-radius: 20px;
 				cursor: pointer;
 				display: flex;
@@ -87,17 +87,17 @@
 				transition: background-color 0.1s;
 
 				&:hover {
-					background-color: var(--bg-slate-200, #2c3140);
+					background-color: var(--l1-border);
 				}
 
 				&:active {
-					background-color: var(--bg-slate-600, #1c1f2a);
+					background-color: var(--l1-border);
 				}
 
 				span {
 					font-size: 12px;
 					line-height: 18px;
-					color: var(--text-vanilla-400, #c0c1c3);
+					color: var(--l2-foreground);
 				}
 
 				// add animation to the chevrons down icon
@@ -112,7 +112,7 @@
 		max-height: calc(100vh - 300px);
 		overflow-y: auto;
 		padding: 16px 16px 18px 16px;
-		border: 1px solid var(--bg-slate-500, #161922);
+		border: 1px solid var(--l1-border);
 		border-top-width: 0;
 		border-bottom-width: 0;
 	}
@@ -127,36 +127,3 @@
 		opacity: 0.5;
 	}
 }
-
-.lightMode {
-	.changelog-modal {
-		.ant-modal-content {
-			background-color: var(--bg-vanilla-100);
-			border-color: var(--bg-vanilla-300);
-		}
-
-		&-title {
-			background: var(--bg-vanilla-100);
-			color: var(--bg-ink-500);
-			border-color: var(--bg-vanilla-300);
-		}
-
-		&-content {
-			border-color: var(--bg-vanilla-300);
-		}
-
-		&-footer {
-			border-color: var(--bg-vanilla-300);
-
-			.scroll-btn-container {
-				.scroll-btn {
-					background-color: var(--bg-vanilla-300);
-
-					span {
-						color: var(--text-ink-500);
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -15,13 +15,13 @@
 	&-section-title {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--text-vanilla-400, #c0c1c3);
+		color: var(--l1-foreground);
 	}
 
 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--text-vanilla-400, #c0c1c3);
+		color: var(--l1-foreground);
 		display: block;
 		margin-bottom: 12px;
 	}
@@ -38,7 +38,7 @@
 		top: 6px;
 		bottom: -30px;
 		width: 1px;
-		background-color: var(--bg-slate-400, #1d212d);
+		background-color: var(--l1-border);
 
 		.inner-ball {
 			position: absolute;
@@ -47,7 +47,7 @@
 			height: 6px;
 			border-radius: 100%;
 			transform: translateX(-50%);
-			background-color: var(--bg-robin-500, #7190f9);
+			background-color: var(--primary-background);
 		}
 	}
 
@@ -69,7 +69,7 @@
 				top: 10px;
 				width: 20px;
 				height: 2px;
-				background-color: var(--bg-robin-500, #7190f9);
+				background-color: var(--primary-background);
 				transform: translate(-100%, -50%);
 			}
 		}
@@ -79,19 +79,20 @@
 	p {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--text-vanilla-400, #c0c1c3);
+		color: var(--l1-foreground);
 	}
 
 	code {
 		padding: 2px 4px;
-		background-color: var(--bg-slate-500, #161922);
+		background-color: var(--l1-border);
 		border-radius: 6px;
 		font-size: 95%;
 		vertical-align: middle;
-		border: 1px solid var(--bg-slate-600, #1c1f2a);
+		border: 1px solid var(--l1-border);
+		color: var(--l1-foreground);
 	}
 	a {
-		color: var(--text-robin-500, #7190f9);
+		color: var(--text-robin-500);
 		font-weight: 600;
 		text-decoration: underline;
 
@@ -102,7 +103,7 @@
 
 	& :is(h1, h2, h3, h4, h5, h6, &-section-title) {
 		font-weight: 600;
-		color: var(--text-vanilla-100, #fff);
+		color: var(--l1-foreground);
 	}
 
 	h1 {
@@ -122,7 +123,7 @@
 		width: 100%;
 		overflow: hidden;
 		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400, #1d212d);
+		border: 1px solid var(--l1-border);
 		margin-bottom: 28px;
 	}
 
@@ -130,25 +131,3 @@
 		margin: 12px 0;
 	}
 }
-
-.lightMode {
-	.changelog-renderer {
-		.changelog-release-date {
-			color: var(--text-ink-500);
-		}
-
-		&-line {
-			background-color: var(--bg-vanilla-300);
-		}
-
-		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
-			color: var(--text-ink-500);
-		}
-
-		code {
-			background-color: var(--bg-vanilla-300);
-			border: 1px solid var(--bg-vanilla-300);
-			color: var(--text-ink-500);
-		}
-	}
-}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.styles.scss

@@ -18,7 +18,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--bg-base-white);
+		color: var(--l1-foreground);
 		margin: 0;
 	}
 
@@ -54,7 +54,7 @@
 		height: 32px;
 		color: var(--l1-foreground);
 		background-color: var(--l2-background);
-		border-color: var(--border);
+		border-color: var(--l1-border);
 		font-size: var(--paragraph-base-400-font-size);
 		border-radius: 2px;
 		width: 100%;
@@ -96,11 +96,3 @@
 	gap: var(--spacing-4);
 	flex-shrink: 0;
 }
-
-.lightMode {
-	.create-sa-modal {
-		[data-slot='dialog-title'] {
-			color: var(--bg-base-black);
-		}
-	}
-}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,

frontend/src/components/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -1,11 +1,12 @@
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -9,16 +9,17 @@
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		color: var(--foreground);
-		border: 1px solid var(--border);
+		color: var(--secondary-foreground);
+		background-color: var(--secondary-background);
+		border: 1px solid var(--secondary-border);
 		border-radius: 2px;
 		box-shadow: none;
 		padding: 10px;
 		height: 33px;
 
 		&:hover:not(:disabled) {
-			color: var(--bg-vanilla-100);
-			background: var(--primary);
+			color: var(--primary-foreground);
+			background: var(--primary-background);
 		}
 
 		&:disabled {
@@ -29,7 +30,7 @@
 
 	.timeSelection-input {
 		&:hover {
-			border-color: #1d212d !important;
+			border-color: var(--l1-border) !important;
 		}
 	}
 
@@ -98,7 +99,7 @@
 	justify-content: center;
 	padding: 4px;
 	cursor: default;
-	color: var(--bg-vanilla-400, #c0c1c3) !important;
+	color: var(--l2-foreground) !important;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -146,14 +147,10 @@
 			color: rgba($color: #000000, $alpha: 0.4);
 		}
 	}
-
-	.info-text {
-		color: var(--bg-slate-400) !important;
-	}
 }
 
 .date-time-popover__footer {
-	border-top: 1px solid var(--bg-ink-200);
+	border-top: 1px solid var(--l1-border);
 	padding: 8px 14px;
 	.timezone-container {
 		display: flex;
@@ -205,7 +202,7 @@
 
 		display: flex;
 		align-items: center;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		gap: 6px;
 
 		.timezone {
@@ -213,10 +210,10 @@
 			align-items: center;
 			gap: 4px;
 			border-radius: 2px;
-			background: rgba(171, 189, 255, 0.04);
+			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
 			cursor: pointer;
 			padding: 0px 4px;
-			color: var(--bg-vanilla-100);
+			color: var(--l1-foreground);
 			border: none;
 		}
 	}
@@ -228,8 +225,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	color: var(--bg-vanilla-400);
-	background-color: var(--bg-ink-200);
+	color: var(--l2-foreground);
+	background-color: var(--l3-background);
 	font-size: 9px;
 	font-weight: 400;
 	line-height: 12px;
@@ -249,8 +246,8 @@
 	width: 36px;
 
 	font-size: 11px;
-	color: var(--bg-vanilla-400);
-	background-color: var(--bg-ink-200);
+	color: var(--l2-foreground);
+	background-color: var(--l3-background);
 	cursor: pointer;
 
 	&.is-live {
@@ -272,13 +269,14 @@
 
 @keyframes ripple {
 	0% {
-		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+		box-shadow: 0 0 0 0
+			color-mix(in srgb, var(--warning-background) 40%, transparent);
 	}
 	60% {
-		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+		box-shadow: 0 0 0 6px transparent;
 	}
 	100% {
-		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+		box-shadow: 0 0 0 0 transparent;
 	}
 }
 
@@ -288,8 +286,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	background: rgba(171, 189, 255, 0.04);
-	color: var(--bg-vanilla-100);
+	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+	color: var(--l1-foreground);
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 16px;
@@ -299,23 +297,16 @@
 	width: 20px;
 
 	&:hover {
-		background: rgba(171, 189, 255, 0.08);
+		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
 	}
 }
 
 .lightMode {
-	.date-time-popover__footer {
-		border-color: var(--bg-vanilla-400);
-	}
-
 	.timezone-container {
-		color: var(--bg-ink-400);
-
 		.timezone {
-			color: var(--bg-ink-100);
 			background: rgb(179 179 179 / 15%);
 			&__icon {
-				stroke: var(--bg-ink-100);
+				stroke: var(--l1-foreground);
 			}
 		}
 	}
@@ -323,23 +314,16 @@
 	.custom-time-picker {
 		.timeSelection-input {
 			&:hover {
-				border-color: var(--bg-vanilla-300) !important;
+				border-color: var(--l1-border) !important;
 			}
 		}
 	}
 
 	.timezone-badge {
-		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}
 
-	.time-input-prefix {
-		background-color: var(--bg-vanilla-300);
-		color: var(--bg-ink-400);
-	}
-
 	.time-input-suffix-icon-badge {
-		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -656,15 +656,13 @@ function CustomTimePicker({
 						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
 					}
 				>
-					<span>
-						<Button
-							className="zoom-out-btn"
-							onClick={handleZoomOut}
-							disabled={zoomOutDisabled}
-							data-testid="zoom-out-btn"
-							prefixIcon={<ZoomOut size={14} />}
-						/>
-					</span>
+					<Button
+						className="zoom-out-btn"
+						onClick={handleZoomOut}
+						disabled={zoomOutDisabled}
+						data-testid="zoom-out-btn"
+						prefixIcon={<ZoomOut size={14} />}
+					/>
 				</Tooltip>
 			)}
 		</div>

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -3,11 +3,7 @@ $font-family: 'Inter';
 $item-spacing: 8px;
 
 :root {
-	--border-color: var(--bg-slate-400);
-}
-
-.lightMode {
-	--border-color: var(--bg-vanilla-400);
+	--border-color: var(--l1-border);
 }
 
 // Mixins
@@ -24,7 +20,7 @@ $item-spacing: 8px;
 
 .timezone-picker {
 	width: 532px;
-	color: var(--bg-vanilla-400);
+	color: var(--l2-foreground);
 	font-family: $font-family;
 
 	&__search {
@@ -46,7 +42,7 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		outline: none;
-		color: var(--bg-vanilla-100);
+		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
@@ -56,19 +52,19 @@ $item-spacing: 8px;
 		}
 
 		&::placeholder {
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 		}
 	}
 
 	&__esc-key {
 		@include text-style-base;
 		font-size: 8px;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		letter-spacing: -0.04px;
 		border-radius: 2.286px;
-		border: 1.143px solid var(--bg-ink-200);
+		border: 1.143px solid var(--l1-border);
 		border-bottom-width: 2.286px;
-		background: var(--bg-ink-400);
+		background: var(--l2-background);
 		padding: 0 1px;
 	}
 
@@ -86,14 +82,14 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		width: -webkit-fill-available;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-family: $font-family;
 
 		&:hover,
 		&.selected {
 			border-radius: 2px;
-			background: rgba(171, 189, 255, 0.04);
-			color: var(--bg-vanilla-100);
+			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+			color: var(--l1-foreground);
 		}
 
 		&.has-divider {
@@ -117,7 +113,7 @@ $item-spacing: 8px;
 	}
 
 	&__offset {
-		color: var(--bg-vanilla-100);
+		color: var(--l1-foreground);
 		font-size: 12px;
 		line-height: 16px;
 		letter-spacing: -0.06px;
@@ -138,28 +134,14 @@ $item-spacing: 8px;
 	.timezone-picker {
 		&__search {
 			.search-icon {
-				stroke: var(--bg-ink-400);
+				stroke: var(--l1-foreground);
 			}
 		}
-		&__input {
-			color: var(--bg-ink-100);
-		}
-		&__esc-key {
-			background-color: var(--bg-vanilla-100);
-			border-color: var(--bg-vanilla-400);
-			color: var(--bg-ink-400);
-		}
-		&__item {
-			color: var(--bg-ink-400);
-		}
-		&__offset {
-			color: var(--bg-ink-100);
-		}
 	}
 	.timezone-name-wrapper {
 		&__selected-icon {
 			.check-icon {
-				stroke: var(--bg-ink-100);
+				stroke: var(--l1-foreground);
 			}
 		}
 	}

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -1,10 +1,10 @@
 .details-drawer {
 	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--bg-slate-500);
+		border-left: 1px solid var(--l1-border);
 	}
 	.ant-drawer-header {
-		background: var(--bg-ink-400);
-		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--l2-background);
+		border-bottom: 1px solid var(--l1-border);
 
 		.ant-drawer-header-title {
 			display: flex;
@@ -14,12 +14,12 @@
 				margin-inline-end: 0px;
 				padding: 0px;
 				padding-right: 16px;
-				border-right: 1px solid var(--bg-slate-500);
+				border-right: 1px solid var(--l1-border);
 			}
 
 			.ant-drawer-title {
 				padding-left: 16px;
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 	}
 	.ant-drawer-body {
 		padding: 16px;
-		background: var(--bg-ink-400);
+		background: var(--l2-background);
 
 		&::-webkit-scrollbar {
 			width: 0.1rem;
@@ -50,11 +50,11 @@
 			flex-shrink: 0;
 			padding: 7px 20px;
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-400);
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
-			color: #fff;
+			color: var(--l1-foreground);
 			font-family: Inter;
 			font-size: 12px;
 			font-style: normal;
@@ -75,7 +75,7 @@
 		}
 
 		.ant-tabs-tab-active {
-			background: var(--bg-slate-400);
+			background: var(--l3-background);
 		}
 
 		.ant-tabs-tab + .ant-tabs-tab {
@@ -91,44 +91,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.details-drawer {
-		.ant-drawer-wrapper-body {
-			border-left: 1px solid var(--bg-vanilla-300);
-		}
-		.ant-drawer-header {
-			background: var(--bg-vanilla-200);
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
-			.ant-drawer-header-title {
-				.ant-drawer-close {
-					border-right: 1px solid var(--bg-vanilla-300);
-				}
-
-				.ant-drawer-title {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-		.ant-drawer-body {
-			background: var(--bg-vanilla-200);
-		}
-
-		.details-drawer-tabs {
-			.ant-tabs-tab {
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-300);
-				color: var(--bg-ink-400);
-			}
-
-			.ant-tabs-tab-active {
-				background: var(--bg-vanilla-200);
-			}
-
-			.ant-tabs-tab + .ant-tabs-tab {
-				border-left: none;
-			}
-		}
-	}
-}

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss

@@ -1,7 +1,7 @@
 .download-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l3-border);
+		border: 1px solid var(--l1-border);
 		background: linear-gradient(
 			139deg,
 			var(--l2-background) 0%,
@@ -46,7 +46,7 @@
 
 		.horizontal-line {
 			height: 1px;
-			background: var(--l3-border);
+			background: var(--l1-border);
 		}
 
 		.export-button {
@@ -57,30 +57,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.download-popover {
-		.ant-popover-inner {
-			border: 1px solid var(--l2-border);
-			background: linear-gradient(
-				139deg,
-				var(--background) 0%,
-				var(--l1-background) 98.68%
-			);
-			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
-		}
-		.export-options-container {
-			.title {
-				color: var(--l2-foreground);
-			}
-
-			:global(.ant-radio-wrapper) {
-				color: var(--foreground);
-			}
-
-			.horizontal-line {
-				background: var(--l2-border);
-			}
-		}
-	}
-}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -32,7 +32,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--border);
+		border-color: var(--l1-border);
 		color: var(--l1-foreground);
 		box-shadow: none;
 
@@ -49,7 +49,7 @@
 		padding: var(--padding-1) var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 
 		&--disabled {
 			cursor: not-allowed;
@@ -122,7 +122,7 @@
 		width: 100%;
 		height: 56px;
 		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--border);
+		border-top: 1px solid var(--l1-border);
 		flex-shrink: 0;
 		background: var(--card);
 	}
@@ -142,7 +142,7 @@
 	&__footer-divider {
 		width: 1px;
 		height: 21px;
-		background: var(--border);
+		background: var(--l1-border);
 		flex-shrink: 0;
 	}
 
@@ -175,7 +175,7 @@
 		}
 
 		&--danger {
-			color: var(--destructive);
+			color: var(--accent-cherry);
 		}
 
 		&--warning {
@@ -186,7 +186,7 @@
 
 .delete-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	border: 1px solid var(--l1-border);
 
 	[data-slot='dialog-title'] {
 		color: var(--l1-foreground);
@@ -216,10 +216,10 @@
 
 .reset-link-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	border: 1px solid var(--l1-border);
 
 	[data-slot='dialog-header'] {
-		border-color: var(--l2-border);
+		border-color: var(--l1-border);
 		color: var(--l1-foreground);
 	}
 
@@ -250,7 +250,7 @@
 		height: 32px;
 		overflow: hidden;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 	}
 
@@ -280,7 +280,7 @@
 		border-top: none;
 		border-right: none;
 		border-bottom: none;
-		border-left: 1px solid var(--border);
+		border-left: 1px solid var(--l1-border);
 		min-width: 64px;
 	}
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,17 +1,17 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
+import { Badge, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import {
-	getResetPasswordToken,
+	useCreateResetPasswordToken,
 	useDeleteUser,
+	useGetResetPasswordToken,
 	useGetUser,
 	useUpdateMyUserV2,
 	useUpdateUser,
@@ -55,6 +55,27 @@ function getDeleteTooltip(
 	return undefined;
 }
 
+function getInviteButtonLabel(
+	isLoading: boolean,
+	existingToken: { expiresAt?: Date } | undefined,
+	isExpired: boolean,
+	notFound: boolean,
+): string {
+	if (isLoading) {
+		return 'Checking invite...';
+	}
+	if (existingToken && !isExpired) {
+		return 'Copy Invite Link';
+	}
+	if (isExpired) {
+		return 'Regenerate Invite Link';
+	}
+	if (notFound) {
+		return 'Generate Invite Link';
+	}
+	return 'Copy Invite Link';
+}
+
 function toSaveApiError(err: unknown): APIError {
 	return (
 		convertToApiError(err as AxiosError<RenderErrorResponseDTO>) ??
@@ -83,9 +104,11 @@ function EditMemberDrawer({
 	const [localRole, setLocalRole] = useState('');
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
-	const [isGeneratingLink, setIsGeneratingLink] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [resetLink, setResetLink] = useState<string | null>(null);
+	const [resetLinkExpiresAt, setResetLinkExpiresAt] = useState<string | null>(
+		null,
+	);
 	const [showResetLinkDialog, setShowResetLinkDialog] = useState(false);
 	const [hasCopiedResetLink, setHasCopiedResetLink] = useState(false);
 	const [linkType, setLinkType] = useState<'invite' | 'reset' | null>(null);
@@ -121,6 +144,27 @@ function EditMemberDrawer({
 		applyDiff,
 	} = useMemberRoleManager(member?.id ?? '', open && !!member?.id);
 
+	// Token status query for invited users
+	const {
+		data: tokenQueryData,
+		isLoading: isLoadingTokenStatus,
+		isError: tokenNotFound,
+	} = useGetResetPasswordToken(
+		{ id: member?.id ?? '' },
+		{ query: { enabled: open && !!member?.id && isInvited } },
+	);
+
+	const existingToken = tokenQueryData?.data;
+	const isTokenExpired =
+		existingToken != null &&
+		new Date(String(existingToken.expiresAt)) < new Date();
+
+	// Create/regenerate token mutation
+	const {
+		mutateAsync: createTokenMutation,
+		isLoading: isGeneratingLink,
+	} = useCreateResetPasswordToken();
+
 	const fetchedDisplayName =
 		fetchedUser?.data?.displayName ?? member?.name ?? '';
 	const fetchedUserId = fetchedUser?.data?.id;
@@ -338,12 +382,21 @@ function EditMemberDrawer({
 		if (!member) {
 			return;
 		}
-		setIsGeneratingLink(true);
 		try {
-			const response = await getResetPasswordToken({ id: member.id });
+			const response = await createTokenMutation({
+				pathParams: { id: member.id },
+			});
 			if (response?.data?.token) {
 				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
 				setResetLink(link);
+				setResetLinkExpiresAt(
+					response.data.expiresAt
+						? formatTimezoneAdjustedTimestamp(
+								String(response.data.expiresAt),
+								DATE_TIME_FORMATS.DASH_DATETIME,
+						  )
+						: null,
+				);
 				setHasCopiedResetLink(false);
 				setLinkType(isInvited ? 'invite' : 'reset');
 				setShowResetLinkDialog(true);
@@ -359,10 +412,8 @@ function EditMemberDrawer({
 				err as AxiosError<RenderErrorResponseDTO, unknown> | null,
 			);
 			showErrorModal(errMsg as APIError);
-		} finally {
-			setIsGeneratingLink(false);
 		}
-	}, [member, isInvited, onClose, showErrorModal]);
+	}, [member, isInvited, onClose, showErrorModal, createTokenMutation]);
 
 	const [copyState, copyToClipboard] = useCopyToClipboard();
 	const handleCopyResetLink = useCallback((): void => {
@@ -568,12 +619,19 @@ function EditMemberDrawer({
 								<Button
 									className="edit-member-drawer__footer-btn edit-member-drawer__footer-btn--warning"
 									onClick={handleGenerateResetLink}
-									disabled={isGeneratingLink || isRootUser}
+									disabled={isGeneratingLink || isRootUser || isLoadingTokenStatus}
 								>
 									<RefreshCw size={12} />
-									{isGeneratingLink && 'Generating...'}
-									{!isGeneratingLink && isInvited && 'Copy Invite Link'}
-									{!isGeneratingLink && !isInvited && 'Generate Password Reset Link'}
+									{isGeneratingLink
+										? 'Generating...'
+										: isInvited
+										? getInviteButtonLabel(
+												isLoadingTokenStatus,
+												existingToken,
+												isTokenExpired,
+												tokenNotFound,
+										  )
+										: 'Generate Password Reset Link'}
 								</Button>
 							</span>
 						</Tooltip>
@@ -623,6 +681,7 @@ function EditMemberDrawer({
 				open={showResetLinkDialog}
 				linkType={linkType}
 				resetLink={resetLink}
+				expiresAt={resetLinkExpiresAt}
 				hasCopied={hasCopiedResetLink}
 				onClose={(): void => {
 					setShowResetLinkDialog(false);

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -6,6 +6,7 @@ interface ResetLinkDialogProps {
 	open: boolean;
 	linkType: 'invite' | 'reset' | null;
 	resetLink: string | null;
+	expiresAt: string | null;
 	hasCopied: boolean;
 	onClose: () => void;
 	onCopy: () => void;
@@ -15,6 +16,7 @@ function ResetLinkDialog({
 	open,
 	linkType,
 	resetLink,
+	expiresAt,
 	hasCopied,
 	onClose,
 	onCopy,
@@ -53,6 +55,11 @@ function ResetLinkDialog({
 						{hasCopied ? 'Copied!' : 'Copy'}
 					</Button>
 				</div>
+				{expiresAt && (
+					<p className="reset-link-dialog__description">
+						This link expires on {expiresAt}.
+					</p>
+				)}
 			</div>
 		</DialogWrapper>
 	);

frontend/src/components/EditMemberDrawer/__tests__/EditMemberDrawer.test.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
-	getResetPasswordToken,
+	useCreateResetPasswordToken,
 	useDeleteUser,
+	useGetResetPasswordToken,
 	useGetUser,
 	useSetRoleByUserID,
 	useUpdateMyUserV2,
@@ -55,14 +56,16 @@ jest.mock('api/generated/services/users', () => ({
 	useUpdateUser: jest.fn(),
 	useUpdateMyUserV2: jest.fn(),
 	useSetRoleByUserID: jest.fn(),
-	getResetPasswordToken: jest.fn(),
+	useGetResetPasswordToken: jest.fn(),
+	useCreateResetPasswordToken: jest.fn(),
 }));
 
 jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
 	convertToApiError: jest.fn(),
 }));
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),
@@ -82,7 +85,7 @@ jest.mock('react-use', () => ({
 const ROLES_ENDPOINT = '*/api/v1/roles';
 
 const mockDeleteMutate = jest.fn();
-const mockGetResetPasswordToken = jest.mocked(getResetPasswordToken);
+const mockCreateTokenMutateAsync = jest.fn();
 
 const showErrorModal = jest.fn();
 jest.mock('providers/ErrorModalProvider', () => ({
@@ -184,6 +187,31 @@ describe('EditMemberDrawer', () => {
 			mutate: mockDeleteMutate,
 			isLoading: false,
 		});
+		// Token query: valid token for invited members
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					token: 'invite-tok-valid',
+					id: 'token-1',
+					expiresAt: new Date(Date.now() + 86400000).toISOString(),
+				},
+			},
+			isLoading: false,
+			isError: false,
+		});
+		// Create token mutation
+		mockCreateTokenMutateAsync.mockResolvedValue({
+			status: 'success',
+			data: {
+				token: 'reset-tok-abc',
+				id: 'user-1',
+				expiresAt: new Date(Date.now() + 86400000).toISOString(),
+			},
+		});
+		(useCreateResetPasswordToken as jest.Mock).mockReturnValue({
+			mutateAsync: mockCreateTokenMutateAsync,
+			isLoading: false,
+		});
 	});
 
 	afterEach(() => {
@@ -357,6 +385,40 @@ describe('EditMemberDrawer', () => {
 		expect(screen.queryByText('Last Modified')).not.toBeInTheDocument();
 	});
 
+	it('shows "Regenerate Invite Link" when token is expired', () => {
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
+			data: {
+				data: {
+					token: 'old-tok',
+					id: 'token-1',
+					expiresAt: new Date(Date.now() - 86400000).toISOString(), // expired yesterday
+				},
+			},
+			isLoading: false,
+			isError: false,
+		});
+
+		renderDrawer({ member: invitedMember });
+
+		expect(
+			screen.getByRole('button', { name: /regenerate invite link/i }),
+		).toBeInTheDocument();
+	});
+
+	it('shows "Generate Invite Link" when no token exists', () => {
+		(useGetResetPasswordToken as jest.Mock).mockReturnValue({
+			data: undefined,
+			isLoading: false,
+			isError: true,
+		});
+
+		renderDrawer({ member: invitedMember });
+
+		expect(
+			screen.getByRole('button', { name: /generate invite link/i }),
+		).toBeInTheDocument();
+	});
+
 	it('calls deleteUser after confirming revoke invite for invited members', async () => {
 		const onComplete = jest.fn();
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
@@ -609,7 +671,7 @@ describe('EditMemberDrawer', () => {
 			).not.toBeInTheDocument();
 		});
 
-		it('does not call getResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
+		it('does not call createResetPasswordToken when Reset Link is clicked while disabled (root)', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			renderDrawer();
 
@@ -617,20 +679,16 @@ describe('EditMemberDrawer', () => {
 				screen.getByRole('button', { name: /generate password reset link/i }),
 			);
 
-			expect(mockGetResetPasswordToken).not.toHaveBeenCalled();
+			expect(mockCreateTokenMutateAsync).not.toHaveBeenCalled();
 		});
 	});
 
 	describe('Generate Password Reset Link', () => {
 		beforeEach(() => {
 			mockCopyToClipboard.mockClear();
-			mockGetResetPasswordToken.mockResolvedValue({
-				status: 'success',
-				data: { token: 'reset-tok-abc', id: 'user-1' },
-			});
 		});
 
-		it('calls getResetPasswordToken and opens the reset link dialog with the generated link', async () => {
+		it('calls POST and opens the reset link dialog with the generated link and expiry', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
 			renderDrawer();
@@ -642,11 +700,12 @@ describe('EditMemberDrawer', () => {
 			const dialog = await screen.findByRole('dialog', {
 				name: /password reset link/i,
 			});
-			expect(mockGetResetPasswordToken).toHaveBeenCalledWith({
-				id: 'user-1',
+			expect(mockCreateTokenMutateAsync).toHaveBeenCalledWith({
+				pathParams: { id: 'user-1' },
 			});
 			expect(dialog).toBeInTheDocument();
 			expect(dialog).toHaveTextContent('reset-tok-abc');
+			expect(dialog).toHaveTextContent(/this link expires on/i);
 		});
 
 		it('copies the link to clipboard and shows "Copied!" on the button', async () => {

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -5,7 +5,7 @@
 		align-items: center;
 		gap: 4px;
 		border-radius: 20px;
-		background: rgba(229, 72, 77, 0.2);
+		background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 		padding-left: 3px;
 		padding-right: 8px;
 		cursor: pointer;
@@ -21,11 +21,11 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			rgba(11, 12, 14, 0.12) 0.07%,
-			rgba(39, 8, 14, 0.24) 50.04%,
-			rgba(106, 29, 44, 0.36) 75.02%,
-			rgba(197, 57, 85, 0.48) 87.51%,
-			rgba(242, 71, 105, 0.6) 100%
+			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
+			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
+			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
+			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
+			color-mix(in srgb, var(--bg-sakura-500) 60%, transparent) 100%
 		);
 		-webkit-backdrop-filter: blur(10px);
 		backdrop-filter: blur(10px);
@@ -42,7 +42,7 @@
 	}
 	&__body {
 		padding: 0;
-		background: var(--bg-ink-400);
+		background: var(--l2-background);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
@@ -72,21 +72,21 @@
 				text-transform: uppercase;
 				&,
 				&:hover {
-					color: var(--bg-vanilla-100);
+					color: var(--l1-foreground);
 				}
 			}
 			&__value {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				pointer-events: none;
 			}
 		}
 		.close-button {
 			padding: 3px 7px;
-			background: var(--bg-ink-400);
+			background: var(--l2-background);
 			display: inline-flex;
 			align-items: center;
 			border-radius: 4px;
-			border: 1px solid var(--bg-slate-500);
+			border: 1px solid var(--l1-border);
 			box-shadow: none;
 		}
 	}
@@ -102,17 +102,3 @@
 		background: none !important;
 	}
 }
-
-.lightMode {
-	.error-modal {
-		&__body,
-		&__header .close-button {
-			background: var(--bg-vanilla-100);
-		}
-		&__header .close-button {
-			svg {
-				fill: var(--bg-vanilla-100);
-			}
-		}
-	}
-}

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,7 +5,7 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--bg-slate-400);
+		border-bottom: 1px solid var(--l1-border);
 	}
 
 	&__summary {
@@ -27,7 +27,7 @@
 	}
 
 	&__error-code {
-		color: var(--bg-vanilla-100);
+		color: var(--l1-foreground);
 		margin: 0;
 		font-size: 16px;
 		font-weight: 500;
@@ -37,7 +37,7 @@
 
 	&__error-message {
 		margin: 0;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
@@ -49,14 +49,14 @@
 		align-items: center;
 		gap: 6px;
 		padding: 9px 12.5px;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px; /* 150% */
 		letter-spacing: 0.12px;
 		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		box-shadow: none;
 	}
 
@@ -68,7 +68,7 @@
 
 		.key-value-label {
 			width: fit-content;
-			border-color: var(--bg-slate-400);
+			border-color: var(--l1-border);
 			border-radius: 20px;
 			overflow: hidden;
 			&__key {
@@ -77,7 +77,7 @@
 			}
 			&__value {
 				padding-right: 10px;
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-size: 12px;
 				font-weight: 500;
 				line-height: 18px; /* 150% */
@@ -96,7 +96,7 @@
 				border-radius: 50%;
 			}
 			&-text {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 				font-size: 10px;
 				font-weight: 500;
 				line-height: 18px; /* 180% */
@@ -106,7 +106,11 @@
 		&-line {
 			flex: 1;
 			height: 8px;
-			background-image: radial-gradient(circle, #444c63 1px, transparent 2px);
+			background-image: radial-gradient(
+				circle,
+				var(--l3-background) 1px,
+				transparent 2px
+			);
 			background-size: 8px 11px;
 			background-position: top left;
 			padding: 6px;
@@ -129,12 +133,11 @@
 	&__message-item {
 		position: relative;
 		margin-bottom: 4px;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-family: Geist Mono;
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px;
-		color: var(--bg-vanilla-400);
 		padding: 3px 12px;
 		padding-left: 26px;
 	}
@@ -149,7 +152,7 @@
 		width: 2px;
 		height: 4px;
 		border-radius: 50px;
-		background: var(--bg-slate-400);
+		background: var(--l1-border);
 	}
 
 	&__scroll-hint {
@@ -164,7 +167,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 3px;
-		background: var(--bg-slate-200);
+		background: var(--l1-border);
 		border-radius: 20px;
 		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
 			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
@@ -172,7 +175,7 @@
 	}
 
 	&__scroll-hint-text {
-		color: var(--bg-vanilla-100);
+		color: var(--l1-foreground);
 
 		font-size: 12px;
 		font-weight: 400;
@@ -180,29 +183,3 @@
 		letter-spacing: -0.06px;
 	}
 }
-
-.lightMode {
-	.error-content {
-		&__error-code {
-			color: var(--bg-ink-100);
-		}
-		&__error-message {
-			color: var(--bg-ink-400);
-		}
-		&__message-item {
-			color: var(--bg-ink-400);
-		}
-		&__message-badge {
-			&-label-text {
-				color: var(--bg-ink-400);
-			}
-			.key-value-label__value {
-				color: var(--bg-ink-400);
-			}
-		}
-		&__docs-button {
-			background: var(--bg-vanilla-100);
-			color: var(--bg-ink-100);
-		}
-	}
-}

frontend/src/components/Header/Header.styles.scss

@@ -5,9 +5,8 @@
 	padding: 8px 16px;
 	height: 48px;
 	box-sizing: border-box;
-	background: rgba(11, 12, 14, 0.9);
+	background: var(--l1-background);
 	backdrop-filter: blur(20px);
-	border-bottom: 1px solid var(--Slate-500, #161922);
 }
 
 .header-left {
@@ -19,11 +18,3 @@
 	display: flex;
 	align-items: center;
 }
-
-.lightMode {
-	.header-container {
-		background: var(--bg-vanilla-100);
-		backdrop-filter: blur(20px);
-		border-bottom: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';

frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss

@@ -23,7 +23,7 @@
 		justify-content: space-between;
 
 		.absolute-relative-time-toggler-label {
-			color: var(--bg-vanilla-100);
+			color: var(--l1-foreground);
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 500;
@@ -40,7 +40,7 @@
 
 	.absolute-relative-time-error {
 		font-size: 12px;
-		color: var(--bg-amber-600);
+		color: var(--accent-amber);
 	}
 
 	.share-link {
@@ -57,7 +57,7 @@
 
 				.url-share-title,
 				.url-share-sub-title {
-					color: var(--bg-vanilla-100);
+					color: var(--l1-foreground);
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 500;
@@ -67,7 +67,7 @@
 
 				.url-share-sub-title {
 					font-size: 12px;
-					color: var(--bg-vanilla-300);
+					color: var(--l3-foreground);
 					font-weight: 400;
 					line-height: 18px;
 					letter-spacing: -0.06px;
@@ -86,14 +86,14 @@
 			flex: 1;
 			margin: 0px !important;
 
-			border: 1px solid var(--bg-slate-400);
+			border: 1px solid var(--l1-border);
 
 			&:before {
 				display: none;
 			}
 
 			.ant-radio-button-checked {
-				background-color: var(--bg-slate-400);
+				background-color: var(--l3-background);
 			}
 		}
 
@@ -108,15 +108,15 @@
 			}
 
 			.feedback-tab {
-				background-color: var(--bg-sakura-500);
+				background-color: var(--danger-background);
 			}
 
 			.bug-tab {
-				background-color: var(--bg-amber-500);
+				background-color: var(--warning-background);
 			}
 
 			.feature-tab {
-				background-color: var(--bg-robin-500);
+				background-color: var(--primary-background);
 			}
 		}
 
@@ -125,9 +125,9 @@
 				padding: 6px 16px;
 
 				border-radius: 2px;
-				background: var(--bg-ink-400);
+				background: var(--l2-background);
 				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-				border: 1px solid var(--bg-slate-400);
+				border: 1px solid var(--l1-border);
 
 				margin: 0 !important;
 
@@ -140,13 +140,13 @@
 				}
 
 				&-active {
-					background: var(--bg-slate-400);
-					color: var(--bg-vanilla-100);
+					background: var(--l3-background);
+					color: var(--l1-foreground);
 
 					border-bottom: none !important;
 
 					.ant-tabs-tab-btn {
-						color: var(--bg-vanilla-100);
+						color: var(--l1-foreground);
 					}
 				}
 			}
@@ -181,7 +181,7 @@
 
 		.feedback-modal-content-footer-info-text {
 			font-size: 12px;
-			color: var(--bg-vanilla-400, #c0c1c3);
+			color: var(--l2-foreground);
 			text-align: center;
 
 			/* button/ small  */
@@ -200,54 +200,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.share-modal-content,
-	.feedback-modal-container {
-		.absolute-relative-time-toggler-container {
-			.absolute-relative-time-toggler-label {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		.share-link {
-			.url-share-container {
-				.url-share-container-header {
-					.url-share-title,
-					.url-share-sub-title {
-						color: var(--bg-ink-400);
-					}
-
-					.url-share-sub-title {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-	}
-
-	.feedback-modal-container {
-		.feedback-modal-tabs {
-			.ant-radio-button-wrapper {
-				flex: 1;
-				margin: 0px !important;
-
-				border: 1px solid var(--bg-vanilla-300);
-
-				&:before {
-					display: none;
-				}
-
-				.ant-radio-button-checked {
-					background-color: var(--bg-vanilla-300);
-				}
-			}
-		}
-
-		.feedback-modal-content-footer {
-			.feedback-modal-content-footer-info-text {
-				color: var(--bg-slate-400);
-			}
-		}
-	}
-}

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Button as PeriscopeButton } from '@signozhq/button';
+import { Tooltip as PeriscopeTooltip } from '@signozhq/tooltip';
 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
+import AIAssistantIcon from 'container/AIAssistant/components/AIAssistantIcon';
+import { openAIAssistant, useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Globe, Inbox, SquarePen } from 'lucide-react';
 
@@ -67,9 +71,23 @@ function HeaderRightSection({
 	};
 
 	const isLicenseEnabled = isEnterpriseSelfHostedUser || isCloudUser;
+	const isDrawerOpen = useAIAssistantStore((s) => s.isDrawerOpen);
 
 	return (
 		<div className="header-right-section-container">
+			{!isDrawerOpen && (
+				<PeriscopeTooltip title="AI Assistant">
+					<PeriscopeButton
+						variant="ghost"
+						size="xs"
+						onClick={openAIAssistant}
+						aria-label="Open AI Assistant"
+					>
+						<AIAssistantIcon size={18} />
+					</PeriscopeButton>
+				</PeriscopeTooltip>
+			)}
+
 			{enableFeedback && isLicenseEnabled && (
 				<Popover
 					rootClassName="header-section-popover-root"

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,6 +1,6 @@
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
@@ -19,7 +19,8 @@ jest.mock('react-router-dom', () => ({
 	useLocation: jest.fn(),
 }));
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss

@@ -28,7 +28,7 @@
 
 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--text-vanilla-400);
+		color: var(--l2-foreground);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: rgba(171, 189, 255, 0.04);
+		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
 
 		.ant-space {
 			align-items: flex-start;
@@ -58,9 +58,3 @@
 		margin: auto;
 	}
 }
-
-.lightMode {
-	.infra-container-card-text {
-		color: var(--text-ink-200);
-	}
-}

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss

@@ -9,15 +9,15 @@
 		gap: 8px;
 		padding: 12px;
 		border-radius: 3px;
-		border: 1px solid var(--bg-slate-500);
+		border: 1px solid var(--l1-border);
 
 		.filter-section {
 			flex: 1;
 
 			.ant-select-selector {
 				border-radius: 2px;
-				border: 1px solid var(--bg-slate-400) !important;
-				background-color: var(--bg-ink-300) !important;
+				border: 1px solid var(--l1-border) !important;
+				background-color: var(--l3-background) !important;
 
 				input {
 					font-size: 12px;
@@ -37,7 +37,7 @@
 
 		.ant-table {
 			border-radius: 3px;
-			border: 1px solid var(--bg-slate-500);
+			border: 1px solid var(--l1-border);
 
 			.ant-table-thead > tr > th {
 				padding: 12px;
@@ -45,10 +45,10 @@
 				font-size: 12px;
 				line-height: 18px;
 
-				background: rgba(171, 189, 255, 0.01);
+				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
 				border-bottom: none;
 
-				color: var(--Vanilla-400, #c0c1c3);
+				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -63,23 +63,23 @@
 			}
 
 			.ant-table-thead > tr > th:has(.hostname-column-header) {
-				background: var(--bg-ink-400);
+				background: var(--l2-background);
 			}
 
 			.ant-table-cell {
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--bg-vanilla-100);
-				background: rgba(171, 189, 255, 0.01);
+				color: var(--l1-foreground);
+				background: color-mix(in srgb, var(--bg-robin-200) 1%, transparent);
 			}
 
 			.ant-table-cell:has(.hostname-column-value) {
-				background: var(--bg-ink-400);
+				background: var(--l2-background);
 			}
 
 			.hostname-column-value {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 				font-family: 'Geist Mono';
 				font-style: normal;
 				font-weight: 600;
@@ -105,7 +105,7 @@
 			}
 
 			.ant-table-tbody > tr:hover > td {
-				background: rgba(255, 255, 255, 0.04);
+				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
 			}
 
 			.ant-table-cell:first-child {
@@ -143,51 +143,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.host-metric-traces-header {
-		.filter-section {
-			border-top: 1px solid var(--bg-vanilla-300);
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
-			.ant-select-selector {
-				border-color: var(--bg-vanilla-300) !important;
-				background-color: var(--bg-vanilla-100) !important;
-				color: var(--bg-ink-200);
-			}
-		}
-	}
-
-	.host-metric-traces-table {
-		.ant-table {
-			border-radius: 3px;
-			border: 1px solid var(--bg-vanilla-300);
-
-			.ant-table-thead > tr > th {
-				background: var(--bg-vanilla-100);
-				color: var(--text-ink-300);
-			}
-
-			.ant-table-thead > tr > th:has(.hostname-column-header) {
-				background: var(--bg-vanilla-100);
-			}
-
-			.ant-table-cell {
-				background: var(--bg-vanilla-100);
-				color: var(--bg-ink-500);
-			}
-
-			.ant-table-cell:has(.hostname-column-value) {
-				background: var(--bg-vanilla-100);
-			}
-
-			.hostname-column-value {
-				color: var(--bg-ink-300);
-			}
-
-			.ant-table-tbody > tr:hover > td {
-				background: rgba(0, 0, 0, 0.04);
-			}
-		}
-	}
-}

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -1,6 +1,6 @@
 .host-detail-drawer {
-	border-left: 1px solid var(--bg-slate-500);
-	background: var(--bg-ink-400);
+	border-left: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 
 	.ant-drawer-header {
@@ -9,8 +9,8 @@
 
 		align-items: stretch;
 
-		border-bottom: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--l1-border);
+		background: var(--l2-background);
 	}
 
 	.ant-drawer-close {
@@ -24,7 +24,7 @@
 	}
 
 	.title {
-		color: var(--text-vanilla-400);
+		color: var(--l2-foreground);
 		font-family: 'Geist Mono';
 		font-size: 14px;
 		font-style: normal;
@@ -38,8 +38,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 
@@ -58,7 +58,7 @@
 			}
 
 			.host-details-metadata-label {
-				color: var(--text-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -97,7 +97,7 @@
 
 			.ant-card {
 				&.ant-card-bordered {
-					border: 1px solid var(--bg-slate-500) !important;
+					border: 1px solid var(--l1-border) !important;
 				}
 			}
 		}
@@ -111,8 +111,8 @@
 
 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -127,7 +127,7 @@
 		align-items: center;
 
 		.views-tabs {
-			color: var(--text-vanilla-400);
+			color: var(--l2-foreground);
 
 			.view-title {
 				display: flex;
@@ -140,22 +140,22 @@
 			}
 
 			.tab {
-				border: 1px solid var(--bg-slate-400);
+				border: 1px solid var(--l1-border);
 				width: 114px;
 			}
 
 			.tab::before {
-				background: var(--bg-slate-400);
+				background: var(--l1-border);
 			}
 
 			.selected_view {
-				background: var(--bg-slate-300);
-				color: var(--text-vanilla-100);
-				border: 1px solid var(--bg-slate-400);
+				background: var(--l3-background);
+				color: var(--l1-foreground);
+				border: 1px solid var(--l1-border);
 			}
 
 			.selected_view::before {
-				background: var(--bg-slate-400);
+				background: var(--l1-border);
 			}
 		}
 
@@ -164,8 +164,8 @@
 			height: 30px;
 
 			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
@@ -174,60 +174,3 @@
 		padding: 0px;
 	}
 }
-
-.lightMode {
-	.ant-drawer-header {
-		border-bottom: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-100);
-	}
-
-	.host-detail-drawer {
-		.title {
-			color: var(--text-ink-300);
-		}
-
-		.host-detail-drawer__host {
-			.ant-typography {
-				color: var(--text-ink-300);
-				background: transparent;
-			}
-		}
-
-		.radio-button {
-			border: 1px solid var(--bg-vanilla-400);
-			background: var(--bg-vanilla-100);
-			color: var(--text-ink-300);
-		}
-
-		.views-tabs {
-			.tab {
-				background: var(--bg-vanilla-100);
-			}
-
-			.selected_view {
-				background: var(--bg-vanilla-300);
-				border: 1px solid var(--bg-slate-300);
-				color: var(--text-ink-400);
-			}
-
-			.selected_view::before {
-				background: var(--bg-vanilla-300);
-				border-left: 1px solid var(--bg-slate-300);
-			}
-		}
-
-		.compass-button {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-100);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-
-		.tabs-and-search {
-			.action-btn {
-				border: 1px solid var(--bg-vanilla-400);
-				background: var(--bg-vanilla-100);
-				color: var(--text-ink-300);
-			}
-		}
-	}
-}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss

@@ -6,8 +6,7 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400) !important;
-			background-color: var(--bg-ink-300) !important;
+			border: 1px solid var(--l1-border) !important;
 
 			input {
 				font-size: 12px;
@@ -26,7 +25,7 @@
 
 		padding: 12px;
 		border-radius: 3px;
-		border: 1px solid var(--bg-slate-500);
+		border: 1px solid var(--l1-border);
 	}
 
 	.host-metrics-logs {
@@ -45,11 +44,11 @@
 			}
 
 			&::-webkit-scrollbar-thumb {
-				background: var(--bg-slate-300);
+				background: var(--l1-border);
 			}
 
 			&::-webkit-scrollbar-thumb:hover {
-				background: var(--bg-slate-200);
+				background: var(--l1-border);
 			}
 
 			.ant-row {
@@ -118,16 +117,3 @@
 		gap: 16px;
 	}
 }
-
-.lightMode {
-	.filter-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-		border-bottom: 1px solid var(--bg-vanilla-300);
-
-		.ant-select-selector {
-			border-color: var(--bg-vanilla-300) !important;
-			background-color: var(--bg-vanilla-100) !important;
-			color: var(--bg-ink-200);
-		}
-	}
-}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss

@@ -17,7 +17,7 @@
 	gap: 8px;
 	padding: 12px;
 	border-radius: 3px;
-	border: 1px solid var(--bg-slate-500);
+	border: 1px solid var(--l1-border);
 }
 
 .host-metrics-card {
@@ -25,7 +25,7 @@
 	height: 300px;
 	padding: 10px;
 
-	border: 1px solid var(--bg-slate-500);
+	border: 1px solid var(--l1-border);
 
 	.ant-card-body {
 		padding: 0;

frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss

@@ -28,7 +28,7 @@
 
 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--text-vanilla-400);
+		color: var(--l2-foreground);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: rgba(171, 189, 255, 0.04);
+		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
 
 		.ant-space {
 			align-items: flex-start;
@@ -58,9 +58,3 @@
 		margin: auto;
 	}
 }
-
-.lightMode {
-	.infra-container-card-text {
-		color: var(--text-ink-200);
-	}
-}

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/badge';
+import { Badge } from '@signozhq/ui';
 
 type BadgeColor =
 	| 'vanilla'

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,7 +5,7 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -21,8 +21,8 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 
 		display: flex;
 		justify-content: flex-start;
@@ -36,7 +36,7 @@
 		font-family: 'Space Mono', monospace !important;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--bg-slate-400);
+		border: 1px solid var(--l1-border);
 
 		border-right: none;
 		border-left: none;
@@ -47,7 +47,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--bg-vanilla-400) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -61,8 +61,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		height: 38px;
 		width: 38px;
 	}
@@ -70,8 +70,8 @@
 	&.labelAfter {
 		.input {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
@@ -83,31 +83,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.input-with-label {
-		.label {
-			color: var(--bg-ink-500) !important;
-
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-
-		.input {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-
-		.close-btn {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
-		}
-
-		&.labelAfter {
-			.input {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-			}
-		}
-	}
-}

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -19,7 +19,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--bg-base-white);
+		color: var(--l1-foreground);
 		margin: 0;
 	}
 
@@ -116,7 +116,7 @@
 	height: 32px;
 	color: var(--l1-foreground);
 	background-color: var(--l2-background);
-	border-color: var(--border);
+	border-color: var(--l1-border);
 	font-size: var(--paragraph-base-400-font-size);
 
 	&::placeholder {
@@ -149,7 +149,7 @@
 		.ant-select-selection-item {
 			font-size: var(--paragraph-base-400-font-size);
 			letter-spacing: -0.07px;
-			color: var(--bg-base-white);
+			color: var(--l1-foreground);
 			line-height: 32px;
 		}
 	}
@@ -181,7 +181,7 @@
 	box-shadow: none;
 
 	&:hover {
-		background: rgba(229, 72, 77, 0.1);
+		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
 		opacity: 0.9;
 	}
 }
@@ -196,8 +196,8 @@
 }
 
 .invite-team-members-error-callout {
-	background: rgba(229, 72, 77, 0.1);
-	border: 1px solid rgba(229, 72, 77, 0.2);
+	background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+	border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
 	border-radius: 4px;
 	animation: horizontal-shaking 300ms ease-out;
 }
@@ -246,19 +246,3 @@
 		color: var(--l1-foreground);
 	}
 }
-
-.lightMode {
-	.invite-members-modal {
-		[data-slot='dialog-title'] {
-			color: var(--bg-base-black);
-		}
-	}
-
-	.team-member-role-select {
-		.ant-select-selector {
-			.ant-select-selection-item {
-				color: var(--bg-base-black);
-			}
-		}
-	}
-}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -5,7 +5,7 @@ import { Style } from '@signozhq/design-tokens';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';

frontend/src/components/InviteMembersModal/__tests__/InviteMembersModal.test.tsx

@@ -14,7 +14,8 @@ const makeApiError = (message: string, code = StatusCodes.CONFLICT): APIError =>
 
 jest.mock('api/v1/invite/create');
 jest.mock('api/v1/invite/bulk/create');
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss

@@ -8,18 +8,6 @@
 	}
 }
 
-.lightMode {
-	.facing-issue-button {
-		color: var(--bg-vanilla-500);
-		border-color: var(--bg-vanilla-300);
-
-		> .ant-btn:hover {
-			color: var(--bg-vanilla-500) !important;
-			border-color: var(--bg-vanilla-300) !important;
-		}
-	}
-}
-
 .tooltip-overlay {
 	text-wrap: nowrap;
 	.ant-tooltip-inner {

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -1,6 +1,6 @@
 .log-detail-drawer {
-	border-left: 1px solid var(--bg-slate-500);
-	background: var(--bg-ink-400);
+	border-left: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 
 	.log-detail-drawer__title {
@@ -30,8 +30,8 @@
 
 		align-items: stretch;
 
-		border-bottom: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--l1-border);
+		background: var(--l2-background);
 	}
 
 	.ant-drawer-close {
@@ -46,7 +46,7 @@
 	}
 
 	.title {
-		color: var(--text-vanilla-400);
+		color: var(--l2-foreground);
 		font-family: Inter;
 		font-size: var(--font-size-sm);
 		font-style: normal;
@@ -60,8 +60,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 
@@ -91,31 +91,31 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			color: var(--text-vanilla-400);
+			color: var(--l2-foreground);
 			opacity: 0.6;
 		}
 
 		.log-type-indicator {
 			height: 24px;
-			border: 2px solid var(--bg-slate-400);
+			border: 2px solid var(--l1-border);
 			border-radius: 5px;
 			margin-left: 0;
 
 			&.INFO {
-				border-color: #1d212d;
+				border-color: var(--l1-border);
 			}
 
 			&.WARNING {
-				border-color: #ffcd56;
+				border-color: var(--bg-amber-400);
 			}
 
 			&.ERROR {
-				border-color: #e5484d;
+				border-color: var(--bg-cherry-500);
 			}
 		}
 
 		.log-overflow-shadow {
-			background: linear-gradient(270deg, #121317 10.4%, rgba(18, 19, 23, 0) 100%);
+			background: linear-gradient(270deg, var(--card) 10.4%, transparent 100%);
 
 			width: 196px;
 			position: absolute;
@@ -131,8 +131,8 @@
 
 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -146,7 +146,7 @@
 	}
 
 	.views-tabs {
-		color: var(--text-vanilla-400);
+		color: var(--l2-foreground);
 
 		.view-title {
 			display: flex;
@@ -159,28 +159,28 @@
 		}
 
 		.tab {
-			border: 1px solid var(--bg-slate-400);
+			border: 1px solid var(--l1-border);
 			width: 114px;
 		}
 
 		.tab::before {
-			background: var(--bg-slate-400);
+			background: var(--l1-border);
 		}
 
 		.selected_view {
-			background: var(--bg-slate-300);
-			color: var(--text-vanilla-100);
-			border: 1px solid var(--bg-slate-400);
+			background: var(--l3-background);
+			color: var(--l1-foreground);
+			border: 1px solid var(--l1-border);
 		}
 
 		.selected_view::before {
-			background: var(--bg-slate-400);
+			background: var(--l1-border);
 		}
 	}
 
 	.search-input {
 		margin-top: var(--margin-2);
-		border: 1px solid var(--bg-slate-400);
+		border: 1px solid var(--l1-border);
 		height: 46px;
 		padding: var(--padding-1) var(--padding-2);
 		box-shadow: none;
@@ -197,8 +197,8 @@
 		right: 0;
 		padding: 8px 16px;
 		text-align: left;
-		color: var(--text-vanilla-200);
-		background: var(--bg-ink-400);
+		color: var(--l3-foreground);
+		background: var(--l2-background);
 		z-index: 10;
 
 		.log-detail-drawer__footer-hint-content {
@@ -210,7 +210,7 @@
 		.log-detail-drawer__footer-hint-icon {
 			display: inline;
 			vertical-align: middle;
-			color: var(--text-vanilla-200);
+			color: var(--l3-foreground);
 		}
 
 		.log-detail-drawer__footer-hint-text {
@@ -232,9 +232,9 @@
 		min-width: 28px;
 		height: 28px;
 		border-radius: 4px;
-		background: var(--bg-ink-400);
-		color: var(--text-vanilla-400);
-		border: 1px solid var(--bg-ink-300);
+		background: var(--l2-background);
+		color: var(--l2-foreground);
+		border: 1px solid var(--l1-border);
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
 		display: flex;
 		align-items: center;
@@ -244,154 +244,24 @@
 
 	.log-arrow-btn-up,
 	.log-arrow-btn-down {
-		background: var(--bg-ink-400);
+		background: var(--l2-background);
 	}
 
 	.log-arrow-btn:active,
 	.log-arrow-btn:focus {
-		background: var(--bg-ink-300);
-		color: var(--text-vanilla-100);
+		background: var(--l3-background);
+		color: var(--l1-foreground);
 	}
 
 	.log-arrow-btn[disabled] {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--bg-ink-500);
-		color: var(--text-vanilla-200);
+		background: var(--l1-background);
+		color: var(--l3-foreground);
 
 		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--bg-ink-300);
-			color: var(--text-vanilla-100);
-		}
-	}
-}
-
-.lightMode {
-	.log-arrows {
-		background: var(--bg-vanilla-100);
-		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-400);
-		border: 1px solid var(--bg-vanilla-300);
-		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-	}
-
-	.log-arrow-btn-up,
-	.log-arrow-btn-down {
-		background: var(--bg-vanilla-100);
-	}
-
-	.log-arrow-btn:active,
-	.log-arrow-btn:focus {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn:hover:not([disabled]) {
-		background: var(--bg-vanilla-200);
-		color: var(--text-ink-500);
-	}
-
-	.log-arrow-btn[disabled] {
-		background: var(--bg-vanilla-100);
-		color: var(--text-ink-200);
-	}
-	.ant-drawer-header {
-		border-bottom: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-100);
-	}
-
-	.log-detail-drawer {
-		.title {
-			color: var(--text-ink-300);
-		}
-
-		.log-detail-drawer__log {
-			.log-overflow-shadow {
-				background: linear-gradient(
-					270deg,
-					var(--bg-vanilla-100) 10.4%,
-					rgba(255, 255, 255, 0) 100%
-				);
-			}
-
-			.log-type-indicator {
-				border: 2px solid var(--bg-vanilla-400);
-			}
-
-			.ant-typography {
-				color: var(--text-ink-300);
-				background: transparent;
-			}
-		}
-
-		.radio-button {
-			border: 1px solid var(--bg-vanilla-400);
-			background: var(--bg-vanilla-100);
-			color: var(--text-ink-300);
-		}
-
-		.views-tabs {
-			.tab {
-				background: var(--bg-vanilla-100);
-			}
-
-			.selected_view {
-				background: var(--bg-vanilla-300);
-				border: 1px solid var(--bg-slate-300);
-				color: var(--text-ink-400);
-			}
-
-			.selected_view::before {
-				background: var(--bg-vanilla-300);
-				border-left: 1px solid var(--bg-slate-300);
-			}
-		}
-
-		.tabs-and-search {
-			.action-btn {
-				border: 1px solid var(--bg-vanilla-400);
-				background: var(--bg-vanilla-100);
-				color: var(--text-ink-300);
-			}
-		}
-
-		.search-input {
-			border: 1px solid var(--bg-vanilla-200);
-			background: var(--bg-vanilla-100);
-			color: var(--text-ink-300);
-		}
-	}
-
-	.log-detail-drawer__footer-hint {
-		position: sticky;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 8px 16px;
-		text-align: left;
-		color: var(--text-vanilla-700);
-		background: var(--bg-vanilla-100);
-		z-index: 10;
-
-		.log-detail-drawer__footer-hint-content {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-		}
-
-		.log-detail-drawer__footer-hint-icon {
-			display: inline;
-			vertical-align: middle;
-			color: var(--text-vanilla-700);
-		}
-
-		.log-detail-drawer__footer-hint-text {
-			font-size: 13px;
-			margin: 0;
+			background: var(--l3-background);
+			color: var(--l1-foreground);
 		}
 	}
 }

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss

@@ -1,6 +1,6 @@
 .query-builder-search-wrapper {
 	margin-top: 10px;
-	border: 1px solid var(--bg-slate-400);
+	border: 1px solid var(--l1-border);
 	border-bottom: none;
 
 	.ant-select-selector {

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -6,7 +6,7 @@
 }
 .log-field-key,
 .log-field-key-colon {
-	color: var(--text-vanilla-400, #c0c1c3);
+	color: var(--l2-foreground);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -41,7 +41,7 @@
 	flex-shrink: 0;
 }
 .log-value {
-	color: var(--text-vanilla-400, #c0c1c3);
+	color: var(--l2-foreground);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -104,7 +104,7 @@
 	.selected-log-value {
 		color: var(--bg-sienna-500);
 		border-radius: 2px;
-		background: rgba(173, 127, 88, 0.08);
+		background: color-mix(in srgb, var(--bg-sienna-500) 8%, transparent);
 		padding: 0px 2px;
 		margin-left: 7px;
 		font-weight: 400;
@@ -154,8 +154,8 @@
 	height: 32px;
 	width: 68px;
 	border-radius: 2px;
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	background: var(--bg-ink-400, #121317);
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 	.context-btn {
@@ -163,7 +163,7 @@
 	}
 	.copy-link-btn {
 		width: 50% !important;
-		border-left: 1px solid var(--bg-slate-400, #1d212d) !important;
+		border-left: 1px solid var(--l1-border) !important;
 	}
 
 	.ant-btn-default {
@@ -172,16 +172,6 @@
 	}
 }
 
-.lightMode {
-	.log-field-key,
-	.log-field-key-colon {
-		color: var(--text-slate-400);
-	}
-	.log-value {
-		color: var(--text-slate-400);
-	}
-}
-
 .dark {
 	.log-field-key,
 	.log-field-key-colon {

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -6,8 +6,8 @@
 	right: 0;
 	cursor: pointer;
 	border-radius: 2px;
-	border: 1px solid var(--bg-slate-400);
-	background: var(--bg-ink-400);
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 
 	.ant-btn-default {
 		border: none;
@@ -18,13 +18,13 @@
 		display: flex;
 
 		&.active-tab {
-			background-color: var(--bg-slate-400);
+			background-color: var(--l1-border);
 		}
 	}
 
 	.copy-log-btn {
-		border-left: 1px solid var(--bg-slate-400);
-		border-color: var(--bg-slate-400) !important;
+		border-left: 1px solid var(--l1-border);
+		border-color: var(--l1-border) !important;
 	}
 }
 
@@ -38,15 +38,3 @@
 	margin: 0;
 	z-index: 5;
 }
-
-.lightMode {
-	.log-line-action-buttons {
-		border: 1px solid var(--bg-vanilla-400);
-		background: var(--bg-vanilla-400);
-
-		.copy-log-btn {
-			border-left: 1px solid var(--bg-vanilla-400);
-			border-color: var(--bg-vanilla-400) !important;
-		}
-	}
-}

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -60,7 +60,7 @@
 			background-color: var(--bg-robin-600);
 		}
 		&.severity-info-1 {
-			background-color: var(--bg-robin-500);
+			background-color: var(--primary-background);
 		}
 		&.severity-info-2 {
 			background-color: var(--bg-robin-400);

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -1,5 +1,5 @@
 .text {
-	color: var(--bg-vanilla-400);
+	color: var(--l2-foreground);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -38,12 +38,6 @@
 	}
 }
 
-.lightMode {
-	.text {
-		color: var(--bg-slate-400);
-	}
-}
-
 .paragraph {
 	margin: 0;
 	padding: 0px !important;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -1,11 +1,11 @@
 .format-options-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
+		border: 1px solid var(--l1-border);
 		background: linear-gradient(
 			139deg,
-			var(--bg-ink-400) 0%,
-			var(--bg-ink-500) 98.68%
+			var(--l2-background) 0%,
+			var(--l1-background) 98.68%
 		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
@@ -35,7 +35,7 @@
 					}
 
 					.text {
-						color: var(--bg-slate-50);
+						color: var(--muted-foreground);
 						font-family: Inter;
 						font-size: 11px;
 						font-style: normal;
@@ -65,7 +65,7 @@
 							flex-shrink: 0;
 						}
 						.text {
-							color: var(--bg-vanilla-400);
+							color: var(--l2-foreground);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -76,7 +76,7 @@
 						}
 
 						.text:hover {
-							color: var(--bg-vanilla-300);
+							color: var(--l2-foreground);
 						}
 					}
 
@@ -93,7 +93,7 @@
 				gap: 12px;
 
 				.title {
-					color: var(--bg-slate-50);
+					color: var(--muted-foreground);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -111,7 +111,7 @@
 					align-items: center;
 					border: none !important;
 					.font-value {
-						color: var(--bg-vanilla-400);
+						color: var(--l2-foreground);
 						font-family: Inter;
 						font-size: 13px;
 						font-style: normal;
@@ -139,7 +139,7 @@
 					line-height: 18px;
 					letter-spacing: 0.08em;
 					text-align: left;
-					color: var(--bg-slate-50);
+					color: var(--muted-foreground);
 				}
 
 				.menu-items {
@@ -159,7 +159,7 @@
 
 					.item-label {
 						display: flex;
-						color: var(--bg-vanilla-400, #c0c1c3);
+						color: var(--l2-foreground);
 						justify-content: space-between;
 						align-items: center;
 					}
@@ -170,14 +170,14 @@
 
 			.horizontal-line {
 				height: 1px;
-				background: #1d212d;
+				background: var(--l3-background);
 			}
 
 			.max-lines-per-row {
 				padding: 12px;
 
 				.title {
-					color: var(--bg-slate-50);
+					color: var(--muted-foreground);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -193,7 +193,7 @@
 					align-items: center;
 
 					.lucide {
-						color: var(--bg-vanilla-400, #c0c1c3);
+						color: var(--l2-foreground);
 						cursor: pointer;
 					}
 				}
@@ -210,8 +210,8 @@
 						width: auto;
 						border-right: none;
 						border-left: none;
-						border-top: 1px solid var(--bg-slate-400);
-						border-bottom: 1px solid var(--bg-slate-400);
+						border-top: 1px solid var(--l1-border);
+						border-bottom: 1px solid var(--l1-border);
 						text-align: center;
 						height: 26px;
 						border-radius: 0;
@@ -250,7 +250,7 @@
 						height: 26px;
 
 						border-radius: 0px 1px 1px 0px;
-						background: var(--bg-ink-300, #16181d);
+						background: var(--l3-background);
 					}
 				}
 			}
@@ -273,7 +273,7 @@
 						display: flex;
 						gap: 4px;
 						align-items: center;
-						color: var(--bg-slate-50);
+						color: var(--muted-foreground);
 						text-transform: uppercase;
 						font-size: 11px;
 						font-weight: 500;
@@ -302,7 +302,7 @@
 						.column-name {
 							padding: 4px 8px;
 							border-radius: 1px;
-							color: var(--bg-vanilla-400, #c0c1c3);
+							color: var(--l2-foreground);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -311,7 +311,7 @@
 							letter-spacing: -0.07px;
 
 							&.selected {
-								background-color: var(--bg-ink-200);
+								background-color: var(--l3-background);
 								cursor: pointer;
 							}
 						}
@@ -330,7 +330,7 @@
 				}
 
 				.title {
-					color: var(--bg-slate-50);
+					color: var(--muted-foreground);
 					font-family: Inter;
 					font-size: 11px;
 					font-style: normal;
@@ -346,14 +346,14 @@
 					align-items: center;
 
 					.lucide {
-						color: var(--bg-vanilla-400, #c0c1c3);
+						color: var(--l2-foreground);
 						cursor: pointer;
 					}
 				}
 
 				.horizontal-line {
 					height: 1px;
-					background: #1d212d;
+					background: var(--l3-background);
 				}
 
 				.loading-container {
@@ -371,7 +371,7 @@
 						margin-top: 12px;
 
 						.column-name {
-							color: var(--bg-vanilla-400, #c0c1c3);
+							color: var(--l2-foreground);
 							font-family: Inter;
 							font-size: 13px;
 							font-style: normal;
@@ -387,18 +387,18 @@
 							cursor: pointer;
 
 							&.default-column {
-								color: var(--bg-vanilla-400, #c0c1c3);
+								color: var(--l2-foreground);
 								cursor: not-allowed;
 							}
 
 							&.no-columns-selected {
-								color: var(--bg-slate-100);
+								color: var(--l3-foreground);
 								font-size: 12px;
 								cursor: not-allowed;
 							}
 
 							&.add-new-column-btn {
-								color: var(--bg-vanilla-400, #c0c1c3);
+								color: var(--l2-foreground);
 								cursor: pointer;
 							}
 
@@ -447,7 +447,7 @@
 
 					.column-divider {
 						margin: 12px 0;
-						border-top: 2px solid var(--bg-slate-400);
+						border-top: 2px solid var(--l1-border);
 					}
 				}
 			}
@@ -458,7 +458,7 @@
 
 					.item {
 						.item-label {
-							color: var(--bg-vanilla-400);
+							color: var(--l2-foreground);
 						}
 					}
 				}
@@ -468,11 +468,11 @@
 					margin-left: -5%;
 
 					border-radius: 4px;
-					border: 1px solid var(--bg-slate-400);
+					border: 1px solid var(--l1-border);
 					background: linear-gradient(
 						139deg,
-						rgba(18, 19, 23, 0.8) 0%,
-						rgba(18, 19, 23, 0.9) 98.68%
+						color-mix(in srgb, var(--card) 80%, transparent) 0%,
+						color-mix(in srgb, var(--card) 90%, transparent) 98.68%
 					);
 
 					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
@@ -490,7 +490,7 @@
 .lightMode {
 	.format-options-popover {
 		.ant-popover-inner {
-			border: 1px solid var(--bg-vanilla-300);
+			border: 1px solid var(--l1-border);
 			background: linear-gradient(
 				139deg,
 				rgba(255, 255, 255, 0.8) 0%,
@@ -502,18 +502,18 @@
 				.font-size-dropdown {
 					.back-btn {
 						.text {
-							color: var(--bg-ink-400);
+							color: var(--l2-background);
 						}
 					}
 
 					.content {
 						.option-btn {
 							.text {
-								color: var(--bg-ink-400);
+								color: var(--l2-background);
 							}
 
 							.text:hover {
-								color: var(--bg-ink-300);
+								color: var(--l3-background);
 							}
 						}
 					}
@@ -522,105 +522,105 @@
 				.add-new-column-container {
 					.add-new-column-header {
 						.title {
-							color: var(--bg-ink-100);
+							color: var(--l2-foreground);
 						}
 					}
 
 					.add-new-column-content {
 						.column-format-new-options {
 							.column-name {
-								color: var(--bg-ink-400);
+								color: var(--l2-background);
 
 								&.selected {
-									background-color: var(--bg-vanilla-400);
+									background-color: var(--l3-background);
 								}
 							}
 						}
 
 						.loading-container {
-							color: var(--bg-ink-400);
+							color: var(--l2-background);
 						}
 					}
 				}
 
 				.font-size-container {
 					.title {
-						color: var(--bg-ink-100);
+						color: var(--l2-foreground);
 					}
 
 					.value {
 						.font-value {
-							color: var(--bg-ink-400);
+							color: var(--l2-background);
 						}
 					}
 				}
 
 				.horizontal-line {
-					background: var(--bg-vanilla-300);
+					background: var(--l3-background);
 				}
 
 				.item-content {
 					.column-divider {
-						border-top: 2px solid var(--bg-vanilla-300);
+						border-top: 2px solid var(--l1-border);
 					}
 				}
 
 				.max-lines-per-row {
 					.title {
-						color: var(--bg-ink-200);
+						color: var(--l2-foreground);
 
 						.lucide {
-							color: var(--bg-ink-300);
+							color: var(--l1-foreground);
 						}
 					}
 
 					.max-lines-per-row-input {
-						border: 1px solid var(--bg-vanilla-300);
+						border: 1px solid var(--l1-border);
 
 						.periscope-btn {
-							background: var(--bg-vanilla-300);
+							background: var(--l3-background);
 						}
 					}
 				}
 
 				.menu-container {
 					.title {
-						color: var(--bg-ink-200);
+						color: var(--l2-foreground);
 					}
 
 					.item {
 						.item-label {
-							color: var(--bg-ink-400);
+							color: var(--l2-background);
 						}
 					}
 				}
 
 				.selected-item-content-container {
 					.title {
-						color: var(--bg-ink-200);
+						color: var(--l2-foreground);
 
 						.lucide {
-							color: var(--bg-ink-300);
+							color: var(--l1-foreground);
 						}
 					}
 
 					.horizontal-line {
-						background: var(--bg-vanilla-300);
+						background: var(--l3-background);
 					}
 
 					.item-content {
 						.max-lines-per-row-input {
-							border: 1px solid var(--bg-vanilla-300);
+							border: 1px solid var(--l1-border);
 
 							.periscope-btn {
-								background: var(--bg-vanilla-300);
+								background: var(--l3-background);
 							}
 						}
 
 						.column-format,
 						.column-format-new-options {
 							.column-name {
-								color: var(--bg-ink-300);
+								color: var(--l1-foreground);
 							}
 						}
 					}
@@ -632,13 +632,13 @@
 
 						.item {
 							.item-label {
-								color: var(--bg-ink-300);
+								color: var(--l1-foreground);
 							}
 						}
 					}
 
 					.selected-item-content-container {
-						border: 1px solid var(--bg-vanilla-300);
+						border: 1px solid var(--l1-border);
 						background: linear-gradient(
 							139deg,
 							rgba(255, 255, 255, 0.8) 0%,

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss

@@ -1,8 +1,8 @@
 .code-snippet-container {
 	position: relative;
 	// background-color: rgb(43, 43, 43);
-	background-color: #111a2c;
-	border-color: #111a2c;
+	background-color: var(--bg-ink-400);
+	border-color: var(--bg-ink-400);
 }
 
 .code-copy-btn {
@@ -16,21 +16,21 @@
 	button {
 		cursor: pointer;
 
-		background-color: rgba($color: #1d1d1d, $alpha: 0.7);
-		color: white;
+		background-color: color-mix(in srgb, var(--bg-ink-300) 70%, transparent);
+		color: var(--l1-foreground);
 		border: none;
 		padding: 8px;
 		border-radius: 3px;
 		transition: all 0.1s;
 
 		&:hover {
-			background-color: rgba($color: #1d1d1d, $alpha: 1);
+			background-color: var(--bg-ink-300);
 		}
 	}
 
 	&.copied {
 		button {
-			background-color: rgba($color: #52c41a, $alpha: 1);
+			background-color: var(--bg-forest-500);
 		}
 	}
 }

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -54,7 +54,7 @@
 
 			.ant-table-column-sorter-up.active,
 			.ant-table-column-sorter-down.active {
-				color: var(--bg-base-white);
+				color: var(--l1-foreground);
 				opacity: 1;
 			}
 		}
@@ -69,10 +69,14 @@
 		}
 
 		> tr.members-table-row--tinted > td {
-			background: rgba(171, 189, 255, 0.02);
+			background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
 		}
 		> tr:hover > td {
-			background: rgba(171, 189, 255, 0.04) !important;
+			background: color-mix(
+				in srgb,
+				var(--bg-robin-200) 4%,
+				transparent
+			) !important;
 		}
 	}
 
@@ -166,7 +170,7 @@
 
 		strong {
 			font-weight: var(--font-weight-medium);
-			color: var(--bg-base-white);
+			color: var(--l1-foreground);
 		}
 	}
 }
@@ -205,12 +209,4 @@
 			}
 		}
 	}
-
-	.members-empty-state {
-		&__text {
-			strong {
-				color: var(--bg-base-black);
-			}
-		}
-	}
 }

frontend/src/components/MembersTable/MembersTable.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { Badge } from '@signozhq/badge';
+import { Badge } from '@signozhq/ui';
 import { Table, Tooltip } from 'antd';
 import type { ColumnsType, SorterResult } from 'antd/es/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss

@@ -1,8 +1,8 @@
 .mq-health-check-modal {
 	.ant-modal-content {
 		border-radius: 4px;
-		border: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
 		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
 
 		.ant-modal-close {
@@ -10,13 +10,13 @@
 		}
 
 		.ant-modal-header {
-			border-bottom: 1px solid var(--bg-slate-500);
-			background: var(--bg-ink-400);
+			border-bottom: 1px solid var(--l1-border);
+			background: var(--l2-background);
 			margin-bottom: 16px;
 			padding-bottom: 4px;
 
 			.ant-modal-title {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 13px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 			flex-direction: column;
 			gap: 8px;
 			padding: 8px;
-			background: var(--bg-ink-300);
+			background: var(--l3-background);
 
 			.attribute-select {
 				align-items: center;
@@ -47,8 +47,8 @@
 					gap: 4px;
 
 					border-radius: 2px;
-					border: 1px solid var(--bg-slate-400);
-					background: var(--bg-ink-300);
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
 				}
 			}
 
@@ -57,7 +57,7 @@
 			}
 
 			.tree-text {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: 'Geist Mono';
 				font-size: 12px;
 				font-style: normal;
@@ -101,7 +101,7 @@
 
 						.success-attribute-icon {
 							width: 44px;
-							color: var(--bg-vanilla-400);
+							color: var(--l2-foreground);
 							display: flex;
 
 							> svg {
@@ -128,7 +128,7 @@
 			align-items: center;
 			height: 100%;
 			padding: 8px;
-			background: var(--bg-ink-300);
+			background: var(--l3-background);
 			height: 156px;
 		}
 	}
@@ -147,10 +147,10 @@
 	border-radius: 2px;
 	border: none;
 	box-shadow: none;
-	background: var(--bg-slate-500);
+	background: var(--l3-background);
 
 	&.missing-config-btn {
-		background: rgba(255, 205, 86, 0.1);
+		background: color-mix(in srgb, var(--bg-amber-500) 10%, transparent);
 		color: var(--bg-amber-400);
 
 		&:hover {
@@ -162,68 +162,14 @@
 		display: flex;
 		align-items: center;
 		margin-right: 8px;
-		border-right: 1px solid rgba(255, 215, 120, 0.1);
+		border-right: 1px solid
+			color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
 		padding-right: 8px;
 	}
 }
 
 .lightMode {
-	.mq-health-check-modal {
-		.ant-modal-content {
-			border: 1px solid var(--bg-vanilla-400);
-			background: var(--bg-vanilla-200);
-
-			.ant-modal-header {
-				border-bottom: 1px solid var(--bg-vanilla-400);
-				background: var(--bg-vanilla-200);
-
-				.ant-modal-title {
-					color: var(--bg-ink-300);
-				}
-			}
-
-			.modal-content {
-				background: var(--bg-vanilla-100);
-
-				.attribute-select {
-					.ant-select-selector {
-						border: 1px solid var(--bg-vanilla-300);
-						background: var(--bg-vanilla-200);
-					}
-				}
-
-				.tree-text {
-					color: var(--bg-ink-300);
-				}
-
-				.ant-tree {
-					.ant-tree-title {
-						.attribute-error-title {
-							color: var(--bg-amber-500);
-
-							.tree-text {
-								color: var(--bg-amber-500);
-							}
-						}
-
-						.attribute-success-title {
-							.success-attribute-icon {
-								color: var(--bg-ink-300);
-							}
-						}
-					}
-				}
-			}
-
-			.loader-container {
-				background: var(--bg-ink-300);
-			}
-		}
-	}
-
 	.config-btn {
-		background: var(--bg-vanilla-300);
-
 		&.missing-config-btn {
 			background: var(--bg-amber-100);
 			color: var(--bg-amber-500);

frontend/src/components/MessagingQueues/MQCommon/MQCommon.styles.scss

@@ -2,8 +2,8 @@
 	display: inline-flex;
 	padding: 4px 8px;
 	border-radius: 20px;
-	border: 1px solid rgba(173, 127, 88, 0.2);
-	background: rgba(173, 127, 88, 0.1);
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
 	justify-content: center;
 	align-items: center;
 	gap: 5px;

frontend/src/components/NewSelect/styles.scss

@@ -9,24 +9,25 @@ $custom-border-color: #2c3044;
 
 	&.ant-select-focused {
 		.ant-select-selector {
-			border-color: var(--bg-robin-500);
-			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
+			border-color: var(--primary-background);
+			box-shadow: 0 0 0 2px
+				color-mix(in srgb, var(--primary-background) 20%, transparent);
 		}
 	}
 
 	.ant-select-selection-placeholder {
-		color: rgba(192, 193, 195, 0.45);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	// Base styles are for dark mode
 	.ant-select-selector {
-		background-color: var(--bg-ink-400);
-		border-color: var(--bg-slate-400);
+		background-color: var(--l2-background);
+		border-color: var(--l1-border);
 	}
 
 	.ant-select-clear {
-		background-color: var(--bg-ink-400);
-		color: rgba(192, 193, 195, 0.7);
+		background-color: var(--l2-background);
+		color: color-mix(in srgb, var(--border) 70%, transparent);
 	}
 }
 
@@ -42,7 +43,7 @@ $custom-border-color: #2c3044;
 
 		.ant-select-selection-placeholder {
 			opacity: 1 !important;
-			color: var(--bg-vanilla-400) !important;
+			color: var(--l2-foreground) !important;
 			font-weight: 500;
 			visibility: visible !important;
 			pointer-events: none;
@@ -63,7 +64,7 @@ $custom-border-color: #2c3044;
 		left: 12px;
 		top: 50%;
 		transform: translateY(-50%);
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		z-index: 1;
 		pointer-events: none;
 
@@ -76,8 +77,8 @@ $custom-border-color: #2c3044;
 		max-height: 200px;
 		overflow: auto;
 		scrollbar-width: thin;
-		background-color: var(--bg-ink-400);
-		border-color: var(--bg-slate-400);
+		background-color: var(--l2-background);
+		border-color: var(--l1-border);
 		cursor: text;
 
 		&::-webkit-scrollbar {
@@ -90,7 +91,7 @@ $custom-border-color: #2c3044;
 		}
 
 		&::-webkit-scrollbar-track {
-			background-color: var(--bg-slate-400);
+			background-color: var(--l1-border);
 		}
 	}
 
@@ -106,46 +107,57 @@ $custom-border-color: #2c3044;
 
 	&.ant-select-focused {
 		.ant-select-selector {
-			border-color: var(--bg-robin-500);
-			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
+			border-color: var(--primary-background);
+			box-shadow: 0 0 0 2px
+				color-mix(in srgb, var(--primary-background) 20%, transparent);
 		}
 	}
 
 	.ant-select-selection-placeholder {
-		color: rgba(192, 193, 195, 0.45);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
-		background-color: var(--bg-slate-400);
+		background-color: var(--l1-border);
 		border-radius: 4px;
 		border: 1px solid $custom-border-color;
 		margin-right: 4px;
 		transition: all 0.2s;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 
 		// Style for active tag (keyboard navigation)
 		&-active {
-			border-color: var(--bg-robin-500) !important;
-			background-color: rgba(78, 116, 248, 0.15) !important;
-			outline: 2px solid rgba(78, 116, 248, 0.2);
+			border-color: var(--primary-background) !important;
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			) !important;
+			outline: 2px solid
+				color-mix(in srgb, var(--primary-background) 20%, transparent);
 		}
 
 		// Style for selected tags (via keyboard or mouse selection)
 		&-selected {
-			border-color: var(--bg-robin-500) !important;
-			background-color: rgba(78, 116, 248, 0.15) !important;
-			box-shadow: 0 0 0 2px rgba(78, 116, 248, 0.2);
+			border-color: var(--primary-background) !important;
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			) !important;
+			box-shadow: 0 0 0 2px
+				color-mix(in srgb, var(--primary-background) 20%, transparent);
 		}
 
 		.ant-select-selection-item-content {
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 		}
 
 		.ant-select-selection-item-remove {
-			color: rgba(192, 193, 195, 0.7);
+			color: color-mix(in srgb, var(--border) 70%, transparent);
 			&:hover {
-				color: rgba(192, 193, 195, 1);
+				color: var(--l1-border);
 			}
 		}
 	}
@@ -170,20 +182,24 @@ $custom-border-color: #2c3044;
 	padding: 0;
 	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
-	background-color: var(--bg-ink-400);
-	border: 1px solid var(--bg-slate-400);
+	background-color: var(--l2-background);
+	border: 1px solid var(--l1-border);
 
 	.ant-select-item {
 		padding: 8px 12px;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 
 		// Make keyboard navigation visible
 		&-option-active {
-			background-color: var(--bg-slate-400) !important;
+			background-color: var(--l1-border) !important;
 		}
 
 		&-option-selected {
-			background-color: rgba(78, 116, 248, 0.15) !important;
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			) !important;
 		}
 	}
 }
@@ -199,7 +215,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: rgba(192, 193, 195, 0.45);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 }
 
@@ -211,9 +227,9 @@ $custom-border-color: #2c3044;
 	overflow-x: hidden;
 	scrollbar-width: thin;
 	border-radius: 4px;
-	border: 1px solid var(--bg-slate-400);
+	border: 1px solid var(--l1-border);
 	width: 100%;
-	background-color: var(--bg-ink-400);
+	background-color: var(--l2-background);
 
 	&::-webkit-scrollbar {
 		width: 6px;
@@ -225,7 +241,7 @@ $custom-border-color: #2c3044;
 	}
 
 	&::-webkit-scrollbar-track {
-		background-color: var(--bg-slate-400);
+		background-color: var(--l1-border);
 	}
 
 	.no-section-options {
@@ -241,8 +257,8 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
-			color: var(--bg-vanilla-400);
-			background-color: var(--bg-slate-400);
+			color: var(--l2-foreground);
+			background-color: var(--l1-border);
 			border-bottom: 1px solid $custom-border-color;
 			border-top: 1px solid $custom-border-color;
 			position: relative;
@@ -259,20 +275,28 @@ $custom-border-color: #2c3044;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 
 		&:hover {
-			background-color: var(--bg-slate-400);
+			background-color: var(--l1-border);
 		}
 
 		&.selected {
-			background-color: rgba(78, 116, 248, 0.15);
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			);
 			font-weight: 500;
 		}
 
 		&.active {
-			background-color: rgba(78, 116, 248, 0.15);
-			border-color: var(--bg-robin-500);
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			);
+			border-color: var(--primary-background);
 		}
 
 		.option-content {
@@ -290,7 +314,7 @@ $custom-border-color: #2c3044;
 				padding: 2px 6px;
 				border-radius: 4px;
 				background-color: $custom-border-color;
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				margin-left: 8px;
 			}
 		}
@@ -307,20 +331,20 @@ $custom-border-color: #2c3044;
 	display: flex;
 	align-items: center;
 	padding: 8px 12px;
-	border-top: 1px solid var(--bg-slate-400);
+	border-top: 1px solid var(--l1-border);
 	position: sticky;
 	bottom: 0;
-	background-color: var(--bg-ink-400);
+	background-color: var(--l2-background);
 	z-index: 1;
 
 	.navigation-icons {
 		display: flex;
 		margin-right: 8px;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 	}
 
 	.navigation-text {
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-size: 12px;
 	}
 
@@ -362,11 +386,11 @@ $custom-border-color: #2c3044;
 			height: 14px;
 			flex-shrink: 0;
 			border-radius: 2.286px;
-			border-top: 1.143px solid var(--bg-ink-200);
-			border-right: 1.143px solid var(--bg-ink-200);
-			border-bottom: 2.286px solid var(--bg-ink-200);
-			border-left: 1.143px solid var(--bg-ink-200);
-			background: var(--Ink-400, var(--bg-ink-400));
+			border-top: 1.143px solid var(--l1-border);
+			border-right: 1.143px solid var(--l1-border);
+			border-bottom: 2.286px solid var(--l1-border);
+			border-left: 1.143px solid var(--l1-border);
+			background: var(--l2-background);
 		}
 	}
 }
@@ -379,16 +403,16 @@ $custom-border-color: #2c3044;
 	overflow-x: hidden;
 	scrollbar-width: thin;
 	border-radius: 4px;
-	border: 1px solid var(--bg-slate-400);
+	border: 1px solid var(--l1-border);
 	width: 100%;
-	background-color: var(--bg-ink-400);
+	background-color: var(--l2-background);
 
 	.select-all-option,
 	.custom-value-option {
 		padding: 8px 12px;
 		border-bottom: 1px solid $custom-border-color;
 		margin-bottom: 8px;
-		background-color: var(--bg-slate-400);
+		background-color: var(--l1-border);
 		position: sticky;
 		top: 0;
 		z-index: 1;
@@ -417,8 +441,8 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			padding: 4px 12px;
 			font-size: 13px;
-			color: var(--bg-vanilla-400);
-			background-color: var(--bg-slate-400);
+			color: var(--l2-foreground);
+			background-color: var(--l1-border);
 			border-bottom: 1px solid $custom-border-color;
 			border-top: 1px solid $custom-border-color;
 			position: relative;
@@ -432,19 +456,27 @@ $custom-border-color: #2c3044;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 
 		&.active {
-			background-color: rgba(78, 116, 248, 0.15);
-			border-color: var(--bg-robin-500);
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			);
+			border-color: var(--primary-background);
 		}
 
 		&:hover {
-			background-color: var(--bg-slate-400);
+			background-color: var(--l1-border);
 		}
 
 		&.selected {
-			background-color: rgba(78, 116, 248, 0.15);
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 15%,
+				transparent
+			);
 			font-weight: 500;
 		}
 
@@ -483,7 +515,7 @@ $custom-border-color: #2c3044;
 					padding: 2px 6px;
 					border-radius: 4px;
 					background-color: $custom-border-color;
-					color: var(--bg-vanilla-400);
+					color: var(--l2-foreground);
 					margin-left: 8px;
 				}
 			}
@@ -541,21 +573,25 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: rgba(192, 193, 195, 0.45);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	.status-message {
 		padding: 8px 12px;
 		text-align: center;
 		font-style: italic;
-		color: rgba(192, 193, 195, 0.65);
+		color: color-mix(in srgb, var(--border) 65%, transparent);
 		border-top: 1px dashed $custom-border-color;
 	}
 }
 
 // Custom styles for highlight text
 .highlight-text {
-	background-color: rgba(78, 116, 248, 0.2);
+	background-color: color-mix(
+		in srgb,
+		var(--primary-background) 20%,
+		transparent
+	);
 	padding: 0 1px;
 	border-radius: 2px;
 	font-weight: 500;
@@ -565,7 +601,7 @@ $custom-border-color: #2c3044;
 .custom-option {
 	&.focused,
 	&.ant-select-item-option-active {
-		background-color: var(--bg-slate-400) !important;
+		background-color: var(--l1-border) !important;
 	}
 }
 
@@ -576,7 +612,7 @@ $custom-border-color: #2c3044;
 		position: sticky;
 		top: 0;
 		z-index: 2;
-		background-color: var(--bg-slate-400);
+		background-color: var(--l1-border);
 		border-bottom: 1px solid $custom-border-color;
 		padding: 4px 12px;
 		margin: 0;
@@ -594,7 +630,8 @@ $custom-border-color: #2c3044;
 // Custom scrollbar styling (shared between components)
 @mixin custom-scrollbar {
 	scrollbar-width: thin;
-	scrollbar-color: rgba(192, 193, 195, 0.3) rgba(29, 33, 45, 0.6);
+	scrollbar-color: color-mix(in srgb, var(--border) 30%, transparent)
+		color-mix(in srgb, var(--border) 60%, transparent);
 
 	&::-webkit-scrollbar {
 		width: 6px;
@@ -602,17 +639,17 @@ $custom-border-color: #2c3044;
 	}
 
 	&::-webkit-scrollbar-track {
-		background-color: rgba(29, 33, 45, 0.6);
+		background-color: color-mix(in srgb, var(--border) 60%, transparent);
 		border-radius: 10px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background-color: rgba(192, 193, 195, 0.3);
+		background-color: color-mix(in srgb, var(--border) 30%, transparent);
 		border-radius: 10px;
 		transition: background-color 0.2s ease;
 
 		&:hover {
-			background-color: rgba(192, 193, 195, 0.5);
+			background-color: color-mix(in srgb, var(--border) 50%, transparent);
 		}
 	}
 }
@@ -620,7 +657,8 @@ $custom-border-color: #2c3044;
 // Subtle nested scrollbar styling
 @mixin nested-scrollbar {
 	scrollbar-width: thin;
-	scrollbar-color: rgba(192, 193, 195, 0.2) rgba(29, 33, 45, 0.6);
+	scrollbar-color: color-mix(in srgb, var(--border) 20%, transparent)
+		color-mix(in srgb, var(--border) 60%, transparent);
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -628,16 +666,16 @@ $custom-border-color: #2c3044;
 	}
 
 	&::-webkit-scrollbar-track {
-		background-color: rgba(29, 33, 45, 0.6);
+		background-color: color-mix(in srgb, var(--border) 60%, transparent);
 		border-radius: 10px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background-color: rgba(192, 193, 195, 0.2);
+		background-color: color-mix(in srgb, var(--border) 20%, transparent);
 		border-radius: 10px;
 
 		&:hover {
-			background-color: rgba(192, 193, 195, 0.3);
+			background-color: color-mix(in srgb, var(--border) 30%, transparent);
 		}
 	}
 }
@@ -676,7 +714,7 @@ $custom-border-color: #2c3044;
 .lightMode {
 	.custom-select {
 		.ant-select-selector {
-			background-color: var(--bg-vanilla-100);
+			background-color: var(--l1-background);
 			border-color: #e9e9e9;
 		}
 
@@ -685,7 +723,7 @@ $custom-border-color: #2c3044;
 		}
 
 		.ant-select-clear {
-			background-color: var(--bg-vanilla-100);
+			background-color: var(--l1-background);
 			color: rgba(0, 0, 0, 0.45);
 		}
 
@@ -699,7 +737,7 @@ $custom-border-color: #2c3044;
 
 	.custom-multiselect {
 		.ant-select-selector {
-			background-color: var(--bg-vanilla-100);
+			background-color: var(--l1-background);
 			border-color: #e9e9e9;
 			cursor: text; // Make entire selector clickable for input focus
 
@@ -751,37 +789,37 @@ $custom-border-color: #2c3044;
 			}
 
 			&-active {
-				border-color: var(--bg-robin-500) !important;
-				background-color: var(--bg-vanilla-300) !important;
+				border-color: var(--primary-background) !important;
+				background-color: var(--l3-background) !important;
 			}
 
 			&-selected {
-				border-color: #1890ff !important;
-				background-color: var(--bg-vanilla-300) !important;
+				border-color: var(--primary-background) !important;
+				background-color: var(--l3-background) !important;
 			}
 		}
 	}
 
 	.custom-select-dropdown-container,
 	.custom-multiselect-dropdown-container {
-		background-color: var(--bg-vanilla-100);
-		border: 1px solid #f0f0f0;
+		background-color: var(--l1-background);
+		border: 1px solid var(--l1-border);
 		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
 			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
 		.empty-message {
-			color: rgba(0, 0, 0, 0.45);
+			color: var(--l2-foreground);
 		}
 
 		.ant-select-item {
-			color: rgba(0, 0, 0, 0.85);
+			color: var(--l1-foreground);
 
 			&-option-active {
-				background-color: #f5f5f5 !important;
+				background-color: var(--l3-background) !important;
 			}
 
 			&-option-selected {
-				background-color: var(--bg-vanilla-300) !important;
+				background-color: var(--l2-background) !important;
 			}
 		}
 	}
@@ -789,7 +827,7 @@ $custom-border-color: #2c3044;
 	.custom-select-dropdown,
 	.custom-multiselect-dropdown {
 		border: 1px solid #f0f0f0;
-		background-color: var(--bg-vanilla-100);
+		background-color: var(--l1-background);
 
 		&::-webkit-scrollbar-thumb {
 			background-color: #ccc;
@@ -820,11 +858,11 @@ $custom-border-color: #2c3044;
 			}
 
 			&.selected {
-				background-color: var(--bg-vanilla-300);
+				background-color: var(--l3-background);
 			}
 
 			&.active {
-				background-color: var(--bg-vanilla-300);
+				background-color: var(--l3-background);
 				border-color: #91d5ff;
 			}
 
@@ -839,7 +877,7 @@ $custom-border-color: #2c3044;
 
 	.navigation-footer {
 		border-top: 1px solid #f0f0f0;
-		background-color: var(--bg-vanilla-100);
+		background-color: var(--l1-background);
 
 		.navigation-icons {
 			color: rgba(0, 0, 0, 0.45);
@@ -851,11 +889,11 @@ $custom-border-color: #2c3044;
 
 		.navigate {
 			.icons {
-				border-top: 1.143px solid var(--bg-ink-200);
-				border-right: 1.143px solid var(--bg-ink-200);
-				border-bottom: 2.286px solid var(--bg-ink-200);
-				border-left: 1.143px solid var(--bg-ink-200);
-				background: var(--bg-vanilla-300);
+				border-top: 1.143px solid var(--l2-foreground);
+				border-right: 1.143px solid var(--l2-foreground);
+				border-bottom: 2.286px solid var(--l2-foreground);
+				border-left: 1.143px solid var(--l2-foreground);
+				background: var(--l3-background);
 			}
 		}
 	}
@@ -934,7 +972,7 @@ $custom-border-color: #2c3044;
 			left: 12px;
 			top: 50%;
 			transform: translateY(-50%);
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -5,8 +5,8 @@
 
 	width: 100%;
 
-	border-bottom: 1px solid var(--bg-slate-400);
-	border-top: 1px solid var(--bg-slate-400);
+	border-bottom: 1px solid var(--l1-border);
+	border-top: 1px solid var(--l1-border);
 
 	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', sans-serif;
@@ -72,8 +72,8 @@
 				width: 1px;
 				background: repeating-linear-gradient(
 					to bottom,
-					#1d212d,
-					#1d212d 4px,
+					var(--l1-border),
+					var(--l1-border) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -93,7 +93,7 @@
 					top: 12px;
 					width: 6px;
 					height: 6px;
-					border-left: 6px dotted #1d212d;
+					border-left: 6px dotted var(--l1-border);
 				}
 
 				/* Horizontal line pointing from vertical to the item */
@@ -106,8 +106,8 @@
 					height: 1px;
 					background: repeating-linear-gradient(
 						to right,
-						#1d212d,
-						#1d212d 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -149,7 +149,7 @@
 		width: 44px;
 		padding: 8px;
 
-		border-left: 1px solid var(--bg-slate-400);
+		border-left: 1px solid var(--l1-border);
 
 		.query-name {
 			display: flex;
@@ -163,10 +163,10 @@
 			border-radius: 0px 2px 2px 0px;
 
 			border-radius: 2px;
-			border: 1px solid rgba(242, 71, 105, 0.2);
-			background: rgba(242, 71, 105, 0.1);
+			border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
 
-			color: var(--Sakura-400, #f56c87);
+			color: var(--bg-sakura-400);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -188,10 +188,10 @@
 			border-radius: 0px 2px 2px 0px;
 
 			border-radius: 2px;
-			border: 1px solid rgba(173, 127, 88, 0.2);
-			background: rgba(173, 127, 88, 0.1);
+			border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+			background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
 
-			color: var(--Sienna-500, #ad7f58);
+			color: var(--bg-sienna-500);
 			font-family: 'Space Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -233,7 +233,7 @@
 						top: 12px;
 						width: 6px;
 						height: 6px;
-						border-left: 6px dotted #1d212d;
+						border-left: 6px dotted var(--l1-border);
 					}
 
 					/* Horizontal line pointing from vertical to the item */
@@ -246,8 +246,8 @@
 						height: 1px;
 						background: repeating-linear-gradient(
 							to right,
-							#1d212d,
-							#1d212d 4px,
+							var(--l1-border),
+							var(--l1-border) 4px,
 							transparent 4px,
 							transparent 8px
 						);
@@ -274,8 +274,8 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
-						background: var(--bg-ink-300);
-						color: var(--bg-vanilla-400);
+						background: var(--l3-background);
+						color: var(--l2-foreground);
 						font-size: 12px;
 						font-weight: 300;
 					}
@@ -315,8 +315,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						#1d212d,
-						#1d212d 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -344,10 +344,14 @@
 		.options {
 			.query-name {
 				border-radius: 0px 2px 2px 0px !important;
-				border: 1px solid rgba(242, 71, 105, 0.2) !important;
-				background: rgba(242, 71, 105, 0.1) !important;
+				border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
+				background: color-mix(
+					in srgb,
+					var(--bg-sakura-500) 10%,
+					transparent
+				) !important;
 
-				color: var(--Sakura-400, #f56c87) !important;
+				color: var(--bg-sakura-400) !important;
 				font-family: 'Space Mono';
 				font-size: 14px;
 				font-style: normal;
@@ -362,8 +366,8 @@
 
 			.formula-name {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid rgba(173, 127, 88, 0.2);
-				background: rgba(173, 127, 88, 0.1);
+				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
 
 				font-family: 'Space Mono';
 				font-size: 14px;
@@ -383,8 +387,8 @@
 					width: 1px;
 					background: repeating-linear-gradient(
 						to bottom,
-						#1d212d,
-						#1d212d 4px,
+						var(--l1-border),
+						var(--l1-border) 4px,
 						transparent 4px,
 						transparent 8px
 					);
@@ -400,9 +404,13 @@
 				min-width: 120px;
 
 				border-radius: 2px;
-				border: 1px solid var(--Slate-400, #1d212d);
-				background: var(--Ink-300, #16181d);
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+				.ant-select-selection-item {
+					color: var(--l1-foreground);
+				}
 			}
 		}
 	}
@@ -441,14 +449,18 @@
 
 		.ant-select-selector {
 			border-radius: 2px;
-			border: 1px solid var(--Slate-400, #1d212d) !important;
-			background: var(--Ink-300, #16181d) !important;
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
 			height: 34px !important;
 			box-sizing: border-box !important;
+
+			.ant-select-selection-item {
+				color: var(--l1-foreground);
+			}
 		}
 
 		.ant-select-arrow {
-			color: var(--bg-vanilla-400) !important;
+			color: var(--l2-foreground) !important;
 		}
 	}
 
@@ -456,133 +468,3 @@
 		cursor: pointer;
 	}
 }
-
-.lightMode {
-	.query-builder-v2 {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-		border-top: 1px solid var(--bg-vanilla-300);
-
-		.qb-content-section {
-			.qb-elements-container {
-				&::after {
-					background: repeating-linear-gradient(
-						to bottom,
-						var(--bg-vanilla-300),
-						var(--bg-vanilla-300) 4px,
-						transparent 4px,
-						transparent 8px
-					);
-				}
-
-				.code-mirror-where-clause,
-				.query-aggregation-container,
-				.query-add-ons,
-				.metrics-aggregation-section-content,
-				.metrics-container {
-					&::before {
-						border-left: 6px dotted var(--bg-vanilla-300);
-					}
-
-					/* Horizontal line pointing from vertical to the item */
-					&::after {
-						background: repeating-linear-gradient(
-							to right,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-			}
-		}
-
-		.query-names-section {
-			border-left: 1px solid var(--bg-vanilla-300);
-		}
-
-		.qb-formulas-container {
-			.qb-formula {
-				.formula-container {
-					.ant-col {
-						&::before {
-							border-left: 6px dotted var(--bg-vanilla-300);
-						}
-
-						/* Horizontal line pointing from vertical to the item */
-						&::after {
-							background: repeating-linear-gradient(
-								to right,
-								var(--bg-vanilla-300),
-								var(--bg-vanilla-300) 4px,
-								transparent 4px,
-								transparent 8px
-							);
-						}
-					}
-				}
-			}
-		}
-
-		.qb-footer {
-			.qb-footer-container {
-				.qb-add-new-query {
-					&::before {
-						background: repeating-linear-gradient(
-							to bottom,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-					}
-				}
-			}
-		}
-
-		.qb-entity-options {
-			.options {
-				.formula-name {
-					&::before {
-						background: repeating-linear-gradient(
-							to bottom,
-							var(--bg-vanilla-300),
-							var(--bg-vanilla-300) 4px,
-							transparent 4px,
-							transparent 8px
-						);
-						left: 15px;
-					}
-				}
-			}
-
-			.query-data-source {
-				.ant-select-selector {
-					border: 1px solid var(--bg-vanilla-300) !important;
-					background: var(--bg-vanilla-100) !important;
-					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-
-					.ant-select-selection-item {
-						color: var(--text-ink-400);
-					}
-				}
-			}
-		}
-
-		.qb-search-filter-container {
-			.ant-select-selector {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
-				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-
-				.ant-select-selection-item {
-					color: var(--text-ink-400);
-				}
-			}
-
-			.ant-select-arrow {
-				color: var(--bg-vanilla-400) !important;
-			}
-		}
-	}
-}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -39,7 +39,7 @@
 			align-items: center;
 			gap: 6px;
 
-			color: var(--Slate-50, #62687c);
+			color: var(--l3-foreground);
 			font-family: 'Geist Mono';
 			font-size: 12px;
 			font-style: normal;
@@ -65,7 +65,7 @@
 			gap: 10px;
 
 			.metrics-aggregation-section-content-item-label {
-				color: var(--Vanilla-400, #c0c1c3);
+				color: var(--l2-foreground);
 				font-family: 'Geist Mono';
 				font-size: 13px;
 				font-style: normal;
@@ -74,7 +74,7 @@
 				letter-spacing: -0.07px;
 
 				&.main-label {
-					color: var(--Slate-50, #62687c);
+					color: var(--l3-foreground);
 					font-family: 'Geist Mono';
 					font-size: 12px;
 					font-style: normal;
@@ -100,15 +100,19 @@
 
 				.ant-select-selector {
 					border-radius: 2px;
-					border: 1.005px solid var(--Slate-400, #1d212d);
-					background: var(--Ink-300, #16181d);
-					color: var(--bg-vanilla-400);
+					border: 1.005px solid var(--l1-border);
+					background: var(--l1-background);
+					color: var(--l1-foreground);
 					font-family: 'Geist Mono';
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 400;
 					line-height: 20px;
 					letter-spacing: -0.07px;
+
+					.ant-select-selection-item {
+						color: var(--l1-foreground);
+					}
 				}
 
 				.input-with-label {
@@ -145,10 +149,10 @@
 
 .metrics-operators-select {
 	border-radius: 2px;
-	border: 1.005px solid var(--Slate-400, #1d212d);
-	background: var(--Ink-300, #16181d);
+	border: 1.005px solid var(--l1-border);
+	background: var(--l1-background);
 
-	color: var(--Vanilla-400, #c0c1c3);
+	color: var(--l1-foreground);
 	font-family: 'Geist Mono';
 	font-size: 13px;
 	font-style: normal;
@@ -156,35 +160,3 @@
 	line-height: 20px; /* 142.857% */
 	letter-spacing: -0.07px;
 }
-
-.lightMode {
-	.metrics-aggregate-section {
-		.metrics-aggregation-section-content {
-			.metrics-aggregation-section-content-item {
-				.metrics-aggregation-section-content-item-label {
-					color: var(--text-ink-200);
-
-					&.main-label {
-						color: var(--text-slate-100);
-					}
-				}
-
-				.metrics-aggregation-section-content-item-value {
-					.ant-select-selector {
-						border: 1px solid var(--bg-vanilla-300) !important;
-						background: var(--bg-vanilla-100) !important;
-
-						.ant-select-selection-item {
-							color: var(--text-ink-400);
-						}
-					}
-				}
-			}
-		}
-	}
-	.metrics-operators-select {
-		border: 1px solid var(--bg-vanilla-300) !important;
-		background: var(--bg-vanilla-100) !important;
-		color: var(--text-ink-100);
-	}
-}

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -10,7 +10,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--bg-vanilla-400) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
@@ -22,9 +22,9 @@
 	.ant-select-selector {
 		width: 100%;
 		border-radius: 2px;
-		border: 1px solid #1d212d !important;
-		background: #16181d;
-		color: #fff;
+		border: 1px solid var(--l1-border) !important;
+		background: var(--l1-background);
+		color: var(--l1-foreground);
 		font-family: 'Geist Mono';
 		font-size: 13px;
 		font-style: normal;
@@ -33,65 +33,35 @@
 		min-height: 36px;
 
 		.ant-select-selection-placeholder {
-			color: var(--bg-vanilla-400) !important;
+			color: var(--l2-foreground) !important;
 			font-size: 12px !important;
 		}
 	}
 
 	.ant-select-dropdown {
 		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 
 		.ant-select-item {
-			color: #fff;
+			color: var(--l1-foreground);
 			font-family: 'Geist Mono';
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 400;
 			line-height: 20px; /* 142.857% */
 
-			&:hover {
-				background: rgba(171, 189, 255, 0.04) !important;
-			}
-		}
-	}
-}
-
-.lightMode {
-	.metrics-source-select-container {
-		.ant-select-selector {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100);
-			color: var(--text-ink-100);
-		}
-
-		.ant-select-dropdown {
-			background: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300) !important;
-			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-				0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-			backdrop-filter: none;
-
-			.ant-select-item {
-				color: var(--text-ink-100);
-
-				&:hover,
-				&.ant-select-item-option-active {
-					background: var(--bg-vanilla-300) !important;
-				}
-
-				&.ant-select-item-option-selected {
-					background: var(--bg-vanilla-300) !important;
-					border: 1px solid var(--bg-slate-400);
-					font-weight: 600;
-				}
+			&:hover,
+			&.ant-select-item-option-active {
+				background: var(--l3-background) !important;
+			}
+
+			&.ant-select-item-option-selected {
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l1-border);
+				font-weight: 600;
 			}
 		}
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -20,34 +20,34 @@
 			font-style: normal;
 			font-weight: var(--font-weight-normal);
 
-			color: var(--Vanilla-400, #c0c1c3);
+			color: var(--l2-foreground);
 		}
 
 		.tab {
-			border: 1px solid var(--bg-slate-400);
+			border: 1px solid var(--l1-border);
 			border-left: none;
 			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
 			&:first-child {
-				border-left: 1px solid var(--bg-slate-400);
+				border-left: 1px solid var(--l1-border);
 			}
 		}
 
 		.tab::before {
-			background: var(--bg-slate-400);
+			background: var(--l1-border);
 		}
 
 		.selected-view {
 			color: var(--text-robin-500);
-			border: 1px solid var(--bg-slate-400);
+			border: 1px solid var(--l1-border);
 
 			display: none;
 		}
 
 		.selected-view::before {
-			background: var(--bg-slate-400);
+			background: var(--l1-border);
 		}
 	}
 
@@ -56,8 +56,8 @@
 		height: 30px;
 
 		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 }
@@ -89,7 +89,7 @@
 				position: relative !important;
 
 				&:focus-within {
-					border-color: var(--bg-robin-500);
+					border-color: var(--primary-background);
 				}
 
 				&.cm-focused {
@@ -98,20 +98,20 @@
 
 				.cm-content {
 					border-radius: 2px;
-					border: 1px solid var(--Slate-400, #1d212d);
+					border: 1px solid var(--l1-border);
 					border-top-right-radius: 0px;
 					border-bottom-right-radius: 0px;
 					padding: 0px !important;
-					background-color: #121317 !important;
+					background-color: var(--card) !important;
 
 					&:focus-within {
-						border-color: var(--bg-ink-200);
+						border-color: var(--l1-border);
 					}
 				}
 
 				.cm-tooltip-autocomplete {
-					background: var(--bg-ink-300) !important;
-					color: var(--bg-ink-500) !important;
+					background: var(--l3-background) !important;
+					color: var(--l1-background) !important;
 					border-radius: 2px !important;
 					font-size: 12px !important;
 					font-weight: 500 !important;
@@ -121,17 +121,17 @@
 					right: 0px !important;
 
 					border-radius: 4px;
-					border: 1px solid var(--bg-slate-200, #1d212d);
+					border: 1px solid var(--l1-border);
 					background: linear-gradient(
 						139deg,
-						rgba(18, 19, 23, 0.8) 0%,
-						rgba(18, 19, 23, 0.9) 98.68%
+						color-mix(in srgb, var(--card) 80%, transparent) 0%,
+						color-mix(in srgb, var(--card) 90%, transparent) 98.68%
 					) !important;
 					backdrop-filter: blur(20px);
 					box-sizing: border-box;
 					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 					font-family: 'Space Mono', monospace !important;
-					color: var(--bg-vanilla-100) !important;
+					color: var(--l1-foreground) !important;
 
 					ul {
 						width: 100% !important;
@@ -174,7 +174,11 @@
 
 							&[aria-selected='true'] {
 								// background-color: rgba(78, 116, 248, 0.7) !important;
-								background: rgba(171, 189, 255, 0.04) !important;
+								background: color-mix(
+									in srgb,
+									var(--bg-robin-200) 4%,
+									transparent
+								) !important;
 							}
 						}
 					}
@@ -207,25 +211,25 @@
 				.cm-line {
 					line-height: 36px !important;
 					font-family: 'Space Mono', monospace !important;
-					background-color: #121317 !important;
+					background-color: var(--card) !important;
 
 					::-moz-selection {
-						background: var(--bg-ink-100) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
 					::selection {
-						background: var(--bg-ink-100) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 
 					.cm-function {
-						color: var(--bg-robin-500) !important;
+						color: var(--primary-background) !important;
 					}
 
 					.chip-decorator {
-						background: rgba(36, 40, 52, 1) !important;
-						color: var(--bg-vanilla-100) !important;
+						background: var(--l3-background) !important;
+						color: var(--l1-foreground) !important;
 						border-radius: 4px;
 						padding: 2px 4px;
 						margin-right: 4px;
@@ -233,7 +237,7 @@
 				}
 
 				.cm-selectionBackground {
-					background: var(--bg-ink-100) !important;
+					background: var(--l3-background) !important;
 					opacity: 0.5 !important;
 				}
 
@@ -245,8 +249,8 @@
 
 		.close-btn {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
+			border: 1px solid var(--l1-border);
+			background: var(--l3-background);
 			height: 38px;
 			width: 38px;
 
@@ -285,35 +289,35 @@
 	.add-ons-list {
 		.add-ons-tabs {
 			.add-on-tab-title {
-				color: var(--bg-ink-500) !important;
+				color: var(--l1-foreground) !important;
 			}
 
 			.tab {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
 
 				&:first-child {
-					border-left: 1px solid var(--bg-vanilla-300) !important;
+					border-left: 1px solid var(--l1-border) !important;
 				}
 			}
 
 			.tab::before {
-				background: var(--bg-vanilla-300) !important;
+				background: var(--l3-background) !important;
 			}
 
 			.selected-view {
-				color: var(--bg-robin-500) !important;
-				border: 1px solid var(--bg-vanilla-300) !important;
+				color: var(--primary-background) !important;
+				border: 1px solid var(--l1-border) !important;
 			}
 
 			.selected-view::before {
-				background: var(--bg-vanilla-300) !important;
+				background: var(--l3-background) !important;
 			}
 		}
 
 		.compass-button {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
 		}
 	}
 
@@ -322,33 +326,33 @@
 			.having-filter-select-editor {
 				.cm-editor {
 					&:focus-within {
-						border-color: var(--bg-vanilla-300) !important;
+						border-color: var(--l1-border) !important;
 					}
 
 					.cm-content {
-						border: 1px solid var(--bg-vanilla-300) !important;
-						background: var(--bg-vanilla-100) !important;
+						border: 1px solid var(--l1-border) !important;
+						background: var(--l1-background) !important;
 
 						&:focus-within {
-							border-color: var(--bg-vanilla-300) !important;
+							border-color: var(--l1-border) !important;
 						}
 					}
 
 					.cm-tooltip-autocomplete {
-						background: var(--bg-vanilla-100) !important;
-						border: 1px solid var(--bg-vanilla-300) !important;
-						color: var(--bg-ink-500) !important;
+						background: var(--l1-background) !important;
+						border: 1px solid var(--l1-border) !important;
+						color: var(--l1-foreground) !important;
 						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
 
 						ul {
 							li {
-								color: var(--bg-ink-300) !important;
+								color: var(--l1-foreground) !important;
 								&:hover {
-									background: var(--bg-vanilla-300) !important;
+									background: var(--l3-background) !important;
 								}
 
 								&[aria-selected='true'] {
-									background: var(--bg-vanilla-300) !important;
+									background: var(--l3-background) !important;
 									font-weight: 600 !important;
 								}
 							}
@@ -356,31 +360,31 @@
 					}
 
 					.cm-line {
-						background-color: var(--bg-vanilla-100) !important;
+						background-color: var(--l1-background) !important;
 
 						::-moz-selection {
-							background: var(--bg-vanilla-100) !important;
+							background: var(--l1-background) !important;
 						}
 
 						::selection {
-							background: var(--bg-ink-100) !important;
+							background: var(--l3-background) !important;
 						}
 
 						.chip-decorator {
-							background: var(--bg-vanilla-300) !important;
-							color: var(--bg-ink-400) !important;
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
 						}
 					}
 
 					.cm-selectionBackground {
-						background: var(--bg-vanilla-100) !important;
+						background: var(--l1-background) !important;
 					}
 				}
 			}
 
 			.close-btn {
-				border: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
 			}
 		}
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -21,7 +21,7 @@
 				flex: 1;
 				min-width: 0;
 				font-size: 12px;
-				color: var(--bg-vanilla-400) !important;
+				color: var(--l2-foreground) !important;
 
 				&.error {
 					.cm-editor {
@@ -44,24 +44,24 @@
 					}
 
 					&:focus-within {
-						border-color: var(--bg-robin-500);
+						border-color: var(--primary-background);
 					}
 
 					.cm-content {
 						border-radius: 2px;
-						border: 1px solid var(--Slate-400, #1d212d);
+						border: 1px solid var(--l1-border);
 						border-top-right-radius: 0px;
 						border-bottom-right-radius: 0px;
 						padding: 0px !important;
-						background-color: #121317 !important;
+						background-color: var(--l1-background) !important;
 
 						&:focus-within {
-							border-color: var(--bg-ink-200);
+							border-color: var(--l1-border);
 						}
 					}
 
 					.cm-tooltip-autocomplete {
-						background: var(--bg-ink-300) !important;
+						background: var(--l3-background) !important;
 						border-radius: 2px !important;
 						font-size: 12px !important;
 						font-weight: 500 !important;
@@ -72,11 +72,11 @@
 						right: 0px !important;
 
 						border-radius: 4px;
-						border: 1px solid var(--bg-slate-200, #1d212d);
+						border: 1px solid var(--l1-border);
 						background: linear-gradient(
 							139deg,
-							rgba(18, 19, 23, 0.8) 0%,
-							rgba(18, 19, 23, 0.9) 98.68%
+							color-mix(in srgb, var(--card) 80%, transparent) 0%,
+							color-mix(in srgb, var(--card) 90%, transparent) 98.68%
 						) !important;
 						backdrop-filter: blur(20px);
 						box-sizing: border-box;
@@ -116,15 +116,18 @@
 								box-sizing: border-box;
 								overflow: hidden;
 
+								color: var(--l2-foreground) !important;
 								font-family: 'Space Mono', monospace !important;
 
 								.cm-completionIcon {
 									display: none !important;
 								}
 
+								&:hover,
 								&[aria-selected='true'] {
-									// background-color: rgba(78, 116, 248, 0.7) !important;
-									background: rgba(171, 189, 255, 0.04) !important;
+									background: var(--l3-background) !important;
+									color: var(--l1-foreground) !important;
+									font-weight: 600 !important;
 								}
 							}
 						}
@@ -137,25 +140,25 @@
 					.cm-line {
 						line-height: 36px !important;
 						font-family: 'Space Mono', monospace !important;
-						background-color: #121317 !important;
+						background-color: var(--l1-background) !important;
 
 						::-moz-selection {
-							background: var(--bg-ink-100) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
 						::selection {
-							background: var(--bg-ink-100) !important;
+							background: var(--l3-background) !important;
 							opacity: 0.5 !important;
 						}
 
 						.cm-function {
-							color: var(--bg-robin-500) !important;
+							color: var(--primary-background) !important;
 						}
 
 						.chip-decorator {
-							background: rgba(36, 40, 52, 1) !important;
-							color: var(--bg-vanilla-100) !important;
+							background: var(--l3-background) !important;
+							color: var(--l1-foreground) !important;
 							border-radius: 4px;
 							padding: 2px 4px;
 							margin-right: 4px;
@@ -163,7 +166,7 @@
 					}
 
 					.cm-selectionBackground {
-						background: var(--bg-ink-100) !important;
+						background: var(--l3-background) !important;
 						opacity: 0.5 !important;
 					}
 				}
@@ -195,8 +198,8 @@
 			}
 			.close-btn {
 				border-radius: 0px 2px 2px 0px;
-				border: 1px solid var(--bg-slate-400);
-				background: var(--bg-ink-300);
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
 				height: 38px;
 				width: 38px;
 
@@ -211,13 +214,13 @@
 			height: 36px;
 			line-height: 36px;
 			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
+			border: 1px solid var(--l1-border);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 			font-family: 'Space Mono', monospace !important;
 
 			&::placeholder {
-				color: var(--bg-vanilla-100);
+				color: var(--l1-foreground);
 				opacity: 0.5;
 			}
 		}
@@ -234,7 +237,7 @@
 					input {
 						max-width: 120px;
 						&::placeholder {
-							color: var(--bg-vanilla-400);
+							color: var(--l2-foreground);
 						}
 					}
 				}
@@ -246,88 +249,48 @@
 .lightMode {
 	.query-aggregation-container {
 		.aggregation-container {
-			.query-aggregation-options-input {
-				border-color: var(--bg-vanilla-300) !important;
-
-				&::placeholder {
-					color: var(--bg-ink-400) !important;
-					opacity: 0.5 !important;
-				}
-			}
-
 			.query-aggregation-select-container {
 				.query-aggregation-select-editor {
 					.cm-editor {
-						.cm-content {
-							border: 1px solid var(--bg-vanilla-300) !important;
-							background: var(--bg-vanilla-100) !important;
-							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
-
-							&:focus-within {
-								border-color: var(--bg-vanilla-300) !important;
-							}
-						}
-
 						.cm-tooltip-autocomplete {
-							background: var(--bg-vanilla-100) !important;
-							border: 1px solid var(--bg-vanilla-300) !important;
-							color: var(--bg-ink-500) !important;
+							background: var(--l1-background) !important;
+							border: 1px solid var(--l1-border) !important;
 							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+							backdrop-filter: none;
 
 							ul {
 								li {
-									color: var(--bg-ink-300) !important;
-
 									&:hover,
 									&[aria-selected='true'] {
-										background: var(--bg-vanilla-300) !important;
-										color: var(--bg-ink-500) !important;
-										font-weight: 600 !important;
+										background: var(--l3-background) !important;
 									}
 								}
 							}
 						}
 
 						.cm-line {
-							background-color: var(--bg-vanilla-100) !important;
-
 							::-moz-selection {
-								background: var(--bg-vanilla-100) !important;
+								background: var(--l1-background) !important;
 								opacity: 0.5 !important;
 							}
 
 							::selection {
-								background: var(--bg-vanilla-100) !important;
+								background: var(--l1-background) !important;
 								opacity: 0.5 !important;
 							}
 
 							.cm-function {
-								color: var(--bg-robin-500) !important;
-							}
-
-							.chip-decorator {
-								background: var(--bg-vanilla-300) !important;
-								color: var(--bg-ink-400) !important;
+								color: var(--primary-background) !important;
 							}
 						}
-
-						// .cm-selectionBackground {
-						// 	background: var(--bg-vanilla-100) !important;
-						// 	opacity: 0.5 !important;
-						// }
 					}
 				}
-
-				.close-btn {
-					border-color: var(--bg-vanilla-300) !important;
-					background: var(--bg-vanilla-100) !important;
-				}
 			}
 		}
 	}
 	.query-aggregation-error-popover {
 		.ant-popover-inner {
-			background-color: var(--bg-vanilla-100);
+			background-color: var(--l1-background);
 			border: none;
 			box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 		}
@@ -336,8 +299,8 @@
 
 .query-aggregation-error-popover {
 	.ant-popover-inner {
-		background-color: var(--bg-slate-500);
-		border: 1px solid var(--bg-slate-400);
+		background-color: var(--l1-border);
+		border: 1px solid var(--l1-border);
 		border-radius: 4px;
 		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 	}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss

@@ -1,7 +1,7 @@
 .add-trace-operator-button,
 .add-new-query-button,
 .add-formula-button {
-	border: 1px solid var(--bg-slate-400);
-	background: var(--bg-ink-300);
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 }

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -19,11 +19,11 @@
 		.query-status-container {
 			width: 32px;
 
-			background-color: #121317 !important;
+			background-color: var(--l1-background) !important;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--bg-slate-200);
+			border: 1px solid var(--l1-border);
 			border-radius: 2px;
 			border-top-left-radius: 0px !important;
 			border-bottom-left-radius: 0px !important;
@@ -53,26 +53,26 @@
 		background-color: transparent !important;
 
 		&:focus-within {
-			border-color: var(--bg-robin-500);
+			border-color: var(--primary-background);
 		}
 
 		.cm-content {
 			border-radius: 2px;
-			border: 1px solid var(--Slate-400, #1d212d);
+			border: 1px solid var(--l1-border);
 			padding: 0px !important;
-			background-color: #121317 !important;
+			background-color: var(--l1-background) !important;
 
 			&:focus-within {
-				border-color: var(--bg-ink-200);
+				border-color: var(--l1-border);
 			}
 		}
 
 		&.cm-focused {
-			outline: 1px solid var(--bg-slate-200);
+			outline: 1px solid var(--l1-border);
 		}
 
 		.cm-tooltip-autocomplete {
-			background: var(--bg-ink-300) !important;
+			background: var(--l3-background) !important;
 			border-radius: 2px !important;
 			font-size: 12px !important;
 			font-weight: 500 !important;
@@ -86,13 +86,13 @@
 			border: 0px;
 			background: linear-gradient(
 				139deg,
-				rgba(18, 19, 23, 0.8) 0%,
-				rgba(18, 19, 23, 0.9) 98.68%
+				color-mix(in srgb, var(--card) 80%, transparent) 0%,
+				color-mix(in srgb, var(--card) 90%, transparent) 98.68%
 			) !important;
 			backdrop-filter: blur(20px);
 			box-sizing: border-box;
 			font-family: 'Space Mono', monospace !important;
-			border: 1px solid var(--bg-slate-200);
+			border: 1px solid var(--l1-border);
 			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
 
 			ul {
@@ -130,8 +130,11 @@
 
 					font-family: 'Space Mono', monospace !important;
 
+					background-color: var(--l1-background) !important;
+					color: var(--l2-foreground) !important;
+
 					&:hover {
-						background: var(--bg-ink-100) !important;
+						background: var(--l3-background) !important;
 					}
 
 					.cm-completionIcon {
@@ -139,8 +142,8 @@
 					}
 
 					&[aria-selected='true'] {
-						// background-color: rgba(78, 116, 248, 0.7) !important;
-						background: rgba(171, 189, 255, 0.04) !important;
+						background: var(--l3-background) !important;
+						font-weight: 600 !important;
 					}
 				}
 			}
@@ -153,30 +156,30 @@
 		.cm-line {
 			line-height: 34px !important;
 			font-family: 'Space Mono', monospace !important;
-			background-color: #121317 !important;
+			background-color: var(--l1-background) !important;
 
 			::-moz-selection {
-				background: var(--bg-ink-100) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 
 			::selection {
-				background: var(--bg-ink-100) !important;
+				background: var(--l3-background) !important;
 				opacity: 0.5 !important;
 			}
 		}
 
 		.cm-selectionBackground {
-			background: var(--bg-ink-100) !important;
+			background: var(--l3-background) !important;
 			opacity: 0.5 !important;
 		}
 	}
 
 	.cursor-position {
 		font-size: 12px;
-		color: var(--bg-ink-200);
+		color: var(--l2-foreground);
 		padding: 6px;
-		background-color: var(--bg-vanilla-200);
+		background-color: var(--l1-background);
 		border-radius: 4px;
 		display: inline-flex;
 		align-items: center;
@@ -202,13 +205,13 @@
 		}
 
 		.valid {
-			background-color: rgba(39, 174, 96, 0.1);
-			color: #27ae60;
+			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
+			color: var(--bg-forest-600);
 		}
 
 		.invalid {
-			background-color: rgba(235, 87, 87, 0.1);
-			color: #eb5757;
+			background-color: color-mix(in srgb, var(--bg-cherry-400) 10%, transparent);
+			color: var(--bg-cherry-500);
 		}
 
 		.query-validation-status {
@@ -237,13 +240,13 @@
 
 	.query-context {
 		padding: 12px;
-		background-color: var(--bg-ink-400);
+		background-color: var(--l1-background);
 		border-radius: 4px;
-		border-left: 3px solid var(--bg-robin-500);
-		color: var(--bg-ink-300) !important;
+		border-left: 3px solid var(--l1-border);
+		color: var(--l2-foreground) !important;
 
 		.ant-card-head {
-			color: var(--bg-vanilla-300) !important;
+			color: var(--l2-foreground) !important;
 		}
 
 		.context-details {
@@ -256,7 +259,7 @@
 				font-size: 13px;
 
 				strong {
-					color: var(--bg-vanilla-300);
+					color: var(--l2-foreground);
 					margin-right: 4px;
 				}
 			}
@@ -271,8 +274,8 @@
 
 	.query-text-preview-title {
 		font-size: 13px;
-		color: var(--bg-vanilla-100);
-		background-color: var(--bg-robin-500);
+		color: var(--primary-foreground);
+		background-color: var(--primary-background);
 		padding: 2px 6px;
 		border-radius: 2px;
 		margin-right: 4px;
@@ -281,14 +284,14 @@
 	.query-text-preview {
 		font-family: 'Space Mono', monospace;
 		font-size: 13px;
-		color: var(--bg-vanilla-200);
+		color: var(--l2-foreground);
 		padding: 2px 6px;
 		font-style: italic;
 	}
 
 	.query-examples-card {
-		background-color: var(--bg-ink-400);
-		border: 1px solid var(--bg-slate-200);
+		background-color: var(--l1-background);
+		border: 1px solid var(--l1-border);
 
 		.ant-card-body {
 			padding: 0;
@@ -297,7 +300,7 @@
 		.query-examples {
 			.ant-collapse-header {
 				padding: 8px 16px !important;
-				color: var(--bg-vanilla-300) !important;
+				color: var(--l2-foreground) !important;
 				font-weight: 500;
 			}
 
@@ -317,20 +320,20 @@
 				flex-direction: column;
 				gap: 4px;
 				padding: 8px 12px;
-				background-color: var(--bg-ink-400);
-				border: 1px solid var(--bg-slate-200);
+				background-color: var(--l1-background);
+				border: 1px solid var(--l1-border);
 				border-radius: 4px;
 				cursor: pointer;
 				transition: all 0.2s ease;
 				outline: none;
 
 				&:hover {
-					background-color: var(--bg-ink-300);
-					border-color: var(--bg-robin-500);
+					background-color: var(--l3-background);
+					border-color: var(--primary-background);
 				}
 
 				&:focus-visible {
-					outline: 2px solid var(--bg-robin-500);
+					outline: 2px solid var(--primary-background);
 					outline-offset: 2px;
 				}
 
@@ -342,22 +345,22 @@
 
 				.query-example-label {
 					font-weight: 500;
-					color: var(--bg-vanilla-300);
+					color: var(--l2-foreground);
 					font-size: 13px;
 				}
 
 				.query-example-query {
 					font-family: 'Space Mono', monospace;
 					font-size: 12px;
-					color: var(--bg-vanilla-200);
-					background-color: var(--bg-ink-300);
+					color: var(--l2-foreground);
+					background-color: var(--l3-background);
 					padding: 2px 6px;
 					border-radius: 2px;
 				}
 
 				.query-example-description {
 					font-size: 12px;
-					color: var(--bg-vanilla-200);
+					color: var(--l2-foreground);
 					opacity: 0.8;
 				}
 			}
@@ -404,33 +407,37 @@
 
 		// Color variations based on context
 		&.context-indicator-key {
-			border-left-color: #1890ff; // blue
-			background-color: rgba(24, 144, 255, 0.1);
+			border-left-color: var(--primary-background);
+			background-color: color-mix(
+				in srgb,
+				var(--primary-background) 10%,
+				transparent
+			);
 		}
 
 		&.context-indicator-operator {
-			border-left-color: #722ed1; // purple
-			background-color: rgba(114, 46, 209, 0.1);
+			border-left-color: var(--bg-robin-600); // purple
+			background-color: color-mix(in srgb, var(--bg-robin-600) 10%, transparent);
 		}
 
 		&.context-indicator-value {
-			border-left-color: #52c41a; // green
-			background-color: rgba(82, 196, 26, 0.1);
+			border-left-color: var(--bg-forest-500); // green
+			background-color: color-mix(in srgb, var(--bg-forest-400) 10%, transparent);
 		}
 
 		&.context-indicator-conjunction {
-			border-left-color: #fa8c16; // orange
-			background-color: rgba(250, 140, 22, 0.1);
+			border-left-color: var(--bg-amber-500); // orange
+			background-color: color-mix(in srgb, var(--bg-amber-400) 10%, transparent);
 		}
 
 		&.context-indicator-function {
-			border-left-color: #13c2c2; // cyan
-			background-color: rgba(19, 194, 194, 0.1);
+			border-left-color: var(--bg-aqua-500); // cyan
+			background-color: color-mix(in srgb, var(--bg-aqua-500) 10%, transparent);
 		}
 
 		&.context-indicator-parenthesis {
-			border-left-color: #eb2f96; // magenta
-			background-color: rgba(235, 47, 150, 0.1);
+			border-left-color: var(--bg-sakura-500); // magenta
+			background-color: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
 		}
 	}
 }
@@ -441,279 +448,36 @@
 	}
 
 	.ant-popover-content {
-		background: linear-gradient(
-			139deg,
-			rgba(18, 19, 23, 0.8) 0%,
-			rgba(18, 19, 23, 0.9) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
+		background: var(--l1-background);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 		margin-top: -6px !important;
 	}
 }
 
-// /* Dark mode support */
-// :global(.darkMode) {
-// 	.code-mirror-where-clause {
-// 		.cm-editor {
-// 			border-color: var(--bg-slate-500);
-// 			background-color: var(--bg-ink-400);
-// 		}
-
-// 		.cursor-position {
-// 			background-color: var(--bg-ink-400);
-// 			color: var(--bg-vanilla-100);
-// 		}
-
-// 		.query-context {
-// 			background-color: var(--bg-ink-400);
-// 			color: var(--bg-vanilla-100);
-
-// 			h3 {
-// 				color: var(--bg-vanilla-100);
-// 			}
-
-// 			.context-details {
-// 				p {
-// 					strong {
-// 						color: var(--bg-vanilla-200);
-// 					}
-// 				}
-// 			}
-// 		}
-
-// 		.query-examples-card {
-// 			background-color: var(--bg-ink-400);
-// 			border-color: var(--bg-slate-500);
-
-// 			.ant-collapse-header {
-// 				color: var(--bg-vanilla-100) !important;
-// 			}
-
-// 			.query-example-tag {
-// 				background-color: var(--bg-ink-400);
-// 				border-color: var(--bg-slate-500);
-
-// 				&:hover {
-// 					background-color: var(--bg-ink-300);
-// 					border-color: var(--bg-robin-500);
-// 				}
-
-// 				.query-example-label {
-// 					color: var(--bg-vanilla-100);
-// 				}
-
-// 				.query-example-query {
-// 					color: var(--bg-vanilla-100);
-// 					background-color: var(--bg-ink-300);
-// 				}
-
-// 				.query-example-description {
-// 					color: var(--bg-vanilla-100);
-// 				}
-// 			}
-// 		}
-
-// 		.context-indicator {
-// 			background-color: var(--bg-ink-300);
-// 			color: var(--bg-vanilla-100);
-
-// 			.query-pair-info {
-// 				border-left: 1px solid rgba(255, 255, 255, 0.1);
-// 				background-color: rgba(255, 255, 255, 0.05);
-// 			}
-// 		}
-// 	}
-// }
-
 .lightMode {
 	.code-mirror-where-clause {
-		.query-where-clause-editor-container {
-			.query-status-container {
-				background-color: var(--bg-vanilla-100) !important;
-				border: 1px solid var(--bg-vanilla-300);
-
-				&.hasErrors {
-					border-color: var(--bg-cherry-500);
-				}
-			}
-		}
-
-		.query-where-clause-editor {
-			&.hasErrors {
-				.cm-editor {
-					.cm-content {
-						border-color: var(--bg-cherry-500);
-						border-top-right-radius: 0px !important;
-						border-bottom-right-radius: 0px !important;
-					}
-				}
-			}
-		}
-
 		.cm-editor {
-			&:focus-within {
-				border-color: var(--bg-robin-500);
-			}
-
-			&.cm-focused {
-				outline: 1px solid var(--bg-vanilla-300);
-			}
-
-			.cm-content {
-				border-radius: 2px;
-				border: 1px solid var(--bg-vanilla-300);
-				padding: 0px !important;
-				background-color: var(--bg-vanilla-100) !important;
-
-				&:focus-within {
-					border-color: var(--bg-vanilla-200);
-				}
-			}
-
 			.cm-tooltip-autocomplete {
-				background: var(--bg-vanilla-100) !important;
-				border: 1px solid var(--bg-vanilla-300);
+				background: var(--l1-background) !important;
+				border: 1px solid var(--l1-border);
 				backdrop-filter: blur(20px);
 				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
-
-				ul {
-					li {
-						background-color: var(--bg-vanilla-100) !important;
-						color: var(--bg-ink-300) !important;
-
-						&:hover,
-						&[aria-selected='true'] {
-							background-color: var(--bg-vanilla-300) !important;
-							font-weight: 600 !important;
-						}
-					}
-				}
 			}
 
 			.cm-line {
-				background-color: var(--bg-vanilla-100) !important;
-
 				::-moz-selection {
-					background: #b3d4fc !important;
+					background: var(--bg-robin-200) !important;
 				}
 
 				::selection {
-					background: #b3d4fc !important;
+					background: var(--bg-robin-200) !important;
 				}
 			}
 
 			.cm-selectionBackground {
-				background: #b3d4fc !important;
+				background: var(--bg-robin-200) !important;
 			}
 		}
-
-		.cursor-position {
-			color: var(--bg-vanilla-200);
-			background-color: var(--bg-vanilla-100);
-		}
-
-		.query-context {
-			background-color: var(--bg-vanilla-100);
-			border-left: 3px solid var(--bg-vanilla-300);
-			color: var(--bg-vanilla-300) !important;
-
-			.ant-card-head {
-				color: var(--bg-ink-300) !important;
-			}
-
-			.context-details {
-				p {
-					strong {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		.query-examples-card {
-			background-color: var(--bg-vanilla-100);
-			border: 1px solid var(--bg-vanilla-300);
-
-			.query-examples {
-				.ant-collapse-header {
-					color: var(--bg-ink-300) !important;
-				}
-
-				.query-example-tag {
-					background-color: var(--bg-vanilla-100);
-					border: 1px solid var(--bg-vanilla-300);
-
-					&:hover {
-						background-color: var(--bg-vanilla-200);
-						border-color: var(--bg-vanilla-300);
-					}
-
-					.query-example-label {
-						color: var(--bg-ink-300);
-					}
-
-					.query-example-query {
-						color: var(--bg-ink-300);
-						background-color: var(--bg-vanilla-100);
-					}
-
-					.query-example-description {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		.context-indicator {
-			background-color: var(--bg-vanilla-100);
-			border-left: 4px solid var(--bg-vanilla-300);
-
-			display: none;
-
-			.query-pair-info {
-				border-left: 1px solid rgba(255, 255, 255, 0.1);
-				background-color: rgba(255, 255, 255, 0.03);
-			}
-
-			// Color variations based on context
-			&.context-indicator-key {
-				border-left-color: #1890ff; // blue
-				background-color: rgba(24, 144, 255, 0.1);
-			}
-
-			&.context-indicator-operator {
-				border-left-color: #722ed1; // purple
-				background-color: rgba(114, 46, 209, 0.1);
-			}
-
-			&.context-indicator-value {
-				border-left-color: #52c41a; // green
-				background-color: rgba(82, 196, 26, 0.1);
-			}
-
-			&.context-indicator-conjunction {
-				border-left-color: #fa8c16; // orange
-				background-color: rgba(250, 140, 22, 0.1);
-			}
-
-			&.context-indicator-function {
-				border-left-color: #13c2c2; // cyan
-				background-color: rgba(19, 194, 194, 0.1);
-			}
-
-			&.context-indicator-parenthesis {
-				border-left-color: #eb2f96; // magenta
-				background-color: rgba(235, 47, 150, 0.1);
-			}
-		}
-	}
-
-	.query-status-popover {
-		.ant-popover-content {
-			background: var(--bg-vanilla-100);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
 	}
 }

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -16,8 +16,8 @@
 			width: 1px;
 			background: repeating-linear-gradient(
 				to bottom,
-				var(--bg-slate-400),
-				var(--bg-slate-400) 4px,
+				var(--l1-border),
+				var(--l1-border) 4px,
 				transparent 4px,
 				transparent 8px
 			);
@@ -36,8 +36,8 @@
 			width: 20px;
 			background: repeating-linear-gradient(
 				to right,
-				var(--bg-slate-400),
-				var(--bg-slate-400) 4px,
+				var(--l1-border),
+				var(--l1-border) 4px,
 				transparent 4px,
 				transparent 8px
 			);
@@ -52,7 +52,7 @@
 			height: 4px;
 			width: 4px;
 			border-radius: 50%;
-			background-color: var(--bg-slate-400);
+			background-color: var(--l1-border);
 		}
 	}
 
@@ -87,8 +87,8 @@
 		flex-direction: row;
 
 		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
+		border: 1px solid var(--l1-border);
+		background: var(--l3-background);
 
 		.qb-trace-operator-editor-container {
 			flex: 1;
@@ -105,17 +105,17 @@
 				top: 50%;
 				height: 1px;
 				width: 16px;
-				background-color: var(--bg-slate-400);
+				background-color: var(--l1-border);
 			}
 		}
 
 		.label {
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			padding: 0px 8px;
-			border-right: 1px solid var(--bg-slate-400);
+			border-right: 1px solid var(--l1-border);
 			font-size: 12px;
 			font-weight: 300;
 		}
@@ -128,22 +128,22 @@
 			&::before {
 				background: repeating-linear-gradient(
 					to right,
-					var(--bg-vanilla-300),
-					var(--bg-vanilla-300) 4px,
+					var(--l3-background),
+					var(--l3-background) 4px,
 					transparent 4px,
 					transparent 8px
 				);
 			}
 			&::after {
-				background-color: var(--bg-vanilla-300);
+				background-color: var(--l3-background);
 			}
 		}
 		&.non-list-view {
 			&::before {
 				background: repeating-linear-gradient(
 					to bottom,
-					var(--bg-vanilla-300),
-					var(--bg-vanilla-300) 4px,
+					var(--l3-background),
+					var(--l3-background) 4px,
 					transparent 4px,
 					transparent 8px
 				);
@@ -151,13 +151,13 @@
 		}
 
 		&-label-with-input {
-			border: 1px solid var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100) !important;
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
 
 			.label {
-				color: var(--bg-ink-500) !important;
-				border-right: 1px solid var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100) !important;
+				color: var(--l1-foreground) !important;
+				border-right: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
 			}
 		}
 	}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -3,7 +3,7 @@
 	flex-direction: column;
 	padding: 12px;
 	gap: 12px;
-	border-bottom: 1px solid var(--bg-slate-400);
+	border-bottom: 1px solid var(--l1-border);
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;
@@ -16,7 +16,7 @@
 			gap: 6px;
 
 			.title {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -34,7 +34,7 @@
 
 			.clear-all {
 				font-size: 12px;
-				color: var(--bg-robin-500);
+				color: var(--accent-primary);
 				cursor: pointer;
 			}
 		}
@@ -47,7 +47,7 @@
 
 		.filter-separator {
 			height: 1px;
-			background-color: var(--bg-slate-400);
+			background-color: var(--l1-border);
 			margin: 4px 0;
 		}
 
@@ -71,17 +71,17 @@
 					cursor: not-allowed;
 
 					.value-string {
-						color: var(--bg-slate-200);
+						color: var(--l3-foreground);
 					}
 
 					.only-btn {
 						cursor: not-allowed;
-						color: var(--bg-slate-200);
+						color: var(--l3-foreground);
 					}
 
 					.toggle-btn {
 						cursor: not-allowed;
-						color: var(--bg-slate-200);
+						color: var(--l3-foreground);
 					}
 				}
 
@@ -134,7 +134,7 @@
 		justify-content: center;
 
 		.show-more-text {
-			color: var(--bg-robin-500);
+			color: var(--accent-primary);
 			cursor: pointer;
 		}
 	}
@@ -149,7 +149,7 @@
 			margin-top: 4px;
 
 			&-message {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-size: 14px;
 				line-height: 20px; /* 142.857% */
 				letter-spacing: -0.07px;
@@ -173,25 +173,6 @@
 	}
 }
 
-.lightMode {
-	.checkbox-filter {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-		.filter-header-checkbox {
-			.left-action {
-				.title {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
-		.values {
-			.filter-separator {
-				background-color: var(--bg-vanilla-300);
-			}
-		}
-	}
-}
-
 .label-false {
 	width: 2px;
 	height: 11px;

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.styles.scss

@@ -1,6 +1,6 @@
 .collapseContainer {
-	background-color: var(--bg-ink-500);
-	border-bottom: 1px solid var(--bg-slate-400);
+	background-color: var(--l1-background);
+	border-bottom: 1px solid var(--l1-border);
 
 	.ant-collapse-header {
 		padding: 12px !important;
@@ -12,7 +12,7 @@
 	}
 
 	.ant-collapse-header-text {
-		color: var(--bg-vanilla-400);
+		color: var(--l2-foreground);
 		font-family: Inter;
 		font-size: 14px;
 		font-style: normal;
@@ -28,7 +28,7 @@
 
 		.min-max-input {
 			.ant-input-group-addon {
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: 'Space Mono', monospace;
 				font-size: 12px;
 				font-style: normal;
@@ -41,7 +41,7 @@
 			.ant-input {
 				padding: 4px 6px;
 
-				color: var(--bg-vanilla-400);
+				color: var(--l2-foreground);
 				font-family: 'Space Mono', monospace;
 				font-size: 12px;
 				font-style: normal;
@@ -54,9 +54,9 @@
 }
 
 .divider {
-	background-color: var(--bg-slate-400);
+	background-color: var(--l1-border);
 	margin: 0;
-	border-color: var(--bg-slate-400);
+	border-color: var(--l1-border);
 }
 
 .filter-header {
@@ -66,7 +66,7 @@
 		gap: 6px;
 
 		.ant-typography {
-			color: var(--bg-vanilla-400);
+			color: var(--l2-foreground);
 			font-family: Inter;
 			font-size: 14px;
 			font-style: normal;
@@ -77,14 +77,14 @@
 	}
 
 	.sync-icon {
-		background-color: var(--bg-ink-500);
+		background-color: var(--l1-background);
 		border: 0;
 		box-shadow: none;
 		padding: 8px;
 	}
 
 	.arrow-icon {
-		background-color: var(--bg-ink-500);
+		background-color: var(--l1-background);
 		border: 0;
 		box-shadow: none;
 		padding-top: 8px;
@@ -112,7 +112,7 @@
 }
 
 .section-card {
-	background-color: var(--bg-ink-500);
+	background-color: var(--l1-background);
 	.ant-card-body {
 		padding: 0;
 		display: flex;
@@ -124,51 +124,3 @@
 	}
 	width: 240px;
 }
-.lightMode {
-	.collapseContainer {
-		background-color: var(--bg-vanilla-100);
-		border-bottom: 1px solid var(--bg-vanilla-300);
-
-		.ant-collapse-header-text {
-			color: var(--bg-slate-100);
-		}
-
-		.duration-inputs {
-			.min-max-input {
-				.ant-input-group-addon {
-					color: var(--bg-slate-100);
-				}
-
-				.ant-input {
-					color: var(--bg-slate-100);
-				}
-			}
-		}
-	}
-
-	.divider {
-		background-color: var(--bg-vanilla-100);
-		border-color: var(--bg-vanilla-200);
-	}
-
-	.filter-header {
-		.filter-title {
-			.ant-typography {
-				color: var(--bg-slate-100);
-			}
-		}
-
-		.arrow-icon {
-			background-color: var(--bg-vanilla-100);
-		}
-
-		.sync-icon {
-			background-color: var(--bg-vanilla-100);
-		}
-	}
-
-	.section-card {
-		background-color: var(--bg-vanilla-100);
-		box-shadow: none;
-	}
-}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -22,8 +22,8 @@
 	min-width: 0;
 	height: 100%;
 	min-height: 0;
-	border-right: 1px solid var(--bg-slate-400);
-	color: var(--bg-vanilla-100);
+	border-right: 1px solid var(--l1-border);
+	color: var(--l1-foreground);
 
 	.overlay-scrollbar {
 		flex: 1;
@@ -35,7 +35,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 10.5px;
-		border-bottom: 1px solid var(--bg-slate-400);
+		border-bottom: 1px solid var(--l1-border);
 
 		.left-actions {
 			display: flex;
@@ -45,7 +45,7 @@
 			justify-content: flex-start;
 
 			.text {
-				color: var(--bg-vanilla-400);
+				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -64,9 +64,10 @@
 				align-items: center;
 				gap: 10px;
 				border-radius: 2px;
-				border: 1px solid rgba(78, 116, 248, 0.2);
-				background: rgba(78, 116, 248, 0.1);
-				color: var(--bg-robin-500);
+				border: 1px solid
+					color-mix(in srgb, var(--primary-background) 20%, transparent);
+				background: var(--primary-background);
+				color: var(--primary-foreground);
 				font-family: 'Geist Mono';
 				font-size: 14px;
 				font-style: normal;
@@ -74,6 +75,7 @@
 				line-height: 18px;
 				text-transform: uppercase;
 			}
+
 			.select-box {
 				display: flex;
 				padding: 2px 5px;
@@ -99,7 +101,7 @@
 			.divider-filter {
 				width: 1px;
 				height: 14px;
-				background: #161922;
+				background: var(--l1-background);
 			}
 
 			.sync-icon {
@@ -111,7 +113,7 @@
 				position: relative;
 				display: flex;
 				padding: 2px;
-				background-color: var(--bg-ink-500);
+				background-color: var(--l1-background);
 
 				.settings-icon {
 					height: 14px;
@@ -121,7 +123,7 @@
 
 				&.active,
 				&:hover {
-					background: var(--bg-slate-500);
+					background: var(--l2-background);
 				}
 			}
 		}
@@ -156,43 +158,12 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		transparent 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		rgba(11, 12, 14, 0.1) 0,
-		rgba(11, 12, 14, 0) 100%
+		color-mix(in srgb, var(--background) 10%, transparent) 0,
+		transparent 100%
 	);
 }
-
-.lightMode {
-	.quick-filters {
-		background-color: var(--bg-vanilla-100);
-		border-right: 1px solid var(--bg-vanilla-300);
-		color: var(--bg-ink-200);
-
-		.header {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-
-			.left-actions {
-				.text {
-					color: var(--bg-ink-400);
-				}
-
-				.sync-icon {
-					background-color: var(--bg-vanilla-100);
-				}
-			}
-			.right-actions {
-				.right-action-icon-container {
-					background-color: var(--bg-vanilla-100);
-					&.active,
-					&:hover {
-						background-color: var(--bg-vanilla-200);
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss

@@ -4,7 +4,7 @@
 		width: 8px;
 		height: 8px;
 		border-radius: 50%;
-		background-color: var(--bg-robin-500);
+		background-color: var(--primary-background);
 		z-index: 1000;
 	}
 
@@ -16,8 +16,8 @@
 	&__container {
 		position: absolute;
 		width: 320px;
-		background-color: var(--bg-robin-500);
-		color: var(--text-white);
+		background-color: var(--primary-background);
+		color: var(--primary-foreground);
 		border-radius: 8px;
 		padding: 16px;
 		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -32,7 +32,7 @@
 
 	&__close-icon {
 		cursor: pointer;
-		color: var(--text-white);
+		color: var(--primary-foreground);
 	}
 
 	&__message {
@@ -46,8 +46,8 @@
 	}
 
 	&__button {
-		background: var(--bg-vanilla-100);
-		color: var(--bg-robin-500);
+		background: var(--card);
+		color: var(--accent-primary);
 		border: none;
 		padding: 6px 12px;
 		border-radius: 4px;

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -6,10 +6,10 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
-	background: var(--bg-slate-500);
+	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
-	color: var(--bg-vanilla-100);
+	color: var(--l1-foreground);
 
 	&.qf-logs-explorer {
 		height: calc(100vh - 45px);
@@ -63,7 +63,7 @@
 
 	.search {
 		.ant-input {
-			background-color: var(--bg-slate-500);
+			background-color: var(--l1-background);
 			height: 46px;
 			border-radius: 0;
 		}
@@ -80,7 +80,7 @@
 		display: flex;
 		gap: 12px;
 		padding: 12px;
-		border-top: 1px solid var(--bg-slate-400);
+		border-top: 1px solid var(--l1-border);
 		button {
 			display: flex;
 			align-items: center;
@@ -99,7 +99,7 @@
 	display: flex;
 	flex-direction: column;
 	.qf-filters-header {
-		color: var(--bg-slate-50);
+		color: var(--muted-foreground);
 		font-family: Inter;
 		font-size: 11px;
 		font-style: normal;
@@ -172,31 +172,10 @@
 	}
 
 	&:hover {
-		background-color: var(--bg-slate-400);
+		background-color: var(--l2-background);
 		.remove-filter-btn,
 		.add-filter-btn {
 			opacity: 1;
 		}
 	}
 }
-
-.lightMode {
-	.quick-filters-settings {
-		background: var(--bg-vanilla-100);
-		color: var(--bg-slate-500);
-		.search {
-			.ant-input {
-				background-color: var(--bg-vanilla-100);
-			}
-		}
-		.qf-footer {
-			border-top: 1px solid var(--bg-vanilla-300);
-		}
-	}
-
-	.qf-filter-item {
-		&:hover {
-			background-color: var(--bg-vanilla-200);
-		}
-	}
-}

frontend/src/components/ResizeTable/ResizeTable.styles.scss

@@ -45,7 +45,7 @@
 				transform: translate(-50%, -50%);
 				width: 1px;
 				height: 1.6em;
-				background-color: var(--bg-slate-200);
+				background-color: var(--l3-background);
 				transition: background-color 0.2s;
 			}
 		}

frontend/src/components/RolesSelect/RolesSelect.styles.scss

@@ -33,7 +33,7 @@
 		font-size: var(--font-size-sm);
 		color: var(--l1-foreground);
 		background: var(--l3-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 		padding: 0 var(--padding-1) 0 6px;
 		line-height: var(--line-height-20);

frontend/src/components/ServiceAccountDrawer/AddKeyModal/AddKeyModal.styles.scss

@@ -27,7 +27,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--border);
+		border-color: var(--l1-border);
 		color: var(--l1-foreground);
 		box-shadow: none;
 
@@ -39,7 +39,7 @@
 	&__expiry-toggle {
 		width: 60%;
 		display: flex;
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 		overflow: hidden;
 		padding: 0;
@@ -60,7 +60,7 @@
 			justify-content: center;
 			background: transparent;
 			border: none;
-			border-right: 1px solid var(--border);
+			border-right: 1px solid var(--l1-border);
 			color: var(--foreground);
 
 			&:last-child {
@@ -80,7 +80,7 @@
 
 		.ant-picker {
 			background: var(--l2-background);
-			border-color: var(--border);
+			border-color: var(--l1-border);
 			border-radius: 2px;
 			width: 100%;
 			height: 32px;
@@ -108,7 +108,7 @@
 		align-items: center;
 		height: 32px;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 		overflow: hidden;
 	}
@@ -132,7 +132,7 @@
 		border-top: none;
 		border-right: none;
 		border-bottom: none;
-		border-left: 1px solid var(--border);
+		border-left: 1px solid var(--l1-border);
 		min-width: 40px;
 	}
 

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -1,7 +1,7 @@
-import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { Callout } from '@signozhq/callout';
 import { Check, Copy } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyWithKeyDTO } from 'api/generated/services/sigNoz.schemas';
 
 export interface KeyCreatedPhaseProps {

frontend/src/components/ServiceAccountDrawer/AddKeyModal/index.tsx

@@ -3,7 +3,7 @@ import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -2,7 +2,7 @@ import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getGetServiceAccountQueryKey,

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -1,10 +1,10 @@
 import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
-import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { LockKeyhole, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { Badge } from '@signozhq/ui';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { popupContainer } from 'utils/selectPopupContainer';

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyModal.styles.scss

@@ -27,7 +27,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--border);
+		border-color: var(--l1-border);
 		color: var(--l1-foreground);
 		box-shadow: none;
 
@@ -44,7 +44,7 @@
 		padding: 0 var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		cursor: not-allowed;
 		opacity: 0.8;
 	}
@@ -70,7 +70,7 @@
 	&__expiry-toggle {
 		width: 60%;
 		display: flex;
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		border-radius: 2px;
 		overflow: hidden;
 		padding: 0;
@@ -91,7 +91,7 @@
 			justify-content: center;
 			background: transparent;
 			border: none;
-			border-right: 1px solid var(--border);
+			border-right: 1px solid var(--l1-border);
 			color: var(--foreground);
 			white-space: nowrap;
 
@@ -112,7 +112,7 @@
 
 		.ant-picker {
 			background: var(--l2-background);
-			border-color: var(--border);
+			border-color: var(--l1-border);
 			border-radius: 2px;
 			width: 100%;
 			height: 32px;

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { DialogWrapper } from '@signozhq/dialog';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccountKeys,

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { Badge } from '@signozhq/badge';
 import { LockKeyhole } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
+import { Badge } from '@signozhq/ui';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -2,7 +2,7 @@ import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountKeysQueryKey,

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.styles.scss

@@ -51,7 +51,7 @@
 			}
 
 			&:hover {
-				background: rgba(171, 189, 255, 0.04);
+				background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
 				color: var(--l1-foreground);
 			}
 
@@ -175,7 +175,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--border);
+		border-color: var(--l1-border);
 		color: var(--l1-foreground);
 		box-shadow: none;
 
@@ -192,7 +192,7 @@
 		padding: 0 var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 
 		&--disabled {
 			cursor: not-allowed;
@@ -485,14 +485,22 @@
 			background: transparent;
 
 			&:hover > td {
-				background: rgba(171, 189, 255, 0.06) !important;
+				background: color-mix(
+					in srgb,
+					var(--bg-robin-200) 6%,
+					transparent
+				) !important;
 			}
 
 			&.keys-tab__table-row--alt > td {
-				background: rgba(171, 189, 255, 0.02);
+				background: color-mix(in srgb, var(--bg-robin-200) 2%, transparent);
 
 				&:hover {
-					background: rgba(171, 189, 255, 0.06) !important;
+					background: color-mix(
+						in srgb,
+						var(--bg-robin-200) 6%,
+						transparent
+					) !important;
 				}
 			}
 		}
@@ -555,7 +563,7 @@
 
 .sa-delete-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	border: 1px solid var(--l1-border);
 
 	[data-slot='dialog-title'] {
 		color: var(--l1-foreground);