uikit-react-public 0.37.2 → 0.38.1

package/lib/components/Badge/__tests__/__snapshots__/Badge.test.tsx.snap

@@ -75,7 +75,7 @@ exports[`Badge > snapshot: variant=disabled 1`] = `
 
 exports[`Badge > snapshot: variant=info with icon 1`] = `
 <span
-  class="ucl-uikit-badge css-11fgrnl"
+  class="ucl-uikit-badge css-37ncyr"
   data-testid="ucl-uikit-badge"
 >
   <svg
@@ -108,7 +108,7 @@ exports[`Badge > snapshot: variant=info with icon 1`] = `
 
 exports[`Badge > snapshot: variant=info-subtle 1`] = `
 <span
-  class="ucl-uikit-badge css-1t6kxcm"
+  class="ucl-uikit-badge css-1x6sfca"
   data-testid="ucl-uikit-badge"
 >
   Info subtle

package/lib/components/Blanket/Blanket.tsx

@@ -35,7 +35,7 @@ const Blanket = forwardRef<Ref, BlanketProps>(
       outline: 0;
       user-select: none;
       pointer-events: auto;
-      background-color: ${theme.color.overlay};
+      background-color: ${theme.colour.surface.backdrop};
     `;
 
     const style = cx(NAME, baseStyle, className);

package/lib/components/Blanket/__tests__/__snapshots__/Blanket.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`<Blanket> Component > matches snapshot with no props 1`] = `
 <div
   aria-hidden="true"
   aria-label="Backdrop overlay, click to close modal"
-  class="ucl-blanket css-gsa5om"
+  class="ucl-blanket css-1kp3xax"
   data-testid="ucl-blanket"
 />
 `;

package/lib/components/Button/__tests__/Button.test.tsx

@@ -3,7 +3,16 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Button from '../Button';
 import Icon from '../../Icon';
-import { ThemeContextProvider } from '../../../theme/useTheme';
+import { darkTheme, ThemeContextProvider } from '../../../theme';
+
+const hexToRgb = (hex: string) => {
+  const value = hex.replace('#', '');
+  const red = parseInt(value.slice(0, 2), 16);
+  const green = parseInt(value.slice(2, 4), 16);
+  const blue = parseInt(value.slice(4, 6), 16);
+
+  return `rgb(${red}, ${green}, ${blue})`;
+};
 
 describe('Button', () => {
   test('snapshot: no props', () => {
@@ -275,4 +284,40 @@ describe('Button', () => {
 
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
+
+  test.each([
+    ['accent', darkTheme.colour.text.inverse],
+    ['primary-destructive', darkTheme.colour.text.inverse],
+    ['primary-warning', darkTheme.colour.text.caution],
+  ] as const)(
+    'uses readable semantic text colour for dark %s variant',
+    (variant, expectedColour) => {
+      render(
+        <ThemeContextProvider theme='dark'>
+          <Button variant={variant}>{variant}</Button>
+        </ThemeContextProvider>
+      );
+
+      expect(getComputedStyle(screen.getByRole('button')).color).toBe(
+        hexToRgb(expectedColour)
+      );
+    }
+  );
+
+  test('uses the dark theme focus ring', () => {
+    render(
+      <ThemeContextProvider theme='dark'>
+        <Button>Focused</Button>
+      </ThemeContextProvider>
+    );
+
+    const cssText = document.head.textContent?.replace(/\s/g, '');
+    const expectedFocusShadow =
+      `0 0 0 2px ${darkTheme.colour.border.inverse}, ` +
+      `0 0 0 4px ${darkTheme.colour.border.focus}`;
+
+    expect(cssText).toContain(
+      `box-shadow:${expectedFocusShadow.replace(/\s/g, '')}`
+    );
+  });
 });

package/lib/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Button > maps legacy destructive prop to destructive variants 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-ay3o9w"
+  class="ucl-uikit-button css-rl1hmu"
   data-testid="ucl-uikit-button"
 >
   Delete
@@ -83,7 +83,7 @@ exports[`Button > snapshot: testId prop 1`] = `
 exports[`Button > snapshot: variant prop 1`] = `
 <button
   aria-disabled="false"
-  class="ucl-uikit-button css-vpw5wr"
+  class="ucl-uikit-button css-ub9awk"
   data-testid="ucl-uikit-button"
 />
 `;

package/lib/components/Button/style/buttonAccentStyle.ts

@@ -18,7 +18,7 @@ const buttonAccentStyle = (
 
   const baseStyle = css`
     background-color: ${bgColour};
-    color: ${theme.colour.text.brandInverse};
+    color: ${theme.colour.text.inverse};
   `;
 
   const selectedStyle = css`

package/lib/components/Button/style/buttonPrimaryDestructiveStyle.ts

@@ -19,7 +19,7 @@ const buttonPrimaryDestructiveStyle = (
 
   const baseStyle = css`
     background-color: ${bgColour};
-    color: ${theme.colour.text.brandInverse};
+    color: ${theme.colour.text.inverse};
   `;
 
   const selectedStyle = css`

package/lib/components/Button/style/buttonPrimaryWarningStyle.ts

@@ -12,7 +12,7 @@ const buttonPrimaryWarningStyle = (
     colour: { fill, text },
   } = theme;
 
-  const textColour = text.default;
+  const textColour = text.caution;
   const bgColour = fill.caution;
   const bgHoverColour = fill.cautionHover;
   const bgActiveColour = fill.cautionPressed;

package/lib/components/Button/style/buttonSecondarySubtleStyle.ts

@@ -28,7 +28,7 @@ const buttonSecondarySubtleStyle = (
   const adjustedPaddingPx = paddingPx + 1;
 
   const baseStyle = css`
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
     color: ${textColour};
     border: ${theme.border.b1} solid ${borderColour};
     padding: 0 ${adjustedPaddingPx}px;

package/lib/components/Calendar/Calendar.tsx

@@ -78,6 +78,7 @@ const Calendar = ({
     border: 1px solid ${theme.colour.border.subtle}; // todo: incorrect border colour / need a new border colour defined
     padding: 16px;
     background-color: ${theme.colour.fill.inverse};
+    color: ${theme.colour.text.default};
   `;
 
   const innerContainerStyle = css`

package/lib/components/Calendar/__tests__/__snapshots__/Calendar.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Calendar > Snapshot: no date provided 1`] = `
 <div
-  class="ucl-uikit-calendar css-1qlai2s"
+  class="ucl-uikit-calendar css-o3t9du"
   data-testid="ucl-uikit-calendar"
 >
   <div
@@ -110,7 +110,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           24
         </div>
@@ -123,7 +123,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           25
         </div>
@@ -136,7 +136,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           26
         </div>
@@ -149,7 +149,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           27
         </div>
@@ -162,7 +162,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           28
         </div>
@@ -578,7 +578,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           1
         </div>
@@ -591,7 +591,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           2
         </div>
@@ -604,7 +604,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           3
         </div>
@@ -617,7 +617,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           4
         </div>
@@ -630,7 +630,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           5
         </div>
@@ -643,7 +643,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           6
         </div>
@@ -658,7 +658,7 @@ exports[`Calendar > Snapshot: no date provided 1`] = `
 
 exports[`Calendar > Snapshot: with date provided 1`] = `
 <div
-  class="ucl-uikit-calendar css-1qlai2s"
+  class="ucl-uikit-calendar css-o3t9du"
   data-testid="ucl-uikit-calendar"
 >
   <div
@@ -766,7 +766,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           30
         </div>
@@ -779,7 +779,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           31
         </div>
@@ -1195,7 +1195,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           1
         </div>
@@ -1208,7 +1208,7 @@ exports[`Calendar > Snapshot: with date provided 1`] = `
         data-testid="ucl-uikit-calendar__day"
       >
         <div
-          class="css-53a08n"
+          class="css-l50tvc"
         >
           2
         </div>

package/lib/components/Calendar/subcomponents/AcademicWeek.tsx

@@ -18,7 +18,6 @@ const AcademicWeek = ({ weekNumber }: AcademicWeekProps) => {
     height: 40px;
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f14};
-    /* color: #6345a5; */
     color: ${theme.colour.text.brandPrimary};
   `;
 

package/lib/components/Calendar/subcomponents/Day.tsx

@@ -71,7 +71,7 @@ const Day = ({
 
         &:hover {
           background-color: ${
-            isSelected ? theme.color.neutral.grey10 : theme.color.neutral.white
+            isSelected ? theme.colour.fill.disabled : theme.colour.fill.inverse
           };
         }
       `
@@ -86,7 +86,7 @@ const Day = ({
     ${
       !isInCurrentMonth &&
       css`
-        color: ${theme.color.neutral.grey40};
+        color: ${theme.colour.text.tertiary};
       `
     }
     ${

package/lib/components/Chip/Chip.tsx

@@ -48,17 +48,16 @@ const Chip = forwardRef<Ref, ChipProps>(
       min-height: 32px;
       width: fit-content;
       padding: ${theme.margin.m4} ${theme.margin.m16};
-      border: ${theme.border.b1} solid ${theme.colour.icon.brand};
+      border: ${theme.border.b1} solid ${theme.colour.border.brand};
       border-radius: 16px;
       outline: none;
       box-sizing: border-box;
-      color: ${theme.colour.icon.inverse};
       transition:
         background-color 0.15s ease-out,
         border-color 0.15s ease-out;
       cursor: pointer;
-      background-color: ${theme.colour.icon.inverse};
-      color: ${theme.colour.icon.brand};
+      background-color: ${theme.colour.fill.default};
+      color: ${theme.colour.text.brand};
 
       &:hover {
         background-color: ${theme.colour.fill.brandSubtleHover};
@@ -69,13 +68,13 @@ const Chip = forwardRef<Ref, ChipProps>(
       }
 
       &:has(input:checked) {
-        background-color: ${theme.colour.icon.brandSelectedOnBgFill};
-        border-color: ${theme.colour.icon.brandSelectedOnBgFill};
-        color: ${theme.colour.icon.inverse};
+        background-color: ${theme.colour.fill.brandPressed};
+        border-color: ${theme.colour.border.focus};
+        color: ${theme.colour.text.inverse};
       }
 
       &:has(input:checked):hover {
-        background-color: ${theme.colour.icon.brandSelectedOnBgFill};
+        background-color: ${theme.colour.fill.brandPressed};
       }
 
       &:has(input:disabled),

package/lib/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Chip > snapshot: checked prop 1`] = `
 <label
-  class="ucl-uikit-chip css-1j50qe4"
+  class="ucl-uikit-chip css-cngnam"
 >
   <span
     class="ucl-uikit-base-checkbox css-1mmc74g"
@@ -53,7 +53,7 @@ exports[`Chip > snapshot: checked prop 1`] = `
 
 exports[`Chip > snapshot: disabled and checked props 1`] = `
 <label
-  class="ucl-uikit-chip css-1j50qe4"
+  class="ucl-uikit-chip css-cngnam"
 >
   <span
     class="ucl-uikit-base-checkbox css-lp1eko"
@@ -105,7 +105,7 @@ exports[`Chip > snapshot: disabled and checked props 1`] = `
 
 exports[`Chip > snapshot: disabled prop 1`] = `
 <label
-  class="ucl-uikit-chip css-1j50qe4"
+  class="ucl-uikit-chip css-cngnam"
 >
   <span
     class="ucl-uikit-base-checkbox css-lp1eko"
@@ -156,7 +156,7 @@ exports[`Chip > snapshot: disabled prop 1`] = `
 
 exports[`Chip > snapshot: no props 1`] = `
 <label
-  class="ucl-uikit-chip css-1j50qe4"
+  class="ucl-uikit-chip css-cngnam"
 >
   <span
     class="ucl-uikit-base-checkbox css-1mmc74g"
@@ -206,7 +206,7 @@ exports[`Chip > snapshot: no props 1`] = `
 
 exports[`Chip > snapshot: testId prop 1`] = `
 <label
-  class="ucl-uikit-chip css-1j50qe4"
+  class="ucl-uikit-chip css-cngnam"
 >
   <span
     class="ucl-uikit-base-checkbox css-1mmc74g"

package/lib/components/CookieNotice/CookieNotice.tsx

@@ -48,7 +48,7 @@ const CookieNotice = ({
     right: 0;
     bottom: 0;
     height: auto;
-    background-color: ${theme.color.neutral.grey40};
+    background-color: ${theme.colour.surface.secondary};
     padding: ${theme.padding.p20} ${theme.padding.p24};
   `;
 
@@ -64,9 +64,9 @@ const CookieNotice = ({
   const policyLinkStyle = css`
     margin-left: ${theme.margin.m16};
     display: inline-flex;
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     &:visited {
-      color: ${theme.color.text.primary};
+      color: ${theme.colour.text.default};
     }
   `;
 

package/lib/components/Datepicker/__tests__/Datepicker.test.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { describe, test, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ThemeContextProvider } from '../../../theme';
+import { ThemeContextProvider, darkTheme } from '../../../theme';
 import Datepicker from '..';
 import announce from '../../../utils/announce';
 
@@ -11,6 +11,15 @@ vi.mock('../../../utils/announce');
 
 const defaultTestId = 'ucl-uikit-datepicker';
 
+const hexToRgb = (hex: string) => {
+  const value = hex.replace('#', '');
+  const red = parseInt(value.slice(0, 2), 16);
+  const green = parseInt(value.slice(2, 4), 16);
+  const blue = parseInt(value.slice(4, 6), 16);
+
+  return `rgb(${red}, ${green}, ${blue})`;
+};
+
 const customRender = (ui: React.ReactElement) => {
   return render(ui, {
     wrapper: ({ children }) => (
@@ -105,6 +114,30 @@ describe('Datepicker', () => {
     expect(input).toHaveValue('10/03/2025');
   });
 
+  test('uses the dark theme colours for the visible field and input', () => {
+    render(
+      <ThemeContextProvider theme='dark'>
+        <Datepicker />
+      </ThemeContextProvider>
+    );
+
+    const expectedBackground = hexToRgb(darkTheme.colour.fill.inverse);
+    const expectedForeground = hexToRgb(darkTheme.colour.text.default);
+
+    expect(
+      getComputedStyle(
+        screen.getByTestId('ucl-uikit-datepicker__visible-field')
+      ).backgroundColor
+    ).toBe(expectedBackground);
+    expect(
+      getComputedStyle(screen.getByTestId('ucl-uikit-datepicker__input'))
+        .backgroundColor
+    ).toBe(expectedBackground);
+    expect(
+      getComputedStyle(screen.getByTestId('ucl-uikit-datepicker__input')).color
+    ).toBe(expectedForeground);
+  });
+
   test('Calendar appears on input focus', async () => {
     customRender(<Datepicker />);
     const input = screen.getByTestId('ucl-uikit-datepicker__input');
@@ -116,6 +149,30 @@ describe('Datepicker', () => {
 
     // Calendar should now be visible
     expect(screen.getByTestId('ucl-uikit-calendar')).toBeInTheDocument();
+    const panel = screen.getByTestId('ucl-uikit-datepicker__panel');
+    expect(panel.parentElement).toHaveClass('ucl-overlay');
+  });
+
+  test('Panel escapes a containing dialog via fixed positioning', () => {
+    customRender(
+      <dialog open>
+        <Datepicker />
+      </dialog>
+    );
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    fireEvent.focus(input);
+
+    const panel = screen.getByTestId('ucl-uikit-datepicker__panel');
+    expect(panel.parentElement).toHaveStyle({ position: 'fixed' });
+  });
+
+  test('Panel uses absolute positioning outside of a dialog', () => {
+    customRender(<Datepicker />);
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    fireEvent.focus(input);
+
+    const panel = screen.getByTestId('ucl-uikit-datepicker__panel');
+    expect(panel.parentElement).toHaveStyle({ position: 'absolute' });
   });
 
   test('value after minDate is set to null automatically', () => {

package/lib/components/Datepicker/__tests__/__snapshots__/Datepicker.test.tsx.snap

@@ -6,11 +6,11 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
   data-testid="ucl-uikit-datepicker"
 >
   <div
-    class="ucl-uikit-datepicker__visible-field css-e3vwui"
+    class="ucl-uikit-datepicker__visible-field css-j8089z"
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
-      class="ucl-uikit-datepicker__input css-1k3pose"
+      class="ucl-uikit-datepicker__input css-1xl7vs4"
       data-testid="ucl-uikit-datepicker__input"
       inputmode="numeric"
       placeholder="DD/MM/YYYY"
@@ -25,7 +25,7 @@ exports[`Datepicker > Snapshot: no date provided 1`] = `
       type="button"
     >
       <svg
-        class="ucl-uikit-icon css-1u4xgls"
+        class="ucl-uikit-icon css-19m0hpd"
         data-testid="ucl-uikit-icon"
         fill="none"
         focusable="false"
@@ -61,11 +61,11 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
   data-testid="ucl-uikit-datepicker"
 >
   <div
-    class="ucl-uikit-datepicker__visible-field css-e3vwui"
+    class="ucl-uikit-datepicker__visible-field css-j8089z"
     data-testid="ucl-uikit-datepicker__visible-field"
   >
     <input
-      class="ucl-uikit-datepicker__input css-1k3pose"
+      class="ucl-uikit-datepicker__input css-1xl7vs4"
       data-testid="ucl-uikit-datepicker__input"
       inputmode="numeric"
       placeholder="DD/MM/YYYY"
@@ -80,7 +80,7 @@ exports[`Datepicker > Snapshot: with date provided 1`] = `
       type="button"
     >
       <svg
-        class="ucl-uikit-icon css-1u4xgls"
+        class="ucl-uikit-icon css-19m0hpd"
         data-testid="ucl-uikit-icon"
         fill="none"
         focusable="false"

package/lib/components/Datepicker/subcomponents/CustomDatepicker.tsx

@@ -2,8 +2,10 @@ import { useRef, useEffect, useState, useCallback } from 'react';
 import { css, cx } from '@emotion/css';
 import { VisibleField, Panel } from '.';
 import { Calendar } from '../..';
+import Overlay from '../../Overlay';
 import { parseInputValue } from '../utils';
 import announce from '../../../utils/announce';
+import { useTheme } from '../../../theme';
 import type { DatepickerValue } from '../Datepicker.types';
 import type { CalendarEvent, AcademicWeek } from '../../Calendar';
 import type { InputProps } from './DatepickerInput';
@@ -57,7 +59,9 @@ const CustomDatepicker = ({
   const effectiveInputRef = inputRef || internalInputRef;
   const restoreFocusAfterClearRef = useRef(false);
 
+  const [theme] = useTheme();
   const [panelOpen, setPanelOpen] = useState(false);
+  const overlayViewportPadding = parseFloat(theme.margin.m32);
 
   // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
   const day = value?.getDate().toString().padStart(2, '0') ?? '';
@@ -233,17 +237,34 @@ const CustomDatepicker = ({
         inputProps={inputProps}
       />
       {panelOpen && (
-        <Panel>
-          <Calendar
-            pickedDate={value}
-            onDatePick={handlePickCalendarDate}
-            minDate={minDate}
-            maxDate={maxDate}
-            events={events}
-            showAcademicWeeks={showAcademicWeeks}
-            academicWeeks={academicWeeks}
-          />
-        </Panel>
+        <Overlay
+          reference={effectiveRef}
+          placement='bottom-start'
+          // Escape the dialog's bounds via `fixed` positioning when it's too
+          // small to fit the panel, rather than squeezing/clipping it to fit.
+          strategy={
+            effectiveRef.current?.closest('dialog') ? 'fixed' : 'absolute'
+          }
+          flip={{ padding: overlayViewportPadding }}
+          shift={{
+            padding: overlayViewportPadding,
+            mainAxis: false,
+            crossAxis: true,
+          }}
+          offset={8}
+        >
+          <Panel>
+            <Calendar
+              pickedDate={value}
+              onDatePick={handlePickCalendarDate}
+              minDate={minDate}
+              maxDate={maxDate}
+              events={events}
+              showAcademicWeeks={showAcademicWeeks}
+              academicWeeks={academicWeeks}
+            />
+          </Panel>
+        </Overlay>
       )}
     </div>
   );