feat: update styles for light mode

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

@@ -71,3 +71,31 @@
 		}
 	}
 }
+
+.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/InputWithLabel/InputWithLabel.tsx

@@ -44,6 +44,7 @@ function InputWithLabel({
 				type={type}
 				value={inputValue}
 				onChange={handleChange}
+				name={label.toLowerCase()}
 			/>
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (

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

@@ -420,3 +420,126 @@
 		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 {
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content {
+					&::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 {
+				.query-name {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+
+				.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;
+				}
+			}
+		}
+
+		.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-arrow {
+				color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+}

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

@@ -87,6 +87,10 @@
 					border-color: var(--bg-robin-500);
 				}
 
+				&.cm-focused {
+					outline: none !important;
+				}
+
 				.cm-content {
 					border-radius: 2px;
 					border: 1px solid var(--Slate-400, #1d212d);
@@ -102,6 +106,7 @@
 
 				.cm-tooltip-autocomplete {
 					background: var(--bg-ink-300) !important;
+					color: var(--bg-ink-500) !important;
 					border-radius: 2px !important;
 					font-size: 12px !important;
 					font-weight: 500 !important;
@@ -264,3 +269,106 @@
 		position: relative;
 	}
 }
+
+.lightMode {
+	.add-ons-list {
+		.add-ons-tabs {
+			.add-on-tab-title {
+				color: var(--bg-ink-500) !important;
+			}
+
+			.tab {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+
+				&:first-child {
+					border-left: 1px solid var(--bg-vanilla-300) !important;
+				}
+			}
+
+			.tab::before {
+				background: var(--bg-vanilla-300) !important;
+			}
+
+			.selected-view {
+				color: var(--bg-robin-500) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+			}
+
+			.selected-view::before {
+				background: var(--bg-vanilla-300) !important;
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+	}
+
+	.having-filter-container {
+		.having-filter-select-container {
+			.having-filter-select-editor {
+				.cm-editor {
+					&:focus-within {
+						border-color: var(--bg-vanilla-300) !important;
+					}
+
+					.cm-content {
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !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;
+
+						ul {
+							li {
+								&:hover {
+									background: var(--bg-vanilla-300) !important;
+								}
+
+								&[aria-selected='true'] {
+									color: var(--bg-ink-500) !important;
+									background: var(--bg-vanilla-300) !important;
+								}
+							}
+						}
+					}
+
+					.cm-line {
+						background-color: var(--bg-vanilla-100) !important;
+
+						::-moz-selection {
+							background: var(--bg-vanilla-100) !important;
+						}
+
+						::selection {
+							background: var(--bg-ink-100) !important;
+						}
+
+						.chip-decorator {
+							background: var(--bg-robin-100) !important;
+							color: var(--bg-ink-400) !important;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--bg-vanilla-100) !important;
+					}
+				}
+			}
+
+			.close-btn {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

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

@@ -53,6 +53,10 @@
 					background-color: transparent !important;
 					position: relative !important;
 
+					&.cm-focused {
+						outline: none !important;
+					}
+
 					&:focus-within {
 						border-color: var(--bg-robin-500);
 					}
@@ -195,3 +199,87 @@
 		}
 	}
 }
+
+.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;
+
+							ul {
+								li {
+									&:hover {
+										background-color: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+									}
+
+									&[aria-selected='true'] {
+										background: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+									}
+								}
+							}
+						}
+
+						.cm-line {
+							background-color: var(--bg-vanilla-100) !important;
+
+							::-moz-selection {
+								background: var(--bg-vanilla-100) !important;
+								opacity: 0.5 !important;
+							}
+
+							::selection {
+								background: var(--bg-vanilla-100) !important;
+								opacity: 0.5 !important;
+							}
+
+							.cm-function {
+								color: var(--bg-robin-500) !important;
+							}
+
+							.chip-decorator {
+								background: var(--bg-robin-500) !important;
+								color: var(--bg-ink-400) !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;
+				}
+			}
+		}
+	}
+}

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

@@ -66,6 +66,10 @@
 			}
 		}
 
+		&.cm-focused {
+			outline: 1px solid var(--bg-slate-200);
+		}
+
 		.cm-tooltip-autocomplete {
 			background: var(--bg-ink-300) !important;
 			border-radius: 2px !important;
@@ -78,7 +82,7 @@
 			left: 0px !important;
 
 			border-radius: 4px;
-			border: 1px solid var(--bg-slate-200, #1d212d);
+			border: 0px;
 			background: linear-gradient(
 				139deg,
 				rgba(18, 19, 23, 0.8) 0%,
@@ -441,76 +445,265 @@
 	}
 }
 
-/* Dark mode support */
+// /* Dark mode support */
-:global(.darkMode) {
+// :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 {
-			border-color: var(--bg-slate-500);
+					.cm-content {
-			background-color: var(--bg-ink-400);
+						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: 0px;
+				backdrop-filter: blur(20px);
+
+				ul {
+					li {
+						background-color: var(--bg-vanilla-100) !important;
+						color: var(--bg-ink-300) !important;
+
+						&:hover {
+							background-color: var(--bg-vanilla-200) !important;
+						}
+					}
+				}
+			}
+
+			.cm-line {
+				background-color: var(--bg-vanilla-100) !important;
+
+				::-moz-selection {
+					background: var(--bg-vanilla-100) !important;
+				}
+
+				::selection {
+					background: var(--bg-vanilla-100) !important;
+				}
+			}
+
+			.cm-selectionBackground {
+				background: var(--bg-vanilla-100) !important;
+			}
 		}
 
 		.cursor-position {
-			background-color: var(--bg-ink-400);
+			color: var(--bg-vanilla-200);
-			color: var(--bg-vanilla-100);
+			background-color: var(--bg-vanilla-100);
 		}
 
 		.query-context {
-			background-color: var(--bg-ink-400);
+			background-color: var(--bg-vanilla-100);
-			color: var(--bg-vanilla-100);
+			border-left: 3px solid var(--bg-vanilla-300);
+			color: var(--bg-vanilla-300) !important;
 
-			h3 {
+			.ant-card-head {
-				color: var(--bg-vanilla-100);
+				color: var(--bg-ink-300) !important;
 			}
 
 			.context-details {
 				p {
 					strong {
-						color: var(--bg-vanilla-200);
+						color: var(--bg-ink-300);
 					}
 				}
 			}
 		}
 
 		.query-examples-card {
-			background-color: var(--bg-ink-400);
+			background-color: var(--bg-vanilla-100);
-			border-color: var(--bg-slate-500);
+			border: 1px solid var(--bg-vanilla-300);
 
+			.query-examples {
 				.ant-collapse-header {
-				color: var(--bg-vanilla-100) !important;
+					color: var(--bg-ink-300) !important;
 				}
 
 				.query-example-tag {
-				background-color: var(--bg-ink-400);
+					background-color: var(--bg-vanilla-100);
-				border-color: var(--bg-slate-500);
+					border: 1px solid var(--bg-vanilla-300);
 
 					&:hover {
-					background-color: var(--bg-ink-300);
+						background-color: var(--bg-vanilla-200);
-					border-color: var(--bg-robin-500);
+						border-color: var(--bg-vanilla-300);
 					}
 
 					.query-example-label {
-					color: var(--bg-vanilla-100);
+						color: var(--bg-ink-300);
 					}
 
 					.query-example-query {
-					color: var(--bg-vanilla-100);
+						color: var(--bg-ink-300);
-					background-color: var(--bg-ink-300);
+						background-color: var(--bg-vanilla-100);
 					}
 
 					.query-example-description {
-					color: var(--bg-vanilla-100);
+						color: var(--bg-ink-300);
+					}
 				}
 			}
 		}
 
 		.context-indicator {
-			background-color: var(--bg-ink-300);
+			background-color: var(--bg-vanilla-100);
-			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.05);
+				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/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -6,7 +6,6 @@
 	transition: left 0.2s linear;
 
 	border-radius: 6px;
-	border: 1px solid var(--Slate-500, #161922);
 	background: var(--Ink-300, #16181d);
 
 	display: flex;
@@ -64,6 +63,7 @@
 .explorer-options {
 	padding: 10px 12px;
 	background: var(--Ink-300, #16181d);
+	border-radius: 2px;
 
 	cursor: default;
 	display: flex;
@@ -232,6 +232,10 @@
 }
 
 .lightMode {
+	.explorer-options-container {
+		background: var(--bg-vanilla-100);
+	}
+
 	.explorer-options {
 		background: transparent;
 		box-shadow: none;

frontend/src/container/QueryBuilder/components/ToolbarActions/ToolbarActions.styles.scss

@@ -127,32 +127,36 @@
 
 .lightMode {
 	.left-toolbar {
+		.filter-btn {
+			border-color: var(--bg-vanilla-300) !important;
+		}
+
 		.left-toolbar-query-actions {
-			border-color: var(--bg-vanilla-300);
+			border-color: var(--bg-vanilla-300) !important;
-			background: var(--bg-vanilla-100);
+			background: var(--bg-vanilla-100) !important;
 
 			.ant-btn {
-				border-color: var(--bg-vanilla-300);
+				border-color: var(--bg-vanilla-300) !important;
-				background: var(--bg-vanilla-100);
+				background: var(--bg-vanilla-100) !important;
-				color: var(--bg-ink-200);
+				color: var(--bg-ink-200) !important;
 
 				&.active-tab {
-					background-color: var(--bg-robin-100);
+					background-color: var(--bg-robin-100) !important;
 				}
 			}
 		}
 	}
 	.loading-container {
 		.loading-btn {
-			background: var(--bg-vanilla-300);
+			background: var(--bg-vanilla-300) !important;
 		}
 
 		.cancel-run {
-			color: var(--bg-vanilla-100);
+			color: var(--bg-vanilla-100) !important;
 		}
 
 		.cancel-run:hover {
-			background-color: #ff7875;
+			background-color: #ff7875 !important;
 		}
 	}
 }

frontend/src/container/Toolbar/Toolbar.styles.scss

@@ -38,3 +38,10 @@
 		}
 	}
 }
+
+.lightMode {
+	.toolbar {
+		border-top: 1px solid var(--bg-vanilla-300);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/periscope.scss

@@ -154,4 +154,23 @@
 		background: var(--bg-vanilla-100);
 		color: var(--bg-ink-200);
 	}
+
+	.periscope-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;
+		}
+	}
 }