root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-844): add theme-driven logo and CTA button token system

Browse Source 
- Add CSS custom properties (--kb-logo-accent, --kb-cta-*) for logo accent color and new-task action buttons
- Update logo.svg to use currentColor for theme-aware accent stroke
- Apply tokenized styling to Header logo, QuickEntryBox, InlineCreateCard, ListView, and Column new-task buttons
- Add theme-aware test assertions for logo and CTA buttons in Header, InlineCreateCard, ListView, and QuickEntryBox tests
- Document theme token system in dashboard README
This commit is contained in:
gsxdsm
2026-04-04 04:13:36 -07:00
parent c5bbb4bcb5
commit e4019c0c99
12 changed files with 111 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/dashboard/app/styles.css
View File

@@ -100,6 +100,17 @@
--color-error: #f85149;
--color-error-dark: #da3633;
--color-muted: #8b949e;
/* Logo & branding tokens */
--logo-accent: var(--todo);
/* Task-creation CTA tokens */
--cta-bg: #238636;
--cta-border: #2ea043;
--cta-text: #fff;
--cta-bg-hover: #2ea043;
--cta-border-hover: #3fb950;
--cta-glow: 0 0 8px rgba(46, 160, 67, 0.3);
}
html,
@@ -138,6 +149,7 @@ body {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--logo-accent);
}
.header-actions {
display: flex;
@@ -598,6 +610,7 @@ body {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--logo-accent);
}
/* === Buttons === */
.btn {
@@ -640,6 +653,18 @@ body {
box-shadow: var(--shadow-glow);
}
/* Theme-driven task-creation CTA — uses tokens so every color theme updates consistently */
.btn-task-create {
background: var(--cta-bg);
border-color: var(--cta-border);
color: var(--cta-text);
}
.btn-task-create:hover {
background: var(--cta-bg-hover);
border-color: var(--cta-border-hover);
box-shadow: var(--cta-glow);
}
.btn-danger {
background: var(--color-error-dark);
border-color: var(--color-error);
@@ -7982,6 +8007,16 @@ html .column.drag-over * {
background: #0969da;
}
[data-theme="light"] .btn-task-create {
background: #1a7f37;
border-color: #1f883d;
}
[data-theme="light"] .btn-task-create:hover {
background: #1f883d;
box-shadow: var(--shadow-glow);
}
[data-theme="light"] .btn-primary {
background: #1a7f37;
border-color: #1f883d;
@@ -8459,14 +8494,16 @@ html .column.drag-over * {
font-weight: 600;
}
[data-color-theme="factory"] .btn-primary {
[data-color-theme="factory"] .btn-primary,
[data-color-theme="factory"] .btn-task-create {
background: transparent;
border-color: var(--todo);
color: var(--todo);
box-shadow: none;
}
[data-color-theme="factory"] .btn-primary:hover {
[data-color-theme="factory"] .btn-primary:hover,
[data-color-theme="factory"] .btn-task-create:hover {
background: var(--todo);
color: var(--bg);
box-shadow: var(--shadow-glow);