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

This reverts commit a67ea76d5e03e96c1df8a17063aa332e7cb2d1a3.

GitOrigin-RevId: c8296444ed68ca30ab330c6e0d6e3b9466f102e0

services/web/frontend/js/features/source-editor/components/codemirror-search-form.tsx

@@ -38,7 +38,6 @@ import { EditorSelection, EditorState } from '@codemirror/state'
 import { sendSearchEvent } from '@/features/event-tracking/search-events'
 import { FullProjectSearchButton } from './full-project-search-button'
 import { isInvalidRegExp } from '../utils/regexp'
-import { useActiveOverallTheme } from '@/shared/hooks/use-active-overall-theme'
 
 const MATCH_COUNT_DEBOUNCE_WAIT = 100 // the amount of ms to wait before counting matches
 const MAX_MATCH_COUNT = 999 // the maximum number of matches to count
@@ -83,8 +82,6 @@ const CodeMirrorSearchForm: FC<React.PropsWithChildren> = () => {
   const inputRef = useRef<HTMLInputElement | null>(null)
   const replaceRef = useRef<HTMLInputElement | null>(null)
 
-  const overallTheme = useActiveOverallTheme()
-
   const handleInputRef = useCallback((node: HTMLInputElement) => {
     inputRef.current = node
 
@@ -421,7 +418,7 @@ const CodeMirrorSearchForm: FC<React.PropsWithChildren> = () => {
         <div className="ol-cm-search-form-group ol-cm-search-next-previous">
           <OLButtonGroup className="ol-cm-search-form-button-group">
             <OLButton
-              variant="ghost"
+              variant="secondary"
               size="sm"
               onClick={() => findPrevious(view)}
             >
@@ -431,7 +428,11 @@ const CodeMirrorSearchForm: FC<React.PropsWithChildren> = () => {
               />
             </OLButton>
 
-            <OLButton variant="ghost" size="sm" onClick={() => findNext(view)}>
+            <OLButton
+              variant="secondary"
+              size="sm"
+              onClick={() => findNext(view)}
+            >
               <MaterialIcon
                 type="keyboard_arrow_down"
                 accessibilityLabel={t('search_next')}
@@ -455,7 +456,7 @@ const CodeMirrorSearchForm: FC<React.PropsWithChildren> = () => {
         {showReplace && (
           <div className="ol-cm-search-form-group ol-cm-search-replace-buttons">
             <OLButton
-              variant="ghost"
+              variant="secondary"
               size="sm"
               onClick={() => {
                 sendSearchEvent('search-replace-click', {
@@ -470,7 +471,7 @@ const CodeMirrorSearchForm: FC<React.PropsWithChildren> = () => {
             </OLButton>
 
             <OLButton
-              variant="ghost"
+              variant="secondary"
               size="sm"
               onClick={() => {
                 sendSearchEvent('search-replace-click', {
@@ -489,10 +490,7 @@ const CodeMirrorSearchForm: FC<React.PropsWithChildren> = () => {
 
       <div className="ol-cm-search-form-close">
         <OLTooltip id="search-close" description={<>{t('close')} (Esc)</>}>
-          <OLCloseButton
-            variant={overallTheme === 'dark' ? 'white' : undefined}
-            onClick={() => closeSearchPanel(view)}
-          />
+          <OLCloseButton onClick={() => closeSearchPanel(view)} />
         </OLTooltip>
       </div>
     </form>

services/web/frontend/js/features/source-editor/components/full-project-search-button.tsx

@@ -47,7 +47,7 @@ export const FullProjectSearchButton = ({ query }: { query: SearchQuery }) => {
         overlayProps={{ placement: 'top' }}
         description={t('search_all_project_files')}
       >
-        <OLButton variant="ghost" size="sm" onClick={onClick}>
+        <OLButton variant="secondary" size="sm" onClick={onClick}>
           <MaterialIcon
             type="manage_search"
             accessibilityLabel={t('search_all_project_files')}

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

@@ -301,13 +301,12 @@ export const search = (initialSearchQuery: SearchQuery | null) => {
 
 const searchFormTheme = EditorView.theme({
   '.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-form-gap': '10px',
+    '--ol-cm-search-form-button-margin': '3px',
     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':
@@ -317,6 +316,12 @@ 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',
@@ -340,30 +345,24 @@ const searchFormTheme = EditorView.theme({
     alignItems: 'center',
   },
   '.ol-cm-search-input-group': {
-    backgroundColor: 'var(--bg-primary-themed)',
-    border: '1px solid var(--border-primary-themed)',
+    border: '1px solid var(--input-border)',
     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(--bg-secondary-themed)',
-      color: 'var(--content-secondary-themed)',
+      background: 'var(--neutral-10)',
+      color: 'var(--neutral-60)',
       borderRadius: '50%',
       height: '2em',
       display: 'inline-flex',
@@ -380,11 +379,9 @@ 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': {
@@ -409,7 +406,7 @@ const searchFormTheme = EditorView.theme({
   },
   '.ol-cm-search-form-position': {
     flexShrink: 0,
-    color: 'var(--content-secondary-themed)',
+    color: 'var(--content-secondary)',
     minWidth: '5em',
   },
   '.ol-cm-search-hidden-inputs': {

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

@@ -188,12 +188,6 @@ 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({
-  '&.overall-theme-dark .cm-panels-top': {
+  '&light.overall-theme-dark .cm-panels-top': {
     borderBottom: '1px solid var(--border-divider-dark)',
   },
 })

services/web/frontend/stories/shared/buttons.stories.tsx

@@ -23,46 +23,22 @@ const variants: ButtonProps['variant'][] = [
 export const Variants: Story = {
   render() {
     return (
-      <>
-        <div className="d-flex flex-column gap-2 p-4">
-          {variants.map(variant => (
-            <div key={variant} className="d-flex gap-2">
-              <OLButton variant={variant}>Button</OLButton>
-              <OLButton variant={variant} isLoading>
-                Button
-              </OLButton>
-              <OLButton variant={variant} disabled>
-                Button
-              </OLButton>
-              <OLButton variant={variant} size="sm">
-                Button
-              </OLButton>
-            </div>
-          ))}
-        </div>
-        <h1> Dark Mode</h1>
-        <br />
-        <div
-          className="d-flex flex-column gap-2 p-4 ide-redesign-main"
-          data-theme="default"
-          style={{ backgroundColor: '#2f3a4c' }}
-        >
-          {variants.map(variant => (
-            <div key={variant} className="d-flex gap-2">
-              <OLButton variant={variant}>Button</OLButton>
-              <OLButton variant={variant} isLoading>
-                Button
-              </OLButton>
-              <OLButton variant={variant} disabled>
-                Button
-              </OLButton>
-              <OLButton variant={variant} size="sm">
-                Button
-              </OLButton>
-            </div>
-          ))}
-        </div>
-      </>
+      <div className="d-flex flex-column gap-2">
+        {variants.map(variant => (
+          <div key={variant} className="d-flex gap-2">
+            <OLButton variant={variant}>Button</OLButton>
+            <OLButton variant={variant} isLoading>
+              Button
+            </OLButton>
+            <OLButton variant={variant} disabled>
+              Button
+            </OLButton>
+            <OLButton variant={variant} size="sm">
+              Button
+            </OLButton>
+          </div>
+        ))}
+      </div>
     )
   },
 }

services/web/frontend/stylesheets/abstracts/mixins.scss

@@ -75,6 +75,39 @@
   );
 }
 
+// util for creating the base themes for each button, only usable when scoped to -themed available classes
+// currently only primary and secondary buttons implemented
+// todo: once all button types have matching light/dark designs, remove mixin and implement in buttons.scss
+@mixin ol-button-themed($variant) {
+  // primary button remains the same in both dark and light
+  @if $variant == 'primary' {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-accent-01),
+      $hover-background: var(--bg-accent-02),
+      $hover-border: var(--bg-accent-02)
+    );
+  } @else if $variant == 'secondary' {
+    @include ol-button-variant(
+      $color: var(--content-primary-themed),
+      $background: var(--bg-primary-themed),
+      $border: var(--border-primary-themed),
+      $hover-background: var(--bg-secondary-themed),
+      $hover-border: var(--border-hover-themed),
+      $borderless: false
+    );
+  } @else {
+    @include ol-button-variant(
+      $color: var(--content-primary-themed),
+      $background: var(--bg-primary-themed),
+      $border: var(--border-primary-themed),
+      $hover-background: var(--bg-secondary-themed),
+      $hover-border: var(--border-hover-themed),
+      $borderless: false
+    );
+  }
+}
+
 @mixin reset-button() {
   padding: 0;
   cursor: pointer;

services/web/frontend/stylesheets/components/button.scss

@@ -1,108 +1,3 @@
-@mixin light-buttons {
-  // primary
-  --btn-primary-color: var(--white);
-  --btn-primary-background: var(--bg-accent-01);
-  --btn-primary-hover-background: var(--bg-accent-02);
-  --btn-primary-hover-border: var(--bg-accent-02);
-
-  // secondary
-  --btn-secondary-color: var(--content-primary);
-  --btn-secondary-background: var(--bg-light-primary);
-  --btn-secondary-border: var(--border-primary);
-  --btn-secondary-hover-background: var(--bg-light-tertiary);
-  --btn-secondary-hover-border: var(--border-primary);
-
-  // ghost
-  --btn-ghost-color: var(--content-primary);
-  --btn-ghost-background: var(--bg-light-primary);
-  --btn-ghost-hover-background: var(--bg-light-tertiary);
-
-  // danger
-  --btn-danger-color: var(--white);
-  --btn-danger-background: var(--bg-danger-01);
-  --btn-danger-border: var(--bg-danger-01);
-  --btn-danger-hover-background: var(--bg-danger-02);
-
-  // danger-ghost
-  --btn-danger-ghost-color: var(--content-danger);
-  --btn-danger-ghost-background: var(--bg-light-primary);
-  --btn-danger-ghost-hover-background: var(--bg-danger-03);
-  --btn-danger-ghost-border: var(--bg-light-primary);
-  --btn-danger-ghost-hover-border: var(--bg-light-primary);
-
-  // premium
-  --btn-premium-color: var(--white);
-  --btn-premium-background: var(--blue-70);
-  --btn-premium-hover-background: var(--blue-70);
-
-  // premium-secondary
-  --btn-premium-secondary-color: var(--blue-60);
-  --btn-premium-secondary-background: var(--bg-light-primary);
-  --btn-premium-secondary-border: var(--blue-60);
-  --btn-premium-secondary-hover-background: var(--bg-info-03);
-  --btn-premium-secondary-hover-border: var(--blue-60);
-}
-
-@mixin dark-buttons {
-  // primary
-  --btn-primary-color: var(--white);
-  --btn-primary-background: var(--bg-accent-01);
-  --btn-primary-hover-background: var(--bg-accent-02);
-  --btn-primary-hover-border: var(--bg-accent-02);
-
-  // secondary
-  --btn-secondary-color: var(--white);
-  --btn-secondary-background: var(--bg-dark-primary);
-  --btn-secondary-border: var(--bg-light-primary);
-  --btn-secondary-hover-background: var(--bg-dark-tertiary);
-  --btn-secondary-hover-border: var(--bg-light-primary);
-
-  // ghost
-  --btn-ghost-color: var(--white);
-  --btn-ghost-background: var(--bg-dark-secondary);
-  --btn-ghost-hover-background: var(--bg-dark-tertiary);
-
-  // danger
-  --btn-danger-color: var(--white);
-  --btn-danger-background: var(--bg-danger-01);
-  --btn-danger-border: var(--bg-danger-01);
-  --btn-danger-hover-background: var(--bg-danger-02);
-
-  // danger-ghost
-  --btn-danger-ghost-color: var(--bg-danger-03);
-  --btn-danger-ghost-background: var(--bg-dark-secondary);
-  --btn-danger-ghost-hover-background: var(--bg-dark-tertiary);
-  --btn-danger-ghost-border: var(--bg-danger-01);
-  --btn-danger-ghost-hover-border: var(--bg-danger-01);
-
-  // premium
-  --btn-premium-color: var(--white);
-  --btn-premium-background: var(--blue-70);
-  --btn-premium-hover-background: var(--blue-70);
-
-  // premium-secondary, todo once WIP designs for dm are finished
-  --btn-premium-secondary-color: var(--content-primary);
-  --btn-premium-secondary-background: var(--blue-30);
-  --btn-premium-secondary-border: var(--blue-60);
-  --btn-premium-secondary-hover-background: var(--blue-30);
-  --btn-premium-secondary-hover-border: var(--blue-60);
-}
-
-:root {
-  .btn {
-    @include light-buttons;
-  }
-
-  @include theme('default') {
-    .ide-redesign-main,
-    .project-ds-nav-page {
-      .btn {
-        @include dark-buttons;
-      }
-    }
-  }
-}
-
 .btn {
   // Focus style for all buttons
   --bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
@@ -140,73 +35,70 @@
   // Variants
   &.btn-primary {
     @include ol-button-variant(
-      $color: var(--btn-primary-color),
-      $background: var(--btn-primary-background),
-      $hover-background: var(--btn-primary-hover-background),
-      $hover-border: var(--btn-primary-hover-border)
+      $color: var(--white),
+      $background: var(--bg-accent-01),
+      $hover-background: var(--bg-accent-02),
+      $hover-border: var(--bg-accent-02)
     );
   }
 
   &.btn-secondary {
     @include ol-button-variant(
-      $color: var(--btn-secondary-color),
-      $background: var(--btn-secondary-background),
-      $border: var(--btn-secondary-border),
-      $hover-background: var(--btn-secondary-hover-background),
-      $hover-border: var(--btn-secondary-hover-border),
+      $color: var(--content-primary),
+      $background: var(--bg-light-primary),
+      $border: var(--border-primary),
+      $hover-background: var(--bg-light-tertiary),
+      $hover-border: var(--border-primary),
       $borderless: false
     );
   }
 
   &.btn-ghost {
     @include ol-button-variant(
-      $color: var(--btn-ghost-color),
-      $background: var(--btn-ghost-background),
-      $hover-background: var(--btn-ghost-hover-background)
+      $color: var(--content-primary),
+      $background: var(--bg-light-primary),
+      $hover-background: var(--bg-light-tertiary)
     );
   }
 
   &.btn-danger {
     @include ol-button-variant(
-      $color: var(--btn-danger-color),
-      $background: var(--btn-danger-background),
-      $border: var(--btn-danger-border),
-      $hover-background: var(--btn-danger-hover-background)
+      $color: var(--white),
+      $background: var(--bg-danger-01),
+      $border: var(--bg-danger-01),
+      $hover-background: var(--bg-danger-02)
     );
   }
 
   &.btn-danger-ghost {
     @include ol-button-variant(
-      $color: var(--btn-danger-ghost-color),
-      $background: var(--btn-danger-ghost-background),
-      $border: var(--btn-danger-ghost-border),
-      $hover-background: var(--btn-danger-ghost-hover-background),
-      $hover-border: var(--btn-danger-ghost-hover-border),
-      $borderless: false
+      $color: var(--content-danger),
+      $background: var(--bg-light-primary),
+      $hover-background: var(--bg-danger-03)
     );
   }
 
   &.btn-premium {
     @include ol-button-variant(
-      $color: var(--btn-premium-color),
-      $background: var(--btn-premium-background)
+      $color: var(--white),
+      $background: var(--blue-70)
     );
 
     background: var(--premium-gradient);
     transition: none;
 
     &:hover {
-      background: var(--btn-premium-hover-background);
+      background: var(--blue-70);
     }
   }
 
   &.btn-premium-secondary {
     @include ol-button-variant(
-      $color: var(--btn-premium-secondary-color),
-      $background: var(--btn-premium-secondary-background),
-      $border: var(--btn-premium-secondary-border),
-      $hover-background: var(--btn-premium-secondary-hover-background),
-      $hover-border: var(--btn-premium-secondary-hover-border),
+      $color: var(--blue-60),
+      $background: var(--bg-light-primary),
+      $border: var(--blue-60),
+      $hover-background: var(--bg-info-03),
+      $hover-border: var(--blue-60),
       $borderless: false
     );
   }

services/web/frontend/stylesheets/components/modal.scss

@@ -8,7 +8,6 @@
   @include form-check-light;
   @include light-notification;
   @include light-input;
-  @include light-buttons;
 }
 
 @include media-breakpoint-up(sm) {

services/web/frontend/stylesheets/pages/project-list-ds-nav.scss

@@ -173,6 +173,12 @@ body {
           color: inherit;
         }
 
+        .notification-body {
+          .btn {
+            @include ol-button-themed('secondary');
+          }
+        }
+
         p {
           margin-bottom: var(--spacing-03);
         }
@@ -311,11 +317,6 @@ body {
         z-index: auto;
       }
     }
-
-    .btn-link {
-      --link-color: var(--link-web-themed);
-      --link-hover-color: var(--link-web-hover-themed);
-    }
   }
 
   .ds-nav-icon-dropdown {