uikit-react-public 0.32.5 → 0.36.0

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

@@ -47,31 +47,35 @@ const Day = ({
     outline: none;
 
     &:hover {
-      background-color: ${theme.colour.fill.hover};
+      background-color: ${theme.colour.fill.primary};
     }
 
-    ${isSelected &&
-    css`
-      background-color: ${isDisabled
-        ? theme.colour.fill.disabled
-        : theme.colour.fill.brand};
-
-      color: ${theme.colour.text.inverse};
-
-      &:hover {
-        background-color: ${theme.colour.fill.brandHover};
-      }
-    `}
-    ${isDisabled &&
-    css`
-      cursor: not-allowed;
-
-      &:hover {
-        background-color: ${isSelected
-          ? theme.color.neutral.grey10
-          : theme.color.neutral.white};
-      }
-    `}
+    ${
+      isSelected &&
+      css`
+        background-color: ${
+          isDisabled ? theme.colour.fill.disabled : theme.colour.fill.brand
+        };
+
+        color: ${theme.colour.text.inverse};
+
+        &:hover {
+          background-color: ${theme.colour.fill.brandHover};
+        }
+      `
+    }
+    ${
+      isDisabled &&
+      css`
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: ${
+            isSelected ? theme.color.neutral.grey10 : theme.color.neutral.white
+          };
+        }
+      `
+    }
   `;
 
   const foregroundStyle = css`
@@ -79,18 +83,24 @@ const Day = ({
     user-select: none;
     font-size: 16px;
 
-    ${!isInCurrentMonth &&
-    css`
-      color: ${theme.color.neutral.grey40};
-    `}
-    ${isToday &&
-    css`
-      font-weight: 700;
-    `}
-    ${isDisabled &&
-    css`
-      color: ${theme.colour.text.disabled};
-    `}
+    ${
+      !isInCurrentMonth &&
+      css`
+        color: ${theme.color.neutral.grey40};
+      `
+    }
+    ${
+      isToday &&
+      css`
+        font-weight: 700;
+      `
+    }
+    ${
+      isDisabled &&
+      css`
+        color: ${theme.colour.text.disabled};
+      `
+    }
   `;
 
   const eventDotsContainerStyle = css`

package/lib/components/Dropdown/Dropdown.stories.tsx

@@ -68,7 +68,7 @@ export const HeaderResponsiveTrigger: Story = {
       cursor: pointer;
 
       &:hover {
-        background-color: ${theme.colour.fill.hover};
+        background-color: ${theme.colour.fill.primary};
       }
     `;
 

package/lib/components/Snackbar/Snackbar.tsx

@@ -64,7 +64,7 @@ const Snackbar = ({
     min-height: ${minHeight};
     z-index: 9999;
     padding: ${padding};
-    color: ${theme.colour.text.inverse};
+    color: ${theme.colour.text.brandInverse};
     background-color: ${backgroundColor};
   `;
 
@@ -90,7 +90,7 @@ const Snackbar = ({
 
   const closeButtonStyle = css`
     &:hover {
-      color: ${theme.colour.icon.inverseHover};
+      color: ${theme.colour.icon.brandInverse}; // todo: update to hover token when available
     }
   `;
 
@@ -98,11 +98,11 @@ const Snackbar = ({
     padding: ${theme.padding.p4};
     border: none;
     background-color: transparent;
-    color: ${theme.colour.text.inverse};
+    color: ${theme.colour.text.brandInverse};
     cursor: pointer;
 
     &:hover {
-      color: ${theme.colour.icon.inverseHover};
+      color: ${theme.colour.icon.brandInverse}; // todo: update to hover token when available
     }
 
     &:focus-visible {

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

@@ -2,7 +2,7 @@
 
 exports[`Snackbar > snapshot: custom test id 1`] = `
 <div
-  class="ucl-uikit-snackbar css-4vd8ej"
+  class="ucl-uikit-snackbar css-x2zf4j"
   data-testid="custom-test-id"
 >
   <svg
@@ -40,7 +40,7 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
     class="css-1xjm0bq"
   >
     <button
-      class="css-1s4q0nw"
+      class="css-16c49qk"
       data-testid="custom-test-id-undo-button"
     >
       <span
@@ -56,7 +56,7 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
 
 exports[`Snackbar > snapshot: minimal props 1`] = `
 <div
-  class="ucl-uikit-snackbar css-4vd8ej"
+  class="ucl-uikit-snackbar css-x2zf4j"
   data-testid="ucl-uikit-snackbar"
 >
   <svg
@@ -95,7 +95,7 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
   >
     <button
       aria-label="Dismiss notification"
-      class="ucl-uikit-icon-button css-uv5ig"
+      class="ucl-uikit-icon-button css-1kh68vi"
       data-testid="ucl-uikit-snackbar-close-button"
     >
       <svg

package/lib/components/Toggle/Toggle.tsx

@@ -47,7 +47,7 @@ const Toggle = forwardRef<Ref, ToggleProps>(
     `;
 
     const disabledStyle = css`
-      background-color: ${theme.colour.surface.disabled};
+      background-color: ${theme.colour.fill.disabled};
       cursor: not-allowed;
     `;
 
@@ -55,9 +55,9 @@ const Toggle = forwardRef<Ref, ToggleProps>(
       !disabled &&
       css`
         &:hover {
-          background-color: ${checked
-            ? theme.colour.fill.brandHover
-            : theme.colour.icon.secondary};
+          background-color: ${
+            checked ? theme.colour.fill.brandHover : theme.colour.icon.secondary
+          };
         }
       `;
 

package/lib/theme/__tests__/useTheme.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 import defaultTheme from '../original/defaultTheme';
 import lightTheme from '../light/lightTheme';
+import darkTheme from '../dark/darkTheme';
 import { ThemeContextProvider, ThemeConsumer, themes } from '../useTheme';
 import type { ThemeType } from '../original/defaultTheme';
 
@@ -10,6 +11,12 @@ const ThemeProbe = () => (
     {({ theme, setTheme }) => (
       <>
         <span data-testid='bg-default'>{theme.colour.bg.default}</span>
+        <button
+          data-testid='set-dark'
+          onClick={() => setTheme(darkTheme)}
+        >
+          set-dark
+        </button>
         <button
           data-testid='set-default'
           onClick={() => setTheme(defaultTheme)}
@@ -85,8 +92,29 @@ describe('useTheme', () => {
     );
   });
 
+  test('sets document colours from the active theme', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(document.body).toHaveStyle({
+      backgroundColor: lightTheme.colour.bg.brand,
+      color: lightTheme.colour.text.default,
+    });
+
+    fireEvent.click(screen.getByTestId('set-dark'));
+
+    expect(document.body).toHaveStyle({
+      backgroundColor: darkTheme.colour.bg.brand,
+      color: darkTheme.colour.text.default,
+    });
+  });
+
   test('exports named themes map', () => {
     expect(themes.default).toBe(defaultTheme);
     expect(themes.light).toBe(lightTheme);
+    expect(themes.dark).toBe(darkTheme);
   });
 });