Merge branch 'main' into feat/update-styles-semantic-tokens

* chore: send query in the clickhouse query panel update

* chore: obfuscate query to avoid sending sensitive values

cmd/community/server.go

@@ -8,6 +8,7 @@ import (
 
 	"github.com/SigNoz/signoz/cmd"
 	"github.com/SigNoz/signoz/pkg/analytics"
+	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
@@ -93,6 +94,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
+		func(_ licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]] {
+			return signoz.NewAuditorProviderFactories()
+		},
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			return querier.NewHandler(ps, q, a)
 		},

cmd/enterprise/server.go

@@ -8,6 +8,7 @@ import (
 	"github.com/spf13/cobra"
 
 	"github.com/SigNoz/signoz/cmd"
+	"github.com/SigNoz/signoz/ee/auditor/otlphttpauditor"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/samlcallbackauthn"
 	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
@@ -24,6 +25,7 @@ import (
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
 	"github.com/SigNoz/signoz/pkg/analytics"
+	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -133,6 +135,13 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
+		func(licensing licensing.Licensing) factory.NamedMap[factory.ProviderFactory[auditor.Auditor, auditor.Config]] {
+			factories := signoz.NewAuditorProviderFactories()
+			if err := factories.Add(otlphttpauditor.NewFactory(licensing, version.Info)); err != nil {
+				panic(err)
+			}
+			return factories
+		},
 		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
 			communityHandler := querier.NewHandler(ps, q, a)
 			return eequerier.NewHandler(ps, q, communityHandler)

conf/example.yaml

@@ -364,3 +364,34 @@ serviceaccount:
   analytics:
     # toggle service account analytics
     enabled: true
+
+##################### Auditor #####################
+auditor:
+  # Specifies the auditor provider to use.
+  # noop: discards all audit events (community default).
+  # otlphttp: exports audit events via OTLP HTTP (enterprise).
+  provider: noop
+  # The async channel capacity for audit events. Events are dropped when full (fail-open).
+  buffer_size: 1000
+  # The maximum number of events per export batch.
+  batch_size: 100
+  # The maximum time between export flushes.
+  flush_interval: 1s
+  otlphttp:
+    # The target scheme://host:port/path of the OTLP HTTP endpoint.
+    endpoint: http://localhost:4318/v1/logs
+    # Whether to use HTTP instead of HTTPS.
+    insecure: false
+    # The maximum duration for an export attempt.
+    timeout: 10s
+    # Additional HTTP headers sent with every export request.
+    headers: {}
+    retry:
+      # Whether to retry on transient failures.
+      enabled: true
+      # The initial wait time before the first retry.
+      initial_interval: 5s
+      # The upper bound on backoff interval.
+      max_interval: 30s
+      # The total maximum time spent retrying.
+      max_elapsed_time: 60s

docs/api/openapi.yml

@@ -403,27 +403,65 @@ components:
       required:
       - regions
       type: object
-    CloudintegrationtypesAWSCollectionStrategy:
+    CloudintegrationtypesAWSCloudWatchLogsSubscription:
       properties:
-        aws_logs:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsStrategy'
-        aws_metrics:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsStrategy'
-        s3_buckets:
-          additionalProperties:
-            items:
-              type: string
-            type: array
-          type: object
+        filterPattern:
+          type: string
+        logGroupNamePrefix:
+          type: string
+      required:
+      - logGroupNamePrefix
+      - filterPattern
+      type: object
+    CloudintegrationtypesAWSCloudWatchMetricStreamFilter:
+      properties:
+        metricNames:
+          items:
+            type: string
+          type: array
+        namespace:
+          type: string
+      required:
+      - namespace
       type: object
     CloudintegrationtypesAWSConnectionArtifact:
       properties:
-        connectionURL:
+        connectionUrl:
           type: string
       required:
-      - connectionURL
+      - connectionUrl
       type: object
-    CloudintegrationtypesAWSConnectionArtifactRequest:
+    CloudintegrationtypesAWSIntegrationConfig:
+      properties:
+        enabledRegions:
+          items:
+            type: string
+          type: array
+        telemetryCollectionStrategy:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
+      required:
+      - enabledRegions
+      - telemetryCollectionStrategy
+      type: object
+    CloudintegrationtypesAWSLogsCollectionStrategy:
+      properties:
+        subscriptions:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchLogsSubscription'
+          type: array
+      required:
+      - subscriptions
+      type: object
+    CloudintegrationtypesAWSMetricsCollectionStrategy:
+      properties:
+        streamFilters:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesAWSCloudWatchMetricStreamFilter'
+          type: array
+      required:
+      - streamFilters
+      type: object
+    CloudintegrationtypesAWSPostableAccountConfig:
       properties:
         deploymentRegion:
           type: string
@@ -435,46 +473,6 @@ components:
       - deploymentRegion
       - regions
       type: object
-    CloudintegrationtypesAWSIntegrationConfig:
-      properties:
-        enabledRegions:
-          items:
-            type: string
-          type: array
-        telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
-      required:
-      - enabledRegions
-      - telemetry
-      type: object
-    CloudintegrationtypesAWSLogsStrategy:
-      properties:
-        cloudwatch_logs_subscriptions:
-          items:
-            properties:
-              filter_pattern:
-                type: string
-              log_group_name_prefix:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
-    CloudintegrationtypesAWSMetricsStrategy:
-      properties:
-        cloudwatch_metric_stream_filters:
-          items:
-            properties:
-              MetricNames:
-                items:
-                  type: string
-                type: array
-              Namespace:
-                type: string
-            type: object
-          nullable: true
-          type: array
-      type: object
     CloudintegrationtypesAWSServiceConfig:
       properties:
         logs:
@@ -486,7 +484,7 @@ components:
       properties:
         enabled:
           type: boolean
-        s3_buckets:
+        s3Buckets:
           additionalProperties:
             items:
               type: string
@@ -498,6 +496,19 @@ components:
         enabled:
           type: boolean
       type: object
+    CloudintegrationtypesAWSTelemetryCollectionStrategy:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSLogsCollectionStrategy'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSMetricsCollectionStrategy'
+        s3Buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
+      type: object
     CloudintegrationtypesAccount:
       properties:
         agentReport:
@@ -561,6 +572,26 @@ components:
           nullable: true
           type: array
       type: object
+    CloudintegrationtypesCloudIntegrationService:
+      nullable: true
+      properties:
+        cloudIntegrationId:
+          type: string
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
+        createdAt:
+          format: date-time
+          type: string
+        id:
+          type: string
+        type:
+          $ref: '#/components/schemas/CloudintegrationtypesServiceID'
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      type: object
     CloudintegrationtypesCollectedLogAttribute:
       properties:
         name:
@@ -581,13 +612,6 @@ components:
         unit:
           type: string
       type: object
-    CloudintegrationtypesCollectionStrategy:
-      properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
-      required:
-      - aws
-      type: object
     CloudintegrationtypesConnectionArtifact:
       properties:
         aws:
@@ -595,12 +619,21 @@ components:
       required:
       - aws
       type: object
-    CloudintegrationtypesConnectionArtifactRequest:
+    CloudintegrationtypesCredentials:
       properties:
-        aws:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifactRequest'
+        ingestionKey:
+          type: string
+        ingestionUrl:
+          type: string
+        sigNozApiKey:
+          type: string
+        sigNozApiUrl:
+          type: string
       required:
-      - aws
+      - sigNozApiUrl
+      - sigNozApiKey
+      - ingestionUrl
+      - ingestionKey
       type: object
     CloudintegrationtypesDashboard:
       properties:
@@ -626,7 +659,7 @@ components:
           nullable: true
           type: array
       type: object
-    CloudintegrationtypesGettableAccountWithArtifact:
+    CloudintegrationtypesGettableAccountWithConnectionArtifact:
       properties:
         connectionArtifact:
           $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifact'
@@ -645,7 +678,7 @@ components:
       required:
       - accounts
       type: object
-    CloudintegrationtypesGettableAgentCheckInResponse:
+    CloudintegrationtypesGettableAgentCheckIn:
       properties:
         account_id:
           type: string
@@ -694,12 +727,72 @@ components:
             type: string
           type: array
         telemetry:
-          $ref: '#/components/schemas/CloudintegrationtypesAWSCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSCollectionStrategy'
       required:
       - enabled_regions
       - telemetry
       type: object
-    CloudintegrationtypesPostableAgentCheckInRequest:
+    CloudintegrationtypesOldAWSCollectionStrategy:
+      properties:
+        aws_logs:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSLogsStrategy'
+        aws_metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesOldAWSMetricsStrategy'
+        provider:
+          type: string
+        s3_buckets:
+          additionalProperties:
+            items:
+              type: string
+            type: array
+          type: object
+      type: object
+    CloudintegrationtypesOldAWSLogsStrategy:
+      properties:
+        cloudwatch_logs_subscriptions:
+          items:
+            properties:
+              filter_pattern:
+                type: string
+              log_group_name_prefix:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesOldAWSMetricsStrategy:
+      properties:
+        cloudwatch_metric_stream_filters:
+          items:
+            properties:
+              MetricNames:
+                items:
+                  type: string
+                type: array
+              Namespace:
+                type: string
+            type: object
+          nullable: true
+          type: array
+      type: object
+    CloudintegrationtypesPostableAccount:
+      properties:
+        config:
+          $ref: '#/components/schemas/CloudintegrationtypesPostableAccountConfig'
+        credentials:
+          $ref: '#/components/schemas/CloudintegrationtypesCredentials'
+      required:
+      - config
+      - credentials
+      type: object
+    CloudintegrationtypesPostableAccountConfig:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
+      required:
+      - aws
+      type: object
+    CloudintegrationtypesPostableAgentCheckIn:
       properties:
         account_id:
           type: string
@@ -727,6 +820,8 @@ components:
       properties:
         assets:
           $ref: '#/components/schemas/CloudintegrationtypesAssets'
+        cloudIntegrationService:
+          $ref: '#/components/schemas/CloudintegrationtypesCloudIntegrationService'
         dataCollected:
           $ref: '#/components/schemas/CloudintegrationtypesDataCollected'
         icon:
@@ -735,12 +830,10 @@ components:
           type: string
         overview:
           type: string
-        serviceConfig:
-          $ref: '#/components/schemas/CloudintegrationtypesServiceConfig'
-        supported_signals:
+        supportedSignals:
           $ref: '#/components/schemas/CloudintegrationtypesSupportedSignals'
         telemetryCollectionStrategy:
-          $ref: '#/components/schemas/CloudintegrationtypesCollectionStrategy'
+          $ref: '#/components/schemas/CloudintegrationtypesTelemetryCollectionStrategy'
         title:
           type: string
       required:
@@ -749,9 +842,10 @@ components:
       - icon
       - overview
       - assets
-      - supported_signals
+      - supportedSignals
       - dataCollected
       - telemetryCollectionStrategy
+      - cloudIntegrationService
       type: object
     CloudintegrationtypesServiceConfig:
       properties:
@@ -760,6 +854,22 @@ components:
       required:
       - aws
       type: object
+    CloudintegrationtypesServiceID:
+      enum:
+      - alb
+      - api-gateway
+      - dynamodb
+      - ec2
+      - ecs
+      - eks
+      - elasticache
+      - lambda
+      - msk
+      - rds
+      - s3sync
+      - sns
+      - sqs
+      type: string
     CloudintegrationtypesServiceMetadata:
       properties:
         enabled:
@@ -783,6 +893,13 @@ components:
         metrics:
           type: boolean
       type: object
+    CloudintegrationtypesTelemetryCollectionStrategy:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
+      required:
+      - aws
+      type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
@@ -3081,7 +3198,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
       responses:
         "200":
           content:
@@ -3089,7 +3206,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
                   status:
                     type: string
                 required:
@@ -3190,7 +3307,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CloudintegrationtypesConnectionArtifactRequest'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAccount'
       responses:
         "200":
           content:
@@ -3198,7 +3315,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithArtifact'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAccountWithConnectionArtifact'
                   status:
                     type: string
                 required:
@@ -3394,6 +3511,61 @@ paths:
       summary: Update account
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
+    put:
+      deprecated: false
+      description: This endpoint updates a service for the specified cloud provider
+      operationId: UpdateService
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: service_id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
+      responses:
+        "204":
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Update service
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/check_in:
     post:
       deprecated: false
@@ -3409,7 +3581,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckInRequest'
+              $ref: '#/components/schemas/CloudintegrationtypesPostableAgentCheckIn'
       responses:
         "200":
           content:
@@ -3417,7 +3589,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckInResponse'
+                    $ref: '#/components/schemas/CloudintegrationtypesGettableAgentCheckIn'
                   status:
                     type: string
                 required:
@@ -3451,6 +3623,59 @@ paths:
       summary: Agent check-in
       tags:
       - cloudintegration
+  /api/v1/cloud_integrations/{cloud_provider}/credentials:
+    get:
+      deprecated: false
+      description: This endpoint retrieves the connection credentials required for
+        integration
+      operationId: GetConnectionCredentials
+      parameters:
+      - in: path
+        name: cloud_provider
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/CloudintegrationtypesCredentials'
+                  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
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get connection credentials
+      tags:
+      - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/services:
     get:
       deprecated: false
@@ -3561,55 +3786,6 @@ paths:
       summary: Get service
       tags:
       - cloudintegration
-    put:
-      deprecated: false
-      description: This endpoint updates a service for the specified cloud provider
-      operationId: UpdateService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CloudintegrationtypesUpdatableService'
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Update service
-      tags:
-      - cloudintegration
   /api/v1/complete/google:
     get:
       deprecated: false

ee/query-service/app/server.go

@@ -227,7 +227,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Default,
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
-	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, nil).Wrap)
+	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
 	r.Use(middleware.NewComment().Wrap)
 
 	apiHandler.RegisterRoutes(r, am)

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

