style: simple css names

Author: tyler-dane

packages/web/src/common/calendar-grid/components/CalendarEventCard.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { Priorities } from "@core/constants/core.constants";
+import { gridColorByPriority } from "@web/common/styles/theme.util";
 import { type Schema_GridEvent } from "@web/common/types/web.event.types";
 import { describe, expect, it, mock } from "bun:test";
 import "@testing-library/jest-dom";
@@ -89,6 +90,31 @@ describe("CalendarEventCard", () => {
     expect(onEventMouseDown).not.toHaveBeenCalled();
   });
 
+  it("keeps the timed selected state on the priority color", () => {
+    render(
+      <CalendarTimedEventCard
+        displayMode="saved"
+        event={createEvent({
+          priority: Priorities.WORK,
+        })}
+        isSelected={true}
+        motionMode="idle"
+        position={position}
+      />,
+    );
+
+    const card = screen.getByRole("button", {
+      name: "Timed event: Planning block, 9 - 10 AM",
+    });
+
+    expect(card).toHaveClass("bg-(--event-bg)");
+    expect(card).not.toHaveClass("bg-event-selected");
+    expect(card.style.getPropertyValue("--event-bg")).toBe(
+      gridColorByPriority[Priorities.WORK],
+    );
+    expect(card.style.boxShadow).toContain("rgba(255,255,255,0.55)");
+  });
+
   it("does not open pending timed events from the keyboard", () => {
     const onEventKeyDown = mock();
 

packages/web/src/common/calendar-grid/components/CalendarTimedEventCard.tsx

@@ -106,13 +106,19 @@ const CalendarTimedEventCardBase = (
   const baseColor = gridColorByPriority[priority];
   const draftColor = darken(baseColor, 18);
   const hoverColor = gridHoverColorByPriority[priority];
+  const selectedBoxShadow = "0 0 0 1px rgba(255,255,255,0.55)";
 
   const bgColor = (() => {
     if (isDraft) return draftColor;
     if (isCommitAcknowledged) return hoverColor;
     if (isResizing || isDragging) return brighten(baseColor);
     return baseColor;
   })();
+  const eventBoxShadow = isSelected
+    ? boxShadow
+      ? `${selectedBoxShadow}, ${boxShadow}`
+      : selectedBoxShadow
+    : boxShadow;
 
   const hoverBgColor =
     !isDraft && !isPlaceholder && !isResizing
@@ -139,7 +145,7 @@ const CalendarTimedEventCardBase = (
     top: position.top,
     width: position.width || 0,
     zIndex: position.zIndex ?? ZIndex.LAYER_1,
-    boxShadow,
+    boxShadow: eventBoxShadow,
     filter: isDraft
       ? "drop-shadow(2px 4px 4px black)"
       : isInPast
@@ -201,9 +207,7 @@ const CalendarTimedEventCardBase = (
       tabIndex={0}
       className={cn(
         "absolute min-h-2.5 select-none overflow-hidden rounded-xs pr-0.75 pl-1.25 transition-[background-color,filter] duration-[260ms] ease-[cubic-bezier(0.16,1,0.3,1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-primary",
-        isSelected
-          ? "bg-event-selected shadow-[0_4px_10px_-4px_#00000080]"
-          : "bg-(--event-bg) hover:bg-(--event-hover-bg)",
+        "bg-(--event-bg) hover:bg-(--event-hover-bg)",
         {
           "animate-someday-commit-acknowledge": isCommitAcknowledged,
         },

packages/web/src/common/styles/theme-css.test.ts

@@ -13,7 +13,6 @@ const semanticColorTokens = [
   "border-secondary",
   "date-picker-outside-dark",
   "date-picker-outside-light",
-  "event-selected",
   "fg-primary",
   "fg-primary-dark",
   "gradient-accent-light-start",

packages/web/src/index.css

@@ -14,7 +14,6 @@
   --compass-color-border-primary: hsl(219 18 34 / 20%);
   --compass-color-border-primary-dark: hsl(0 0 0 / 50.2%);
   --compass-color-border-secondary: hsl(47 7 73);
-  --compass-color-event-selected: hsl(206 18 72);
   --compass-color-date-picker-outside-dark: hsl(47 7 63);
   --compass-color-date-picker-outside-light: hsl(222 12 17);
   --compass-color-fg-primary: hsl(47 7 73);
@@ -63,7 +62,6 @@
   --color-border-primary: var(--compass-color-border-primary);
   --color-border-primary-dark: var(--compass-color-border-primary-dark);
   --color-border-secondary: var(--compass-color-border-secondary);
-  --color-event-selected: var(--compass-color-event-selected);
   --color-date-picker-outside-dark: var(
     --compass-color-date-picker-outside-dark
   );