Skip to content

Fix/task drop zone colors #613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tranh0anghuan merged 2 commits into from
Sep 20, 2026
Merged

Fix/task drop zone colors #613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
199e40c
fix(tasks): every drop zone in the create and detail cards lights in …
Sep 20, 2026
3d2026d
chore: remove the test suite
Sep 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 19 additions & 10 deletions src/drumee/builtins/window/tasks/skin/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,14 @@ $theme-colors: (
align-items: center;
justify-content: center;
gap: 12px;
background: rgba(250, 133, 64, 0.08);
border: 2px dashed var(--primary, #fa8540);
background: var(--hover-bg-40, rgba(67, 60, 197, 0.06));
// outline + a negative offset rather than a border, matching
// __desc-editor[data-drop-active] above: every drop zone in the create and
// detail cards now reads as the same affordance, in the same brand colour.
// The offset draws the dashed frame INSIDE inset:0 — an outline is painted
// outside the box by default and would bleed 2px past the zone it marks.
outline: 2px dashed var(--active-border, rgba(67, 60, 197, 0.4));
outline-offset: -2px;
border-radius: 12px;
backdrop-filter: blur(1px);
pointer-events: none;
Expand All @@ -240,16 +246,16 @@ $theme-colors: (
&__drop-overlay-ico {
width: 44px;
height: 44px;
color: var(--primary, #fa8540);
fill: var(--primary, #fa8540);
color: var(--active-border, #5950ff);
fill: var(--active-border, #5950ff);
}

&__drop-overlay-text {
@include drumee.typo(
$size: 15px,
$weight: 600,
$line: 20px,
$color: var(--primary, #fa8540)
$color: var(--active-border, #5950ff)

@chatgpt-codex-connector chatgpt-codex-connector Bot Sep 20, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Use a contrasting drop-label color in dark mode

When dark mode is active, --active-border resolves to #5950ff while the overlay uses --hover-bg-40 over a dark surface. Even over the darkest #0b0a21 surface this gives the 15px label only about 3.3:1 contrast, and on elevated task surfaces it drops further, whereas the previous orange label exceeded 4.5:1. The 13px comment label has the same regression, so keep the purple affordance if desired but use a dark-mode-readable token for its instructional text.

Useful? React with 👍 / 👎.

);
}

Expand Down Expand Up @@ -3598,16 +3604,19 @@ $theme-colors: (
}

// Drop affordance covering one comment (edited row / reply composer) instead
// of the whole panel. Same colours as __drop-overlay, one size down: no icon,
// thinner dash, smaller type — it sits inside a card, not over a modal.
// of the whole panel. Same colours AND the same dashed frame as
// __drop-overlay, one size down on content only: no icon, smaller type — it
// sits inside a card, not over a modal.
&__comment-drop-overlay {
position: absolute;
inset: 0;
z-index: 20;
align-items: center;
justify-content: center;
background: rgba(250, 133, 64, 0.08);
border: 1px dashed var(--primary, #fa8540);
background: var(--hover-bg-40, rgba(67, 60, 197, 0.06));
// See __drop-overlay for why this is an inset outline and not a border.
outline: 2px dashed var(--active-border, rgba(67, 60, 197, 0.4));
outline-offset: -2px;
border-radius: 12px;
pointer-events: none;
opacity: 0;
Expand All @@ -3620,7 +3629,7 @@ $theme-colors: (
$size: 13px,
$weight: 600,
$line: 18px,
$color: var(--primary, #fa8540)
$color: var(--active-border, #5950ff)
);
}

Expand Down
258 changes: 0 additions & 258 deletions tests/billing-checkout-tab-always-available.test.js
View file
Open in desktop

This file was deleted.

Loading
Loading