@@ -12,6 +12,7 @@ const config: Config.InitialOptions = {
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
 		'\\.(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',
@@ -41,7 +42,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

@@ -47,14 +47,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",
@@ -62,11 +61,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",

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

@@ -24,8 +24,8 @@ import type {
 	AgentCheckInDeprecated200,
 	AgentCheckInDeprecatedPathParameters,
 	AgentCheckInPathParameters,
-	CloudintegrationtypesConnectionArtifactRequestDTO,
-	CloudintegrationtypesPostableAgentCheckInRequestDTO,
+	CloudintegrationtypesPostableAccountDTO,
+	CloudintegrationtypesPostableAgentCheckInDTO,
 	CloudintegrationtypesUpdatableAccountDTO,
 	CloudintegrationtypesUpdatableServiceDTO,
 	CreateAccount200,
@@ -33,6 +33,8 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetConnectionCredentials200,
+	GetConnectionCredentialsPathParameters,
 	GetService200,
 	GetServicePathParameters,
 	ListAccounts200,
@@ -51,14 +53,14 @@ import type {
  */
 export const agentCheckInDeprecated = (
 	{ cloudProvider }: AgentCheckInDeprecatedPathParameters,
-	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
+	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckInDeprecated200>({
 		url: `/api/v1/cloud-integrations/${cloudProvider}/agent-check-in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
+		data: cloudintegrationtypesPostableAgentCheckInDTO,
 		signal,
 	});
 };
@@ -72,7 +74,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -81,7 +83,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -98,7 +100,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckInDeprecated>>,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -112,7 +114,7 @@ export const getAgentCheckInDeprecatedMutationOptions = <
 export type AgentCheckInDeprecatedMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckInDeprecated>>
 >;
-export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+export type AgentCheckInDeprecatedMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 export type AgentCheckInDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -128,7 +130,7 @@ export const useAgentCheckInDeprecated = <
 		TError,
 		{
 			pathParams: AgentCheckInDeprecatedPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -137,7 +139,7 @@ export const useAgentCheckInDeprecated = <
 	TError,
 	{
 		pathParams: AgentCheckInDeprecatedPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -255,14 +257,14 @@ export const invalidateListAccounts = async (
  */
 export const createAccount = (
 	{ cloudProvider }: CreateAccountPathParameters,
-	cloudintegrationtypesConnectionArtifactRequestDTO: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>,
+	cloudintegrationtypesPostableAccountDTO: BodyType<CloudintegrationtypesPostableAccountDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateAccount200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesConnectionArtifactRequestDTO,
+		data: cloudintegrationtypesPostableAccountDTO,
 		signal,
 	});
 };
@@ -276,7 +278,7 @@ export const getCreateAccountMutationOptions = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 		},
 		TContext
 	>;
@@ -285,7 +287,7 @@ export const getCreateAccountMutationOptions = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 	},
 	TContext
 > => {
@@ -302,7 +304,7 @@ export const getCreateAccountMutationOptions = <
 		Awaited<ReturnType<typeof createAccount>>,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -316,7 +318,7 @@ export const getCreateAccountMutationOptions = <
 export type CreateAccountMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createAccount>>
 >;
-export type CreateAccountMutationBody = BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+export type CreateAccountMutationBody = BodyType<CloudintegrationtypesPostableAccountDTO>;
 export type CreateAccountMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -331,7 +333,7 @@ export const useCreateAccount = <
 		TError,
 		{
 			pathParams: CreateAccountPathParameters;
-			data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 		},
 		TContext
 	>;
@@ -340,7 +342,7 @@ export const useCreateAccount = <
 	TError,
 	{
 		pathParams: CreateAccountPathParameters;
-		data: BodyType<CloudintegrationtypesConnectionArtifactRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAccountDTO>;
 	},
 	TContext
 > => {
@@ -628,20 +630,117 @@ export const useUpdateAccount = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint updates a service for the specified cloud provider
+ * @summary Update service
+ */
+export const updateService = (
+	{ cloudProvider, id, serviceId }: UpdateServicePathParameters,
+	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: cloudintegrationtypesUpdatableServiceDTO,
+	});
+};
+
+export const getUpdateServiceMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateService'];
+	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 updateService>>,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateService(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateServiceMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateService>>
+>;
+export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update service
+ */
+export const useUpdateService = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateService>>,
+		TError,
+		{
+			pathParams: UpdateServicePathParameters;
+			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateService>>,
+	TError,
+	{
+		pathParams: UpdateServicePathParameters;
+		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateServiceMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * This endpoint is called by the deployed agent to check in
  * @summary Agent check-in
  */
 export const agentCheckIn = (
 	{ cloudProvider }: AgentCheckInPathParameters,
-	cloudintegrationtypesPostableAgentCheckInRequestDTO: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>,
+	cloudintegrationtypesPostableAgentCheckInDTO: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<AgentCheckIn200>({
 		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/check_in`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesPostableAgentCheckInRequestDTO,
+		data: cloudintegrationtypesPostableAgentCheckInDTO,
 		signal,
 	});
 };
@@ -655,7 +754,7 @@ export const getAgentCheckInMutationOptions = <
 		TError,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -664,7 +763,7 @@ export const getAgentCheckInMutationOptions = <
 	TError,
 	{
 		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -681,7 +780,7 @@ export const getAgentCheckInMutationOptions = <
 		Awaited<ReturnType<typeof agentCheckIn>>,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -695,7 +794,7 @@ export const getAgentCheckInMutationOptions = <
 export type AgentCheckInMutationResult = NonNullable<
 	Awaited<ReturnType<typeof agentCheckIn>>
 >;
-export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+export type AgentCheckInMutationBody = BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 export type AgentCheckInMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -710,7 +809,7 @@ export const useAgentCheckIn = <
 		TError,
 		{
 			pathParams: AgentCheckInPathParameters;
-			data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+			data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 		},
 		TContext
 	>;
@@ -719,7 +818,7 @@ export const useAgentCheckIn = <
 	TError,
 	{
 		pathParams: AgentCheckInPathParameters;
-		data: BodyType<CloudintegrationtypesPostableAgentCheckInRequestDTO>;
+		data: BodyType<CloudintegrationtypesPostableAgentCheckInDTO>;
 	},
 	TContext
 > => {
@@ -727,6 +826,114 @@ export const useAgentCheckIn = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint retrieves the connection credentials required for integration
+ * @summary Get connection credentials
+ */
+export const getConnectionCredentials = (
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetConnectionCredentials200>({
+		url: `/api/v1/cloud_integrations/${cloudProvider}/credentials`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetConnectionCredentialsQueryKey = ({
+	cloudProvider,
+}: GetConnectionCredentialsPathParameters) => {
+	return [`/api/v1/cloud_integrations/${cloudProvider}/credentials`] as const;
+};
+
+export const getGetConnectionCredentialsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getConnectionCredentials>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetConnectionCredentialsQueryKey({ cloudProvider });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getConnectionCredentials>>
+	> = ({ signal }) => getConnectionCredentials({ cloudProvider }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!cloudProvider,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getConnectionCredentials>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetConnectionCredentialsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getConnectionCredentials>>
+>;
+export type GetConnectionCredentialsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get connection credentials
+ */
+
+export function useGetConnectionCredentials<
+	TData = Awaited<ReturnType<typeof getConnectionCredentials>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getConnectionCredentials>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetConnectionCredentialsQueryOptions(
+		{ cloudProvider },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get connection credentials
+ */
+export const invalidateGetConnectionCredentials = async (
+	queryClient: QueryClient,
+	{ cloudProvider }: GetConnectionCredentialsPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetConnectionCredentialsQueryKey({ cloudProvider }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint lists the services metadata for the specified cloud provider
  * @summary List services metadata
@@ -941,101 +1148,3 @@ export const invalidateGetService = async (
 
 	return queryClient;
 };
-
-/**
- * This endpoint updates a service for the specified cloud provider
- * @summary Update service
- */
-export const updateService = (
-	{ cloudProvider, serviceId }: UpdateServicePathParameters,
-	cloudintegrationtypesUpdatableServiceDTO: BodyType<CloudintegrationtypesUpdatableServiceDTO>,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/services/${serviceId}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: cloudintegrationtypesUpdatableServiceDTO,
-	});
-};
-
-export const getUpdateServiceMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateService'];
-	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 updateService>>,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateService(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateServiceMutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateService>>
->;
-export type UpdateServiceMutationBody = BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-export type UpdateServiceMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update service
- */
-export const useUpdateService = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateService>>,
-		TError,
-		{
-			pathParams: UpdateServicePathParameters;
-			data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateService>>,
-	TError,
-	{
-		pathParams: UpdateServicePathParameters;
-		data: BodyType<CloudintegrationtypesUpdatableServiceDTO>;
-	},
-	TContext
-> => {
-	const mutationOptions = getUpdateServiceMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

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

@@ -512,27 +512,58 @@ export interface CloudintegrationtypesAWSAccountConfigDTO {
 	regions: string[];
 }
 
-export type CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets = {
-	[key: string]: string[];
-};
-
-export interface CloudintegrationtypesAWSCollectionStrategyDTO {
-	aws_logs?: CloudintegrationtypesAWSLogsStrategyDTO;
-	aws_metrics?: CloudintegrationtypesAWSMetricsStrategyDTO;
+export interface CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO {
 	/**
-	 * @type object
+	 * @type string
 	 */
-	s3_buckets?: CloudintegrationtypesAWSCollectionStrategyDTOS3Buckets;
+	filterPattern: string;
+	/**
+	 * @type string
+	 */
+	logGroupNamePrefix: string;
+}
+
+export interface CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO {
+	/**
+	 * @type array
+	 */
+	metricNames?: string[];
+	/**
+	 * @type string
+	 */
+	namespace: string;
 }
 
 export interface CloudintegrationtypesAWSConnectionArtifactDTO {
 	/**
 	 * @type string
 	 */
-	connectionURL: string;
+	connectionUrl: string;
 }
 
-export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
+export interface CloudintegrationtypesAWSIntegrationConfigDTO {
+	/**
+	 * @type array
+	 */
+	enabledRegions: string[];
+	telemetryCollectionStrategy: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+}
+
+export interface CloudintegrationtypesAWSLogsCollectionStrategyDTO {
+	/**
+	 * @type array
+	 */
+	subscriptions: CloudintegrationtypesAWSCloudWatchLogsSubscriptionDTO[];
+}
+
+export interface CloudintegrationtypesAWSMetricsCollectionStrategyDTO {
+	/**
+	 * @type array
+	 */
+	streamFilters: CloudintegrationtypesAWSCloudWatchMetricStreamFilterDTO[];
+}
+
+export interface CloudintegrationtypesAWSPostableAccountConfigDTO {
 	/**
 	 * @type string
 	 */
@@ -543,56 +574,6 @@ export interface CloudintegrationtypesAWSConnectionArtifactRequestDTO {
 	regions: string[];
 }
 
-export interface CloudintegrationtypesAWSIntegrationConfigDTO {
-	/**
-	 * @type array
-	 */
-	enabledRegions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
-}
-
-export type CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
-	/**
-	 * @type string
-	 */
-	filter_pattern?: string;
-	/**
-	 * @type string
-	 */
-	log_group_name_prefix?: string;
-};
-
-export interface CloudintegrationtypesAWSLogsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_logs_subscriptions?:
-		| CloudintegrationtypesAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
-		| null;
-}
-
-export type CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
-	/**
-	 * @type array
-	 */
-	MetricNames?: string[];
-	/**
-	 * @type string
-	 */
-	Namespace?: string;
-};
-
-export interface CloudintegrationtypesAWSMetricsStrategyDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	cloudwatch_metric_stream_filters?:
-		| CloudintegrationtypesAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
-		| null;
-}
-
 export interface CloudintegrationtypesAWSServiceConfigDTO {
 	logs?: CloudintegrationtypesAWSServiceLogsConfigDTO;
 	metrics?: CloudintegrationtypesAWSServiceMetricsConfigDTO;
@@ -610,7 +591,7 @@ export interface CloudintegrationtypesAWSServiceLogsConfigDTO {
 	/**
 	 * @type object
 	 */
-	s3_buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
+	s3Buckets?: CloudintegrationtypesAWSServiceLogsConfigDTOS3Buckets;
 }
 
 export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
@@ -620,6 +601,19 @@ export interface CloudintegrationtypesAWSServiceMetricsConfigDTO {
 	enabled?: boolean;
 }
 
+export type CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};
+
+export interface CloudintegrationtypesAWSTelemetryCollectionStrategyDTO {
+	logs?: CloudintegrationtypesAWSLogsCollectionStrategyDTO;
+	metrics?: CloudintegrationtypesAWSMetricsCollectionStrategyDTO;
+	/**
+	 * @type object
+	 */
+	s3Buckets?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTOS3Buckets;
+}
+
 export interface CloudintegrationtypesAccountDTO {
 	agentReport: CloudintegrationtypesAgentReportDTO;
 	config: CloudintegrationtypesAccountConfigDTO;
@@ -693,6 +687,32 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
+/**
+ * @nullable
+ */
+export type CloudintegrationtypesCloudIntegrationServiceDTO = {
+	/**
+	 * @type string
+	 */
+	cloudIntegrationId?: string;
+	config?: CloudintegrationtypesServiceConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	id: string;
+	type?: CloudintegrationtypesServiceIDDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+} | null;
+
 export interface CloudintegrationtypesCollectedLogAttributeDTO {
 	/**
 	 * @type string
@@ -727,16 +747,27 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 	unit?: string;
 }
 
-export interface CloudintegrationtypesCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSCollectionStrategyDTO;
-}
-
 export interface CloudintegrationtypesConnectionArtifactDTO {
 	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
 }
 
-export interface CloudintegrationtypesConnectionArtifactRequestDTO {
-	aws: CloudintegrationtypesAWSConnectionArtifactRequestDTO;
+export interface CloudintegrationtypesCredentialsDTO {
+	/**
+	 * @type string
+	 */
+	ingestionKey: string;
+	/**
+	 * @type string
+	 */
+	ingestionUrl: string;
+	/**
+	 * @type string
+	 */
+	sigNozApiKey: string;
+	/**
+	 * @type string
+	 */
+	sigNozApiUrl: string;
 }
 
 export interface CloudintegrationtypesDashboardDTO {
@@ -768,7 +799,7 @@ export interface CloudintegrationtypesDataCollectedDTO {
 	metrics?: CloudintegrationtypesCollectedMetricDTO[] | null;
 }
 
-export interface CloudintegrationtypesGettableAccountWithArtifactDTO {
+export interface CloudintegrationtypesGettableAccountWithConnectionArtifactDTO {
 	connectionArtifact: CloudintegrationtypesConnectionArtifactDTO;
 	/**
 	 * @type string
@@ -783,7 +814,7 @@ export interface CloudintegrationtypesGettableAccountsDTO {
 	accounts: CloudintegrationtypesAccountDTO[];
 }
 
-export interface CloudintegrationtypesGettableAgentCheckInResponseDTO {
+export interface CloudintegrationtypesGettableAgentCheckInDTO {
 	/**
 	 * @type string
 	 */
@@ -831,17 +862,85 @@ export type CloudintegrationtypesIntegrationConfigDTO = {
 	 * @type array
 	 */
 	enabled_regions: string[];
-	telemetry: CloudintegrationtypesAWSCollectionStrategyDTO;
+	telemetry: CloudintegrationtypesOldAWSCollectionStrategyDTO;
 } | null;
 
+export type CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets = {
+	[key: string]: string[];
+};
+
+export interface CloudintegrationtypesOldAWSCollectionStrategyDTO {
+	aws_logs?: CloudintegrationtypesOldAWSLogsStrategyDTO;
+	aws_metrics?: CloudintegrationtypesOldAWSMetricsStrategyDTO;
+	/**
+	 * @type string
+	 */
+	provider?: string;
+	/**
+	 * @type object
+	 */
+	s3_buckets?: CloudintegrationtypesOldAWSCollectionStrategyDTOS3Buckets;
+}
+
+export type CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem = {
+	/**
+	 * @type string
+	 */
+	filter_pattern?: string;
+	/**
+	 * @type string
+	 */
+	log_group_name_prefix?: string;
+};
+
+export interface CloudintegrationtypesOldAWSLogsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_logs_subscriptions?:
+		| CloudintegrationtypesOldAWSLogsStrategyDTOCloudwatchLogsSubscriptionsItem[]
+		| null;
+}
+
+export type CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem = {
+	/**
+	 * @type array
+	 */
+	MetricNames?: string[];
+	/**
+	 * @type string
+	 */
+	Namespace?: string;
+};
+
+export interface CloudintegrationtypesOldAWSMetricsStrategyDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	cloudwatch_metric_stream_filters?:
+		| CloudintegrationtypesOldAWSMetricsStrategyDTOCloudwatchMetricStreamFiltersItem[]
+		| null;
+}
+
+export interface CloudintegrationtypesPostableAccountDTO {
+	config: CloudintegrationtypesPostableAccountConfigDTO;
+	credentials: CloudintegrationtypesCredentialsDTO;
+}
+
+export interface CloudintegrationtypesPostableAccountConfigDTO {
+	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
+}
+
 /**
  * @nullable
  */
-export type CloudintegrationtypesPostableAgentCheckInRequestDTOData = {
+export type CloudintegrationtypesPostableAgentCheckInDTOData = {
 	[key: string]: unknown;
 } | null;
 
-export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
+export interface CloudintegrationtypesPostableAgentCheckInDTO {
 	/**
 	 * @type string
 	 */
@@ -858,7 +957,7 @@ export interface CloudintegrationtypesPostableAgentCheckInRequestDTO {
 	 * @type object
 	 * @nullable true
 	 */
-	data: CloudintegrationtypesPostableAgentCheckInRequestDTOData;
+	data: CloudintegrationtypesPostableAgentCheckInDTOData;
 	/**
 	 * @type string
 	 */
@@ -871,6 +970,7 @@ export interface CloudintegrationtypesProviderIntegrationConfigDTO {
 
 export interface CloudintegrationtypesServiceDTO {
 	assets: CloudintegrationtypesAssetsDTO;
+	cloudIntegrationService: CloudintegrationtypesCloudIntegrationServiceDTO;
 	dataCollected: CloudintegrationtypesDataCollectedDTO;
 	/**
 	 * @type string
@@ -884,9 +984,8 @@ export interface CloudintegrationtypesServiceDTO {
 	 * @type string
 	 */
 	overview: string;
-	serviceConfig?: CloudintegrationtypesServiceConfigDTO;
-	supported_signals: CloudintegrationtypesSupportedSignalsDTO;
-	telemetryCollectionStrategy: CloudintegrationtypesCollectionStrategyDTO;
+	supportedSignals: CloudintegrationtypesSupportedSignalsDTO;
+	telemetryCollectionStrategy: CloudintegrationtypesTelemetryCollectionStrategyDTO;
 	/**
 	 * @type string
 	 */
@@ -897,6 +996,21 @@ export interface CloudintegrationtypesServiceConfigDTO {
 	aws: CloudintegrationtypesAWSServiceConfigDTO;
 }
 
+export enum CloudintegrationtypesServiceIDDTO {
+	alb = 'alb',
+	'api-gateway' = 'api-gateway',
+	dynamodb = 'dynamodb',
+	ec2 = 'ec2',
+	ecs = 'ecs',
+	eks = 'eks',
+	elasticache = 'elasticache',
+	lambda = 'lambda',
+	msk = 'msk',
+	rds = 'rds',
+	s3sync = 's3sync',
+	sns = 'sns',
+	sqs = 'sqs',
+}
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
 	 * @type boolean
@@ -927,6 +1041,10 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 	metrics?: boolean;
 }
 
+export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
+	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+}
+
 export interface CloudintegrationtypesUpdatableAccountDTO {
 	config: CloudintegrationtypesAccountConfigDTO;
 }
@@ -3450,7 +3568,7 @@ export type AgentCheckInDeprecatedPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckInDeprecated200 = {
-	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
+	data: CloudintegrationtypesGettableAgentCheckInDTO;
 	/**
 	 * @type string
 	 */
@@ -3472,7 +3590,7 @@ export type CreateAccountPathParameters = {
 	cloudProvider: string;
 };
 export type CreateAccount200 = {
-	data: CloudintegrationtypesGettableAccountWithArtifactDTO;
+	data: CloudintegrationtypesGettableAccountWithConnectionArtifactDTO;
 	/**
 	 * @type string
 	 */
@@ -3499,11 +3617,27 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: string;
 };
+export type UpdateServicePathParameters = {
+	cloudProvider: string;
+	id: string;
+	serviceId: string;
+};
 export type AgentCheckInPathParameters = {
 	cloudProvider: string;
 };
 export type AgentCheckIn200 = {
-	data: CloudintegrationtypesGettableAgentCheckInResponseDTO;
+	data: CloudintegrationtypesGettableAgentCheckInDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetConnectionCredentialsPathParameters = {
+	cloudProvider: string;
+};
+export type GetConnectionCredentials200 = {
+	data: CloudintegrationtypesCredentialsDTO;
 	/**
 	 * @type string
 	 */
@@ -3533,10 +3667,6 @@ export type GetService200 = {
 	status: string;
 };
 
-export type UpdateServicePathParameters = {
-	cloudProvider: string;
-	serviceId: string;
-};
 export type CreateSessionByGoogleCallback303 = {
 	data: AuthtypesGettableTokenDTO;
 	/**

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,11 +1,10 @@
 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';

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getResetPasswordToken,
@@ -62,7 +62,8 @@ 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(),

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/__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);

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -3,8 +3,8 @@ import { useQueryClient } from 'react-query';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
+import { toast } from '@signozhq/ui';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.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 AddKeyModal from '../AddKeyModal';
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -6,7 +6,8 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditKeyModal from '../EditKeyModal';
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -6,7 +6,8 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import KeysTab from '../KeysTab';
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

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

@@ -16,7 +16,8 @@ jest.mock('@signozhq/drawer', () => ({
 	}): JSX.Element | null => (open ? <div>{content}</div> : null),
 }));
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -47,11 +47,15 @@
 		}
 
 		> tr.sa-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;
 		}
 	}
 
@@ -151,7 +155,7 @@
 
 		strong {
 			font-weight: var(--font-weight-medium);
-			color: var(--bg-base-white);
+			color: var(--l1-foreground);
 		}
 	}
 }
@@ -180,7 +184,7 @@
 
 .sa-tooltip {
 	.ant-tooltip-inner {
-		background-color: var(--bg-slate-500);
+		background-color: var(--l1-border);
 		color: var(--foreground);
 		font-size: var(--font-size-xs);
 		line-height: normal;
@@ -190,7 +194,7 @@
 	}
 
 	.ant-tooltip-arrow-content {
-		background-color: var(--bg-slate-500);
+		background-color: var(--l1-border);
 	}
 }
 
@@ -206,12 +210,4 @@
 			}
 		}
 	}
-
-	.sa-empty-state {
-		&__text {
-			strong {
-				color: var(--bg-base-black);
-			}
-		}
-	}
 }

frontend/src/components/ServiceAccountsTable/utils.tsx

@@ -1,5 +1,5 @@
-import { Badge } from '@signozhq/badge';
 import { ScanSearch } from '@signozhq/icons';
+import { Badge } from '@signozhq/ui';
 import { Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';