Give the editor tab bar a specific separate background

Author: chvp

src/frontend/components/AddFileButton.ts

@@ -24,7 +24,7 @@ export class AddFileButton extends PapyrosElement {
             .add-btn {
                 padding: 0.375rem 0.5rem;
                 border: none;
-                border-bottom: 2px solid var(--md-sys-color-outline-variant);
+                border-bottom: 2px solid var(--md-sys-color-outline);
                 border-radius: 0.375rem 0.375rem 0 0;
                 cursor: pointer;
                 font-size: 1rem;

src/frontend/components/EditorTabs.ts

@@ -18,7 +18,7 @@ export class EditorTabs extends PapyrosElement {
                 flex-direction: row;
                 gap: 0.25rem;
                 padding: 0.25rem 0.25rem 0;
-                background-color: var(--md-sys-color-surface-container);
+                background-color: var(--md-sys-color-surface-dim);
                 border-radius: 0.5rem 0.5rem 0 0;
                 max-height: 2.5rem;
                 flex-shrink: 0;

src/frontend/components/shared-styles.ts

@@ -4,7 +4,7 @@ export const tabButtonStyles: CSSResult = css`
     button {
         padding: 0.375rem 0.75rem;
         border: none;
-        border-bottom: 2px solid var(--md-sys-color-outline-variant);
+        border-bottom: 2px solid var(--md-sys-color-outline);
         border-radius: 0.375rem 0.375rem 0 0;
         cursor: pointer;
         font-size: 0.875rem;