From 62d917d65d9b81c01f444413a328070951d98170 Mon Sep 17 00:00:00 2001
From: Zhihao Cui <5257855+origami-z@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:58:49 +0100
Subject: [PATCH] Update styling of date picker and calendar (#3695)

---
 .changeset/hip-mirrors-attend.md                | 11 +++++++++++
 .../lab/src/calendar/internal/CalendarDay.css   | 17 +++++++++++++++--
 .../lab/src/date-picker/DatePickerPanel.css     |  1 +
 .../stories/calendar/calendar.qa.stories.tsx    | 11 +++++++++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/hip-mirrors-attend.md

diff --git a/.changeset/hip-mirrors-attend.md b/.changeset/hip-mirrors-attend.md
new file mode 100644
index 0000000000..ce723f7029
--- /dev/null
+++ b/.changeset/hip-mirrors-attend.md
@@ -0,0 +1,11 @@
+---
+"@salt-ds/lab": minor
+---
+
+Updated styling of date picker and calendar
+
+- Corner radius support for date picker panel in theme next
+- Corner radius support for calendar selected days in theme next
+- Use accent color for today indicator and highlight color in calendar
+
+Closes #3530.
diff --git a/packages/lab/src/calendar/internal/CalendarDay.css b/packages/lab/src/calendar/internal/CalendarDay.css
index 83c3b67e01..b39925a729 100644
--- a/packages/lab/src/calendar/internal/CalendarDay.css
+++ b/packages/lab/src/calendar/internal/CalendarDay.css
@@ -44,8 +44,21 @@
 .saltCalendarDay-hoveredOffset:hover {
   background: var(--salt-selectable-background-hover);
 }
+
+.saltCalendarDay-selected {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+
 .saltCalendarDay-selectedStart {
   z-index: var(--salt-zIndex-default);
+
+  border-top-left-radius: var(--salt-palette-corner-weak, 0);
+  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);
+}
+
+.saltCalendarDay-selectedEnd {
+  border-top-right-radius: var(--salt-palette-corner-weak, 0);
+  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);
 }
 
 .saltCalendarDay-selected,
@@ -83,7 +96,7 @@
   top: calc(var(--salt-spacing-100) * -1);
   right: calc(var(--salt-spacing-100) * -1);
   transform: rotate(45deg);
-  background: var(--salt-selectable-borderColor-selected);
+  background: var(--salt-accent-background);
   position: absolute;
 }
 
@@ -101,7 +114,7 @@
 .saltCalendarDay-today,
 .saltCalendarDay-today:hover,
 .saltCalendarDay-outOfRange .saltCalendarDay-today:hover {
-  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);
+  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);
   margin-bottom: calc(var(--salt-size-indicator) * -1);
 }
 
diff --git a/packages/lab/src/date-picker/DatePickerPanel.css b/packages/lab/src/date-picker/DatePickerPanel.css
index 853468b2e3..2baee390e9 100644
--- a/packages/lab/src/date-picker/DatePickerPanel.css
+++ b/packages/lab/src/date-picker/DatePickerPanel.css
@@ -8,6 +8,7 @@
   box-shadow: var(--salt-overlayable-shadow-popout);
   box-sizing: border-box;
   display: flex;
+  border-radius: var(--salt-palette-corner, 0);
 }
 .saltDatePickerPanel-container {
   width: min-content;
diff --git a/packages/lab/stories/calendar/calendar.qa.stories.tsx b/packages/lab/stories/calendar/calendar.qa.stories.tsx
index f9333a63f1..4a8ed43a4b 100644
--- a/packages/lab/stories/calendar/calendar.qa.stories.tsx
+++ b/packages/lab/stories/calendar/calendar.qa.stories.tsx
@@ -46,4 +46,15 @@ export const AllExamples: StoryFn<QAContainerProps> = () => (
 AllExamples.parameters = {
   chromatic: { disableSnapshot: false },
   mockDate: "2024-04-01T00:00:00Z",
+  modes: {
+    theme: {
+      themeNext: "disable",
+    },
+    themeNext: {
+      themeNext: "enable",
+      corner: "rounded",
+      accent: "teal",
+      // Ignore headingFont given font is not loaded
+    },
+  },
 };