From 1db979f9cddfe787862db6826bb501768730d585 Mon Sep 17 00:00:00 2001 From: Charlotte Van Petegem Date: Tue, 21 Apr 2026 11:56:05 +0200 Subject: [PATCH] Give buttons a hairline border and swap colors --- src/frontend/components/AddFileButton.ts | 6 +++--- src/frontend/components/shared-styles.ts | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/frontend/components/AddFileButton.ts b/src/frontend/components/AddFileButton.ts index f806215c..f11c5fe8 100644 --- a/src/frontend/components/AddFileButton.ts +++ b/src/frontend/components/AddFileButton.ts @@ -23,14 +23,14 @@ export class AddFileButton extends PapyrosElement { .add-btn { padding: 0.375rem 0.5rem; - border: none; + border: 1px solid var(--md-sys-color-outline-variant); border-bottom: 2px solid var(--md-sys-color-outline-variant); border-radius: 0.375rem 0.375rem 0 0; cursor: pointer; font-size: 1rem; line-height: 1; - background-color: var(--md-sys-color-surface-variant); - color: var(--md-sys-color-on-surface-variant); + background-color: var(--md-sys-color-surface); + color: var(--md-sys-color-on-surface); } .add-btn:hover { diff --git a/src/frontend/components/shared-styles.ts b/src/frontend/components/shared-styles.ts index fdbf1f61..d884f852 100644 --- a/src/frontend/components/shared-styles.ts +++ b/src/frontend/components/shared-styles.ts @@ -3,13 +3,13 @@ import { css, CSSResult } from "lit"; export const tabButtonStyles: CSSResult = css` button { padding: 0.375rem 0.75rem; - border: none; + border: 1px solid var(--md-sys-color-outline-variant); border-bottom: 2px solid var(--md-sys-color-outline-variant); border-radius: 0.375rem 0.375rem 0 0; cursor: pointer; font-size: 0.875rem; - background-color: var(--md-sys-color-surface-variant); - color: var(--md-sys-color-on-surface-variant); + background-color: var(--md-sys-color-surface); + color: var(--md-sys-color-on-surface); white-space: nowrap; display: flex; align-items: center; @@ -17,8 +17,8 @@ export const tabButtonStyles: CSSResult = css` } button.active { - background-color: var(--md-sys-color-surface); - color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-variant); + color: var(--md-sys-color-on-surface-variant); font-weight: 600; border-bottom: 2px solid var(--md-sys-color-primary); }