Revert "Revert "adding all button variants as dark mode (#30989)" (#31145)" (#31148)

This reverts commit c8296444ed68ca30ab330c6e0d6e3b9466f102e0.

GitOrigin-RevId: d7a3252fc4590f5fd12ed1b882faca7e38f3a208

services/web/frontend/js/features/source-editor/extensions/search.ts

@@ -301,12 +301,13 @@ export const search = (initialSearchQuery: SearchQuery | null) => {
 
 const searchFormTheme = EditorView.theme({
   '.ol-cm-search-form': {
-    '--ol-cm-search-form-gap': '10px',
-    '--ol-cm-search-form-button-margin': '3px',
+    '--ol-cm-search-form-gap': 'var(--spacing-05)',
+    '--ol-cm-search-form-button-margin': 'var(--spacing-02)',
+    '--input-border': 'var(--border-primary)',
+    '--input-border-focus': 'var(--border-active)',
     padding: 'var(--ol-cm-search-form-gap)',
     display: 'flex',
     gap: 'var(--ol-cm-search-form-gap)',
-    background: 'var(--neutral-20)',
     '--ol-cm-search-form-focus-shadow':
       'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
     '--ol-cm-search-form-error-shadow':
@@ -316,12 +317,6 @@ const searchFormTheme = EditorView.theme({
       padding: 'var(--spacing-03) var(--spacing-05)',
     },
   },
-  '&.ol-cm-search-form': {
-    '--ol-cm-search-form-gap': 'var(--spacing-05)',
-    '--ol-cm-search-form-button-margin': 'var(--spacing-02)',
-    '--input-border': 'var(--border-primary)',
-    '--input-border-focus': 'var(--border-active)',
-  },
   '.ol-cm-search-controls': {
     display: 'grid',
     gridTemplateColumns: 'auto auto',
@@ -345,24 +340,30 @@ const searchFormTheme = EditorView.theme({
     alignItems: 'center',
   },
   '.ol-cm-search-input-group': {
-    border: '1px solid var(--input-border)',
+    backgroundColor: 'var(--bg-primary-themed)',
+    border: '1px solid var(--border-primary-themed)',
     borderRadius: '20px',
-    background: 'white',
     width: '100%',
     maxWidth: '50em',
     display: 'inline-flex',
     alignItems: 'center',
+    '--input-field-color': 'var(--content-primary-themed)',
+    '--input-field-bg': 'var(--bg-primary-themed)',
+    '--input-placeholder-content': 'var(--content-placeholder-themed)',
+    '--input-field-content-disabled': 'var(--content-disabled-themed)',
     '& input[type="text"]': {
       background: 'none',
       boxShadow: 'none',
+      borderRadius: '20px',
     },
     '& input[type="text"]:focus': {
       outline: 'none',
+      background: 'none',
       boxShadow: 'none',
     },
     '& .btn.btn': {
-      background: 'var(--neutral-10)',
-      color: 'var(--neutral-60)',
+      background: 'var(--bg-secondary-themed)',
+      color: 'var(--content-secondary-themed)',
       borderRadius: '50%',
       height: '2em',
       display: 'inline-flex',
@@ -379,9 +380,11 @@ const searchFormTheme = EditorView.theme({
       },
     },
     '&:focus-within': {
-      borderColor: 'var(--input-border-focus)',
       boxShadow: 'var(--ol-cm-search-form-focus-shadow)',
     },
+    '& .form-control': {
+      color: 'var(--content-primary-themed)',
+    },
   },
   '.ol-cm-search-input-group.ol-cm-search-input-error': {
     '&:focus-within': {
@@ -406,7 +409,7 @@ const searchFormTheme = EditorView.theme({
   },
   '.ol-cm-search-form-position': {
     flexShrink: 0,
-    color: 'var(--content-secondary)',
+    color: 'var(--content-secondary-themed)',
     minWidth: '5em',
   },
   '.ol-cm-search-hidden-inputs': {

services/web/frontend/js/features/source-editor/extensions/theme.ts

@@ -188,6 +188,12 @@ const staticTheme = EditorView.theme({
   '&.cm-editor.cm-focused:not(:focus-visible)': {
     outline: 'none',
   },
+  '.cm-panels': {
+    backgroundColor: 'var(--bg-secondary-themed)',
+  },
+  '.cm-panel-bottom': {
+    borderTop: '1px solid var(--border-primary-themed)',
+  },
   // override default styles for the search panel
   '.cm-panel.cm-search label': {
     display: 'inline-flex',

services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts

@@ -320,7 +320,7 @@ const toolbarTheme = EditorView.theme({
 })
 
 const toolbarBorderTheme = EditorView.baseTheme({
-  '&light.overall-theme-dark .cm-panels-top': {
+  '&.overall-theme-dark .cm-panels-top': {
     borderBottom: '1px solid var(--border-divider-dark)',
   },
 })