docs(go): swap remaining examples to AuthDomain/Channel where possible

Document the core-type-first pattern used across pkg/types/: always define
the domain type X, and introduce Postable/Gettable/Updatable/Storable
flavors only when their shape actually differs from X. Walk through
Channel (core only), AuthDomain (all four flavors), and Rule (the
in-progress v2 split) as worked examples.

cmd/community/server.go

@@ -7,6 +7,7 @@ import (
 	"github.com/spf13/cobra"
 
 	"github.com/SigNoz/signoz/cmd"
+	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authn"
@@ -14,6 +15,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/authz/openfgaauthz"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaschema"
 	"github.com/SigNoz/signoz/pkg/authz/openfgaserver"
+	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/gateway"
@@ -26,14 +28,20 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
+	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/ruler"
+	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/SigNoz/signoz/pkg/zeus/noopzeus"
@@ -75,7 +83,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
+		signoz.NewWebProviderFactories(config.Global),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			return signoz.NewSQLSchemaProviderFactories(sqlstore)
 		},
@@ -107,6 +115,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ sqlstore.SQLStore, _ global.Global, _ zeus.Zeus, _ gateway.Gateway, _ licensing.Licensing, _ serviceaccount.Module, _ cloudintegration.Config) (cloudintegration.Module, error) {
 			return implcloudintegration.NewModule(), nil
 		},
+		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
+			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, nil, nil))
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", errors.Attr(err))

cmd/enterprise/server.go

@@ -22,14 +22,17 @@ import (
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
 	eequerier "github.com/SigNoz/signoz/ee/querier"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
+	eerules "github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	enterprisezeus "github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
+	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"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/cache"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/gateway"
@@ -40,15 +43,21 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
+	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
+	"github.com/SigNoz/signoz/pkg/ruler"
+	"github.com/SigNoz/signoz/pkg/ruler/signozruler"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
@@ -96,7 +105,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		},
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
-		signoz.NewWebProviderFactories(),
+		signoz.NewWebProviderFactories(config.Global),
 		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
 			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
 			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {
@@ -166,6 +175,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return implcloudintegration.NewModule(pkgcloudintegration.NewStore(sqlStore), global, zeus, gateway, licensing, serviceAccount, cloudProvidersMap, config)
 		},
