feat(design): surface phase PR 7 — edge surfaces polish
Per the spec, the final per-surface PR bundles the smaller / chrome-y / library-driven views (Header / Home / Calendar / Graph) together with EventSlideOver since it's the calendar's primary interaction surface. Button reclassification per Hybrid rule - CalendarView btn-new-event: accent gradient → Moss action-primary. Creating an event is a workflow action, not a brand moment. - EventSlideOver btn-primary (Save): accent gradient → Moss - EventSlideOver btn-secondary (Cancel/No): muted ghost → Bronze action-secondary - EventSlideOver btn-danger-ghost (Delete): hardcoded #ef4444 → --color-action-destructive ghost (with filled hover) - EventSlideOver btn-danger (confirm Delete): hardcoded #ef4444 → --color-action-destructive filled Brand-moment CTAs kept on accent - HomeView btn-workspace-hero: home-page hero CTA into the active project — central brand-moment surface, gradient stays - HomeView btn-workspace-sm: per-card workspace icon with the accent-tinted bg + hover-to-accent pattern, kept Two-weights-only - Snapped every font-weight 600/700 to 500 across the bundle (HomeView, GraphView, CalendarView, AppHeader, EventSlideOver). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -174,7 +174,7 @@ router.afterEach(() => {
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
font-style: italic;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
letter-spacing: -0.01em;
|
||||
color: #c4b0f0;
|
||||
@@ -219,7 +219,7 @@ router.afterEach(() => {
|
||||
}
|
||||
.nav-link.router-link-active {
|
||||
color: var(--color-primary-solid);
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
background: rgba(91, 74, 138, 0.25);
|
||||
box-shadow: 0 0 16px rgba(91, 74, 138, 0.3);
|
||||
}
|
||||
@@ -294,7 +294,7 @@ router.afterEach(() => {
|
||||
}
|
||||
.admin-badge {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-primary);
|
||||
|
||||
@@ -390,7 +390,7 @@ async function doDelete() {
|
||||
|
||||
.so-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
}
|
||||
@@ -420,7 +420,7 @@ async function doDelete() {
|
||||
|
||||
.so-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
@@ -492,53 +492,61 @@ async function doDelete() {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* Save (in slide-over): Moss action-primary */
|
||||
.btn-primary {
|
||||
background: var(--gradient-cta);
|
||||
background: var(--color-action-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 1.2rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-primary:hover:not(:disabled) { opacity: 0.88; }
|
||||
.btn-primary:hover:not(:disabled) { background: var(--color-action-primary-hover); }
|
||||
|
||||
/* Cancel: Bronze action-secondary */
|
||||
.btn-secondary {
|
||||
background: var(--color-input-bg, #111113);
|
||||
border: 1px solid var(--color-border, #2a2b30);
|
||||
color: var(--color-text-muted, #888);
|
||||
background: var(--color-action-secondary);
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-secondary:hover { background: var(--color-hover, rgba(255,255,255,0.06)); }
|
||||
.btn-secondary:hover { background: var(--color-action-secondary-hover); }
|
||||
|
||||
/* Delete (entry-point): Oxblood action-destructive ghost */
|
||||
.btn-danger-ghost {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: 1px solid #ef4444;
|
||||
color: #ef4444;
|
||||
border: 1px solid var(--color-action-destructive);
|
||||
color: var(--color-action-destructive);
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
.btn-danger-ghost:hover { background: rgba(239, 68, 68, 0.1); }
|
||||
.btn-danger-ghost:hover { background: var(--color-action-destructive); color: #fff; }
|
||||
|
||||
/* Confirm-delete: Oxblood filled */
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
background: var(--color-action-destructive);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-danger:hover:not(:disabled) { background: var(--color-action-destructive-hover); }
|
||||
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.delete-confirm-label {
|
||||
|
||||
@@ -426,23 +426,24 @@ const upcomingGrouped = computed(() => {
|
||||
|
||||
.cal-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
}
|
||||
|
||||
/* New event: Moss action-primary — workflow action, not a brand moment */
|
||||
.btn-new-event {
|
||||
background: var(--gradient-cta);
|
||||
background: var(--color-action-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.55rem 1.1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.btn-new-event:hover { opacity: 0.88; }
|
||||
.btn-new-event:hover { background: var(--color-action-primary-hover); }
|
||||
|
||||
.fc-wrapper {
|
||||
background: var(--color-surface);
|
||||
@@ -459,7 +460,7 @@ const upcomingGrouped = computed(() => {
|
||||
}
|
||||
:deep(.fc-toolbar-title) {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
@@ -530,7 +531,7 @@ const upcomingGrouped = computed(() => {
|
||||
|
||||
.picker-year-label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
}
|
||||
|
||||
@@ -573,7 +574,7 @@ const upcomingGrouped = computed(() => {
|
||||
.picker-month.active {
|
||||
background: rgba(91, 74, 138,0.22);
|
||||
color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Upcoming strip ─────────────────────────────────────────────────────── */
|
||||
@@ -583,7 +584,7 @@ const upcomingGrouped = computed(() => {
|
||||
|
||||
.upcoming-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
@@ -599,7 +600,7 @@ const upcomingGrouped = computed(() => {
|
||||
|
||||
.upcoming-day-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -642,7 +643,7 @@ const upcomingGrouped = computed(() => {
|
||||
|
||||
.upcoming-card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -697,7 +698,7 @@ const upcomingGrouped = computed(() => {
|
||||
|
||||
.popover-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
color: var(--color-text, #e8e9f0);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
@@ -741,7 +742,7 @@ const upcomingGrouped = computed(() => {
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
@@ -759,7 +759,7 @@ onUnmounted(() => {
|
||||
|
||||
.tooltip-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@@ -821,7 +821,7 @@ onUnmounted(() => {
|
||||
|
||||
.peek-type-badge {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.15rem 0.45rem;
|
||||
@@ -860,7 +860,7 @@ onUnmounted(() => {
|
||||
margin: 0;
|
||||
padding: 0.75rem 0.75rem 0.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -898,7 +898,7 @@ onUnmounted(() => {
|
||||
|
||||
.peek-linked-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-text-muted);
|
||||
@@ -933,7 +933,7 @@ onUnmounted(() => {
|
||||
|
||||
.peek-linked-type {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
border-radius: 50%;
|
||||
|
||||
@@ -585,14 +585,14 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
}
|
||||
.hero-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -610,7 +610,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 1px 6px rgba(91, 74, 138, 0.3);
|
||||
transition: opacity 0.15s, box-shadow 0.15s;
|
||||
@@ -625,7 +625,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
|
||||
.hero-section-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--color-text-muted);
|
||||
@@ -688,7 +688,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.section-header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
|
||||
.section-header h2 { margin: 0; font-size: 1rem; font-weight: 500; }
|
||||
.see-all { font-size: 0.85rem; color: var(--color-primary); text-decoration: none; }
|
||||
.see-all:hover { text-decoration: underline; }
|
||||
|
||||
@@ -718,7 +718,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
}
|
||||
.project-card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
flex: 1;
|
||||
@@ -799,7 +799,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
.inbox-header h2 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
@@ -911,7 +911,7 @@ function formatUpcomingTime(event: EventEntry): string {
|
||||
}
|
||||
.upcoming-event-title {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
Reference in New Issue
Block a user