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
 

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`.

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

@@ -14,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"
@@ -23,7 +22,6 @@ import (
 
 type APIHandlerOptions struct {
 	DataConnector                 interfaces.Reader
-	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
 	CloudIntegrationsController   *cloudintegrations.Controller
@@ -43,7 +41,6 @@ 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,
@@ -64,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/index.html

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

frontend/jest.config.ts

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

frontend/jest.setup.ts

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

frontend/package.json

@@ -48,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/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/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/sigNoz.schemas.ts

@@ -4529,6 +4529,20 @@ export interface RulestatehistorytypesGettableRuleStateWindowDTO {
 	state: RuletypesAlertStateDTO;
 }
 
+export interface RuletypesAlertCompositeQueryDTO {
+	panelType: RuletypesPanelTypeDTO;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	queries: Querybuildertypesv5QueryEnvelopeDTO[] | null;
+	queryType: RuletypesQueryTypeDTO;
+	/**
+	 * @type string
+	 */
+	unit?: string;
+}
+
 export enum RuletypesAlertStateDTO {
 	inactive = 'inactive',
 	pending = 'pending',
@@ -4537,6 +4551,513 @@ export enum RuletypesAlertStateDTO {
 	nodata = 'nodata',
 	disabled = 'disabled',
 }
+export enum RuletypesAlertTypeDTO {
+	METRIC_BASED_ALERT = 'METRIC_BASED_ALERT',
+	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
+	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
+	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
+}
+export interface RuletypesBasicRuleThresholdDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	channels?: string[] | null;
+	matchType: RuletypesMatchTypeDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	op: RuletypesCompareOperatorDTO;
+	/**
+	 * @type number
+	 * @nullable true
+	 */
+	recoveryTarget?: number | null;
+	/**
+	 * @type number
+	 * @nullable true
+	 */
+	target: number | null;
+	/**
+	 * @type string
+	 */
+	targetUnit?: string;
+}
+
+/**
+ * @nullable
+ */
+export type RuletypesBasicRuleThresholdsDTO =
+	| RuletypesBasicRuleThresholdDTO[]
+	| null;
+
+export enum RuletypesCompareOperatorDTO {
+	above = 'above',
+	below = 'below',
+	equal = 'equal',
+	not_equal = 'not_equal',
+	outside_bounds = 'outside_bounds',
+}
+export interface RuletypesCumulativeScheduleDTO {
+	/**
+	 * @type integer
+	 * @nullable true
+	 */
+	day?: number | null;
+	/**
+	 * @type integer
+	 * @nullable true
+	 */
+	hour?: number | null;
+	/**
+	 * @type integer
+	 * @nullable true
+	 */
+	minute?: number | null;
+	type: RuletypesScheduleTypeDTO;
+	/**
+	 * @type integer
+	 * @nullable true
+	 */
+	weekday?: number | null;
+}
+
+export interface RuletypesCumulativeWindowDTO {
+	/**
+	 * @type string
+	 */
+	frequency: string;
+	schedule: RuletypesCumulativeScheduleDTO;
+	/**
+	 * @type string
+	 */
+	timezone: string;
+}
+
+export interface RuletypesEvaluationCumulativeDTO {
+	kind?: RuletypesEvaluationKindDTO;
+	spec?: RuletypesCumulativeWindowDTO;
+}
+
+export type RuletypesEvaluationEnvelopeDTO =
+	| (RuletypesEvaluationRollingDTO & {
+			kind: RuletypesEvaluationKindDTO;
+			spec: unknown;
+	  })
+	| (RuletypesEvaluationCumulativeDTO & {
+			kind: RuletypesEvaluationKindDTO;
+			spec: unknown;
+	  });
+
+export enum RuletypesEvaluationKindDTO {
+	rolling = 'rolling',
+	cumulative = 'cumulative',
+}
+export interface RuletypesEvaluationRollingDTO {
+	kind?: RuletypesEvaluationKindDTO;
+	spec?: RuletypesRollingWindowDTO;
+}
+
+export interface RuletypesGettableTestRuleDTO {
+	/**
+	 * @type integer
+	 */
+	alertCount?: number;
+	/**
+	 * @type string
+	 */
+	message?: string;
+}
+
+export enum RuletypesMaintenanceKindDTO {
+	fixed = 'fixed',
+	recurring = 'recurring',
+}
+export enum RuletypesMaintenanceStatusDTO {
+	active = 'active',
+	upcoming = 'upcoming',
+	expired = 'expired',
+}
+export enum RuletypesMatchTypeDTO {
+	at_least_once = 'at_least_once',
+	all_the_times = 'all_the_times',
+	on_average = 'on_average',
+	in_total = 'in_total',
+	last = 'last',
+}
+export interface RuletypesNotificationSettingsDTO {
+	/**
+	 * @type array
+	 */
+	groupBy?: string[];
+	/**
+	 * @type string
+	 */
+	newGroupEvalDelay?: string;
+	renotify?: RuletypesRenotifyDTO;
+	/**
+	 * @type boolean
+	 */
+	usePolicy?: boolean;
+}
+
+export enum RuletypesPanelTypeDTO {
+	value = 'value',
+	table = 'table',
+	graph = 'graph',
+}
+export interface RuletypesPlannedMaintenanceDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	alertIds?: string[] | null;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: RuletypesMaintenanceKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	schedule: RuletypesScheduleDTO;
+	status: RuletypesMaintenanceStatusDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesPostablePlannedMaintenanceDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	alertIds?: string[] | null;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	schedule: RuletypesScheduleDTO;
+}
+
+export type RuletypesPostableRuleDTOAnnotations = { [key: string]: string };
+
+export type RuletypesPostableRuleDTOLabels = { [key: string]: string };
+
+export interface RuletypesPostableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType?: RuletypesAlertTypeDTO;
+	/**
+	 * @type object
+	 */
+	annotations?: RuletypesPostableRuleDTOAnnotations;
+	condition: RuletypesRuleConditionDTO;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	evalWindow?: string;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
+	/**
+	 * @type string
+	 */
+	frequency?: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesPostableRuleDTOLabels;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
+	/**
+	 * @type array
+	 */
+	preferredChannels?: string[];
+	ruleType: RuletypesRuleTypeDTO;
+	/**
+	 * @type string
+	 */
+	schemaVersion?: string;
+	/**
+	 * @type string
+	 */
+	source?: string;
+	/**
+	 * @type string
+	 */
+	version?: string;
+}
+
+export enum RuletypesQueryTypeDTO {
+	builder = 'builder',
+	clickhouse_sql = 'clickhouse_sql',
+	promql = 'promql',
+}
+export interface RuletypesRecurrenceDTO {
+	/**
+	 * @type string
+	 */
+	duration: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 * @nullable true
+	 */
+	endTime?: Date | null;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	repeatOn?: RuletypesRepeatOnDTO[] | null;
+	repeatType: RuletypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: Date;
+}
+
+export interface RuletypesRenotifyDTO {
+	/**
+	 * @type array
+	 */
+	alertStates?: RuletypesAlertStateDTO[];
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+	/**
+	 * @type string
+	 */
+	interval?: string;
+}
+
+export enum RuletypesRepeatOnDTO {
+	sunday = 'sunday',
+	monday = 'monday',
+	tuesday = 'tuesday',
+	wednesday = 'wednesday',
+	thursday = 'thursday',
+	friday = 'friday',
+	saturday = 'saturday',
+}
+export enum RuletypesRepeatTypeDTO {
+	daily = 'daily',
+	weekly = 'weekly',
+	monthly = 'monthly',
+}
+export interface RuletypesRollingWindowDTO {
+	/**
+	 * @type string
+	 */
+	evalWindow: string;
+	/**
+	 * @type string
+	 */
+	frequency: string;
+}
+
+export type RuletypesRuleDTOAnnotations = { [key: string]: string };
+
+export type RuletypesRuleDTOLabels = { [key: string]: string };
+
+export interface RuletypesRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType?: RuletypesAlertTypeDTO;
+	/**
+	 * @type object
+	 */
+	annotations?: RuletypesRuleDTOAnnotations;
+	condition: RuletypesRuleConditionDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	evalWindow?: string;
+	evaluation?: RuletypesEvaluationEnvelopeDTO;
+	/**
+	 * @type string
+	 */
+	frequency?: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesRuleDTOLabels;
+	notificationSettings?: RuletypesNotificationSettingsDTO;
+	/**
+	 * @type array
+	 */
+	preferredChannels?: string[];
+	ruleType: RuletypesRuleTypeDTO;
+	/**
+	 * @type string
+	 */
+	schemaVersion?: string;
+	/**
+	 * @type string
+	 */
+	source?: string;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+	/**
+	 * @type string
+	 */
+	version?: string;
+}
+
+export interface RuletypesRuleConditionDTO {
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	absentFor?: number;
+	/**
+	 * @type boolean
+	 */
+	alertOnAbsent?: boolean;
+	/**
+	 * @type string
+	 */
+	algorithm?: string;
+	compositeQuery: RuletypesAlertCompositeQueryDTO;
+	matchType: RuletypesMatchTypeDTO;
+	op: RuletypesCompareOperatorDTO;
+	/**
+	 * @type boolean
+	 */
+	requireMinPoints?: boolean;
+	/**
+	 * @type integer
+	 */
+	requiredNumPoints?: number;
+	seasonality?: RuletypesSeasonalityDTO;
+	/**
+	 * @type string
+	 */
+	selectedQueryName?: string;
+	/**
+	 * @type number
+	 * @nullable true
+	 */
+	target?: number | null;
+	/**
+	 * @type string
+	 */
+	targetUnit?: string;
+	thresholds?: RuletypesRuleThresholdDataDTO;
+}
+
+export type RuletypesRuleThresholdDataDTO = RuletypesThresholdBasicDTO & {
+	kind: RuletypesThresholdKindDTO;
+	spec: unknown;
+};
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesScheduleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	endTime?: Date;
+	recurrence?: RuletypesRecurrenceDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime?: Date;
+	/**
+	 * @type string
+	 */
+	timezone: string;
+}
+
+export enum RuletypesScheduleTypeDTO {
+	hourly = 'hourly',
+	daily = 'daily',
+	weekly = 'weekly',
+	monthly = 'monthly',
+}
+export enum RuletypesSeasonalityDTO {
+	hourly = 'hourly',
+	daily = 'daily',
+	weekly = 'weekly',
+}
+export interface RuletypesThresholdBasicDTO {
+	kind?: RuletypesThresholdKindDTO;
+	spec?: RuletypesBasicRuleThresholdsDTO;
+}
+
+export enum RuletypesThresholdKindDTO {
+	basic = 'basic',
+}
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -5456,6 +5977,57 @@ export type DeleteAuthDomainPathParameters = {
 export type UpdateAuthDomainPathParameters = {
 	id: string;
 };
+export type ListDowntimeSchedulesParams = {
+	/**
+	 * @type boolean
+	 * @nullable true
+	 * @description undefined
+	 */
+	active?: boolean | null;
+	/**
+	 * @type boolean
+	 * @nullable true
+	 * @description undefined
+	 */
+	recurring?: boolean | null;
+};
+
+export type ListDowntimeSchedules200 = {
+	/**
+	 * @type array
+	 */
+	data: RuletypesPlannedMaintenanceDTO[];
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateDowntimeSchedule201 = {
+	data: RuletypesPlannedMaintenanceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteDowntimeScheduleByIDPathParameters = {
+	id: string;
+};
+export type GetDowntimeScheduleByIDPathParameters = {
+	id: string;
+};
+export type GetDowntimeScheduleByID200 = {
+	data: RuletypesPlannedMaintenanceDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateDowntimeScheduleByIDPathParameters = {
+	id: string;
+};
 export type HandleExportRawDataPOSTParams = {
 	/**
 	 * @enum csv,jsonl
@@ -6253,6 +6825,53 @@ export type GetUsersByRoleID200 = {
 	status: string;
 };
 
+export type ListRules200 = {
+	/**
+	 * @type array
+	 */
+	data: RuletypesRuleDTO[];
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateRule201 = {
+	data: RuletypesRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteRuleByIDPathParameters = {
+	id: string;
+};
+export type GetRuleByIDPathParameters = {
+	id: string;
+};
+export type GetRuleByID200 = {
+	data: RuletypesRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type PatchRuleByIDPathParameters = {
+	id: string;
+};
+export type PatchRuleByID200 = {
+	data: RuletypesRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateRuleByIDPathParameters = {
+	id: string;
+};
 export type GetRuleHistoryFilterKeysPathParameters = {
 	id: string;
 };
@@ -6523,6 +7142,14 @@ export type GetRuleHistoryTopContributors200 = {
 	status: string;
 };
 
+export type TestRule200 = {
+	data: RuletypesGettableTestRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetSessionContext200 = {
 	data: AuthtypesSessionContextDTO;
 	/**

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/AuthPageContainer.styles.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

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

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

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

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

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

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

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

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

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

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

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

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

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

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

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

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -1,11 +1,10 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Badge } from '@signozhq/badge';
 import { Button } from '@signozhq/button';
 import { DrawerWrapper } from '@signozhq/drawer';
 import { LockKeyhole, RefreshCw, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/sonner';
+import { Badge, toast } from '@signozhq/ui';
 import { Skeleton, Tooltip } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { toast } from '@signozhq/sonner';
+import { toast } from '@signozhq/ui';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	useCreateResetPasswordToken,
@@ -64,7 +64,8 @@ jest.mock('api/ErrorResponseHandlerForGeneratedAPIs', () => ({
 	convertToApiError: jest.fn(),
 }));
 
-jest.mock('@signozhq/sonner', () => ({
+jest.mock('@signozhq/ui', () => ({
+	...jest.requireActual('@signozhq/ui'),
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

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

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

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

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

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

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

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

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

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

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

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

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

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/MembersTable/MembersTable.tsx

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

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

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

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

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

frontend/src/components/NewSelect/styles.scss

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

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

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

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

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

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

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

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

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

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

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

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

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

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

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

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

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

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

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

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