Update styling of date picker and calendar (#3695)

jpmorganchase · Jul 5, 2024 · 62d917d · 62d917d
1 parent 71e9586
commit 62d917d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/.changeset/hip-mirrors-attend.md 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
@@ -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
@@ -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
@@ -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
+    },
+  },
 };