Merge pull request #31732 from overleaf/mj-go-to-line-theme

[web] Follow overall theme in go-to-line dialog

GitOrigin-RevId: f4f91133d786612bdb55fe775305185fab64afec

services/web/frontend/js/features/source-editor/extensions/go-to-line.ts

@@ -25,9 +25,11 @@ const gotoLineTheme = EditorView.baseTheme({
   '.cm-panel.cm-gotoLine': {
     padding: '10px',
     fontSize: '14px',
+    backgroundColor: 'var(--bg-secondary-themed)',
     '& label': {
       margin: 0,
       fontSize: '14px',
+      color: 'var(--content-primary-themed)',
       '& .cm-textfield': {
         margin: '0 10px',
         maxWidth: '100px',
@@ -35,19 +37,18 @@ const gotoLineTheme = EditorView.baseTheme({
         padding: '5px 16px',
         fontSize: '14px',
         fontWeight: 'normal',
-        lineHeight: 'var(--line-height-base)',
-        color: 'var(--input-color)',
-        backgroundColor: '#fff',
+        color: 'var(--content-primary-themed)',
+        backgroundColor: 'var(--bg-primary-themed)',
+        border: '1px solid var(--border-primary-themed)',
         backgroundImage: 'none',
-        borderRadius: 'var(--input-border-radius)',
+        borderRadius: 'var(--border-radius-full)',
         boxShadow: 'inset 0 1px 1px rgb(0 0 0 / 8%)',
         transition:
           'border-color ease-in-out .15s, box-shadow ease-in-out .15s',
         '&:focus-visible': {
           outline: 'none',
-        },
-        '&:focus': {
-          borderColor: 'var(--input-border-focus)',
+          boxShadow:
+            'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
         },
       },
     },
@@ -55,13 +56,17 @@ const gotoLineTheme = EditorView.baseTheme({
       padding: '4px 16px 5px',
       textTransform: 'capitalize',
       fontSize: '14px',
-      lineHeight: 'var(--line-height-base)',
       userSelect: 'none',
       backgroundImage: 'none',
-      backgroundColor: 'var(--btn-default-bg)',
-      borderRadius: 'var(--btn-border-radius-base)',
+      backgroundColor: 'var(--bg-secondary-themed)',
+      borderRadius: 'var(--border-radius-full)',
       border: '0 solid transparent',
-      color: '#fff',
+      color: 'var(--content-primary-themed)',
+      fontWeight: '600',
+      transition: 'background-color ease-in-out .15s',
+      '&:hover': {
+        backgroundColor: 'var(--bg-tertiary-themed)',
+      },
     },
   },
 })