+		func(c cache.Cache, am alertmanager.Alertmanager, ss sqlstore.SQLStore, ts telemetrystore.TelemetryStore, ms telemetrytypes.MetadataStore, p prometheus.Prometheus, og organization.Getter, rsh rulestatehistory.Module, q querier.Querier, qp queryparser.QueryParser) factory.NamedMap[factory.ProviderFactory[ruler.Ruler, ruler.Config]] {
+			return factory.MustNewNamedMap(signozruler.NewFactory(c, am, ss, ts, ms, p, og, rsh, q, qp, eerules.PrepareTaskFunc, eerules.TestNotification))
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", errors.Attr(err))

conf/example.yaml

@@ -6,6 +6,8 @@
 ##################### Global #####################
 global:
   # the url under which the signoz apiserver is externally reachable.
+  # the path component (e.g. /signoz in https://example.com/signoz) is used
+  # as the base path for all HTTP routes (both API and web frontend).
   external_url: <unset>
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
@@ -50,8 +52,8 @@ pprof:
 web:
   # Whether to enable the web frontend
   enabled: true
-  # The prefix to serve web on
-  prefix: /
+  # The index file to use as the SPA entrypoint.
+  index: index.html
   # The directory containing the static build files.
   directory: /etc/signoz/web
 

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.118.0
+    image: signoz/signoz:v0.119.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.118.0
+    image: signoz/signoz:v0.119.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.118.0}
+    image: signoz/signoz:${VERSION:-v0.119.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.118.0}
+    image: signoz/signoz:${VERSION:-v0.119.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/contributing/go/readme.md

@@ -20,3 +20,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
+- [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/go/types.md

@@ -0,0 +1,152 @@
+# Types
+
+Domain types in `pkg/types/<domain>/` live on three serialization boundaries — inbound HTTP, outbound HTTP, and SQL — on top of an in-memory domain representation. SigNoz's convention is **core-type-first**: every domain defines a single canonical type `X`, and specialized flavors (`PostableX`, `GettableX`, `UpdatableX`, `StorableX`) are introduced **only when they actually differ from `X`**. This guide spells out when each flavor is warranted and how they relate to each other.
+
+Before reading, make sure you have read [abstractions.md](abstractions.md) — the rules here build on its guidance that every new type must earn its place.
+
+## The core type is required
+
+Every domain package in `pkg/types/<domain>/` defines exactly one core type `X`: `AuthDomain`, `Channel`, `Rule`, `Dashboard`, `Role`, `PlannedMaintenance`. This is the canonical in-memory representation of the domain object. Domain methods, validation invariants, and business logic hang off `X` — not off the flavor types.
+
+Two rules shape how the core type behaves:
+
+- **Conversions can be either `New<Output>From<Input>` or a receiver-style `(x *X) ToY()` method.** Either form is fine; pick whichever reads best at the call site:
+
+    ```go
+    // Constructor form
+    func NewGettableAuthDomainFromAuthDomain(d *AuthDomain, info *AuthNProviderInfo) *GettableAuthDomain
+
+    // Receiver form
+    func (m *PlannedMaintenanceWithRules) ToPlannedMaintenance() *PlannedMaintenance
+    ```
+- **`X` can double as the storage row** when the DB shape would be identical. `Channel` embeds `bun.BaseModel` directly, and there is no `StorableChannel`. This is the preferred shape when it works.
+
+Domain packages under `pkg/types/` must not import from other `pkg/` packages. Keep the core type's methods lightweight and push orchestration out to the module layer.
+
+## Add a flavor only when it differs
+
+For each of the four flavors, create it only if its shape diverges from `X`. If a flavor would have the same fields and tags as `X`, reuse `X` directly, or declare a type alias. Every flavor must earn its place per [abstractions.md](abstractions.md) rule 6 ("Wrappers must add semantics, not just rename").
+
+| Flavor       | Create it when it differs in…                                                                                                                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PostableX`  | JSON shape differs from `X` — typically no `Id`, no audit fields, no server-computed fields. Often owns input validation via `Validate()` or a custom `UnmarshalJSON`.                                                            |
+| `GettableX`  | Response shape adds server-computed fields that are not persisted — e.g., `GettableAuthDomain` adds `AuthNProviderInfo`, which is resolved at read time.                                                                          |
+| `UpdatableX` | Only a strict subset of `PostableX` is replaceable on PUT. If the updatable shape equals `PostableX`, reuse `PostableX`.                                                                                                          |
+| `StorableX`  | DB row shape differs from `X` — usually `X` carries nested typed config while `StorableX` carries a flat `Data string` JSON column, plus bun tags, audit mixins, and an `OrgID`. If `X` already has those, skip the flavor.       |
+
+The failure mode this rule exists to prevent: minting all four flavors on reflex for every new resource, even when two or three are structurally identical. Each unnecessary flavor is another type contributors must understand and another conversion that can drift.
+
+## Worked examples
+
+### Channel — core type only
+
+```go
+type Channels         = []*Channel
+type GettableChannels = []*Channel
+
+type Channel struct {
+    bun.BaseModel `bun:"table:notification_channel"`
+    types.Identifiable
+    types.TimeAuditable
+    Name  string `json:"name"  required:"true" bun:"name"`
+    Type  string `json:"type"  required:"true" bun:"type"`
+    Data  string `json:"data"  required:"true" bun:"data"`
+    OrgID string `json:"orgId" required:"true" bun:"org_id"`
+}
+```
+
+`Channel` is both the domain type and the bun row. `GettableChannels` is a **type alias** because `*Channel` already serializes correctly as a response. There is no `StorableChannel`, `PostableChannel`, or `UpdatableChannel` — those would be identical to `Channel` and so do not exist. Prefer this shape when it works.
+
+### AuthDomain — all four flavors
+
+```go
+type AuthDomain struct {
+    storableAuthDomain *StorableAuthDomain
+    authDomainConfig   *AuthDomainConfig
+}
+
+type StorableAuthDomain struct {
+    bun.BaseModel `bun:"table:auth_domain"`
+    types.Identifiable
+    Name  string      `bun:"name"`
+    Data  string      `bun:"data"`  // AuthDomainConfig serialized as JSON
+    OrgID valuer.UUID `bun:"org_id"`
+    types.TimeAuditable
+}
+
+type PostableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"`
+    Name   string           `json:"name"`
+}
+
+type UpdateableAuthDomain struct {
+    Config AuthDomainConfig `json:"config"` // Name intentionally absent
+}
+
+type GettableAuthDomain struct {
+    *StorableAuthDomain
+    *AuthDomainConfig
+    AuthNProviderInfo *AuthNProviderInfo `json:"authNProviderInfo"`
+}
+```
+
+Each flavor exists for a concrete reason:
+
+- `StorableAuthDomain` stores the typed config as an opaque `Data string` column, so the schema does not need to migrate every time a config field is added.
+- `PostableAuthDomain` carries the config as a structured object (not a string) for the request.
+- `UpdateableAuthDomain` excludes `Name` because a domain's name cannot change after creation.
+- `GettableAuthDomain` adds `AuthNProviderInfo`, which is derived at read time and never persisted.
+
+The core `AuthDomain` holds the two live halves — `storableAuthDomain` and `authDomainConfig` — and owns business methods such as `Update(config)`. Conversions use the `New<Output>From<Input>` form: `NewAuthDomainFromConfig`, `NewAuthDomainFromStorableAuthDomain`, `NewGettableAuthDomainFromAuthDomain`.
+
+## Conventions that tie the flavors together
+
+- **Conversions** use either a `New<Output>From<Input>` constructor — e.g. `NewChannelFromReceiver`, `NewGettableAuthDomainFromAuthDomain` — or a receiver-style `ToY()` method. Both forms coexist in the codebase; use whichever fits the call site.
+- **Validation belongs on the core type `X`.** Putting it on `X` means every write path — HTTP create, HTTP update, in-process migration, replay — runs the same checks. `Validate()` on `PostableX` is reserved for checks that are specific to the request shape and do not apply to `X`. `UnmarshalJSON` on `PostableX` is a separate tool that lives there because decoding only happens at the HTTP boundary — `PostableAuthDomain.UnmarshalJSON` rejecting a malformed domain name at decode time is the canonical example.
+
+    ```go
+    // Domain invariants: every write path re-runs these.
+    func (x *X) Validate() error { ... }
+
+    // Request-shape-only: checks that do not apply once the value is persisted.
+    func (p *PostableX) Validate() error { ... }
+    ```
+- **Type aliases, not wrappers**, when two shapes are identical. `type GettableChannels = []*Channel` is correct because it adds no semantics beyond the underlying type.
+- **Serialization tags** follow [handler.md](handler.md): `required:"true"` means the JSON key must be present, `nullable:"true"` is required on any slice or map that may serialize as `null`, and types with a fixed value set must implement `Enum() []any`.
+
+## A note on `UpdatableX` and `PatchableX`
+
+- `UpdatableX` — the body for PUT (full replace) when the shape is a strict subset of `PostableX`. If the updatable shape equals `PostableX`, reuse `PostableX`.
+- `PatchableX` — the body for PATCH (partial update); only the fields a client is allowed to patch. For example, `PatchableRole` carries a single `Description` field even though `Role` has many — clients may patch the description but not anything else.
+
+    ```go
+    type PatchableRole struct {
+        Description string `json:"description"`
+    }
+    ```
+
+Both are optional. Do not introduce them if `PostableX` already covers the case.
+
+## What to avoid
+
+- **Do not mint a flavor that mirrors the core type.** If `StorableX` would have the same fields as `X`, use `X` directly with `bun.BaseModel` embedded. `Channel` is the canonical example.
+- **Do not bolt domain methods onto `StorableX`.** Storage types are data carriers. Domain methods live on `X`.
+- **Do not invent new suffixes** (`Creatable`, `Fetchable`, `Savable`). The core type plus `Postable` / `Gettable` / `Updatable` / `Patchable` / `Storable` covers every case that exists today.
+- **Spelling — `Updatable`, not `Updateable`.** `Updateable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
+- **Spelling — `Storable`, not `Storeable`.** `Storeable` is a common typo. Prefer the shorter form when introducing new types, and rename any stragglers you come across.
+
+## What should I remember?
+
+- Every domain package defines the core type `X`. Only `X` is mandatory.
+- Add `PostableX` / `GettableX` / `UpdatableX` / `StorableX` one at a time, only when the shape actually diverges from `X`.
+- Domain logic lives on `X`, not on the flavor types.
+- Conversions can be a `New<Output>From<Input>` constructor or a receiver-style `ToY()` method — pick whichever reads best at the call site.
+- Use a type alias when two shapes are truly identical.
+- `pkg/types/<domain>/` must not import from other `pkg/` packages.
+
+## Further reading
+
+- [abstractions.md](abstractions.md) — when to introduce a new type at all.
+- [handler.md](handler.md) — struct tag rules at the HTTP boundary.
+- [packages.md](packages.md) — where types live under `pkg/types/`.
+- [sql.md](sql.md) — star-schema requirements for `StorableX`.

docs/contributing/onboarding.md

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

ee/query-service/app/api/api.go

@@ -6,7 +6,6 @@ import (
 
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
-	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -15,7 +14,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
-	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/version"
@@ -24,7 +22,6 @@ import (
 
 type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
-	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
 	CloudIntegrationsController   *cloudintegrations.Controller
@@ -44,12 +41,10 @@ type APIHandler struct {
 func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
-		RuleManager:                   opts.RulesManager,
 		IntegrationsController:        opts.IntegrationsController,
 		CloudIntegrationsController:   opts.CloudIntegrationsController,
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		FluxInterval:                  opts.FluxInterval,
-		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
@@ -66,10 +61,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 	return ah, nil
 }
 
-func (ah *APIHandler) RM() *rules.Manager {
-	return ah.opts.RulesManager
-}
-
 func (ah *APIHandler) UM() *usage.Manager {
 	return ah.opts.UsageManager
 }

ee/query-service/app/server.go

@@ -12,10 +12,6 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/cache/memorycache"
 	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/queryparser"
-	"github.com/SigNoz/signoz/pkg/ruler/rulestore/sqlrulestore"
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 
 	"github.com/gorilla/handlers"
 
@@ -23,18 +19,10 @@ import (
 	"github.com/soheilhy/cmux"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
-	"github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
-	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
-	"github.com/SigNoz/signoz/pkg/modules/organization"
-	"github.com/SigNoz/signoz/pkg/modules/rulestatehistory"
-	"github.com/SigNoz/signoz/pkg/prometheus"
-	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/signoz"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/web"
 
 	"log/slog"
@@ -49,7 +37,6 @@ import (
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
-	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
 )
 
@@ -57,7 +44,6 @@ import (
 type Server struct {
 	config      signoz.Config
 	signoz      *signoz.SigNoz
-	ruleManager *baserules.Manager
 
 	// public http router
 	httpConn     net.Listener
@@ -97,24 +83,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		nil,
 	)
 
-	rm, err := makeRulesManager(
-		signoz.Cache,
-		signoz.Alertmanager,
-		signoz.SQLStore,
-		signoz.TelemetryStore,
-		signoz.TelemetryMetadataStore,
-		signoz.Prometheus,
-		signoz.Modules.OrgGetter,
-		signoz.Modules.RuleStateHistory,
-		signoz.Querier,
-		signoz.Instrumentation.ToProviderSettings(),
-		signoz.QueryParser,
-	)
-
-	if err != nil {
-		return nil, err
-	}
-
 	// initiate opamp
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
@@ -163,7 +131,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	apiOpts := api.APIHandlerOptions{
 		DataConnector:                 reader,
-		RulesManager:                  rm,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
 		CloudIntegrationsController:   cloudIntegrationsController,
@@ -180,8 +147,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 
 	s := &Server{
 		config:             config,
-		signoz:             signoz,
-		ruleManager:        rm,
+		signoz:       signoz,
 		httpHostPort:       baseconst.HTTPHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
@@ -262,6 +228,20 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		return nil, err
 	}
 
+	routePrefix := s.config.Global.ExternalPath()
+	if routePrefix != "" {
+		prefixed := http.StripPrefix(routePrefix, handler)
+		handler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			switch req.URL.Path {
+			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
+				r.ServeHTTP(w, req)
+				return
+			}
+
+			prefixed.ServeHTTP(w, req)
+		})
+	}
+
 	return &http.Server{
 		Handler: handler,
 	}, nil
@@ -288,8 +268,6 @@ func (s *Server) initListeners() error {
 
 // Start listening on http and private http port concurrently
 func (s *Server) Start(ctx context.Context) error {
-	s.ruleManager.Start(ctx)
-
 	err := s.initListeners()
 	if err != nil {
 		return err
@@ -333,47 +311,9 @@ func (s *Server) Stop(ctx context.Context) error {
 
 	s.opampServer.Stop()
 
-	if s.ruleManager != nil {
-		s.ruleManager.Stop(ctx)
-	}
-
 	// stop usage manager
 	s.usageManager.Stop(ctx)
 
 	return nil
 }
 
-func makeRulesManager(cache cache.Cache, alertmanager alertmanager.Alertmanager, sqlstore sqlstore.SQLStore, telemetryStore telemetrystore.TelemetryStore, metadataStore telemetrytypes.MetadataStore, prometheus prometheus.Prometheus, orgGetter organization.Getter, ruleStateHistoryModule rulestatehistory.Module, querier querier.Querier, providerSettings factory.ProviderSettings, queryParser queryparser.QueryParser) (*baserules.Manager, error) {
-	ruleStore := sqlrulestore.NewRuleStore(sqlstore, queryParser, providerSettings)
-	maintenanceStore := sqlrulestore.NewMaintenanceStore(sqlstore)
-	// create manager opts
-	managerOpts := &baserules.ManagerOptions{
-		TelemetryStore:         telemetryStore,
-		MetadataStore:          metadataStore,
-		Prometheus:             prometheus,
-		Context:                context.Background(),
-		Querier:                querier,
-		Logger:                 providerSettings.Logger,
-		Cache:                  cache,
-		EvalDelay:              baseconst.GetEvalDelay(),
-		PrepareTaskFunc:        rules.PrepareTaskFunc,
-		PrepareTestRuleFunc:    rules.TestNotification,
-		Alertmanager:           alertmanager,
-		OrgGetter:              orgGetter,
-		RuleStore:              ruleStore,
-		MaintenanceStore:       maintenanceStore,
-		SQLStore:               sqlstore,
-		QueryParser:            queryParser,
-		RuleStateHistoryModule: ruleStateHistoryModule,
-	}
-
-	// create Manager
-	manager, err := baserules.NewManager(managerOpts)
-	if err != nil {
-		return nil, fmt.Errorf("rule manager error: %v", err)
-	}
-
-	slog.Info("rules manager is ready")
-
-	return manager, nil
-}

frontend/.eslintrc.cjs

@@ -213,23 +213,6 @@ module.exports = {
 				message:
 					'Avoid calling .getState() directly. Export a standalone action from the store instead.',
 			},
-			{
-				selector:
-					"CallExpression[callee.object.name='window'][callee.property.name='open']",
-				message:
-					'Do not call window.open() directly. ' +
-					"Use openInNewTab() from 'utils/navigation' for internal SigNoz paths. " +
-					"For intentional external URLs, use openExternalLink() from 'utils/navigation'. " +
-					'For unavoidable direct calls, add // eslint-disable-next-line with a reason.',
-			},
-			{
-				selector:
-					"AssignmentExpression[left.object.name='window'][left.property.name='href']",
-				message:
-					'Do not assign window.location.href for internal navigation. ' +
-					"Use history.push() or history.replace() from 'lib/history'. " +
-					'For external redirects (SSO, logout URLs), add // eslint-disable-next-line with a reason.',
-			},
 		],
 	},
 	overrides: [
@@ -282,14 +265,5 @@ module.exports = {
 				'no-restricted-syntax': 'off',
 			},
 		},
-		{
-			// navigation.ts and useSafeNavigate.ts are the canonical implementations that call
-			// window.open after computing a base-path-aware href. They are the only places
-			// allowed to call window.open directly.
-			files: ['src/utils/navigation.ts', 'src/hooks/useSafeNavigate.ts'],
-			rules: {
-				'no-restricted-syntax': 'off',
-			},
-		},
 	],
 };

frontend/example.env

@@ -6,6 +6,3 @@ VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"
 
 CI="1"
-
-# Uncomment to test sub-path deployment locally (e.g. app served at /signoz/).
-# VITE_BASE_PATH="/signoz/"

frontend/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<base href="<%- BASE_PATH %>" />
 		<meta charset="utf-8" />
 		<meta
 			http-equiv="Cache-Control"
@@ -60,9 +59,32 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="./favicon.ico" />
+		<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>
 
@@ -114,7 +136,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="./css/uPlot.min.css" />
+		<link rel="stylesheet" href="/css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/jest.config.ts

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

frontend/jest.setup.ts

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

frontend/package.json

@@ -48,26 +48,22 @@
     "@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/dialog": "^0.0.2",
-    "@signozhq/drawer": "0.0.4",
+    "@signozhq/button": "0.0.5",
+    "@signozhq/calendar": "0.1.1",
+    "@signozhq/callout": "0.0.4",
+    "@signozhq/checkbox": "0.0.4",
+    "@signozhq/combobox": "0.0.4",
+    "@signozhq/command": "0.0.2",
+    "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/dialog": "0.0.4",
+    "@signozhq/drawer": "0.0.6",
     "@signozhq/icons": "0.1.0",
-    "@signozhq/input": "0.0.2",
-    "@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/input": "0.0.4",
+    "@signozhq/popover": "0.1.2",
+    "@signozhq/radio-group": "0.0.4",
+    "@signozhq/resizable": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "0.0.1",
-    "@signozhq/tooltip": "0.0.2",
+    "@signozhq/toggle-group": "0.0.3",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",

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

@@ -0,0 +1,97 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	InvalidateOptions,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { useQuery } from 'react-query';
+
+import type { ErrorType } from '../../../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { GetAlerts200, RenderErrorResponseDTO } from '../sigNoz.schemas';
+
+/**
+ * This endpoint returns alerts for the organization
+ * @summary Get alerts
+ */
+export const getAlerts = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetAlerts200>({
+		url: `/api/v1/alerts`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAlertsQueryKey = () => {
+	return [`/api/v1/alerts`] as const;
+};
+
+export const getGetAlertsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAlerts>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetAlertsQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAlerts>>> = ({
+		signal,
+	}) => getAlerts(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getAlerts>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAlertsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAlerts>>
+>;
+export type GetAlertsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get alerts
+ */
+
+export function useGetAlerts<
+	TData = Awaited<ReturnType<typeof getAlerts>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof getAlerts>>, TError, TData>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAlertsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get alerts
+ */
+export const invalidateGetAlerts = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAlertsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -0,0 +1,646 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { useMutation, useQuery } from 'react-query';
+
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type {
+	ConfigReceiverDTO,
+	CreateChannel201,
+	DeleteChannelByIDPathParameters,
+	GetChannelByID200,
+	GetChannelByIDPathParameters,
+	ListChannels200,
+	RenderErrorResponseDTO,
+	UpdateChannelByIDPathParameters,
+} from '../sigNoz.schemas';
+
+/**
+ * This endpoint lists all notification channels for the organization
+ * @summary List notification channels
+ */
+export const listChannels = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListChannels200>({
+		url: `/api/v1/channels`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListChannelsQueryKey = () => {
+	return [`/api/v1/channels`] as const;
+};
+
+export const getListChannelsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listChannels>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listChannels>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListChannelsQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listChannels>>> = ({
+		signal,
+	}) => listChannels(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listChannels>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListChannelsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listChannels>>
+>;
+export type ListChannelsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List notification channels
+ */
+
+export function useListChannels<
+	TData = Awaited<ReturnType<typeof listChannels>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listChannels>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListChannelsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List notification channels
+ */
+export const invalidateListChannels = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListChannelsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a notification channel
+ * @summary Create notification channel
+ */
+export const createChannel = (
+	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateChannel201>({
+		url: `/api/v1/channels`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: configReceiverDTO,
+		signal,
+	});
+};
+
+export const getCreateChannelMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createChannel>>,
+		TError,
+		{ data: BodyType<ConfigReceiverDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createChannel>>,
+	TError,
+	{ data: BodyType<ConfigReceiverDTO> },
+	TContext
+> => {
+	const mutationKey = ['createChannel'];
+	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 createChannel>>,
+		{ data: BodyType<ConfigReceiverDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createChannel(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateChannelMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createChannel>>
+>;
+export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
+export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create notification channel
+ */
+export const useCreateChannel = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createChannel>>,
+		TError,
+		{ data: BodyType<ConfigReceiverDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createChannel>>,
+	TError,
+	{ data: BodyType<ConfigReceiverDTO> },
+	TContext
+> => {
+	const mutationOptions = getCreateChannelMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint deletes a notification channel by ID
+ * @summary Delete notification channel
+ */
+export const deleteChannelByID = ({ id }: DeleteChannelByIDPathParameters) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/channels/${id}`,
+		method: 'DELETE',
+	});
+};
+
+export const getDeleteChannelByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteChannelByID>>,
+		TError,
+		{ pathParams: DeleteChannelByIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteChannelByID>>,
+	TError,
+	{ pathParams: DeleteChannelByIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteChannelByID'];
+	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 deleteChannelByID>>,
+		{ pathParams: DeleteChannelByIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteChannelByID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteChannelByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteChannelByID>>
+>;
+
+export type DeleteChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete notification channel
+ */
+export const useDeleteChannelByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteChannelByID>>,
+		TError,
+		{ pathParams: DeleteChannelByIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteChannelByID>>,
+	TError,
+	{ pathParams: DeleteChannelByIDPathParameters },
+	TContext
+> => {
+	const mutationOptions = getDeleteChannelByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns a notification channel by ID
+ * @summary Get notification channel by ID
+ */
+export const getChannelByID = (
+	{ id }: GetChannelByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetChannelByID200>({
+		url: `/api/v1/channels/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetChannelByIDQueryKey = ({
+	id,
+}: GetChannelByIDPathParameters) => {
+	return [`/api/v1/channels/${id}`] as const;
+};
+
+export const getGetChannelByIDQueryOptions = <
+	TData = Awaited<ReturnType<typeof getChannelByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetChannelByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getChannelByID>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetChannelByIDQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getChannelByID>>> = ({
+		signal,
+	}) => getChannelByID({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getChannelByID>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetChannelByIDQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getChannelByID>>
+>;
+export type GetChannelByIDQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get notification channel by ID
+ */
+
+export function useGetChannelByID<
+	TData = Awaited<ReturnType<typeof getChannelByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetChannelByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getChannelByID>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetChannelByIDQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get notification channel by ID
+ */
+export const invalidateGetChannelByID = async (
+	queryClient: QueryClient,
+	{ id }: GetChannelByIDPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetChannelByIDQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint updates a notification channel by ID
+ * @summary Update notification channel
+ */
+export const updateChannelByID = (
+	{ id }: UpdateChannelByIDPathParameters,
+	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/channels/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: configReceiverDTO,
+	});
+};
+
+export const getUpdateChannelByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateChannelByID>>,
+		TError,
+		{
+			pathParams: UpdateChannelByIDPathParameters;
+			data: BodyType<ConfigReceiverDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateChannelByID>>,
+	TError,
+	{
+		pathParams: UpdateChannelByIDPathParameters;
+		data: BodyType<ConfigReceiverDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateChannelByID'];
+	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 updateChannelByID>>,
+		{
+			pathParams: UpdateChannelByIDPathParameters;
+			data: BodyType<ConfigReceiverDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateChannelByID(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateChannelByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateChannelByID>>
+>;
+export type UpdateChannelByIDMutationBody = BodyType<ConfigReceiverDTO>;
+export type UpdateChannelByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update notification channel
+ */
+export const useUpdateChannelByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateChannelByID>>,
+		TError,
+		{
+			pathParams: UpdateChannelByIDPathParameters;
+			data: BodyType<ConfigReceiverDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateChannelByID>>,
+	TError,
+	{
+		pathParams: UpdateChannelByIDPathParameters;
+		data: BodyType<ConfigReceiverDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateChannelByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint tests a notification channel by sending a test notification
+ * @summary Test notification channel
+ */
+export const testChannel = (
+	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/channels/test`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: configReceiverDTO,
+		signal,
+	});
+};
+
+export const getTestChannelMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testChannel>>,
+		TError,
+		{ data: BodyType<ConfigReceiverDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof testChannel>>,
+	TError,
+	{ data: BodyType<ConfigReceiverDTO> },
+	TContext
+> => {
+	const mutationKey = ['testChannel'];
+	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 testChannel>>,
+		{ data: BodyType<ConfigReceiverDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return testChannel(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type TestChannelMutationResult = NonNullable<
+	Awaited<ReturnType<typeof testChannel>>
+>;
+export type TestChannelMutationBody = BodyType<ConfigReceiverDTO>;
+export type TestChannelMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Test notification channel
+ */
+export const useTestChannel = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testChannel>>,
+		TError,
+		{ data: BodyType<ConfigReceiverDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof testChannel>>,
+	TError,
+	{ data: BodyType<ConfigReceiverDTO> },
+	TContext
+> => {
+	const mutationOptions = getTestChannelMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * Deprecated: use /api/v1/channels/test instead
+ * @deprecated
+ * @summary Test notification channel (deprecated)
+ */
+export const testChannelDeprecated = (
+	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/testChannel`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: configReceiverDTO,
+		signal,
+	});
+};
+
+export const getTestChannelDeprecatedMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testChannelDeprecated>>,
+		TError,
+		{ data: BodyType<ConfigReceiverDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof testChannelDeprecated>>,
+	TError,
+	{ data: BodyType<ConfigReceiverDTO> },
+	TContext
+> => {
+	const mutationKey = ['testChannelDeprecated'];
+	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 testChannelDeprecated>>,
+		{ data: BodyType<ConfigReceiverDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return testChannelDeprecated(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type TestChannelDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof testChannelDeprecated>>
+>;
+export type TestChannelDeprecatedMutationBody = BodyType<ConfigReceiverDTO>;
+export type TestChannelDeprecatedMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @deprecated
+ * @summary Test notification channel (deprecated)
+ */
+export const useTestChannelDeprecated = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testChannelDeprecated>>,
+		TError,
+		{ data: BodyType<ConfigReceiverDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof testChannelDeprecated>>,
+	TError,
+	{ data: BodyType<ConfigReceiverDTO> },
+	TContext
+> => {
+	const mutationOptions = getTestChannelDeprecatedMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

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

@@ -0,0 +1,496 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { useMutation, useQuery } from 'react-query';
+
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type {
+	CreateDowntimeSchedule201,
+	DeleteDowntimeScheduleByIDPathParameters,
+	GetDowntimeScheduleByID200,
+	GetDowntimeScheduleByIDPathParameters,
+	ListDowntimeSchedules200,
+	ListDowntimeSchedulesParams,
+	RenderErrorResponseDTO,
+	RuletypesPostablePlannedMaintenanceDTO,
+	UpdateDowntimeScheduleByIDPathParameters,
+} from '../sigNoz.schemas';
+
+/**
+ * This endpoint lists all planned maintenance / downtime schedules
+ * @summary List downtime schedules
+ */
+export const listDowntimeSchedules = (
+	params?: ListDowntimeSchedulesParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListDowntimeSchedules200>({
+		url: `/api/v1/downtime_schedules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListDowntimeSchedulesQueryKey = (
+	params?: ListDowntimeSchedulesParams,
+) => {
+	return [`/api/v1/downtime_schedules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListDowntimeSchedulesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	params?: ListDowntimeSchedulesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listDowntimeSchedules>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getListDowntimeSchedulesQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listDowntimeSchedules>>
+	> = ({ signal }) => listDowntimeSchedules(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listDowntimeSchedules>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListDowntimeSchedulesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listDowntimeSchedules>>
+>;
+export type ListDowntimeSchedulesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List downtime schedules
+ */
+
+export function useListDowntimeSchedules<
+	TData = Awaited<ReturnType<typeof listDowntimeSchedules>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	params?: ListDowntimeSchedulesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listDowntimeSchedules>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListDowntimeSchedulesQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List downtime schedules
+ */
+export const invalidateListDowntimeSchedules = async (
+	queryClient: QueryClient,
+	params?: ListDowntimeSchedulesParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListDowntimeSchedulesQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a new planned maintenance / downtime schedule
+ * @summary Create downtime schedule
+ */
+export const createDowntimeSchedule = (
+	ruletypesPostablePlannedMaintenanceDTO: BodyType<RuletypesPostablePlannedMaintenanceDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateDowntimeSchedule201>({
+		url: `/api/v1/downtime_schedules`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostablePlannedMaintenanceDTO,
+		signal,
+	});
+};
+
+export const getCreateDowntimeScheduleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createDowntimeSchedule>>,
+		TError,
+		{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createDowntimeSchedule>>,
+	TError,
+	{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
+	TContext
+> => {
+	const mutationKey = ['createDowntimeSchedule'];
+	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 createDowntimeSchedule>>,
+		{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createDowntimeSchedule(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateDowntimeScheduleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createDowntimeSchedule>>
+>;
+export type CreateDowntimeScheduleMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+export type CreateDowntimeScheduleMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create downtime schedule
+ */
+export const useCreateDowntimeSchedule = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createDowntimeSchedule>>,
+		TError,
+		{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createDowntimeSchedule>>,
+	TError,
+	{ data: BodyType<RuletypesPostablePlannedMaintenanceDTO> },
+	TContext
+> => {
+	const mutationOptions = getCreateDowntimeScheduleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint deletes a downtime schedule by ID
+ * @summary Delete downtime schedule
+ */
+export const deleteDowntimeScheduleByID = ({
+	id,
+}: DeleteDowntimeScheduleByIDPathParameters) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/downtime_schedules/${id}`,
+		method: 'DELETE',
+	});
+};
+
+export const getDeleteDowntimeScheduleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
+		TError,
+		{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
+	TError,
+	{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteDowntimeScheduleByID'];
+	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 deleteDowntimeScheduleByID>>,
+		{ pathParams: DeleteDowntimeScheduleByIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteDowntimeScheduleByID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteDowntimeScheduleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>
+>;
+
+export type DeleteDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete downtime schedule
+ */
+export const useDeleteDowntimeScheduleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
+		TError,
+		{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteDowntimeScheduleByID>>,
+	TError,
+	{ pathParams: DeleteDowntimeScheduleByIDPathParameters },
+	TContext
+> => {
+	const mutationOptions = getDeleteDowntimeScheduleByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns a downtime schedule by ID
+ * @summary Get downtime schedule by ID
+ */
+export const getDowntimeScheduleByID = (
+	{ id }: GetDowntimeScheduleByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetDowntimeScheduleByID200>({
+		url: `/api/v1/downtime_schedules/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetDowntimeScheduleByIDQueryKey = ({
+	id,
+}: GetDowntimeScheduleByIDPathParameters) => {
+	return [`/api/v1/downtime_schedules/${id}`] as const;
+};
+
+export const getGetDowntimeScheduleByIDQueryOptions = <
+	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetDowntimeScheduleByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetDowntimeScheduleByIDQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getDowntimeScheduleByID>>
+	> = ({ signal }) => getDowntimeScheduleByID({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetDowntimeScheduleByIDQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getDowntimeScheduleByID>>
+>;
+export type GetDowntimeScheduleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get downtime schedule by ID
+ */
+
+export function useGetDowntimeScheduleByID<
+	TData = Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetDowntimeScheduleByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getDowntimeScheduleByID>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetDowntimeScheduleByIDQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get downtime schedule by ID
+ */
+export const invalidateGetDowntimeScheduleByID = async (
+	queryClient: QueryClient,
+	{ id }: GetDowntimeScheduleByIDPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetDowntimeScheduleByIDQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint updates a downtime schedule by ID
+ * @summary Update downtime schedule
+ */
+export const updateDowntimeScheduleByID = (
+	{ id }: UpdateDowntimeScheduleByIDPathParameters,
+	ruletypesPostablePlannedMaintenanceDTO: BodyType<RuletypesPostablePlannedMaintenanceDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/downtime_schedules/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostablePlannedMaintenanceDTO,
+	});
+};
+
+export const getUpdateDowntimeScheduleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
+		TError,
+		{
+			pathParams: UpdateDowntimeScheduleByIDPathParameters;
+			data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
+	TError,
+	{
+		pathParams: UpdateDowntimeScheduleByIDPathParameters;
+		data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateDowntimeScheduleByID'];
+	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 updateDowntimeScheduleByID>>,
+		{
+			pathParams: UpdateDowntimeScheduleByIDPathParameters;
+			data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateDowntimeScheduleByID(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateDowntimeScheduleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>
+>;
+export type UpdateDowntimeScheduleByIDMutationBody = BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+export type UpdateDowntimeScheduleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update downtime schedule
+ */
+export const useUpdateDowntimeScheduleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
+		TError,
+		{
+			pathParams: UpdateDowntimeScheduleByIDPathParameters;
+			data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateDowntimeScheduleByID>>,
+	TError,
+	{
+		pathParams: UpdateDowntimeScheduleByIDPathParameters;
+		data: BodyType<RuletypesPostablePlannedMaintenanceDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateDowntimeScheduleByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

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

@@ -0,0 +1,482 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+import { useMutation, useQuery } from 'react-query';
+
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type {
+	AlertmanagertypesPostableRoutePolicyDTO,
+	CreateRoutePolicy201,
+	DeleteRoutePolicyByIDPathParameters,
+	GetAllRoutePolicies200,
+	GetRoutePolicyByID200,
+	GetRoutePolicyByIDPathParameters,
+	RenderErrorResponseDTO,
+	UpdateRoutePolicy200,
+	UpdateRoutePolicyPathParameters,
+} from '../sigNoz.schemas';
+
+/**
+ * This endpoint lists all route policies for the organization
+ * @summary List route policies
+ */
+export const getAllRoutePolicies = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetAllRoutePolicies200>({
+		url: `/api/v1/route_policies`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAllRoutePoliciesQueryKey = () => {
+	return [`/api/v1/route_policies`] as const;
+};
+
+export const getGetAllRoutePoliciesQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getAllRoutePolicies>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetAllRoutePoliciesQueryKey();
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getAllRoutePolicies>>
+	> = ({ signal }) => getAllRoutePolicies(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getAllRoutePolicies>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAllRoutePoliciesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAllRoutePolicies>>
+>;
+export type GetAllRoutePoliciesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List route policies
+ */
+
+export function useGetAllRoutePolicies<
+	TData = Awaited<ReturnType<typeof getAllRoutePolicies>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getAllRoutePolicies>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAllRoutePoliciesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List route policies
+ */
+export const invalidateGetAllRoutePolicies = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAllRoutePoliciesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a route policy
+ * @summary Create route policy
+ */
+export const createRoutePolicy = (
+	alertmanagertypesPostableRoutePolicyDTO: BodyType<AlertmanagertypesPostableRoutePolicyDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateRoutePolicy201>({
+		url: `/api/v1/route_policies`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: alertmanagertypesPostableRoutePolicyDTO,
+		signal,
+	});
+};
+
+export const getCreateRoutePolicyMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRoutePolicy>>,
+		TError,
+		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createRoutePolicy>>,
+	TError,
+	{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
+	TContext
+> => {
+	const mutationKey = ['createRoutePolicy'];
+	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 createRoutePolicy>>,
+		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createRoutePolicy(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateRoutePolicyMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createRoutePolicy>>
+>;
+export type CreateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+export type CreateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create route policy
+ */
+export const useCreateRoutePolicy = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRoutePolicy>>,
+		TError,
+		{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createRoutePolicy>>,
+	TError,
+	{ data: BodyType<AlertmanagertypesPostableRoutePolicyDTO> },
+	TContext
+> => {
+	const mutationOptions = getCreateRoutePolicyMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint deletes a route policy by ID
+ * @summary Delete route policy
+ */
+export const deleteRoutePolicyByID = ({
+	id,
+}: DeleteRoutePolicyByIDPathParameters) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/route_policies/${id}`,
+		method: 'DELETE',
+	});
+};
+
+export const getDeleteRoutePolicyByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
+		TError,
+		{ pathParams: DeleteRoutePolicyByIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
+	TError,
+	{ pathParams: DeleteRoutePolicyByIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteRoutePolicyByID'];
+	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 deleteRoutePolicyByID>>,
+		{ pathParams: DeleteRoutePolicyByIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteRoutePolicyByID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteRoutePolicyByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteRoutePolicyByID>>
+>;
+
+export type DeleteRoutePolicyByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete route policy
+ */
+export const useDeleteRoutePolicyByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
+		TError,
+		{ pathParams: DeleteRoutePolicyByIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteRoutePolicyByID>>,
+	TError,
+	{ pathParams: DeleteRoutePolicyByIDPathParameters },
+	TContext
+> => {
+	const mutationOptions = getDeleteRoutePolicyByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns a route policy by ID
+ * @summary Get route policy by ID
+ */
+export const getRoutePolicyByID = (
+	{ id }: GetRoutePolicyByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetRoutePolicyByID200>({
+		url: `/api/v1/route_policies/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetRoutePolicyByIDQueryKey = ({
+	id,
+}: GetRoutePolicyByIDPathParameters) => {
+	return [`/api/v1/route_policies/${id}`] as const;
+};
+
+export const getGetRoutePolicyByIDQueryOptions = <
+	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetRoutePolicyByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getRoutePolicyByID>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetRoutePolicyByIDQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getRoutePolicyByID>>
+	> = ({ signal }) => getRoutePolicyByID({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getRoutePolicyByID>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetRoutePolicyByIDQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getRoutePolicyByID>>
+>;
+export type GetRoutePolicyByIDQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get route policy by ID
+ */
+
+export function useGetRoutePolicyByID<
+	TData = Awaited<ReturnType<typeof getRoutePolicyByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetRoutePolicyByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getRoutePolicyByID>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetRoutePolicyByIDQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get route policy by ID
+ */
+export const invalidateGetRoutePolicyByID = async (
+	queryClient: QueryClient,
+	{ id }: GetRoutePolicyByIDPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetRoutePolicyByIDQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint updates a route policy by ID
+ * @summary Update route policy
+ */
+export const updateRoutePolicy = (
+	{ id }: UpdateRoutePolicyPathParameters,
+	alertmanagertypesPostableRoutePolicyDTO: BodyType<AlertmanagertypesPostableRoutePolicyDTO>,
+) => {
+	return GeneratedAPIInstance<UpdateRoutePolicy200>({
+		url: `/api/v1/route_policies/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: alertmanagertypesPostableRoutePolicyDTO,
+	});
+};
+
+export const getUpdateRoutePolicyMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRoutePolicy>>,
+		TError,
+		{
+			pathParams: UpdateRoutePolicyPathParameters;
+			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateRoutePolicy>>,
+	TError,
+	{
+		pathParams: UpdateRoutePolicyPathParameters;
+		data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateRoutePolicy'];
+	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 updateRoutePolicy>>,
+		{
+			pathParams: UpdateRoutePolicyPathParameters;
+			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateRoutePolicy(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateRoutePolicyMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateRoutePolicy>>
+>;
+export type UpdateRoutePolicyMutationBody = BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+export type UpdateRoutePolicyMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update route policy
+ */
+export const useUpdateRoutePolicy = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRoutePolicy>>,
+		TError,
+		{
+			pathParams: UpdateRoutePolicyPathParameters;
+			data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateRoutePolicy>>,
+	TError,
+	{
+		pathParams: UpdateRoutePolicyPathParameters;
+		data: BodyType<AlertmanagertypesPostableRoutePolicyDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateRoutePolicyMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

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

@@ -6,17 +6,24 @@
  */
 import type {
 	InvalidateOptions,
+	MutationFunction,
 	QueryClient,
 	QueryFunction,
 	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useQuery } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
-import type { ErrorType } from '../../../generatedAPIInstance';
+import type { BodyType, ErrorType } from '../../../generatedAPIInstance';
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type {
+	CreateRule201,
+	DeleteRuleByIDPathParameters,
+	GetRuleByID200,
+	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
 	GetRuleHistoryFilterKeysParams,
 	GetRuleHistoryFilterKeysPathParameters,
@@ -35,9 +42,548 @@ import type {
 	GetRuleHistoryTopContributors200,
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
+	ListRules200,
+	PatchRuleByID200,
+	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
+	RuletypesPostableRuleDTO,
+	TestRule200,
+	UpdateRuleByIDPathParameters,
 } from '../sigNoz.schemas';
 
+/**
+ * This endpoint lists all alert rules with their current evaluation state
+ * @summary List alert rules
+ */
+export const listRules = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListRules200>({
+		url: `/api/v2/rules`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListRulesQueryKey = () => {
+	return [`/api/v2/rules`] as const;
+};
+
+export const getListRulesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRules>>> = ({
+		signal,
+	}) => listRules(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRules>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRules>>
+>;
+export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules
+ */
+
+export function useListRules<
+	TData = Awaited<ReturnType<typeof listRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof listRules>>, TError, TData>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List alert rules
+ */
+export const invalidateListRules = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a new alert rule
+ * @summary Create alert rule
+ */
+export const createRule = (
+	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateRule201>({
+		url: `/api/v2/rules`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleDTO,
+		signal,
+	});
+};
+
+export const getCreateRuleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRule>>,
+		TError,
+		{ data: BodyType<RuletypesPostableRuleDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createRule>>,
+	TError,
+	{ data: BodyType<RuletypesPostableRuleDTO> },
+	TContext
+> => {
+	const mutationKey = ['createRule'];
+	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 createRule>>,
+		{ data: BodyType<RuletypesPostableRuleDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createRule(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateRuleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createRule>>
+>;
+export type CreateRuleMutationBody = BodyType<RuletypesPostableRuleDTO>;
+export type CreateRuleMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create alert rule
+ */
+export const useCreateRule = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRule>>,
+		TError,
+		{ data: BodyType<RuletypesPostableRuleDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createRule>>,
+	TError,
+	{ data: BodyType<RuletypesPostableRuleDTO> },
+	TContext
+> => {
+	const mutationOptions = getCreateRuleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint deletes an alert rule by ID
+ * @summary Delete alert rule
+ */
+export const deleteRuleByID = ({ id }: DeleteRuleByIDPathParameters) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/rules/${id}`,
+		method: 'DELETE',
+	});
+};
+
+export const getDeleteRuleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleByID>>,
+		TError,
+		{ pathParams: DeleteRuleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteRuleByID>>,
+	TError,
+	{ pathParams: DeleteRuleByIDPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteRuleByID'];
+	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 deleteRuleByID>>,
+		{ pathParams: DeleteRuleByIDPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteRuleByID(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteRuleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteRuleByID>>
+>;
+
+export type DeleteRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete alert rule
+ */
+export const useDeleteRuleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleByID>>,
+		TError,
+		{ pathParams: DeleteRuleByIDPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteRuleByID>>,
+	TError,
+	{ pathParams: DeleteRuleByIDPathParameters },
+	TContext
+> => {
+	const mutationOptions = getDeleteRuleByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint returns an alert rule by ID
+ * @summary Get alert rule by ID
+ */
+export const getRuleByID = (
+	{ id }: GetRuleByIDPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetRuleByID200>({
+		url: `/api/v2/rules/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetRuleByIDQueryKey = ({ id }: GetRuleByIDPathParameters) => {
+	return [`/api/v2/rules/${id}`] as const;
+};
+
+export const getGetRuleByIDQueryOptions = <
+	TData = Awaited<ReturnType<typeof getRuleByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetRuleByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getRuleByID>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetRuleByIDQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getRuleByID>>> = ({
+		signal,
+	}) => getRuleByID({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getRuleByID>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetRuleByIDQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getRuleByID>>
+>;
+export type GetRuleByIDQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get alert rule by ID
+ */
+
+export function useGetRuleByID<
+	TData = Awaited<ReturnType<typeof getRuleByID>>,
+	TError = ErrorType<RenderErrorResponseDTO>
+>(
+	{ id }: GetRuleByIDPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getRuleByID>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetRuleByIDQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get alert rule by ID
+ */
+export const invalidateGetRuleByID = async (
+	queryClient: QueryClient,
+	{ id }: GetRuleByIDPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetRuleByIDQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint applies a partial update to an alert rule by ID
+ * @summary Patch alert rule
+ */
+export const patchRuleByID = (
+	{ id }: PatchRuleByIDPathParameters,
+	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
+) => {
+	return GeneratedAPIInstance<PatchRuleByID200>({
+		url: `/api/v2/rules/${id}`,
+		method: 'PATCH',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleDTO,
+	});
+};
+
+export const getPatchRuleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchRuleByID>>,
+		TError,
+		{
+			pathParams: PatchRuleByIDPathParameters;
+			data: BodyType<RuletypesPostableRuleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof patchRuleByID>>,
+	TError,
+	{
+		pathParams: PatchRuleByIDPathParameters;
+		data: BodyType<RuletypesPostableRuleDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['patchRuleByID'];
+	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 patchRuleByID>>,
+		{
+			pathParams: PatchRuleByIDPathParameters;
+			data: BodyType<RuletypesPostableRuleDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return patchRuleByID(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PatchRuleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof patchRuleByID>>
+>;
+export type PatchRuleByIDMutationBody = BodyType<RuletypesPostableRuleDTO>;
+export type PatchRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Patch alert rule
+ */
+export const usePatchRuleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchRuleByID>>,
+		TError,
+		{
+			pathParams: PatchRuleByIDPathParameters;
+			data: BodyType<RuletypesPostableRuleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof patchRuleByID>>,
+	TError,
+	{
+		pathParams: PatchRuleByIDPathParameters;
+		data: BodyType<RuletypesPostableRuleDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getPatchRuleByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint updates an alert rule by ID
+ * @summary Update alert rule
+ */
+export const updateRuleByID = (
+	{ id }: UpdateRuleByIDPathParameters,
+	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/rules/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleDTO,
+	});
+};
+
+export const getUpdateRuleByIDMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleByID>>,
+		TError,
+		{
+			pathParams: UpdateRuleByIDPathParameters;
+			data: BodyType<RuletypesPostableRuleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateRuleByID>>,
+	TError,
+	{
+		pathParams: UpdateRuleByIDPathParameters;
+		data: BodyType<RuletypesPostableRuleDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateRuleByID'];
+	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 updateRuleByID>>,
+		{
+			pathParams: UpdateRuleByIDPathParameters;
+			data: BodyType<RuletypesPostableRuleDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateRuleByID(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateRuleByIDMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateRuleByID>>
+>;
+export type UpdateRuleByIDMutationBody = BodyType<RuletypesPostableRuleDTO>;
+export type UpdateRuleByIDMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update alert rule
+ */
+export const useUpdateRuleByID = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleByID>>,
+		TError,
+		{
+			pathParams: UpdateRuleByIDPathParameters;
+			data: BodyType<RuletypesPostableRuleDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateRuleByID>>,
+	TError,
+	{
+		pathParams: UpdateRuleByIDPathParameters;
+		data: BodyType<RuletypesPostableRuleDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateRuleByIDMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
 /**
  * Returns distinct label keys from rule history entries for the selected range.
  * @summary Get rule history filter keys
@@ -742,3 +1288,87 @@ export const invalidateGetRuleHistoryTopContributors = async (
 
 	return queryClient;
 };
+
+/**
+ * This endpoint fires a test notification for the given rule definition
+ * @summary Test alert rule
+ */
+export const testRule = (
+	ruletypesPostableRuleDTO: BodyType<RuletypesPostableRuleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<TestRule200>({
+		url: `/api/v2/rules/test`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleDTO,
+		signal,
+	});
+};
+
+export const getTestRuleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testRule>>,
+		TError,
+		{ data: BodyType<RuletypesPostableRuleDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof testRule>>,
+	TError,
+	{ data: BodyType<RuletypesPostableRuleDTO> },
+	TContext
+> => {
+	const mutationKey = ['testRule'];
+	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 testRule>>,
+		{ data: BodyType<RuletypesPostableRuleDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return testRule(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type TestRuleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof testRule>>
+>;
+export type TestRuleMutationBody = BodyType<RuletypesPostableRuleDTO>;
+export type TestRuleMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Test alert rule
+ */
+export const useTestRule = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testRule>>,
+		TError,
+		{ data: BodyType<RuletypesPostableRuleDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof testRule>>,
+	TError,
+	{ data: BodyType<RuletypesPostableRuleDTO> },
+	TContext
+> => {
+	const mutationOptions = getTestRuleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -30,7 +30,7 @@
 	font-size: 15.4px;
 	font-weight: 500;
 	line-height: 17.5px;
-	color: var(--text-neutral-dark-50);
+	color: var(--l1-foreground);
 	white-space: nowrap;
 }
 
@@ -41,7 +41,8 @@
 	gap: 8px;
 	height: 32px;
 	padding: 10px 16px;
-	background: var(--bg-ink-400);
+	background: var(--l2-background);
+	color: var(--l2-foreground);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -52,31 +53,16 @@
 		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 {
 		opacity: 0.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);
-		}
-	}
-}

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
-import { openExternalLink } from 'utils/navigation';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 
@@ -9,7 +8,7 @@ import './AuthHeader.styles.scss';
 
 function AuthHeader(): JSX.Element {
 	const handleGetHelp = useCallback((): void => {
-		openExternalLink('https://signoz.io/support/');
+		window.open('https://signoz.io/support/', '_blank');
 	}, []);
 
 	return (

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/CeleryTask/useNavigateToExplorer.ts

@@ -7,13 +7,11 @@ import ROUTES from 'constants/routes';
 import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -135,11 +133,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			if (sameTab) {
-				history.push(newExplorerPath);
-			} else {
-				openInNewTab(newExplorerPath);
-			}
+			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

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/ChangelogModal.tsx

@@ -11,7 +11,6 @@ import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
-import { openExternalLink } from 'utils/navigation';
 
 import ChangelogRenderer from './components/ChangelogRenderer';
 
@@ -87,7 +86,11 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 	}, [checkScroll]);
 
 	const onClickUpdateWorkspace = (): void => {
-		openExternalLink('https://signoz.io/upgrade-path');
+		window.open(
+			'https://signoz.io/upgrade-path',
+			'_blank',
+			'noopener,noreferrer',
+		);
 	};
 
 	const onClickScrollForMore = (): void => {

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

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

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

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

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

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

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

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

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

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

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

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

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

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

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

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

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

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

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

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

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

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

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

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

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

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

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

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

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

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

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

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

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

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

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

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

frontend/src/components/HeaderRightSection/__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/HostMetricsDetails.tsx

@@ -50,7 +50,6 @@ import {
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import { VIEW_TYPES, VIEWS } from './constants';
@@ -331,7 +330,10 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -350,7 +352,10 @@ function HostMetricsDetails({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+			window.open(
+				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
+				'_blank',
+			);
 		}
 	};
 

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/LearnMore/LearnMore.tsx

@@ -1,7 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
-import { openExternalLink } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -15,7 +14,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			openExternalLink(url);
+			window.open(url, '_blank');
 		}
 	};
 	return (

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/AttributeCheckList.tsx

@@ -20,7 +20,6 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { openExternalLink } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -77,7 +76,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			openExternalLink(KAFKA_SETUP_DOC_LINK);
+			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
 		}
 	};
 	return {

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;
 			}
 		}
 	}